/* ==========================================
   COMPARE.CSS — Styles pour le tableau comparatif
   (concurrents clé-en-main vs nous)
   Utilisé sur la homepage (index.html) et en modal sur les pages guide/
   ========================================== */

/* ── Comparatif table ── */
    .compare {
      text-align: center;
      position: relative; z-index: 1;
      overflow: hidden;
      background: linear-gradient(180deg, rgba(55,82,244,0.04) 0%, #fff 40%, rgba(55,82,244,0.06) 100%);
    }
    .cmp-highlight { display:inline-block; font-weight:800; font-size:1.2em; color:var(--blue,#3752F4); background:var(--blue-light,#e8ebfe); padding:2px 10px; border-radius:6px; margin:0 2px; }
    .cmp-table {
      width: 100%; max-width: 1060px; margin: 56px auto 0;
      border-collapse: separate; border-spacing: 0;
    }
    .cmp-table thead th {
      padding: 24px 16px 18px; vertical-align: bottom;
      font-weight: 400; font-size: 0.85rem; color: var(--gray-400);
      border-bottom: 2px solid var(--border);
    }
    .cmp-table thead th:first-child {
      text-align: left; width: 260px; font-size: 0.7rem; font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-400);
    }
    .cmp-logo {
      display: flex; flex-direction: column; align-items: center; gap: 2px;
    }
    .cmp-logo__name {
      font-size: 0.78rem; font-weight: 700; color: var(--gray-400);
      line-height: 1.3; text-align: center;
    }
    .cmp-table thead th.cmp-th--ours { position: relative; }
    .cmp-th--ours::before {
      content: ''; position: absolute; top: 0; left: 4px; right: 4px; bottom: 0;
      background: var(--blue-dark); border-radius: 20px 20px 0 0; z-index: -1;
    }
    .cmp-th--ours .cmp-logo__name { color: #fff; font-size: 0.82rem; font-weight: 800; }
    .cmp-logo--nav {
      flex-direction: row !important; gap: 5px !important; justify-content: center;
      align-items: center !important;
      transform: translateY(-18px);
    }
    .cmp-logo__icon-nav {
      width: 72px; height: auto;
      filter: brightness(0) invert(1);
    }
    .cmp-logo__text-nav {
      display: flex; flex-direction: column; text-align: left; line-height: 1.1;
    }
    .cmp-logo__text-nav span:first-child {
      font-size: 1.35rem; font-weight: 800; color: #fff;
    }
    .cmp-logo__text-nav span:last-child {
      font-size: 1.35rem; font-weight: 700; color: var(--blue);
    }
    .cmp-th--competitors {
      vertical-align: middle;
    }
    .cmp-th--ours {
      vertical-align: middle;
    }
    .cmp-th--ours .cmp-logo__icon {
      width: 96px; height: 96px; display: flex; align-items: center; justify-content: center;
      margin-bottom: 6px;
    }
    .cmp-th--ours .cmp-logo__icon img { width: 80px; height: auto; }
    .cmp-table tbody td {
      padding: 16px 16px; font-size: 0.88rem; color: var(--gray-400);
      border-bottom: 1px solid var(--border); text-align: center;
      vertical-align: middle; font-weight: 500;
    }
    .cmp-table tbody td:first-child {
      text-align: left; font-weight: 600; color: var(--blue-dark); font-size: 0.9rem;
    }
    .cmp-table tbody td.cmp-td--ours { position: relative; }
    .cmp-td--ours::before {
      content: ''; position: absolute; top: 0; left: 4px; right: 4px; bottom: 0;
      background: var(--blue-dark); z-index: -1;
    }
    .cmp-td--ours { color: #fff !important; font-weight: 700; }
    .cmp-table tbody tr:last-child td.cmp-td--ours::before { border-radius: 0 0 20px 20px; }
    .cmp-table tbody tr:last-child td { border-bottom: none; }
    .cmp-yes { color: var(--blue-dark); font-weight: 700; font-size: 0.82rem; }
    .cmp-no { color: var(--gray-200); font-weight: 600; font-size: 0.82rem; }
    .cmp-partial { color: var(--gray-400); font-weight: 600; font-size: 0.82rem; font-style: italic; }
    .cmp-ours { color: #fff; font-weight: 800; font-size: 0.85rem; }
    .cmp-val { font-weight: 800; font-size: 0.92rem; color: var(--blue-dark); }
    .cmp-val--ours { font-weight: 900; font-size: 0.92rem; color: #fff; }
    .cmp-total-row td {
      padding-top: 24px !important; padding-bottom: 24px !important;
      border-bottom: none !important; border-top: 2px solid var(--border);
    }
    .cmp-total-row td:first-child {
      font-size: 0.7rem !important; font-weight: 800 !important;
      letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-400) !important;
    }
    .cmp-total { font-size: 1.05rem; font-weight: 900; color: var(--blue-dark); }
    .cmp-total--ours { font-size: 1.1rem; font-weight: 900; color: #fff !important; letter-spacing: -0.02em; text-decoration: underline; text-underline-offset: 4px; }
    .cmp-saving {
      display: inline-block; background: rgba(255,255,255,0.15);
      padding: 3px 12px; border-radius: 50px; font-weight: 800;
      font-size: 0.78rem; margin-top: 4px; color: #fff;
    }
    .cmp-rdt-row td { border-top: none; }
    .cmp-rdt-val { font-size:1.15rem; font-weight: 900; color: var(--blue-dark); }
    .cmp-rdt-val--ours { font-size:1.15rem; font-weight: 900; color: #fff; text-decoration: underline; text-underline-offset: 4px; }
    .cmp-cta-row td { border-bottom: none !important; padding-top: 4px !important; }
    .cmp-cta-btn {
      display: inline-flex; align-items: center; gap: 6px;
      background: #fff; color: var(--blue-dark); font-size: 0.82rem; font-weight: 700;
      padding: 11px 24px; border-radius: 10px; text-decoration: none;
      transition: all 0.25s;
    }
    .cmp-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }

    /* 3-col layout */
    .cmp-table--3col { max-width: 760px; }
    .cmp-table--3col thead th:first-child { width: 280px; }
    .cmp-table--3col thead th:not(:first-child) { width: calc((100% - 280px) / 2); }
    .cmp-th--competitors {
      vertical-align: bottom; text-align: center;
    }
    /* Chips for bien type */
    .cmp-chip {
      display: flex; align-items: center; gap: 5px;
      background: #fff; border: 1px solid var(--border);
      border-radius: 10px; padding: 5px 8px 5px 5px;
      flex-shrink: 1; min-width: 0;
      transition: box-shadow 0.2s;
    }
    .cmp-chip:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
    .cmp-chip__text { white-space: nowrap; }
    .cmp-show-mobile { display: none; }
    .cmp-chip__icon {
      width: 28px; height: 28px; border-radius: 7px;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .cmp-chip__text { display: flex; flex-direction: column; line-height: 1.2; }
    .cmp-chip__val { font-size: 0.78rem; font-weight: 700; color: var(--blue-dark); }
    .cmp-chip__label { font-size: 0.62rem; color: var(--gray-400); }
    .cmp-chip--accent { border-color: var(--accent); background: var(--accent-light); }
    .cmp-chip--accent .cmp-chip__val { color: var(--accent); }

    .cmp-competitors-logos {
      display: grid; grid-template-columns: 1fr 1fr;
      justify-items: center; align-items: center;
      gap: 8px; margin-bottom: 8px; width: 160px; margin-left: auto; margin-right: auto;
    }
    .cmp-competitors-logos img {
      width: 60px; height: 60px; border-radius: 12px; object-fit: contain;
      background: #f5f5f5; padding: 3px;
    }
    .cmp-competitors-logos img[alt="Masteos"] {
      background: rgb(228,221,209);
      width: 120px; height: 50px; border-radius: 10px; padding: 6px;
    }
    .cmp-competitors-logos img:first-child {
      grid-column: 1 / -1; justify-self: center;
    }

    /* Tablette : on monte le breakpoint compressé de 900 → 1024px pour que
       les iPad portrait/landscape voient la version optimisée (font 0.78rem,
       padding réduit) au lieu de la version desktop full-size qui déborde.
       On harmonise aussi les chiffres pour que l'écart entre vals (0.85rem)
       et rendement/total (~1rem) reste raisonnable (ratio max 1.3x). */
    @media (max-width: 1024px) {
      .cmp-table { font-size: 0.78rem; }
      .cmp-table thead th, .cmp-table tbody td { padding: 12px 8px; }
      .cmp-table thead th:first-child { width: 140px; }
      .cmp-logo__name { font-size: 0.6rem; }
      /* Harmonisation des chiffres : on garde un rythme typographique
         resserré pour pas que l'œil saute d'une taille à l'autre. */
      .cmp-val, .cmp-val--ours { font-size: 0.85rem; }
      .cmp-total, .cmp-total--ours { font-size: 0.95rem; }
      .cmp-rdt-val, .cmp-rdt-val--ours { font-size: 1rem; }
    }
    @media (max-width: 640px) {
      .cmp-hide-mobile { display: none !important; }
      .cmp-show-mobile { display: inline !important; }
      .compare { overflow-x: hidden !important; }
      .compare .container { overflow-x: hidden !important; }
      .cmp-scroll { overflow-x: hidden; margin: 0; padding: 0; }

      /* Table fluide sans scroll — tout tient dans l'écran */
      .cmp-table, .cmp-table--3col {
        min-width: 0; width: 100%;
        font-size: 0.72rem; table-layout: fixed;
      }
      .cmp-table--3col thead th:first-child { width: 30%; }
      .cmp-table--3col thead th:nth-child(2) { width: 35%; }
      .cmp-table--3col thead th:nth-child(3) { width: 35%; }
      .cmp-table--3col thead th { padding: 10px 5px 8px; }
      .cmp-table--3col tbody td {
        padding: 9px 6px !important; font-size: 0.74rem;
        word-break: break-word; line-height: 1.35;
      }
      .cmp-table--3col tbody td:first-child {
        font-size: 0.68rem; line-height: 1.3;
      }

      /* Logos colonnes */
      .cmp-th--ours .cmp-logo__icon { width: 26px; height: 26px; }
      .cmp-th--ours .cmp-logo__icon img { width: 20px; }
      .cmp-competitors-logos {
        gap: 4px; width: 96px !important;
        margin-bottom: 4px;
      }
      .cmp-competitors-logos img[alt="Masteos"] { width: 60px !important; height: 26px !important; }
      .cmp-competitors-logos img:not([alt="Masteos"]) { width: 34px !important; height: 34px !important; }
      .cmp-logo--nav { transform: translateY(-6px) !important; gap: 3px !important; }
      .cmp-logo__icon-nav { width: 22px !important; }
      .cmp-logo__text-nav span:first-child,
      .cmp-logo__text-nav span:last-child { font-size: 0.6rem !important; }

      /* Valeurs tableau */
      .cmp-val, .cmp-val--ours { font-size: 0.78rem !important; font-weight: 800 !important; }
      .cmp-yes, .cmp-ours, .cmp-partial { font-size: 0.74rem !important; }
      .cmp-total, .cmp-total--ours { font-size: 1rem !important; }
      .cmp-rdt-val, .cmp-rdt-val--ours { font-size:0.95rem !important; }
      .cmp-cta-btn { font-size: 0.65rem; padding: 8px 12px; white-space: nowrap; }

      /* Sous-totaux & rendements */
      .cmp-subtotal td {
        font-size: 0.82rem !important;
        padding: 7px 6px !important;
        font-weight: 800 !important;
      }
      .cmp-subtotal td:first-child span { font-size: 0.58rem !important; letter-spacing: 0.02em !important; }
      .cmp-rdt-row td:first-child span {
        font-size: 0.55rem !important; padding: 4px 8px !important;
        white-space: nowrap;
      }
      .cmp-total-row td { font-size: 0.72rem !important; }
      .cmp-total-row td:first-child { font-size: 0.58rem !important; letter-spacing: 0 !important; }

      /* Lignes secondaires (ex: ≃7,5%) */
      .cmp-table--3col tbody td span[style*="font-size:0.7rem"],
      .cmp-table--3col tbody td span[style*="font-size:0.78rem"],
      .cmp-table--3col tbody td span[style*="font-size:0.7rem;color:rgba(255"] {
        font-size: 0.58rem !important;
      }

      /* Chips (vignettes du bien) — compactes + wrap propre 2 rangées */
      [style*="flex-wrap:nowrap"] {
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: center !important;
      }
      .cmp-chip {
        padding: 5px 8px 5px 5px !important;
        gap: 5px !important;
        flex-shrink: 0 !important;
      }
      .cmp-chip__icon { width: 22px !important; height: 22px !important; }
      .cmp-chip__val { font-size: 0.68rem !important; }
      .cmp-chip__label { font-size: 0.56rem !important; }
    }