/* Reset et base */
*, *::after, *::before {
  box-sizing: border-box;
}
html, body {
  font-family: "obviously", sans-serif;
  font-weight: 400;
  overflow: auto;
  color: #fff;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



/* =============================================================================
LOADER
========================================================================== */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fffd78; /* couleur de fond du loader */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}


/* Image responsive */
#loader img {
  max-width: 90%;   /* ne dépasse pas 90% de la largeur de l’écran */
  max-height: 80%;  /* ne dépasse pas 80% de la hauteur de l’écran */
  width: auto;
  height: auto;
}


#content {
  display: none; /* caché au départ */
}

/* =============================================================================
MAIN
========================================================================== */

main {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translate3d(0, 100px, 0);
  animation: fadeIn 2s ease-out forwards;
}

/* Animations */
@keyframes fadeIn {
  0%, 40% {
    opacity: 0;
  }
  85%, 100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}


.hidden {
  position: absolute;
  overflow: hidden;
  width: 0;
  height: 0;
  pointer-events: none;
}





/* =============================================================================
HEADER
========================================================================== */
header {
  z-index: 500;
}
.header {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: start;
  padding-bottom: 0px;
  height: 70px; /* Fixe une hauteur  */
}
.header-logo {
  max-height: 130px;
}
.header-logo img {
  max-width: 100%; /* Limite la largeur de l'image à celle de son conteneur */
  height: 130px; /* Garde les proportions tout en s'adaptant à la largeur */
  max-height: 130px; /* Assure une hauteur maximale */
  object-fit: contain; /* Évite la déformation de l'image */
  padding: 10px;
  transition: all 0.3s ease;
  background: #fff;
}
.header-gauche {
  display: flex;
  flex-wrap: nowrap;
}
.header-droite {
  display: flex;
  flex-wrap: nowrap;
  position: relative;
  background: none;
  align-items: center;
  height: 70px;
}
.onglet-droite {
  display: flex;
  flex-wrap: nowrap;
  padding: 0 20px;
  position: relative;
  background: none;
}

/* =============================================================================
HEADER SCROLL
========================================================================== */
/* Position par défaut */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 500;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Taille de l'image réduite lors du scroll */
.header.header-secondaire, .header.header-secondaire .header-logo, .header.header-secondaire .header-logo img, .header.hidden .header-logo, .header.hidden .header-logo img {
  height: 70px;
  max-height: 70px;
}
/* Header masqué lors du scroll vers le bas */
.header.hidden {
  transform: translateY(-100%);
  opacity: 0;
}
/* Header visible lors du scroll vers le haut */
.header.scrolled-up {
  transform: translateY(0);
  opacity: 1;
}
/* =============================================================================
MENU BOUTON
========================================================================== */
.menu-btn {
  z-index: 10000000000000000;
  cursor: pointer;
  border: 0 none;
  display: block;
  height: 70px;
  width: 50px;
  background: none;
}
.menu-btn::before {
  content: "";
  position: absolute;
  top: -100%; /* Cache le fond en haut au départ */
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white; /* Couleur du fond animé */
  z-index: -1; /* Derrière le bouton */
  transition: top 0.4s ease-in-out; /* Transition fluide */
}
.menu-btn:hover::before, .menu-btn.clicked::before {
  top: 0; /* Fond visible lors du survol ou du clic */
}
.menu-btn.active::before {
  top: 0; /* Assurez-vous que le fond reste visible */
  background-color: white; /* Gardez le fond blanc */
}
.croix {
  fill: #fff;
  stroke: #000;
  stroke-miterlimit: 10;
}
.croix03 {
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes opacity {
  0% {
    opacity: 1;
    ;
  }
  100% {
    opacity: 0;
    ;
  }
}
.croix01, .croix02 {
  transform-box: fill-box;
  transform-origin: center;
}
/* Classe activée lors du clic */
.active .croix01 {
  animation: rotate01 0.5s forwards;
}
.active .croix03 {
  animation: opacity 0s forwards;
}
.active .croix02 {
  animation: rotate02 0.5s forwards;
}
.inactive .croix01 {
  animation: rotate01Reverse 0.5s forwards;
}
.inactive .croix02 {
  animation: rotate02Reverse 0.5s forwards;
}
.inactive .croix03 {
  animation: opacityReverse 0.5s forwards;
}
@keyframes rotate01 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(45deg) translate(3.5px, 3.5px);
  }
}
@keyframes rotate02 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-45deg) translate(3.5px, -3.5px);
  }
}
@keyframes rotate01Reverse {
  0% {
    transform: rotate(45deg) translate(3.5px, 3.5px);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes rotate02Reverse {
  0% {
    transform: rotate(-45deg) translate(3.5px, -3.5px);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes opacityReverse {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* =============================================================================
MENU
========================================================================== */
.overlay {
  display: none;
  position: absolute;
  z-index: 50;
  background-color: #fff;
  font-family: "obviously", sans-serif;

  top: 70px;
  right: 0;
}
.overlay.active {
  display: block;
}
.menu-list {
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: end;
  padding: 50px;
  font-weight: 700;
}

ul.menu-list-inside {
	padding: 0;
	margin: 0;
}

.menu-list li {}
.menu-list-inside li {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 2px;
  transition: transform 0.3s ease; /* Transition pour le mouvement */
  cursor: pointer;
  font-size: 15px;
  line-height: 20px;
}
.menu-list-inside li:hover {
  transform: translateX(10px); /* Déplace l'élément légèrement vers la droite */
}
.menu-list-inside a {
  color: #000;
  text-align: left;
  text-decoration: none;
}
.menu-list, .menu-list li {
  list-style: none;
}
.menu-list-inside a:hover  {
  color: #000;
  text-decoration: none;
}


.submenu {
  display: none; /* caché par défaut */
  margin: 5px 0 5px 20px;
  padding-left: 10px;
  border-left: 1px solid #000;
}

.submenu li {
  padding: 5px 0;
  font-weight: normal;
  font-size: 12px;
  line-height: 15px;
}

.menu-list-inside li.open > .submenu {
  display: block; /* affiché quand .open est activé par JS */
}


/* =============================================================================
CONTENT
========================================================================== */
/* En-tête */
.content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.content-inside {
  margin: 0 30px;
}









.amu-logo {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 20px;
  justify-content: center;
  margin-top: 50px;
}
.amu-logo svg {
  height: 60px;
}
.bulletin-couleur {
  fill: #FFFFFF;
}
.croix {
  fill: #660099;
}
.urne {
  fill: #660099;
}
.bulletin {
  animation: bulletin;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
@keyframes bulletin {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(150px);
  }
  100% {
    transform: translateY(0px);
  }
}



.amu-menu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 30px;
  justify-content: center;
  padding-top: 50px;
	max-width: 800px;
  margin: 0 auto; /* <-- centre le conteneur dans sa page */
	
}
.amu-menu a {
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.5s ease;
  text-align: center;
	
}







.amu-menu a:hover {
color: #fff;
transition: all 0.5s ease;	
}

.amu-menu a.current {
  color: #ffffff;
}
body.theme-vert .amu-menu a.current, 
body.theme-orange .amu-menu a.current, 
body.theme-violet .amu-menu a.current
{
  color: #ffffff;
}



.gate {
  position: relative;
  cursor: pointer;
}

.tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  transform-origin: bottom center;
  color: #fff;
  padding: 10px;
  max-width: 300px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-transform: uppercase;
}

.gate:hover .tooltip {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.line {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  transform: translateX(-100%);
  opacity: 0;
}

/* Ligne 1 : de gauche à droite */
.gate:hover .line1 {
  animation: slideInLeft 0.3s forwards 0.3s; /* delay pour attendre la fin du scale */
}

/* Ligne 2 : de droite à gauche */
.gate:hover .line2 {
  animation: slideInRight 0.3s forwards 0.45s; /* petit delay pour la suite */
}

@keyframes slideInLeft {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}



/* Responsive : centrer sur tout l’écran si petit écran */
@media (max-width: 768px) {
  .gate::after {
    position: fixed;
    left: 35%;
    transform: translateX(-50%);
    max-width: 100%;
  }
}


.menu-list-inside a:hover.gate::after {
	color: #fff;
}


/* =============================================================================
ANIMATION HOME
========================================================================== */

/* Lignes décoratives */
.decolines {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000000000000000;
}
.decolines--fixed {
  position: fixed;
  width: 100vw;
  height: 100vh;
}
.decoline {
  position: absolute;
}


/* =============================================================================
CARROUSEL
========================================================================== */


/* Carrousel Swiper */
.swiper {
  position: relative;
  display: block;
  width: 100%;
	padding-top: 70px;
}

.swiper-wrapper {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  width: 100%;
  height: 100%;
}







/* =============================================================================
ARTCILE
========================================================================== */
.separateur {
	padding: 50px 0;
}


/* Temps de lecture */
.article-lecture {
  position: relative;
  width: 100%;
  font-size: 12px;
  color: #fff;
  padding: 10px 0;
  text-align: left;
}
.article-lecture img {
  height: 10px;
  padding-right: 5px;
}
.page-article {
  max-width: 800px;
  margin: 0 auto;
}

.article-edito {
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding: 0 50px;
	text-wrap: balance;
}

@media only screen and (max-width: 800px) {
.article-edito {
	padding: 0 20px;
}
}

.edito-paragraphe {

  color: #fff;
  font-weight: 300;
  font-size: 15px;
  line-height: 20px;
  text-align: left;
	text-wrap: balance;	
}

.edito-exergue {
  font-weight: bold;
  text-shadow: 2px 2px 0px #660099;
  font-size: 20px;
  line-height: 25px;
  break-inside: avoid-column;
	text-align: left;
	text-wrap: balance;	
}

/* Texte et paragraphes */
.article-texte {
  widows: 3;
  orphans: 3;
}




.article-texte-inside {
  column-count: 2;
  column-gap: 40px;
}



.article-paragraphe,
.article-chapo, .article-exergue {
  width: 100%;
  break-inside: avoid; /* évite qu’un bloc soit coupé entre deux colonnes */
	padding: 20px;
}


@media only screen and (max-width: 800px) {
  .article-texte-inside {
    column-count: 1;
  }
}


.article-chapo {
  font-weight: 600;
  color: #fff;
  font-size: 15px;
  line-height: 20px;
  text-align: left;
	text-wrap: balance;	
	
}
.article-paragraphe {

  color: #fff;
  font-weight: 300;
  font-size: 15px;
  line-height: 20px;
  text-align: left;
	text-wrap: balance;	
}

.article-paragraphe-small {

  color: #fff;
  font-weight: 300;
  font-size: 12px;
  line-height: 14px;
  text-align: left;
	text-wrap: balance;	
	font-style: italic;
}


/* Liste à puces standard */
.article-puce ul {
  padding: 0;
  margin: 0;
  list-style-type: disc;
}

ul.article-puce, ul.article-puce-icone {
	margin-top: 0;
	margin-bottom: 0;	
}

.article-puce li {
  padding-left: 5px;
  margin: 5px 0 5px 20px;
}

/* Liste avec icônes (smileys) */
.article-puce-icone ul {
  padding: 0;
  margin: 0;
  list-style: none; /* On retire les puces */
}

.article-puce-icone li {
  position: relative;
  padding-left: 5px; /* espace pour l’icône */
  margin: 5px 0 5px 20px;
}

/* Style de l’icône (smiley/emoji) */
.article-puce-icone li::before {
  content: attr(data-icon); /* on utilisera un attribut pour l’icône */
  position: absolute;
  left: -30px;
  top: 0;
  font-size: 1.1em;
}


.article-texte .article-puce a{
	
  color: #fff;
  font-weight: 300;

}


.article-exergue {
  font-weight: bold;
  text-shadow: 2px 2px 0px #660099;
  font-size: 20px;
  line-height: 25px;
  break-inside: avoid-column;
	text-align: left;
	text-wrap: balance;	
}
.article-lien {
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  line-height: 20px;
  text-align: left;
  font-style: italic;
  margin-top: 50px;
}

.article-lien a, .article-lien a:hover  {
  transition: all 0.5s ease;
}


.article-theme {
  display: flex;
}
.article-theme p {
  position: relative;
  font-size: 10px;
  line-height: 20px;
  font-weight: 400;
  color: #fff;
  background: #660099;
  text-align: center;
  margin-bottom: 5px;
  margin-right: 10px;
  text-transform: uppercase;
  padding: 0 10px;
}
.article-titre {
  padding-top: 50px;
}

.article-auteur {
  text-align: left;
  margin-top: 30px;
}
.article-auteur-nom {
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: #FFF;
  margin-top: 10px;
}
.article-auteur-fonction {
  font-size: 12px;
  line-height: 15px;
  max-width: 400px;
  color: #fff;
  font-style: italic;
}

.article-texte a {
font-weight: 600;	
text-decoration: none;
transition: all 0.5s ease;	
}

.article-texte a:hover {
transition: all 0.5s ease;	
}

@media only screen and (max-width: 800px) {
  .article-texte {
    column-count: 1;
  }
}

/* =============================================================================
CALENDRIER
========================================================================== */
.calendrier {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin: 50px auto;
  max-width: 1000px;
	position: relative;
	width: 100%;

}

/* chaque ligne = flèche | date | cercle | texte */
.calendrier-ligne {
  display: grid;
  grid-template-columns: 70px 40px auto;
  align-items: center;
  justify-items: start;
  gap: 20px;
  position: relative;
  width: 100%;
}

/* flèche */
.calendrier-arrow {
  width: 40px;
  height: 40px;
  background: url("../img/fleche-noire-anim.svg") no-repeat center;
  background-size: contain;
  opacity: 0; /* cachée par défaut */
  transition: opacity 0.3s ease;
}

/* flèche visible seulement pour la ligne active */
.calendrier-ligne.active .calendrier-arrow {
  opacity: 1;
}

/* cercles */
.calendrier-circle {
  width: 35px;
  height: 35px;
  border: 4px solid white;
  border-radius: 50%;
  margin: auto;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease; /* transition douce */
	
}
/* cercle actif centré */
.calendrier-ligne.active .calendrier-circle {
  width: 50px;
  height: 50px;
margin-left: -4px;
}


/* supprimer les lignes par cercle */
.calendrier-circle::after {
  display: none !important;
}

/* ligne unique verticale */
.calendrier::before {
  content: "";
  position: absolute;
  top: 20px;              /* démarre au centre du premier cercle */
  bottom: 20px;           /* s’arrête au centre du dernier cercle */
  left: calc(70px + 20px + 20px); 
  /* explication : 
     50px (col flèche) + 150px (col date) + 20px (gap) + moitié de 40px (col cercle) */
  width: 1px;
  background: black;
  transform: translateX(0);
  z-index: 0;
}

/* date */
.calendrier-date {
  text-align: right;
  font-weight: bold;
	font-size: clamp(12px, 1.2vw, 14px);
	line-height: 1.4;	
}

/* texte */
.calendrier-texte {
  text-align: left;
	font-size: clamp(12px, 1.2vw, 14px);
	line-height: 1.4;
	text-wrap: balance;
}



.rond {
	animation: scale;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
	transform-box: fill-box;
	transform-origin: center;
}
@keyframes scale {
0% {
transform: scale(1);
}
50% {
transform: scale(0.8);
}
100% {
transform: scale(1);
}
}
.rond01 {
	animation-delay: 0s;
}
.rond02 {
	animation-delay: 0.2s;
}
.rond03 {
	animation-delay: 0.4s;
}
.rond04 {
	animation-delay: 0.6s;
}
.rond05 {
	animation-delay: 0.8s;
}
.rond06 {
	animation-delay: 1s;
}






/* =============================================================================
VIDEO
========================================================================== */
.video-full {
position: relative;
display: block;
max-width: 100%;
width: 100%;
height: auto;
margin-top: 20px;
aspect-ratio: 16/9;	
}

iframe.full {
    max-width: 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    border-radius: 10px;

}

video {
	border: 0;
}







/* =============================================================================
TEXTE
========================================================================== */



/* Typographie */
h1, h2, h3, p, .chapo, .article-chapo, .article-paragraphe, .article-exergue, .article-lien, .amu-header__title, .amu-header__tagline, .carrousel-titre, .article-titre, .article-question, .article-auteur-nom, .article-auteur-fonction, .menu-article-titre, .affiche-titre-01, .affiche-titre-02, .affiche-titre-03, .affiche-stitre-01, .affiche-stitre-02, .video-titre, .article-perspectives, .article-perspectives-alt, .article-theme p {
  font-family: "obviously", sans-serif;
  text-wrap: balance;
}


 h1 {
  padding: 0 0 0.2em 0;
  text-transform: uppercase;
  font-family: "obviously", sans-serif;
  margin: 0 0 0.5rem 0;
  line-height: 1.02;
  /* <-- la magie : changez les valeurs pour ajuster --> */
  font-size: clamp(1.25rem, 6vw, 3rem);
  /* micro-ajustements pour l'accessibilité */
  word-break: break-word;
  font-weight: bold;
  text-shadow: 2px 4px 0px #660099;
	 text-align: left;
}


h2 {
  font-style: normal;
  font-weight: 700;
  font-size: 30px;
  line-height: 30px;
  text-align: left;
  text-transform: uppercase;
	
}

h3 {
  font-size: 15px;
  line-height: 20px;
}
p {
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
}
.chapo {
  font-weight: 500;
  font-size: 20px;
  line-height: 25px;
}
i {
  font-weight: 300;
  font-style: italic;
}
b {
  font-weight: 500;
  font-weight: bold;
}

/* Supprime les marges et padding par défaut */
blockquote {
    margin: 0;        /* supprime la marge externe */
    padding: 0;       /* supprime le padding interne */
    font-size: inherit; /* hérite de la taille de police du parent */
    font-weight: normal; /* supprime le style gras par défaut pour blockquote */
    font-style: normal;  /* supprime italique par défaut du blockquote */
    quotes: none;        /* supprime les guillemets automatiques pour blockquote */
}

p {
	    margin: 0;        /* supprime la marge externe */
    padding: 0;       /* supprime le padding interne */
    font-size: inherit; /* hérite de la taille de police du parent */
    font-weight: normal; /* supprime le style gras par défaut pour blockquote */
    font-style: normal;  /* supprime italique par défaut du blockquote */
    quotes: none;        /* supprime les guillemets automatiques pour blockquote */
}

/* Optionnel : si tu veux supprimer complètement les styles de blockquote */
blockquote {
    border: none;      /* supprime la bordure si le navigateur en ajoute */
    background: none;  /* supprime l’éventuel fond */
}


/* =============================================================================
FOOTER
========================================================================== */
/* Styles généraux pour le footer */
.footer {
  position: relative;
  font-size: 12px; /* Taille de police plus petite */
  color: white; /* Texte blanc */
  display: flex;
  flex-direction: column; /* Organisation verticale des sections */
  margin-top: 200px;
}
/* Conteneur principal du footer */
.footer-haut {
  display: flex;
  flex-direction: column; /* Sections organisées verticalement */
  gap: 20px; /* Espacement entre les sections */
  padding: 20px; /* Espacement interne */
  min-height: 500px;
}
/* Section "Nous suivre" et flèche de retour */
.rs {
  display: flex; /* Active Flexbox */
  align-items: center; /* Aligne les éléments verticalement */
  justify-content: space-between; /* Sépare les réseaux sociaux et la flèche */
  margin-top: 50px;
  transition: filter 0.3s ease;
}
/* Aligner les icônes des réseaux sociaux */
.rs div {
  display: flex; /* Aligne horizontalement le texte et les icônes */
  align-items: center; /* Centre verticalement */
}
/* Aligner les icônes des réseaux sociaux */
.rs div div {
  margin-right: 20px;
  text-align: left;
}


.rs a:hover img {
  filter: brightness(0) invert(0); /* Rend l'image blanche */
  transition: filter 0.5s ease;
  border: 1px solid black; /* Bordure initiale */
}
.rs a img {
  height: 20px; /* Taille des icônes */
  width: 20px;
  margin: 0 2px; /* Espacement horizontal entre les icônes */
  border: 1px solid white; /* Bordure initiale */
  transition: filter 0.5s ease;
  align-content: center;	
}
/* Séparateur */
.footer-separateur {
  border-bottom: 0.5px solid white; /* Ligne blanche */
  width: 100%; /* Occupe toute la largeur */
}
/* Footer menu */
.footer-menu {
  display: flex;
  flex-wrap: wrap; /* Permet aux éléments de passer à la ligne */
  justify-content: flex-start; /* Alignement à gauche */
  gap: 10px; /* Espacement entre les éléments */
  text-align: left; /* Texte aligné à gauche */
}
.footer-menu div {
  align-content: center;
}
.footer-menu div a {
  color: white;
  text-decoration: underline;
  transition: color 0.5s ease;
}
.footer-menu div a:hover {
  color: black;
  transition: color 0.5s ease;
}
/* Conteneur principal du footer */
.footer-bas {
  display: flex;
  gap: 20px; /* Espacement entre les sections */
}
.copyright {
  flex: 1; /* Laisse le texte prendre l'espace disponible */
  white-space: nowrap; /* Empêche le texte d’être coupé */
  display: flex; /* Active Flexbox pour le logo */
  align-items: flex-end; /* Positionne le logo en bas */
  height: auto;
  padding-left: 20px;
  padding-bottom: 20px;
}
/* Logo du footer */
.footer-logo {
  align-self: flex-end;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  height: auto;
  width: 100%;
  opacity: 0;
  transition: opacity .3s ease;
}
.footer-logo.active {
  opacity: 1;
}
.footer-logo img, .footer-logo svg {
  width: 500px;
  height: auto;
  max-width: 100%;
}
.footer-logo-01 {
  fill: #000
}
.footer-logo-02 {
  fill: #fff
}
.footer-logo.active #blocA, .footer-logo.active #lettre_a {
  animation: footer-logo-translate 1s 0s 1 both;
}
.footer-logo.active #blocM, .footer-logo.active #lettre_m {
  animation: footer-logo-translate 1s .3s 1 both;
}
.footer-logo.active #blocU, .footer-logo.active #lettre_U {
  animation: footer-logo-translate 1s .6s 1 both;
}
@keyframes footer-logo-translate {
  0% {
    transform: translateY(200%)
  }
  100% {
    transform: translateY(0)
  }
}


.retour-top {
  transition: filter 0.3s ease;
}
.retour-top a {
  transition: filter 0.3s ease;
}




/* =============================================================================
RESPONSIVE HEADER
========================================================================== */
@media only screen and (max-width: 900px) {

	  .header-logo  {
    height: 70px;
    max-height: 70px;

  }
	
	.header-logo img {
    height: 70px;
    max-height: 70px;

  }
}

/* =============================================================================
RESPONSIVE FOOTER
========================================================================== */
@media only screen and (max-width: 700px) {
  /* Footer Menu */
  .footer-menu {
    flex-direction: column; /* Reste en colonne */
    align-items: flex-start; /* Aligné sur la gauche */
    gap: 10px; /* Espacement entre les éléments */
  }
}
/* =============================================================================
RESPONSIVE FOOTER
========================================================================== */
@media only screen and (max-width: 600px) {
	
	.amu-menu {
    display: none;            /* espace vertical entre les liens */
	}
	.overlay {
	width: 100%;

	}
	.menu-list {
	justify-content: start;
	}
	
 	
  /* Conteneur principal du footer */
  .footer-bas {
    flex-direction: column;
    gap: 0px;
  }
  /* Logo image */
  .footer-logo svg {
    width: 100%; /* Responsive : ne dépasse pas le conteneur */
  }
}

/* =============================================================================
THEME COULEUR
========================================================================== */



body {
  transition: background 0.5s ease, color 0.5s ease;
}
.citoyens a {
  transition: color 0.5s ease;
}
.amu-content h1 {
  transition: text-shadow 0.5s ease;
}
.carrousel-titre {
  transition: background 0.5s ease, color 0.5s ease;
}
.article-theme p {
  transition: background 0.5s ease;
}
.article-exergue {
  transition: text-shadow 0.5s ease;
}
.footer {
  transition: background 0.5s ease;
}
/* Thème Violet */
body.theme-violet {
  background: #9966ff;
}

body.theme-violet .urne {
  fill: #FF7900;
}
body.theme-violet .citoyens a, body.theme-violet .amu-menu a, body.theme-violet .article-lien a, body.theme-violet .article-auteur-nom a, body.theme-violet .cbp-hrmenu > ul > li > a, body.theme-violet .cbp-hrsub h4 {
  color: #FF7900;
}
body.theme-violet .amu-menu a:hover, body.theme-violet .article-lien a:hover, body.theme-violet .article-auteur-nom a:hover {
  color: #FFFFFF;
}
body.theme-violet h1 {
  text-shadow: 2px 4px 0px #FF7900;
}
body.theme-violet .carrousel-titre, body.theme-violet .footer {
  background: #FF7900;
  color: #fff;
}
body.theme-violet .article-theme p {
  background: #FF7900;
}

body.theme-violet .article-exergue {
  text-shadow: 2px 2px 0px #FF7900;
}

body.theme-violet .header {
  background: #FFDEBF;	
}
body.theme-violet .croix {
 stroke: #FF7900;
}

body.theme-violet .article-texte a {
	color: #FF7900;
}
body.theme-violet .article-texte a:hover {
	color: #ffffff;
}

body.theme-violet .calendrier-circle {
background: #FF7900;
border: 4px solid #9966ff;
	
}

body.theme-violet .gate::after {
  background: #FF7900;
}
body.theme-violet .tooltip {
  background: #FF7900;
}

/* Thème Orange */
body.theme-orange {
  background: #1F63DE;
}

body.theme-orange .urne {
  fill: #33CCFF;
}
body.theme-orange .citoyens a, body.theme-orange .amu-menu a, body.theme-orange .article-lien a, body.theme-orange .article-auteur-nom a, body.theme-orange .cbp-hrmenu > ul > li > a, body.theme-orange .cbp-hrsub h4 {
  color: #33CCFF;
}
body.theme-orange .amu-menu a:hover, body.theme-orange .article-lien a:hover, body.theme-orange .article-auteur-nom a:hover {
  color: #FFFFFF;
}
body.theme-orange h1 {
  text-shadow: 2px 4px 0px #33CCFF;
}
body.theme-orange .carrousel-titre, body.theme-orange .footer {
  background: #33CCFF;
  color: #fff;
}
body.theme-orange .article-theme p {
  background: #33CCFF;
}
body.theme-orange .article-exergue {
  text-shadow: 2px 2px 0px #33CCFF;
}

body.theme-orange .header {
  background: #fffd78;	
}
body.theme-orange .croix {
  stroke: #33CCFF;
}

body.theme-orange .article-texte a {
	color: #33CCFF;
}
body.theme-orange .article-texte a:hover {
	color: #ffffff;
}

body.theme-orange .calendrier-circle {
background: #33CCFF;
border: 4px solid #1F63DE;	
}
body.theme-orange .gate::after {
  background: #33CCFF;
}
body.theme-orange .tooltip {
  background: #33CCFF;
}

/* Thème Vert */
body.theme-vert {
  background: #009A74;
}

body.theme-vert .urne {
  fill: #660099;
}
body.theme-vert .citoyens a, body.theme-vert .amu-menu a, body.theme-vert .article-lien a, body.theme-vert .article-auteur-nom a, body.theme-vert .cbp-hrmenu > ul > li > a, body.theme-vert .cbp-hrsub h4 {
  color: #660099;
}
body.theme-vert .amu-menu a:hover, body.theme-vert .article-lien a:hover, body.theme-vert .article-auteur-nom a:hover {
  color: #FFFFFF;
}
body.theme-vert h1 {
  text-shadow: 2px 4px 0px #660099;
}
body.theme-vert .carrousel-titre, body.theme-vert .footer {
  background: #660099;
  color: #fff;
}
body.theme-vert .article-theme p {
  background: #660099;
}
body.theme-vert .article-exergue {
  text-shadow: 2px 2px 0px #660099;
}

body.theme-vert .header {
  background: #DDCCFF;	
}
body.theme-vert .croix {
  stroke: #660099;
}

body.theme-vert .article-texte a {
	color: #660099;
}
body.theme-vert .article-texte a:hover {
	color: #ffffff;
}
body.theme-vert .calendrier-circle {
background: #660099;
border: 4px solid #009A74;	
}

body.theme-vert .gate::after {
  background: #660099;
}
body.theme-vert .tooltip {
  background: #660099;
}


/* =============================================================================
COULEUR
========================================================================== */


.vert {
  background: #009A74;
}
.violet {
  background: #660099;
}
/* BACKGROUND */
.mauve {
  background: #9966ff;
}
.bleu {
  background: #1F63DE;
}
.vertpomme {
  background: #53DE94;
}
.vertclair {
  background: #CAFEE4;
}
.orange {
  background: #FF7900;
}
.corail {
  background: #FF8B7C;
}
.bleuclair {
  background: #CDEAFC;
}
.lavande {
  background: #DDCCFF;
}
.bleumarine {
  background: #00008E;
}
.jaune {
  background: #FED100;
}
.bleuciel {
  background: #33CCFF;
}
.blanc {
  background: #fff;
}
.noir {
  background: #000;
}
.orangeclair {
  background: #FFDEBF;
}
.brique {
  background: #B25600;
}
.ocre {
  background: #B2861B;
}
.vertemaraude {
  background: #009A74;
}
.corailpale {
  background: #FFD4CC;
}
.rouge {
  background: #990000;
}
.jaunepale {
  background: #FFFFBF;
}
.vert-texte {
  color: #009A74;
}
.violet-texte {
  color: #660099;
}
.mauve-texte {
  color: #9966ff;
}
.vertpomme-texte {
  color: #53DE94;
}
.vertclair-texte {
  color: #CAFEE4;
}
.orange-texte {
  color: #FF7900;
}
.corail-texte {
  color: #FF8B7C;
}
.bleuclair-texte {
  color: #CDEAFC;
}
.lavande-texte {
  color: #DDCCFF;
}
.bleumarine-texte {
  color: #00008E;
}
.jaune-texte {
  color: #FED100;
}
.bleuciel-texte {
  color: #33CCFF;
}
.blanc-texte {
  color: #fff;
}
.noir-texte {
  color: #000;
}
.orangeclair-texte {
  color: #FFDEBF;
}
.brique-texte {
  color: #B25600;
}
.ocre-texte {
  color: #B2861B;
}
.vertemaraude-texte {
  color: #009A74;
}
.corailpale-texte {
  color: #FFD4CC;
}
.rouge-texte {
  color: #990000;
}
.jaunepale-texte {
  color: #FFFFBF;
}
.vert-border {
  border-color: #009A74;
}
.violet-border {
  border-color: #660099;
}
.mauve-border {
  border-color: #9966ff;
}
.vertpomme-border {
  border-color: #53DE94;
}
.vertclair-border {
  border-color: #CAFEE4;
}
.orange-border {
  border-color: #FF7900;
}
.corail-border {
  border-color: #FF8B7C;
}
.bleuclair-border {
  border-color: #CDEAFC;
}
.lavande-border {
  border-color: #DDCCFF;
}
.bleumarine-border {
  border-color: #00008E;
}
.jaune-border {
  border-color: #FED100;
}
.bleuciel-border {
  border-color: #33CCFF;
}
.blanc-border {
  border-color: #fff;
}
.noir-border {
  border-color: #000;
}
.orangeclair-border {
  border-color: #FFDEBF;
}
.brique-border {
  border-color: #B25600;
}
.ocre-border {
  border-color: #B2861B;
}
.vertemaraude-border {
  border-color: #009A74;
}
.corailpale-border {
  border-color: #FFD4CC;
}
.rouge-border {
  border-color: #990000;
}
.jaunepale-border {
  border-color: #FFFFBF;
}