/* ==================================================================
   Tregor Digital — styles de la page /numerique.php
   À déposer dans /assets/tregor-tarifs.css
   Sélecteurs volontairement portés par les identifiants de section
   (#realisations, #offres…) pour passer devant style.css sans !important.
   ================================================================== */

/* ---------- Grilles de tarifs ---------- */
#offres .offers.four,
#suivi .offers.three,
#offres .offers.three{
  display:grid;
  gap:1.15rem;
  align-items:start;
}
#offres .offers.four{grid-template-columns:repeat(4,1fr)}
#offres .offers.three,
#suivi .offers.three{grid-template-columns:repeat(3,1fr)}

@media (max-width:1180px){
  #offres .offers.four{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  #offres .offers.three,
  #suivi .offers.three{grid-template-columns:1fr}
}
@media (max-width:680px){
  #offres .offers.four{grid-template-columns:1fr}
}

#offres .offer.promo{border:1px solid var(--gold,#c9a227)}
#offres .offer.promo .price s{display:block;font-size:1rem;opacity:.5}
.price b .per{font-size:.5em;font-weight:500;opacity:.7}
.stock{font-size:.85rem;opacity:.75;margin:.2rem 0 .9rem}
.price-alt{margin:-.35rem 0 .35rem;font-size:.82rem;opacity:.6}
.fineprint{margin-top:1.5rem;font-size:.9rem;opacity:.7;max-width:52rem}

/* ---------- Options à la carte ---------- */
#options .opts{list-style:none;margin:0;padding:0}
#options .opts li{
  display:flex;justify-content:space-between;gap:1.25rem;
  padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.09);
}
#options .opts li:last-child{border-bottom:0}
#options .opts b{white-space:nowrap;font-variant-numeric:tabular-nums}
#options .opts-head{
  margin:1.1rem 0 .1rem;
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  opacity:.55;
}

/* ---------- Réalisations : cartes sans capture ---------- */
#realisations .reals{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.25rem;
  align-items:stretch;
}
@media (max-width:980px){#realisations .reals{grid-template-columns:1fr}}

#realisations .real{
  display:flex;
  flex-direction:column;
  border:1px solid rgba(255,255,255,.11);
  border-radius:16px;
  background:rgba(255,255,255,.02);
  overflow:hidden;
  transition:border-color .25s ease,transform .25s ease;
}
#realisations .real:hover,
#realisations .real:focus-within{
  border-color:var(--gold,#c9a227);
  transform:translateY(-3px);
}

#realisations .real-head{
  display:flex;align-items:center;gap:.7rem;
  padding:1rem 1.3rem;
  background:rgba(0,0,0,.28);
  border-bottom:1px solid rgba(255,255,255,.07);
}
#realisations .real-head .mono{
  flex:none;
  width:2.4rem;height:2.4rem;
  display:grid;place-content:center;
  border-radius:10px;
  font-size:.85rem;font-weight:700;letter-spacing:.06em;
  background:linear-gradient(150deg,rgba(201,162,39,.28),rgba(255,255,255,.05));
  border:1px solid rgba(201,162,39,.35);
}
#realisations .real-head .url{
  min-width:0;
  font-size:.82rem;opacity:.72;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

#realisations .real-body{
  padding:1.2rem 1.3rem 1.35rem;
  display:flex;flex-direction:column;gap:.65rem;flex:1;
}
#realisations .real-body h3{margin:0;font-size:1.3rem}
#realisations .real-sub{margin:0;font-size:.88rem;opacity:.65}
#realisations .real-body>p{margin:0;font-size:.95rem}
#realisations .chips{
  display:flex;flex-wrap:wrap;gap:.35rem;
  list-style:none;margin:.15rem 0 0;padding:0;
}
#realisations .chips li{
  font-size:.78rem;padding:.26rem .65rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.15);opacity:.85;
}
#realisations .real-foot{
  margin-top:auto;padding-top:.95rem;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
}
#realisations .real-meta{font-size:.82rem;opacity:.62;font-variant-numeric:tabular-nums}

/* ---------- Questions fréquentes ---------- */
#questions .faq{display:grid;gap:.6rem;max-width:52rem}
#questions .faq details{
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;padding:.9rem 1.1rem;
}
#questions .faq summary{cursor:pointer;font-weight:600;list-style:none}
#questions .faq summary::-webkit-details-marker{display:none}
#questions .faq summary::after{content:"+";float:right;opacity:.6}
#questions .faq details[open] summary::after{content:"–"}
#questions .faq p{margin:.7rem 0 0;opacity:.85}

/* ---------- Animations réduites ---------- */
@media (prefers-reduced-motion:reduce){
  #realisations .real{transition:none}
  #realisations .real:hover{transform:none}
}