/* ============================================================
   TENNISSHOP — article (maquettes/article-v1.html)
   ============================================================ */

/* Tête d'article */
.article-tete{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,3rem);align-items:center;padding-block:1rem clamp(1.5rem,3vw,2.5rem)}
.article-tete h1{font-size:clamp(2rem,4.4vw,3.6rem);font-weight:1000;text-transform:uppercase;line-height:.95;margin:.9rem 0;text-wrap:balance}
.article-tete p{font-size:1.15rem;color:#3a3a3a}
.meta{display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:center;font-size:.88rem;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}
.visuel{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-panneau);aspect-ratio:16/11}
.visuel .lignes{opacity:.5}
.visuel-produit{position:absolute;inset:6% 10%;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 svg{height:100%;width:auto;color:rgba(255,255,255,.92)}

/* Corps : sommaire collant + texte */
.article-corps{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:start;padding-bottom:clamp(2.5rem,5vw,4rem)}
.article-corps.sans-sommaire{grid-template-columns:minmax(0,1fr);justify-items:center}
.sommaire{position:sticky;top:80px;max-height:calc(100vh - 100px);overflow-y:auto;background:var(--gris-clair);border-radius:var(--r-carte);padding:1.2rem 1.3rem}
.sommaire b{display:block;font-weight:1000;text-transform:uppercase;font-size:.85rem;letter-spacing:.06em;margin-bottom:.7rem}
.sommaire ol{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:.15rem}
.sommaire li{counter-increment:s}
.sommaire a{display:flex;gap:.6rem;padding:.4rem .2rem;font-size:.92rem;font-weight:700;border-radius:6px}
.sommaire a::before{content:counter(s);color:var(--gris);font-weight:900;min-width:1.1em}
.sommaire a:hover{background:#fff}
.sommaire a[aria-current]{background:var(--balle)}

/* Le texte saisi dans l'éditeur : titres, listes, tableaux de Gutenberg */
.texte{min-width:0;max-width:760px;width:100%;font-size:1.06rem;line-height:1.7}
.texte h2{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:1000;text-transform:uppercase;line-height:1.05;margin:2.6rem 0 .9rem;scroll-margin-top:90px}
.texte>h2:first-child{margin-top:0}
.texte h3{font-size:1.2rem;font-weight:900;line-height:1.2;margin:1.8rem 0 .6rem;scroll-margin-top:90px}
.texte p+p{margin-top:1rem}
.texte a:not(.btn):not(.rubrique){text-decoration:underline;text-decoration-color:var(--balle);text-decoration-thickness:2px;text-underline-offset:3px}
.texte ul:not([class*="encart"]),.texte ol:not(.etapes){margin:1rem 0;display:grid;gap:.5rem}
.texte>ul li,.texte .faq-reponse ul li{position:relative;padding-left:1.6rem}
.texte>ul li::before,.texte .faq-reponse ul li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:10px;border-radius:50%;background:var(--balle);border:2px solid var(--encre)}
.texte>ol{counter-reset:e}
.texte>ol li{counter-increment:e;display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;background:var(--gris-clair);border-radius:var(--r-carte);padding:1rem 1.1rem}
.texte>ol li::before{content:counter(e);width:34px;height:34px;border-radius:50%;background:var(--encre);color:var(--balle);display:grid;place-items:center;font-weight:1000}
.texte figure{margin:1.4rem 0}
.texte figure img{border-radius:var(--r-carte)}
.texte figcaption{font-size:.88rem;color:var(--gris);margin-top:.4rem}
.texte .wp-block-table{overflow-x:auto}
.texte table{width:100%;border-collapse:collapse;font-size:.98rem}
.texte th,.texte td{text-align:left;padding:.8rem .9rem;border-bottom:1px solid var(--ligne);vertical-align:top}
.texte th{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--gris)}
.texte td:first-child{font-weight:900}
.texte blockquote{background:var(--encre);color:#fff;border-radius:var(--r-carte);padding:1.2rem 1.3rem;margin:1.5rem 0}
.texte blockquote p{color:rgba(255,255,255,.85)}
.texte strong,.texte b{font-weight:900}

/* Questions fréquentes en accordéon */
.texte .faq{margin-top:.4rem}
.texte .faq summary{line-height:1.35}
.faq-reponse{padding-bottom:1.1rem;color:#444}

/* Matériel cité */
.encart-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:1.4rem 0}
.encart-trio a{border:1px solid var(--ligne);border-radius:var(--r-carte);padding:.8rem;text-align:center;display:grid;gap:.3rem;align-content:start;text-decoration:none}
.encart-trio a:hover{border-color:var(--encre)}
.encart-trio img{width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.encart-trio b{font-size:.92rem;line-height:1.25}
.encart-trio span{font-weight:900}
.encart-trio del{opacity:.55;font-weight:700;margin-right:.3rem}
.encart-trio ins{text-decoration:none}

/* Partage */
.partage{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid var(--ligne)}
.partage span{font-weight:900;text-transform:uppercase;font-size:.85rem;letter-spacing:.06em;margin-right:.4rem}
.partage a,.partage button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--gris-clair);color:var(--encre);border:0;cursor:pointer;text-decoration:none}
.partage a:hover,.partage button:hover,.partage .copie{background:var(--balle)}

/* Auteur */
.auteur{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:center;background:var(--gris-clair);border-radius:var(--r-carte);padding:1.2rem 1.3rem;margin-top:1.6rem}
.avatar{width:64px;height:64px;border-radius:50%;background:var(--terre);color:#fff;display:grid;place-items:center;font-weight:1000;font-size:1.4rem}
.auteur b{font-weight:900}
.auteur p{font-size:.92rem;color:#444}

/* À lire ensuite */
.lies-section{background:var(--gris-clair)}
.lies-section .titre a{display:inline-block;margin-top:.5rem;font-weight:800;text-decoration:underline}
.lies{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.lies a{display:grid;gap:.6rem;align-content:start}
.lies .visuel{aspect-ratio:16/10;border-radius:var(--r-carte)}
.lies .visuel-produit{inset:8% 20%}
.lies .visuel-produit img.incline{transform:rotate(-12deg)}
.lies h3{font-size:1.1rem;font-weight:900;line-height:1.2}
.lies a:hover h3{text-decoration:underline;text-decoration-color:var(--balle);text-decoration-thickness:3px}
.aide-section{padding-block:clamp(2.5rem,5vw,4rem)}
.commentaires-section{padding-bottom:clamp(2.5rem,5vw,4rem);max-width:820px}

@media(max-width:960px){
  .article-tete{grid-template-columns:1fr}
  .article-corps{grid-template-columns:minmax(0,1fr)}
  .sommaire{position:static;max-height:none}
  .lies{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){.lies{grid-template-columns:1fr}.encart-trio{grid-template-columns:1fr 1fr;gap:8px}}
.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))}