/* ============================================================
   DealFabric Design System — 01 · Contexte Enfold
   ------------------------------------------------------------
   MODE ALB : les composants sont montés avec les éléments du
   builder visuel (Color Section, colonnes, Text Block, boutons),
   et le style vient des classes posées dessus. Le client édite
   ses textes normalement, la mise en page est pilotée par le CSS.

   La classe se pose dans :
     Advanced > Developer Settings > Custom CSS Class

   Sur la Color Section :  df df-sec  (+ variantes)
   Sur une colonne :       df-card, df-cell… (optionnel)

   « df » n ouvre QUE le contexte typographique. Le rythme
   vertical est porté par « df-sec », séparément : le header du
   site porte « df » sans être une section.

   Prérequis, réglé une fois :
   Enfold > Général Layout > Dimensions > Maximum Container Width
   = 1240 px. Le .container d Enfold devient notre conteneur, il
   n y a donc plus rien à neutraliser de ce côté.

   Spécificité : sélecteurs préfixés #top pour passer devant le
   thème sans recourir à !important.
   ============================================================ */


/* ------------------------------------------------------------
   1 · Rythme vertical des sections
   ------------------------------------------------------------
   On neutralise le padding que la Color Section applique via
   .content, quel que soit le réglage « Section padding » choisi
   dans l ALB, et on impose le nôtre. Un réglage oublié ne peut
   donc plus décaler une section.
   ------------------------------------------------------------ */

/* Portee « .df » et NON « .df-sec » : layout.css sert
   « .content{padding:50px 0} » a toute section, y compris celles
   en df-sec-flush, df-sec-sm, df-pad-top ou df-pad-bottom. Scoper
   a df-sec laissait ces quatre variantes avec 100px de padding
   parasite, alors qu elles servent justement a maitriser le
   rythme vertical. */
#top .df .content,
#top .df .template-page{
  padding-top:0;
  padding-bottom:0;
  border:0;
}
#top .df .entry-content-wrapper{
  margin:0;
}

#top .df-sec{
  padding:var(--df-sec-y) 0;
}
#top .df-sec-sm{    padding:var(--df-sec-y-sm) 0; }
#top .df-sec-flush{ padding:0; }

/* Bandeau de tete des pages internes : les maquettes lui donnent
   56 px en haut et 44 en bas, la ou une section courante en prend
   92 des deux cotes. */
#top .df-sec-hero{ padding:56px 0 44px; }

/* Le filet que la maquette pose en haut de la section suivante.
   Porte ici par le bandeau lui-meme : il ne depend plus de ce qui
   vient apres, et ne retombe plus juste au-dessus d un sur-titre. */
#top .df-sec-hero,
#top #wrap_all #main .avia-section.df-sec-hero{
  border-bottom-style:solid;
  border-bottom-width:1px;
  border-bottom-color:var(--df-line);
}

/* Sections jumelles : un chapeau au-dessus, sa grille en dessous.
   Le nom dit OU se trouve le padding conserve, pas celui supprime —
   df-pad-top garde le padding en haut et colle la section suivante.
     chapeau  -> df df-pad-top
     grille   -> df df-pad-bottom
   Entre les deux il ne reste que la marge basse de .df-head.

   Ces deux classes sont AUTONOMES : elles posent le padding
   conserve, elles ne se contentent pas de retirer l autre. Il ne
   faut donc pas y ajouter df-sec, qui ferait double emploi. */
#top .df-pad-top{
  padding-top:var(--df-sec-y);
  padding-bottom:0;
}
#top .df-pad-bottom{
  padding-top:0;
  padding-bottom:var(--df-sec-y);
}

/* ------------------------------------------------------------
   Filets de séparation de section
   ------------------------------------------------------------
   Enfold pose « avia-no-border-styling » sur toute Color Section
   dont le reglage de bordure vaut « aucune » — le defaut — et
   shortcodes.css sert :

     #top #wrap_all #main .avia-no-border-styling{ border:none }

   Soit TROIS id. Aucun selecteur a un seul id ne peut passer
   devant, quel que soit le nombre de classes. On s aligne donc
   sur la meme profondeur, plus une classe.

   Le selecteur court est conserve pour les sections hors de
   #main, ou la regle d Enfold ne s applique pas.
   ------------------------------------------------------------ */

#top .df-rule,
#top #wrap_all #main .avia-section.df-rule{
  border-top-style:solid;
  border-top-width:1px;
  border-top-color:var(--df-line);
}

#top .df-rule-bottom,
#top #wrap_all #main .avia-section.df-rule-bottom{
  border-bottom-style:solid;
  border-bottom-width:1px;
  border-bottom-color:var(--df-line);
}


/* ------------------------------------------------------------
   2 · Contexte typographique
   ------------------------------------------------------------ */

#top .df,
#top .df *,
#top .df *::before,
#top .df *::after{
  box-sizing:border-box;
}

#top .df{
  font-family:var(--df-font-ui);
  font-weight:400;
  color:var(--df-ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* Titres — Enfold sert des tailles et des graisses issues du
   Customizer, on repart de la charte. */
#top .df h1, #top .df h2, #top .df h3,
#top .df h4, #top .df h5, #top .df h6{
  font-family:var(--df-font-ui);
  font-weight:400;
  margin:0 0 .4em;
  padding:0;
  color:var(--df-ink);
  text-transform:none;
  letter-spacing:var(--df-ls-title);
}
#top .df h1{ font-size:var(--df-h1); line-height:1.06; }
#top .df h2{ font-size:var(--df-h2); line-height:var(--df-lh-title); }
#top .df h3{ font-size:var(--df-h3); line-height:1.3; letter-spacing:-.02em; }
#top .df h4{ font-size:var(--df-h4); line-height:1.35; }

/* Paragraphes — ATTENTION : on garde une respiration entre
   paragraphes. Un Text Block édité par le client contient
   souvent plusieurs <p> ; les écraser à margin:0 collerait tout.
   Enfold sert 0.85em, on passe à une valeur de charte. */
#top .df p{
  margin:0 0 1.1em;
  padding:0;
  font-family:var(--df-font-text);
  font-size:var(--df-body);
  line-height:var(--df-lh-text);
  color:var(--df-ink-2);
}
#top .df p:last-child{ margin-bottom:0; }

/* Listes — deux régimes.
   Par défaut on remet à zéro : le header, dont le markup est écrit
   à la main, structure ses volets en <ul><li> et n attend aucune
   puce. Enfold appliquerait sinon list-style et margin-left. */
#top .df ul,
#top .df ol{
  margin:0;
  padding:0;
  list-style:none;
}
#top .df li{
  margin:0;
}

/* Dans un Text Block en revanche, le client s attend à des puces. */
#top .df .avia_textblock ul{ list-style:disc;    margin:0 0 1.1em 1.2em; }
#top .df .avia_textblock ol{ list-style:decimal; margin:0 0 1.1em 1.2em; }
#top .df .avia_textblock li{
  margin:0 0 .35em;
  padding:0;
  font-family:var(--df-font-text);
  font-size:var(--df-body);
  line-height:var(--df-lh-text);
  color:var(--df-ink-2);
}

/* Boutons — Enfold impose un style global sur button et input.
   Le header s en sert pour ses déclencheurs de menu et son index :
   sans cette remise à zéro, ils s affichent encadrés. */
#top .df button{
  font:inherit;
  color:inherit;
  background:none;
  border:0;
  padding:0;
  margin:0;
  cursor:pointer;
  border-radius:0;
  text-shadow:none;
  box-shadow:none;
  text-transform:none;
  letter-spacing:normal;
}
#top .df input,
#top .df textarea,
#top .df select{
  font-family:var(--df-font-text);
  box-shadow:none;
  text-shadow:none;
  background-image:none;
}
#top .df address{
  font-style:normal;
  margin:0;
}

/* Le conteneur de Text Block ne doit rien imposer */
#top .df .avia_textblock{
  font-size:inherit;
  line-height:inherit;
  color:inherit;
}


/* ------------------------------------------------------------
   Renfort de spécificité sur la typographie
   ------------------------------------------------------------
   Enfold génère depuis ses options de typographie un fichier
   dynamique — uploads/dynamic_avia/<theme>-<hash>.css — dont les
   sélecteurs portent DEUX id :

     #top #wrap_all .main_color h2 { font-family:lato; font-weight:800 }

   Soit (2,1,1) contre (1,1,1) pour « #top .df h2 ». Le thème
   gagnait donc sur tous nos titres, quelle que soit la classe.

   On rejoue les mêmes déclarations à spécificité égale. Notre
   feuille dépendant de « avia-dynamic », elle est servie après :
   à égalité, c est la dernière qui l emporte. Pas de !important.
   ------------------------------------------------------------ */

#top #wrap_all .df h1,
#top #wrap_all .df h2,
#top #wrap_all .df h3,
#top #wrap_all .df h4,
#top #wrap_all .df h5,
#top #wrap_all .df h6{
  font-family:var(--df-font-ui);
  font-weight:400;
  color:var(--df-ink);
  text-transform:none;
  letter-spacing:var(--df-ls-title);
  margin:0 0 .4em;
}
#top #wrap_all .df h1{ font-size:var(--df-h1); line-height:1.06; }
#top #wrap_all .df h2{ font-size:var(--df-h2); line-height:var(--df-lh-title); }
#top #wrap_all .df h3{ font-size:var(--df-h3); line-height:1.3; letter-spacing:-.02em; }
#top #wrap_all .df h4{ font-size:var(--df-h4); line-height:1.35; }

/* On ne renforce PAS les paragraphes.
   Une règle « #top #wrap_all .df p » passerait devant df-eyebrow,
   df-lead et le texte des cellules, qui sont à un seul id. Elle
   réglerait un problème en en créant trois. Si Enfold s avérait
   écraser aussi les paragraphes, le correctif devra viser la
   propriété en cause, pas le sélecteur entier. */

/* Les contextes sombres doivent rester prioritaires sur ce renfort */
#top #wrap_all .df-gradient h1, #top #wrap_all .df-gradient h2,
#top #wrap_all .df-gradient h3, #top #wrap_all .df-gradient h4,
#top #wrap_all .df-night h1, #top #wrap_all .df-night h2,
#top #wrap_all .df-night h3, #top #wrap_all .df-night h4,
#top #wrap_all .df-panel h2,
#top #wrap_all .df .df-card-night h3{
  color:var(--df-n-text);
}

/* Liens : Enfold colore et souligne via le Color Set actif */
#top .df a{
  color:var(--df-link);
  text-decoration:none;
  border:0;
  transition:color var(--df-t-fast);
}
#top .df a:hover{
  color:var(--df-ink);
  text-decoration:none;
}
#top .df h1 a, #top .df h2 a, #top .df h3 a, #top .df h4 a{
  color:inherit;
}

#top .df img{
  max-width:100%;
  height:auto;
  display:block;
}
#top .df hr{
  border:0;
  border-top:1px solid var(--df-line);
  margin:0;
}


/* ------------------------------------------------------------
   3 · Les gris par défaut d Enfold
   ------------------------------------------------------------
   Le thème sert #666 / #999 / #eee via les Color Sets. La charte
   impose des gris froids : une teinte neutre casse le bleu ink.
   ------------------------------------------------------------ */

#top .df .avia_textblock .df-muted,
#top .df small{
  color:var(--df-grey);
}


/* ------------------------------------------------------------
   4 · Confort de lecture
   ------------------------------------------------------------ */

@media (prefers-reduced-motion:reduce){
  #top .df *,
  #top .df *::before,
  #top .df *::after{
    animation-duration:.01ms;
    animation-iteration-count:1;
    transition-duration:.01ms;
    scroll-behavior:auto;
  }
}


/* ------------------------------------------------------------
   Rythme entre éléments ALB empilés
   ------------------------------------------------------------
   Un Text Block suivi d une Image, d un Bouton ou d un autre
   Text Block : rien ne les sépare. Enfold ne pose pas de marge
   sur ses conteneurs, et notre reset annule celle du dernier
   paragraphe pour que les cartes ferment proprement.

   Le combinateur « ~ » et non « + » : Enfold intercale un
   <style> inline entre les éléments. Avec « + », l element qui
   suit ce <style> ne serait jamais atteint ; et un element
   simplement precede d un <style> recevrait une marge a tort.
   ------------------------------------------------------------ */

#top .df .flex_column > *:not(style) ~ *:not(style){
  margin-top:22px;
}

/* Dans un chapeau, les rôles typographiques portent déjà leurs
   propres marges — sur-titre 16px, titre 0.4em. */
#top .df .flex_column.df-head > *:not(style) ~ *:not(style){
  margin-top:0;
}

/* Pas d exception pour une image qui ouvre une carte : le
   combinateur « ~ » s en charge deja. N ayant qu un <style>
   avant elle, elle ne trouve aucun frere *:not(style) et ne
   recoit donc pas de marge.

   Surtout, ne PAS utiliser :first-of-type ici — il vise le
   premier element du meme TYPE (div), pas la premiere image.
   Dans une carte ou le texte est un <section>, l image est le
   premier div : l exception s appliquait a tort et recollait
   l image au texte. */