/* ============================================================================
   AM — GABARIT D'ARTICLE aligné sur la REFONTE (single post)  ·  am-refonte-article.css
   Chargée UNIQUEMENT sur les articles (body.am-rf-article via mu-plugin).
   Rôle : porter la TYPOGRAPHIE + la MISE EN PAGE du design system refonte
   (Inter · corps 18px/1.65 · anthracite · H2 ~31px · listes/blockquote/liens/médias)
   sur le gabarit single-post, pour que tout article hebdo tombe dans la charte.
   NE TOUCHE PAS am-refonte.css. Se superpose à am-article.css (FAQ .am-faq / CTA .am-btn)
   SANS le clobber : les règles de corps ciblent les enfants DIRECTS de .entry-content
   (> p / > h2 / > ul …) ; les composants FAQ/CTA restent gérés par am-article.css.
   Couleurs = charte SITE monochrome : anthracite #1a1a1a + blanc. Zéro accent inventé.
   Réversible : retirer l'enqueue de ce fichier = retour au style thème Divi.
   ============================================================================ */

/* ---- Tokens (portés par le conteneur, PAS :root -> zéro fuite hors article) ---- */
.am-rf-article #left-area{
  --ink:#1a1a1a; --ink-body:#3a3f45; --muted:#6b7075; --faint:#8a9099;
  --hairline:#ececec; --radius:14px; --measure:720px;
  --shadow:0 2px 10px rgba(0,0,0,.06);
  /* ═══ TAILLE DU CORPS = taille de lecture standard du SITE (knob unique) ═══
     Le corps d'article reprend l'échelle de texte du site (pages am-refonte).
     16.5px/1.6 = lecture standard. Monter à 17/18 pour coller au pixel à la
     prose des pages (18px) si besoin. Les TITRES (H2 31 / H3 22) restent inchangés. */
  --body-size:16.5px; --body-lh:1.6;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ============================================================
   EN-TÊTE D'ARTICLE — titre + FILET gris entre titre et contenu
   (méta date/catégorie ET fil d'Ariane RETIRÉS).
   Titre rendu par Divi dans .et_post_meta_wrapper ; on le restyle et on porte
   le filet (border-bottom hairline) sur ce wrapper -> séparateur H1 / contenu.
   Le contenu REMPLIT la colonne gauche Divi (2 colonnes) jusqu'au filet gris
   qui la sépare de la sidebar : PAS de cap de mesure (plus de vide à droite).
   La sidebar recherche reste à droite (layout Divi natif conservé).
   ============================================================ */
/* FILET gris entre le titre et le contenu (à l'emplacement de l'ancienne méta).
   Largeur = colonne de contenu (max-width:100%), respiration au-dessus/en-dessous. */
.am-rf-article #left-area .et_post_meta_wrapper{
  max-width:100%; margin:0 0 1.9em; padding-bottom:1.4em;
  border-bottom:1px solid var(--hairline);
}
.am-rf-article #left-area .entry-title{
  font-family:inherit; font-weight:800; letter-spacing:-.02em; line-height:1.12;
  color:var(--ink); margin:0 0 .35em;
  font-size:clamp(30px,3.4vw,42px); text-wrap:balance;
}

/* ============================================================
   CORPS — pleine largeur de la colonne gauche + typographie refonte
   (enfants DIRECTS). Le corps + les images vont jusqu'au filet gris de la
   sidebar (largeur naturelle Divi du left-area) : plus de cap 720px.
   ============================================================ */
.am-rf-article #left-area .entry-content{
  max-width:100%;
  font-family:inherit; font-size:var(--body-size); line-height:var(--body-lh); color:var(--ink-body);
}
.am-rf-article #left-area .entry-content > p{
  font-size:var(--body-size); line-height:var(--body-lh); color:var(--ink-body); margin:0 0 1.4em;
}
.am-rf-article #left-area .entry-content > p.lead,
.am-rf-article #left-area .entry-content > p:first-of-type{ font-size:calc(var(--body-size) + 1.5px); }
.am-rf-article #left-area .entry-content strong{ font-weight:700; color:var(--ink); }
.am-rf-article #left-area .entry-content em{ font-style:italic; }

/* Titres de section : taille refonte + rythme d'article mesuré (pas sur-aéré). */
.am-rf-article #left-area .entry-content > h2,
.am-rf-article #left-area .entry-content > h3,
.am-rf-article #left-area .entry-content > h4{
  font-family:inherit; color:var(--ink);
}
.am-rf-article #left-area .entry-content > h2{
  font-size:31px; font-weight:700; letter-spacing:-.015em; line-height:1.18;
  margin:1.9em 0 .5em; text-wrap:balance;
}
.am-rf-article #left-area .entry-content > h3{
  font-size:22px; font-weight:600; line-height:1.3; margin:1.6em 0 .4em;
}
.am-rf-article #left-area .entry-content > h4{
  font-size:18px; font-weight:600; line-height:1.35; margin:1.4em 0 .35em;
}

/* Liens de corps discrets (les boutons .am-btn sont exclus -> gérés par am-article.css) */
.am-rf-article #left-area .entry-content a:not(.am-btn){
  color:var(--ink); text-decoration:underline;
  text-decoration-color:rgba(26,26,26,.35); text-underline-offset:2px;
  transition:text-decoration-color .18s ease;
}
.am-rf-article #left-area .entry-content a:not(.am-btn):hover{
  text-decoration-color:var(--ink);
}

/* Listes propres */
.am-rf-article #left-area .entry-content > ul,
.am-rf-article #left-area .entry-content > ol{
  margin:1.2em 0 1.5em; padding-left:1.35em; color:var(--ink-body);
}
.am-rf-article #left-area .entry-content > ul{ list-style:disc; }
.am-rf-article #left-area .entry-content > ol{ list-style:decimal; }
.am-rf-article #left-area .entry-content > ul > li,
.am-rf-article #left-area .entry-content > ol > li{
  margin:.5em 0; line-height:1.6; padding-left:.2em;
}
.am-rf-article #left-area .entry-content > ul > li::marker,
.am-rf-article #left-area .entry-content > ol > li::marker{ color:var(--faint); }

/* Blockquote sobre (filet gauche anthracite) */
.am-rf-article #left-area .entry-content > blockquote{
  margin:1.7em 0; padding:.3em 0 .3em 1.3em;
  border-left:3px solid var(--ink); color:var(--ink);
  font-style:italic; font-size:calc(var(--body-size) + 1px); line-height:1.55;
}
.am-rf-article #left-area .entry-content > blockquote p{ margin:0 0 .6em; }
.am-rf-article #left-area .entry-content > blockquote p:last-child{ margin-bottom:0; }

/* ---- Médias : coins arrondis + ombre légère (façon .media-halftone) ----
   Complète am-article.css (qui gère les MARGES des figures) : ici radius + ombre. */
.am-rf-article #left-area .entry-content figure img,
.am-rf-article #left-area .entry-content > p img,
.am-rf-article #left-area .entry-content > img{
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.am-rf-article #left-area .entry-content figcaption{
  font-size:14px; color:var(--muted); line-height:1.5;
}

/* Prix officiel A&M (préfixe « CHF » petit & gris) — si un prix apparaît */
.am-rf-article #left-area .entry-content .am-price::before{
  content:"CHF"; font-size:.7em; font-weight:400; color:#5f646b;
  margin-right:.35em; letter-spacing:.02em;
}

/* ============================================================
   NAVIGATION ARTICLE PRÉCÉDENT / SUIVANT (hook et_after_post, bas de colonne)
   Liens texte seuls (flèche + libellé) : prev à gauche, next à droite, filet haut.
   ============================================================ */
.am-rf-article #left-area .am-rf-postnav{
  max-width:100%;
  display:flex; align-items:center; flex-wrap:wrap; gap:14px 24px;
  margin:2.8em 0 .4em; padding-top:1.7em; border-top:1px solid var(--hairline);
}
.am-rf-article #left-area .am-rf-postnav__link{
  display:inline-flex; align-items:center; gap:.5em;
  color:var(--ink); text-decoration:none; font-weight:600; font-size:15px; line-height:1.3;
  transition:opacity .18s ease;
}
.am-rf-article #left-area .am-rf-postnav__link:hover{ opacity:.6; }
.am-rf-article #left-area .am-rf-postnav__prev{ margin-right:auto; }   /* pousse le next à droite */
.am-rf-article #left-area .am-rf-postnav__next{ margin-left:auto; text-align:right; }
.am-rf-article #left-area .am-rf-postnav__arrow{ color:var(--muted); font-size:16px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:782px){
  .am-rf-article #left-area .et_post_meta_wrapper,
  .am-rf-article #left-area .entry-content{ max-width:100%; }
  .am-rf-article #left-area .entry-content > h2{ font-size:26px; }
  .am-rf-article #left-area .entry-content > h3{ font-size:20px; }
}
@media (max-width:480px){
  /* Mobile : on garde la MÊME taille de corps que le site (var(--body-size)),
     pas de bump — évite un corps mobile plus gros que le desktop. */
  .am-rf-article #left-area .entry-content > p,
  .am-rf-article #left-area .entry-content{ font-size:var(--body-size); }
}