/* ============================================================================
   FLARE CUSTOM — Mise en page des articles de blog (.ar-body)
   ----------------------------------------------------------------------------
   Un article arrive de la routine en balises nues : <p>, <h2>, <ul>. Versé tel
   quel dans un seul conteneur, ça donne un mur de texte — alors qu'une page
   vitrine comme /equiper-son-club-guide.html respire parce qu'elle est faite de
   composants.
   On ne peut pas réécrire les articles DÉJÀ PUBLIÉS (la routine ne touche que
   les brouillons). Donc tout se joue ici : c'est la feuille de style qui doit
   transformer des balises nues en quelque chose de lisible. Chaque règle est
   écrite pour du HTML SANS classe ; les classes (.lead, .ar-callout, .ar-faq)
   ne font qu'ajouter, jamais elles ne conditionnent le résultat de base.
   Servie par article.php ET article.html — une seule source, pas deux copies
   qui divergent.
   ========================================================================== */

.ar-body{
  max-width:720px;margin:0 auto;
  font-size:17px;line-height:1.78;color:var(--ink);
  /* Une largeur de lecture un peu plus étroite que le titre : l'œil retombe
     sans effort au début de la ligne suivante. */
}
.ar-body > :first-child{margin-top:0;}

/* ── Rythme : le texte respire, les titres séparent vraiment ─────────────── */
.ar-body p{margin:0 0 22px;color:var(--ink-soft);}
.ar-body h2{
  margin:52px 0 16px;font-size:clamp(22px,2.5vw,30px);line-height:1.2;
  letter-spacing:-.01em;color:var(--ink);text-wrap:balance;
  padding-top:22px;border-top:1px solid var(--line);
  /* Le filet fait le travail d'un blanc de page : on voit les parties. */
}
.ar-body h2:first-child{margin-top:0;padding-top:0;border-top:0;}
.ar-body h3{margin:34px 0 10px;font-size:20px;line-height:1.3;color:var(--ink);text-wrap:balance;}
.ar-body h4{margin:26px 0 8px;font-size:17px;color:var(--ink);}

/* Chapô : le premier paragraphe porte l'article, il ne doit pas ressembler
   aux autres. Appliqué à .lead, et automatiquement au tout premier <p>. */
.ar-body .lead,
.ar-body > p:first-child{
  font-size:19.5px;line-height:1.6;color:var(--ink);font-weight:500;margin-bottom:30px;
}

/* ── Listes : des puces vertes, de l'air entre les points ────────────────── */
.ar-body ul,.ar-body ol{margin:0 0 24px;padding-left:4px;color:var(--ink-soft);list-style:none;}
.ar-body ol{counter-reset:ar-n;}
.ar-body li{position:relative;margin:10px 0;padding-left:28px;}
.ar-body ul > li::before{
  content:"";position:absolute;left:6px;top:.62em;
  width:8px;height:8px;border-radius:50%;background:var(--green);
}
.ar-body ol > li{counter-increment:ar-n;}
.ar-body ol > li::before{
  content:counter(ar-n);position:absolute;left:0;top:0;
  font-family:var(--disp);font-weight:700;font-size:15px;color:var(--green-deep);
  width:22px;text-align:right;line-height:inherit;
}
.ar-body li > ul,.ar-body li > ol{margin:8px 0 0;}
.ar-body li strong{color:var(--ink);}

.ar-body img{max-width:100%;height:auto;border-radius:var(--r);margin:26px 0;display:block;}
.ar-body figure{margin:26px 0;}
.ar-body figcaption{font-size:13.5px;color:var(--ink-soft);margin-top:8px;}
.ar-body a{color:var(--green-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(11,122,58,.35);}
.ar-body a:hover{text-decoration-color:currentColor;}
.ar-body strong,.ar-body b{color:var(--ink);font-weight:700;}
.ar-body hr{border:0;border-top:1px solid var(--line);margin:40px 0;}

.ar-body blockquote{
  margin:30px 0;padding:18px 24px;border-left:4px solid var(--green);
  background:var(--cream);border-radius:0 var(--r) var(--r) 0;color:var(--ink);
  font-size:18px;line-height:1.65;
}
.ar-body blockquote p:last-child{margin-bottom:0;}

/* ── Tableaux : ils débordaient sur mobile ───────────────────────────────── */
.ar-body table{width:100%;border-collapse:collapse;margin:26px 0;font-size:15px;display:block;overflow-x:auto;}
.ar-body th,.ar-body td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;}
.ar-body th{font-family:var(--disp);font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);}

/* ── Sur-titre de partie ─────────────────────────────────────────────────── */
.ar-body .eye{margin:46px 0 6px;}
.ar-body .eye + h2{margin-top:6px;padding-top:0;border-top:0;}

/* ── « À retenir » : la synthèse doit sauter aux yeux ────────────────────── */
.ar-callout{
  margin:44px 0;padding:clamp(20px,2.6vw,30px);
  background:var(--cream);border:1px solid var(--line);border-radius:calc(var(--r) + 4px);
}
.ar-callout > :first-child{margin-top:0;}
.ar-callout > :last-child{margin-bottom:0;}
.ar-body .ar-callout h2,
.ar-body .ar-callout h3{
  margin:0 0 14px;padding:0;border-top:0;font-size:19px;
  font-family:var(--disp);letter-spacing:.01em;color:var(--ink);
  display:flex;align-items:center;gap:10px;
}
.ar-body .ar-callout h2::before,
.ar-body .ar-callout h3::before{
  content:"";width:10px;height:10px;border-radius:50%;background:var(--green);flex:none;
}
.ar-body .ar-callout ul{margin:0;}
.ar-body .ar-callout li{margin:9px 0;color:var(--ink);}

/* ── FAQ : une question = un bloc, pas un paragraphe de plus ─────────────── */
.ar-faq{margin:44px 0;}
.ar-body .ar-faq > h2{margin:0 0 18px;padding-top:0;border-top:0;}
.ar-body .ar-faq h3{
  margin:0;padding:16px 18px 0;font-size:17px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-bottom:0;
  border-radius:var(--r) var(--r) 0 0;
}
.ar-body .ar-faq h3 + p{
  margin:0 0 12px;padding:8px 18px 16px;color:var(--ink-soft);
  background:var(--paper);border:1px solid var(--line);border-top:0;
  border-radius:0 0 var(--r) var(--r);
}

/* ── Appel à l'action posé dans le corps de l'article ────────────────────── */
.ar-body .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:34px 0;}

@media(max-width:640px){
  .ar-body{font-size:16px;}
  .ar-body .lead,.ar-body > p:first-child{font-size:17.5px;}
  .ar-body h2{margin-top:38px;padding-top:18px;}
  .ar-body .cta-row .btn{flex:1 1 100%;justify-content:center;}
}