/* Positive Theme — article. Porté de pages/article.dc.html.
   Les sélecteurs du corps de texte sont scopés sous .pm-article-body : ils
   portent des noms génériques (.h2, .btn, .num, .faq) qui ne doivent pas fuir. */

.pm-article a:hover { color: var(--pm-rose) }

/* ---------- EN-TÊTE ---------- */
.pm-crumb {
  font: 700 11px/1 var(--pm-font-body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--pm-muted-3); display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
}
.pm-crumb a:hover { color: var(--pm-rose) }
.pm-crumb__sep { opacity: .6 }

.art-hd { margin-top: 22px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center }
.art-hd h1 { font-size: 62px; line-height: .96; margin: 0; max-width: 20ch; color: var(--pm-ink) }
.meta { display: flex; align-items: center; gap: 14px; margin-top: 24px; flex-wrap: wrap }
.meta img { width: 52px; height: 52px; border: var(--pm-bd); box-shadow: var(--pm-sh-3); flex: none }
.meta b { font: 800 14px/1.2 var(--pm-font-body); display: block }
.meta small { font: 600 12px/1.3 var(--pm-font-body); color: var(--pm-muted); display: block; margin-top: 3px; letter-spacing: .02em }
.hero-img { border: var(--pm-bd); box-shadow: var(--pm-sh-10); overflow: hidden; background: var(--pm-violet) }
.hero-img img { width: 100%; height: 380px; object-fit: cover }

/* ---------- COLONNE DE LECTURE ---------- */
.pm-article-wrap { display: flex; justify-content: center }
.pm-article-body { max-width: var(--pm-reading); width: 100% }
.pm-article-body p { font: 400 17.5px/1.72 var(--pm-font-body); margin: 0 0 22px }
.pm-article-body p a, .pm-article-body li a {
  color: var(--pm-link); font-weight: 600; text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.pm-article-body p a:hover, .pm-article-body li a:hover { color: var(--pm-violet) }
.pm-article-body strong { font-weight: 700 }

/* Chapeau + lettrine */
.pm-article-body .chapeau {
  font: 500 21px/1.6 var(--pm-font-body) !important;
  border-left: 9px solid var(--pm-rose); padding-left: 20px; margin-bottom: 34px !important;
}
.pm-article-body .chapeau::first-letter {
  font-family: var(--pm-font-display); font-weight: 400; font-size: 76px; line-height: .78;
  float: left; margin: 6px 12px 0 0; color: var(--pm-violet); text-shadow: 3px 3px 0 var(--pm-rose);
}
/* La lettrine du thème remplace celle de Gutenberg. */
.pm-article-body .has-drop-cap::first-letter { float: none; font-size: inherit; margin: 0; line-height: inherit }
.pm-article-body .chapeau.has-drop-cap::first-letter {
  float: left; font-size: 76px; margin: 6px 12px 0 0; line-height: .78;
}

/* Intertitres */
.pm-article-body .h2, .pm-article-body h2 {
  font-family: var(--pm-font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em;
  font-size: 44px; margin: 56px 0 22px; display: flex; align-items: center; gap: 18px;
  line-height: 1; flex-wrap: wrap; color: var(--pm-ink);
}
.pm-article-body .h2::after, .pm-article-body h2::after { content: ""; flex: 1 0 120px; height: 14px; background: var(--pm-zebra) }
.pm-article-body h3 {
  font-family: var(--pm-font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em;
  font-size: 26px; margin: 0 0 12px; line-height: 1.05;
}
.pm-article-body h4 {
  font-family: var(--pm-font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em;
  font-size: 21px; margin: 28px 0 10px; line-height: 1.08;
}

/* Listes, citations, images, séparateurs (rendu Gutenberg générique) */
.pm-article-body ul, .pm-article-body ol { margin: 0 0 22px; padding-left: 22px }
.pm-article-body li { font: 400 17px/1.7 var(--pm-font-body); margin-bottom: 8px }
.pm-article-body blockquote {
  background: var(--pm-ink); color: #fff; border: var(--pm-bd); box-shadow: var(--pm-sh-rose-8);
  padding: 30px 32px; margin: 0 0 34px;
}
.pm-article-body blockquote p { font: 500 19px/1.6 var(--pm-font-body); color: #fff; margin: 0 }
.pm-article-body blockquote cite, .pm-article-body blockquote small {
  display: block; font: 800 11px/1 var(--pm-font-body); letter-spacing: .16em;
  text-transform: uppercase; color: var(--pm-rose); margin-top: 16px; font-style: normal;
}
.pm-article-body figure { margin: 0 0 28px }
.pm-article-body figure img, .pm-article-body > img {
  border: var(--pm-bd); box-shadow: var(--pm-sh-6); width: 100%; height: auto;
}
.pm-article-body figure.aligncenter { text-align: center }
.pm-article-body figcaption { font: 600 13px/1.5 var(--pm-font-body); color: var(--pm-muted); margin-top: 10px; text-align: center }
.pm-article-body hr { border: 0; height: 3px; background: var(--pm-ink); margin: 34px 0 }
.pm-article-body .wp-block-spacer { display: none } /* l'espacement est porté par le thème */
.pm-article-body video { width: 100%; height: auto; border: var(--pm-bd); box-shadow: var(--pm-sh-6) }
/* Exception : la vidéo de la bannière partenaire remplit sa colonne. Sans cette
   règle, le `height: auto` ci-dessus l'emporte sur celui de main.css (même
   spécificité, article.css chargé après) et la vidéo garde son ratio en
   laissant le fond violet apparaître sous elle. */
.pm-article-body .pm-adband__media video {
  height: 100%; object-fit: cover; border: 0; box-shadow: none;
}
.pm-article-body table { width: 100%; border-collapse: collapse; margin: 0 0 28px; border: var(--pm-bd) }
.pm-article-body th, .pm-article-body td { border: var(--pm-bd-thin); padding: 12px 14px; font: 400 15.5px/1.5 var(--pm-font-body) }
.pm-article-body th { background: var(--pm-violet-lite); font-weight: 800 }

/* Boutons Gutenberg → pilule noire */
.pm-article-body .wp-block-button__link {
  display: inline-flex; align-items: center; gap: 9px; background: var(--pm-ink); color: #fff;
  font: 800 11.5px/1 var(--pm-font-body); letter-spacing: .12em; text-transform: uppercase;
  padding: 14px 20px; border: var(--pm-bd); border-radius: 999px;
  box-shadow: 4px 4px 0 rgba(20,20,20,.35); min-height: 44px;
  transition: transform .15s, box-shadow .15s, background .15s; text-decoration: none;
}
.pm-article-body .wp-block-button__link:hover { background: var(--pm-rose); color: #fff; transform: translate(-2px,-2px); box-shadow: 6px 6px 0 rgba(20,20,20,.5) }

/* ---------- HABILLAGE DU GUTENBERG HÉRITÉ ----------
   Les articles ont été composés sous l'ancien thème : ils portent des styles
   posés dans l'éditeur (coins arrondis, bordures fines, aplats pastel, texte
   justifié) qui ne sont pas à la DA. On les ramène à la charte sans toucher au
   contenu. Les `!important` sont nécessaires : ces valeurs sont en style inline
   sur les blocs, une règle de feuille ne peut pas les battre autrement. */

/* Texte justifié : dans une colonne de 820px, le français produit des rivières
   et des césures hasardeuses. Toute la DA est en drapeau à gauche. */
.pm-article-body .has-text-align-justify { text-align: left }

/* Encadré « À retenir » : rédigé comme un tableau d'une seule cellule sous
   l'ancien thème, converti en aside par positive_article_body(). */
.pm-article-body .pm-callout {
  background: var(--pm-violet-lite);
  border: var(--pm-bd);
  box-shadow: var(--pm-sh-6);
  padding: 24px 26px;
  margin: 0 0 30px;
  font: 400 16.5px/1.7 var(--pm-font-body);
}
.pm-article-body .pm-callout strong:first-child {
  display: block;
  font-family: var(--pm-font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: 20px;
  color: var(--pm-violet);
  margin-bottom: 8px;
}
.pm-article-body .pm-callout p:last-child { margin-bottom: 0 }

/* Vrais tableaux : WordPress rend déjà leur `figure` défilante horizontalement,
   on ne rajoute pas de conteneur. On garde juste la marge basse et l'inertie
   tactile, pour qu'un tableau à 5 colonnes reste atteignable sur mobile. */
.pm-article-body figure.wp-block-table { -webkit-overflow-scrolling: touch }
.pm-article-body figure.wp-block-table table { margin-bottom: 0 }

/* Radius : la charte est à 0 partout, sauf pilules et étiquettes. */
.pm-article-body .wp-block-group,
.pm-article-body .wp-block-columns,
.pm-article-body .wp-block-column,
.pm-article-body figure img,
.pm-article-body .wp-block-table { border-radius: 0 !important }

/* Encadrés à fond coloré : bordure noire épaisse + ombre dure au lieu du filet
   fin d'origine. Le dégradé pastel choisi dans l'éditeur est conservé. */
.pm-article-body .wp-block-group.has-background,
.pm-article-body .wp-block-columns.has-background {
  border: var(--pm-bd) !important;
  box-shadow: var(--pm-sh-6);
  padding: 26px 24px !important;
  margin-bottom: 28px;
}

/* Boutons de l'éditeur (CTA affiliés) : l'éditeur a posé un filet blanc de 1px
   et un radius nul en inline, ce qui écrasait la pilule pop. */
.pm-article-body .wp-block-button__link {
  border: var(--pm-bd) !important;
  border-radius: 999px !important;
  background: var(--pm-ink) !important;
  color: #fff !important;
}
.pm-article-body .wp-block-button__link:hover { background: var(--pm-rose) !important }
.pm-article-body .wp-block-buttons { margin: 0 0 28px }

/* Étoiles de notation (bloc Jetpack) : jaune d'origine hors palette. */
.pm-article-body .wp-block-jetpack-rating-star {
  margin: 0 0 18px;
  display: flex;
  gap: 4px;
  justify-content: center;
}
.pm-article-body .wp-block-jetpack-rating-star span {
  color: var(--pm-rose) !important;
  font-size: 26px;
  line-height: 1;
}

/* Colonnes dans la colonne de lecture : elles passent en pile bien avant le
   seuil de Gutenberg, sinon chaque colonne devient illisible. */
@media (max-width: 700px) {
  .pm-article-body .wp-block-columns { flex-wrap: wrap !important }
  .pm-article-body .wp-block-column { flex-basis: 100% !important }
}

/* Citation-définition (bloc noir à ombre rose) */
.pm-article-body .quote { background: var(--pm-ink); color: #fff; border: var(--pm-bd); box-shadow: var(--pm-sh-rose-8); padding: 30px 32px; margin: 0 0 34px }
.pm-article-body .quote p { font: 500 19px/1.6 var(--pm-font-body); color: #fff; margin: 0 }
.pm-article-body .quote p a { color: var(--pm-rose-pale) }
.pm-article-body .quote small { display: block; font: 800 11px/1 var(--pm-font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--pm-rose); margin-top: 16px }

/* ---------- GRILLE DE CRITÈRES ---------- */
.pm-article-body .crit { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 28px 0 8px }
.pm-article-body .crit article {
  background: #fff; border: var(--pm-bd); box-shadow: var(--pm-sh-6);
  padding: 26px 24px 24px; transition: transform .15s, box-shadow .15s;
}
.pm-article-body .crit article:hover { transform: translate(-2px,-2px); box-shadow: var(--pm-sh-9) }
.pm-article-body .crit article:nth-child(3n+1) { background: var(--pm-bg-rose) }
.pm-article-body .crit article:nth-child(3n+2) { background: var(--pm-bg-violet) }
.pm-article-body .crit article:nth-child(3n+3) { background: #fff }
.pm-article-body .num {
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  font-family: var(--pm-font-display); font-size: 24px; color: #fff; background: var(--pm-violet);
  border: var(--pm-bd); box-shadow: var(--pm-sh-3); transform: rotate(-4deg); margin-bottom: 16px;
}
.pm-article-body .crit article:nth-child(even) .num { background: var(--pm-rose); transform: rotate(4deg) }
.pm-article-body .crit h3 { font-size: 22px; line-height: 1.04; margin: 0 0 10px }
.pm-article-body .crit p { font: 400 15px/1.6 var(--pm-font-body); margin: 0 }
.pm-article-body .crit p + p { margin-top: 12px }
.pm-article-body .crit ul { margin: 12px 0 0; padding: 0 0 0 2px; list-style: none; display: flex; flex-direction: column; gap: 8px }
.pm-article-body .crit li { font: 600 14.5px/1.45 var(--pm-font-body); display: flex; gap: 10px; align-items: flex-start; margin: 0 }
.pm-article-body .crit li::before { content: ""; flex: none; width: 9px; height: 9px; margin-top: 6px; background: var(--pm-rose); border: var(--pm-bd-thin) }

/* ---------- FICHES PLATEFORMES ---------- */
.pm-article-body .subhd {
  font-size: 20px; font-family: var(--pm-font-display); text-transform: uppercase; font-weight: 400;
  letter-spacing: .04em; display: flex; align-items: center; gap: 14px; margin: 44px 0 20px; color: var(--pm-ink);
}
.pm-article-body .subhd::before { content: ""; width: 34px; height: 12px; background: var(--pm-rose); flex: none }
.pm-article-body .plat { display: flex; flex-direction: column; gap: 24px }
.pm-article-body .plat article {
  display: grid; grid-template-columns: 240px minmax(0,1fr); border: var(--pm-bd);
  box-shadow: var(--pm-sh-7); background: #fff; overflow: hidden; transition: transform .15s, box-shadow .15s;
}
.pm-article-body .plat article:hover { transform: translate(-2px,-2px); box-shadow: var(--pm-sh-10) }
.pm-article-body .plat .ph { min-height: 200px; border-right: var(--pm-bd); background: var(--pm-violet) }
.pm-article-body .plat .ph img { width: 100%; height: 100%; object-fit: cover; border: 0; box-shadow: none }
.pm-article-body .plat .in { padding: 24px 26px 26px; display: flex; flex-direction: column; align-items: flex-start }
.pm-article-body .plat .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px }
.pm-article-body .plat h3 { font-size: 28px; margin: 0; line-height: 1 }
.pm-article-body .price {
  font: 800 11px/1 var(--pm-font-body); letter-spacing: .1em; text-transform: uppercase;
  background: var(--pm-bg-violet); border: 2.5px solid var(--pm-ink); padding: 7px 11px; border-radius: 999px;
}
.pm-article-body .plat p { font: 400 15.5px/1.62 var(--pm-font-body); margin: 0 0 18px }
.pm-article-body .btn {
  display: inline-flex; align-items: center; gap: 9px; background: var(--pm-ink); color: #fff;
  font: 800 11.5px/1 var(--pm-font-body); letter-spacing: .12em; text-transform: uppercase;
  padding: 14px 20px; border: var(--pm-bd); border-radius: 999px;
  box-shadow: 4px 4px 0 rgba(20,20,20,.35); transition: transform .15s, box-shadow .15s, background .15s;
  margin-top: auto; min-height: 44px;
}
.pm-article-body .btn:hover { background: var(--pm-rose); color: #fff; transform: translate(-2px,-2px); box-shadow: 6px 6px 0 rgba(20,20,20,.5) }

/* ---------- FAQ ---------- */
.pm-article-body summary::-webkit-details-marker { display: none }
.pm-article-body .faq { display: flex; flex-direction: column; gap: 16px; margin-top: 24px }
.pm-article-body .faq details { border: var(--pm-bd); box-shadow: var(--pm-sh-6); background: #fff }
.pm-article-body .faq summary {
  list-style: none; cursor: pointer; font-family: var(--pm-font-display); text-transform: uppercase;
  font-weight: 400; font-size: 21px; line-height: 1.1; padding: 20px 58px 20px 22px;
  position: relative; min-height: 44px;
}
/* La question est un <h3> pour le plan de titres : il ne doit pas réintroduire
   ses marges ni sa taille propre à l'intérieur du résumé repliable. */
.pm-article-body .faq summary h3 {
  display: inline; margin: 0; padding: 0;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.pm-article-body .faq summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-family: var(--pm-font-display); font-size: 30px; color: var(--pm-rose); line-height: 1;
}
.pm-article-body .faq details[open] summary { background: var(--pm-ink); color: #fff }
.pm-article-body .faq details[open] summary::after { content: "–" }
.pm-article-body .faq .ans { padding: 20px 22px 24px; border-top: var(--pm-bd) }
.pm-article-body .faq .ans p { font: 400 16px/1.66 var(--pm-font-body); margin: 0 }
.pm-article-body .faq .ans p + p { margin-top: 14px }

/* ---------- BLOC AUTEUR ---------- */
.pm-author {
  margin: 56px 0 0; background: var(--pm-grad-brand); border: var(--pm-bd); box-shadow: var(--pm-sh-9);
  padding: 32px; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 26px; align-items: start;
}
.pm-author img { width: 96px; height: 96px; border: var(--pm-bd); box-shadow: var(--pm-sh-4); flex: none }
.pm-author .nm { font-family: var(--pm-font-display); text-transform: uppercase; font-weight: 400; font-size: 26px; color: #fff; margin: 0 0 4px }
.pm-author small { font: 800 11px/1 var(--pm-font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--pm-rose-pale); display: block; margin-bottom: 12px }
.pm-author p { font: 500 15.5px/1.62 var(--pm-font-body); color: rgba(255,255,255,.95); margin: 0 }

/* ---------- BANNIÈRE PARTENAIRE EN FIN D'ARTICLE ---------- */
.pm-article .pm-adband { margin-top: 66px; border: var(--pm-bd) }
/* Débordement volontaire de la colonne de lecture, au-dessus de 1180px seulement. */
@media (min-width: 1180px) { .pm-article .pm-adband { margin-left: -110px; margin-right: -110px } }


/* ---------- À LIRE ENSUITE ---------- */
.rel-hd {
  color: var(--pm-violet); text-shadow: 4px 4px 0 var(--pm-rose); font-size: 44px; margin: 0 0 24px;
  display: flex; align-items: center; gap: 18px; line-height: 1;
}
.rel-hd::after { content: ""; flex: 1; height: 14px; background: var(--pm-zebra-rev) }

@media (max-width: 1000px) {
  .art-hd { grid-template-columns: 1fr; gap: 26px }
  .art-hd h1 { font-size: 40px; max-width: none }
  .hero-img img { height: 250px }
  .pm-article-body { max-width: none }
  .pm-article-body .crit { grid-template-columns: 1fr }
  .pm-article-body .plat article { grid-template-columns: 1fr }
  .pm-article-body .plat .ph { border-right: 0; border-bottom: var(--pm-bd); min-height: 0; height: 230px }
  .pm-article-body .h2, .pm-article-body h2, .rel-hd { font-size: 32px }
  .pm-author { grid-template-columns: 1fr; gap: 18px }
  .pm-article .pm-adband { margin-top: 52px }
}
@media (max-width: 620px) {
  .art-hd h1 { font-size: 31px }
  .pm-article-body p { font-size: 16.5px }
  .pm-article-body .chapeau { font-size: 18.5px !important; padding-left: 15px; border-left-width: 7px }
  .pm-article-body .chapeau::first-letter,
  .pm-article-body .chapeau.has-drop-cap::first-letter { font-size: 58px; margin: 4px 9px 0 0; text-shadow: 2px 2px 0 var(--pm-rose) }
  .pm-article-body .h2, .pm-article-body h2, .rel-hd { font-size: 26px; gap: 12px }
  .rel-hd { text-shadow: 3px 3px 0 var(--pm-rose) }
  .pm-article-body .h2::after, .pm-article-body h2::after, .rel-hd::after { height: 11px }
  .pm-article-body .quote, .pm-article-body blockquote { padding: 22px 20px }
  .pm-article-body .quote p, .pm-article-body blockquote p { font-size: 17px }
  .pm-article-body .plat h3 { font-size: 23px }
  .pm-article-body .plat .ph { height: 180px }
  .pm-article-body .faq summary { font-size: 18px; padding: 18px 50px 18px 16px }
}