/**
 * ╔══════════════════════════════════════════════════════════╗
 * ║  footer-edu.css  —  v4.0 FINAL                          ║
 * ║                                                          ║
 * ║  CORRECTIFS INCLUS :                                     ║
 * ║  ✅ Saut/remontée en bas de page (scroll-behavior)       ║
 * ║  ✅ Scrollbar qui fait "sauter" la page (gutter)         ║
 * ║  ✅ menu-fixed padding-top qui décale le scroll          ║
 * ║  ✅ Footer coupé / barre copyright cachée                ║
 * ║  ✅ Sync color-switcher 6 thèmes                         ║
 * ║  ✅ Bouton retour en haut                                 ║
 * ║  ✅ Responsive mobile / tablette                          ║
 * ╚══════════════════════════════════════════════════════════╝
 */


/* ================================================================
   § 1 — CORRECTIF SCROLL & REMONTÉE EN BAS DE PAGE
   ================================================================

   CAUSES IDENTIFIÉES dans votre template :
   - html { scroll-behavior: smooth } → cause un "rebond" en bas
   - body.menu-fixed { padding-top: 70px } → décale le scroll
   - overflow-x:hidden + overflow-y:auto → saut de scrollbar (~17px)
*/

html {
  /* ✅ Annule le smooth scroll natif qui cause la remontée */
  scroll-behavior  : auto !important;

  /* ✅ Scrollbar toujours réservée = jamais de saut horizontal */
  scrollbar-gutter : stable;
  overflow-x       : hidden;
  overflow-y       : scroll;       /* toujours présente = pas de décalage */

  height     : auto !important;
  min-height : 100vh;
}

bodyf {
  /* ✅ Flex colonne : le footer est toujours poussé en bas */
  display        : flex;
  flex-direction : column;
  min-height     : 100vh;
  height         : auto !important;
  overflow       : visible !important;
  padding-bottom : 0 !important;
  margin-bottom  : 0 !important;
}

/* ✅ Corrige le scroll-to-anchor avec menu fixe :
   sans ça, le scroll "dépasse" la cible puis revient */
bodyf.menu-fixed {
  scroll-padding-top : 80px;   /* = hauteur du menu fixe */
}

/* Le contenu principal occupe tout l'espace disponible */
.site-grid,
.wrapper-static,
.wrapper-fluid {
  flex     : 1 0 auto;
  overflow : visible !important;
}

/* Cassiopeia container-footer */
.container-footer {
  overflow   : visible !important;
  height     : auto !important;
  max-height : none !important;
}


/* ================================================================
   § 2 — VARIABLES + SYNC COLOR-SWITCHER
   ================================================================ */

.edu-footer,
.edu-back-top {
  --edu-accent : #e01e2e;
  --edu-glow   : rgba(224, 30, 46, 0.45);
  --edu-dark   : #111111;
  --edu-dark2  : #0a0a0a;
  --edu-dark3  : #1e1e1e;
  --edu-border : #232323;
  --edu-text   : #d1d1d1;
  --edu-white  : #ffffff;
  --edu-font   : 'Poppins', 'Cairo', sans-serif;
  --edu-mono   : 'Space Mono', monospace;
  --edu-speed  : 0.35s;
}

body[data-theme="black"]  .edu-footer,
body[data-theme="black"]  .edu-back-top { --edu-accent:#4b5563; --edu-glow:rgba(75,85,99,0.5); }

body[data-theme="blue"]   .edu-footer,
body[data-theme="blue"]   .edu-back-top { --edu-accent:#2d3bd0; --edu-glow:rgba(45,59,208,0.5); }

body[data-theme="green"]  .edu-footer,
body[data-theme="green"]  .edu-back-top { --edu-accent:#10b981; --edu-glow:rgba(16,185,129,0.5); }

body[data-theme="orange"] .edu-footer,
body[data-theme="orange"] .edu-back-top { --edu-accent:#f59e0b; --edu-glow:rgba(245,158,11,0.5); }

body[data-theme="red"]    .edu-footer,
body[data-theme="red"]    .edu-back-top { --edu-accent:#ef4444; --edu-glow:rgba(239,68,68,0.5); }

body[data-theme="purple"] .edu-footer,
body[data-theme="purple"] .edu-back-top { --edu-accent:#9b42bf; --edu-glow:rgba(155,66,191,0.5); }

/* Transition fluide au changement de thème */
.edu-footer,
.edu-footer *,
.edu-back-top {
  transition:
    background-color var(--edu-speed) ease,
    border-color     var(--edu-speed) ease,
    color            var(--edu-speed) ease,
    box-shadow       var(--edu-speed) ease;
}


/* ================================================================
   § 3 — FOOTER CONTENEUR
   ================================================================ */

.edu-footer {
  flex-shrink      : 0 !important;
  display          : block !important;
  visibility       : visible !important;
  opacity          : 1 !important;
  overflow         : visible !important;
  height           : auto !important;
  max-height       : none !important;
  clip             : auto !important;
  clip-path        : none !important;
  position         : relative;
  z-index          : 10;
  background-color : var(--edu-dark);
  border-top       : 3px solid var(--edu-accent);
  font-family      : var(--edu-font);
  color            : var(--edu-text);
  width            : 100%;
}

/* Grille 4 colonnes */
.edu-footer__inner {
  display               : grid;
  grid-template-columns : 2fr 1fr 1fr 1fr;
  max-width             : 1600px;
  margin                : 0 auto;
  padding               : 50px 32px 36px;
  overflow              : visible !important;
  height                : auto !important;
}

.edu-footer__col {
  padding     : 0 28px;
  border-left : 1px solid var(--edu-border);
}
.edu-footer__col:first-child {
  padding-left : 0;
  border-left  : none;
}


/* ================================================================
   § 4 — ÉLÉMENTS DU FOOTER
   ================================================================ */

.edu-footer__mod-tag {
  display        : inline-flex;
  align-items    : center;
  gap            : 6px;
  font-family    : var(--edu-mono);
  font-size      : 9px;
  letter-spacing : 0.2em;
  text-transform : uppercase;
  color          : var(--edu-accent);
  border         : 1px solid var(--edu-accent);
  padding        : 3px 10px;
  border-radius  : 3px;
  margin-bottom  : 18px;
  opacity        : 0.75;
}
.edu-footer__dot {
  width: 5px; height: 5px;
  border-radius : 50%;
  background    : var(--edu-accent);
  display       : inline-block;
  flex-shrink   : 0;
}

.edu-footer__logo {
  font-family    : 'Cairo', sans-serif;
  font-size      : 32px;
  font-weight    : 900;
  color          : var(--edu-white);
  letter-spacing : -1px;
  line-height    : 1;
  margin-bottom  : 14px;
}

.edu-footer__desc {
  font-size     : 16px;
  line-height   : 1.85;
  color         : #d1d1d1;
  font-weight   : 600;
  margin-bottom : 20px;
}

.edu-footer__social { display:flex; gap:10px; flex-wrap:wrap; }
.edu-footer__social-icon {
  width:34px; height:34px;
  background      : var(--edu-dark3);
  border          : 1px solid var(--edu-border);
  border-radius   : 6px;
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-size       : 13px;
  color           : #d1d1d1;
  text-decoration : none;
}
.edu-footer__social-icon:hover {
  background:var(--edu-accent); border-color:var(--edu-accent);
  color:var(--edu-white); transform:translateY(-2px);
}

.edu-footer__title {
  font-size:20px; font-weight:600; color:var(--edu-white);
  margin-bottom:10px; letter-spacing:0.02em;
}
.edu-footer__title-bar {
  width:28px; height:3px;
  background:var(--edu-accent); border-radius:2px; margin-bottom:16px;
}

.edu-footer__list { list-style:none; padding:0; margin:0; }
.edu-footer__list li { border-bottom:1px solid var(--edu-border); }
.edu-footer__list li:last-child { border-bottom:none; }
.edu-footer__list li a {
  display:block; font-size:16px; color:var(--edu-text);
  text-decoration:none; padding:8px 0; font-weight:500;
}
.edu-footer__list li a:hover { color:var(--edu-accent); padding-left:6px; }

.edu-footer__contact { margin-top:14px; font-size:16px; color:var(--edu-text); line-height:2; }
.edu-footer__contact a { color:var(--edu-text); text-decoration:none; }
.edu-footer__contact a:hover { color:var(--edu-accent); }


/* ================================================================
   § 5 — BARRE COPYRIGHT (toujours visible, jamais coupée)
   ================================================================ */

.edu-footer__bottom {
  display     : block !important;
  visibility  : visible !important;
  overflow    : visible !important;
  height      : auto !important;
  max-height  : none !important;
  position    : relative;
  z-index     : 2;
  background  : var(--edu-dark2);
  border-top  : 1px solid var(--edu-border);
}
.edu-footer__bottom::before {
  content:''  ; display:block;
  height:2px; background:var(--edu-accent); opacity:0.2;
}
.edu-footer__bottom-inner {
  display         : flex !important;
  visibility      : visible !important;
  justify-content : space-between;
  align-items     : center;
  flex-wrap       : wrap;
  max-width       : 1280px;
  margin          : 0 auto;
  padding         : 16px 32px;
  gap             : 16px;
}
.edu-footer__copy {
  font-size:11px; color:#333;
  font-family:var(--edu-mono); letter-spacing:0.06em;
}
.edu-footer__links { display:flex; gap:20px; }
.edu-footer__links a {
  font-size:11px; color:#333; text-decoration:none;
  font-family:var(--edu-mono); letter-spacing:0.06em;
}
.edu-footer__links a:hover { color:var(--edu-accent); }


/* ================================================================
   § 6 — OVERRIDES JOOMLA
   ================================================================ */

.edu-footer .moduletable,
.edu-footer .mod-custom {
  margin:0!important; padding:0!important;
  background:transparent!important; border:none!important; box-shadow:none!important;
}
.edu-footer .moduletable .module-title,
.edu-footer h3.module-title {
  font-size:14px; font-weight:600; color:var(--edu-white);
  margin-bottom:10px; border:none; padding:0; background:none;
}
.edu-footer ul.nav,
.edu-footer ul.nav-list { list-style:none; padding:0; margin:0; }
.edu-footer ul.nav li,
.edu-footer ul.nav-list li { border-bottom:1px solid var(--edu-border); }
.edu-footer ul.nav li:last-child,
.edu-footer ul.nav-list li:last-child { border-bottom:none; }
.edu-footer ul.nav li a,
.edu-footer ul.nav-list li a {
  display:block; font-size:12.5px; color:var(--edu-text);
  text-decoration:none; padding:8px 0;
}
.edu-footer ul.nav li a:hover,
.edu-footer ul.nav-list li a:hover { color:var(--edu-accent); padding-left:6px; }


/* ================================================================
   § 7 — BOUTON RETOUR EN HAUT
   ================================================================ */

.edu-back-top {
  position        : fixed;
  bottom          : 32px;
  right           : 32px;
  z-index         : 9999;
  width           : 46px;
  height          : 46px;
  border-radius   : 50%;
  background      : var(--edu-accent);
  color           : var(--edu-white);
  border          : 2px solid transparent;
  cursor          : pointer;
  font-size       : 16px;
  font-weight     : 700;
  display         : flex;
  align-items     : center;
  justify-content : center;
  box-shadow      : 0 4px 20px var(--edu-glow);
  opacity         : 0;
  pointer-events  : none;
  transform       : translateY(16px);
}
.edu-back-top.is-visible { opacity:1; pointer-events:auto; transform:translateY(0); }
.edu-back-top:hover {
  background:var(--edu-dark); border-color:var(--edu-accent);
  color:var(--edu-accent); box-shadow:0 6px 30px var(--edu-glow);
  transform:translateY(-3px);
}
.edu-back-top:active { transform:translateY(0); }


/* ================================================================
   § 8 — RESPONSIVE
   ================================================================ */

@media (max-width: 960px) {
  .edu-footer__inner {
    grid-template-columns:1fr 1fr; gap:36px 24px; padding:40px 24px 32px;
  }
  .edu-footer__col {
    padding:0; border-left:none;
    border-top:1px solid var(--edu-border); padding-top:24px;
  }
  .edu-footer__col:first-child,
  .edu-footer__col:nth-child(2) { border-top:none; padding-top:0; }
}

@media (max-width: 600px) {
  .edu-footer__inner { grid-template-columns:1fr; gap:28px; padding:32px 20px 24px; }
  .edu-footer__col { border-top:1px solid var(--edu-border); padding-top:20px; }
  .edu-footer__col:first-child { border-top:none; padding-top:0; }
  .edu-footer__bottom-inner { flex-direction:column; text-align:center; padding:16px 20px; }
  .edu-footer__links { justify-content:center; flex-wrap:wrap; gap:12px; }
  .edu-back-top { bottom:20px; right:20px; width:40px; height:40px; font-size:14px; }
}