html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}input[type="search"]{-webkit-appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}

a{
  color: white;
  text-decoration: none;
  transition: .1s ease
}


a:hover{
  color: #DF4869;
}
::selection {
  background: #DF4869; /* WebKit/Blink Browsers */
}

body{
  background-color: #333637;
  color: white;
  padding: 20px;
  max-width: 100%;
  overflow-x: hidden;
}



/*HEADER*/

header{
  position: fixed;
  top: 20px;
  width: calc(100vw - 60px)
}

.headerhome , .header_stick{
  position: sticky;
  top: 20px;
  width: auto
}
header {
z-index: 999
}

.logo{
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  overflow: visible;
  position: sticky;
  top: 0;          /* coin haut de la fenêtre */
  left: 0;         /* coin gauche */
  transform-origin: 0 0; /* coin haut-gauche pour l’échelle et rotation */
  will-change: transform, opacity; /* optimisation du rendu */
  z-index: 999
}
header , .search-form input{
  display: flex;
  justify-content: space-between;
  font-family: 'Borna';
  font-weight: bold;
  text-transform: uppercase;
  font-size: 2.1vw;
  z-index: 999
}
.menu , .menu2 , #search{
  display: flex
}
header li{
margin-left: 1vw;
}
#menu{
}
.search-field{
  width: 21vw;
  margin-left: 10px;
}
.search2{
  display: flex;
  justify-content: flex-start;
}
.search-form {
  display: flex;
  align-items: center;
  transform: translateY(-6px);
}
.search-form input {
  background: transparent; /* pas de fond */
  border: none;            /* pas de bordure */
  outline: none;           /* pas de contour focus par défaut */
  flex: 1;
  color: white;            /* texte en blanc, ajustable */
}
.search-form button {
  background: none;
  border: none;
  cursor: pointer;
  color: white;            /* icône en blanc */
}
.headerhome #branding{
  opacity: 0
}

/*footer*/
.footer_contact{
  font-family: 'Borna';
  text-transform: uppercase;
  font-weight: normal;
  font-size: 7vw;
}

/*articles*/
.first_article , .articlesdeux , #articles-load-more-2{
  grid-column: 1 / 4;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.articlesdeux{
  margin-bottom: 80px;
  margin-top: 100px;
}
.first_article{
  margin-top: 100px;
}
.first_article figure, .figure_link{
  grid-column: 1 / span 1;
}
.first_article figure{
  width: inherit;
}
 .post-categories{
  margin-right: 10px;
  font-weight: bold;
}
 .date {
  margin-left: 10px;
  font-weight: Regular;
}
figure , img{
  width: 100%;
}
figure{
  height: auto;
  overflow: hidden;
  background-image:
linear-gradient(to bottom, rgba(188, 225, 255, 1), rgba(148, 134, 111, 1));
line-height: 0
}
.first_article figure{
  height: 100%
}
.first_article img{
  height: 100%
}
img{
  object-fit: cover;
opacity: 0.5;
filter: grayscale(100%);
object-position: center;
transition: .2s ease;
}
a img:hover , a:hover img{
transform-origin: center;
filter: grayscale(0%);
opacity: .8
}
.champs_article{
  display: flex;
  justify-content: flex-start;
  font-family: 'Borna';
  font-size: 32px;
}
.champs_article2{
  font-size: 20px;
  margin-bottom: 15px;
  margin-top: 5px;
}
.first_article h1{
  font-family: 'Borna';
  font-weight: bold;
  font-size: 96px;
  text-transform: uppercase;
  width: fit-content
}
.complice_link{
  display: inline-block;
  font-size: 36px;
  font-family: 'Sfizia';
  text-transform: none;
  font-weight: normal;
  font-style: italic;
}
.article_all{
  grid-column: 2 / span 4;
}
.article_text{
  font-family: 'Sfizia';
  text-transform: none;
  font-weight: normal;
  font-size: 24px;
  line-height: 120%
}
.article_index_text{
  margin-top: 10px;
  max-width: 800px
}
.articlesdeux h1{
  font-family: 'Borna';
  font-weight: bold;
  font-size: 4vw;
  text-transform: uppercase;
  width: fit-content;
  word-break: normal;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;

}
.articlesdeux h2{
  font-size: 24px;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 10px;
}
.complice2{
  font-family: 'Sfizia';
  text-transform: none;
  font-size: 24px;
  line-height: 120%;
}

.article{
  margin-bottom: 100px;
}
.height_article{
  height: 40vw;
  overflow: hidden;
}
.height_article figure {
  height: 100%;
}
.height_article figure img {
  height: 100%;
}


/*dossiers mis en avant*/
.dossier_index{
  display: flex;
  width: 100vw;
  transform: translateX(-20px);
  margin-top: 100px;
  margin-bottom: 100px;
}
.dossier_index_titleblock{
  width: 50vw;
  background-image:
linear-gradient(to bottom, rgba(188, 225, 255, .33), rgba(148, 134, 111, .33));
height: 50vw;
font-family: 'Borna';
text-transform: uppercase;
padding: 50px;
display: flex;
flex-wrap: wrap;
align-content: flex-end;
}
.dossier_index_titleblock h1{
font-weight: bold;
font-size: 200px;
text-transform: uppercase;
word-break: normal;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
margin-bottom: 20px;
}
.dossier_index_titleblock span{
font-size: 24px;
text-decoration: underline;
}
.dossier_index_articles{
  display: flex;
  flex-wrap: wrap;
  min-height: 100%
}
.dossier_index_post{
  width: 25vw;
  height: 50%;
  min-height: 25vw
}
.dossier_index_post figure , .dossier_index_post figure img{
  height: 100%
}
.dossier_index_post figure {
  position: relative; /* permet de positionner le texte à l'intérieur */
  overflow: hidden;   /* évite que ça dépasse */
}
.dossier_index_post_text {
  position: absolute;
  bottom: 0; /* colle le bloc en bas */
  left: 0;
  width: 100%; /* prend toute la largeur */
  padding: 20px; /* espace intérieur */
}
.dossier_index_post_text h1{
  font-family: 'Borna';
  text-transform: uppercase;
  font-weight: bold;
  font-size: 48px;
  height: 100%;
  line-height: 100%;
  margin-bottom: 10px;
  word-break: normal;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;

}
.dossier_index_post_text h2{
  font-family: 'Sfizia';
  font-weight: normal;
  font-style: italic;
  font-size: 30px;
  line-height: 100%
}

.link_index{
  font-family: 'Borna';
  text-transform: uppercase;
  font-weight: normal;
  font-size: 7vw;
}


.big_title {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  white-space: nowrap; /* le texte reste sur une ligne */
  overflow: hidden;
  font-family: 'Borna';
  text-transform: uppercase;
  font-weight: bold;
  line-height: 75%;
  margin-bottom: 15px;
}

.bloc_complices{
  padding: 20px;
  width: 100vw;
  background-repeat: repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  font-family: 'Borna';
  text-transform: uppercase;
  font-weight: normal;
  font-size: 7vw;
  margin-left: -20px;
  margin-top: 50px;
}

.spinner {
  border: 10px solid rgba(255, 255, 255, 0.2);
  border-top: 10px solid #fff;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  animation: spin 0.8s linear infinite;
  margin: 20px auto;
  margin-bottom: 100px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



.complice_single h1{
  font-family: 'Borna';
  text-transform: uppercase;
  font-weight: normal;
  font-size: 7vw;
  margin-top: 100px;
}

.complice_single p{
  font-family: 'Sfizia';
  font-weight: normal;
  font-size: 40px;
  margin-top: 20px;
  max-width: 1300px;
  line-height: 120%
}

.contact_text{
  font-family: 'Sfizia';
  font-weight: normal;
  font-size: 40px;
  margin-top: 20px;
  max-width: 1300px;
  line-height: 120%;
  margin-top: 80px;
  margin-bottom: 20px;

}


.hero_block{
  width: 100vw;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh
}

.hero_image{
  width: 50%
}

.post{
}



.hero_title {
  width: 50%;
  background-image: linear-gradient(to bottom, rgba(188, 225, 255, .33), rgba(148, 134, 111, .33));
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end; /* ✅ toujours aligné en bas */
  padding: 20px;

}

.hero_title h1 {
  font-family: 'Borna';
  font-weight: bold;
  font-size: 200px;
  text-transform: uppercase;
  word-break: normal;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  margin: 0; /* important : on gère avec JS */
}

.hero_title span {
  font-family: 'Borna';
  font-weight: normal;
  font-size: 24px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 5px
}

.hero_image img{
  min-height: 100%;
}
.hero_image_text {
  position: absolute;
  left: 50%;
  top: 0%;
  width: 50%; /* prend toute la largeur */
  height: 100%;
  padding: 20px; /* espace intérieur */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  line-height: 150%;
  text-align: center;
}
.hero_image_text span{
  font-family: 'Borna';
  font-weight: bold;
  font-size: 32px;
  width: 100%
}
.hero_image_text h2{
  font-family: 'Sfizia';
  font-weight: normal;
  font-size: 62px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  font-style: italic;
  margin-top: 20px;
  line-height: 90%
}


.dossier_block{
  width: 100%;
  background-image: linear-gradient(to bottom, rgba(188, 225, 255, .33), rgba(148, 134, 111, .33));
  padding: 20px;
  margin-bottom: 20px;
}

.dossier_block h1{
  font-family: 'Borna';
  font-weight: bold;
  font-size: 128px;
  text-transform: uppercase;
  margin-bottom: 40px;
}
.dossier_block span{
  font-family: 'Borna';
  font-weight: normal;
  font-size: 20px;
}
.dossier_block p{
  font-family: 'Sfizia';
  font-weight: normal;
  font-size: 50px;
  margin-top: 10px;
  line-height: 120%;
  font-style: italic;
}
.article_dossiers{
  margin-top: 100px;
}

.article_text_complice{
  margin-top: 10px;
}

.hero_dossier{
  display: flex;
  background-image: linear-gradient(to bottom, rgba(188, 225, 255, .33), rgba(148, 134, 111, .33));
  min-height: 60vh;
  position: relative;
  margin-left: -20px;
  margin-top: -20px;
  align-content: flex-end;
  padding: 20px;
  flex-wrap: wrap;
}
@media (min-width:850px) {
  .hero_dossier{
    height:auto
  }
  .hero_dossier h1{
    margin-top: 200px
  }
}

.hero_dossier h1{
  font-family: 'Borna';
  font-weight: bold;
  font-size: 128px;
  text-transform: uppercase;
  margin-bottom: 40px;
  width: 100%
}
.hero_dossier span{
  font-family: 'Borna';
  font-weight: normal;
  font-size: 20px;
}
.hero_dossier p{
  font-family: 'Sfizia';
  font-weight: normal;
  font-style: italic;
  font-size: 40px;
  max-width: 1200px;
  margin-top: 15px;
}

.article_dossier_single{
  width: 100vw;
  margin-left: -20px;
  margin-bottom: 200px;
}

.dossier_index_articles{
  display: flex;
  flex-wrap: wrap;
  width: 100vw;
}


.article_dossier_single .dossier_index_post{
  width: 50%
}

.post_dossier_text{
  line-height: 120%;
  margin-top: 20px;
  font-family: 'Sfizia';
  font-weight: normal;
  font-size: 24px;
  max-width: 800px;
  margin-top: 15px;
}

.dossier100{
  height: auto;
}
.no-results{
  margin-top: 200px;
  margin-bottom: 100px;
  font-family: 'Borna';
  font-weight: bold;
  font-size: 64px;
  text-transform: uppercase;
}

.result_article{
  margin-top: 250px;
  margin-bottom: 100px;
  font-family: 'Borna';
  font-weight: bold;
  font-size: 64px;
  text-transform: uppercase;
}

.
.result_article h1{
  font-size: 128px;
}
.post_content{
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid white;
  margin-bottom: 200px;
}
.post_content h2{
  font-family: 'Borna';
  font-weight: bold;
  font-size: 48px;
  text-transform: uppercase;
  margin-bottom: 40px;
  margin-top: 80px;
}
.post_content h3{
  font-family: 'Sfizia';
  font-weight: normal;
  font-style: italic;
  font-size: 64px;
  margin-top: 35px;
  margin-bottom: 35px;
  width: calc(100% + 200px) !important;
  margin-left: -100px;
  margin-right: -100px;
}

.post_content p{
  line-height: 130%;
  font-family: 'Sfizia';
  font-weight: normal;
  font-size: 24px;
  max-width: 800px;
  margin-top: 15px;
  margin-bottom: 15px;

}

.wp-caption , .wp-video{
  width: calc(100% + 200px) !important;
  margin-right: -100px;
  height: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: -100px;
}

.post_content .wp-caption-text{
  font-size: 18px;
  margin-top: 5px;
}

.post_content blockquote p{
  margin-left: 100px;
  margin-right: 100px;
  font-size: 18px;
}

em{
  font-style: italic;
}

.post_content .article_intro{
  width: 80vw;
}
.article_date{
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Sfizia';
  font-weight: normal;
  font-size: 18px;
  padding-bottom: 10px;
  margin-bottom: 30px;
  border-bottom: 1px solid white
}
.article_intro{
  max-width: 1550px;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Sfizia';
  font-weight: normal;
  font-style: italic;
  font-size: 40px;
  padding-bottom: 30px;
}
 .post_content .modern-footnotes-footnote__note–desktop p{
   line-height: 600%
 }
 .modern-footnotes-footnote--selected {
  background-color: inherit;
 }
 .modern-footnotes-footnote__connector {
   display: none
 }
 .modern-footnotes-footnote__note--tooltip {
   position: absolute;
   left: 0;
   border: none;
   background: #EAEAEA;
   padding: .7em 1em;
   border-radius: 0px;
   max-width: 300px;
   box-shadow: none;
   box-sizing: border-box;
   z-index: 1;
   width: 1000px;
   font-size: 18px;
   line-height: 120%
 }

 .post_content a{
  color: #DF4869;
  text-decoration: underline;
}
.post_content a:hover{
  text-decoration: none;
}

.modern-footnotes-footnote a{
  text-decoration: none;
  font-weight: bold;
}

.post_content strong{
 font-weight: bold;
}

 .mentions{
   margin-top: 300px;
   margin-bottom: 100px;
   font-family: 'Sfizia';
   font-weight: normal;
   font-size: 24px;
 }
 .mentions h2{
   font-family: 'Borna';
   font-weight: bold;
   font-size: 48px;
   text-transform: uppercase;
   margin-bottom: 40px;
   margin-top: 80px;
 }

 .connexe{
   font-family: 'Borna';
   font-weight: normal;
   font-size: 48px;
   text-transform: uppercase;
   width: 100%;
   padding-bottom: 10px;
   border-bottom: 1px solid white;
   margin-bottom: -100px;
 }


.text_result{
  font-family: 'Sfizia';
  font-weight: normal;
  font-size: 42px;
  text-transform: none;
  margin-top: 10px;
  max-width: 1200px;
}
.results h2{
  font-family: 'Sfizia';
  font-weight: normal;
  text-transform: none;
  font-style: italic;
  margin-top: 20px;
}

.results{
  border-top: 1px solid white;
  padding-top: 50px;
  padding-bottom: 50px;
}

.results_thin{
  font-weight: normal;
  margin-bottom: 10px;
}



.progress-bar-container {
    position: sticky;
    top: 10vh;
    width: 80vh;
    background: #EAEAEA;
    z-index: -1;
    transform: rotate(90deg);
    transform-origin: top left;
    border-radius: 3.5px
}
.div_article{
  margin-top: calc(100vh + 150px);

}

.article_intro p{
  margin-left: 20px;
  margin-right: 20px;
}
.progress-bar {
    height: 7px;
    background: #DF4873;
    animation-name: width;

    /* animation timeline is tied to vertical scroll position */
    animation-timeline: scroll(y);
    border-radius: 3.5px
}

@keyframes width {
    from { width: 0 }
    to   { width: 100% }
}

.post {
  margin-top: -80vh
}

/* conteneur de la barre */
.progress-container {
  position: sticky;
  top: 10vh;
  left: 0;             /* 👉 change en 'right: 0;' si tu veux à droite */
  height: 80vh;       /* toute la hauteur de l’écran */
  width: 6px;          /* 👉 largeur de la barre */
  background-color: #EAEAEA; /* 👉 couleur de fond */
  z-index: 9999;
  overflow: hidden;    /* évite tout dépassement interne */;
  margin-top: calc(100vh + 200px);
  border-radius: 3px;

}

/* barre de progression interne */
.progress-bar {
  display: block;
  width: 100%;               /* 👉 toujours la largeur du conteneur */
  height: 0;                 /* commence vide */
  background-color: #DF4873; /* 👉 couleur de progression */
  transition: height 0.2s ease-out; /* animation fluide */
}


@media (max-width:1200px) {
  .first_article h1 , .dossier_block h1 , .hero_dossier h1 , .result_article h1{
    font-size: 42px;
  }
  .articlesdeux h1 , .result_article h2{
    font-size: 28px;
  }
  .dossier_index_post_text h1 , .complice_link{
    font-size: 28px;
  }
  .post_dossier_text , .text_result , {
    font-size: 18px;
  }
  .wp-caption {
    width: 100%!important;
    margin-left: 0;
    margin-right: 0;
}
.post_content h3{
  width: 100%!important;
  margin-left: 0;
  margin-right: 0;
}
}
@media (max-width:850px) {
  .page_grid , .articlesdeux , .first_article , .dossier_index , #articles-load-more-2{
    display: block;
  }
  .champs_article{
    margin-bottom: 10px;
    margin-top: 10px;
  }
  .height_article{
    height: auto;
  }
  .dossier_index_titleblock{
    width: 100%;
    padding: 20px;
  }
  .big_title_dossier{
    font-size: 50px!important;
  }
  .dossier_index_post{
      width: 50vw;
      min-height: 50vw
  }
  #menu , #logoX{
    display: none
  }
  .headerhome #branding{
    opacity: 1;
    font-size: 40px;
  }
  #branding{
    opacity: 1;
    font-size: 40px;
  }
  .article{
    margin-bottom: 0px;
    margin-top: 25px;
    border-bottom: 1px solid white;
    padding-bottom: 25px;
  }
  body{
    padding: 5px;
  }
  .articlesdeux h1{
    font-size: 48px;
  }
  .articlesdeux{
    margin-top: 0px;
  }
  .hero_block{
    flex-wrap: wrap-reverse;
  }
  .hero_title, .hero_image{
    width: 100%
  }
  .hero_image_text{
    left: 0;
    top: 20vh;
    width: 100%;
    position: absolute;
    height: auto
  }
  .progress-container{
    display: none;
  }
  .post{
    margin-top: calc(100vh + 20px)
  }
  .article_intro p{
    margin-left: 0;
    margin-right: 0
  }
  .dossier_index_titleblock{
    height: auto;
  }
  .dossier_index{
    transform: translateX(-5px);
    margin-bottom: 25px;
  }
  .first_article{
    margin-bottom: 25px;
    border-bottom: 1px solid white;
    padding-bottom: 25px;
  }
  .hero_dossier{
    flex-wrap: wrap;
  }
  .post_dossier_text{
    display: none
  }
  .dossier_index_post_text{
    padding: 10px;
  }
  .hero_dossier , .article_dossier_single{
    margin-left: -5px
  }
  .dossier_index_post_text h1{
    margin-bottom: 5px
  }
  .connexe{
    margin-bottom: 0
  }
  .post_content{
    margin-bottom: 70px;
  }
  .hero_title span{
    margin-top: 10px;
    display: block;
  }
  .text_result{
    font-size: 24px;
  }
  .results{
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .post_content blockquote p{
    margin-left: 30px;
  margin-right: 30px;
  }
  .first_article{
    margin-top: 5px;
  }
  .headerhome, .header_stick{
    top: 5px
  }
  .plus{
    font-size: 40px;
    margin-right: 5px
  }
  .plus:active + nav{
    display: block;
    background: none
  }
  header{
    font-size: 40px
  }
  header, .search-form input{
    font-size: 40px;
    margin-left: 0
  }
  header{
    width: 100%;
    top: 0px;
    padding-right: 5px;
  }
  .articlemobile{
    margin-top: 100px
  }
  .bloc_complices{
    font-size: 40px;
    word-break: normal;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    font-size: 40px
  }
  .complice_single p{
    font-size: 24px
  }
  .contact_text{
    font-size: 30px
  }
  .footer_contact{
    margin-top: 20px;
  }
  /* Exemple de style si tu veux que nav change */
  #menu.active .menu, .menu2, #search{
    display: block;
  }
  .hero_title , .hero_image{
  height: 50vh!important;  }

  .modern-footnotes-footnote__note {
    line-height: 100%
  }
.dossier_block p{
  font-size: 30px
}
.dossier_block{
  padding: 10px
}

}
@media (min-width:850px) {
  #topnav_hamburger_icon{
    display: none
  }
}

/* Rotation de ton + quand actif */
#topnav_hamburger_icon.active {
  transform: rotate(45deg) translateX(5px) translateY(-5px);
  transition: transform 0.3s ease;
  transform-origin: center;
}

#menu.active {
  display: block;
  position: fixed;
  bottom: 0px
}
#header.active {
  height: 100vh;
  background-color: #333637;
  flex-wrap: wrap;
  margin-top: -5px;
  padding-top: 5px;
  top: 0;
  width: 100vw;
  margin-left: -5px;
  padding-left: 5px;
  }


  #topnav_hamburger_icon{
    height: 28px;
  }

.not-found{
  margin-top: 200px;
  margin-bottom: 200px;
}
.not-found h1{
  font-family: 'Borna';
  font-weight: bold;
  font-size: 70px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.not-found p{
  font-family: 'Sfizia';
  font-weight: normal;
  font-size: 20px;
}