Compare commits
11 Commits
04a47789f7
...
stage
| Author | SHA1 | Date | |
|---|---|---|---|
| 0b6c1d2e42 | |||
| 44f0842393 | |||
| 1004576938 | |||
| ac3a7678aa | |||
| 4cbb80d6fb | |||
| 35478e9d20 | |||
| 3462d036c6 | |||
| 7b08ed2aaa | |||
| 0f233d9309 | |||
| 9986179153 | |||
| ee51632b85 |
@@ -785,194 +785,74 @@ document.addEventListener('keydown', (e) => {
|
||||
/*!*********************************!*\
|
||||
!*** ./src/assets/js/header.js ***!
|
||||
\*********************************/
|
||||
// // //////// start header ////////////
|
||||
|
||||
|
||||
|
||||
// // document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
// // const header = document.querySelector('header[role="banner"]');
|
||||
// // const logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > svg:nth-child(1)');
|
||||
// // const headerNavContainer = document.querySelector('.header_nav_container');
|
||||
// // const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
|
||||
// // const isTargetPath = window.location.pathname === '/';
|
||||
|
||||
// // // Fonction pour démarrer l'animation du logo SVG
|
||||
// // function startLogoAnimation() {
|
||||
// // logo.classList.add('animated');
|
||||
// // }
|
||||
|
||||
// // // Fonction pour arrêter l'animation du logo SVG
|
||||
// // function stopLogoAnimation() {
|
||||
// // logo.classList.remove('animated');
|
||||
// // }
|
||||
|
||||
// // // Vérifier si le header a la classe header--collapse
|
||||
// // function checkHeaderCollapse() {
|
||||
// // if (header.classList.contains('header--collapsed')) {
|
||||
// // stopLogoAnimation();
|
||||
// // } else if (header.classList.contains('header--collapsed-already')) {
|
||||
// // stopLogoAnimation();
|
||||
// // } else {
|
||||
// // startLogoAnimation();
|
||||
// // }
|
||||
|
||||
// // }
|
||||
// // const header = document.querySelector('header[role="banner"]');
|
||||
// // const headerNavContainer = document.querySelector('.header_nav_container');
|
||||
|
||||
// // const threshold = 100;
|
||||
// // let lastScrollTop = 0;
|
||||
// // let isHidden = false;
|
||||
// // let introDone = true; // ✅ plus d'intro, donc on considère qu'elle est "déjà finie"
|
||||
|
||||
// // /* -------------------
|
||||
// // Animations nav
|
||||
// // ------------------- */
|
||||
|
||||
// // // Appeler la fonction au chargement initial
|
||||
// // checkHeaderCollapse();
|
||||
|
||||
// // // Observer les changements de classe sur le header
|
||||
// // const observer = new MutationObserver(function(mutations) {
|
||||
// // mutations.forEach(function(mutation) {
|
||||
// // if (mutation.attributeName === 'class') {
|
||||
// // checkHeaderCollapse();
|
||||
// // }
|
||||
// // });
|
||||
// // function slideOut() {
|
||||
// // headerNavContainer.animate([
|
||||
// // { transform: 'translateX(0)' },
|
||||
// // { transform: 'translateX(-100%)' }
|
||||
// // ], {
|
||||
// // duration: 300,
|
||||
// // fill: 'forwards'
|
||||
// // });
|
||||
// // observer.observe(header, { attributes: true });
|
||||
|
||||
|
||||
// // // Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement
|
||||
// // if (!isFirstLoad || !isTargetPath) {
|
||||
// // header.classList.add('header--collapsed-already');
|
||||
// // stopLogoAnimation();
|
||||
// // } else {
|
||||
// // // Sinon, appliquer la transition après un délai, sauf si scroll
|
||||
// // let collapseTimeout = setTimeout(() => {
|
||||
// // header.classList.add('header--collapsed');
|
||||
// // }, 1000);
|
||||
|
||||
// // function interruptCollapseOnScroll() {
|
||||
// // if (!header.classList.contains('header--collapsed')) {
|
||||
// // clearTimeout(collapseTimeout); // annule l'animation
|
||||
// // header.classList.add('header--collapsed');
|
||||
// // }
|
||||
// // window.removeEventListener('scroll', interruptCollapseOnScroll); // une seule fois
|
||||
// // }
|
||||
|
||||
// // window.addEventListener('scroll', interruptCollapseOnScroll);
|
||||
// // }
|
||||
// // //////////////////////////////////////
|
||||
|
||||
// // let lastScrollTop = 0;
|
||||
// // let threshold = 100; // Change this value as needed
|
||||
// // let isHidden = false;
|
||||
|
||||
// // function slideOut() {
|
||||
// // headerNavContainer.animate([
|
||||
// // { transform: 'translateX(0)' },
|
||||
// // { transform: 'translateX(-100%)' }
|
||||
// // ], {
|
||||
// // duration: 300,
|
||||
// // fill: 'forwards'
|
||||
// // });
|
||||
// // isHidden = true;
|
||||
// // }
|
||||
|
||||
// // function slideIn() {
|
||||
// // headerNavContainer.animate([
|
||||
// // { transform: 'translateX(-100%)' },
|
||||
// // { transform: 'translateX(0)' }
|
||||
// // ], {
|
||||
// // duration: 300,
|
||||
// // fill: 'forwards'
|
||||
// // });
|
||||
// // isHidden = false;
|
||||
// // }
|
||||
|
||||
// // function slideDown() {
|
||||
// // // headerNavContainer.style.display = 'block';
|
||||
// // headerNavContainer.animate([
|
||||
// // { transform: 'translateY(0%)' },
|
||||
// // { transform: 'translateY(+100%)' }
|
||||
// // ], {
|
||||
// // duration: 300,
|
||||
// // fill: 'forwards'
|
||||
// // });
|
||||
// // isHidden = false;
|
||||
// // }
|
||||
|
||||
// // function slideUp() {
|
||||
// // headerNavContainer.animate([
|
||||
// // { transform: 'translateY(100%)' },
|
||||
// // { transform: 'translateY(0%)' }
|
||||
// // ], {
|
||||
// // duration: 300,
|
||||
// // fill: 'forwards'
|
||||
// // }).onfinish = function() {
|
||||
// // // headerNavContainer.style.display = 'none';
|
||||
// // };
|
||||
// // isHidden = true;
|
||||
// // }
|
||||
// // // Fonction pour ajuster la hauteur du header lors du défilement
|
||||
// // function adjustHeaderHeight() {
|
||||
// // if (window.scrollY > 0) {
|
||||
// // header.classList.add('shrink');
|
||||
// // } else {
|
||||
// // header.classList.remove('shrink');
|
||||
// // }
|
||||
// // }
|
||||
|
||||
// // function handleScroll() {
|
||||
// // let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
// // const isMobile = window.innerWidth < 811;
|
||||
|
||||
// // if (scrollTop > threshold && !isHidden) {
|
||||
// // if (isMobile) {
|
||||
// // slideUp();
|
||||
// // } else {
|
||||
// // slideOut();
|
||||
// // }
|
||||
// // } else if (scrollTop <= threshold && isHidden) {
|
||||
// // if (isMobile) {
|
||||
// // slideDown();
|
||||
// // } else {
|
||||
// // slideIn();
|
||||
// // }
|
||||
// // }
|
||||
|
||||
|
||||
// // lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
|
||||
// // }
|
||||
|
||||
// // function handleTouchAndMouseEnter() {
|
||||
// // if (isHidden) {
|
||||
// // if (window.innerWidth < 811) {
|
||||
// // slideDown();
|
||||
// // } else {
|
||||
// // slideIn();
|
||||
// // }
|
||||
// // }
|
||||
// // }
|
||||
|
||||
// // function handleTouchAndMouseLeave() {
|
||||
// // if (lastScrollTop > threshold && !isHidden) {
|
||||
// // if (window.innerWidth < 811) {
|
||||
// // slideUp();
|
||||
// // } else {
|
||||
// // slideOut();
|
||||
// // }
|
||||
// // }
|
||||
// // }
|
||||
|
||||
// // window.addEventListener('scroll', handleScroll);
|
||||
// // window.addEventListener('scroll', adjustHeaderHeight);
|
||||
|
||||
// // // Mouse events for desktop
|
||||
// // header.addEventListener('mouseenter', handleTouchAndMouseEnter);
|
||||
// // header.addEventListener('mouseleave', handleTouchAndMouseLeave);
|
||||
|
||||
// // // Touch events for tablets and mobile devices
|
||||
// // header.addEventListener('touchstart', handleTouchAndMouseEnter);
|
||||
// // header.addEventListener('touchend', handleTouchAndMouseLeave);
|
||||
|
||||
// // // Initial check to see if we're at the top of the page
|
||||
// // isHidden = true;
|
||||
// // }
|
||||
|
||||
// // function slideIn() {
|
||||
// // headerNavContainer.animate([
|
||||
// // { transform: 'translateX(-100%)' },
|
||||
// // { transform: 'translateX(0)' }
|
||||
// // ], {
|
||||
// // duration: 300,
|
||||
// // fill: 'forwards'
|
||||
// // });
|
||||
// // isHidden = false;
|
||||
// // }
|
||||
|
||||
// // function slideDown() {
|
||||
// // headerNavContainer.animate([
|
||||
// // { transform: 'translateY(-100%)' },
|
||||
// // { transform: 'translateY(0%)' }
|
||||
// // ], {
|
||||
// // duration: 300,
|
||||
// // fill: 'forwards'
|
||||
// // });
|
||||
// // isHidden = false;
|
||||
// // }
|
||||
|
||||
// // function slideUp() {
|
||||
// // headerNavContainer.animate([
|
||||
// // { transform: 'translateY(0%)' },
|
||||
// // { transform: 'translateY(-100%)' }
|
||||
// // ], {
|
||||
// // duration: 300,
|
||||
// // fill: 'forwards'
|
||||
// // });
|
||||
// // isHidden = true;
|
||||
// // }
|
||||
|
||||
// // function initNavPosition() {
|
||||
// // if (window.pageYOffset <= threshold) {
|
||||
// // if (window.innerWidth < 811) {
|
||||
// // slideDown();
|
||||
// // } else {
|
||||
// // } else {
|
||||
// // slideIn();
|
||||
// // }
|
||||
// // }
|
||||
// // } else {
|
||||
// // if (window.innerWidth < 811) {
|
||||
// // slideUp();
|
||||
@@ -980,105 +860,227 @@ document.addEventListener('keydown', (e) => {
|
||||
// // slideIn();
|
||||
// // }
|
||||
// // }
|
||||
|
||||
// // });
|
||||
|
||||
// // //////// end header ////////////
|
||||
|
||||
// // }
|
||||
|
||||
// // /* -------------------
|
||||
// // Scroll / resize header
|
||||
// // ------------------- */
|
||||
|
||||
// // function adjustHeaderHeight() {
|
||||
// // if (window.scrollY > 0) {
|
||||
// // header.classList.add('shrink');
|
||||
// // } else {
|
||||
// // header.classList.remove('shrink');
|
||||
// // }
|
||||
// // }
|
||||
|
||||
// // function handleScroll() {
|
||||
// // if (!introDone) return; // ici ça passe, introDone = true
|
||||
|
||||
// // let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
// // const isMobile = window.innerWidth < 811;
|
||||
|
||||
// // if (scrollTop > threshold && !isHidden) {
|
||||
// // if (isMobile) {
|
||||
// // slideUp();
|
||||
// // } else {
|
||||
// // slideOut();
|
||||
// // }
|
||||
// // } else if (scrollTop <= threshold && isHidden) {
|
||||
// // if (isMobile) {
|
||||
// // slideDown();
|
||||
// // } else {
|
||||
// // slideIn();
|
||||
// // }
|
||||
// // }
|
||||
|
||||
// // lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
|
||||
// // }
|
||||
|
||||
// // function handleTouchAndMouseEnter() {
|
||||
// // if (!introDone) return;
|
||||
|
||||
// // if (isHidden) {
|
||||
// // if (window.innerWidth < 811) {
|
||||
// // slideDown();
|
||||
// // } else {
|
||||
// // slideIn();
|
||||
// // }
|
||||
// // }
|
||||
// // }
|
||||
|
||||
// // function handleTouchAndMouseLeave() {
|
||||
// // if (!introDone) return;
|
||||
|
||||
// // if (lastScrollTop > threshold && !isHidden) {
|
||||
// // if (window.innerWidth < 811) {
|
||||
// // slideUp();
|
||||
// // } else {
|
||||
// // slideOut();
|
||||
// // }
|
||||
// // }
|
||||
// // }
|
||||
|
||||
// // // ✅ on n'a plus besoin de masquer la nav au début
|
||||
// // if (headerNavContainer) {
|
||||
// // headerNavContainer.style.visibility = 'visible';
|
||||
// // }
|
||||
|
||||
// // window.addEventListener('scroll', handleScroll);
|
||||
// // window.addEventListener('scroll', adjustHeaderHeight);
|
||||
|
||||
// // header.addEventListener('mouseenter', handleTouchAndMouseEnter);
|
||||
// // header.addEventListener('mouseleave', handleTouchAndMouseLeave);
|
||||
|
||||
// // header.addEventListener('touchstart', handleTouchAndMouseEnter);
|
||||
// // header.addEventListener('touchend', handleTouchAndMouseLeave);
|
||||
|
||||
// // // ✅ position initiale de la nav
|
||||
// // initNavPosition();
|
||||
|
||||
// // });
|
||||
|
||||
|
||||
///////////////start header sans animation logo////////////////
|
||||
// document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// const header = document.querySelector('header[role="banner"]');
|
||||
// const headerNavContainer = document.querySelector('.header_nav_container');
|
||||
|
||||
// if (!header || !headerNavContainer) return;
|
||||
|
||||
// const threshold = 100;
|
||||
// let lastScrollTop = 0;
|
||||
// let isHidden = false;
|
||||
// let introDone = true; // ✅ pas d'intro, donc direct prêt
|
||||
|
||||
// /* -------------------
|
||||
// Helpers show / hide
|
||||
// ------------------- */
|
||||
|
||||
// function hideNav() {
|
||||
// headerNavContainer.classList.add('nav-hidden');
|
||||
// isHidden = true;
|
||||
// }
|
||||
|
||||
// function showNav() {
|
||||
// headerNavContainer.classList.remove('nav-hidden');
|
||||
// isHidden = false;
|
||||
// }
|
||||
|
||||
// function isMobile() {
|
||||
// return window.innerWidth < 811;
|
||||
// }
|
||||
|
||||
// /* -------------------
|
||||
// Position initiale
|
||||
// ------------------- */
|
||||
|
||||
// function initNavPosition() {
|
||||
// if (window.pageYOffset <= threshold) {
|
||||
// showNav(); // en haut de page → nav visible
|
||||
// } else {
|
||||
// if (isMobile()) {
|
||||
// hideNav(); // mobile scrollé → nav cachée
|
||||
// } else {
|
||||
// showNav(); // desktop : nav visible même en bas
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// /* -------------------
|
||||
// Scroll / resize header
|
||||
// ------------------- */
|
||||
|
||||
// function adjustHeaderHeight() {
|
||||
// if (window.scrollY > 0) {
|
||||
// header.classList.add('shrink');
|
||||
// } else {
|
||||
// header.classList.remove('shrink');
|
||||
// }
|
||||
// }
|
||||
|
||||
// function handleScroll() {
|
||||
// if (!introDone) return;
|
||||
|
||||
// let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
|
||||
// if (scrollTop > threshold && !isHidden) {
|
||||
// // on cache la nav
|
||||
// hideNav();
|
||||
// } else if (scrollTop <= threshold && isHidden) {
|
||||
// // on ré-affiche la nav
|
||||
// showNav();
|
||||
// }
|
||||
|
||||
// lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
|
||||
// }
|
||||
|
||||
// function handleTouchAndMouseEnter() {
|
||||
// if (!introDone) return;
|
||||
// if (isHidden) {
|
||||
// showNav();
|
||||
// }
|
||||
// }
|
||||
|
||||
// function handleTouchAndMouseLeave() {
|
||||
// if (!introDone) return;
|
||||
|
||||
// if (lastScrollTop > threshold && !isHidden) {
|
||||
// hideNav();
|
||||
// }
|
||||
// }
|
||||
|
||||
// // Rendre la nav visible (plus de visibility:hidden)
|
||||
// headerNavContainer.style.visibility = 'visible';
|
||||
|
||||
// window.addEventListener('scroll', handleScroll);
|
||||
// window.addEventListener('scroll', adjustHeaderHeight);
|
||||
|
||||
// header.addEventListener('mouseenter', handleTouchAndMouseEnter);
|
||||
// header.addEventListener('mouseleave', handleTouchAndMouseLeave);
|
||||
|
||||
// header.addEventListener('touchstart', handleTouchAndMouseEnter);
|
||||
// header.addEventListener('touchend', handleTouchAndMouseLeave);
|
||||
|
||||
// // Position de départ
|
||||
// initNavPosition();
|
||||
// adjustHeaderHeight();
|
||||
// });
|
||||
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const header = document.querySelector('header[role="banner"]');
|
||||
const logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain svg');
|
||||
const headerNavContainer = document.querySelector('.header_nav_container');
|
||||
|
||||
const navEntry = performance.getEntriesByType("navigation")[0];
|
||||
const isFirstLoad = !navEntry.type.includes('back_forward');
|
||||
const isTargetPath = window.location.pathname === '/';
|
||||
const isMobile = window.innerWidth < 811; // 🔹 breakpoint mobile
|
||||
if (!header || !headerNavContainer) return;
|
||||
|
||||
const threshold = 100;
|
||||
let lastScrollTop = 0;
|
||||
let isHidden = false;
|
||||
let introDone = false; // ✅ on saura quand l'intro est finie
|
||||
let isHidden = false; // au chargement : nav visible
|
||||
|
||||
// 🔹 On cache la nav au tout début (pour éviter toute secousse)
|
||||
if (headerNavContainer) {
|
||||
headerNavContainer.style.visibility = 'hidden';
|
||||
function isMobile() {
|
||||
return window.innerWidth < 811;
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Animations nav
|
||||
------------------- */
|
||||
/* --- helpers --- */
|
||||
|
||||
function slideOut() {
|
||||
headerNavContainer.animate([
|
||||
{ transform: 'translateX(0)' },
|
||||
{ transform: 'translateX(-100%)' }
|
||||
], {
|
||||
duration: 300,
|
||||
fill: 'forwards'
|
||||
});
|
||||
function hideNav() {
|
||||
headerNavContainer.classList.add('nav-hidden');
|
||||
isHidden = true;
|
||||
}
|
||||
|
||||
function slideIn() {
|
||||
headerNavContainer.animate([
|
||||
{ transform: 'translateX(-100%)' },
|
||||
{ transform: 'translateX(0)' }
|
||||
], {
|
||||
duration: 300,
|
||||
fill: 'forwards'
|
||||
});
|
||||
function showNav() {
|
||||
headerNavContainer.classList.remove('nav-hidden');
|
||||
isHidden = false;
|
||||
}
|
||||
|
||||
function slideDown() {
|
||||
headerNavContainer.animate([
|
||||
{ transform: 'translateY(0%)' },
|
||||
{ transform: 'translateY(+100%)' }
|
||||
], {
|
||||
duration: 300,
|
||||
fill: 'forwards'
|
||||
});
|
||||
isHidden = false;
|
||||
}
|
||||
/* --- init : nav visible au chargement --- */
|
||||
|
||||
function slideUp() {
|
||||
headerNavContainer.animate([
|
||||
{ transform: 'translateY(100%)' },
|
||||
{ transform: 'translateY(0%)' }
|
||||
], {
|
||||
duration: 300,
|
||||
fill: 'forwards'
|
||||
}).onfinish = function() {};
|
||||
isHidden = true;
|
||||
}
|
||||
headerNavContainer.style.visibility = 'visible';
|
||||
showNav();
|
||||
|
||||
// ✅ Position initiale de la nav,
|
||||
// appelée UNIQUEMENT après la fin de l'intro
|
||||
function initNavPosition() {
|
||||
if (window.pageYOffset <= threshold) {
|
||||
if (window.innerWidth < 811) {
|
||||
slideDown();
|
||||
} else {
|
||||
slideIn();
|
||||
}
|
||||
} else {
|
||||
if (window.innerWidth < 811) {
|
||||
slideUp();
|
||||
} else {
|
||||
slideIn();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Scroll / resize header
|
||||
------------------- */
|
||||
/* --- shrink header --- */
|
||||
|
||||
function adjustHeaderHeight() {
|
||||
if (window.scrollY > 0) {
|
||||
@@ -1088,118 +1090,49 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
}
|
||||
}
|
||||
|
||||
function handleScroll() {
|
||||
if (!introDone) return; // ⛔ rien tant que l'intro n'est pas finie
|
||||
/* --- scroll : cache / montre la nav --- */
|
||||
|
||||
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
const isMobile = window.innerWidth < 811;
|
||||
function handleScroll() {
|
||||
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
|
||||
if (scrollTop > threshold && !isHidden) {
|
||||
if (isMobile) {
|
||||
slideUp();
|
||||
} else {
|
||||
slideOut();
|
||||
}
|
||||
// on cache la nav (desktop & mobile)
|
||||
hideNav();
|
||||
} else if (scrollTop <= threshold && isHidden) {
|
||||
if (isMobile) {
|
||||
slideDown();
|
||||
} else {
|
||||
slideIn();
|
||||
}
|
||||
// on la remonte en haut de page
|
||||
showNav();
|
||||
}
|
||||
|
||||
lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
|
||||
}
|
||||
|
||||
function handleTouchAndMouseEnter() {
|
||||
if (!introDone) return; // ⛔ pas de hover avant la fin de l'intro
|
||||
/* --- hover / touch sur le header : on montre la nav --- */
|
||||
|
||||
function handleEnter() {
|
||||
if (isHidden) {
|
||||
if (window.innerWidth < 811) {
|
||||
slideDown();
|
||||
} else {
|
||||
slideIn();
|
||||
}
|
||||
showNav();
|
||||
}
|
||||
}
|
||||
|
||||
function handleTouchAndMouseLeave() {
|
||||
if (!introDone) return;
|
||||
|
||||
function handleLeave() {
|
||||
if (lastScrollTop > threshold && !isHidden) {
|
||||
if (window.innerWidth < 811) {
|
||||
slideUp();
|
||||
} else {
|
||||
slideOut();
|
||||
}
|
||||
hideNav();
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
window.addEventListener('scroll', adjustHeaderHeight);
|
||||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||
window.addEventListener('scroll', adjustHeaderHeight, { passive: true });
|
||||
|
||||
header.addEventListener('mouseenter', handleTouchAndMouseEnter);
|
||||
header.addEventListener('mouseleave', handleTouchAndMouseLeave);
|
||||
header.addEventListener('mouseenter', handleEnter);
|
||||
header.addEventListener('mouseleave', handleLeave);
|
||||
|
||||
header.addEventListener('touchstart', handleTouchAndMouseEnter);
|
||||
header.addEventListener('touchend', handleTouchAndMouseLeave);
|
||||
|
||||
/* -------------------
|
||||
Intro du logo
|
||||
------------------- */
|
||||
|
||||
if (isFirstLoad && isTargetPath && logo && !isMobile) {
|
||||
// On bloque le scroll
|
||||
document.body.classList.add('logo-intro-animating');
|
||||
|
||||
// 1) Logo plein écran SANS ANIMATION + header figé
|
||||
logo.style.transition = 'none';
|
||||
header.style.transition = 'none';
|
||||
document.body.classList.add('logo-intro-active'); // logo centré, scale(2)
|
||||
|
||||
void logo.offsetWidth; // reflow
|
||||
|
||||
const INTRO_DELAY = 1000; // temps où le logo reste plein écran
|
||||
const TRANSITION_DURATION = 1000; // durée de l'anim de collapse
|
||||
|
||||
// 2) Après ce délai : on réactive les transitions et on lance l'anim
|
||||
setTimeout(() => {
|
||||
logo.style.transition = '';
|
||||
header.style.transition = '';
|
||||
|
||||
header.classList.add('header--collapsed'); // header se rétracte
|
||||
document.body.classList.remove('logo-intro-active'); // logo retourne dans le header
|
||||
|
||||
// 3) Quand le header + logo ont fini de bouger :
|
||||
setTimeout(() => {
|
||||
document.body.classList.remove('logo-intro-animating');
|
||||
introDone = true;
|
||||
|
||||
// 👉 maintenant seulement on affiche la nav et on la fait glisser
|
||||
if (headerNavContainer) {
|
||||
headerNavContainer.style.visibility = 'visible';
|
||||
}
|
||||
initNavPosition();
|
||||
|
||||
}, TRANSITION_DURATION + 100);
|
||||
|
||||
}, INTRO_DELAY);
|
||||
|
||||
} else {
|
||||
// 🔹 CAS MOBILE OU PAS HOME / PAS 1re LOAD :
|
||||
// pas d'intro : header direct réduit, nav directement dispo
|
||||
|
||||
header.classList.add('header--collapsed-already');
|
||||
introDone = true;
|
||||
if (headerNavContainer) {
|
||||
headerNavContainer.style.visibility = 'visible';
|
||||
}
|
||||
initNavPosition();
|
||||
}
|
||||
header.addEventListener('touchstart', handleEnter);
|
||||
header.addEventListener('touchend', handleLeave);
|
||||
|
||||
// init
|
||||
adjustHeaderHeight();
|
||||
});
|
||||
|
||||
///////////////end header sans animation logo////////////////
|
||||
}();
|
||||
// This entry need to be wrapped in an IIFE because it need to be isolated against other entry modules.
|
||||
!function() {
|
||||
@@ -1261,10 +1194,10 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
$(document).ready(function(){
|
||||
// ////////////////////// start calendrier home /////////////////////////////////
|
||||
|
||||
// Aller au 9e élément à l'initialisation
|
||||
$('.__timeline-content').on('init', function(event, slick){
|
||||
slick.slickGoTo(11); // Index 8 = 9e item
|
||||
});
|
||||
// // Aller au 9e élément à l'initialisation
|
||||
// $('.__timeline-content').on('init', function(event, slick){
|
||||
// slick.slickGoTo(11); // Index 8 = 9e item
|
||||
// });
|
||||
|
||||
$('.__timeline-content').slick({
|
||||
slidesToShow: 3,
|
||||
@@ -1274,6 +1207,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
centerMode: false,
|
||||
draggable: true,
|
||||
infinite: false,
|
||||
initialSlide: 13,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 810,
|
||||
@@ -1284,6 +1218,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
draggable: true,
|
||||
centerMode: false,
|
||||
infinite: false,
|
||||
initialSlide: 13,
|
||||
}
|
||||
}]
|
||||
});
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -192,7 +192,7 @@ h2, h3 {
|
||||
width: 100%;
|
||||
padding-top: 200px;
|
||||
padding-bottom: 3rem;
|
||||
min-height: calc(100vh - (200px + 3rem));
|
||||
min-height: calc(100vh - (200px + 6rem));
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
.layout-container main {
|
||||
@@ -258,16 +258,60 @@ svg.ext {
|
||||
}
|
||||
|
||||
/*partials*/
|
||||
/* ===========================
|
||||
HEADER GLOBAL
|
||||
=========================== */
|
||||
header[role=banner] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
max-width: 100vw;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
transition: height 1.4s ease-in-out, width 1.4s ease-in-out;
|
||||
left: 0;
|
||||
z-index: 50;
|
||||
max-width: 100vw;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
transform-origin: bottom right;
|
||||
height: 200px;
|
||||
width: 35%;
|
||||
transition: all 1.4s ease-in-out;
|
||||
/* ===========================
|
||||
LANGUAGE SWITCHER
|
||||
=========================== */
|
||||
/* ===========================
|
||||
COLONNE GAUCHE (LOGO)
|
||||
=========================== */
|
||||
/* ===========================
|
||||
BLOC DROITE OPTIONNEL
|
||||
=========================== */
|
||||
/* ===========================
|
||||
NAVIGATION (COLONNE DROITE)
|
||||
=========================== */
|
||||
/* ===========================
|
||||
ÉTATS D’AFFICHAGE DU MENU
|
||||
(pilotés en JS avec .nav-hidden)
|
||||
=========================== */
|
||||
/* État par défaut : visible */
|
||||
/* Desktop : caché → slide vers la gauche */
|
||||
/* Mobile : on utilise translateY pour cacher/montrer */
|
||||
}
|
||||
@media (max-width: 1090px) {
|
||||
header[role=banner] {
|
||||
height: 160px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
header[role=banner] {
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
header[role=banner] {
|
||||
width: 100%;
|
||||
height: 170px;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
header[role=banner] .qdd-header {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
header[role=banner] .language-switcher-language-url {
|
||||
text-transform: uppercase;
|
||||
@@ -296,28 +340,20 @@ header[role=banner] .language-switcher-language-url ul li:nth-child(1)::after {
|
||||
header[role=banner] .language-switcher-language-url ul .is-active {
|
||||
font-family: "gilroy-bold";
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
header[role=banner] {
|
||||
height: 100vh;
|
||||
}
|
||||
header[role=banner] header {
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
header[role=banner] .contextual-region {
|
||||
width: max-content;
|
||||
}
|
||||
header[role=banner] .header_left_container {
|
||||
flex: 0 0 100%;
|
||||
flex: 0 0 70%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: rgb(255, 255, 255);
|
||||
transition: flex-basis 0.9s ease-in-out, width 0.9s ease-in-out;
|
||||
}
|
||||
header[role=banner] .header_left_container img {
|
||||
display: none;
|
||||
@media (max-width: 810px) {
|
||||
header[role=banner] .header_left_container {
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 660px) {
|
||||
header[role=banner] .header_left_container {
|
||||
@@ -344,28 +380,21 @@ header[role=banner] .header_left_container #block-quartiers-de-demain-logoepau-2
|
||||
header[role=banner] .header_left_container #block-quartiers-de-demain-logoquartiersdedemain {
|
||||
margin: auto;
|
||||
}
|
||||
header[role=banner] .header_left_container #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo {
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
}
|
||||
@media (max-width: 1650px) {
|
||||
header[role=banner] .header_left_container #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
header[role=banner] .header_left_container #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header {
|
||||
width: 100%;
|
||||
}
|
||||
header[role=banner] .header_left_container img {
|
||||
width: auto;
|
||||
margin: auto;
|
||||
height: calc(200px - 1rem);
|
||||
height: calc(200px - 4rem);
|
||||
padding: 2rem;
|
||||
transition: height 0.3s; /* Add transition for smooth resizing */
|
||||
transition: height 0.3s;
|
||||
}
|
||||
@media (max-width: 891px) {
|
||||
@media (min-width: 1600px) {
|
||||
header[role=banner] .header_left_container img {
|
||||
height: 160px;
|
||||
height: calc(200px - 3rem);
|
||||
}
|
||||
}
|
||||
@media (max-width: 1300px) {
|
||||
header[role=banner] .header_left_container img {
|
||||
height: calc(160px - 4rem);
|
||||
}
|
||||
}
|
||||
@media (max-width: 660px) {
|
||||
@@ -373,11 +402,6 @@ header[role=banner] .header_left_container img {
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 450px) {
|
||||
header[role=banner] .header_left_container img {
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
header[role=banner] .header_right_container {
|
||||
display: none;
|
||||
flex: 0 0 0%;
|
||||
@@ -387,78 +411,46 @@ header[role=banner] .header_right_container {
|
||||
text-align: center;
|
||||
transform: translateX(0);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
z-index: -1;
|
||||
z-index: 60;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
border-radius: 11px;
|
||||
padding: 0.5rem;
|
||||
padding: 0.5rem 0.5rem 0 0.5rem;
|
||||
margin: 1rem;
|
||||
padding-top: 0rem;
|
||||
padding-bottom: 0rem;
|
||||
}
|
||||
@media (max-width: 660px) {
|
||||
header[role=banner] .header_right_container {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
header[role=banner] .header_right_container .language-switcher-language-url {
|
||||
text-transform: uppercase;
|
||||
color: white;
|
||||
}
|
||||
header[role=banner] .header_right_container .language-switcher-language-url ul {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: 0.6rem;
|
||||
padding: 0;
|
||||
}
|
||||
@media (max-width: 660px) {
|
||||
header[role=banner] .header_right_container .language-switcher-language-url ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
header[role=banner] .header_right_container .language-switcher-language-url ul {
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
header[role=banner] .header_right_container .language-switcher-language-url ul li a {
|
||||
color: white;
|
||||
font-family: "gilroy-light";
|
||||
}
|
||||
header[role=banner] .header_right_container .language-switcher-language-url ul li:nth-child(1)::after {
|
||||
content: " / ";
|
||||
white-space: pre;
|
||||
}
|
||||
@media (max-width: 660px) {
|
||||
header[role=banner] .header_right_container .language-switcher-language-url ul li:nth-child(1)::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
header[role=banner] .header_right_container .language-switcher-language-url ul .is-active {
|
||||
font-family: "gilroy-bold";
|
||||
}
|
||||
header[role=banner] .header_nav_container {
|
||||
flex: 0 0 0%;
|
||||
flex: 0 0 30%;
|
||||
width: 100%;
|
||||
min-width: fit-content;
|
||||
background: rgb(7, 50, 194);
|
||||
text-align: center;
|
||||
transform: translateX(0);
|
||||
transition: flex-basis 0.9s ease-in-out, width 0.9s ease-in-out, transform 0.3s ease-in-out;
|
||||
z-index: -1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: -1;
|
||||
transform: translateX(0);
|
||||
transition: flex-basis 0.9s ease-in-out, width 0.9s ease-in-out, transform 0.3s ease-in-out;
|
||||
/* ---- Bloc menu principal ---- */
|
||||
/* ---- Sélecteur de langue en bas du menu ---- */
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
header[role=banner] .header_nav_container {
|
||||
/* 🔹 en mobile : nav en dessous du header, en absolu */
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 170px;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
top: -30px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
header[role=banner] .header_nav_container {
|
||||
flex: 0 0 40%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
header[role=banner] .header_nav_container #block-quartiers-de-demain-entete {
|
||||
@@ -534,18 +526,27 @@ header[role=banner] .header_nav_container #block-quartiers-de-demain-selecteurde
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
header[role=banner] .header_nav_container.hidden {
|
||||
transform: translateX(30%);
|
||||
}
|
||||
header[role=banner] .header_nav_container.visible {
|
||||
header[role=banner] .header_nav_container {
|
||||
transform: translateX(0);
|
||||
}
|
||||
header[role=banner] .header:hover + .header_nav_container {
|
||||
transform: translateX(0);
|
||||
header[role=banner] .header_nav_container.nav-hidden {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
header[role=banner] .header_nav_container {
|
||||
transform: translateY(0);
|
||||
}
|
||||
header[role=banner] .header_nav_container.nav-hidden {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
HEADER "SHRINK" AU SCROLL
|
||||
=========================== */
|
||||
.shrink {
|
||||
height: 260px;
|
||||
background: none;
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
.shrink {
|
||||
@@ -553,143 +554,6 @@ header[role=banner] .header:hover + .header_nav_container {
|
||||
}
|
||||
}
|
||||
|
||||
/* Taille définitive du header après l'animation */
|
||||
header[role=banner].header--collapsed {
|
||||
height: 200px; /* Ou la hauteur que vous souhaitez pour votre header */
|
||||
width: 35%;
|
||||
transform-origin: bottom right;
|
||||
transition: all 1.4s ease-in-out;
|
||||
}
|
||||
@media (max-width: 1090px) {
|
||||
header[role=banner].header--collapsed {
|
||||
height: 160px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
header[role=banner].header--collapsed {
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
header[role=banner].header--collapsed .qdd-header {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
header[role=banner].header--collapsed {
|
||||
width: 100%;
|
||||
height: 170px;
|
||||
}
|
||||
}
|
||||
header[role=banner].header--collapsed .header_left_container {
|
||||
flex-basis: 65%;
|
||||
transform-origin: bottom right;
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
header[role=banner].header--collapsed .header_left_container {
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
}
|
||||
header[role=banner].header--collapsed .header_nav_container {
|
||||
flex-basis: 30%;
|
||||
transform-origin: bottom right;
|
||||
min-width: fit-content;
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
header[role=banner].header--collapsed .header_nav_container {
|
||||
flex: 1 0 100%;
|
||||
position: relative;
|
||||
left: -100%;
|
||||
}
|
||||
}
|
||||
|
||||
header[role=banner].header--collapsed-already {
|
||||
height: 200px; /* Ou la hauteur que vous souhaitez pour votre header */
|
||||
width: 35%;
|
||||
transform-origin: bottom right;
|
||||
transition: all 0s ease-in-out;
|
||||
}
|
||||
header[role=banner].header--collapsed-already .qdd-header {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
header[role=banner].header--collapsed-already {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
header[role=banner].header--collapsed-already {
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
header[role=banner].header--collapsed-already .header_left_container {
|
||||
flex-basis: 65%;
|
||||
transform-origin: bottom right;
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
header[role=banner].header--collapsed-already .header_left_container {
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
}
|
||||
header[role=banner].header--collapsed-already .header_nav_container {
|
||||
flex-basis: 30%;
|
||||
min-width: fit-content;
|
||||
transform-origin: bottom right;
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
header[role=banner].header--collapsed-already .header_nav_container {
|
||||
flex: 1 0 100%;
|
||||
position: relative;
|
||||
left: -100%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 550px) {
|
||||
header[role=banner].header--collapsed-already .header_nav_container {
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Empêcher le scroll pendant l'intro */
|
||||
body.logo-intro-animating {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Header plein écran au tout début */
|
||||
body.logo-intro-active header[role=banner] {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* État normal du SVG (dans le header) */
|
||||
#block-quartiers-de-demain-logoquartiersdedemain svg {
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
transform: none;
|
||||
transform-origin: center center;
|
||||
transition: transform 1.4s ease-in-out, top 1.4s ease-in-out, left 1.4s ease-in-out;
|
||||
}
|
||||
|
||||
/* État intro : logo centré, scale(2) */
|
||||
body.logo-intro-active #block-quartiers-de-demain-logoquartiersdedemain svg {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) scale(2);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
/* Pendant l'intro : même si le header est "collapsed",
|
||||
on garde TOUT l'espace pour le bloc gauche,
|
||||
la nav ne prend AUCUNE place (0%) */
|
||||
body.logo-intro-animating header[role=banner].header--collapsed .header_left_container {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
body.logo-intro-animating header[role=banner].header--collapsed .header_nav_container {
|
||||
flex: 0 0 0%;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
footer {
|
||||
z-index: 100;
|
||||
}
|
||||
@@ -2650,21 +2514,9 @@ body {
|
||||
flex-direction: column;
|
||||
}
|
||||
#home article.node-type-static #paragraph-id--6 .field_field_texte .colone-picto > p:nth-of-type(1) {
|
||||
color: #0833c2;
|
||||
font-size: 1rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
#home article.node-type-static #paragraph-id--6 .field_field_texte .colone-picto > p:nth-of-type(2) {
|
||||
width: 60%;
|
||||
color: black;
|
||||
font-size: 0.8rem;
|
||||
align-self: center;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
#home article.node-type-static #paragraph-id--6 .field_field_texte .colone-picto > p:nth-of-type(2) {
|
||||
width: 80%;
|
||||
padding-top: 0;
|
||||
}
|
||||
font-weight: 800;
|
||||
}
|
||||
#home article.node-type-static #paragraph-id--6 .field_field_texte .colone-picto > p:nth-of-type(3) {
|
||||
width: 90%;
|
||||
@@ -4567,6 +4419,12 @@ body {
|
||||
width: 220px;
|
||||
height: 145px;
|
||||
}
|
||||
@media (max-width: 1500px) {
|
||||
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_parties_projet .paragraph--type--projet-diapo .field_field_images_projet .diaporama .cadre-img-zoom img {
|
||||
width: 150px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_parties_projet .paragraph--type--projet-diapo .field_field_images_projet .diaporama .cadre-img-zoom img {
|
||||
width: 100%;
|
||||
@@ -4575,7 +4433,7 @@ body {
|
||||
}
|
||||
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_parties_projet .paragraph--type--projet-diapo .field_field_images_projet .diaporama .image-field-caption {
|
||||
margin: 0;
|
||||
max-width: 200px;
|
||||
max-width: 220px;
|
||||
}
|
||||
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_parties_projet .paragraph--type--projet-diapo .field_field_images_projet .diaporama .image-field-caption p {
|
||||
margin-top: 0;
|
||||
@@ -5625,6 +5483,7 @@ main {
|
||||
font-family: "gilroy-light";
|
||||
color: rgb(7, 50, 194);
|
||||
font-size: 1.2rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
#ressources .layout-content .content_container .views-element-container h3 div .field_description {
|
||||
margin-left: 10%;
|
||||
|
||||
@@ -1,191 +1,71 @@
|
||||
// // //////// start header ////////////
|
||||
|
||||
|
||||
|
||||
// // document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
// // const header = document.querySelector('header[role="banner"]');
|
||||
// // const logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > svg:nth-child(1)');
|
||||
// // const headerNavContainer = document.querySelector('.header_nav_container');
|
||||
// // const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
|
||||
// // const isTargetPath = window.location.pathname === '/';
|
||||
|
||||
// // // Fonction pour démarrer l'animation du logo SVG
|
||||
// // function startLogoAnimation() {
|
||||
// // logo.classList.add('animated');
|
||||
// // }
|
||||
|
||||
// // // Fonction pour arrêter l'animation du logo SVG
|
||||
// // function stopLogoAnimation() {
|
||||
// // logo.classList.remove('animated');
|
||||
// // }
|
||||
|
||||
// // // Vérifier si le header a la classe header--collapse
|
||||
// // function checkHeaderCollapse() {
|
||||
// // if (header.classList.contains('header--collapsed')) {
|
||||
// // stopLogoAnimation();
|
||||
// // } else if (header.classList.contains('header--collapsed-already')) {
|
||||
// // stopLogoAnimation();
|
||||
// // } else {
|
||||
// // startLogoAnimation();
|
||||
// // }
|
||||
|
||||
// // }
|
||||
// // const header = document.querySelector('header[role="banner"]');
|
||||
// // const headerNavContainer = document.querySelector('.header_nav_container');
|
||||
|
||||
// // const threshold = 100;
|
||||
// // let lastScrollTop = 0;
|
||||
// // let isHidden = false;
|
||||
// // let introDone = true; // ✅ plus d'intro, donc on considère qu'elle est "déjà finie"
|
||||
|
||||
// // /* -------------------
|
||||
// // Animations nav
|
||||
// // ------------------- */
|
||||
|
||||
// // // Appeler la fonction au chargement initial
|
||||
// // checkHeaderCollapse();
|
||||
|
||||
// // // Observer les changements de classe sur le header
|
||||
// // const observer = new MutationObserver(function(mutations) {
|
||||
// // mutations.forEach(function(mutation) {
|
||||
// // if (mutation.attributeName === 'class') {
|
||||
// // checkHeaderCollapse();
|
||||
// // }
|
||||
// // });
|
||||
// // function slideOut() {
|
||||
// // headerNavContainer.animate([
|
||||
// // { transform: 'translateX(0)' },
|
||||
// // { transform: 'translateX(-100%)' }
|
||||
// // ], {
|
||||
// // duration: 300,
|
||||
// // fill: 'forwards'
|
||||
// // });
|
||||
// // observer.observe(header, { attributes: true });
|
||||
|
||||
|
||||
// // // Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement
|
||||
// // if (!isFirstLoad || !isTargetPath) {
|
||||
// // header.classList.add('header--collapsed-already');
|
||||
// // stopLogoAnimation();
|
||||
// // } else {
|
||||
// // // Sinon, appliquer la transition après un délai, sauf si scroll
|
||||
// // let collapseTimeout = setTimeout(() => {
|
||||
// // header.classList.add('header--collapsed');
|
||||
// // }, 1000);
|
||||
|
||||
// // function interruptCollapseOnScroll() {
|
||||
// // if (!header.classList.contains('header--collapsed')) {
|
||||
// // clearTimeout(collapseTimeout); // annule l'animation
|
||||
// // header.classList.add('header--collapsed');
|
||||
// // }
|
||||
// // window.removeEventListener('scroll', interruptCollapseOnScroll); // une seule fois
|
||||
// // }
|
||||
|
||||
// // window.addEventListener('scroll', interruptCollapseOnScroll);
|
||||
// // }
|
||||
// // //////////////////////////////////////
|
||||
|
||||
// // let lastScrollTop = 0;
|
||||
// // let threshold = 100; // Change this value as needed
|
||||
// // let isHidden = false;
|
||||
|
||||
// // function slideOut() {
|
||||
// // headerNavContainer.animate([
|
||||
// // { transform: 'translateX(0)' },
|
||||
// // { transform: 'translateX(-100%)' }
|
||||
// // ], {
|
||||
// // duration: 300,
|
||||
// // fill: 'forwards'
|
||||
// // });
|
||||
// // isHidden = true;
|
||||
// // }
|
||||
|
||||
// // function slideIn() {
|
||||
// // headerNavContainer.animate([
|
||||
// // { transform: 'translateX(-100%)' },
|
||||
// // { transform: 'translateX(0)' }
|
||||
// // ], {
|
||||
// // duration: 300,
|
||||
// // fill: 'forwards'
|
||||
// // });
|
||||
// // isHidden = false;
|
||||
// // }
|
||||
|
||||
// // function slideDown() {
|
||||
// // // headerNavContainer.style.display = 'block';
|
||||
// // headerNavContainer.animate([
|
||||
// // { transform: 'translateY(0%)' },
|
||||
// // { transform: 'translateY(+100%)' }
|
||||
// // ], {
|
||||
// // duration: 300,
|
||||
// // fill: 'forwards'
|
||||
// // });
|
||||
// // isHidden = false;
|
||||
// // }
|
||||
|
||||
// // function slideUp() {
|
||||
// // headerNavContainer.animate([
|
||||
// // { transform: 'translateY(100%)' },
|
||||
// // { transform: 'translateY(0%)' }
|
||||
// // ], {
|
||||
// // duration: 300,
|
||||
// // fill: 'forwards'
|
||||
// // }).onfinish = function() {
|
||||
// // // headerNavContainer.style.display = 'none';
|
||||
// // };
|
||||
// // isHidden = true;
|
||||
// // }
|
||||
// // // Fonction pour ajuster la hauteur du header lors du défilement
|
||||
// // function adjustHeaderHeight() {
|
||||
// // if (window.scrollY > 0) {
|
||||
// // header.classList.add('shrink');
|
||||
// // } else {
|
||||
// // header.classList.remove('shrink');
|
||||
// // }
|
||||
// // }
|
||||
|
||||
// // function handleScroll() {
|
||||
// // let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
// // const isMobile = window.innerWidth < 811;
|
||||
|
||||
// // if (scrollTop > threshold && !isHidden) {
|
||||
// // if (isMobile) {
|
||||
// // slideUp();
|
||||
// // } else {
|
||||
// // slideOut();
|
||||
// // }
|
||||
// // } else if (scrollTop <= threshold && isHidden) {
|
||||
// // if (isMobile) {
|
||||
// // slideDown();
|
||||
// // } else {
|
||||
// // slideIn();
|
||||
// // }
|
||||
// // }
|
||||
|
||||
|
||||
// // lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
|
||||
// // }
|
||||
|
||||
// // function handleTouchAndMouseEnter() {
|
||||
// // if (isHidden) {
|
||||
// // if (window.innerWidth < 811) {
|
||||
// // slideDown();
|
||||
// // } else {
|
||||
// // slideIn();
|
||||
// // }
|
||||
// // }
|
||||
// // }
|
||||
|
||||
// // function handleTouchAndMouseLeave() {
|
||||
// // if (lastScrollTop > threshold && !isHidden) {
|
||||
// // if (window.innerWidth < 811) {
|
||||
// // slideUp();
|
||||
// // } else {
|
||||
// // slideOut();
|
||||
// // }
|
||||
// // }
|
||||
// // }
|
||||
|
||||
// // window.addEventListener('scroll', handleScroll);
|
||||
// // window.addEventListener('scroll', adjustHeaderHeight);
|
||||
|
||||
// // // Mouse events for desktop
|
||||
// // header.addEventListener('mouseenter', handleTouchAndMouseEnter);
|
||||
// // header.addEventListener('mouseleave', handleTouchAndMouseLeave);
|
||||
|
||||
// // // Touch events for tablets and mobile devices
|
||||
// // header.addEventListener('touchstart', handleTouchAndMouseEnter);
|
||||
// // header.addEventListener('touchend', handleTouchAndMouseLeave);
|
||||
|
||||
// // // Initial check to see if we're at the top of the page
|
||||
// // isHidden = true;
|
||||
// // }
|
||||
|
||||
// // function slideIn() {
|
||||
// // headerNavContainer.animate([
|
||||
// // { transform: 'translateX(-100%)' },
|
||||
// // { transform: 'translateX(0)' }
|
||||
// // ], {
|
||||
// // duration: 300,
|
||||
// // fill: 'forwards'
|
||||
// // });
|
||||
// // isHidden = false;
|
||||
// // }
|
||||
|
||||
// // function slideDown() {
|
||||
// // headerNavContainer.animate([
|
||||
// // { transform: 'translateY(-100%)' },
|
||||
// // { transform: 'translateY(0%)' }
|
||||
// // ], {
|
||||
// // duration: 300,
|
||||
// // fill: 'forwards'
|
||||
// // });
|
||||
// // isHidden = false;
|
||||
// // }
|
||||
|
||||
// // function slideUp() {
|
||||
// // headerNavContainer.animate([
|
||||
// // { transform: 'translateY(0%)' },
|
||||
// // { transform: 'translateY(-100%)' }
|
||||
// // ], {
|
||||
// // duration: 300,
|
||||
// // fill: 'forwards'
|
||||
// // });
|
||||
// // isHidden = true;
|
||||
// // }
|
||||
|
||||
// // function initNavPosition() {
|
||||
// // if (window.pageYOffset <= threshold) {
|
||||
// // if (window.innerWidth < 811) {
|
||||
// // slideDown();
|
||||
// // } else {
|
||||
// // } else {
|
||||
// // slideIn();
|
||||
// // }
|
||||
// // }
|
||||
// // } else {
|
||||
// // if (window.innerWidth < 811) {
|
||||
// // slideUp();
|
||||
@@ -193,105 +73,227 @@
|
||||
// // slideIn();
|
||||
// // }
|
||||
// // }
|
||||
|
||||
// // });
|
||||
|
||||
// // //////// end header ////////////
|
||||
|
||||
// // }
|
||||
|
||||
// // /* -------------------
|
||||
// // Scroll / resize header
|
||||
// // ------------------- */
|
||||
|
||||
// // function adjustHeaderHeight() {
|
||||
// // if (window.scrollY > 0) {
|
||||
// // header.classList.add('shrink');
|
||||
// // } else {
|
||||
// // header.classList.remove('shrink');
|
||||
// // }
|
||||
// // }
|
||||
|
||||
// // function handleScroll() {
|
||||
// // if (!introDone) return; // ici ça passe, introDone = true
|
||||
|
||||
// // let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
// // const isMobile = window.innerWidth < 811;
|
||||
|
||||
// // if (scrollTop > threshold && !isHidden) {
|
||||
// // if (isMobile) {
|
||||
// // slideUp();
|
||||
// // } else {
|
||||
// // slideOut();
|
||||
// // }
|
||||
// // } else if (scrollTop <= threshold && isHidden) {
|
||||
// // if (isMobile) {
|
||||
// // slideDown();
|
||||
// // } else {
|
||||
// // slideIn();
|
||||
// // }
|
||||
// // }
|
||||
|
||||
// // lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
|
||||
// // }
|
||||
|
||||
// // function handleTouchAndMouseEnter() {
|
||||
// // if (!introDone) return;
|
||||
|
||||
// // if (isHidden) {
|
||||
// // if (window.innerWidth < 811) {
|
||||
// // slideDown();
|
||||
// // } else {
|
||||
// // slideIn();
|
||||
// // }
|
||||
// // }
|
||||
// // }
|
||||
|
||||
// // function handleTouchAndMouseLeave() {
|
||||
// // if (!introDone) return;
|
||||
|
||||
// // if (lastScrollTop > threshold && !isHidden) {
|
||||
// // if (window.innerWidth < 811) {
|
||||
// // slideUp();
|
||||
// // } else {
|
||||
// // slideOut();
|
||||
// // }
|
||||
// // }
|
||||
// // }
|
||||
|
||||
// // // ✅ on n'a plus besoin de masquer la nav au début
|
||||
// // if (headerNavContainer) {
|
||||
// // headerNavContainer.style.visibility = 'visible';
|
||||
// // }
|
||||
|
||||
// // window.addEventListener('scroll', handleScroll);
|
||||
// // window.addEventListener('scroll', adjustHeaderHeight);
|
||||
|
||||
// // header.addEventListener('mouseenter', handleTouchAndMouseEnter);
|
||||
// // header.addEventListener('mouseleave', handleTouchAndMouseLeave);
|
||||
|
||||
// // header.addEventListener('touchstart', handleTouchAndMouseEnter);
|
||||
// // header.addEventListener('touchend', handleTouchAndMouseLeave);
|
||||
|
||||
// // // ✅ position initiale de la nav
|
||||
// // initNavPosition();
|
||||
|
||||
// // });
|
||||
|
||||
|
||||
///////////////start header sans animation logo////////////////
|
||||
// document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// const header = document.querySelector('header[role="banner"]');
|
||||
// const headerNavContainer = document.querySelector('.header_nav_container');
|
||||
|
||||
// if (!header || !headerNavContainer) return;
|
||||
|
||||
// const threshold = 100;
|
||||
// let lastScrollTop = 0;
|
||||
// let isHidden = false;
|
||||
// let introDone = true; // ✅ pas d'intro, donc direct prêt
|
||||
|
||||
// /* -------------------
|
||||
// Helpers show / hide
|
||||
// ------------------- */
|
||||
|
||||
// function hideNav() {
|
||||
// headerNavContainer.classList.add('nav-hidden');
|
||||
// isHidden = true;
|
||||
// }
|
||||
|
||||
// function showNav() {
|
||||
// headerNavContainer.classList.remove('nav-hidden');
|
||||
// isHidden = false;
|
||||
// }
|
||||
|
||||
// function isMobile() {
|
||||
// return window.innerWidth < 811;
|
||||
// }
|
||||
|
||||
// /* -------------------
|
||||
// Position initiale
|
||||
// ------------------- */
|
||||
|
||||
// function initNavPosition() {
|
||||
// if (window.pageYOffset <= threshold) {
|
||||
// showNav(); // en haut de page → nav visible
|
||||
// } else {
|
||||
// if (isMobile()) {
|
||||
// hideNav(); // mobile scrollé → nav cachée
|
||||
// } else {
|
||||
// showNav(); // desktop : nav visible même en bas
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// /* -------------------
|
||||
// Scroll / resize header
|
||||
// ------------------- */
|
||||
|
||||
// function adjustHeaderHeight() {
|
||||
// if (window.scrollY > 0) {
|
||||
// header.classList.add('shrink');
|
||||
// } else {
|
||||
// header.classList.remove('shrink');
|
||||
// }
|
||||
// }
|
||||
|
||||
// function handleScroll() {
|
||||
// if (!introDone) return;
|
||||
|
||||
// let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
|
||||
// if (scrollTop > threshold && !isHidden) {
|
||||
// // on cache la nav
|
||||
// hideNav();
|
||||
// } else if (scrollTop <= threshold && isHidden) {
|
||||
// // on ré-affiche la nav
|
||||
// showNav();
|
||||
// }
|
||||
|
||||
// lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
|
||||
// }
|
||||
|
||||
// function handleTouchAndMouseEnter() {
|
||||
// if (!introDone) return;
|
||||
// if (isHidden) {
|
||||
// showNav();
|
||||
// }
|
||||
// }
|
||||
|
||||
// function handleTouchAndMouseLeave() {
|
||||
// if (!introDone) return;
|
||||
|
||||
// if (lastScrollTop > threshold && !isHidden) {
|
||||
// hideNav();
|
||||
// }
|
||||
// }
|
||||
|
||||
// // Rendre la nav visible (plus de visibility:hidden)
|
||||
// headerNavContainer.style.visibility = 'visible';
|
||||
|
||||
// window.addEventListener('scroll', handleScroll);
|
||||
// window.addEventListener('scroll', adjustHeaderHeight);
|
||||
|
||||
// header.addEventListener('mouseenter', handleTouchAndMouseEnter);
|
||||
// header.addEventListener('mouseleave', handleTouchAndMouseLeave);
|
||||
|
||||
// header.addEventListener('touchstart', handleTouchAndMouseEnter);
|
||||
// header.addEventListener('touchend', handleTouchAndMouseLeave);
|
||||
|
||||
// // Position de départ
|
||||
// initNavPosition();
|
||||
// adjustHeaderHeight();
|
||||
// });
|
||||
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const header = document.querySelector('header[role="banner"]');
|
||||
const logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain svg');
|
||||
const headerNavContainer = document.querySelector('.header_nav_container');
|
||||
|
||||
const navEntry = performance.getEntriesByType("navigation")[0];
|
||||
const isFirstLoad = !navEntry.type.includes('back_forward');
|
||||
const isTargetPath = window.location.pathname === '/';
|
||||
const isMobile = window.innerWidth < 811; // 🔹 breakpoint mobile
|
||||
if (!header || !headerNavContainer) return;
|
||||
|
||||
const threshold = 100;
|
||||
let lastScrollTop = 0;
|
||||
let isHidden = false;
|
||||
let introDone = false; // ✅ on saura quand l'intro est finie
|
||||
let isHidden = false; // au chargement : nav visible
|
||||
|
||||
// 🔹 On cache la nav au tout début (pour éviter toute secousse)
|
||||
if (headerNavContainer) {
|
||||
headerNavContainer.style.visibility = 'hidden';
|
||||
function isMobile() {
|
||||
return window.innerWidth < 811;
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Animations nav
|
||||
------------------- */
|
||||
/* --- helpers --- */
|
||||
|
||||
function slideOut() {
|
||||
headerNavContainer.animate([
|
||||
{ transform: 'translateX(0)' },
|
||||
{ transform: 'translateX(-100%)' }
|
||||
], {
|
||||
duration: 300,
|
||||
fill: 'forwards'
|
||||
});
|
||||
function hideNav() {
|
||||
headerNavContainer.classList.add('nav-hidden');
|
||||
isHidden = true;
|
||||
}
|
||||
|
||||
function slideIn() {
|
||||
headerNavContainer.animate([
|
||||
{ transform: 'translateX(-100%)' },
|
||||
{ transform: 'translateX(0)' }
|
||||
], {
|
||||
duration: 300,
|
||||
fill: 'forwards'
|
||||
});
|
||||
function showNav() {
|
||||
headerNavContainer.classList.remove('nav-hidden');
|
||||
isHidden = false;
|
||||
}
|
||||
|
||||
function slideDown() {
|
||||
headerNavContainer.animate([
|
||||
{ transform: 'translateY(0%)' },
|
||||
{ transform: 'translateY(+100%)' }
|
||||
], {
|
||||
duration: 300,
|
||||
fill: 'forwards'
|
||||
});
|
||||
isHidden = false;
|
||||
}
|
||||
/* --- init : nav visible au chargement --- */
|
||||
|
||||
function slideUp() {
|
||||
headerNavContainer.animate([
|
||||
{ transform: 'translateY(100%)' },
|
||||
{ transform: 'translateY(0%)' }
|
||||
], {
|
||||
duration: 300,
|
||||
fill: 'forwards'
|
||||
}).onfinish = function() {};
|
||||
isHidden = true;
|
||||
}
|
||||
headerNavContainer.style.visibility = 'visible';
|
||||
showNav();
|
||||
|
||||
// ✅ Position initiale de la nav,
|
||||
// appelée UNIQUEMENT après la fin de l'intro
|
||||
function initNavPosition() {
|
||||
if (window.pageYOffset <= threshold) {
|
||||
if (window.innerWidth < 811) {
|
||||
slideDown();
|
||||
} else {
|
||||
slideIn();
|
||||
}
|
||||
} else {
|
||||
if (window.innerWidth < 811) {
|
||||
slideUp();
|
||||
} else {
|
||||
slideIn();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Scroll / resize header
|
||||
------------------- */
|
||||
/* --- shrink header --- */
|
||||
|
||||
function adjustHeaderHeight() {
|
||||
if (window.scrollY > 0) {
|
||||
@@ -301,115 +303,45 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
}
|
||||
}
|
||||
|
||||
function handleScroll() {
|
||||
if (!introDone) return; // ⛔ rien tant que l'intro n'est pas finie
|
||||
/* --- scroll : cache / montre la nav --- */
|
||||
|
||||
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
const isMobile = window.innerWidth < 811;
|
||||
function handleScroll() {
|
||||
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
|
||||
if (scrollTop > threshold && !isHidden) {
|
||||
if (isMobile) {
|
||||
slideUp();
|
||||
} else {
|
||||
slideOut();
|
||||
}
|
||||
// on cache la nav (desktop & mobile)
|
||||
hideNav();
|
||||
} else if (scrollTop <= threshold && isHidden) {
|
||||
if (isMobile) {
|
||||
slideDown();
|
||||
} else {
|
||||
slideIn();
|
||||
}
|
||||
// on la remonte en haut de page
|
||||
showNav();
|
||||
}
|
||||
|
||||
lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
|
||||
}
|
||||
|
||||
function handleTouchAndMouseEnter() {
|
||||
if (!introDone) return; // ⛔ pas de hover avant la fin de l'intro
|
||||
/* --- hover / touch sur le header : on montre la nav --- */
|
||||
|
||||
function handleEnter() {
|
||||
if (isHidden) {
|
||||
if (window.innerWidth < 811) {
|
||||
slideDown();
|
||||
} else {
|
||||
slideIn();
|
||||
}
|
||||
showNav();
|
||||
}
|
||||
}
|
||||
|
||||
function handleTouchAndMouseLeave() {
|
||||
if (!introDone) return;
|
||||
|
||||
function handleLeave() {
|
||||
if (lastScrollTop > threshold && !isHidden) {
|
||||
if (window.innerWidth < 811) {
|
||||
slideUp();
|
||||
} else {
|
||||
slideOut();
|
||||
}
|
||||
hideNav();
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
window.addEventListener('scroll', adjustHeaderHeight);
|
||||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||
window.addEventListener('scroll', adjustHeaderHeight, { passive: true });
|
||||
|
||||
header.addEventListener('mouseenter', handleTouchAndMouseEnter);
|
||||
header.addEventListener('mouseleave', handleTouchAndMouseLeave);
|
||||
header.addEventListener('mouseenter', handleEnter);
|
||||
header.addEventListener('mouseleave', handleLeave);
|
||||
|
||||
header.addEventListener('touchstart', handleTouchAndMouseEnter);
|
||||
header.addEventListener('touchend', handleTouchAndMouseLeave);
|
||||
|
||||
/* -------------------
|
||||
Intro du logo
|
||||
------------------- */
|
||||
|
||||
if (isFirstLoad && isTargetPath && logo && !isMobile) {
|
||||
// On bloque le scroll
|
||||
document.body.classList.add('logo-intro-animating');
|
||||
|
||||
// 1) Logo plein écran SANS ANIMATION + header figé
|
||||
logo.style.transition = 'none';
|
||||
header.style.transition = 'none';
|
||||
document.body.classList.add('logo-intro-active'); // logo centré, scale(2)
|
||||
|
||||
void logo.offsetWidth; // reflow
|
||||
|
||||
const INTRO_DELAY = 1000; // temps où le logo reste plein écran
|
||||
const TRANSITION_DURATION = 1000; // durée de l'anim de collapse
|
||||
|
||||
// 2) Après ce délai : on réactive les transitions et on lance l'anim
|
||||
setTimeout(() => {
|
||||
logo.style.transition = '';
|
||||
header.style.transition = '';
|
||||
|
||||
header.classList.add('header--collapsed'); // header se rétracte
|
||||
document.body.classList.remove('logo-intro-active'); // logo retourne dans le header
|
||||
|
||||
// 3) Quand le header + logo ont fini de bouger :
|
||||
setTimeout(() => {
|
||||
document.body.classList.remove('logo-intro-animating');
|
||||
introDone = true;
|
||||
|
||||
// 👉 maintenant seulement on affiche la nav et on la fait glisser
|
||||
if (headerNavContainer) {
|
||||
headerNavContainer.style.visibility = 'visible';
|
||||
}
|
||||
initNavPosition();
|
||||
|
||||
}, TRANSITION_DURATION + 100);
|
||||
|
||||
}, INTRO_DELAY);
|
||||
|
||||
} else {
|
||||
// 🔹 CAS MOBILE OU PAS HOME / PAS 1re LOAD :
|
||||
// pas d'intro : header direct réduit, nav directement dispo
|
||||
|
||||
header.classList.add('header--collapsed-already');
|
||||
introDone = true;
|
||||
if (headerNavContainer) {
|
||||
headerNavContainer.style.visibility = 'visible';
|
||||
}
|
||||
initNavPosition();
|
||||
}
|
||||
header.addEventListener('touchstart', handleEnter);
|
||||
header.addEventListener('touchend', handleLeave);
|
||||
|
||||
// init
|
||||
adjustHeaderHeight();
|
||||
});
|
||||
|
||||
///////////////end header sans animation logo////////////////
|
||||
@@ -53,10 +53,10 @@
|
||||
$(document).ready(function(){
|
||||
// ////////////////////// start calendrier home /////////////////////////////////
|
||||
|
||||
// Aller au 9e élément à l'initialisation
|
||||
$('.__timeline-content').on('init', function(event, slick){
|
||||
slick.slickGoTo(11); // Index 8 = 9e item
|
||||
});
|
||||
// // Aller au 9e élément à l'initialisation
|
||||
// $('.__timeline-content').on('init', function(event, slick){
|
||||
// slick.slickGoTo(11); // Index 8 = 9e item
|
||||
// });
|
||||
|
||||
$('.__timeline-content').slick({
|
||||
slidesToShow: 3,
|
||||
@@ -66,6 +66,7 @@
|
||||
centerMode: false,
|
||||
draggable: true,
|
||||
infinite: false,
|
||||
initialSlide: 13,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 810,
|
||||
@@ -76,6 +77,7 @@
|
||||
draggable: true,
|
||||
centerMode: false,
|
||||
infinite: false,
|
||||
initialSlide: 13,
|
||||
}
|
||||
}]
|
||||
});
|
||||
|
||||
@@ -38,7 +38,7 @@ $width-menu-slidedown : 550px;
|
||||
padding-top: $header-height;
|
||||
padding-bottom: 3rem;
|
||||
// box-sizing:border-box;
|
||||
min-height: calc(100vh - ($header-height + 3rem));
|
||||
min-height: calc(100vh - ($header-height + 6rem));
|
||||
@media(max-width: 810px){
|
||||
padding-top: 180px;
|
||||
}
|
||||
|
||||
@@ -451,20 +451,20 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> p:nth-of-type(1){
|
||||
color: #0833c2ff;
|
||||
font-size: 1rem;
|
||||
color: black;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 800
|
||||
}
|
||||
> p:nth-of-type(2){
|
||||
width: 60%;
|
||||
font-size: 0.8rem;
|
||||
align-self: center;
|
||||
padding-top: 1.5rem;
|
||||
@media(max-width: 810px){
|
||||
width: 80%;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
// > p:nth-of-type(2){
|
||||
// width: 60%;
|
||||
// font-size: 0.8rem;
|
||||
// align-self: center;
|
||||
// padding-top: 1.5rem;
|
||||
// @media(max-width: 810px){
|
||||
// width: 80%;
|
||||
// padding-top: 0;
|
||||
// }
|
||||
// }
|
||||
> p:nth-of-type(3){
|
||||
width: 90%;
|
||||
align-self: center;
|
||||
|
||||
@@ -335,6 +335,10 @@
|
||||
object-fit: cover;
|
||||
width: 220px;
|
||||
height: 145px;
|
||||
@media (max-width:1500px){
|
||||
width: 150px;
|
||||
height: auto;
|
||||
}
|
||||
@media (max-width:810px){
|
||||
width: 100%;
|
||||
height: auto;
|
||||
@@ -343,7 +347,7 @@
|
||||
}
|
||||
.image-field-caption{
|
||||
margin: 0;
|
||||
max-width: 200px;
|
||||
max-width: 220px;
|
||||
p{
|
||||
margin-top: 0;
|
||||
font-size: 0.5rem;
|
||||
@@ -351,7 +355,7 @@
|
||||
@media(max-width: 810px){
|
||||
font-size:0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -63,6 +63,7 @@
|
||||
font-family: "gilroy-light";
|
||||
color: $blue_QDD;
|
||||
font-size: 1.2rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,455 +1,332 @@
|
||||
header[role="banner"]{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
max-width: 100vw;
|
||||
|
||||
|
||||
/* ===========================
|
||||
HEADER GLOBAL
|
||||
=========================== */
|
||||
|
||||
header[role="banner"] {
|
||||
// background: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
// transition: none;
|
||||
// transition: height 0.5s ease-in-out, width 0.5s ease-in-out;
|
||||
// transition: height 2s ease-in-out, width 2s ease-in-out; /* Transition pour le changement de taille */
|
||||
// transition: height 1s, padding 1s; /* Add transition for smooth resizing */
|
||||
transition: height 1.4s ease-in-out,
|
||||
width 1.4s ease-in-out;
|
||||
|
||||
.language-switcher-language-url{
|
||||
text-transform: uppercase;
|
||||
color: white;
|
||||
|
||||
ul{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size:0.6rem;
|
||||
padding: 0;
|
||||
width: fit-content;
|
||||
|
||||
@media(max-width: 810px){
|
||||
font-size: 00.9rem;
|
||||
}
|
||||
// @media(max-width: 500px){
|
||||
// flex-direction: column;
|
||||
// // margin-bottom: 0;
|
||||
// margin: auto;
|
||||
// }
|
||||
li a {
|
||||
color: white;
|
||||
font-family: 'gilroy-light';
|
||||
|
||||
}
|
||||
li:nth-child(1){
|
||||
&::after{
|
||||
content: " / ";
|
||||
white-space: pre;
|
||||
@media(max-width: 660px){
|
||||
// content:none ;
|
||||
}
|
||||
}
|
||||
}
|
||||
.is-active{
|
||||
font-family: 'gilroy-bold';
|
||||
}
|
||||
}
|
||||
left: 0;
|
||||
z-index: 50;
|
||||
max-width: 100vw;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
transform-origin: bottom right;
|
||||
height: $header-height;
|
||||
width: 35%;
|
||||
transition: all 1.4s ease-in-out;
|
||||
// background-color: $white-header; // pour éviter la transparence
|
||||
|
||||
@media (max-width: 1090px) {
|
||||
height: $header-height-pad;
|
||||
}
|
||||
|
||||
@media(max-width: 810px){
|
||||
height: 100vh;
|
||||
header {
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
height: $header-height-big;
|
||||
}
|
||||
|
||||
.contextual-region{
|
||||
width: max-content;
|
||||
|
||||
@media (max-width: 810px) {
|
||||
width: 100%;
|
||||
height: 170px; // hauteur du bloc header-left
|
||||
flex-direction: row; // header_left + (nav positionnée en absolu)
|
||||
}
|
||||
|
||||
.header_left_container{
|
||||
flex: 0 0 100%;
|
||||
|
||||
.qdd-header {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
LANGUAGE SWITCHER
|
||||
=========================== */
|
||||
|
||||
.language-switcher-language-url {
|
||||
text-transform: uppercase;
|
||||
color: white;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
// transition: height 2s ease-in-out, width 2s ease-in-out; /* Transition pour le changement de taille */
|
||||
background-color: $white-header;
|
||||
// 🔥 On anime la largeur via flex-basis (et width au cas où)
|
||||
transition:
|
||||
flex-basis 0.9s ease-in-out,
|
||||
width 0.9s ease-in-out;
|
||||
font-size: 0.6rem;
|
||||
padding: 0;
|
||||
width: fit-content;
|
||||
|
||||
img{display: none;}
|
||||
@media(max-width: 660px){
|
||||
@media (max-width: 810px) {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
li a {
|
||||
color: white;
|
||||
font-family: "gilroy-light";
|
||||
}
|
||||
|
||||
li:nth-child(1) {
|
||||
&::after {
|
||||
content: " / ";
|
||||
white-space: pre;
|
||||
}
|
||||
}
|
||||
|
||||
.is-active {
|
||||
font-family: "gilroy-bold";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contextual-region {
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
COLONNE GAUCHE (LOGO)
|
||||
=========================== */
|
||||
|
||||
.header_left_container {
|
||||
flex: 0 0 70%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: $white-header;
|
||||
transition:
|
||||
flex-basis 0.9s ease-in-out,
|
||||
width 0.9s ease-in-out;
|
||||
|
||||
@media (max-width: 810px) {
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 660px) {
|
||||
height: inherit;
|
||||
}
|
||||
#block-quartiers-de-demain-logorepu-2{
|
||||
}
|
||||
|
||||
#block-quartiers-de-demain-logorepu-2 {
|
||||
display: none;
|
||||
@media(max-width: 891px){
|
||||
height: $header-height-pad;
|
||||
}
|
||||
|
||||
@media (max-width: 891px) {
|
||||
height: $header-height-pad;
|
||||
}
|
||||
#block-quartiers-de-demain-logoepau-2{
|
||||
}
|
||||
|
||||
#block-quartiers-de-demain-logoepau-2 {
|
||||
display: none;
|
||||
height: $header-height;
|
||||
@media(max-width: 891px){
|
||||
height: $header-height-pad;
|
||||
|
||||
@media (max-width: 891px) {
|
||||
height: $header-height-pad;
|
||||
}
|
||||
}
|
||||
|
||||
#block-quartiers-de-demain-logoquartiersdedemain {
|
||||
margin: auto;
|
||||
|
||||
}
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
margin: auto;
|
||||
height: calc($header-height - 4rem);
|
||||
padding: 2rem;
|
||||
transition: height 0.3s;
|
||||
@media (max-width: 1700px) {
|
||||
// height: calc($header-height - 6rem);
|
||||
}
|
||||
#block-quartiers-de-demain-logoquartiersdedemain{
|
||||
// padding-right: 5%;
|
||||
margin: auto;
|
||||
.field_field_logo{
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
@media(max-width: 1650px){
|
||||
width: 80%;
|
||||
}
|
||||
.qdd-header{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1600px) {
|
||||
height: calc($header-height - 3rem);
|
||||
}
|
||||
img{
|
||||
width: auto;
|
||||
margin: auto;
|
||||
height: calc($header-height - 1rem);
|
||||
padding: 2rem;
|
||||
transition: height 0.3s; /* Add transition for smooth resizing */
|
||||
@media(max-width: 891px){
|
||||
height: $header-height-pad;
|
||||
@media (max-width: 1300px) {
|
||||
height: calc($header-height-pad - 4rem);
|
||||
// height: $header-height-pad;
|
||||
}
|
||||
@media(max-width: 660px){
|
||||
height: $header-height-small;
|
||||
}
|
||||
@media(max-width: 450px){
|
||||
height: $header-height-ultrasmall;
|
||||
|
||||
@media (max-width: 660px) {
|
||||
// height: calc($header-height-small - 6rem);
|
||||
height: $header-height-small;
|
||||
}
|
||||
|
||||
@media (max-width: 450px) {
|
||||
// height: calc($header-height-ultrasmall - 3rem);
|
||||
// height: $header-height-ultrasmall;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header_right_container{
|
||||
display: none;
|
||||
flex: 0 0 0%;
|
||||
width: fit-content;
|
||||
min-width: fit-content;
|
||||
background: $blue_QDD;
|
||||
text-align: center;
|
||||
transform: translateX(0);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
z-index: -1 ;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
border-radius: 11px;
|
||||
padding: 0.5rem;
|
||||
margin: 1rem;
|
||||
padding-top: 0rem;
|
||||
padding-bottom: 0rem;
|
||||
|
||||
|
||||
@media(max-width: 660px){
|
||||
padding-right: 0;
|
||||
}
|
||||
.language-switcher-language-url{
|
||||
text-transform: uppercase;
|
||||
color: white;
|
||||
|
||||
ul{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size:0.6rem;
|
||||
padding: 0;
|
||||
|
||||
@media(max-width: 660px){
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@media(max-width: 500px){
|
||||
flex-direction: column;
|
||||
// margin-bottom: 0;
|
||||
margin: auto;
|
||||
}
|
||||
li a {
|
||||
color: white;
|
||||
font-family: 'gilroy-light';
|
||||
|
||||
}
|
||||
li:nth-child(1){
|
||||
&::after{
|
||||
content: " / ";
|
||||
white-space: pre;
|
||||
@media(max-width: 660px){
|
||||
content:none ;
|
||||
}
|
||||
}
|
||||
}
|
||||
.is-active{
|
||||
font-family: 'gilroy-bold';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
BLOC DROITE OPTIONNEL
|
||||
=========================== */
|
||||
|
||||
.header_right_container {
|
||||
display: none;
|
||||
flex: 0 0 0%;
|
||||
width: fit-content;
|
||||
min-width: fit-content;
|
||||
background: $blue_QDD;
|
||||
text-align: center;
|
||||
transform: translateX(0);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
z-index: 60;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
border-radius: 11px;
|
||||
padding: 0.5rem 0.5rem 0 0.5rem;
|
||||
margin: 1rem;
|
||||
|
||||
@media (max-width: 660px) {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.header_nav_container{
|
||||
flex: 0 0 0%;
|
||||
|
||||
/* ===========================
|
||||
NAVIGATION (COLONNE DROITE)
|
||||
=========================== */
|
||||
|
||||
.header_nav_container {
|
||||
flex: 0 0 30%;
|
||||
width: 100%;
|
||||
min-width: fit-content;
|
||||
background: $blue_QDD;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
z-index: -1;
|
||||
transform: translateX(0);
|
||||
transition:
|
||||
flex-basis 0.9s ease-in-out,
|
||||
width 0.9s ease-in-out,
|
||||
transform 0.3s ease-in-out;
|
||||
|
||||
@media (max-width: 810px) {
|
||||
/* 🔹 en mobile : nav en dessous du header, en absolu */
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 170px; // même valeur que la hauteur du header mobile
|
||||
width: 100%;
|
||||
min-width: fit-content;
|
||||
background: $blue_QDD;
|
||||
text-align: center;
|
||||
transform: translateX(0);
|
||||
// transition: transform 0.3s ease-in-out;
|
||||
transition:
|
||||
flex-basis 0.9s ease-in-out,
|
||||
width 0.9s ease-in-out,
|
||||
transform 0.3s ease-in-out; // pour tes slides
|
||||
z-index: -1 ;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@media(max-width: 1090px){
|
||||
// text-align:left;
|
||||
// height: fit-content;
|
||||
|
||||
height: 200px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* ---- Bloc menu principal ---- */
|
||||
#block-quartiers-de-demain-entete {
|
||||
margin: auto;
|
||||
|
||||
h2 {
|
||||
display: none;
|
||||
}
|
||||
@media(max-width: 810px){
|
||||
height: 200px;
|
||||
top: -30px;
|
||||
}
|
||||
@media(max-width: 500px){
|
||||
flex: 0 0 40%;
|
||||
}
|
||||
#block-quartiers-de-demain-entete{
|
||||
margin: auto;
|
||||
h2{
|
||||
display: none;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
margin: auto;
|
||||
|
||||
@media (max-width: 1025px) {
|
||||
top: 0;
|
||||
align-items: center;
|
||||
padding-top: 0.3rem;
|
||||
}
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
|
||||
.is-active {
|
||||
font-family: "gilroy-bold";
|
||||
}
|
||||
ul {
|
||||
|
||||
:hover {
|
||||
font-family: "gilroy-bold";
|
||||
}
|
||||
|
||||
@media (max-width: 1090px) {
|
||||
padding-top: 0.3rem;
|
||||
}
|
||||
|
||||
@media (max-width: 810px) {
|
||||
line-height: 1.3rem;
|
||||
}
|
||||
|
||||
a {
|
||||
text-transform: uppercase;
|
||||
color: white;
|
||||
font-size: 0.5rem;
|
||||
|
||||
@media (max-width: 1090px) {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
@media (max-width: 810px) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
margin: auto;
|
||||
// padding-top: 5%;
|
||||
@media(max-width: 1025px){
|
||||
top: 0;
|
||||
align-items: center;
|
||||
padding-top: 0.3rem;
|
||||
}
|
||||
@media(max-width: 1090px){
|
||||
}
|
||||
li{
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
.is-active{
|
||||
font-family: "gilroy-bold";
|
||||
}
|
||||
:hover{
|
||||
font-family: "gilroy-bold";
|
||||
}
|
||||
@media(max-width: 1090px){
|
||||
padding-top: 0.3rem;
|
||||
|
||||
}
|
||||
@media(max-width: 810px){
|
||||
|
||||
line-height: 1.3rem;
|
||||
}
|
||||
|
||||
a{
|
||||
text-transform: uppercase;
|
||||
color: white;
|
||||
font-size: 0.5rem;
|
||||
@media(max-width:1090px){
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
@media(max-width: 810px){
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
}
|
||||
// &:not(:last-of-type){
|
||||
// ::after{
|
||||
// content: "";
|
||||
// display: block;
|
||||
// border-bottom: solid white 1px;
|
||||
// padding-bottom: 0.3rem;
|
||||
// width: 60%; /* Réduit la largeur du soulignement à 50% */
|
||||
// // margin: 0 auto; /* Centre le soulignement sous l'élément */
|
||||
// }
|
||||
|
||||
// }
|
||||
}
|
||||
}
|
||||
@media(max-width: 660px){
|
||||
|
||||
align-items: center;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#block-quartiers-de-demain-selecteurdelangue{
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
@media(max-width: 810px){
|
||||
padding-bottom: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
.links{
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Sélecteur de langue en bas du menu ---- */
|
||||
#block-quartiers-de-demain-selecteurdelangue {
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
|
||||
@media (max-width: 810px) {
|
||||
padding-bottom: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
.links {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.header_nav_container.hidden {
|
||||
transform: translateX(30%);
|
||||
}
|
||||
|
||||
.header_nav_container.visible {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.header:hover + .header_nav_container {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
.shrink{
|
||||
height: 260px ;
|
||||
@media(max-width: 810px){
|
||||
height: 170px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Taille définitive du header après l'animation */
|
||||
header[role="banner"].header--collapsed {
|
||||
height: $header-height; /* Ou la hauteur que vous souhaitez pour votre header */
|
||||
width: 35%;
|
||||
transform-origin: bottom right;
|
||||
// transition: all 1s ease-in-out;
|
||||
// transition: all 1.4s ease-in-out;
|
||||
transition: all 1.4s ease-in-out;
|
||||
@media(max-width: 1090px) {
|
||||
height: $header-height-pad;
|
||||
|
||||
/* ===========================
|
||||
ÉTATS D’AFFICHAGE DU MENU
|
||||
(pilotés en JS avec .nav-hidden)
|
||||
=========================== */
|
||||
|
||||
/* État par défaut : visible */
|
||||
|
||||
.header_nav_container {
|
||||
transform: translateX(0);
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
height: $header-height-big;
|
||||
|
||||
/* Desktop : caché → slide vers la gauche */
|
||||
.header_nav_container.nav-hidden {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
.qdd-header{
|
||||
opacity: 1 !important;
|
||||
|
||||
/* Mobile : on utilise translateY pour cacher/montrer */
|
||||
@media (max-width: 810px) {
|
||||
.header_nav_container {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.header_nav_container.nav-hidden {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
@media(max-width: 810px){
|
||||
width: 100%;
|
||||
height: 170px;
|
||||
}
|
||||
.header_left_container{
|
||||
// flex: 1 0 65%;
|
||||
flex-basis: 65%;
|
||||
|
||||
transform-origin: bottom right;
|
||||
@media(max-width: 810px){
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
}
|
||||
.header_nav_container{
|
||||
// flex: 0 0 30%;
|
||||
flex-basis: 30%;
|
||||
transform-origin: bottom right;
|
||||
min-width: fit-content;
|
||||
@media(max-width: 810px){
|
||||
flex: 1 0 100%;
|
||||
position: relative;
|
||||
left: -100%;
|
||||
// top: -45px; /* a remettre et faire varier si ajoute éléments dans menu */
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
header[role="banner"].header--collapsed-already{
|
||||
height: $header-height; /* Ou la hauteur que vous souhaitez pour votre header */
|
||||
width: 35%;
|
||||
transform-origin: bottom right;
|
||||
transition: all 0s ease-in-out;
|
||||
.qdd-header{
|
||||
opacity: 1 !important;
|
||||
}
|
||||
@media(max-width: 810px){
|
||||
width: 100%;
|
||||
// height: 170px;
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
height: $header-height-big;
|
||||
}
|
||||
.header_left_container{
|
||||
// flex: 1 0 65%;
|
||||
flex-basis: 65%;
|
||||
transform-origin: bottom right;
|
||||
@media(max-width: 810px){
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
}
|
||||
.header_nav_container{
|
||||
// flex: 0 0 30%;
|
||||
flex-basis: 30%;
|
||||
min-width: fit-content;
|
||||
transform-origin: bottom right;
|
||||
@media(max-width: 810px){
|
||||
flex: 1 0 100%;
|
||||
position: relative;
|
||||
left: -100%;
|
||||
// top: -75px;
|
||||
}
|
||||
@media(max-width: 550px){
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Empêcher le scroll pendant l'intro */
|
||||
body.logo-intro-animating {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Header plein écran au tout début */
|
||||
body.logo-intro-active header[role="banner"] {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* État normal du SVG (dans le header) */
|
||||
#block-quartiers-de-demain-logoquartiersdedemain svg {
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
transform: none; // donc scale(1)
|
||||
transform-origin: center center;
|
||||
transition:
|
||||
transform 1.4s ease-in-out,
|
||||
top 1.4s ease-in-out,
|
||||
left 1.4s ease-in-out;
|
||||
}
|
||||
|
||||
/* État intro : logo centré, scale(2) */
|
||||
body.logo-intro-active #block-quartiers-de-demain-logoquartiersdedemain svg {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) scale(2);
|
||||
z-index: 9999;
|
||||
}
|
||||
/* Pendant l'intro : même si le header est "collapsed",
|
||||
on garde TOUT l'espace pour le bloc gauche,
|
||||
la nav ne prend AUCUNE place (0%) */
|
||||
|
||||
body.logo-intro-animating header[role="banner"].header--collapsed .header_left_container {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
body.logo-intro-animating header[role="banner"].header--collapsed .header_nav_container {
|
||||
flex: 0 0 0%;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
/* ===========================
|
||||
HEADER "SHRINK" AU SCROLL
|
||||
=========================== */
|
||||
|
||||
.shrink {
|
||||
height: 260px;
|
||||
background: none;
|
||||
|
||||
@media (max-width: 810px) {
|
||||
height: 170px; // la hauteur du bloc header-left reste la même en mobile
|
||||
}
|
||||
}
|
||||
|
||||
@@ -432,9 +432,9 @@
|
||||
|
||||
{% for item in items %}
|
||||
<div{{ item.attributes }}>
|
||||
<a class='logo-qdd' href="{{ ancre_href1 }}">
|
||||
{# <a class='logo-qdd' href="{{ ancre_href1 }}">
|
||||
{{ svg_icon|raw }}
|
||||
</a>
|
||||
</a> #}
|
||||
|
||||
<a clas='other-logo' href="{{ ancre_href }}">
|
||||
{{ item.content }}
|
||||
|
||||
Reference in New Issue
Block a user