/* =========================================
1. STYLE BUREAU (PC)
========================================= */
/* --- SIDEBAR GAUCHE (RÉFÉRENTIEL) --- */
.adx-sidebar-flex {
position: relative !important;
height: 100%;
min-height: 700px;
background: #ffffff;
/* La ligne verticale noire */
border-right: 1px solid #000000;
/* 0 padding : les éléments absolus gèrent l'espace */
padding: 0 !important;
/* On laisse visible pour que la ligne aille au bout */
overflow: visible !important;
padding-bottom: 2px !important;
}
/* --- LOGO PC (HAUT ABSOLU) --- */
.fusion-imageframe.adx-logo-force-size {
position: absolute !important;
top: 0 !important;
right: 0 !important;
margin-top: 0 !important;
margin-right: 25px !important;
padding: 0 !important;
max-width: 200px !important;
width: 200px !important;
z-index: 20;
}
.adx-logo-force-size img {
width: 100% !important;
height: auto !important;
display: block !important;
}
/* --- TEXTES BAS (BAS ABSOLU) --- */
.adx-vertical-bottom {
position: absolute !important;
right: 0 !important;
/* Collé au bas */
bottom: 0 !important;
padding-right: 25px !important;
padding-bottom: 0 !important;
/* Hauteur auto (le JS va empêcher le débordement) */
height: auto;
display: flex;
flex-direction: row;
align-items: baseline !important; /* Alignement parfait des textes */
justify-content: flex-end;
gap: 15px;
z-index: 10;
pointer-events: none;
}
/* Nettoyage des marges par défaut */
.adx-vertical-bottom .fusion-text,
.adx-vertical-bottom p {
margin: 0 !important;
padding: 0 !important;
border: none !important;
line-height: 1 !important;
}
/* MOT GRIS (DYNAMIQUE) */
.adx-meta-vertical-text {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-family: 'Oswald', sans-serif;
/* Taille de départ (sera réduite par JS) */
font-size: 160px;
font-weight: 700;
line-height: 0.9 !important;
color: #e0e0e0;
white-space: nowrap;
cursor: default;
transition: font-size 0.2s ease-out;
}
/* SLOGAN (DYNAMIQUE) */
.adx-desc-vertical-text {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-family: 'Montserrat', sans-serif;
/* Taille de départ (sera réduite par JS) */
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #2e1f45;
line-height: 1.4 !important;
white-space: normal;
text-align: left;
margin-bottom: 0 !important;
transition: font-size 0.2s ease-out;
}
/* --- DROITE (Architecture) --- */
.adx-col-right-wrapper {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
position: relative;
}
.adx-hero-area {
position: relative;
width: 100%;
min-height: 700px;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
}
.adx-bg-layer {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 0;
}
.adx-bg-layer .img-div-cover, .adx-bg-layer span, .adx-bg-layer img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.adx-purple-box {
position: relative;
z-index: 1;
background-color: rgba(94, 70, 130, 0.9);
padding: 40px;
border-left: 6px solid #FFC107;
width: 100%;
box-sizing: border-box;
}
/* STYLE DATE */
.adx-date-subtitle {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 1.2;
letter-spacing: 4px;
text-transform: uppercase;
color: #a89cc1;
margin-bottom: 5px;
min-height: 22px;
}
.adx-date-source-hidden { display: none !important; }
/* --- ZONE SESSIONS (Préservée) --- */
.adx-sessions-area {
background-color: #ffffff;
padding: 0 40px 40px 40px;
width: 100%;
box-sizing: border-box;
display: block;
}
.adx-separator {
width: 100%;
height: 1px;
background-color: #000000;
margin: 20px 0 30px 0;
display: block;
opacity: 1;
}
/* =========================================
2. STYLE MOBILE (< 1024px)
========================================= */
@media only screen and (max-width: 1024px) {
/* Masquer éléments PC complexes */
.adx-logo-force-size { display: none !important; }
.adx-meta-vertical-text { display: none !important; }
.adx-sessions-area { display: none !important; } /* Masquer sessions sur mobile */
/* Reset Sidebar en flux normal */
.adx-sidebar-flex {
min-height: auto;
padding: 15px !important;
border-right: none;
border-bottom: 1px solid #f0f0f0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
overflow: visible !important;
}
/* Reset Textes Bas */
.adx-vertical-bottom {
position: relative !important;
bottom: auto !important;
right: auto !important;
max-height: none;
padding: 0 !important;
margin: 0 !important;
flex-direction: column;
align-items: center;
justify-content: center;
align-items: center !important;
}
.adx-desc-vertical-text {
writing-mode: horizontal-tb;
transform: rotate(0deg);
text-align: center;
white-space: normal;
width: 100%;
margin: 0 !important;
font-size: 12px;
color: #666;
max-width: 100%;
}
.adx-hero-area {
min-height: 350px;
overflow: visible !important;
}
/* FIX MOBILE: Image Fond Full Width */
.adx-bg-layer {
width: 100vw !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
height: 100% !important;
}
/* FIX MOBILE: Boite Violette Full Width */
.adx-purple-box {
width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding: 25px 20px !important;
border-left: 6px solid #FFC107 !important;
box-sizing: border-box !important;
}
}
window.addEventListener('load', function() {
// --- 1. GESTION DE LA DATE ---
setTimeout(function(){
var sourceElement = document.querySelector('.adx-date-source-hidden');
var targetDiv = document.getElementById("adx-date-target");
if(sourceElement && targetDiv) {
var rawText = sourceElement.innerText || sourceElement.textContent;
var match = rawText.match(/(\d{4})-(\d{2})-(\d{2})/);
if(match) {
var year = parseInt(match[1]);
var month = parseInt(match[2]) - 1;
var day = parseInt(match[3]);
var dateObj = new Date(year, month, day);
var options = { day: 'numeric', month: 'long', year: 'numeric' };
var finalString = dateObj.toLocaleDateString('fr-FR', options);
targetDiv.innerText = "SESSION DU " + finalString.toUpperCase();
} else {
targetDiv.innerText = "FORMATION";
}
}
// Lance le calcul de taille une fois les données chargées
adjustVerticalTextSize();
}, 500);
// --- 2. GESTION TAILLE TEXTE DYNAMIQUE ---
function adjustVerticalTextSize() {
if(window.innerWidth maxTextHeight && currentSize > 50) {
currentSize -= 5;
bigText.style.fontSize = currentSize + "px";
}
}
// B. AJUSTEMENT SLOGAN
if(sloganText) {
var currentSloganSize = 13;
sloganText.style.fontSize = currentSloganSize + "px";
while (sloganText.getBoundingClientRect().height > maxTextHeight && currentSloganSize > 9) {
currentSloganSize -= 0.5;
sloganText.style.fontSize = currentSloganSize + "px";
}
}
}
// Recalcul au redimensionnement
window.addEventListener('resize', function() {
adjustVerticalTextSize();
});
});
