/* /CSS/tarif-style.css
   Page: tarif.php - 123-services-a-domicile
*/

/* Base */
.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:20px;
}

.section-titre{
  margin-top:10px;
}
.section-titre h1{
  margin:0 0 8px 0;
}
.section-titre p{
  margin:0;
  opacity:.85;
}

/* Grid */
.tarif-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:16px;
  margin-top:18px;
}

/* Cards */
.card{
  grid-column:span 12;
  background:#fff;
  border:1px solid #eee;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  padding:16px;
}

@media (min-width:900px){
  .card.half{ grid-column:span 6; }
  .card.third{ grid-column:span 4; }
}

.card h2{
  margin:0 0 10px 0;
  font-size:18px;
}
.card h3{
  margin:14px 0 8px 0;
  font-size:16px;
}

.muted{ opacity:.85; }

/* Badges */
.pill{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:#f3f6ff;
  border:1px solid #e6ecff;
  font-weight:600;
  font-size:13px;
}

/* Lists */
.list{
  margin:8px 0 0 0;
  padding-left:18px;
}
.list li{
  margin:6px 0;
}

/* Table */
.table-wrap{
  overflow:auto;
  border:1px solid #eee;
  border-radius:12px;
  background:#fff;
}

.table-wrap table{
  border-collapse:collapse;
  width:100%;
  min-width:680px;
}

.table-wrap th,
.table-wrap td{
  padding:12px 10px;
  border-bottom:1px solid #eee;
  text-align:left;
}

.table-wrap th{
  background:#fafafa;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.02em;
}

.table-wrap tr:last-child td{
  border-bottom:none;
}

/* CTA buttons */
.cta-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid #ddd;
  text-decoration:none;
  color:inherit;
}

.btn:hover{
  filter:brightness(.98);
}

.btn.primary{
  border-color:transparent;
  background:#111;
  color:#fff;
}

/* Highlight note */
.note{
  margin-top:10px;
  padding:12px;
  border-radius:12px;
  background:#fff8e6;
  border:1px solid #ffe3a3;
}

/* Mobile tweaks */
@media (max-width:520px){
  .wrap{ padding:14px; }
  .card{ padding:14px; }
  .pill{ font-size:12px; }
}

/* Print */
@media print{
  .btn, .cta-row{ display:none !important; }
  .card{
    box-shadow:none;
    border-color:#ddd;
  }
}
/* ================================
   FIX TABLE – isolation & largeur
   ================================ */

/* Isolation stricte du scope tarifs */
.tarif-grid table{
  width:100% !important;
  max-width:100% !important;
  table-layout:fixed;
  border-collapse:collapse;
  margin:0;
}

/* Colonnes équilibrées */
.tarif-grid th,
.tarif-grid td{
  width:auto;
  white-space:nowrap;
}

/* Autorise le scroll horizontal propre si écran étroit */
.tarif-grid .table-wrap{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* Neutralise styles hérités (WordPress / thème) */
.tarif-grid table tr,
.tarif-grid table td,
.tarif-grid table th{
  background:transparent;
  float:none !important;
}

/* Alignements lisibles */
.tarif-grid table th{
  text-align:left;
}
.tarif-grid table td{
  vertical-align:middle;
}

/* Mobile : on évite les débordements */
@media (max-width:680px){
  .tarif-grid table{
    min-width:620px;
  }
}

/* Bouton promo */
.btn.promo{
  background:#e63f21;
  border-color:transparent;
  color:#fff;
  font-weight:700;
}

.btn.promo:hover{
  filter:brightness(0.95);
}
