/* =====================================================================
   DealFabric — Pied de page
   =====================================================================
   Repris de Refonte/Pages/Gabarits/footer-compact.html.
   Rendu : includes/df-footer.php, greffe sur le hook « ava_after_footer »
   d Enfold. Donnees : includes/df-footer-data.php.

   Le pied de page est HORS de #main : aucune des regles .main_color
   d Enfold ne l atteint. On reste malgre tout en #top #wrap_all sur les
   titres et les listes, pour passer devant les regles generiques du
   theme parent sans jouer au plus fort a chaque ligne.

   --------------------------------------------------------------------
   POURQUOI DES TOKENS LOCAUX PLUTOT QUE --df-small ET --df-xs
   --------------------------------------------------------------------
   #top.home reechelonne toute la typographie (--df-small passe de 13.5
   a 15px, --df-eyebrow de 11 a 12px). Le pied de page, lui, est le meme
   sur les 20 pages : s il consommait ces tokens, il serait plus gros
   sur l accueil que partout ailleurs. Meme raison que le 12px code en
   dur de .df-mega__pane h4 dans header.css.

   Les valeurs de COULEUR, elles, viennent bien des tokens : la classe
   df-night portee par le <footer> remappe --df-ink, --df-line et
   compagnie vers la palette sombre.
   ===================================================================== */

#top .df-footer{

  /* Mesure. On suit la barre de navigation, pas les 1240px de la
     maquette : la navbar est passee a 1440 depuis, et un pied de page
     plus etroit que l en-tete se voit immediatement. Une seule valeur
     a changer pour revenir a 1240 : --df-footer-w. */
  --df-footer-w:   var(--df-nav-w, 1440px);
  --df-footer-x:   var(--df-gutter, 36px);

  --df-ft-y:       52px;   /* respiration haute de la bande */
  --df-ft-gap:     44px;   /* gouttiere entre colonnes */
  --df-ft-row-y:   40px;   /* bas de la rangee, avant le filet legal */

  --df-ft-logo-h:  40px;
  --df-ft-base:    13px;   /* baseline sous le logo */
  --df-ft-adr:     13.5px; /* adresses */
  --df-ft-link:    13.5px; /* liens rapides */
  --df-ft-sur:     11px;   /* surtitres : h4 et <em> des adresses */
  --df-ft-legal:   12.5px; /* ligne legale */

  /* clear:both n est PAS decoratif — sans lui le pied de page disparait.
     Enfold empile le contenu en flottants et ne compte que sur le
     « clear:both » de .container_wrap (grid.css:39) pour que #main
     reprenne sa hauteur. Le dernier .container_wrap de la page etait
     #footer : en le supprimant (Enfold > Footer > nofooterarea), plus
     rien ne degageait les flottants, #main retombait a 57px et notre
     pied de page remontait a y=159, recouvert par les sections qui
     sont, elles, en position:relative. Mesure a l appui : sans
     clear:both top=159 h=570 masque, avec clear:both top=1320 h=322.

     position:relative pour la meme raison que .container_wrap. Pas de
     z-index en revanche : grid.css:38 explique qu il fait disparaitre
     les fonds fixes sous Chrome. */
  clear:both;
  position:relative;

  padding:var(--df-ft-y) 0 0;
  color:var(--df-n-text-2);
  font-family:var(--df-font-ui);
}

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

#top .df-footer a{ text-decoration:none; transition:color var(--df-t); }
#top .df-footer svg{ display:block; }


/* ---------------------------------------------------------------
   La rangee
   --------------------------------------------------------------- */
#top .df-footer__row{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:var(--df-ft-gap);
  align-items:start;
  padding-bottom:var(--df-ft-row-y);
}


/* ---------------------------------------------------------------
   Marque : logo, baseline, reseaux
   --------------------------------------------------------------- */

/* Le logo est la version fond sombre (df_footer_logo_url). height fixe
   + width:auto : le fichier fait 1268x355, la largeur suit le ratio,
   et les attributs width/height du <img> reservent la place avant
   chargement. */
#top .df-footer__logo{ display:inline-block; }
#top .df-footer__logo img{
  display:block;
  height:var(--df-ft-logo-h);
  width:auto;
  max-width:100%;
}

/* Repli texte si le fichier n est pas televerse. */
#top .df-footer__nom{
  font-size:19px;
  font-weight:600;
  letter-spacing:-.03em;
  color:var(--df-n-text);
}

/* .df de plus dans le selecteur : 01-enfold-reset pose « #top .df p »
   avec une specificite (0,1,1) que « #top .df-footer__base » (0,1,0)
   ne bat pas. Sans ce .df, la baseline heritait de --df-body — donc
   17px sur l accueil, 15.5 ailleurs. Mesure a l appui. */
#top .df .df-footer__base{
  margin:14px 0 0;
  max-width:34ch;
  font-family:var(--df-font-text);
  font-size:var(--df-ft-base);
  line-height:1.55;
  color:var(--df-n-text-2);
}

#top .df-footer__soc{
  display:flex;
  gap:8px;
  margin-top:22px;
}
#top .df-footer__soc a{
  width:34px;
  height:34px;
  border:1px solid var(--df-n-line);
  border-radius:var(--df-r-sm);
  display:grid;
  place-items:center;
  transition:border-color var(--df-t), background-color var(--df-t);
}
#top .df-footer__soc a:hover{
  border-color:var(--df-n-text-2);
  background:var(--df-n-card);
}
#top .df-footer__soc svg{
  width:15px;
  height:15px;
  fill:var(--df-n-text);
}


/* ---------------------------------------------------------------
   Adresses
   --------------------------------------------------------------- */
#top .df-footer__adr{
  font-style:normal;
  font-family:var(--df-font-text);
  font-size:var(--df-ft-adr);
  line-height:1.6;
  color:var(--df-n-text);
  margin:0;
}
#top .df-footer__adr em{
  display:block;
  margin-bottom:6px;
  font-style:normal;
  font-family:var(--df-font-ui);
  font-size:var(--df-ft-sur);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--df-n-text-2);
}


/* ---------------------------------------------------------------
   Liens rapides
   --------------------------------------------------------------- */
#top #wrap_all .df-footer__nav h4{
  margin:0 0 16px;
  font-family:var(--df-font-ui);
  font-size:var(--df-ft-sur);
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.4;
  color:var(--df-n-text-2);
}

#top #wrap_all .df-footer__nav ul{
  list-style:none;
  margin:0;
  padding:0;
}
#top #wrap_all .df-footer__nav li{
  margin:0 0 2px;
  padding:0;
}
#top #wrap_all .df-footer__nav li::before{ display:none; }

#top .df-footer .df-footer__lk{
  display:block;
  padding:5px 0;
  font-size:var(--df-ft-link);
  line-height:1.45;
  color:var(--df-n-text);
}
#top .df-footer .df-footer__lk:hover,
#top .df-footer .df-footer__lk.df-is-current{ color:var(--df-n-link); }


/* ---------------------------------------------------------------
   Ligne legale
   --------------------------------------------------------------- */
#top .df-footer__legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px 30px;
  padding:22px 0;
  border-top:1px solid var(--df-n-line);
  font-size:var(--df-ft-legal);
  color:var(--df-n-text-2);
}
/* Meme raison que pour la baseline : « #top .df a » vaut (0,1,1) et
   repeindrait tout en --df-n-link. On passe devant avec le .df. */
#top .df .df-footer__legal a{ color:var(--df-n-text-2); }
#top .df .df-footer__legal a:hover{ color:var(--df-n-text); }

/* Pousse le bloc de droite. Porte par la pilule de langue, ou par le
   retour en haut quand Polylang est absent — voir df-footer.php. */
#top .df-footer__push{ margin-left:auto; }

#top .df-footer__lang{
  display:inline-flex;
  border:1px solid var(--df-n-line);
  border-radius:7px;
  overflow:hidden;
}
#top .df-footer__lang a{
  padding:7px 13px;
  font-size:var(--df-ft-legal);
  line-height:1;
  color:var(--df-n-text-2);
}
#top .df-footer__lang a.df-is-current{
  background:var(--df-n-card);
  color:var(--df-n-text);
}
#top .df-footer__lang a:hover{ color:var(--df-n-text); }

#top .df-footer__top{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:var(--df-ft-legal);
  color:var(--df-n-text-2);
}
#top .df-footer__top i{
  width:22px;
  height:22px;
  border:1px solid var(--df-n-line);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-style:normal;
  font-size:10px;
}


/* ---------------------------------------------------------------
   Ruptures. Celles de la maquette, pas celles du chassis : la
   rangee a quatre colonnes casse bien avant 1050px.
   --------------------------------------------------------------- */
@media (max-width:900px){
  #top .df-footer__row{
    grid-template-columns:1fr 1fr;
    gap:32px;
  }
  #top .df-footer__push{ margin-left:0; }
}

@media (max-width:767px){
  /* Enfold sert « .responsive #top #wrap_all .container{width:85%} »
     sous 767px : le contenu des pages a donc 7,5% de marge de chaque
     cote. On prend la MEME valeur plutot que les 36px du chassis, sinon
     le pied de page est decale de 7px par rapport a tout ce qui le
     surmonte — decalage bien visible sur un telephone. */
  #top .df-footer{ --df-footer-x:7.5%; }
}

@media (max-width:560px){
  #top .df-footer{ --df-ft-y:40px; }
  #top .df-footer__row{ grid-template-columns:1fr; }
}