.layout{
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    width: 100%;
    align-items: start;
}


@media (min-width: 768px) {
    .layout--50-50 { grid-template-columns: 1fr 1fr; align-items: stretch; /* important */}
    .layout--70-30 { grid-template-columns: 7fr 3fr; }
    .layout--60-40 { grid-template-columns: 6fr 4fr; }
    .layout--40-60 { grid-template-columns: 4fr 6fr; }
    
    .layout--reverse > :first-child { order: 2; }
    .layout--reverse > :last-child  { order: 1; }
}


.card{
    padding: 2rem;
    background-color: #f2f2f2;
    border-radius: 8px;
}

.faq.card {
    margin-top: 2rem;
}

.faq-title {
    margin: 0 0 1rem 0;
}

.faq-item + .faq-item {
    margin-top: 1rem;
}

h1{
      font-size:1.25rem; 
}
  
@media (min-width: 768px) {
    h1 { font-size:2rem;}
}



.podium-hint{
    margin-top: 8px;
    font-size: .85rem;
    font-weight: 700;
    opacity: .9;
    line-height: 1.25;
}
    .podium-hint.gain{ color:#1b9e3e; }
    .podium-hint.loss{ color:#d93025; }

    .podium{
      display: grid;
      gap: 20px;
      margin-bottom: 24px;
    }

    @media (min-width: 768px){
      .podium{
        grid-template-columns: repeat(3, 1fr);
        gap:12px;
      }
    }

    .podium-card{
      background: #fff;
      border-radius: 14px;
      padding: 16px;
      border: 4px solid rgba(0,0,0,.08);
      text-align: center;
    }

    .podium-rank{
      font-size: 1.8rem;
      font-weight: 900;
      margin-bottom: 6px;
    }
    
    .fees-form.layout{
      display: grid;
      gap: 1.25rem;
    }
    
    /* 🔑 Centrage vertical du bloc banque */
    #currentBankCard{
      display: flex;
      align-items: center;   /* centre verticalement */
      justify-content: center; /* optionnel : centre horizontalement */
    }
    
    
    /* Colonne droite : occupe toute la hauteur et centre le contenu */
    @media (min-width: 768px){
      #currentBankCard{
        height: 100%;
        min-height: 100%;
        display: flex;
        align-items: center;      /* centre vertical */
        justify-content: center;  /* optionnel : centre horizontal */
      }
    }

    .podium-1{ border-color: #f2c94c; } /* 🥇 */
    .podium-2{ border-color: #cfd8dc; } /* 🥈 */
    .podium-3{ border-color: #d7a86e; } /* 🥉 */

    .podium-bank{
      font-weight: 800;
    }

    .podium-offer{
      font-size: .9rem;
      opacity: .75;
    }

    .podium-price{
      margin-top: 8px;
      font-size: 1.1rem;
      font-weight: 600;
    }

    .podium-sub{
      font-size: .85rem;
      opacity: .7;
    }

    /* Form */
    .fees-form { margin-top: 1rem; }
    .fees-mobile {display: flex; flex-direction: column; gap:2rem;}
    .fees-grid{
      display:grid;
      grid-template-columns: 1fr;
      gap: 12px;
      margin-top: 12px;
    }
    .fees-grid label{
      display:grid;
      gap:6px;
      font-weight:600;
    }
    .fees-grid input, .fees-grid select{
      padding: .7rem .8rem;
      border: 1px solid rgba(0,0,0,.15);
      border-radius: 10px;
      font-weight:500;
      background: white;
    }
    .fees-note{ margin-top: 10px; font-size: .95rem; opacity:.85; }

    /* Table */
    .table-wrap{ overflow:auto; display:none;}
    .fees-table{ width:100%; border-collapse: collapse; min-width: 700px; background:#fff; }
    .fees-table th, .fees-table td{ padding:12px 10px; border-bottom:1px solid rgba(0,0,0,.06); text-align:left; vertical-align: top; }
    .fees-table th{ background: rgba(0,0,0,.03); font-weight:800; }
    .fees-pill{
      display:inline-block;
      padding:4px 10px;
      border-radius: 999px;
      background: rgba(0,0,0,.05);
      font-weight:700;
    }
    .fees-btn{
      cursor:pointer;
      width:100%;
      display:block;
      text-align:center;
      border:0;
      padding:8px 12px;
      border-radius: 10px;
      background: var(--primary);
      color:#fff;
      font-weight:700;
      white-space: nowrap;
    }
    .fees-btn:hover{ background: var(--secondary); }

    /* Mobile cards (simple) */
    .detail-card{
      border:1px solid rgba(0,0,0,.08);
      border-radius: 16px;
      padding:1rem;
      background:#fff;
      background-color: #fdfdfd;
    }
    .detail-head{
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px 12px;
      align-items: center;
    }
    .detail-title{
      display:flex;
      gap: 1rem;
      align-items:center;
      margin-bottom:6px;
    }
    .rank-badge {
      min-width: 28px;
      height: 28px;
      border-radius: 999px;
      background: rgba(0,0,0,.08);
      font-size: .85rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .bank-name { font-weight: 600; }
    .offer-name { font-size: .9rem; opacity:.75; }
    .subtle{ opacity: .75; font-size: .9rem; }

    @media (min-width: 768px){
      .table-wrap { display: block; }
        .detail-card{padding:2rem;}
    }
    
    .detail-row{ display:none; }
    .detail-row.open{ display: table-row; }
    .m-detail-body{margin-top:10px; }
    .m-detail-body[hidden]{ display:none; }
    
    
.podium-card{
  display:block;
  text-decoration:none;
  color:inherit;
  will-change: transform, box-shadow;
  transition: transform .15s ease, box-shadow .15s ease; /* ✅ ici */
}

.podium-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}


a.podium-card:hover{
  transform: translateY(-2px); /* ✅ comme avant */
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  cursor:pointer;
}

a.podium-card,
a.podium-card *{
  text-decoration: none !important;
  color: inherit;
}
    
.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-top:1.25rem;
}

.pagination button{
  padding:.45rem .9rem;
  border-radius:10px;
  border:0;
  font-weight:800;
  cursor:pointer;
  background: rgba(0,0,0,.08);
}

.pagination button:hover{ background: rgba(0,0,0,.12); }

.pagination button:disabled{
  opacity:.4;
  cursor:not-allowed;
}

.pagination .pageinfo{
  font-weight:800;
  opacity:.75;
}