/* =====================================================================
   DealFabric — Fil d Ariane
   =====================================================================
   Enfold le sort dans un « title_container », un bandeau pleine
   largeur place juste au-dessus de #main, donc avant la premiere
   section de la page. Sur nos pages ce bandeau n a pas de titre — la
   classe « empty_title » le dit — mais il garde son fond colore et sa
   hauteur, d ou l epaisseur vide au-dessus des bandeaux de tete.

   On ne le deplace pas dans le DOM : il est deja exactement la ou on
   le veut, juste au-dessus du titre de la page. Il suffit de le
   degonfler et de l habiller.

   Les libelles, eux, sont dans includes/df-fil-ariane.php.
   ===================================================================== */

#top .title_container{
  --df-ariane-y:   18px;   /* respiration autour de la ligne */
  --df-ariane-sep: 10px;   /* ecart de part et d autre du / */
}

/* Le bandeau : plus de fond, plus de filet, plus de hauteur propre.
   Les trois classes d Enfold sont nommees dans le selecteur parce
   que c est precisement leur habillage qu on neutralise — les lire
   ici evite de chercher d ou venait la bande grise. */
#top #wrap_all .title_container,
#top #wrap_all .title_container.alternate_color,
#top #wrap_all .title_container.light_bg_color{
  min-height:0;
  padding:var(--df-ariane-y) 0 0;
  background:none;
  border:0;
}

/* La hauteur ne venait pas que du bandeau : layout.css la pose aussi
   sur le .container qu il contient —

     #top .title_container .container{
       padding-top:10px; padding-bottom:10px; min-height:56px;
     }

   — et 56px de min-height suffisent a rouvrir la bande a eux seuls.
   On ne touche qu au vertical : les gouttieres laterales viennent de
   .container et doivent rester, c est d elles que le fil tient son
   alignement sur le titre. */
#top #wrap_all .title_container .container{
  min-height:0;
  padding-top:0;
  padding-bottom:0;
}

/* Enfold ecrit un <h1> vide dans ce bandeau quand la page n a pas de
   titre a y mettre : il occupe sa ligne pour rien. */
#top #wrap_all .title_container .main-title:empty{ display:none; }

/* La ligne elle-meme. Elle herite de la mesure et des gouttieres du
   .container, donc elle s aligne d office sur le titre de la page
   qui suit : il n y a rien a caler a la main. */
#top #wrap_all .title_container .breadcrumb{
  position:static;
  float:none;
  margin:0;
  padding:0;
  max-width:none;
  font-family:var(--df-font-ui);
  font-size:var(--df-xs);
  /* Enfold met le premier maillon en gras : sur une ligne de 12,5px
     ca desequilibre le fil, « Accueil » pesant plus que la page ou
     l on se trouve. Pose ici, l heritage le reprend partout. */
  font-weight:400;
  line-height:1.5;
  letter-spacing:.02em;
  color:var(--df-grey);
  text-align:left;
}
#top #wrap_all .title_container .breadcrumb-trail a,
#top #wrap_all .title_container .breadcrumb-trail span{ font-weight:400; }
/* Le fil reste en flux INLINE, et c est voulu.
   ------------------------------------------------------------
   layout.css met chaque segment en « display:block; float:left;
   padding:0 3px », et borne le separateur a « width:8px;
   overflow:hidden ». Deux consequences : le / se fait rogner, et
   un bloc en overflow:hidden aligne sa boite par son bord bas et
   non par sa ligne de base — d ou le / qui flotte plus haut que
   les mots.

   Une flex ne repare rien : ses enfants directs sont reblockifies,
   le display:inline qu on leur donnerait serait ignore. On revient
   donc au flux inline, ou les lignes de base s alignent seules. */
#top #wrap_all .title_container .breadcrumb-trail{
  display:block;
}
#top #wrap_all .title_container .breadcrumb-trail > *,
#top #wrap_all .title_container .breadcrumb-trail a,
#top #wrap_all .title_container .breadcrumb-trail span{
  display:inline;
  float:none;
  width:auto;
  overflow:visible;
  padding:0;
}

/* Le lien, et le <span itemprop="name"> qu Enfold loge dedans pour
   les donnees structurees : sans la seconde ligne, ce span garde le
   #2B2C34 du theme et le bleu pose sur le lien ne se voit jamais.
   Mesure a l appui : lien en rgb(46,104,153), texte en rgb(43,44,52). */
#top #wrap_all .title_container .breadcrumb a{
  color:var(--df-link);
  text-decoration:none;
  transition:color var(--df-t-fast);
}
#top #wrap_all .title_container .breadcrumb a span{ color:inherit; }
#top #wrap_all .title_container .breadcrumb a:hover{
  color:var(--df-ink);
  text-decoration:none;
}

/* La page courante ne se clique pas : elle reste en gris, et ce
   sont les liens qui portent la couleur. */
#top #wrap_all .title_container .breadcrumb .trail-end{
  color:var(--df-grey);
}

#top #wrap_all .title_container .breadcrumb .sep{
  margin:0 var(--df-ariane-sep);
  color:var(--df-line-alt);
}

/* Le prefixe « Vous etes ici : ». Il ne sort plus par defaut — voir
   df_fil_ariane_libelles() — mais la regle reste pour qui le remet. */
#top #wrap_all .title_container .breadcrumb-title{
  color:var(--df-grey);
  margin-right:2px;
}

/* Les donnees structurees d Enfold : des <span> qui portent le rang
   de chaque niveau et n ont rien a montrer.

   « span.hidden » et pas « .hidden » seul : la regle qui remet les
   segments en inline, plus haut, porte un selecteur de type et
   gagnerait sinon — les numeros de position s afficheraient. */
#top #wrap_all .title_container .breadcrumb-trail span.hidden{ display:none; }

/* Le bandeau de tete qui suit porte deja 56px de padding haut : sans
   cela le fil d Ariane flotterait loin du titre. On le rapproche en
   reduisant ce padding, et seulement quand le fil le precede. */
#top #wrap_all .title_container + .container_wrap .df-sec-hero,
#top #wrap_all .title_container + .container_wrap.df-sec-hero{
  padding-top:28px;
}

@media (max-width:767px){
  #top .title_container{ --df-ariane-y:14px; }
  #top #wrap_all .title_container .breadcrumb{ font-size:11.5px; }
}