/* ============================================================
   TENNISSHOP — page des conseils et archives (maquettes/blog-v1.html)
   ============================================================ */

/* Visuels d'articles : fond de court + produit détouré */
.visuel{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-carte);aspect-ratio:16/10}
.visuel .lignes{opacity:.5}
.visuel-produit{position:absolute;inset:8% 14%;z-index:1;mix-blend-mode:multiply;display:grid;place-items:center}
.visuel-produit img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.visuel-produit img.incline{transform:rotate(-12deg)}
.visuel-produit svg{height:100%;width:auto;color:rgba(255,255,255,.92);mix-blend-mode:normal}

/* Article à la une */
.une{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(1.2rem,3vw,2.6rem);align-items:center;background:var(--gris-clair);border-radius:var(--r-panneau);padding:clamp(1rem,2.4vw,1.6rem)}
.une .visuel{aspect-ratio:16/11}
.une-texte{padding:clamp(.4rem,1.6vw,1.4rem)}
.une-texte h2{font-size:clamp(1.7rem,3vw,2.6rem);font-weight:1000;text-transform:uppercase;line-height:1;margin:.8rem 0}
.une-texte p{color:#3a3a3a;font-size:1.05rem}
.une-texte .btn{margin-top:1.4rem}
.une:hover h2{text-decoration:underline;text-decoration-color:var(--balle);text-decoration-thickness:4px;text-underline-offset:5px}
.meta{display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:center;font-size:.85rem;color:var(--gris)}
.rubrique{display:inline-block;background:var(--balle);color:var(--encre);font-weight:900;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;border-radius:var(--r-pilule);padding:.25rem .7rem}

/* Filtres de rubriques */
.rubriques{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1.8rem}
.rubriques a{padding:.65rem 1.2rem;border-radius:var(--r-pilule);border:2px solid var(--ligne);font-weight:800;background:#fff}
.rubriques a:hover{border-color:var(--encre)}
.rubriques a[aria-current]{background:var(--encre);border-color:var(--encre);color:#fff}
.rubriques small{font-weight:700;opacity:.6;margin-left:.25rem}

/* Grille d'articles */
.articles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.carte-article{display:flex;flex-direction:column;gap:.7rem}
.carte-article h3{font-size:1.2rem;font-weight:900;line-height:1.2}
.carte-article p{color:#4a4a4a;font-size:.95rem}
.carte-article:hover h3{text-decoration:underline;text-decoration-color:var(--balle);text-decoration-thickness:3px;text-underline-offset:4px}
.vide{text-align:center;padding-block:2rem}
.vide h2{font-size:1.5rem;font-weight:1000;text-transform:uppercase}
.vide p{color:var(--gris);margin-top:.5rem}
@media(max-width:960px){.une{grid-template-columns:1fr}.articles{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.articles{grid-template-columns:1fr}}

/* Bandeau de fin : une question, un humain sur WhatsApp */
.lettre-section{padding-bottom:clamp(2.5rem,5vw,4.5rem)}
.lettre{display:grid;grid-template-columns:1fr auto;gap:1.5rem 3rem;align-items:center;background:var(--encre);color:#fff;border-radius:var(--r-panneau);padding:clamp(1.5rem,3.4vw,2.6rem);position:relative;overflow:hidden;isolation:isolate}
.lettre .lignes{opacity:.08}
.lettre h2{font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:1000;text-transform:uppercase;line-height:1}
.lettre h2 span{color:var(--balle)}
.lettre p{color:rgba(255,255,255,.75);margin-top:.5rem;max-width:52ch}
.lettre>div,.lettre>.btn{position:relative;z-index:2}
@media(max-width:860px){.lettre{grid-template-columns:1fr}.lettre>.btn{justify-self:start}}
.visuel-dessin{mix-blend-mode:normal}
.visuel-dessin svg{max-width:70%;max-height:80%;width:auto;height:auto;color:#fff;filter:drop-shadow(0 8px 14px rgba(0,0,0,.18))}