/* =====================================================================
   DealFabric — Article de blog
   =====================================================================
   Repris de Refonte/Pages/A propos/Article de blog (exemple)/
   article-blog-lecture-longue.html

   Rendu : single.php (theme enfant, il passe avant celui d Enfold).
   Donnees et preparation du corps : includes/df-article-data.php.

   --------------------------------------------------------------------
   DEUX CONTRAINTES QUI EXPLIQUENT LES SELECTEURS
   --------------------------------------------------------------------
   1. Le corps de l article est du contenu ALB : il arrive enveloppe
      dans des .flex_column et des .avia_textblock. On ne peut donc pas
      styler « le premier p du corps » a la legere, ni compter sur une
      classe posee a la main sur chaque titre. Les classes utiles
      (df-article__lead, df-article__h) sont posees par PHP sur les
      balises elles-memes, a la lecture du HTML rendu.

   2. Le niveau de titre des sections VARIE d un article a l autre :
      h2 dans la maquette, h4 dans les articles deja en ligne. Rien
      ici ne cible donc h2/h3/h4 — tout passe par .df-article__h.

   Ecart assume avec la maquette : pas de filet entre les sections.
   Elles sont separees par la respiration seule.
   ===================================================================== */

#top .df-article{

  --df-art-w:        var(--df-wrap, 1240px);  /* mesure de la maquette */
  --df-art-x:        var(--df-gutter, 36px);

  --df-art-toc-w:    230px;
  --df-art-toc-gap:  70px;
  --df-art-corps-w:  680px;

  --df-art-visuel-h: 280px;
  --df-art-hero-gap: 56px;

  --df-art-lead:     19px;
  --df-art-prose:    17px;   /* le corps lit plus grand que les pages */
  --df-art-h:        23px;
  --df-art-li:       16px;
}

/* --------------------------------------------------------------
   DEUX VARIANTES, UN SEUL JEU DE MESURES
   --------------------------------------------------------------
   df-article-tpl : les articles rendus par single.php, donc ceux
     ecrits dans l editeur classique. Balisage a nous.

   df-article-alb : les 50 articles deja publies, batis au
     constructeur avance. Balisage d Enfold, classe posee a la main
     sur la Color Section. Aucun sommaire : les ancres n existent
     pas dans ce contenu.

   Les deux partagent les tokens ci-dessus — c est tout l interet de
   les avoir sortis. Ce qui suit jusqu a « Variante ALB » ne concerne
   que le gabarit.
   -------------------------------------------------------------- */
#top .df-article-tpl{ padding:56px 0 0; }

#top .df-article__in{
  max-width:calc(var(--df-art-w) + 2 * var(--df-art-x));
  margin:0 auto;
  padding:0 var(--df-art-x);
}


/* ---------------------------------------------------------------
   Chapeau : titre + meta a gauche, visuel de une a droite
   --------------------------------------------------------------- */
#top .df-article__hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:var(--df-art-hero-gap);
  align-items:end;
  padding-bottom:44px;
}
/* Sans image mise en avant, le titre reprend toute la largeur plutot
   que de laisser une colonne vide. */
#top .df-article__hero-seul{ grid-template-columns:1fr; }

#top #wrap_all .df-article__hero h1{
  font-family:var(--df-font-ui);
  font-size:var(--df-h1);
  font-weight:400;
  line-height:1.08;
  letter-spacing:var(--df-ls-title);
  color:var(--df-ink);
  margin:0;
}

#top .df-article__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px;
  margin-top:20px;
  font-size:var(--df-xs);
  color:var(--df-grey);
}
#top .df-article__cats{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
#top .df-article__cats span{
  padding:4px 11px;
  border-radius:100px;
  font-size:var(--df-eyebrow);
  letter-spacing:.06em;
  color:var(--df-gold-ink);
  background:var(--df-gold-bg);
}

/* Hauteur imposee + object-fit:cover : les images de une n ont pas
   toutes le meme format (certaines sont encore des logos carres).
   Le bandeau garde la meme allure d un article a l autre. */
#top .df-article__visuel img{
  display:block;
  width:100%;
  height:var(--df-art-visuel-h);
  object-fit:cover;
  border-radius:var(--df-r-lg);
}


/* ---------------------------------------------------------------
   Grille : sommaire collant + corps
   --------------------------------------------------------------- */
#top .df-article__grille{
  display:grid;
  grid-template-columns:var(--df-art-toc-w) 1fr;
  gap:var(--df-art-toc-gap);
  align-items:start;
  padding-top:56px;
  border-top:1px solid var(--df-line);
}
#top .df-article__grille-seule{ grid-template-columns:1fr; }

/* --df-navh est la hauteur de la barre : le sommaire doit s arreter
   dessous, pas derriere. Elle est declaree dans 00-tokens avec le
   logo dont elle decoule, donc les deux ne divergent pas. */
#top .df-article__toc{
  position:sticky;
  top:calc(var(--df-navh, 102px) + 16px);
}
#top .df-article__toc a{
  display:grid;
  grid-template-columns:24px 1fr;
  gap:10px;
  padding:9px 0;
  border-top:1px solid var(--df-line);
  font-size:var(--df-small);
  line-height:1.4;
  color:var(--df-ink-2);
  transition:color var(--df-t);
}
#top .df-article__toc a:last-of-type{ border-bottom:1px solid var(--df-line); }
#top .df-article__toc a em{
  font-style:normal;
  font-size:var(--df-eyebrow);
  color:var(--df-grey);
}
#top .df-article__toc a:hover{ color:var(--df-ink); }

/* Le filet or de l eyebrow. Variante locale : elle n a d emploi que
   sur le sommaire, elle n a rien a faire dans 02-typo. */
#top .df .df-eyebrow-bar{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
#top .df .df-eyebrow-bar::before{
  content:"";
  display:block;
  width:2px;
  height:13px;
  background:var(--df-gold);
}


/* ---------------------------------------------------------------
   Corps
   ---------------------------------------------------------------
   Les selecteurs portent .df-article__corps et non .df seul : il
   faut passer devant « #top .df p » et « #top .df .avia_textblock ul »
   de 01-enfold-reset, qui valent la meme specificite a une classe
   pres. article.css est charge en dernier, l egalite se tranche donc
   dans le bon sens, mais on ne s en remet pas a l ordre seul.
   --------------------------------------------------------------- */
#top .df-article__corps{
  max-width:var(--df-art-corps-w);
  min-width:0;

  /* Filet de securite : flow-root contient ce qui flotterait encore,
     sans rien rogner contrairement a overflow:hidden. */
  display:flow-root;
}

/* La vraie correction est ici. grid.css pose « div .flex_column
   { float:left; width:100% } » : dans un article, ces colonnes n ont
   aucune raison de flotter, elles s empilent toutes sur une largeur
   pleine. Tant qu elles flottaient, la barre de categories — qui est
   une boite flex, donc un contexte de formatage, donc une boite qui
   REFUSE de chevaucher un flottant — se rangeait a droite de la
   colonne au lieu de passer dessous, et debordait de la page.
   Mesure a l appui : elle sortait a x=1088 sur un corps large de 680. */
#top .df .df-article__corps .flex_column{
  float:none;
  width:auto;
  margin-left:0;
  min-height:0;
}
#top .df .df-article__corps .flex_column::before,
#top .df .df-article__corps .flex_column::after{ display:none; }

#top .df .df-article__corps p{
  font-family:var(--df-font-text);
  font-size:var(--df-art-prose);
  line-height:1.68;
  color:var(--df-ink-2);
}

/* Chapeau d article : pose par PHP sur le premier bloc de texte,
   qu il s agisse d un paragraphe ou d un titre de niveau superieur
   a celui des sections. D ou le selecteur sans nom de balise. */
#top #wrap_all .df .df-article__lead{
  font-family:var(--df-font-text);
  font-size:var(--df-art-lead);
  font-weight:400;
  line-height:1.6;
  letter-spacing:normal;
  color:var(--df-ink);
  margin:0 0 30px;
}

/* Titre de section. Le niveau reel varie : on ne cible que la classe.
   Le <em> contient le numero que PHP a sorti du texte du titre. */
#top #wrap_all .df .df-article__h{
  font-family:var(--df-font-ui);
  font-size:var(--df-art-h);
  font-weight:400;
  line-height:1.2;
  letter-spacing:var(--df-ls-title);
  color:var(--df-ink);
  margin:36px 0 14px;

  /* L ancre du sommaire tomberait sous la barre collante. */
  scroll-margin-top:calc(var(--df-navh, 102px) + 24px);
}
#top #wrap_all .df .df-article__h em{
  font-style:normal;
  color:var(--df-gold-ink);
  margin-right:10px;
}

/* Listes du corps : filet en tete de ligne et tiret or, comme les
   listes reglees du reste du site. */
#top .df .df-article__corps ul{
  list-style:none;
  margin:14px 0 0;
  padding:0;
}
#top .df .df-article__corps ul li{
  display:grid;
  grid-template-columns:18px 1fr;
  gap:12px;
  margin:0;
  padding:10px 0;
  border-top:1px solid var(--df-line);
  font-family:var(--df-font-text);
  font-size:var(--df-art-li);
  line-height:1.55;
  color:var(--df-ink);
}
#top .df .df-article__corps ul li::before{
  content:"—";
  color:var(--df-gold);
  font-size:13px;
  margin-top:2px;
}
/* Les listes numerotees gardent leur numerotation. */
#top .df .df-article__corps ol{
  list-style:decimal;
  margin:14px 0 0 1.2em;
  padding:0;
}
#top .df .df-article__corps ol li{
  margin:0 0 .35em;
  font-family:var(--df-font-text);
  font-size:var(--df-art-li);
  line-height:1.55;
  color:var(--df-ink);
}

#top .df .df-article__corps img{
  border-radius:var(--df-r-md);
  height:auto;
}


/* ---------------------------------------------------------------
   Pied d article : les categories
   --------------------------------------------------------------- */
#top .df-article__catbar{
  clear:both;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:42px;
  padding-top:26px;
  border-top:1px solid var(--df-line);
}
#top .df-article__catbar em{
  font-style:normal;
  font-size:var(--df-eyebrow);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--df-grey);
}
#top .df .df-article__catbar a{
  padding:6px 15px;
  border:1px solid var(--df-line);
  border-radius:100px;
  font-size:13px;
  color:var(--df-ink-2);
  transition:border-color var(--df-t), color var(--df-t);
}
#top .df .df-article__catbar a:hover{
  border-color:var(--df-ink);
  color:var(--df-ink);
}


/* ---------------------------------------------------------------
   Appel a l action
   ---------------------------------------------------------------
   Tout vient de df-cta (cartes.css) : la carte nuit, le halo, le
   rayon, les marges internes, le bouton or, la mention. Il ne reste
   ici que ce que df-cta ne peut pas savoir — la mesure, puisque dans
   une page ALB c est .container qui la donne, et le bouton, qui est
   pose en lien nu et non dans un .avia-button-wrap d Enfold.
   --------------------------------------------------------------- */
#top .df-article__cta-in{
  max-width:calc(var(--df-art-w) + 2 * var(--df-art-x));
  margin:0 auto;
  padding:0 var(--df-art-x);
}
#top .df .df-article__cta .df-btn{ margin-top:26px; }
#top .df .df-article__cta p{ margin-bottom:0; }


/* ---------------------------------------------------------------
   Rupture. Celle de la maquette : la grille a deux colonnes casse
   bien avant les 1050px du reste du chassis.
   --------------------------------------------------------------- */
@media (max-width:1000px){
  #top .df-article__hero{
    grid-template-columns:1fr;
    gap:24px;
  }
  #top .df-article__grille{
    grid-template-columns:1fr;
    gap:30px;
    padding-top:36px;
  }
  #top .df-article__toc{ position:static; }
  #top .df-article__corps{ max-width:none; }
}

@media (max-width:767px){
  /* Enfold sert « width:85% » a .container sous 767px : le contenu des
     pages a donc 7,5% de marge de chaque cote. On prend la meme, sinon
     l article est decale par rapport a l en-tete et au pied de page. */
  #top .df-article{ --df-art-x:7.5%; }
}


/* =====================================================================
   VARIANTE ALB — les 50 articles deja publies
   =====================================================================
   A poser sur la COLOR SECTION qui enveloppe l article :

     Color Section   df df-sec-flush df-article df-article-alb
     Text Block h1   df-article-titre
     Text Block meta df-article-meta
     Image de une    df-article-visuel

   Rien d autre. Tout le corps est atteint par heritage depuis la
   section, parce qu on ne va pas poser une classe sur les 25 Text
   Blocks d un article — c est justement ce qu on cherche a eviter.

   Ces articles n ont pas de sommaire : leurs titres ne portent
   aucune ancre, et on a choisi de ne pas en generer pour l existant.
   ===================================================================== */

#top .df-article-alb{
  padding:56px 0 var(--df-sec-y, 96px);
}

/* La mesure de lecture. Elle est posee sur les BLOCS DE TEXTE et non
   sur la colonne : les images gardent ainsi toute la largeur du
   conteneur, comme le visuel de une de la maquette, pendant que la
   prose reste a 680px. */
#top .df-article-alb .flex_column:not(.df-article-cols) .av_textblock_section{
  max-width:var(--df-art-corps-w);
  margin-left:auto;
  margin-right:auto;
}

/* Les colonnes de l ALB flottent (grid.css : .flex_column{float:left}).
   Meme remede que dans le corps du gabarit — sans quoi tout element
   qui etablit un contexte de formatage se range a cote au lieu de
   passer dessous. */
/* Les colonnes reviennent a plat — SAUF celles d une vraie rangee.
   ------------------------------------------------------------
   Ces articles mettent un Text Block par colonne pleine largeur :
   les remettre a plat est ce qui donne la mesure de lecture.

   Mais 16 articles sur 50 ont au moins une rangee a deux colonnes
   REMPLIES cote a cote, et « Qu est-ce qu un CRM » en a quatorze.
   Les aplatir casserait leur mise en page. Le script leur pose
   df-article-cols (voir marquer_grilles dans articles.py) et cette
   regle les laisse a la grille flottante d Enfold.

   Les rangees « 1/3 vide | 1/3 logo | 1/3 vide » des fiches clients
   n ont qu une colonne remplie : elles ne sont pas marquees, elles
   passent a plat, et le logo se centre tout seul. */
#top .df-article-alb .entry-content-wrapper .flex_column:not(.df-article-cols){
  float:none;
  width:auto;
  margin-left:0;

  /* Chaque colonne porte 50px de padding bas, herite du reglage de
     colonne d Enfold. Il s ajoutait a la marge posee plus bas : le
     rythme vertical est tenu par les marges, et par elles seules. */
  padding-top:0;
  padding-bottom:0;
}
#top .df-article-alb .entry-content-wrapper .flex_column::before,
#top .df-article-alb .entry-content-wrapper .flex_column::after{ display:none; }


/* ---------------------------------------------------------------
   Chapeau : le titre et la ligne de meta
   --------------------------------------------------------------- */
#top #wrap_all .df-article-alb .df-article-titre h1{
  font-family:var(--df-font-ui);
  font-size:var(--df-h1);
  font-weight:400;
  line-height:1.08;
  letter-spacing:var(--df-ls-title);
  color:var(--df-ink);
  margin:0;
}
/* Les titres de ces articles portent un <span> colore en dur, herite
   de l ancienne charte. Le script de reecriture enleve l orange ;
   cette regle reprend la main sur tout ce qui resterait. */
#top #wrap_all .df-article-alb .df-article-titre h1 span{ color:inherit; }

#top .df-article-alb .df-article-meta{
  margin-top:20px;
  font-family:var(--df-font-ui);
  font-size:var(--df-xs);
  color:var(--df-grey);
}
#top .df.df-article-alb .df-article-meta p{
  margin:0;
  font-family:inherit;
  font-size:inherit;
  color:inherit;
}
#top .df.df-article-alb .df-article-meta em{ font-style:normal; }

/* Visuel de une.
   ------------------------------------------------------------
   PLAFOND de hauteur, pas hauteur imposee — contrairement au
   gabarit, qui lui travaille sur l image mise en avant et sait
   donc a quoi s attendre.

   Ici le script pose la classe sur la PREMIERE image du contenu,
   et selon l article c est un visuel en 798x423 ou le logo du
   client en 240x50 (FC Partner, et toutes les fiches clients).
   Un « height:280px; object-fit:cover » etirerait le logo et le
   recadrerait. Avec un plafond, le grand visuel se cale a 280px
   de haut et le petit logo garde sa taille. */
#top .df-article-alb .df-article-visuel{ margin:34px 0 44px; }
#top .df-article-alb .df-article-visuel img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:var(--df-art-visuel-h);
  margin-left:auto;
  margin-right:auto;
  border-radius:var(--df-r-lg);
}


/* ---------------------------------------------------------------
   Corps
   ---------------------------------------------------------------
   Ici on cible des BALISES, pas des classes : le contenu vient de
   l editeur, un Text Block sur deux est un titre de section et
   aucun ne porte de classe. Le niveau varie d un article a l autre
   (h2 dans 15 articles, h3 dans 31) — les deux sont donc traites
   comme un titre de section.
   --------------------------------------------------------------- */
#top .df.df-article-alb .avia_textblock{
  font-family:var(--df-font-text);
  font-size:var(--df-art-prose);
  line-height:1.68;
  color:var(--df-ink-2);
}
#top .df.df-article-alb .avia_textblock p{
  font-family:var(--df-font-text);
  font-size:var(--df-art-prose);
  line-height:1.68;
  color:var(--df-ink-2);
}

#top #wrap_all .df-article-alb .avia_textblock h2,
#top #wrap_all .df-article-alb .avia_textblock h3{
  font-family:var(--df-font-ui);
  font-size:var(--df-art-h);
  font-weight:400;
  line-height:1.2;
  letter-spacing:var(--df-ls-title);
  color:var(--df-ink);
  margin:0 0 14px;
}
#top #wrap_all .df-article-alb .avia_textblock h2 span,
#top #wrap_all .df-article-alb .avia_textblock h3 span{ color:inherit; }

/* Le rythme vertical.
   ------------------------------------------------------------
   La marge se pose sur la COLONNE, pas sur le bloc de texte.

   Ces articles mettent un Text Block par paragraphe, et chaque
   Text Block dans SA PROPRE colonne : 25 colonnes pour dix
   questions. C est donc la colonne qu Enfold espace, avec
   « body .column-top-margin{margin-top:50px} » (shortcodes.css).
   Une marge posee sur le bloc s ajoutait a ces 50px au lieu de
   les remplacer — 92px mesures entre deux sections, la ou la
   maquette en demande 36.

   Deux valeurs : une entre deux blocs, une devant un titre de
   section. La colonne du titre porte la respiration, pas le titre
   lui-meme, dont la marge tomberait a l interieur de la colonne
   et ne se verrait pas. */
#top .df-article-alb .entry-content-wrapper .flex_column:not(.df-article-cols),
#top .df-article-alb .entry-content-wrapper .flex_column.column-top-margin:not(.df-article-cols){
  margin-top:var(--df-art-bloc, 18px);
}
#top .df-article-alb .entry-content-wrapper .flex_column:first-child,
#top .df-article-alb .entry-content-wrapper .flex_column.avia-builder-el-first{
  margin-top:0;
}
#top .df-article-alb .entry-content-wrapper .flex_column:has(h2):not(.df-article-cols),
#top .df-article-alb .entry-content-wrapper .flex_column:has(h3):not(.df-article-cols){
  margin-top:var(--df-art-section, 42px);
}
/* Un navigateur sans :has garde 18px partout : plus plat, jamais
   casse. Safari 15.4 et tout le reste le connaissent. */

/* Listes reglees, comme dans le gabarit. */
#top .df.df-article-alb .avia_textblock ul{
  list-style:none;
  margin:14px 0 0;
  padding:0;
}
#top .df.df-article-alb .avia_textblock ul li{
  display:grid;
  grid-template-columns:18px 1fr;
  gap:12px;
  margin:0;
  padding:10px 0;
  border-top:1px solid var(--df-line);
  font-family:var(--df-font-text);
  font-size:var(--df-art-li);
  line-height:1.55;
  color:var(--df-ink);
}
#top .df.df-article-alb .avia_textblock ul li::before{
  content:"—";
  color:var(--df-gold);
  font-size:13px;
  margin-top:2px;
}

/* Images de corps : arrondies, jamais recadrees — elles portent des
   captures d ecran, un recadrage les rendrait illisibles. */
#top .df-article-alb .avia-image-container:not(.df-article-visuel) img{
  border-radius:var(--df-r-md);
  height:auto;
}

@media (max-width:1000px){
  #top .df-article-alb{ padding:40px 0 var(--df-sec-y-sm, 64px); }
  #top .df-article-alb .df-article-visuel{ margin:26px 0 32px; }
}

/* Rappel du piege, parce qu il a deja coute deux passes sur ce
   projet : df et df-article-alb sont sur la MEME Color Section.
   « .df .df-article-alb » demanderait a df-article-alb d etre un
   DESCENDANT de df et ne matcherait rien. On ecrit donc le selecteur
   compose, « .df.df-article-alb ». Meme remarque dans medias.css. */

/* ---------------------------------------------------------------
   Boutons
   ---------------------------------------------------------------
   Le script pose df-btn sur chaque av_button : sans classe, Enfold
   sortait son bouton par defaut, etranger a la charte.

   Reste l alignement. boutons.css met le WRAP en inline-block —
   indispensable ailleurs, sans quoi le wrap se peint en bouton
   autour du bouton — mais cela annule le « position=center » de
   l ALB, qui passe par un text-align sur un wrap en bloc. Les
   auteurs ont centre ces boutons : on leur rend leur choix, sans
   toucher a la regle generale.
   --------------------------------------------------------------- */
#top .df.df-article-alb .avia-button-wrap.df-btn{ display:block; }
#top .df.df-article-alb .avia-button-wrap.avia-button-center{ text-align:center; }
#top .df.df-article-alb .avia-button-wrap.avia-button-right{ text-align:right; }
#top .df.df-article-alb .avia-button-wrap.avia-button-left{ text-align:left; }