/* Cartes des formules (offres.js) : page « Abonnements » et accueil. Les boutons prennent le style .bouton de la page. */
.zone-offres{display:flex;flex-direction:column;gap:14px}
.durees{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:9px;background:var(--c-survol);border:1px solid var(--c-filet);align-self:flex-start}
.durees button{font:inherit;font-size:13.5px;font-weight:500;padding:6px 13px;border:0;border-radius:7px;background:transparent;color:var(--c-gris);cursor:pointer}
.durees button[aria-pressed=true]{background:var(--c-panneau);color:var(--c-texte);box-shadow:var(--c-ombre)}
.durees button:focus-visible{outline:2px solid var(--c-accent);outline-offset:1px}
.durees .remise{font-size:12px;color:var(--c-succes);font-weight:600}
.offres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:8px}
@media (max-width:1100px){.offres{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.offres{grid-template-columns:1fr}}
.offre{position:relative;display:flex;flex-direction:column;gap:12px;padding:20px 18px 18px;border-radius:12px;background:var(--c-panneau);border:1px solid var(--c-filet);box-shadow:var(--c-ombre)}
.offre.actuelle{border-color:var(--c-accent);box-shadow:0 0 0 1px var(--c-accent),var(--c-ombre)}
.offre h2,.offre h3{margin:0;font-size:16px;font-weight:650;color:var(--c-texte)}
.offre .prix{display:flex;flex-direction:column;gap:2px;min-height:70px}
.offre .prix .v{font-size:28px;font-weight:650;letter-spacing:-.02em;line-height:1.1;color:var(--c-texte)}
.offre .prix .d{font-size:13px;color:var(--c-gris)}
.economie{display:inline-block;align-self:flex-start;padding:1px 8px;border-radius:999px;background:var(--c-succes-pale);color:var(--c-succes);font-size:12px;font-weight:600}
.offre ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:13.5px;flex:1;color:var(--c-texte2)}
.offre li{display:flex;gap:8px;align-items:flex-start}
.offre li::before{content:"✓";flex:none;width:16px;color:var(--c-accent);font-weight:700}
.offre li.non{color:var(--c-pale)}
.offre li.non::before{content:"—";color:var(--c-pale)}
.offre .bouton{width:100%}
.etiquette{position:absolute;top:-10px;left:16px;padding:1px 10px;border-radius:999px;background:var(--c-accent);color:var(--c-sur-accent);font-size:11.5px;font-weight:600}
/* téléphone : d'abord ce qui est inclus ; les « — » se déplient sous « Voir ce qui n'est pas inclus » */
.offre li.voir-manque{display:none}
.offre li.voir-manque::before{content:none}
.voir-manque button{font:inherit;font-size:13px;font-weight:550;padding:2px 0;border:0;background:none;color:var(--c-accent);cursor:pointer}
.voir-manque button:hover{text-decoration:underline;text-underline-offset:3px}
.voir-manque button:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
@media (max-width:560px){
  .offre li.voir-manque{display:flex;order:1}
  .offre li.non{display:none;order:2}
  .offre.ouverte li.non{display:flex}
}