/* ===========================================================================
   ARTICLES « ÉPURÉ » — la nouvelle maquette des articles
   Fichier : /wp-content/themes/infinite-child/css/articles-epure.css
   Version : v1.1.0 — 07/10/2026 (v1.1.0 : photo du bandeau = Gravatar de Fred au micro)
   Enqueue : sites/excel-exercice.com/snippets/150-articles-epure.php
             (articles de lecture seulement, APRÈS articles.css)

   POURQUOI UN FICHIER NEUF, ET PAS DES RETOUCHES DANS articles.css
   Fred, 07/10/2026 : « Au pire, tu fais une sauvegarde de ce qui existe
   aujourd'hui, comme ça on pourra refaire un retour arrière facilement. »
   → articles.css v1.16.0 n'est PAS modifié : c'est lui, la sauvegarde. Cette
   feuille se pose PAR-DESSUS. Désactiver le snippet 150 = retour à l'identique.

   LA RÉFÉRENCE : sites/excel-exercice.com/projets/articles/maquettes-article-v4.html
   (direction « A · Épuré », validée par Fred le 07/10 à 12 h 48).

   SPÉCIFICITÉ : même règle qu'articles.css — la feuille concaténée de Themify
   arrive en fin de <head>, donc on gagne par `html body …`, sans !important.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. PARAGRAPHES ET LISTES — les valeurs que Fred a réglées sur la maquette
   ---------------------------------------------------------------------------
   Paragraphe : 18 px, interligne 1,45 (était 1,64), écart 1,25 ligne (était
   2,2 lignes : 39,6 px mesurés le 07/10).
   Listes : 16,5 px (était 17), interligne 1,25, 0,2 ligne entre deux puces.
   Marqueurs : puces vertes, numéros « 1. » verts en gras.
   --------------------------------------------------------------------------- */

html body .module-post-content p{
  line-height: 1.45;
  margin: 0 0 1.25em;
}

html body .module-post-content li{
  font-size: 16.5px;
  line-height: 1.25;
  margin: .2em 0;
}

html body .module-post-content ul > li::marker{
  color: var(--c-brand, #107C41);
}

html body .module-post-content ol > li::marker{
  color: var(--c-brand, #107C41);
  font-weight: 700;
}

/* Une sous-liste reste collée à sa puce (le retrait de 2em d'articles.css
   n'est PAS touché : seuls haut et bas changent). */
html body .module-post-content li > :is(ul, ol){
  margin-top: .2em;
  margin-bottom: .1em;
}


/* ---------------------------------------------------------------------------
   2. LES TITRES — en noir
   ---------------------------------------------------------------------------
   La maquette A les met en encre (#0e1814) : le vert ne sert plus qu'aux
   liens, aux puces et aux repères. Ça REMPLACE le vert #19683d des titres
   d'articles (choix du 24/08/2026), qui reste celui des liens et du menu.
   --------------------------------------------------------------------------- */

html body .module-post-title .tbp_title,
html body .module-post-content :is(h2, h3, h4){
  color: var(--c-ink, #0e1814);
}

html body .module-post-content h2{
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.25;
  margin: 2.2em 0 .7em;
}

html body .module-post-content :is(h3, h4){
  font-weight: 700;
}


/* ---------------------------------------------------------------------------
   3. LE GRAND TITRE ET LA PHRASE D'ACCROCHE
   ---------------------------------------------------------------------------
   H1 : 35 px maigre → 44 px gras (32 px sur téléphone).
   Accroche (classe `ee-lede`, posée par le snippet 150 sur le 1er paragraphe) :
   21 px. Si Fred l'a écrite en gras, elle repasse en demi-gras : à cette
   taille, le gras complet pèse plus que le titre.
   --------------------------------------------------------------------------- */

html body .module-post-title .tbp_title{
  font-size: clamp(32px, 3.4vw, 44px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.025em;
  margin: 0 0 .5em;
}

html body .module-post-content p.ee-lede{
  font-size: 21px;
  line-height: 1.55;
  color: var(--c-text, #36443e);
  margin: 0 0 1.3em;
}

html body .module-post-content p.ee-lede strong{
  font-weight: 600;
  color: inherit;
}

@media (max-width: 640px){
  html body .module-post-content p.ee-lede{ font-size: 18.5px; }
}


/* ---------------------------------------------------------------------------
   4. LE BANDEAU AUTEUR ET LE BLOC « DANS CET ARTICLE »
   ---------------------------------------------------------------------------
   Ils remplacent la ligne « Catégorie · Dernière mise à jour · Temps de
   lecture · vues » et le petit bloc auteur à l'avatar généré, qui sont
   MASQUÉS (jamais supprimés) — et seulement quand le bandeau est présent.
   --------------------------------------------------------------------------- */

html body .module_column:has(.ee-band) > .module_subrow,
html body .module_column:has(.ee-band) > .module-image:has(img[src*="gravatar"]){
  display: none;
}

/* La ligne masquée laissait 40 px au-dessus du texte (articles.css § 7) : sans
   elle, l'accroche se rattache directement au titre, comme sur la maquette. */
html body .module_column:has(.ee-band) > .module-post-content{
  margin-top: 0;
}

/* Paragraphe vide en tête d'article (laissé par WordPress) : il ajoutait un trou. */
html body .module-post-content .tb_text_wrap > p:empty:first-child{
  display: none;
}

html body .module-post-content .ee-band{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  margin: 0 0 32px;
  border-top: 1px solid var(--c-border, #d4dcd7);
  border-bottom: 1px solid var(--c-border, #d4dcd7);
  font-size: 14px;
  line-height: 1.45;
  color: var(--c-muted, #677571);
}

/* La photo de Fred : sa photo Gravatar, au micro (v1.1.0 — Fred : « celle qui
   existait avant où j'étais vraiment speaker »). L'image est posée par le
   snippet 150 (get_avatar_url) ; ici, seulement le recadrage sur le visage.
   ~~hero-fred.webp, la photo de l'accueil~~ — refusée par Fred le 07/10. */
html body .module-post-content .ee-band-av{
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #e7e7e7;
  background-repeat: no-repeat;
  background-size: 170% auto;
  background-position: 65% 26%;
}

html body .module-post-content .ee-band-who a{
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-ink, #0e1814);
  text-decoration: none;
}

html body .module-post-content .ee-band-info{
  margin-left: auto;
  text-align: right;
  display: flex;
  flex-direction: column;
}

html body .module-post-content .ee-band-cat{
  font-weight: 600;
  color: var(--c-brand-dark, #19683d);
  text-decoration: none;
}

@media (max-width: 640px){
  html body .module-post-content .ee-band{ flex-wrap: wrap; }
  html body .module-post-content .ee-band-info{
    margin-left: 0;
    text-align: left;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 12px;
    flex-basis: 100%;
  }
}

/* Le bloc gris aux coches vertes — « une superbe idée » (Fred, 07/10). */
html body .module-post-content .ee-learn{
  background: #f6f7f8;
  border-radius: 14px;
  padding: 22px 26px;
  margin: 0 0 2.2em;
}

html body .module-post-content .ee-learn-h{
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-muted, #677571);
}

html body .module-post-content .ee-learn ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

html body .module-post-content .ee-learn li{
  position: relative;
  padding-left: 28px;
  margin: .45em 0;
  font-size: 16.5px;
  line-height: 1.4;
}

html body .module-post-content .ee-learn li::before{
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--c-brand, #107C41);
  font-weight: 800;
}

html body .module-post-content .ee-learn li a{
  color: var(--c-ink, #0e1814);
  text-decoration: none;
}

html body .module-post-content .ee-learn li a:hover{
  color: var(--c-brand-dark, #19683d);
  text-decoration: underline;
}

html body .module-post-content .ee-learn-plus{
  color: var(--c-muted, #677571);
}

/* Le sommaire envoie sur un titre : on le dégage du haut de l'écran. */
html body .module-post-content h2[id]{
  scroll-margin-top: 90px;
}


/* ---------------------------------------------------------------------------
   5. LE FOND BLANC
   ---------------------------------------------------------------------------
   La maquette A est blanche d'un bord à l'autre. Sur fond crème, l'article
   était une carte blanche posée sur la page ; ici la page entière est blanche.
   Mesuré le 07/10 : seul <body> porte le crème (#pagewrap, #body et la
   rangée sont transparents), l'en-tête est déjà blanc.
   ⚠️ Cette feuille n'est chargée que sur les articles : le reste du site
   garde son crème.
   --------------------------------------------------------------------------- */

html body.single-post{
  background-color: #fff;
}


/* ---------------------------------------------------------------------------
   6. LA CARTE DE FIN « À VOUS DE JOUER »
   ---------------------------------------------------------------------------
   Violet = « tu produis quelque chose » : la signalétique des exercices
   (00-tokens-charte.css § 3).
   --------------------------------------------------------------------------- */

html body .module-post-content .ee-cta{
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 3em 0 1em;
  padding: 26px 28px;
  border: 1px solid var(--c-border, #d4dcd7);
  border-radius: 16px;
}

html body .module-post-content .ee-cta-ico{
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #f1eaff;
  color: var(--c-exercice, #9456FF);
  display: grid;
  place-items: center;
  font-size: 26px;
}

html body .module-post-content .ee-cta-txt p{
  margin: 0;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--c-muted, #677571);
}

html body .module-post-content .ee-cta-txt p.ee-cta-h{
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
  color: var(--c-ink, #0e1814);
}

html body .module-post-content a.ee-cta-btn{
  margin-left: auto;
  white-space: nowrap;
  background: var(--c-ink, #0e1814);
  color: #fff;
  text-decoration: none;
  padding: 13px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
}

html body .module-post-content a.ee-cta-btn:hover{
  background: var(--c-brand-dark, #19683d);
  color: #fff;
}

@media (max-width: 640px){
  html body .module-post-content .ee-cta{ flex-wrap: wrap; }
  html body .module-post-content a.ee-cta-btn{ margin-left: 0; }
}