/* ===================== */
/* ======= FOOTER ====== */
/* ===================== */



/* =====================================
   FOOTER — taille fluide parfaite
   aucun saut
   optimisé pour 375px
   ===================================== */

#footer .footer{
  font-size: clamp(0.8rem, 0.9vw, 1rem);
  line-height: 1.25;
}

#footer .footer-center{
  font-size: clamp(0.8rem, 1vw, 1.3rem);
}


/* Footer fixe */
#footer{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  box-sizing: border-box;

  /* état initial : blanc + texte noir */
  background: #fff;
  color: #000;

  transition: background-color 0.5s ease, color 0.5s ease;
}

/* Footer transparent après scroll */
#footer.transparent{
  background-color: transparent;
  color: grey;
}

/* Compat si une classe transparent est posée sur <footer class="footer"> */
footer.footer.transparent{
  background-color: transparent !important;
  color: grey !important;
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* --- Calque blanc interne (animé) --- */
#footer .footer-background{
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 1;
  transform: translateY(0);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  border: 0px solid red;
}

/* Quand le footer devient transparent */
#footer.transparent .footer-background{
  opacity: 0;
  transform: translateY(10px);
}

/* Contenu du footer */
#footer .footer{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;
  padding: 20px var(--gutter);
  box-sizing: border-box;

  font-family: "Crimson Pro", serif;
  font-weight: bold;
  color: inherit;
}

/* Alignements */
#footer .footer-left{ text-align: left; }
#footer .footer-center{ text-align: center; }
#footer .footer-right{ text-align: right; }

/* liens / contraintes */
#footer .footer a{
  color: inherit;
  text-decoration: none;
}

/* évite le retour ligne forcé côté droit */
#footer .footer-right p{ margin: 0; white-space: nowrap; }
#footer .footer-right br{ display: none; }

/* Retire le mix-blend-mode qui faisait disparaître le texte */
#footer .footer-left,
#footer .footer-center,
#footer .footer-right{
  mix-blend-mode: normal;
  background: none;
  color: inherit;
  line-height: 1.4;
}

/* Réserve l’espace du footer fixe */
main,
#container{
  background: #fff;
  padding-bottom: 100px;
  box-sizing: border-box; 
}

/* ===================================== */
/* ===== VARIANTE PAGE LISTE PROJETS === */
/* ===================================== */

body.liste-projets #footer{
  background: #fff;
  color: #000;
}

/* Désactive totalement le mode transparent */
body.liste-projets #footer.transparent{
  background: #fff !important;
  color: #000 !important;
}

/* Neutralise l’animation du calque interne */
body.liste-projets #footer .footer-background{
  opacity: 1 !important;
  transform: none !important;
}

/* Dégradé blanc au-dessus */
body.liste-projets #footer::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -30px;
  height: 30px;
  background: linear-gradient(to top, #fff 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

/* ===================================== */
/* FOOTER MOBILE < 600 */
/* ===================================== */
@media (max-width:600px){

  #footer .footer{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:end;
    gap:0.4rem;
    padding:10px var(--gutter);
    padding-top:22px;
    width:100%;
    max-width:1400px;
    margin:0 auto;
    font-weight:550;
  }

  /* colonnes */
  #footer .footer-left,
  #footer .footer-center,
  #footer .footer-right{
    display:flex;
    flex-direction:column;
    gap:0;
    padding:0;
    margin:0;
    line-height:1;
  }

  /* reset TOTAL */
  #footer .footer *{
    margin:0;
    padding:0;
    line-height:1.2;
  }

  /* supprime séparateurs */
  #footer .sep{
    display:none;
  }

  /* alignements */
  #footer .footer-left{
    justify-self:start;
    text-align:left;
  }

  #footer .footer-center{
    justify-self:center;
    text-align:center;
    align-items:center;
  }

  #footer .footer-right{
    justify-self:end;
    text-align:right;
    white-space:nowrap;
  }

  /* ===== CENTRE MOBILE 2 LIGNES ===== */

  /* cache version desktop */
  #footer .footer-center .footer-desktop{
    display:none;
  }

  /* affiche version mobile */
  #footer .footer-center .footer-mobile{
    display:block;
  }

  #footer .footer-center .footer-mobile-top{
    white-space:nowrap;
  }

  #footer .footer-center .footer-mobile-bottom{
    margin-top:2px;
  }

}


/* desktop */
.footer-mobile{display:none;}
.footer-desktop{display:block;}