/*
  Projet : Site 15A
  Fichier : css/footer.css
  Version : 0.28.2 — 2026-07-19 18:50
  Objectif : styles du pied de page commun (partials/footer.php).
*/
li {
  margin-bottom: 0.5rem;
}

#footer {
  background-color: #fff;
  color: #0056b3;
  line-height: 1;
  font-family: montserrat;
  z-index: 6;
  position: relative;
}

.footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer-top-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.footer-top-image {
  display: flex;
  width: 100%;
  justify-content: center;
}

.footer-top-image img {
  width: 100%;
  max-width: 300px;
}

.footer-bot {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 100%;
  align-items: center;
  gap: 1rem;
}

.footer-bot h4 {
  margin: 0 0 5px 0;
  padding: 0;
  text-align: center;
}

.footer-bot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.footer-bot ul li a {
  text-decoration: none;
  color: inherit;
}

/* Liens de contact du pied (téléphone + mail) : hérite de la couleur du pied,
   pas de soulignement disgracieux, mais focus/hover clairement visibles pour
   l'accessibilité (navigation clavier). */
.footer-contact-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.footer-contact-link:hover {
  opacity: 0.75;
  text-decoration: underline;
}

.footer-contact-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Bouton « Nous contacter » du pied de page.
   Demande de Cédrik : le sortir de son placement centré discret pour en faire un
   VRAI bouton qui a de la présence, calé à GAUCHE, dans l'ADN visuel du site
   (police nulshock des boutons/titres, coins arrondis 16px comme .cta15a, relief
   « verre » brillant). Il reprend la COULEUR D'ACCENT DE LA PAGE, posée par
   js/script.js sur #footer via --page-accent (Club = bleu, Elo = or, Caisse/FAQ =
   vert padel, Accueil = orange…). Filet de sécurité en bleu si la variable n'est
   pas encore disponible.

   Le RELIEF est construit sans seconde couleur (pour marcher sur n'importe quel
   accent) : une lèvre sombre pleine sous le bouton + une ombre portée ambiante
   donnent le volume, un liseré clair intérieur en haut donne le côté brillant,
   la couleur d'accent reste pleine et lisible. Le texte blanc porte une légère
   ombre pour rester lisible même sur l'or (#C69B04) et le vert. */
.footer-contact-cta {
  /* Bouton CENTRÉ, aligné avec le reste de la colonne Contact (titre, téléphone,
     mail, adresse — tous centrés). */
  display: flex;
  justify-content: center;
  margin-top: 1.1rem;
}

.footer-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 15px 30px;
  background-color: var(--page-accent, #013cb2);
  color: #fff;
  font-family: nulshock, "Segoe UI", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  border: none;
  border-radius: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* lèvre 3D pleine + ombre ambiante + liseré clair brillant en haut (verre) */
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.26),
    0 10px 22px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.footer-contact-btn__icon {
  flex: 0 0 auto;
  /* léger creux pour poser l'enveloppe sur le fond coloré */
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

.footer-contact-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  color: #fff;
  box-shadow:
    0 6px 0 rgba(0, 0, 0, 0.26),
    0 16px 30px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* Enfoncement au clic : la lèvre 3D se réduit, le bouton « descend ». */
.footer-contact-btn:active {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.26),
    0 4px 12px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.footer-contact-btn:focus-visible {
  outline: 3px solid var(--page-accent, #013cb2);
  outline-offset: 3px;
}

/* Mobile : le pied redevient centré, on recentre donc le bouton pour l'équilibre
   et on le laisse respirer sur toute la largeur utile. */
@media (max-width: 767.98px) {
  .footer-contact-cta {
    justify-content: center;
  }
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: 2rem;
  /* margin-bottom: 3rem; */
}

.footer-social div {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
}

.footer-social div span {
  font-size: 24px;
  line-height: 1;
  transition: all 0.3s ease-in-out;
}

.ready-text {
  font-size: 2rem;
}

.bold-text {
  font-size: 2.5rem;
  font-weight: bold;
}


.social div:hover {
  transform: scale(1.2);
  background-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.social div:hover span {
  color: #fff;
}

.social div:hover:nth-child(1) {
  background-color: #3b5998;
  /* Couleur Facebook */
}

.social div:hover:nth-child(2) {
  background-color: #1da1f2;
  /* Couleur Twitter */
}

.social div:hover:nth-child(3) {
  background-color: #e4405f;
  /* Couleur Instagram */
}

.social div:hover:nth-child(4) {
  background-color: #0077b5;
  /* Couleur LinkedIn */
}



/* footer index orange */
#footer.index {
  background-color: #fff;
}


.index .footer-social div span {
  font-size: 24px;
  line-height: 1;
  transition: all 0.3s ease-in-out;
}

.footer-apps {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  background-color: white;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.7);
  border-radius: 20px;
  margin-top: 10px;
}

.footer-divider {
  position: relative;
  z-index: 3;
}

@media (min-width: 576px) {
  .footer-divider {
    margin-bottom: -4rem;
    position: relative;
    z-index: 3;
  }
}

@media screen and (min-width: 768px) {
  .footer-container {
    flex-direction: row;
    padding: 0 2rem;
  }

  .footer-divider {
    margin-bottom: -5rem;
  }

  .footer-top {
    width: 50%;
    flex-direction: row;
  }

  .bold-text {
    font-size: 2rem;
  }

  .ready-text {
    font-size: 1.5rem;
  }

  .footer-bot {
    display: flex;
    flex-direction: row;
    width: 50%;
    justify-items: center;
    align-items: start;
  }
}

@media (min-width: 992px) {
  .footer-divider {
    margin-bottom: -6rem;
  }

  li>a:hover {
    opacity: 0.75;
  }
}

@media (min-width: 1200px) {
  .footer-divider {
    margin-bottom: -9rem;
  }
}

@media (min-width: 1400px) {
  .footer-divider {
    margin-bottom: -10rem;
  }
}

/* === Pied de page identique PARTOUT — isolation des styles de page ===
   Les pages reprises au propre (Accueil, Club, Elo, Actualité) ne chargent pas
   Bootstrap ; les anciennes pages (Terrain, Tournois, Offres, User, CGU, Mentions
   légales) le chargent encore et Bootstrap déteignait sur le pied de page commun
   (titres « Contact / Ressources » à 24px au lieu de 16px, modèle de boîte en
   border-box). On fige donc le rendu du pied de page sur celui des pages modernes
   pour qu'il soit STRICTEMENT identique partout, quelle que soit la page hôte.
   Additif : aucun effet sur les pages déjà propres (valeurs identiques). */
#footer,
#footer * {
  box-sizing: content-box;
}

#footer .footer-bot h4 {
  /* !important nécessaire : certaines anciennes pages (ex. Tournois) posent un
     « h4 { font-size: … !important } » GLOBAL qui déteignait sur le pied de page.
     Le sélecteur ci-dessous est plus spécifique → il fige le titre du pied à 16px
     partout, sans toucher les titres du corps de page. */
  font-size: 16px !important;
  font-weight: bold !important;
}

/* Image du téléphone du pied de page : le pied de page commun (partials/footer.php)
   pose un attribut height="854" sur l'image (anti-décalage). Sur les pages reprises
   au propre, base.css neutralise cette hauteur via « picture img { height:auto } ».
   Les anciennes pages ne chargent pas base.css → sans ce filet, l'image s'affichait
   ÉTIRÉE à 300×854 et faisait exploser la hauteur du pied de page. On rapatrie donc
   les deux règles ici pour un pied de page identique PARTOUT. */
#footer picture {
  display: contents;
}

#footer .footer-top-image img {
  height: auto;
}