/*
Theme Name: SInDevStatTheme
Theme URI: https://www.themehorse.com/themes/newscard
Template: newscard
Author: David
Author URI: https://www.themehorse.com/
Description: NewsCard is a Multi-Purpose Magazine/News WordPress Theme. NewsCard is specially designed for magazine sites (food, travel, fashion, music, health, sports, photography), news sites, shopping sites, personal/photo blog and many more. There are Front Page Template, Sidebar Page Layout, Top Bar, Header Image/Overlay/Advertisement, Social Profiles and Banner Slider. Also supports popular plugins like WooCommerce, bbPress, Contact Form 7 and many more. It is also translation ready. Get free support at https://www.themehorse.com/support-forum/ and view beautiful demo site at https://www.themehorse.com/demos/newscard
Tags: blog,entertainment,news,two-columns,left-sidebar,right-sidebar,custom-background,custom-header,custom-logo,custom-menu,featured-image-header,featured-images,footer-widgets,post-formats,rtl-language-support,sticky-post,theme-options,threaded-comments,translation-ready
Version: 1.5.1754378070
Updated: 2025-08-05 07:14:30

*/

/******************************** ROOT CONFIG *********************************/
/******************************************************************************/
/********************     CODES POUR LES CONFIGS ROOT      ********************/
/******************************************************************************/
/******************************************************************************/
:root {
    --couleur-primaire: #cfad5a;
    --couleur-secondaire: #17a2b8;
    --couleur_tertiaire: #003366;
	--couleur_rouge: #751102;
    --couleur_blanche: #ffffff;
    --couleur_noire: #000000;
	--font-family: 'Jost';
	--font-family_bold: 'JostBold';
    --color0transparent: rgba(255, 255, 255, 0.2);
    --color0transparent2: rgba(255, 255, 255, 0.6);
    --color0transparent3: rgba(255, 255, 255, 0.3);
}
/******************************** ROOT CONFIG *********************************/

:after,
:before,
*{
    box-sizing: border-box;
}
*, body {
	font-family: var(--font-family);
}








/****************** BARRE D'INFO EN HAUT *****************/
.info-bar {
    background-color: var(--couleur_tertiaire);
    color: var(--couleur_blanche);
}
/****************** BARRE D'INFO EN HAUT *****************/



/****************** CSS POUR LE LOGO DANS LA NAVBAR *****************/
.custom-logo-link img {
    height: auto;
    width: 115px;
}
.site-title {
    font-size: clamp(.65rem, 4vw, 2rem);
    width: 100%;
    margin: auto;
    line-height: 30px;
    margin-bottom: 10px;
    margin-left: initial;
    text-align: left;
}
.site-title a {
    color: var(--couleur_tertiaire);
}
.site-description {
    font-size: 18px;
    margin: 0;
    opacity: 1;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
    text-align: center;
}
.devise {
    text-align: center;
    margin: 0;
    font-weight: 700;
    line-height: 10px;
    color: var(--couleur_noire);
}
.site-title a:hover, .site-title a:focus, .site-title a:active {
    text-decoration: none;
    color: var(--couleur_tertiaire);
}
/****************** CSS POUR LE LOGO DANS LA NAVBAR *****************/


/****************** CSS POUR LA NAVBAR *****************/
.navbar-head {
    padding-top: 10px;
    padding-bottom: 15px;
}
.navbar {
    padding-left: 0;
    padding-right: 0;
}
.main-navigation ul li.current_page_item > a, .main-navigation ul li.current_page_ancestor > a, .main-navigation ul li.current-menu-item > a, .main-navigation ul li.current-menu-ancestor > a, .main-navigation ul li a:hover, .main-navigation ul li a:focus, .main-navigation ul li.show > a, .main-navigation ul li:hover > a {
    background-color: var(--couleur-secondaire);
}
.navigation-bar {
    background-color: var(--couleur_tertiaire);
    color: var(--couleur_blanche);
}
.main-navigation a {
    color: var(--couleur_blanche);
    display: block;
    padding: 15px;
    font-weight: 400;
}
/******  CSS POUR L'IMAGE D'ILLUSTRATION DANS LA NAVBAR  *******************/
/*****/.image-illustration {
/*****/    width: 50%;
/*****/    background: url(https://demo.sindevstat.com/wp-content/uploads/2025/08/illustration_header.webp);
/*****/    height: 90px;
/*****/    background-size: cover;
/*****/    background-repeat: no-repeat;
/*****/    overflow: hidden;
/*****/}
/*****/.illustration-content {
/*****/    display: flex;
/*****/    align-items: center;
/*****/    justify-content: flex-start;
/*****/    height: 100%;
/*****/    padding: 20px;
/*****/    position: relative;
/*****/}
/*****/.illustration-content:before {
/*****/    content: "";
/*****/    background: url(https://demo.sindevstat.com/wp-content/uploads/2025/08/black-square.webp);
/*****/    left: 0;
/*****/    top: 0;
/*****/    width: 100%;
/*****/    height: 100%;
/*****/    position: absolute;
/*****/    opacity: .8;
/*****/    background-size: 5px;
/*****/    filter: invert(1);
/*****/}
/*****/.illustration-carousel {
/*****/    width: 85%;
/*****/    overflow: hidden;
/*****/}
/*****/.illustration-content p {
/*****/    font-size: 21px;
/*****/    padding: 5px;
/*****/    margin: 0;
/*****/    font-weight: 500;
/*****/    line-height: normal;
/*****/    letter-spacing: 0;
/*****/    font-family: "Oswald", sans-serif;
/*****/    font-style: normal;
/*****/    font-weight: bold;
/*****/    color: #003366;
/*****/}
/*****/.illustration-content .button_principal {
/*****/    width: 115px;
/*****/    color: black !important;
/*****/    font-size: 16px;
/*****/    font-weight: 600;
/*****/    border-radius: 50px;
/*****/    overflow: hidden;
/*****/    padding: 10px;
/*****/}
/*****/.swiper-wrapper {
/*****/    align-items: center;
/*****/}
/*****/
/*****/
/*****/
/******  CSS POUR L'IMAGE D'ILLUSTRATION DANS LA NAVBAR  *******************/
/******************************** CSS POUR LA NAVBAR ***********************/

/******************************** CSS POUR LES BOUTONS ***********************/
.button_principal {
	z-index: 0;
    color: var(--couleur_blanche) !important;
    text-align: center;
    background-color: var(--couleur_primaire);
    border: 1px solid var(--color0transparent);
    transition: all 0.2s ease 0s;
    position: relative;
    font-size: clamp(.65rem, .8vw, 1.7rem);
    display: inline-block;
    transform: translate(0px);
    box-shadow: 1px 1px 1rem var(--color0transparent);
    text-decoration: none;
    margin-right: inherit;
    text-transform: initial;
    font-weight: normal;
    padding: 12px 24px;
}
.button_principal::before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    transition: all 0.3s ease 0s;
    border-bottom-width: 1px;
    transform: scale(0.1, 1);
}
.button_principal::after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: all 0.3s ease 0s;
    background-color: rgba(255, 255, 255, 0.5);
}
.button_principal:hover::after {
    opacity: 0;
    transform: scale(0.1, 1);
}
.button_principal:hover::before {
    opacity: 1;
    transform: scale(1, 1);
    background: rgba(255, 255, 255, 0.5);
}
.button_principal:hover{
	color: var(--couleur_blanche);
}
/******************************** CSS POUR LES BOUTONS ***********************/



/*********************** CSS POUR LA BARRE DES STORIES ***********************/
.top-stories-bar .top-stories-label .label-txt {
    color: #c80000;
}
/*********************** CSS POUR LA BARRE DES STORIES ***********************/



/******************  CSS POUR LE BLOC MISSION DE L'ACCUEIL  ******************/
.bloc_mission_accueil {
    padding: 30px 0;
}
.bloc_mission_flex {
    display: flex;
    gap: 10px 30px;
}
.mission_en_cours {
    flex-basis: 984px;
    height: 550px;
    position: relative;
    overflow: hidden;
}
.mission_a_venir {
    flex-basis: 320px;
}
.mission-thumbnail {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.mission-thumbnail img {
    height: 100%;
    width: 100%;
    position: relative;
    transition: .4s ease;
}
.item-bloc:hover img {
    transform: scale(1.2);
}
img{
    transition: .4s ease;
}
.mission-item:hover img {
    transform: scale(1.2);
}
.etude-carousel-content {
    position: absolute;
    height: 200px;
    width: 100%;
    bottom: 80px;
    z-index: 1;
    color: white;
    padding: 20px;
}
.etude-carousel {
    height: 100%;
}
.mission-thumbnail:after {
    content: "";
    background: linear-gradient(5deg, black, #0000009c, #00000000, #00000000);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}
.logo-commanditaire {
    position: absolute;
    top: 5px;
    height: auto;
    width: 80px;
    right: 5px;
    background: white;
    border-radius: 2px;
    padding: 5px;
}
.calendrier {
    display: flex;
    justify-content: flex-start;
}
.calendrier p {
    margin-right: 30px;
}
.calendrier p svg {
    margin-right: 5px;
}
.etude-carousel-content a {
    color: #f6e87c;
    font-size: clamp(.65rem, 2vw, 2rem);
    line-height: 35px;
}
.etude-carousel-content a:hover {
    text-decoration: none;
    opacity: .7;
}
.etude-carousel-content .titre {
    width: 100%;
    display: block;
    position: relative;
    margin-bottom: 20px;
}
.swiper-pagination-etude {
    bottom: 0;
    z-index: 1;
    position: absolute;
    right: 15px;
    left: initial !important;
    text-align: right;
    width: fit-content !important;
}
.swiper-pagination-etude .swiper-pagination-bullet {
    height: 25px;
    width: 25px;
    background: white;
    text-align: center;
    font-size: 15px;
    padding: 3px;
}
.etude-titre-carousel {
    text-align: center;
    margin-left: 50px;
    overflow: hidden;
}
.etude-titre-carousel .swiper-slide {
    white-space: nowrap;
}
.etude-titre-carousel .swiper-slide a {
    font-size: 20px;
    color: var(--couleur_noire);
    font-weight: 400;
}
.mission_a_venir h3, .mission_terminee h3 {
    border-bottom: 1px solid #00336621;
    text-align: center;
    text-transform: uppercase;
    font-size: 20px;
    color: var(--couleur_tertiaire);
    padding-bottom: 10px;
    border-left: 5px solid var(--couleur_tertiaire);
    width: fit-content;
    padding-left: 10px;
}
.mission_terminee h3 {
    margin-bottom: 40px;
}
.item-bloc {
    position: relative;
    margin: 20px 0;
    border-bottom: 1px solid #d6d6d6;
    padding-bottom: 20px;
}
.item-bloc .etude-carousel-content a {
    font-size: 18px;
    line-height: 5px;
    color: white;
}
.item-bloc .etude-carousel-content {
    padding: 10px;
    bottom: 15px;
    height: fit-content;
}
.item-bloc .etude-carousel-content .calendrier p {
    right: 0;
    position: absolute;
    top: -30px;
}
.item-bloc .mission-thumbnail:after {
    content: "";
    background: #0000006b;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}
.item-bloc .calendrier {
    position: absolute;
    top: 0;
    z-index: 1;
    color: white;
    right: 0;
    margin: 0;
    display: flex;
}
.item-bloc .calendrier p {
    margin: 10px;
}
.mission_a_venir .button_principal {
    background: #17a2b8;
    width: 100%;
    border: transparent;
}
.mission_terminee {
    padding: 4rem 0;
}
.mission_indisponible {
    background: #f0f0f0;
    padding: 20px;
    border-left: 5px solid #c80000;
}
.etude-terminee-carousel .titre a {
    font-size: 20px;
    line-height: 5px;
    color: white;
}
.etude-terminee-carousel .etude-carousel-content {
    bottom: 0;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.etude-terminee-carousel .etude-carousel-content .calendrier p {
    margin: 0;
}
.etude-terminee-carousel .etude-carousel-content .calendrier {
    display: flex;
    justify-content: space-between;
}
.etude-carousel-content a svg {
    font-size: 15px;
    color: white;
    height: 20px;
}
.entry-title a {
    color: #003366;
}
.abe-design {
    position: relative; /* Nécessaire pour positionner l'infobulle */
}

.abe-design::after {
    content: attr(data-tooltip);
    position: absolute;
    top: -23px;
    left: -60%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 0 10px;
    border-radius: 4px;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 15px;
}

.abe-design:hover::after {
    visibility: visible;
    opacity: 1;
}
h3.entry-title {
    border-bottom: 1px solid #00336621;
    text-align: center;
    text-transform: uppercase;
    font-size: 20px;
    color: var(--couleur_tertiaire);
    padding-bottom: 5px;
    border-left: 5px solid var(--couleur_tertiaire);
    width: fit-content;
    padding-left: 10px;
}
.entry-header {
    margin-bottom: 40px;
    z-index: 1;
    position: relative;
}
.sous-titre {
    color: #ffc107;
}
.home #main .status-publish {
    position: relative;
    padding-top: 150px;
    box-shadow: none;
}
.home div#content {
    margin-top: -100px;
}
.home #main .status-publish:before {
    content: "";
    background: url(https://demo.sindevstat.com/wp-content/uploads/2025/08/illustration-graph.webp);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    background-position: right bottom;
    z-index: 0;
    opacity: .2;
}
.entry-content {
    z-index: 1;
    position: relative;
}
.entry-content .button_principal {
    background: #17a2b8;
}
/******************  CSS POUR LE BLOC MISSION DE L'ACCUEIL  ******************/



/************************  CSS POUR LE BLOC ATOUTS  **************************/
.atouts {
    padding: 4rem 0;
    background: url(https://demo.sindevstat.com/wp-content/uploads/2025/08/bloc-atout.webp);
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: relative;
}
.atouts:before {
    content: "";
    background: black;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: .5;
}
.atouts-content {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    color: white;
}
.atout-item span {
    height: 60px;
    width: 60px;
    border-radius: 50px;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
}
.atout-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1%;
    width: calc(100% / 4);
}
.atout-item:nth-child(1) {
    background: transparent;
    perspective: 1000px;
    z-index: 1000;
    height: 440px;
    animation: floatUpDown 2s ease-in-out infinite;
}
.atout-item h3 {
    height: 80px;
    display: flex;
    align-items: center;
}
.atout-item p {
    height: 165px;
    display: flex;
    align-items: center;
}
/* Animation haut-bas */
@keyframes floatUpDown {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-10px); }
    100% { transform: translateY(0); }
  }
.rotate-animation {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s ease;
  }

  .atout-item:nth-child(1):hover .rotate-animation {
    transform: rotateY(180deg);
  }

  .flip-front, .flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-direction: column;
    padding: 0 10px;
}
  
  .flip-front {
    background: #c21f24; /* Rouge */
  }
  
  .flip-back {
    background: white;
    color: #333;
    transform: rotateY(180deg);
  }

/*************************  CSS POUR LE BLOC ATOUTS  **************************/

/***************************** CLASSES UTILITAIRES ****************************/
/******************************************************************************/
/******************                                          ******************/
/******************     ENSEMBLE DES CLASSES TELLES QUE      ******************/
/******************    FLEX, PADDING, ALIGN-ITEMS, AUTRES    ******************/
/******************************************************************************/
/******************************************************************************/
.flex {
    display: flex;
}
.align-items {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
}
.space-between {
    justify-content: space-between !important;
}
/***************************** CLASSES UTILITAIRES ****************************/