::selection{background: #f59e30 !important;color: #000c !important;}
::-moz-selection{background: #f59e30 !important;color: #000c !important;}
.spip-admin-bloc, .spip-admin-float{right:1% !important;}.spip-admin-boutons{margin:0;padding:.3em .3em !important;background:#666;border:0;font-weight:normal !important;border-radius:0 0 .2em .2em !important;opacity:.2 !important;font-size:12px;}
ul.spip{list-style-type:square;}
ul.spip{list-style-type:none;padding-left:0;font-family:'wotfardlight';font-size:1.1em; !important;margin-left:0;padding-left:7%;}

.spip-puce::before {
    color: #000;content:"\2794";margin-right:5px;font-size:0.7em;
}
ul.spip li::before{content:"\2794";margin-right:5px;}
strong, b, .b{font-weight:none ;}

.logo_site_spip, #contenu,.hamburger-menu, #titre_arbo, #titre, main, #titre_rubrique, #module_entete {
  animation: fadein 2s;-moz-animation: fadein 2s;
  -webkit-animation: fadein 2s;-o-animation: fadein 2s; }

#nom_slogan {
  animation: fadeinDown 2s ease forwards;-webkit-animation: fadeinDown 2s ease forwards;
  -moz-animation: fadeinDown 2s ease forwards;-o-animation: fadeinDown 2s ease forwards;}

@keyframes fadein { from {opacity:0;}to {opacity:1;}}
@-moz-keyframes fadein { from {opacity:0;} to {opacity:1;}}
@-webkit-keyframes fadein { from { opacity:0; }to {opacity:1;}}
@-o-keyframes fadein { from {opacity:0;}to {opacity: 1;}}

@keyframes fadeinDown {from {opacity: 0;transform: translate(-50%, -15px); /* centrage + déplacement vertical */}to {opacity: 1;transform: translate(-50%, 0); /* centrage + position finale */}}
@-webkit-keyframes fadeinDown {from { opacity: 0; transform: translate(-50%, -15px); }to { opacity: 1; transform: translate(-50%, 0); }}
@-moz-keyframes fadeinDown {from { opacity: 0; transform: translate(-50%, -15px); }to { opacity: 1; transform: translate(-50%, 0); }}
@-o-keyframes fadeinDown {from { opacity: 0; transform: translate(-50%, -15px); }to { opacity: 1; transform: translate(-50%, 0); }}

/* --------------------------------------------------
 TYPO /texte 
 ----------------------------------------------------- */
* {margin: 0;padding: 0;box-sizing: border-box;}
@font-face {
     font-family: 'wotfardbold';
    src: url('../../squelettes/webfont/wotfard-bold-webfont.eot');
    src: url('../../squelettes/webfont/wotfard-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../squelettes/webfont/wotfard-bold-webfont.woff2') format('woff2'),
         url('../../squelettes/webfont/wotfard-bold-webfont.ttf') format('truetype');
   font-weight: normal;font-style: normal;
}
@font-face {
     font-family: 'wotfardsemibold';
    src: url('../../squelettes/webfont/wotfard-semibold-webfont.eot');
    src: url('../../squelettes/webfont/wotfard-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../squelettes/webfont/wotfard-semibold-webfont.woff2') format('woff2'),
         url('../../squelettes/webfont/wotfard-semibold-webfont.ttf') format('truetype');
   font-weight: normal;font-style: normal;
}
@font-face {
     font-family: 'wotfardmedium';
    src: url('../../squelettes/webfont/wotfard-medium-webfont.eot');
    src: url('../../squelettes/webfont/wotfard-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../squelettes/webfont/../../squelettes/webfont/wotfard-medium-webfont.woff2') format('woff2'),
         url('wotfard-medium-webfont.ttf') format('truetype');
    font-weight: normal;font-style: normal;   
}

@font-face {
    font-family: 'wotfardbold_italic';
    src: url('../../squelettes/webfont/wotfard-bolditalic-webfont.eot');
    src: url('../../squelettes/webfont/wotfard-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../squelettes/webfont/wotfard-bolditalic-webfont.woff2') format('woff2'),
         url('../../squelettes/webfont/wotfard-bolditalic-webfont.ttf') format('truetype');
    font-weight: normal;font-style: normal;
}

@font-face {
    font-family: 'wotfardlight';
    src: url('../../squelettes/webfont/wotfard-light-webfont.eot');
    src: url('../../squelettes/webfont/wotfard-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../squelettes/webfont/wotfard-light-webfont.woff2') format('woff2'),
         url('../../squelettes/webfont/wotfard-light-webfont.ttf') format('truetype');
    font-weight: normal;font-style: normal;
}


html, body {height:auto;    width: 100%; margin:0; padding:0;}
body{font-family:arial, sans-serif;}
.page{position:relative; display:inline; margin:0; padding:10px 2% 0 2%; float:left; 
width:100%;max-width:100%;height:auto;z-index: 1;   }
main {z-index: 100; margin-left: 6.25%; width: 87.5%; height:auto; margin-top: 230px; 
display:block; float:left; position: relative;}

/*-------------------------------------------- 
HEADER
---------------------------------------------- */
header { display: flex;  align-items: center;position: fixed; top: 0;left: 0;right: 0;
height: auto; z-index: 1000;box-sizing: border-box; width:100%;}
.logo_site_spip {position: absolute; display: block; width:200px; margin-left: 30px; z-index: 10000; top:20px;}
.logo_site_spip img{ width: auto; height:auto;}

#nom_slogan {
  position:relative; 
  left: 50%;
  top: 25px;
  transform: translate(-50%, 0); /* centrage horizontal de base */
  text-align: center;
  z-index: 5;
  font-family: 'wotfardlight';
  line-height: 1;
  font-size: 22px;
}

#nom_slogan::before {content: ''; position: absolute; top: -35px; left: 50%; 
transform: translateX(-50%); width: 1px; height: 35px; background-color: black; }

/* -------------------------------------------
FOOTER
---------------------------------------------- */
footer {display: block;justify-content:right;float:left;position:relative;width: 100%;background: #ffff;padding: 20px;border-top: 5px solid #000;margin-top: 50px; z-index:10;}
.logo_footer {width:100%; display:block; float:left;}
.footer-content {display: flex;justify-content: space-between;width: 100%;}
.author-column,
.social-column {width: 50%;}

footer img { width:150px; float:left !important; margin:0 0 0 0 !important; }
footer p { font-size: 14px;color: #000; font-family: 'WotfardMedium', sans-serif;margin-bottom: 0.5em;}

.boutton {list-style: none;padding: 10px; float:right;}
.social {display: inline-block;margin-right: 10px;  float:right;}
.social img {width: 40px; height: 40px;}
.social a {display: block;}

footer p.colophon {font-size: 12px;color: #000;text-align: right; }


/* -------------------------------------------
Hyperliens 
---------------------------------------------- */
a, a:visited {color:#000000; text-decoration:none;
-webkit-transition-duration: 0.8s; /* Safari */transition-duration: 0.8s; } 
a:focus, a:hover, a:active { color:#000 !important;  transform: translateX(5px)!important; background: none !important;}
a.footer { color:#000000; font-size:12px; float:right; }  
a.footer:hover {color:tomato;}  
a.pdf { padding:10px 10px 10px 10px;color:#000000; text-align:center; text-decoration: none;  
border:1px solid #000000; font-family: 'wotfardbold'; text-transform:uppercase;}
mark {color:#f398b5; background:none;}

a:focus img,
a:active img {
  -moz-transform: translateY(0px);
  -webkit-transform: translateY(0px);
  -o-transform: translateY(0px);
  -ms-transform: translate(0px);
  transform: translateY(0px);
}

.chapo p{ font-family: 'wotfardsemibold'; font-size:25px; }
.chapo_rubrique p{ font-family: 'wotfardsemibold'; font-size:20px; }

p,.p  {margin-bottom: 1.4em; color:#000000; font-size:18px; font-family: 'wotfardlight'; }  
b { color: #00000;font-family: 'wotfardsemibold';}
strong{font-family: 'wotfardsemibold';  color: #00000; }   
small, .small {font-size: 75%;  color: #00000;}    

h1,.h1,h2,.h2,h4,.h4,h5,.h5,h6,.h6 {display: inline; margin: 0;padding: 0;font-size: 100%;text-transform:uppercase; color:#00000;}
h1,.h1 {font-size:3.5em;line-height: 1;margin-bottom: 0; font-family: 'wotfardmedium';text-align: center;  }
h2,.h2 {font-size:2em;line-height: 1;margin-bottom:0.5em; font-family: 'wotfardmedium';text-align:left;width: 100%;padding: 0.2em 0; }

h2.spip {position: relative;display: block;float: left;width: 100%;padding: 11px 0 10px 0; border-top: 1px solid #000;border-bottom: 1px solid #000;margin-bottom: 0.5em;}

h3,.h3 {display: inline; margin: 0;padding: 0;font-size: 100%;text-transform:uppercase; font-size:1.1em;line-height: 1.3;
margin-bottom: 0; padding: 5px 0 5px 0; font-family: 'wotfardlight';text-align:left;}
h3.rubrique_menu {font-size:1.5em; font-family: 'wotfardbold';text-transform: uppercase; line-height:2; }
h3.agenda{ margin-top:10px; margin-bottom:5px; font-family: 'wotfardbold';text-transform: uppercase; }
h4, .h4 { font-size: 20px;line-height: 1.4;margin-bottom: 1.9em;font-family: 'wotfardbold'; color:#000;}
h4.pdf { font-size: 15px;line-height: 1.2;margin-bottom: 0.2em;font-family: 'wotfardbold'; color:#000; text-align: center;}


hr, hr.date_agenda { height: 1px;margin: 0.7em 0 0.7em 0;border: solid;border-width: 1px 0 0; color:#000; float:left; align: top; min-width:100%; }
hr.date_agenda {margin: 0.7em 0 0.7em 0; float:right; display:inline; max-width:30px;}

input,textarea,select,button { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color:#000;
padding: 3px;background:none;  font-size: 18px;width:100%;  text-transform:uppercase; font-family: 'wotfardbold';}

#mc_embed_signup input .button {-webkit-appearance: none;color:#000;}
button{ padding:10px;background:#f59e30;border: none;}
button:hover { background:#ee7598; transition: opacity 0.3s ease;}

blockquote {
    min-height: 40px;
    background: none;
    border: none;
    padding-left: 3em;
}



/* -------------------------------------------
publication/realisation
---------------------------------------------- */
ul.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

li.pdf_publication {padding: 10px;}

li.pdf{float:left; position: relative;  padding:0 10px 10px 0; width:50%;  display: block;}


.article_lie{padding-top:15px; }

.pdf_texte, .pdf_texte_publication {  display: inline;align-items: center;height:10vh;width:100%;   float:left;}
.pdf_texte_2{  display: block; width: 60%; height:auto; float:left; position: relative;}
.pdf_texte p {  font-size: 14px; line-height: 1.2; margin-bottom: 0.2em; font-family: 'wotfardlight'; color:#000;}
.pdf_texte img, .pdf_texte_publication img {  float:left; margin:0; width:35%; padding-right:5%; }
.pdf_texte img:hover { transform: rotate(-45deg); transition: transform 0.3s ease;  }
.pdf_texte_publication img:hover { transform: rotate(-5deg); transition: transform 0.3s ease;  }


.pdf_texte_publication{  height:auto; float:left; position: relative;  display: block; margin-bottom:20px;}

/* Logos, documents et images */
img .spip_logos { float: left; margin:0; padding: 0;background-color:white; border: none; }
.spip_documents { margin-bottom:0em; padding: 0; background: none; float:left;display:inline; }
.spip_documents,.spip_documents_center,.spip_doc_titre,.spip_doc_descriptif { margin-right: auto; margin-left: auto; text-align: center;background: none; }
.spip_documents_center { clear: both; display: block; width: 100%; position: relative; float:left;}
.spip_documents_left { float:left;text-align:left; margin-right:5px;background: none;margin-bottom:5px;padding:0;display:block;width:100%;position:relative;}
.spip_documents_right { float: right; margin-left: 1.5em;background: none; }
.spip_doc_titre {}
.spip_doc_descriptif {clear: both;}
.spip_doc_inner { margin: 0; text-align: left;  max-width: 100%; float:left; position: relative; }

div.spip, ul.spip, ol.spip, .spip_poesie, .spip_cadre_block, .spip_code_block, .spip_documents.spip_documents_center {margin-bottom: 1.4em;}



/* -------------------------------------------
pagination
---------------------------------------------- */


ul.pagination-items {
    width: 100%;
    display: inline;
    float: left;
    
}


li.pagination-item {
    width: auto;
    display: inline;
    float: left;
     background: none;
  padding: 6px 10px;
  cursor: pointer;
  font-size:1em;font-family:'wotfardbold'; 
  width: 32px;
  text-align: center;
  white-space: nowrap;
}

li.pagination-item:hover {background-color:#ccc; }

.pagination-item.active {
    background-color: #000;
    color: #fff;
}

/* --------------------------------------------------
menu
---------------------------------------------- */

.sliding-navbar{padding-top:10px; position:fixed;top:0;left:-100%;height:100vh;width:100%;background:#f49d2f;border-right:solid 1px #000;
transition:left 0.5s ease-in-out;z-index:1500; overflow-y:auto;}
.sliding-navbar--open{left:0px;}.mask{position:absolute; top: 0px;right:0px;height: 100vh;width:5%;z-index:-100;}
.show{z-index:200;}
.navbar--items{list-style-type:none;height:auto;width: 100%;display:-ms-flex;display:-webkit-flex;display: flex;padding:150px 0px 0px 20px;}
.navbar--items li{text-align:left;text-transform: uppercase;color: #00000;}
.navbar--items li:hover{text-decoration:none;}
.navbar--items li .on{text-decoration:none;}

.hamburger-menu {z-index: 1510;position: fixed;top: 70px;right: 45px;
  margin: auto;width: 80px;height: 30px;cursor: pointer;}

/* base */
.hamburger {position: relative;width: 90px;height: 5px;background: #000000;transition: transform 0.2s ease-in-out, background 0.3s ease-in-out;border-radius: 10px;
}

.hamburger::before,
.hamburger::after {
  content: "";position: absolute;width: 90px;height: 5px;background: #000000;
  transition: transform 0.2s ease-in-out, background 0.3s ease-in-out;border-radius: 10px;
}
.hamburger::before { top: -10px; }
.hamburger::after { top: 10px; }

/* Effet au survol (uniquement si pas ouvert) */
.hamburger-menu:hover .hamburger:not(.menu-opened),
.hamburger-menu:hover .hamburger:not(.menu-opened)::before,
.hamburger-menu:hover .hamburger:not(.menu-opened)::after {transform: scaleY(1.08);}

/* état ouvert (croix) */
.menu-opened { background: transparent;}
.menu-opened::before {top: 0;transform: rotate(45deg);width: 60px;}
.menu-opened::after {top: 0;transform: rotate(-45deg);width: 60px;}

.menu-columns {display: flex;flex-wrap: wrap; width:100%;}
.colonne {width: 25%; padding: 10px;}
.colonne ul {list-style-type: none; padding: 0;text-align:left;}

.colonne li {list-style-type: none; transition-property: transform;transition-timing-function: ease;transition-duration: 0.5s;}
.colonne a {text-decoration: none;color: #000;}
.colonne li:hover { transform: translateX(5px);}

ul {display:block; width:100%; float:left; margin-bottom:10px; } 
li.rubrique{ font-size:1.5em; font-family: 'wotfardbold';text-transform: uppercase;    line-height:2;}
li.sous_rubrique{ font-size:1em; font-family: 'wotfardbold';text-transform: uppercase; line-height:1.5;width:100%; }
.sommaire {border-top:1px solid #000; padding:12px 0 12px 0;float:left;}
.sommaire:hover::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;opacity:0.5;z-index:-1;transition:opacity 0.3s ease; background: white;}
.sommaire:hover {background: transparent;}

li.sous_sous_rubrique{ font-size:0.9em; font-family: 'wotfardlight';text-transform: uppercase;   line-height:1.2;}
li.sous_rubrique:hover .arrow { 
    transform: rotate(45deg); 
    transition: transform 0.3s ease; /* Transition pour la rotation de la flèche */ }


li.sous_sous_rubrique:hover .arrow {transform: rotate(45deg);  transition: transform 0.3s ease; }
a { text-decoration: none;transition: transform 0.2s ease;}
a:hover{ background:none; color:black; text-decoration:none;  }
#titre_arbo a{font-family: 'wotfardlight'; font-size:12px; text-transform: uppercase;  }



/* ------------------------------------------------ 

les fonds

-----------------------------------------------------  */
#fond_transmettre{ width: 800px; height: 400px;  background:none; border:none;position:fixed;right:-50px; top:30px;cursor: all-scroll;z-index: 1; transform: rotate(45deg);}
#fond_explorer{ width: 100%; height: auto;  background:none; border:none;position:fixed;left:-10%; top:-250px;cursor: all-scroll;z-index: 1; transform: rotate(180deg);}
#fond_reveler{ width: 1100px; height: auto;  background:none; border:none;position:fixed;left:-7%;top:-300px;cursor: all-scroll;z-index: 1;transform: rotate(45deg);}
#fond_ardepa{ width: 1500px; height: auto;  background:none; border:none;position:fixed;left:-210px; top:-775px;cursor: all-scroll;z-index: -1;transform: rotate(180deg);}
#module_jaune{ width: 201px; height: auto;  background:none; border:none;position:absolute;right:5%; top:490px;cursor: all-scroll;z-index: -1;transform: rotate(0deg);}
#module_vert{ width: 66px; height: auto;  background:none; border:none;position:absolute;left:7%; top:261px;cursor: all-scroll;z-index: -1;transform: rotate(180deg);}

#module_rose{ width: 201px; height: auto;  background:none; border:none;position:absolute;right:40%; top:340px;cursor: all-scroll;z-index: -1;transform: rotate(0deg);}

#module_entete{ width: 688px; height: 400px;  background:none; border:none;position:absolute;left:50%; margin-left:-344px; top:-200px;z-index: 1; transform: rotate(0deg);}

#fond_transmettre2{ width: 600px; height: 400px;  background:none; border:none;position:fixed;right:-50px; top:30px;cursor: all-scroll;
z-index: 1; transform: rotate(0);}
#fond_explorer2{ width: 600px; height: auto;  background:none; border:none;position:fixed;left:-100px; top:-170px;cursor: all-scroll;
z-index: 1; transform: rotate(180deg);}
#fond_reveler2{ width: 500px; height: auto;  background:none; border:none;position:fixed;left:0%;top:500px;cursor: all-scroll;z-index: 1;transform: rotate(0deg);}
#fond_ardepa2{ width: 600px; height: auto;  background:none; border:none;position:fixed;left:-5%; top:50px;cursor: all-scroll;z-index: -1;transform: rotate(0deg);}

#fond_article1, #fond_article6, #fond_article7, #fond_article8 {background:none; border:none;position:fixed;;cursor: all-scroll; z-index: 0;}
#fond_article1 { width: 50%; height: auto; left:-150px; top:0px; transform: rotate(0deg);}
#fond_article6 { width: 60%; height: auto;left:-10%; top:38px; transform: rotate(0deg);}
#fond_article7 { width: 64%; height: auto;left:-15%; top:45px; transform: rotate(0deg);}
#fond_article8{ position:fixed;left:-15%; width: 800px; height: auto; top:-5px; transform: rotate(0deg);}

/* ------------------------------------------------ 

les rubriques

-----------------------------------------------------  */

#titre_rubrique {position: absolute;   width:50%; height:auto; left: 50%;  transform: translateX(-50%); text-align: center; 
z-index: 100; top:200px; font-family: 'wotfardlight'; line-height:0.5; font-size:18px;}
#titre_rubrique::before {content: '';  position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 1px; height: 130px;  background-color: #000;  z-index:100; }

.titre_rub{ width:100%; height:auto;display: block; float: left;position: absolute; position:relative; padding:5px;bottom:0;left:0;}
.titre_rubrique{ width:auto; height:auto; padding:8px;display: inline; float: left;position: relative; margin-bottom:20px; border-radius:10px;}



#rubriques-container {
  justify-content: space-between;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Crée 3 colonnes égales */
  gap: 5px; /* Ajout d'un écart entre les éléments */
  width: 100%;
  box-sizing: border-box;
}


.colonne_rub { padding:8px; height:23vw; border:1px solid #ccc;box-sizing: border-box;background:#FFF;}
.image-container {position: relative;width: 100%;height: 100%;}
.colonne_rub img{width:100%; height:auto; margin:0 0 0 0; transition: transform 0.3s ease, filter 0.3s ease; filter: grayscale(100%);  object-fit: cover;}
.colonne_rub img:hover{ transition-duration:0.3s; transform: scale(1.05) translateY(-3px);filter: grayscale(0%); }
.colonne_rub:last-child{margin-bottom: 40px;}
.arrow {display: inline-block;transition: transform 0.3s ease; }
.arrow2 {display: inline-block;transition: transform 0.3s ease; }
.colonne_rub:hover .arrow { transform: rotate(45deg); transition: transform 0.3s ease; background:#FFF;}
.titre_rubrique:hover .arrow { transform: rotate(45deg);  transition: transform 0.3s ease; }
.titre_rubrique_hover:hover .arrow { transform: rotate(45deg);  transition: transform 0.3s ease; }


.chapo_rubrique{width:50%; display: block;}

.texte-en-deux-colonnes, .texte-en-deux-colonnes_adhesion {
  column-count: 2;
  column-gap: 30px; /* Ajustez l'espacement entre les colonnes */
  -webkit-column-count: 2; /* Pour les navigateurs Webkit */
  -moz-column-count: 2; /* Pour les navigateurs Mozilla */
    width:100%;
    padding:20px 0 20px 0px;
    position:relative;
    float: left;
    display: block;
}

.texte-en-deux-colonnes_adhesion  {padding:20px 0 20px 0px;}
.texte-en-deux-colonnes p{ font-size:1em; font-family: 'wotfardmedium'; }
.texte-en-deux-colonnes_adhesion  p{ font-size:1em; font-family: 'wotfardlight';   margin-bottom:20px; }


/* -----------------------------------------  

sommaire  

--------------------------------------------  */

#contenu{z-index: 100;margin-left: 6.25%; width: 87.5%;height:auto;margin-top: 160px;position: relative;display:block;  }
.ligne { display: flex;  flex-direction: row-reverse;gap:20px;margin-bottom:30px; }
.conteneur-50 { width: 49.5%; padding: 0 0 10px 0; height: auto; position: relative; display: block;}

.liens{ width:50%; height:auto; float:left; position:relative; display: inline; }


.colonne-image {width: 35%;  height:8.7vw; position:relative;display:block;float:left; }
.colonne-image img {width: 100%; }
.colonne-contenu_actu {width: 65%;  padding-left:10px;height:8.7vw;position:relative;display:block;float:left; }

.ligne-secondaire {display: flex;gap:20px;    margin-top: 20px;}
.colonne_sommaire {width: 33%; height: 45vw;Padding:10px 0 0 0 ;position:relative;}
.logo_sommaire{position:relative;z-index:1;padding:0 40px 0 40px;width:100%;height:auto;}
.menu_sommaire {position: absolute;bottom: 0;height: auto; z-index: 100;width: 100%;}

.sous_rubrique .logo_container {display: block; position: absolute;  top: -15.6vw; left: 0; width: 100%;  
 text-align: center;
 opacity: 0; /* L'image est invisible au départ */
 visibility: hidden; /* L'image est cachée */
 transition: opacity 0.3s ease, visibility 0s 0.3s; }

.sous_rubrique:hover .logo_container {opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0s 0s; }
.lien{right:0; display:block;position:absolute; bottom:8px; width:auto;  font-family: 'wotfardlight';text-transform: uppercase; font-size: 12px;}


.date {display:inline;position:relative; width:100%;float:left; font-family: 'wotfardlight'; text-transform: uppercase; 
    font-size: 0.60em;line-height: 2;}

li.liens .newsletter {display: block; position: absolute; z-index:50; top:26px; 
left: -100%; width: 200%; height:16.5vw; text-align: center; background:white; border:1px solid black;
 opacity: 0; /* L'image est invisible au départ */
 visibility: hidden; /* L'image est cachée */
 transition: opacity 0.3s ease, visibility 0s 0.3s; }

li.liens .newsletter.active { opacity: 1;visibility: visible;transition: opacity 0.3s ease;pointer-events: auto;}
li.liens .newsletter {pointer-events: none;}

li.liens{ font-size:0.85em; font-family: 'wotfardmedium';text-transform: uppercase; line-height:1.2; border:1px solid #000; padding:5px;}
li.liens:hover .arrow { transform: rotate(45deg); transition: transform 0.3s ease; ;}
li.liens:nth-child(1){ border-bottom:0px solid #000; border-right:0; border-left:0;z-index:100;}
li.liens:nth-child(2){ border-bottom:0px solid #000; border-right:0; }
li.liens:nth-child(3){  border-right:0; border-left:0;}
li.liens:nth-child(4){  border-right:0;}


li.liens:nth-child(1):hover{  background:#f59e30; color:#000;}
li.liens:nth-child(2):hover{  background:#be592f; color:#000;}
li.liens:nth-child(3):hover{  background:#ee7598; color:#000;}
li.liens:nth-child(4):hover{  background:#3b7761; color:#000;}


li.liens:hover .arrow2 {transform: rotate(-90deg); transition: transform 0.3s ease; background: none; }
li.liens .newsletter.active { opacity: 1; visibility: visible;transition: opacity 0.3s ease, visibility 0s 0s;}


/* -------------------------------------------
RAPPORT ACTIVITÉ
---------------------------------------------- */
#fond_ardepa_act{ width: 500px; height: auto;  background:none; border:none;position:fixed; top:-30px;right:50%;cursor: all-scroll;z-index: 1;
transform: rotate(90deg);}
ul.pdf-list{display:flex;flex-wrap:wrap;margin:0 -10px;padding:0;list-style-type:none;align-items:flex-end;height:auto;}
li.pdf_activite{width:25%; height:16vw;padding:0 10px 10px 0;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-end;}

.section {
  position: relative;
  height: auto;
  width: 100%;
    float:left;
}



.pdf_activite {  width: 25%;height: 25vw;padding: 0 10px 10px 0;
  box-sizing: border-box;display: flex;flex-direction: column;
  justify-content: flex-end;  
}

.pdf_texte_activite {
  display: flex;flex-direction: column;align-items: center;
  justify-content: flex-end;height: 100%;
  overflow: hidden;
}

.pdf_texte_activite a {display: flex;align-items: center;justify-content: center;height: 100%;}

.pdf_texte_activite img { max-height: 100%; max-width: auto; height: auto;width: auto;object-fit: contain;display: block;}


li.document_serie_classique_rapport{width: 50%; padding-right:4%; float:right;}
li.document_serie_classique_rapport img{width: 100%;  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transition: box-shadow 0.3s ease-in-out;cursor: zoom-in !important; }
li.document_serie_classique_rapport img:hover {transform: rotate(-5deg); transition: transform 0.3s ease;}

/* -------------------------------------------
ARDEPA
---------------------------------------------- */
.encart{border:6px solid ;border-bottom-color:#3b7761 ;border-top-color:#be592f;border-left-color:#f59e30;border-right-color:#ee7598; background:#fff;padding:20px;
border-radius:3px; height:auto; width:100%; display:block; float:left; margin-bottom:50px;}

.logo_30{width:100%;padding-right:75%; height: auto; float: left; position: relative;display:inline;}
.adresse{width:100%;height: auto; float: left; position: relative; display: inline;}

.logo-container{display:grid;grid-template-columns:repeat(4, 1fr);gap:2px;width:100%;}
.logo-item{text-align:left;background-color:#fff;padding:2px 2px 0px 2px;}
.logo-item img{max-width:100%;height:auto;}.logo-info h3{font-size:0.8em;font-family:'wotfardbold';padding-top:5px;}
.logo-info p {font-size: 0.8em;}

.formulaire_contact {position:relative; width: 100%; height:auto;float:left;display: grid;grid-template-columns: repeat(5, 1fr);gap: 30px;z-index:1;}
.formulaire_contact img, .archive img{ width:100%;padding:1% 10% 1% 10%;filter: grayscale(100%);
-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);}
.formulaire_contact img:hover{filter: none;-webkit-filter: none;-moz-filter:none;-ms-filter: none;-o-filter: none;}


/* -------------------------------------------------

les articles  

----------------------------------------------------- */
.articles-equipe{ width: 100%; display:inline; height:auto; float:left; position:relative;padding-bottom:50px;} 

#titre_arbo {position: absolute;  left: 50%;  transform: translateX(-50%); text-align: center; z-index: 100; top:184px; font-family: 'wotfardlight'; line-height:1; font-size:18px;}
#titre_arbo:hover .arrow { transform: rotate(45deg);  transition: transform 0.3s ease;  color:black; }
#titre_arbo::before { content: ''; position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 1px; height: 100px; background-color: #000; z-index:100;}

#titre {position: relative; left: 50%; width:60%; transform: translateX(-50%); text-align: center; z-index: 100; 
    top:180px; font-family: 'wotfardlight'; line-height:1; font-size:18px;}
#titre::before {content: '';  position: absolute; top: -30px; left: 50%;  transform: translateX(-50%); 
    width: 1px; height: 30px; background-color: #000; z-index:100;}

.page_transmettre{position:relative; display:inline; margin:0; padding:10px; float:left; width:100%;max-width:100%;height:1000vh;z-index: 1; background:#ed7597;}



.document_serie, .document_serie_2, .document_serie_classique {width: 50%;display: block; float: left; 
position: relative;z-index: 10; }
.document,.document_smartphone{ width: 50%;display: block; float: right; position: relative;z-index: 10;}
.document_smartphone{display:none;}
li.document_serie, li.document_serie_2, li.document_serie_classique {height: auto;position: relative;padding: 3px; margin:0; width: 50%;}
li.document_serie img, li.document_serie_2 img, li.document_serie_classique img {  width:100%;margin:0;cursor: zoom-in !important; }
li.document_serie:nth-child(5n+1) {width: 100%;}
li.document_serie_2:nth-child(3n+1){width: 100%;}
li.document_serie_classique {width: 100%;}

article {float:right; width:50%; min-height: 100vh; display:block; position:relative; padding-left:3%;z-index: 10; }
.chapo {font-weight: none; font-family: 'wotfardsemibold'; display:block; float:left; position:relative; width:100%;line-height: 1.2;}

.ps {  border-top: 1px solid #000; border-bottom: 1px solid #000; width:100%; z-index: 10; padding:0.7em 0 0.7em 0; float:left; position: relative;}
.ps p{ margin-bottom:0.6em; color:#000000; font-size:12px; font-family: 'wotfardlight';}

ul.thematique, ul.thematique_small {padding:0 0 0.65em 0; border-bottom:1px solid #000;font-size: 1em;font-family: 'wotfardbold'; }
li.thematique, li.thematique_small {font-size: 1em; line-height: 1.5; margin-top: 20px;
font-family: 'wotfardlight'; text-transform: uppercase; color: #00000; display: inline; padding-right: 10px; border-left: 1px #00605c solid; padding-left: 10px;}

ul.thematique_small { font-size: 0.65em;border-bottom:none; float:left; display:inline;margin-top: 5px;} /* page d'accueille */ 
li.thematique_small { margin-top: 20px; font-family: 'wotfardlight'; padding-left: 5px;  padding-right: 5px;}

li.thematique:nth-child(1), li.thematique_small:nth-child(1) {padding-left: 0;border-left: none;}
li.thematique:hover .arrow ,  li.thematique_small:hover .arrow { transform: rotate(45deg); transition: transform 0.3s ease;}
.event-row {width:100%;}

.ps, .texte_partenaires{ position: relative; width:100%; display:block; float: left;margin-bottom: 1.5em;}

#sidebar-sticky {
  width: 100%;
}

#sidebar-sticky.fixed {
  position: fixed;
  top: 0;
  z-index: 100;
  background: #FFF;
  padding-left: 2.45%;
}



/* -------------------------------------------------

open agenda sommaire

----------------------------------------------------- */

li.liens_agenda:hover .arrow { transform: rotate(45deg); transition: transform 0.3s ease; }

/*
a.agenda_sommaire:hover{ color:#3b7761 !important;}
a.agenda_sommaire2:hover { color:#000 !important;}*/

#events-container{width:95%;height:auto;float:left;position:relative;margin:10px 0 0 0;display:block; }
.titre_agenda_2{position:relative;width:5%;height:403px;float:left;display:block;  z-index:10;}
.titre_agenda_3{position:relative;margin-top:180px;transform:rotate(-90deg);transform-origin:left top;white-space:nowrap;}

.titre_agenda_3 a{display:inline-flex;align-items:center;gap:6px;color:#000;text-decoration:none;font-size:2em;line-height: 1;
    margin-bottom:0; font-family:'wotfardmedium';}
.titre_agenda_3 a .arrow{transition:transform 0.3s ease; display:inline-block;}
.titre_agenda_3 a:hover .arrow{transform:rotate(135deg); color:#000;}



.event{display:flex;align-items: flex-start;padding: 15px 0 15px 0;height: auto; border-top:1px solid #ccc; gap: 1rem; }
.event:first-child{border-top:none;padding:8px 0 15px 0;}
.time{font-size:0.9em;line-height:0.8;  color:#000; border:1px solid #000; border-radius:2px;padding:3px;width:auto; margin-top:5px; margin-bottom:5px; float:left; }
.content_agenda{width:100%;}
.title{font-size:1em;line-height:1em;font-family:'wotfardbold';text-transform:uppercase;color:#222;}
.description{font-size:0.9em;line-height:1.05em;color:#000;font-family:'wotfardlight'; width:100%; float:left;}
.date_agenda, .date_agenda_2{width:15%;text-align:right;font-size:1em;font-family:'wotfardbold'; 
line-height:1em;color:#000;text-transform:uppercase;position:relative; float:left; margin-right: 10px;}
.date_agenda_2{width:70%; height:150px; font-size:1.5em;line-height:1.1;border:1px solid #000; border-right:none;display:flex; 
align-items:center; justify-content:center;flex-direction:column;margin-right: 0;}





/* -------------------------------------------------

open agenda rubrique

----------------------------------------------------- */
.upcoming-events-container{justify-content:space-between;display:grid;grid-template-columns:repeat(3, 1fr);
gap:5px;width:100%;box-sizing:border-box; margin-bottom:80px;margin-top:20px;}
.upcoming-event-wrapper{flex:1 3 calc(33.333% - 20px);box-sizing:border-box;}
.upcoming-event{display:flex;align-items:flex-start;flex-direction:column;justify-content:space-between;witdh:auto;border:1px solid #ccc;padding:8px;}
.image-container_agenda{position:relative;width:100%;aspect-ratio:16 / 9;overflow:hidden;}
.event-image{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.event-image:hover, .image-container_agenda:hover {transition-duration:0.3s; transform: scale(1.04); }
.event-image a {transform: translateX(0px);}
.event-row { display: flex; flex-direction: row; align-items: flex-start;gap: 1rem;margin-bottom: 1em;margin-top: 15px; height:130px; }
.content_agenda {flex: 1;}
.upcoming-event-wrapper { margin-bottom: 2rem;}

/* evenement passes */
#past-events-container{ padding-top:30px; }

.past-event{display:flex;align-items:flex-start;flex-direction:row;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #ccc;}
.past-event2{display:flex;align-items:flex-start;flex-direction:row;margin-bottom:20px;padding-bottom:10px;padding-top:10px;border-top:1px solid #ccc;}
.past-event:first-child {border-top:1px solid #ccc;padding-top:20px;}

/* Contenu à droite */
.content_agenda2 {width: 100%; margin-left:10px;} /* Date à gauche — pas besoin de changer la classe existante */
.event2 .date_agenda {} 

.pagination2 {
    display: flex;
    justify-content: flex-start; /* ou center ou space-between selon préférence */
    flex-wrap: wrap;
    width: 100%;
    background: none; /* retire le rouge de debug */
}

.pagination2 button {
    background: none;
  padding: 6px 10px;
  cursor: pointer;
  font-size:1em;font-family:'wotfardbold'; 
  width: 32px;
  text-align: center;
  white-space: nowrap;
}

.pagination2 button:hover {
    background-color: #ccc;
    color: #000;
}

.pagination2 button.active {
    background-color: #000;
    color: #fff;
}

/* Effet visuel pour les événements passés */
.upcoming-event.past {
    filter: grayscale(1);
    opacity: 1;
}

.upcoming-event.past:hover {
    filter:none;
}



/* -------------------------------------------------

open agenda article

----------------------------------------------------- */
.image_agenda{ float:left; width:50%;  display: block; position: relative;    }
.image_agenda img{ float:left; width:90%; height:auto;}

.content_agenda, .content_agenda_2{width:65%;float:right; position: relative; display:block; }
.content_agenda_article{ width:50%; float:right; position: relative; display:block; }
.content_agenda_2{ width:100%; }

#event-details { max-width: 100%; margin: auto;}
.event-title { font-size: 2rem; color: #333; margin-bottom: 1rem;}
.event-meta, .event-description-short, .event-description-long, .event-conditions, .event-pricing, .event-age, .event-registration {margin-bottom: 1.5rem;}
.event-map iframe {margin-top: 1rem;}
.event-details { background: yellow;}
.event-details img { max-width: 100%;height: auto;}
.image-credits { width:100%; display:block; float:left; font-size: 0.6em; font-family: 'wotfardlight' ; }

.time_agenda{font-size:1.5em; font-family: 'wotfardbold'; color: #000; width: 30%; height:150px;text-align:center;  position:relative; float:left; 
border:1px solid #000;display:flex;align-items:center;justify-content:center;flex-direction:column;}

.description2 {position:relative; float:left; display: inline;width:100%; margin-top:30px;}
.description2 p{font-family: 'wotfardbold' !important; font-size: 1.5em;}
.long-description{  font-size: 1em; color: #00;font-family: 'wotfardlight'; width:100%;}

.capsule_1, .capsule_2, .capsule_3{  width: 30%; height:210px; padding:10px; text-align: center; 
font-size: 1em; font-family: 'wotfardlight';line-height: 1.1;color: #000;
border:1px solid #000; border-right:none; position:relative; float:left; 
display: flex; align-items: center;     /* Centre verticalement */
justify-content: center; /* Centre horizontalement */
flex-direction: column;  /* Empile les lignes en colonne */  }

.capsule_1{  width: 20%; }
.capsule_2 {  width: 40%; }
.capsule_3 {  width: 40%;  border-right: 1px solid #000;  }


/* -------------------------------------------------

mentions_legales

----------------------------------------------------- */
.mentions-legales {
max-width: 80%;
margin: 50px auto;
padding: 20px;
line-height: 1.6;
}



@media (max-width: 1100px) {
main {margin-left: 2%; width:96%;}
#contenu {margin-left: 2%;width: 96%;}
.colonne-image, .colonne-contenu_actu {height: 10.5vw;}
.ligne {margin-bottom: 0;}
#conteneur-50  {Padding:0 0 0 0;}
.sous_rubrique .logo_container {top:-16.8vw;}
    }






@media (max-width: 950px) {
#contenu {margin-left: 0; width: 100%;}
    
#sidebar-sticky{left:0 !important;}
#sidebar-sticky.fixed {
position: relative;top: 0;z-index: 100;}
    
.titre_agenda_2 {width: 30px;height: auto;}
.ligne { display: flex;  flex-direction: column;gap:20px;margin-bottom:30px; }
.conteneur-50 {width: 100%;}
.colonne-image, .colonne-contenu_actu {height: 13vw;}
.colonne-image { width: 24%;}
.sous_rubrique .logo_container {top:-16.8vw;}

.menu_sommaire {position: relative;bottom: 0; height: auto; z-index: 100; width: 100%;}
.ligne-secondaire {display: inline;flex-direction: column;gap: 20px;}
.colonne_sommaire {width: 100%;float: none;height: auto;}

.logo_sommaire, .logo_sommaire img {display: none;}
.logo_container img {display: none;}
.sous_rubrique.sommaire {display:block; width:100%; }
.sous_rubrique.sommaire.active{ display: block;}
.sous_rubrique.sommaire.active a .logo_container a { width:100%;}
    

    
.pdf_texte_publication img {width: 100%;padding-right: 0%;}
.pdf_texte_2 {width: 100%;}
    
.upcoming-events-container {grid-template-columns: repeat(2, 1fr);}  
#rubriques-container {grid-template-columns: repeat(2, 1fr);}
 ul.grid {grid-template-columns: repeat(1, 1fr);gap: 0px;}
    .colonne_rub {
    padding: 8px;
    height: 23vw;
    border: 1px solid #ccc;
    box-sizing: border-box;
    background: #FFF;
}

.colonne_rub {height: auto;}
    
}



@media (max-width: 780px) {
#fond_transmettre2,#fond_explorer2,#fond_reveler2,#fond_ardepa2{display: none;}

#contenu {margin-top: 130px;padding:0 2% 0 2%;}
main {margin-left:2%; margin-top: 180px; width:96%;}
blockquote {padding-left: 7%;}
#nom_slogan { top: 50px;font-size: 15px; width:100%;}
#nom_slogan::before {top: -150px;height: 150px;}
#titre_arbo {top: 210px;font-size: 18px;width:100%;}
#titre_arbo:before{ top: -30px;height: 30px;}
    
#titre {width: 100%;top: 137px;font-size: 11px;  word-break: break-word; 
overflow-wrap:break-word;}
#titre::before {top: -35px;height: 35px;} 
#titre_rubrique::before { top: -20px; height: 70px; }
    
.chapo_rubrique {width: 100%;}
.navbar--items {padding: 100px 0px 0px 0px;}
.sliding-navbar{padding: 0 2% 0 2%;}
.page{padding:1px 1px 0 1px ;margin:0;}
.logo_site_spip {position:relative;width: 150px;margin-left:2%;}

header{ position: relative;}
.hamburger {width: 60px;}
.hamburger::before, .hamburger::after {width: 60px;}
.hamburger-menu {top: 50px;right: 10px;width: 80px;height: 30px;}
    
.titre_agenda_2 { width: 100%; height: auto; } 
.titre_agenda_3{margin-top:20px;transform:rotate(0deg);transform-origin:left top;white-space:nowrap;}
.colonne-image, .colonne-contenu_actu {height: auto; width:100%;}
.colonne-contenu_actu{margin-bottom:20px;}
.footer-content {display: inline;}
footer {padding:20px 10px 20px 10px;}
.author-column, .social-column {width: 100%;}
.social {float: left;}
footer p.colophon {text-align:center;}
.colonne {width: 50%; padding:0;}
    
#events-container { width: 100%; }
.sliding-navbar {padding-bottom:150px;}  
.image_agenda {width: 100%;}   
.image_agenda img {width: 100%;}   
.content_agenda_article {width: 100%;float: left;} 
.content_agenda, .content_agenda_2 {width: 100%;float: right;}  
.capsule_1, .capsule_2, .capsule_3 {width: 100%;height: auto;padding: 10px;text-align: center;}
    
.capsule_1{  border-right: 1px solid #000; border-bottom:none;}
.capsule_2 {   border-right: 1px solid #000; border-bottom:none; }

.date_agenda_2 {width: 60%;height: 150px;font-size: 1.5em;line-height: 1.1;text-align: center;}  
.time_agenda {color: #000;width: 40%;height: 150px;text-align: center;
position: relative;float: left;}
    
.boutton {padding: 10px 10px 10px 0;float: left;}
footer p.colophon {text-align: left;}
    
.upcoming-events-container {
grid-template-columns: repeat(1, 1fr);
gap: 0;
width: 100%;
height:auto;
}
   
.document_smartphone{display: block;    width: 100%} 
 article,   .document {float: left; width: 100%;padding-left: 0;min-height: auto;}   
#fond_article1 {position:absolute;width: 100%;height: auto;left: 0px;top: -140px;transform: rotate(0deg);}
#fond_article7 {position:absolute;width: 100%; height: auto; left:0;top: -150px; } 
#fond_article6 {position:absolute;width: 100%; height: auto;left:0%; top:7px; transform: rotate(0deg);}
#fond_article8{position:absolute; left:0; max-width: 100%; height: auto; top:-45px; transform: rotate(0deg);}

}




@media (max-width: 550px) {
    
.ligne-secondaire {display:none;}
#module_entete {width: 100%;height: auto;position: absolute;left: 0;margin-left:0;top: 50px;}
header{ position: relative; padding:0; margin:0; width:100%;}
  
.colonne { width: 100%;}
h3.rubrique_menu { font-size: 2em; border-top:1px solid #000; border-bottom:1px solid #000;  margin-bottom:20px; width:100%; float:left;  }
li.sous_rubrique{ font-size: 1.3em;}
li.sous_sous_rubrique { font-size: 1.1em;}

.texte-en-deux-colonnes, .texte-en-deux-colonnes_adhesion {column-count: 1;column-gap: 0px;width: 100%;}
    
#rubriques-container {grid-template-columns: repeat(1, 1fr);}
.colonne_rub {height: auto;}
.colonne_rub:last-child {margin-bottom: 20px;}
.titre_rubrique {margin-top: 20px;}
li.pdf {width: 100%;}

#fond_explorer { width: 130%; left: -13.1%; top: -50px;}
#module_jaune,#module_vert,#module_rose{ display:none;}
#fond_ardepa { width: 110%; left: -90px; top: -80px;transform: rotate(0deg);}

li.pdf_activite {width: 50%;height: 35vw;}
li.document_serie_classique_rapport {width: 70%; padding-right: 4%;float: right;}
    

   
    }