@import url('../css/fonts.css');


html, body{
    margin: 0%;
    box-sizing: border-box;
    overflow-x: hidden;
	background: linear-gradient(120deg, #a1c4fd 0%, darkgray 100%);;
}




:root{

    /*      Theme colors        */
    --text-gray: #4f4f4f;
    --text-light : #1f1f1f;
    --bg-color: #0f0f0f;
    --white: #ffffff;
    --midnight: #104f55;

    /* gradient color   */
    --sky: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);

    /*      theme font-family   */
    --Abel: 'Abel', cursive;
    --Anton: 'Anton', cursive;
    --Josefin : 'Josefin', cursive;
    --Lexend: 'Lexend', cursive;
    --Livvic : 'Livvic', cursive;
}


/* ---------------- Global Classes ---------------*/

a{
    text-decoration: none;
    color: var(--text-gray);
}

.flex-row{
    display: flex;
    flex-direction: row;    
    flex-wrap: wrap;
}

ul{
    list-style-type: none;
}

h1{
    font-family: var(--Lexend);
    font-size: 2.5rem;
}

h2{
    font-family: var(--Lexend);
}

h3{
    font-family: var(--Abel);
    font-size: 1.3rem;
}

button.btn{                     /* Pour tous les boutons */
    border: none;				/* sans trait au bord  */
 /*   border-radius: 2rem;		/* bordure arrondie  */
	border-radius: 10px;
    padding: 1rem 3rem;
    font-size: 1rem;
    font-family: var(--Livvic);
    cursor: pointer;
}

span{
    font-family: var(--Abel);
}

.container{
    margin: 0 5vw;
}

.text-gray{
    color: var(--text-gray);
}

p{
    font-family: var(--Lexend);
    color: var(--text-light);
}

/* ------x------- Global Classes -------x-------*/

/* --------------- navbar ----------------- */

.nav{
    background: linear-gradient(120deg, #a1c4fd 0%, darkgray 100%);
    padding: 0 2rem;
    height: 0rem;
    min-height: 15vh;
    overflow: auto;
    transition: height 1s ease-in-out;
}

.nav::-webkit-scrollbar {
  display: none; /* Masquer la barre de défilement pour les navigateurs basés sur WebKit comme Chrome et Safari */
}

.nav {
  scrollbar-width: none; /* Masquer la barre de défilement pour les navigateurs basés sur Firefox */
}

.nav .nav-menu{    
    justify-content: space-between;
}

.nav .toggle-collapse{				/* Menu Androide  */
    position: absolute;
    top: 0%;     /*Je l'enleve si je mets le menu en bas de l'image */
    width: 90%;
    cursor: pointer;
    display: none;
}

.nav .toggle-collapse .toggle-icons{
    display: flex;
    justify-content: flex-end;
    padding: 1.7rem 0;
}

.nav .toggle-collapse .toggle-icons i{   /* Menu Androide ligne  */
    font-size: 1.4rem;
    color: var(--text-gray);
}

.collapse{
 /*   height: 30rem;  */
     height: 650px;
}

.nav .nav-items{
    display: flex;
    margin: 0;
}

.nav .nav-items .nav-link{
    padding: 1.6rem 1rem;
    font-size: 1.1rem;
    position: relative;
    font-family: var(--Abel);
    font-size: 1.1rem;
}

.nav .nav-items .nav-link:hover{
 /*   background-color: var(--midnight);  */
	background-color: lightblue;
}

.nav .nav-items .nav-link:hover a:not(.sub-menu){
    color: var(--white);
}

.nav .nav-brand a{
    font-size: 1.6rem;
    padding: 1rem 0;
    display: block;
    color: #ff0909;
    font-family: var(--Lexend);
    font-size: 1.6rem;
}

.nav .social{				/* Menu social*/
    padding: 1.4rem 0
}

.nav .social i{
    padding: 0 .2rem;
}

.nav .social i:hover{
    color: #a1c4cf;
}

.sub-menu {
  display: none;
}

/* Afficher le sous-menu lorsque la classe 'active' est appliquée */
.sub-menu.active {
  display: block;
}

/* -------x------- navbar ---------x------- */


/* ----------------- Main Content----------- */

/* --------------- Site title ---------------- */




/* Image Intro du site  */
main .site-title{
    background: url('../images/BGImage.jpg');
    background-size: cover;
   /* height: 110vh; */
    height: 500px;
    display: flex;
    justify-content: center;
}

main .site-title .site-background{
    padding-top: 10rem;
    text-align: center;
    color: #fff;
}


main .site-title .site-background .N1{
    font-size: 25px;
	opacity:0;
	animation: transition 0s ease-in-out 0.5s forwards;
}
main .site-title .site-background .N2{
    font-size: 25px;
	opacity:0;
	animation: transition 0.5s ease-in-out 1s forwards;
}
main .site-title .site-background .N3{
    font-size: 25px;
	opacity:0;
	animation: transition 1s ease-in-out 1.5s forwards;
}
main .site-title .site-background .N4{
    font-size: 25px;
	opacity:0;
	animation: transition 1.5s ease-in-out 2s forwards;
}
main .site-title .site-background .N5{
    font-size: 25px;
	opacity:0;
	animation: transition 2.5s ease-in-out 3s forwards;
}

@keyframes transition {
    0%   { margin-left: -70px;opacity:0; }
    100% { margin-left: 0;opacity:1; }
}

main .site-title img{
    margin: .3rem;
	border-radius: 70px;
	border: solid 1px #000;
	width: 125px;
	height: 125px;
}

main .site-title h1, h3, h4{
    margin: .3rem;
	border-radius: 2px;
	border: solid 1px #fff;
}

main .site-title .btn{        /* Le Bouton Au milieu de L'image du Site  */
    margin: 1.8rem;
    background: var(--sky);
}

main .site-title .btn:hover{
    background: transparent;
    border: 1px solid var(--white); 
    color: var(--white);
}

/* --------x------ Site title --------x------- */

/* --------------- Blog Carousel ------------ */

main .blog{
/*   background: url('../assets/Abract01.png'); */
/*   background-repeat: no-repeat;  */
/*   background-position: right;  */
/*   height: 100vh;  */
	 height: 600px;
     width: 100%;
/*   background-size: 65%;  */
/*	 background: white;  */
}

main .blog .blog-post{
    padding-top: 6rem;
}

main .blog-post .blog-content{
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 80%;
    margin: 3rem 2rem;
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.2);
}

main .blog-content .blog-title{
    padding: 2rem 0;
}

main .blog-content .btn-blog{
    padding: .7rem 2rem;
    background: var(--sky);
    margin: .5rem;
}

main .blog-content span{
    display: block;
}

section .container .owl-nav{
    position: absolute;
    top: 0%;
    margin: 0 auto;
    width: 100%;
}

.owl-nav .owl-prev .owl-nav-prev,
.owl-nav .owl-next .owl-nav-next{
    color:white;  					/* color: var(--text-gray);  */
    background: black;    			/* background: transparent; */
    font-size: 2rem;
/*	border-radius: 50px;  */
}

.owl-theme .owl-nav [class*='owl-']:hover{
    background: black;  		/* background: transparent; */
    color:red;				/* color: var(--midnight);  */
	transition:all 1s ease;
}

.owl-theme .owl-nav [class*='owl-']{
    outline: none;
}


/* -------x------- Blog Carousel -----x------ */

/* ---------------- Site Content ----------------*/

main .site-content{
    display: grid;
    grid-template-columns: 70% 30%;
}





/* -------x------- Mon Ajout Contact ---------x------- */

main .contact-form h1{
text-align: center;
color:#f44336;	
}
main .contact-form h2{
text-align: center;
}
main .contact-form h3{
border: none;
}

main .contact-form p{
width: 800px; 
}

main .contact-title{
	margin-top: 100px;
	color: #fff;
	text-transform: uppercase;
	transition: all 4s ease-in-out;
}

main form{
	margin: 50px;
	transition: all 4s ease-in-out;	
}

main .form-control{
	width: 600px;
}

main input{
	height: 45px;
}

main .submit{
	border-radius: 9px;
	font-family: sans-serif;
	color: #fff;
	font-size: 135%;
	padding: 10px 20px;
	border: solid #036A81 3px;
	text-transform: uppercase;
	text-decoration: none;
	background-color: #f44336;
}

main .submit:hover{
	background-color: #fff;
	cursor: pointer;
	color: #000;
}
/* -------x------- Fin Contact ---------x------- */




/* -------x------- Mon Ajout Ma Gallerie ---------x------- */

main .posts h1{
text-align: center;
font-size: 30px;
color:#f44336;	
}
main .posts h2{
text-align: center;
}

main .card{
	float: left;
	background: aqua;
	width:220px;
	height:400px;
	margin: 10px;
	border-radius: 15px;
}

main .card-image{
	background-color: yellow;
	height:170px;
	margin-bottom: 15px;
	background-size: cover;
	border-radius: 15px 15px 0 0;
}

main .car-1{
	background-image: url('../images/IMG_6455.jpg');
	clip-path: polygon(0 0,100% 0, 100% 85%, 0 100%);
	filter: grayscale(100%);
	transition: 1s;
}
main .car-1:hover{
	filter: grayscale(0);
/*	transform: scale(1.1); */
}

main .car-2{
	background-image: url('../images/Skynews team Maroua.jpg');
	clip-path: polygon(0 0,100% 0, 100% 85%, 0 100%);
	filter: grayscale(100%);
	transition: 1s;
}
main .car-2:hover{
	filter: grayscale(0);
/*	transform: scale(1.1); */
}

main .car-3{
	background-image: url('../images/IMG_20170120_155218.jpg');
	clip-path: polygon(0 0,100% 0, 100% 85%, 0 100%);
	filter: grayscale(100%);
	transition: 1s;
}
main .car-3:hover{
	filter: grayscale(0);
/*	transform: scale(1.1); */
}

main .car-4{
	background-image: url('../images/Jablonowski and gendarmes.jpg');
	clip-path: polygon(0 0,100% 0, 100% 85%, 0 100%);
	filter: grayscale(100%);
	transition: 1s;
}
main .car-4:hover{
	filter: grayscale(0);
/*	transform: scale(1.1); */
}

main .car-5{
    background-image: url('../images/P1010032.jpg');
    clip-path: polygon(0 0,100% 0, 100% 85%, 0 100%);
    filter: grayscale(100%);
    transition: 1s;
}
main .car-5:hover{
    filter: grayscale(0);
/*  transform: scale(1.1); */
}

main .card P{
	padding: 10px;
	font-size: 10px;
	filter: grayscale(100%);
	transition: 1s;
}

main .card a{    /* Le bouton à l'interieur */
	background-color: black;
	color:white;
	padding: 15px 20px;
	display: block;
	text-align:center;
	text-decoration: none;
	font-size: 12px;
	margin: 20px 50px;
	border-radius: 15px;
}

main .card a:hover{    /* Le bouton à l'interieur */
	background-color: white;
	color:black;
	transition:all 1s ease;
}

main .card:hover{
	background-color: rgb(62, 62, 62);
	color:white;
	cursor: pointer;
/*	transform:scale(1.03); */
	transition:all 1s ease;
}

/* -------x------- Fin ma gallerie ---------x------- */

main .post-content{
    width: 100%;
    
}

main .site-content .post-content > .post-image, .post-title{
    padding: 1rem 2rem;
    position: relative;
}

main .site-content .post-content > .post-image .post-info{
    background: var(--sky);
    padding: 1rem;
    position: absolute;
    bottom: 0%;
    left: 20vw;
    border-radius: 3rem;
}

main .site-content .post-content > .post-image > div{
    overflow: hidden;
}

main .site-content .post-content > .post-image .img{
    width: 100%;
    transition: all 1s ease;
}

main .site-content .post-content > .post-image .video{
    width: 100%;
    transition: all 1s ease;
}

/*main .site-content .post-content > .post-image .img:hover{
    transform: scale(1.1); 
}*/

main .site-content .post-content > .post-image .post-info span{
    margin: 0 .5rem;
}

main .post-content .post-title a{
    font-family: var(--Anton);
    font-size: 1.5rem;
}

main .post-content .post-title p{
    text-align: justify;
}

.site-content .post-content .post-title .post-btn{
    border-radius: 5px;
    padding: .7rem 1.5rem;
  /*  background: var(--sky);  */
	background: gray;
}

.site-content .post-content .post-title .post-btn:hover{
    border-radius: 5px;
    padding: .7rem 1.5rem;
  /*  background: var(--sky);  */
	background: white;
	border: solid 1px black;
}

.site-content .pagination{
    justify-content: center;
    color: var(--text-gray);
    margin: 4rem 0;
}

.site-content .pagination a{
    padding: .6rem .9rem;
    border-radius: 2rem;
    margin: 0 .3rem;
    font-family: var(--Lexend);
}

.site-content .pagination .pages{
    background: var(--text-gray);
    color: var(--white);
}

/* -------x-------- Site Content --------x-------*/


/* --------------- Sidebar ----------------------- */

.site-content > .sidebar .category-list{
    font-family: var(--Livvic);   
}


/*.site-content .sidebar .popular-post .post-content{
    padding: 1rem 0;  
}*/

/*.site-content .sidebar .popular-post h2{
    padding-top: 8rem; 
}*/

.site-content .sidebar .popular-post .post-info{
    padding: .4rem .1rem !important;
    bottom: 0rem !important;
    left: 1.5rem !important;
    border-radius: 0rem !important;
    background: white !important;
}

.site-content .sidebar .popular-post .post-title a{
    font-size: 1rem;
}

.site-content .sidebar .newsletter{
    padding-top: 10rem;
}

.site-content .sidebar .newsletter .form-element{
    padding: .5rem 2rem;
}

.site-content .sidebar .newsletter .input-element{
    width: 80%;
    height: 1.9rem;
    padding: .3rem .5rem;
    font-family: var(--Lexend);
    font-size: 1rem;
}

.site-content .sidebar .newsletter .form-btn{
    border-radius: 0;
    padding: .8rem 32%;
    margin: 1rem 0;
    background: var(--sky);
}

.site-content .sidebar .popular-tags{
    padding: 5rem 0;
}

.site-content .sidebar .popular-tags .tags .tag{
    background: var(--sky);
    padding: .4rem 1rem;
    border-radius: 3rem;
    margin: .4rem .6rem;
}


/* -------x------- Sidebar -----------x----------- */

/* ---------x------- Main Content -----x----- */


/* ----------------- Footer --------------------- */

footer.footer{
    height: 100%;
    background: var(--bg-color);
    position: relative;
}

footer.footer .container{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

footer.footer .container > div{
    flex-grow: 1;
    flex-basis: 0;
    padding: 3rem .9rem;
}

footer.footer .container h2{
    color: var(--white);
}

footer.footer .newsletter .form-element{
    background: black;
    display: inline-block;
}

footer.footer .newsletter .form-element input{
    padding: .5rem .7rem;
    border: none;
    background: transparent;
    color: white;
    font-family: var(--Josefin);
    font-size: 1rem;
    width: 74%;
}

footer.footer .newsletter .form-element span{
    background: var(--sky);
    padding: .5rem .7rem;
    cursor: pointer;
}

footer.footer .instagram div > img{
    display: inline-block;
    width: 25%;
    height: 50%;
    margin: .3rem .4rem;
}

footer.footer .follow div i{
    color: var(--white);
    padding: 0 .4rem;
}

footer.footer .rights{
    justify-content: center;
    font-family: var(--Josefin);
}

footer.footer .rights h4 a{
    color: var(--white);
}

footer.footer .move-up{
    position: absolute;
    right: 6%;
    top: 50%;
}

footer.footer .move-up span{
    color: var(--midnight);
}

footer.footer .move-up span:hover{
    color: var(--white);
    cursor: pointer;
}


/* Mes Ajout Footer Nav ***************************/

.move-up.Footer-nav-up{
    color:white;  					/* color: var(--text-gray);  */
    background: black;    			/* background: transparent; */
    font-size: 2rem;
/*	border-radius: 50px;  */
}

.move-up.Footer-nav-up:hover{
    background: black;  		/* background: transparent; */
    color:red;				/* color: var(--midnight);  */
	transition:all 1s ease;
}

/* ---------x------- Footer ----------x---------- */



/* Lecteur Video */


    .video-player {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.video-player video {
  width: 80%;
  height: auto;
}

.playlist {
  margin-top: 20px;
  overflow: auto;
  height: 10vh;
  width: 100%;
}

.playlist h3 {
  text-align: center;
}

.playlist::-webkit-scrollbar {
  display: none; /* Masquer la barre de défilement pour les navigateurs basés sur WebKit comme Chrome et Safari */
}

.playlist {
  scrollbar-width: none; /* Masquer la barre de défilement pour les navigateurs basés sur Firefox */
}




/* Partenaires */

.rowparten {
  display: -ms-flexbox; /* IE 10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE 10 */
  flex-wrap: wrap;
  width: 50%;
  padding-left: 25%;
}

/* Create two equal columns that sits next to each other */
.column {
  -ms-flex: 50%; /* IE 10 */
  flex: 50%;
  padding: 10px;
}

.column img {
  margin: 15px;
  vertical-align: middle;
  padding: 15px;
}



/*----- COMIC BOOK STYLE ----------------------------------------------------------------*/
.comic {
  display:flex;
  flex-wrap:wrap;
  font-family:'Comic Sans', cursive;
  padding:1vmin;
}

.panel {
  background-color:#fff;
  display:inline-block;
  flex:1 1;
 /* height:200px; /* En enlevant height, ils prennent la hauteur du contenu */
  margin:1vmin;
  overflow:hidden;
  position:relative;
}

.panel p{
  text-align: justify;
  padding: 10px;
}

.panel a{
  text-decoration: none;
  color: darkred;
  padding: 10px;
}

.panel a:hover{
  color: black;
}

.text {
  background-color:#fff;
  border:solid 2px #000;
  margin:0;
  padding:3px 10px;
}

.top-left {
  left:-6px;
  position:absolute;
  top:-2px;
  transform:skew(-15deg);
}

.bottom-right {
  bottom:-2px;
  position:absolute;
  right:-6px;
  transform:skew(-15deg);
}

.speech {
  background-color:#fff;
  border:solid 2px #000;
  border-radius:12px;
  display:inline-block;
  margin:.5em;
  padding:.5em 1em;
  position:relative;
}

.speech:before {
  border:solid 12px transparent;
  border-left:solid 12px #000;
  border-top:solid 12px #000;
  bottom:-24px;
  content:"";
  height:0;
  left:24px;
  position:absolute;
  transform:skew(-15deg);
  width:0;
}

.speech:after {
  border:solid 10px transparent;
  border-left:solid 10px #fff;
  border-top:solid 10px #fff;
  bottom:-19px;
  content:"";
  height:0;
  left:27px;
  position:absolute;
  transform:skew(-15deg);
  width:0;
}

.panel:nth-child(1) {
  flex-basis: 400px; 
}
.panel:nth-child(2) {
  flex-basis: 200px;
}
.panel:nth-child(3) {
  flex-basis: 200px;
}
.panel:nth-child(4) {
  flex-basis: 200px;
}
.panel:nth-child(5) {
  flex-basis: 200px;
}
.panel:nth-child(6) {
  flex-basis: 200px;
}
.panel:nth-child(7) {
  flex-basis: 400px;
}
.panel:nth-child(8) {
  flex-basis: 200px;
}
.panel:nth-child(9) {
  flex-basis: 200px;
}

/* background colours */

.panel:nth-child(4n+1) {
  /*background-image:radial-gradient(circle, yellow, orange);*/
  background: transparent;
}

.panel:nth-child(4n+2) {
  background-image:radial-gradient(circle, lightblue, deepskyblue);
}

.panel:nth-child(4n+3) {
  background-image:radial-gradient(circle, palegreen, yellowgreen);
}

.panel:nth-child(4n+4) {
  background-image:radial-gradient(circle, lightcoral, tomato);
}




/*              Viewport less then or equal to 1130px            */

@media only screen and (max-width: 1130px){
    .site-content .post-content > .post-image .post-info{
        left: 2rem !important;
        bottom: 1.2rem !important;
        border-radius: 0% !important;
    }

    .site-content .sidebar .popular-post .post-info{
        display: none !important;
    }

    footer.footer .container{
        grid-template-columns: repeat(2, 1fr);
    }

}

/*      x       Viewport less then or equal to 1130px    x     */

/*              Viewport less then or equal to 750px            */

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

    .nav .nav-brand a{
        padding: 0 0;
        border-radius: 50%;
        display: block;
        color: #ff0909;
    }
    .nav .nav-brand a img{
        border-radius: 50%;
    }


    .nav .nav-menu, .nav .nav-items{
        flex-direction: column;
		margin-top:35px;
    }
	
    .nav .toggle-collapse{
        display: initial;
    }

    main .site-content{
        grid-template-columns: 100%;
    }

    footer.footer .container{
        grid-template-columns: repeat(1, 1fr);
    }
	
	
/******* Mes Ajout Contact **************************/
	
	main .form-control{
	width: 300px;
	}
   
	main .submit{
	border-radius: 9px;
	font-family: sans-serif;
	color: #fff;
	font-size: 55%;
	padding: 10px 20px;
	border: solid #036A81 3px;
	text-transform: uppercase;
	text-decoration: none;
} 

	main .blog{
/*       height: 125vh;  */
		height: 600px;
    }


main .site-title .site-background{
    padding-top: 100px;
    text-align: center;
    color: #fff;
}

main .site-title img{
    margin: .3rem;
	border-radius: 70px;
	border: solid 1px #000;
	width: 100px;
	height: 100px;
}	
	
main .site-title h1, h3, h4{
    margin: 10px;
	font-size: 15px;
}


.rowparten {
  display: -ms-flexbox; /* IE 10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE 10 */
  flex-wrap: wrap;
  width: 100%;
  padding-left: 0;
}

	
}


/*   Viewport less then or equal to 750px       x     */


/*   Viewport less then or equal to 520px            */

@media only screen and (max-width: 520px){
    main .blog{
 /*       height: 125vh;  */
		height: 600px;
    }

    .site-content .post-content > .post-image .post-info{
        display: none;
    }

    footer.footer .container > div{
        padding:  1rem .9rem !important;
    }

    footer .rights{
        padding: 0 1.4rem;
        text-align: center;
    }

    nav .toggle-collapse{
        width: 80% !important;
    }

    .rowparten {
      display: -ms-flexbox; /* IE 10 */
      display: flex;
      -ms-flex-wrap: wrap; /* IE 10 */
      flex-wrap: wrap;
      width: 100%;
      padding-left: 0;
    }


}


/*VIDEO PLAYER --------------------------------------------------------------------------------/*/

.player-container {
    max-width: 800px;
    margin: 20px auto;
    background: #333;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    position: relative;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

#videoPlayer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 5px;
}

.controls {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    justify-content: center;
}

.nav-button {
    position:relative;
    padding: 15px 20px;
    background: rgba(68, 68, 68, 0.8);
    border: none;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
    float: right;
} 

.nav-button:hover {
    background: rgba(102, 102, 102, 0.9);
}

#prevBtn {
    left: 10px;
}

#nextBtn {
    right: 10px;
}

.playlist-menu {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    align-items: center;
    overflow-x: auto;
    padding: 10px 0;
}

.video-link {
    padding: 8px 15px;
    background: #444;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.3s;
}

.video-link:hover {
    background: #666;
}

.video-link.active {
    background: #2196F3;
    font-weight: bold;
}



/*        x      Viewport less then or equal to 520px       x     */


/* =========================================================================
   ======================= NOUVEAUX AJOUTS FONCTIONNELS ====================
   ========================================================================= */

/* --- CORRECTION DU CHEVAUCHEMENT (Clearfix INFAILLIBLE) --- */

/* 1. On force la boîte de l'article et le trait de séparation à TOUJOURS passer SOUS l'image précédente */
.post-content {
    clear: both;
    width: 100%;
    display: block; 
}

hr {
    clear: both;
}

/* 2. Le Clearfix "classique" (pseudo-élément) qui encadre parfaitement l'image et le bouton flottants */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.post-title p {
    margin-bottom: 10px;
}

/* --- GESTION DES READ MORE ET SECTIONS LONGUES (Flèches) --- */
.long-section {
    margin-bottom: 15px;
}

.section-inner {
    max-height: 120px; 
    overflow: hidden;
    position: relative;
    transition: max-height 0.6s ease-in-out;
}

.section-inner:not(.expanded)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(transparent, rgba(200, 200, 200, 0.8)); 
}

.section-inner.expanded {
    max-height: 5000px; 
}
.section-inner.expanded::after {
    display: none;
}

.expand-arrow {
    background: transparent;
    border: none;
    color: var(--midnight);
    font-size: 1.5rem;
    cursor: pointer;
    display: none; 
    margin: 5px auto;
    width: 100%;
    text-align: center;
    outline: none;
}

.expand-arrow:hover {
    color: #ff0909;
}

.expand-arrow i {
    transition: transform 0.4s ease;
}
.expand-arrow.active i {
    transform: rotate(180deg); 
}