/* =========================================================
   SPORT DESIGNS — PAGE DESIGNS UNIQUEMENT
   À charger APRÈS common.css. Le hero utilise .page-hero
   (défini dans common.css).
   ========================================================= */

.designs-pad{padding:72px 0 96px;}
.designs-grid{
  display:grid;grid-template-columns:1fr;gap:28px;
}
@media(min-width:700px){.designs-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:1040px){.designs-grid{grid-template-columns:repeat(3,1fr);}}

.design-card{
  background:#fff;border:1px solid var(--line-light);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.design-card:hover{
  transform:translateY(-4px);border-color:var(--orange);
  box-shadow:0 18px 34px -18px rgba(14,26,22,.35);
}

/* Aperçu : une vraie image si elle existe, sinon un cadre de remplacement */
.design-preview{
  position:relative;aspect-ratio:16/10;background:var(--ink);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.design-preview img{width:100%;height:100%;object-fit:cover;object-position:top;}
.design-preview .ph{
  font-family:'Arial Narrow',Oswald,'Helvetica Neue',Arial,sans-serif;font-weight:800;
  font-size:44px;letter-spacing:.02em;color:var(--orange);opacity:.9;
}
.design-preview .ph-bars{
  position:absolute;left:18px;right:18px;top:16px;display:flex;gap:6px;
}
.design-preview .ph-bars span{height:6px;border-radius:3px;background:var(--line);}
.design-preview .ph-bars span:nth-child(1){width:34px;background:var(--orange);}
.design-preview .ph-bars span:nth-child(2){width:60px;}
.design-preview .ph-bars span:nth-child(3){width:46px;}

.design-badges{position:absolute;top:14px;right:14px;display:flex;gap:6px;}
.design-badge{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;
}
.design-badge.free{background:rgba(30,132,73,.92);color:#fff;}
.design-badge.new{background:var(--orange);color:#1A0D02;}

.design-body{padding:26px;display:flex;flex-direction:column;flex:1;}
.design-body h3{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:19px;font-weight:700;color:var(--ink-text);margin-bottom:8px;letter-spacing:0;line-height:1.25;
}
.design-body p{font-size:14.5px;line-height:1.6;color:var(--muted-light);margin:0 0 20px;flex:1;}
.design-link{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  font-size:12.5px;font-weight:600;letter-spacing:.03em;color:var(--orange);
  display:inline-flex;align-items:center;gap:6px;
}
.design-link svg{transition:transform .15s ease;}
.design-card:hover .design-link svg{transform:translateX(3px);}

/* Carte "sur-mesure" : mise en avant sombre */
.design-card.custom{background:var(--ink);border-color:var(--ink);}
.design-card.custom:hover{border-color:var(--orange);}
.design-card.custom .design-preview{background:var(--ink-3);}
.design-card.custom .design-body h3{color:var(--chalk);}
.design-card.custom .design-body p{color:var(--muted-dark);}

/* Bandeau de réassurance sous la grille */
.designs-note{
  margin-top:48px;background:var(--chalk-2);border-radius:var(--radius);
  padding:28px 30px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
}
.designs-note p{margin:0;font-size:15px;font-weight:600;color:var(--ink-text);max-width:60ch;}
.designs-note span{display:block;font-size:13.5px;font-weight:400;color:var(--muted-light);margin-top:4px;}