/* marketing_ui.css — UI marketing (boutons + preuves + usages) */

/* --- Boutons : lisibles sur fond sombre (force texte en blanc) --- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  text-decoration:none;
}

.btn.btn-premium,
.btn.btn-premium:visited,
.btn.btn-ghost,
.btn.btn-ghost:visited{
  color: rgba(255,255,255,.92) !important;
}

.btn.btn-premium:hover,
.btn.btn-ghost:hover{
  color: rgba(255,255,255,.98) !important;
}

.btn.btn-premium:active,
.btn.btn-ghost:active{
  color: rgba(255,255,255,1) !important;
}

.btn .btn-ico{
  width:18px; height:18px;
  stroke: currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.95;
}

.btn.btn-premium{
  border:1px solid rgba(255,255,255,.18);
  background: radial-gradient(120% 120% at 30% 20%,
              rgba(255,255,255,.12) 0%,
              rgba(255,255,255,.06) 35%,
              rgba(0,0,0,.25) 100%);
  box-shadow: 0 14px 34px rgba(0,0,0,.38);
  backdrop-filter: blur(6px);
}

.btn.btn-premium:hover{
  border-color: rgba(90,215,255,.60);
  box-shadow: 0 18px 44px rgba(0,0,0,.48), 0 0 0 3px rgba(90,215,255,.12);
}

.btn.btn-ghost{
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.10);
  box-shadow:none;
}

.btn.btn-ghost:hover{
  border-color: rgba(90,215,255,.55);
  box-shadow: 0 0 0 3px rgba(90,215,255,.10);
}

/* --- “Ce qui change” : preuves, avec idéogrammes discrets et lisibles --- */
.value-proof{
  margin-top: 1rem;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:.9rem;
}
@media (max-width: 900px){
  .value-proof{ grid-template-columns: minmax(0,1fr); }
}

.proof-item{
  /* Panneaux “air”: moins de contraste plein, plus de finesse */
  background: rgba(255,255,255,0.028);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: .95rem 1rem;
  box-shadow: 0 8px 18px rgba(0,0,0,0.22);
  backdrop-filter: blur(8px);
}

.proof-item h3{
  margin:0 0 .4rem 0;
  font-size:.94rem;
  font-weight:650;
  display:flex;
  align-items:center;
  gap:.6rem;
  color: rgba(255,255,255,.92);
}

.proof-item h3 svg{
  width:20px;
  height:20px;
  stroke: rgba(255,255,255,.78);
  fill: none !important;
  opacity:.95;
}

.proof-item p{
  margin:0;
  font-size:.86rem;
  opacity:.92;
  line-height:1.45;
}

/* --- “Usages typiques” : même langage visuel, icônes premium --- */
.usage-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:.9rem;
  margin-top:.9rem;
}
@media (max-width: 1100px){
  .usage-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .usage-grid{ grid-template-columns: minmax(0,1fr); }
}

.usage-card{
  background: rgba(255,255,255,0.028);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: .95rem 1rem;
  box-shadow: 0 8px 18px rgba(0,0,0,0.22);
  backdrop-filter: blur(8px);
}

.usage-title{
  margin:0 0 .35rem 0;
  font-size:.95rem;
  font-weight:650;
  display:flex;
  align-items:center;
  gap:.65rem;
}

.usage-ico{
  width:32px;
  height:32px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
  box-shadow: none;
}

.usage-ico svg{
  width:16px; height:16px;
  stroke: rgba(255,255,255,.86);
  fill: none !important;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.98;
}

.usage-card p{
  margin:0;
  font-size:.86rem;
  opacity:.92;
  line-height:1.45;
}