/* ============================================================
   PADELSHOP — gabarit single.php (article de conseil)
   Un article de conseil doit vendre sans faire semblant :
   les encarts produits arrivent au moment où le lecteur
   se demande justement « laquelle je prends ».
   ============================================================ */
.article-tete{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:center}
.article-cat{display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--court);background:var(--balle);border-radius:3px;padding:.25rem .55rem;margin-bottom:1rem}
.article-tete h1{margin-bottom:.9rem;max-width:22ch}
.article-meta{display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:center;font-size:.85rem;color:rgba(255,255,255,.7)}
.article-meta i{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.3)}
.article-visuel{width:clamp(110px,15vw,190px);color:rgba(255,255,255,.85);transform:rotate(-10deg)}
@media(max-width:760px){
  .article-visuel{display:none}
}
/* Une vraie photo à la une : ni rotation ni vignette, un cadre 16:9 qui
   reste visible sur mobile, sous le titre. */
img.article-visuel{width:clamp(280px,34vw,460px);height:auto;aspect-ratio:16/9;object-fit:cover;transform:none;
  border-radius:var(--r-carte);box-shadow:var(--lift-2);background:var(--blanc)}
@media(max-width:760px){
  .article-tete:has(>img.article-visuel){grid-template-columns:minmax(0,1fr);gap:1.25rem}
  img.article-visuel{display:block;width:100%}
}
.article{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
/* Sans titres de niveau 2, il n'y a pas de sommaire : la colonne de gauche
   disparait, sinon le texte se retrouve dans une gouttiere de 240px. */
.article:has(>.corps-large){grid-template-columns:minmax(0,1fr)}
.corps-large{margin-inline:auto}
@media(max-width:960px){
  .article{grid-template-columns:1fr}
}
/* ---------- Sommaire ---------- */
.sommaire{position:sticky;top:150px}
.sommaire p{font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);margin-bottom:.8rem}
.sommaire a{display:block;padding:.4rem 0 .4rem .85rem;border-left:2px solid var(--ligne);font-size:.87rem;color:var(--gris);line-height:1.35}
.sommaire a:hover{color:var(--azur);border-left-color:var(--azur)}
.sommaire .actif{color:var(--encre);font-weight:700;border-left-color:var(--court)}
.partage{display:flex;gap:.4rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--ligne)}
.partage a,.partage .copier-lien{width:36px;height:36px;border-radius:50%;border:1px solid var(--ligne);
  background:var(--blanc);display:grid;place-items:center;color:var(--gris);cursor:pointer;padding:0}
.partage a:hover,.partage .copier-lien:hover{border-color:var(--azur);color:var(--azur)}
@media(max-width:960px){
  .sommaire{position:static;background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-carte);padding:1.25rem}
}
/* ---------- Corps ---------- */
.corps{max-width:72ch;min-width:0} /* min-width : un tableau large défile dans son cadre au lieu d'élargir la colonne */
.corps>p{font-size:1.02rem;line-height:1.75;color:#22323F;margin-bottom:1.1rem}
.corps .chapeau{font-size:1.15rem;line-height:1.65;color:var(--encre);font-weight:500;margin-bottom:1.75rem;
  padding-left:1.1rem;border-left:4px solid var(--balle)}
.corps h2{font-size:clamp(1.35rem,2.2vw,1.75rem);font-variation-settings:'wdth' 112;margin:2.5rem 0 .9rem;scroll-margin-top:160px}
.corps h3{font-size:1.1rem;font-weight:700;margin:1.75rem 0 .6rem}
.corps ul.liste{display:grid;gap:.55rem;margin-bottom:1.2rem}
.corps ul.liste li{display:grid;grid-template-columns:auto 1fr;gap:.65rem;font-size:.97rem;line-height:1.65;color:#22323F}
.corps ul.liste svg{color:var(--azur);flex:none;margin-top:5px}
.corps b{font-weight:700;color:var(--encre)}
.corps a.lien{color:var(--azur);font-weight:600;border-bottom:1px solid var(--azur)}
/* Comparatif des trois formes : le cœur de l'article, traité comme un tableau visuel. */
.formes-tableau{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:1.75rem 0}
.forme-col{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-carte);padding:1.25rem;text-align:center}
.forme-col svg{width:60px;height:88px;margin:0 auto .8rem;color:var(--court)}
.forme-col b{display:block;font-size:1rem;font-weight:800;font-variation-settings:'wdth' 110;margin-bottom:.5rem}
.forme-col dl{display:grid;gap:.45rem;text-align:left;font-size:.82rem;margin:0}
.forme-col dt{color:var(--gris);font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.forme-col dd{margin:0 0 .35rem;font-weight:600}
@media(max-width:700px){
  .formes-tableau{grid-template-columns:1fr}
}
/* Encart produit dans le fil du texte */
.encart-produit{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.25rem;align-items:center;
  background:var(--azur-pale);border-radius:var(--r-carte);padding:1.25rem 1.4rem;margin:1.75rem 0}
.encart-visuel{width:70px;height:88px;flex:none;background:var(--blanc);border-radius:var(--r-tuile);display:grid;place-items:center;padding:.5rem}
.encart-visuel svg{width:100%;height:100%;color:var(--court)}
.encart-produit .marque{margin-bottom:.15rem}
.encart-nom{font-size:1rem;font-weight:700;line-height:1.3}
.encart-arg{font-size:.85rem;color:var(--gris);margin-top:.3rem}
.encart-prix{text-align:right;white-space:nowrap}
.encart-prix b{display:block;font-size:1.25rem;font-weight:900;font-variation-settings:'wdth' 110}
@media(max-width:640px){
  .encart-produit{grid-template-columns:auto minmax(0,1fr)}
  .encart-prix{grid-column:2}
}
.citation{border-left:4px solid var(--court);padding:.3rem 0 .3rem 1.35rem;margin:1.75rem 0;
  font-size:1.1rem;line-height:1.6;font-weight:600}
.citation footer{font-size:.84rem;font-weight:500;color:var(--gris);margin-top:.6rem}
/* ---------- Auteur et suite ---------- */
.auteur{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.1rem;align-items:center;background:var(--blanc);
  border:1px solid var(--ligne);border-radius:var(--r-carte);padding:1.35rem;margin-top:2.5rem}
.auteur-photo{width:56px;height:56px;border-radius:50%;background:var(--court);color:var(--balle);
  display:grid;place-items:center;font-weight:900;font-variation-settings:'wdth' 112}
.auteur b{display:block;font-size:.98rem}
.auteur p{font-size:.86rem;color:var(--gris);line-height:1.55;margin-top:.25rem}
.suite{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.suite-carte{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-carte);padding:1.25rem}
.suite-carte:hover{border-color:var(--azur)}
.suite-cat{font-size:.72rem;font-weight:700;color:var(--azur)}
.suite-carte h3{font-size:.98rem;font-weight:700;line-height:1.35;margin:.4rem 0 .5rem}
.suite-carte span{font-size:.8rem;color:var(--gris)}
@media(max-width:860px){
  .suite{grid-template-columns:1fr}
}