:root{--page-title-display:none;}/* Start custom CSS for wp-widget-custom_html, class: .elementor-element-7b2a8a9 */:root {
  --ease: cubic-bezier(.2, .9, .2, 1);
  --easeOut: cubic-bezier(.16, 1, .3, 1);
  --brand: #388024;
  --text: rgba(255, 255, 255, .92);
  --shadow-2: 0 16px 44px rgba(0, 0, 0, .28);
}

/* --- BASE --- */
html, body {
  width: 100%; height: 100%; margin: 0; padding: 0;
  overflow: hidden; background: #07101f;
  color: var(--text); font-family: system-ui, -apple-system, sans-serif;
  filter: brightness(1.1);
}

.egpnIce--full {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
}

/* FOND */
.egpnIce__bg {
  position: fixed; inset: 0;
  background-image: url("https://www.egpn.fr/salon-environnement/montpellier/wp-content/uploads/sites/2/2025/11/pic-2-e1769263030344.jpg");
  background-size: cover; background-position: center;
  filter: blur(18px) saturate(1.1); z-index: 0; transform: scale(1);
   
}

.egpnIce__veil {
  position: fixed; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.7));
  z-index: 1;
}

/* --- HEADER FIXE --- */
.egpnIce__top {
  position: fixed; top: 0; left: 0; width: 100%;
  z-index: 100; display: flex; flex-direction: column; align-items: center;
  padding: 60px 22px 20px;
  background: linear-gradient(to bottom, rgba(7,16,31,0.9), transparent);
  pointer-events: none;
}

.topbar, .egpnIce__menu { pointer-events: auto; }

.topbar{
  position:fixed;
  top:18px;
  left:18px;
  pointer-events:auto;
  padding: 50px 0px 40px ;
  z-index:50;
}
.brand{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:15px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  backdrop-filter:blur(10px);
}

.brand--link{
  position:absolute;
  display:inline-flex;
  width:max-content;
  align-items:center;
  gap:15px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  backdrop-filter:blur(10px);
  text-decoration:none;
  cursor:pointer;
  pointer-events:auto;
  color:#FFFFFF
}

.brand--link:focus-visible{
  outline:2px solid rgba(255,255,255,.65);
  outline-offset:3px;
}

.brand--link:visited,
.brand--link:hover,
.brand--link:active,
.brand--link:focus{
  color:#388024;
}

.brand--link .brand__name{
  color:inherit;
}

.brand--link:hover{
  background:rgba(56,128,36,.18);
  border-color:rgba(56,128,36,.45);
}

.brand--link *{
  pointer-events:none;
}

.brand__dot {
  width:45px;
  height:45px;
  border-radius:50px;
  background-image:url("https://www.egpn.fr/salon-environnement/montpellier/wp-content/uploads/sites/2/2025/11/cropped-cropped-Logo-2.png");
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  border:1px solid rgba(255,255,255,.8);
  box-shadow:var(--shadow2);
}
.brand__name{
  font-weight:740;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:12px;
}
.egpnIce__menu{
  display:flex;
  align-items:center;
  gap:20px;
  padding:17px 17px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
}

.egpnIce__link{
  text-decoration:none;
  color:rgba(255,255,255,.80);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:8px 10px;
  border-radius:999px;
}
.egpnIce__link:hover{
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.92);
}

.egpnIce__link:focus-visible,
.egpnIce__iconBtn:focus-visible,
.egpnIce__item:focus-visible,
.egpnIce__panelBtn:focus-visible{
  outline:2px solid rgba(255,255,255,.65);
  outline-offset:3px;
}
/* --- CONTENU --- */
.egpnIce__layout {
  position: relative; z-index: 10; flex: 1;
  overflow-y: auto; overflow-x: hidden;
  padding: 180px 20px 150px; /* Espace pour Header/Footer */
  -webkit-overflow-scrolling: touch;
}

.glass__panel {
  max-width: 1120px; 
  margin: 0 auto; 
  border-radius: 32px; 
  padding: 40px;
  background: linear-gradient(165deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.25) 100%); 
  border: 1px solid rgba(255,255,255,0.18); 
  backdrop-filter: blur(25px); 
  box-shadow: 0 30px 60px rgba(0,0,0,0.5); 
}

.editionsHero { text-align: center; margin-bottom: 40px; }
.title { 
  font-size: clamp(2rem, 5vw, 3.5rem); 
  font-weight: 900; 
  margin: 10px 0; 
  text-shadow: 0 4px 15px rgba(0,0,0,0.8); /* Ombre de texte pour le contraste */
  color: #FFFFFF;
}
.title span { color: var(--brand); }
.kicker {
  display: inline-block;
  font-size: 16px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 30px;
  color: #fff;
  margin-bottom: 12px;
}

.subtitle {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  border-left: 2px solid #388024; /* Reprend ton vert */
  padding-left: 15px;
  color: #fff;
}
.timeline { position: relative; padding: 20px 0; }
.timeline::before {
  content: ""; 
  position: absolute; 
  left: 50%; 
  top: 0; 
  bottom: 0;
  width: 2px; /* Un peu plus épaisse */
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.3), transparent);
}

.titem { display: grid; grid-template-columns: 1fr 80px 1fr; margin-bottom: 40px; }
.titem__node {
  grid-column: 2; justify-self: center; width: 14px; height: 14px;
  background: var(--brand); border-radius: 50%; margin-top: 20px;
  box-shadow: 0 0 15px var(--brand);
}

.tcard {
    position: relative;
  overflow: hidden;
 
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
  
 
  border: 1px solid rgba(255, 255, 255, 0.25); 
  
  padding: 24px; 
  border-radius: 28px; 
  transition: all 0.3s var(--ease);
  
  
  backdrop-filter: blur(20px); 
  -webkit-backdrop-filter: blur(20px);

  
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1); 
}

.tcard::after {
  content: "";
  position: absolute;
  top: -100%;
  left: -100%;
  width: 50%;
  height: 300%;
  background: linear-gradient(
    to right, 
    transparent, 
    rgba(255, 255, 255, 0.1), 
    transparent
  );
  transform: rotate(45deg);
  transition: none;
}

.tcard:hover::after {
  top: 100%;
  left: 100%;
  transition: all 0.8s ease-in-out; /* Le reflet traverse la carte */
}

.tcard__top {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Pousse l'année à gauche et le tag à droite */
  gap: 12px; 
  margin-bottom: 2px;
}
.tcard__title {
  color: #ffffff;
  font-weight: 800;
  margin: 0 0 8px;
  /* Petite ombre portée sur le texte pour garantir la lecture sur les zones claires */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.tcard__text {
  color: rgba(255, 255, 255, 0.95); /* On passe de 0.82 à 0.95 pour la clarté */
  line-height: 1.6;
  font-weight: 400;
}
.tcard__year {
  color: #ffffff;
  font-weight: 700;
  opacity: 1; /* Suppression de l'opacité pour plus de force */
}
.tcard__tag {
  display: inline-flex;
  align-items: center;
  
  /* Typographie */
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #ffffff;
  
  /* Structure & Design */
  padding: 4px 10px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.12); /* Fond léger */
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  
  /* Empêche le badge de rétrécir si le titre est long */
  white-space: nowrap; 
  flex-shrink: 0;
}

/* Version Accent (pour 2026) */
.tcard__tag--accent {
  background: rgba(56, 128, 36, 0.2);
  border-color: rgba(56, 128, 36, 0.4);
  color: #a3e635; /* Un vert acide qui claque bien sur le sombre */
}

.titem--highlight .tcard {
  background: linear-gradient(135deg, rgba(56, 128, 36, 0.25) 0%, rgba(255, 255, 255, 0.1) 100%);
  border-color: rgba(56, 128, 36, 0.5);
  /* Lueur externe pour marquer l'importance de l'édition actuelle */
  box-shadow: 0 0 40px rgba(56, 128, 36, 0.25), 0 12px 40px rgba(0, 0, 0, 0.3);
}
.titem--left .tcard { grid-column: 1; text-align: right; }
.titem--right .tcard { grid-column: 3; }

/* --- FOOTER FIXE --- */
.pagefooter {
  position: relative !important; /* Il suit le flux du scroll */
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 20px !important;
  
  /* On ajoute de l'espace pour qu'il respire à la fin */
  padding: 60px 20px 80px 20px !important; 
  width: 100% !important;
  background: transparent !important; /* Plus besoin de dégradé de masquage */
  pointer-events: auto !important;
}

/* On s'assure que le conteneur de scroll ne coupe pas le footer */
.egpnIce__layout {
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: 0 !important; /* On retire la marge de sécurité du mode fixed */
}

/* =========================================
   3. FOOTER
   ========================================= */
.pagefooter {
 position: Fixed; 
  bottom: 0;          
  left: 0; 
  right: 0;          
  z-index: 6;
  width: min(1700px, 100%); max-height: var(--footCap);
  justify-self: center; align-self: end;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-bottom: calc(45px + var(--safeBottom, 0px));
  transform: translateZ(8px);
   opacity: 50%;
}
 .pagefooter::after {
  content: "Réalisé avec ❤️ par Jules Cadiou";
  font-size: 8px;
  opacity: 0;
  transition: opacity 5s ease; /* Il faut rester 3 secondes dessus */
}

.pagefooter:hover::after {
  opacity: 0.4;
}

.gchip {
  padding: 10px 20px; border-radius: 999px; font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .24), rgba(0, 0, 0, .10));
  border: 1px solid rgba(255, 255, 255, .14); color: #fff;
  box-shadow: 0 18px 66px rgba(0, 0, 0, .56), inset 0 1px 0 rgba(255, 255, 255, .12);
  transform: translateZ(0);
  transition: transform 260ms var(--easeOut), background 260ms var(--easeOut), border-color 260ms var(--easeOut), box-shadow 260ms var(--easeOut), filter 260ms var(--easeOut);
}

@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .gchip {
    -webkit-backdrop-filter: blur(12px) saturate(1.10);
    backdrop-filter: blur(12px) saturate(1.10);
  }
}

.gchip:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(56, 128, 36, .24), rgba(0, 0, 0, .10));
  border-color: rgba(56, 128, 36, .55);
  box-shadow: 0 28px 100px rgba(0, 0, 0, .68), 0 0 0 1px rgba(56, 128, 36, .18), inset 0 1px 0 rgba(255, 255, 255, .14);
  filter: saturate(1.02); color: #fff;
}
.gchip:focus-visible { box-shadow: var(--ring); }


/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
  .egpnIce__top { padding-top: 50px; }
  .egpnIce__layout { padding-top: 220px; }
  .titem { grid-template-columns: 40px 1fr; }
  .titem__node { grid-column: 1; }
  .titem--left .tcard, .titem--right .tcard { grid-column: 2; text-align: left; }
  .timeline::before { left: 20px; }
  .pagefooter { flex-direction: column; align-items: center; bottom: 20px; }
  .gchip { width: 90%; text-align: center; }
}
/* =========================================
   VERSION MOBILE (SMARTPHONES < 768px)
   ========================================= */

@media screen and (max-width: 767px) {

  /* 1. ARCHITECTURE & SCROLL */
  html, body {
    filter: brightness(1.2); /* Réduction pour éviter la surexposition sur petit écran */
  }

  /* Ajustement de la zone de scroll pour libérer de l'espace */
  .egpnIce__layout {
    padding: 160px 12px 140px; /* Moins de marges latérales */
  }

  /* 2. HEADER & NAVIGATION */
  .egpnIce__top {
   position: sticky !important;
    padding: 50px 15px 10px 15px !important; /* Marge haute pour l'encoche téléphone */
    background: linear-gradient(to bottom, 
    rgba(7, 16, 31, 0.9) 0%, 
    rgba(7, 16, 31, 0.4) 70%, 
    transparent 100%); 
  backdrop-filter: blur(2px); /* Flou léger pour tout le bandeau */
  -webkit-backdrop-filter: blur(8px);
    display: flex !important;
    flex-direction: column !important;
    background: linear-gradient(to bottom, rgba(7,16,31,0.95), transparent) !important;
    gap: 15px !important;
     z-index: 20;
  }

  .topbar {
    position: relative !important;
    top: 0 !important; left: 0 !important;
    padding: 0 0 10px 0 !important;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .brand--link {
    position: relative !important;
    transform: scale(0.85); /* Logo légèrement plus petit */
  }

  .egpnIce__menu {
    gap: 8px !important;
    padding: 8px 12px !important;
    flex-wrap: wrap; /* Permet au menu de passer sur 2 lignes si nécessaire */
    justify-content: center;
  }

  .egpnIce__link {
    font-size: 10px !important;
    padding: 6px 10px !important;
  }

  /* 3. LAYOUT & PANEL */
  .glass__panel {
    padding: 25px 15px !important; /* On maximise l'espace pour le texte */
    border-radius: 24px !important;
  }

  .title {
    font-size: 1.8rem !important; /* Titre plus compact */
    line-height: 1.1;
  }

  .subtitle {
    font-size: 0.9rem !important;
    padding: 0 10px;
  }

  /* 4. TRANSFORMER LA TIMELINE (MODE COLONNE) */
  .timeline::before {
    left: 20px !important; /* Aligne la ligne à gauche */
    transform: none;
  }

  .titem {
    grid-template-columns: 40px 1fr !important; /* Icône à gauche, texte à droite */
    gap: 0 !important;
    margin-bottom: 25px !important;
  }

  .titem__node {
    grid-column: 1 !important;
    justify-self: center;
    margin-top: 25px !important; /* Aligne le point avec le haut de la carte */
  }

  /* Toutes les cartes s'alignent à gauche */
  .titem--left .tcard, 
  .titem--right .tcard {
    grid-column: 2 !important;
    justify-self: stretch !important;
    text-align: left !important;
    margin-right: 5px;
    padding: 18px !important; /* Padding interne réduit */
  }

  /* Correction visuelle des flèches/indicateurs si présents */
  .tcard::after {
    left: -6px !important;
    right: auto !important;
  }

  /* 5. TYPOGRAPHIE DES CARTES */
  .tcard__title {
    font-size: 16px !important;
  }

  .tcard__text {
    font-size: 13px !important;
    line-height: 1.5;
  }

  /* 6. FOOTER (Puces empilées) */
/* --- FOOTER TOTALEMENT FIXÉ --- */
.pagefooter {
    flex-direction: column !important; /* Empilés pour une lecture facile à la fin */
    gap: 12px !important;
    padding: 40px 15px 60px 15px !important;
  }

  .gchip {
    width: 100% !important;
    max-width: 280px;
    text-align: center;
  }
}/* End custom CSS */