/* ========================================================================
   Tennis Passion — Styles article (cordages)
   ======================================================================== */
:root{
  --tp-brand:#1e60ff;
  --tp-ink:#0f1520;
  --tp-muted:#6b7280;
  --tp-bg:#ffffff;
  --tp-card:#f8fafc;
  --tp-accent:#e8f0ff;
  --tp-ok:#16a34a;
  --tp-warn:#ca8a04;
  --tp-border:#e5e7eb;
  --tp-radius:14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--tp-bg);color:var(--tp-ink)}
img{max-width:100%;height:auto;display:block}

/* Layout principal */
.tp-article{max-width:1000px;margin:32px auto;padding:24px}
@media (max-width:720px){.tp-article{padding:18px;margin:20px auto}}

/* HERO */
.tp-hero__eyebrow{
  font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tp-brand);font-weight:700;margin-bottom:4px
}
.tp-hero__title{
  font-size:clamp(1.8rem,2.2vw,2.4rem);line-height:1.2;margin:.2em 0 .3em
}
.tp-hero__lead{font-size:1.05rem;color:var(--tp-muted);margin-bottom:14px}
.tp-hero__media img{border-radius:var(--tp-radius);border:1px solid var(--tp-border)}

/* Cartes, notes, badges */
.tp-card{
  background:var(--tp-card);border:1px solid var(--tp-border);
  border-radius:var(--tp-radius);padding:16px;margin:18px 0
}
.tp-note{border-left:4px solid var(--tp-brand);background:#f6faff; padding-left:10px; margin:20px 0 0 0}
.tp-note--tip{border-left-color:var(--tp-ok);background:#f0fdf4}
.tp-note--warn{border-left-color:var(--tp-warn);background:#fffbeb}
.tp-badge{
  display:inline-block;background:var(--tp-accent);color:#1e3a8a;
  border-radius:999px;padding:.15em .6em;font-size:.8rem;font-weight:700
}

/* Intro 2 colonnes */
.tp-intro{display:grid;gap:16px}
.tp-intro__col{min-width:0}
@media (min-width:900px){.tp-intro{grid-template-columns:1fr 1fr}}

/* Sections */
.tp-section{margin-top:28px}
.tp-section h2{font-size:clamp(1.3rem,1.8vw,1.6rem);margin:0 0 .4em}
.tp-section p{margin:.6em 0}

/* Media */
.tp-media{margin:14px 0}
.tp-media img{border-radius:var(--tp-radius);border:1px solid var(--tp-border)}
.tp-media figcaption{font-size:.9rem;color:var(--tp-muted);margin-top:6px}

/* Tables */
.tp-table-wrap{overflow:auto;border-radius:12px;border:1px solid var(--tp-border);background:#fff}
.tp-table{width:100%;border-collapse:collapse;min-width:640px}
.tp-table thead th{background:var(--tp-accent);text-align:left;padding:10px}
.tp-table tbody td{padding:10px;border-top:1px solid var(--tp-border);vertical-align:top}

/* Listes & étapes */
.tp-list{padding-left:18px}
.tp-steps{padding-left:18px}
.tp-steps li{margin:.4em 0}

/* CTA */
.tp-cta__card{text-align:center}
.tp-cta__title{margin:.2em 0 .2em}
.tp-btn{
  display:inline-block;background:var(--tp-brand);color:#fff;
  padding:.8em 1.1em;border-radius:12px;font-weight:700;text-decoration:none
}
.tp-btn:focus-visible{outline:3px solid #93c5fd;outline-offset:2px}

/* Meta pied d’article */
.tp-meta{margin-top:18px;color:var(--tp-muted);font-size:.92rem; text-align:center;}

/* Accessibilité & motion */
:focus-visible{outline:3px solid #93c5fd;outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

footer img { margin-left:auto; margin-right:auto; }

.articles-search{max-width:1000px;margin:8px auto 12px;padding:0 24px;display:grid;gap:8px}
.articles-search input{
  width:100%; padding:.75em 1em; border:1px solid var(--tp-border);
  border-radius:12px; background:#fff; font-size:1rem;
}
.articles-search input:focus{outline:3px solid #93c5fd; outline-offset:2px}
.articles-search__meta{font-size:.95rem; color:var(--tp-muted)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}
.article-card[hidden]{display:none !important}
.no-results{max-width:1000px;margin:0 auto;padding:0 24px;color:var(--tp-muted)}