/* client.css — garde le style index.html, juste adapte le contenu du portail */

.nav a.active{
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 10px;
}

.client-card{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding: 18px;
}

.client-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
@media(max-width: 900px){
  .client-grid{grid-template-columns: 1fr;}
}

.client-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 12px;
}

.client-hero{padding-top:18px}
.client-stats{margin-top:14px}
.client-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:980px){.client-grid-3{grid-template-columns:1fr}}

.client-mini-actions{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.client-mini-actions .pill2{cursor:pointer}

.client-cta-right{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}

.nav a.active{
  opacity:1;
  position:relative;
}
.nav a.active::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-12px;
  height:2px;
  background:rgba(89,215,255,.65);
  border-radius:999px;
  box-shadow:0 0 18px rgba(89,215,255,.25);
}

.client-pricing{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
@media(max-width:980px){ .client-pricing{grid-template-columns:1fr;} }

.client-price{
  padding:18px;
}
.client-price.featured{
  border-color: rgba(89,215,255,.22);
  box-shadow: 0 0 0 1px rgba(89,215,255,.08), 0 30px 120px rgba(0,0,0,.55);
}
.client-price-top{display:flex;flex-direction:column;gap:14px}
.client-price-value{display:flex;align-items:baseline;gap:10px}
.client-price-amount{font-size:42px;font-weight:800;letter-spacing:-.8px}
.client-price-period{color:rgba(255,255,255,.65)}

.client-specs{margin-top:10px;display:grid;gap:8px}
.client-spec{color:rgba(255,255,255,.78)}
.client-note{font-size:13px}

/* FORCE affichage des offres (évite conflit avec .tiles du site principal) */
.tiles.client-pricing{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  gap:14px !important;
  align-items:stretch;
}

@media(max-width:980px){
  .tiles.client-pricing{ grid-template-columns:1fr !important; }
}

/* s'assure que chaque carte est visible */
.tile.client-price{
  display:block !important;
  width:auto !important;
  min-height: 260px;
}

/* Espace client: pas de JS reveal -> on force visible */
.reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
