/* # Menu OL standard */
/*** FONTS ***/
:root {
    --cuvea-primary: #CE0707;
    --cuvea-secondary: #940505;
    --cuvea-primary-ta2: #ce0707a2;
    --cuvea-primary-t94:#ce070794;
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #1abc9c;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #1abc9c;
    --secondary: #2c3e50c5;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --color-primary: #214fe0;
    --color-dark: #1d1f20;
    --color-light: #f4f4f4;
    --color-shade: #bbb;
    --lock-color: #fff;
    --lock-width: 30px;
    --lock-stroke: 2.5px;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
  }

@import url(https://fonts.googleapis.com/css?family=Montserrat:900|Raleway:400,400i,700,700i);

@font-face {
    font-family: "Marianne";
    src: url("../fonts/Marianne/Marianne-Regular.95e52b2d50d6.woff");
}

@font-face {
    font-family: "Lucca";
    src: url("../fonts/Lucca-Regular.4657f6fae24a.otf");
}

@font-face {
    font-family: "Righteous";
    src: url("../fonts/righteous/Righteous.48c6ecc54c05.otf");
}

/*** VARIABLES ***/
/* Colors */
:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --font-size-large: 18px;
    --padding-standard: 10px;
    --black: #1d1f20;
    --blue: #83e4e2;
    --green: #a2ed56;
    --yellow: #fddc32;
    --white: #fafafa;
  }




/*** STYLE ***/
/* BODY */
 * {
    box-sizing: border-box;
} 

html {
     /* font-size: 10px; 1rem = 16px */

     font-size: 62.5%;
     font-size: 50%;
}

/* Styles pour les titres */
h1 {
    font-size: 4rem; /* 40px */
    font-weight: bold;
    text-decoration: underline;   
    margin-bottom: 4rem;  
    line-height: 5rem;
}

.hero-content h1 { 
    margin-bottom: 1rem;  
    font-size: x-large;  
    line-height: 3rem;
}

.lead {  
    font-size: small;
    line-height: 1.5rem;
}

h2 {
    font-size: 3rem;
    line-height: 3.5rem;
    margin-bottom: 0.9rem; /* 14.4px */
    font-weight: bold;
    text-decoration: underline;   
    margin-bottom: 3rem;
    margin-top: 3rem;
}

.block-h2 {
    font-size: 3rem;
    line-height: 3.5rem;
    margin-bottom: 0.9rem; /* 14.4px */
    font-weight: bold;
    text-decoration: underline;   
    margin-bottom: 3rem;  
    margin-top: 3rem;
}



h3 {
    font-size: 2rem; /* 28px */
    line-height: 1.4;
    margin-bottom: 0.8rem; /* 12.8px */
    font-weight: bold;
    text-decoration: underline;   
    margin-bottom: 2rem;
}

h4 {
    font-size: 1.5rem; /* 24px */
    line-height: 1.5;
    margin-bottom: 0.7rem; /* 11.2px */
    font-weight: bold;
}

h5 {
    font-size: 1.25rem; /* 20px */
    line-height: 1.6;
    margin-bottom: 0.6rem; /* 9.6px */
    font-weight: bold;
}

h6 {
    font-size: 1rem; /* 16px */
    line-height: 1.7;
    margin-bottom: 0.5rem; /* 8px */
    font-weight: bold;
}

a {
    text-decoration: none; /* Supprime le soulignement */
    color: inherit; /* Utilise la couleur du texte parent */
}

a:hover, a:focus {
    text-decoration: none; /* Assure que le soulignement n'apparaît pas au survol ou au focus */
}

.page {
    margin: auto;
}

body {
    color: #0d1a31;
    line-height: 2.5rem;
    background-color: #ffffff;
    max-width: 100%;
    margin: 0 auto;
    font-family: "Marianne", sans-serif;
    font-size: 1.8rem;  
    line-height: 3.5rem;
}

hr {
    background-color: #062c33;
    background-image: url("../img/tapa_2.a16e3c14de7e.png");    
    background-size: contain;
    display: block;
    height: 50px;
    border: 0;
    position: relative;
    opacity: 0.2;
  -moz-border-radius:10px 0;
  -webkit-border-radius:10px 0;
  border-radius:10px 0;
  width: 100%;
  }

table {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 3px solid var(--cuvea-primary);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

thead {
    display: flex;
    flex-direction: column;

}

thead tr {
    font-size: 1.5rem;
    border-bottom: 3px solid var(--cuvea-primary);

}

tbody {
    display: flex;
    flex-direction: column;

}
th {
    width: 100%;
}
tr {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    border-bottom: 1px solid var(--cuvea-primary); 
    padding: 0.5rem;
}

td {
    width: 100%;
}

.btn {
  padding: 1rem;
  color: white;
  background-color: var(--cuvea-primary);
  border-radius: 0.5rem;
}

.header {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: space-between;
    font-family: 'Marianne', sans-serif;  
    line-height: 3.5rem;
}

.header a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    color: var(--white);
    text-decoration: none;
    /* padding: 1rem; */
    color: var(--cuvea-primary);

    /* margin-left: 1rem; */
}

/*Navbar*/

.logo-top {
    display: flex;
    justify-content: left;
    align-items: center;  
    text-decoration: dotted;  
    font-size: 2rem;
}

.logo {
    height: 4rem;
    margin-right: 1rem;  
    margin-top: 1rem;
    z-index: 101;
}

.title {
    display:flex;
    text-align: end;
}

.search {
    display: flex;
    flex-direction:row;
    justify-content: center;  
    align-items:center;
    width: 100%;
}

.search-icon {
    width: 4.3rem;
    background: none;
      background-color: rgba(0, 0, 0, 0);
    border: none;
      border-bottom-width: medium;
      border-bottom-style: none;
      border-bottom-color: currentcolor;
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: 0rem;
    background-color: brown;
    padding: 1rem;
    border-bottom: 4px solid white;
    
}

.search-div {
    display:flex;
    padding:2rem;
    width: 100%;
}

.search-input {
    padding: 1rem;
    font-size: 2rem;
    font-style: italic;
    background-color: var(--cuvea-secondary);
    color: var(--white);
    border: none;
    border-bottom: 4px solid var(--white); 
}


/* Sidebar styling */
.sidebar {
    position: fixed;
    top: 0;
    left: -280px; /* Hidden by default */
    width: 280px;
    height: 100%;
    background: var(--cuvea-primary);
    color: #fff;
    overflow-y: auto;
    transition: left 0.3s ease;
    z-index: 102;
}

.sidebar-header{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    padding:2rem;  
    font-size: xx-large;
}

.sidebar-titre {
    font-size: 2.3rem;
}

.sidebar > ul {
    list-style: none;
    text-decoration: none;  
    padding: 0; /* Supprime le padding par défaut */
    margin: 0; /* Supprime les marges par défaut */
}
  
 
.sidebar > ul > li {
    margin-bottom: 1rem;  
    border-bottom: 1px solid white;
}

.sidebar > ul > li::marker {
    content: ""; /* Masque le marker */
  }


.sidebar > ul > li > a {
    color: #fff; 
    font-size: 1.5rem;
    line-height: 3.5rem;
    padding: 1rem;
}
.sidebar > ul > li > a:hover {
    color: #EADF43;
}



.sidebar > ul > li > ul {
    list-style: none;
    text-decoration: none;  
    padding: 0; /* Supprime le padding par défaut */
    margin: 0; /* Supprime les marges par défaut */
}

.sidebar > ul > li > ul > li::marker {
    content: ""; /* Masque le marker */
  }


.sidebar > ul > li > ul > li > a{
    list-style: none;
    text-decoration: none;
    font-size: 1.2rem;
    color: white;
}
/* Overlay styling */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
}

/* Active states */
.sidebar.active {
    left: 0; /* Slide in */
}
.overlay.active {
    display: block;
}

/* Par défaut, les sous-menus sont masqués */
.submenu {
    display: none;    
    background-color: #940505;
    box-shadow: 0px 3px 8px -6px black inset;
    margin: 0;
    list-style: none;
    color: #eadf4386;
}

.submenu li {
    margin: 2px;
    color: #eadf4386;  
    padding-right: 1rem;
}

/* Classe pour afficher les sous-menus */
.submenu.visible {
    display: block;
}

/* Style des boutons pour ouvrir/fermer les sous-menus */
.toggle-submenu {
    background: none;
    border: none;
    font-size: 3rem;
    cursor: pointer;  cursor: pointer;
    position: absolute;
    left: 0;
    margin-top: -5rem;
    margin-left: 1rem;  
    color: white;
}

.toggle-submenu[aria-expanded="true"] {
    transform: rotate(180deg); /* Faire tourner la flèche lorsqu'elle est ouverte */
}


.middle-header {
  display: grid;
  flex-direction: row;
  justify-content: flex-start;
  padding: 1rem;
  width: 100%;
  grid-template-columns: 4fr 1fr;
  
}



.nav-top {
    background-color: var(--cuvea-primary);
    display: flex;
    flex-direction: row;
    /* flex-wrap: wrap; */
    justify-content: space-evenly;
    padding: 0;  
    text-align: center;
    font-size: large;
    font-weight: 900;
}

.nav-title {
    display: none;
}

.nav-dev {
    background-color:#0E0D49;
    color:white;
    text-align:center;
    padding-left:0px;  
    font-size: 1.2rem;
    line-height: 1.8rem;
}

.nav-info {
    /* display: none; */
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    /* flex-wrap: wrap;   */

}

.nav-info a {
    background-color: #ffffff;
    color: #0d1a31;
    font-weight: 400;
    padding: 2rem;
}


.right-header {
    position: absolute;
    display: flex; 
    flex-direction: column;
    justify-content:end;
    align-items: center;
    font-size:medium;
    font-weight: 900;
    border-radius: 1rem;
    background-color: #EADF43;
    font-size: large;
    padding: 1rem;
    margin-right: 1rem;
    scale: 0.8;
}


.right-header img {
    height: 2rem;
    padding: 1rem;
    border-radius: 50%;
    filter: invert(1); 
}

.right-header a {
    display: none;
}

.right-header:hover {
    flex: 1;
    display: flex;
    background-color: #9400FF;  
}


.burger-menu {
    display: none;
}

.burger-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    cursor: pointer;
}

.burger-icon .bar {
    width: 100%;
    height: 4px;
    background-color: #333;
    border-radius: 5px;
}

/* Styles du menu sur mobile */
@media (max-width: 992px) {
    .nav-top {
        display: none; /* Cache le menu sur mobile */
        flex-direction: column;
        align-items: center;
        width: 100%; /* Ou la couleur de votre choix */
        position: absolute;
        top: 80px;
        left: 0;
        border: 1px solid #ddd;
    }

    .nav-info {
        display: none;
    }
    /* Afficher le bouton hamburger */
    .burger-menu {
        display: block;    
        padding: 2rem;
    }

    .nav-top.open {
        display: flex;
    }

    /* Personnaliser l'icône burger */
    .burger-icon .bar {
        background-color: #333;
    }

}

/* Masthead */
.masthead {
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: var(--green);
    text-align: center;
    color: var(--white);
    font-weight: bold;
  }
.masthead .masthead-heading {
font-size: 2.75rem;
line-height: 2.75rem;
text-transform: uppercase;
text-shadow: 0 0 10px var(--cuvea-primary);
background-color: #CE0707a2; 
border-radius: 2rem;
padding: 3rem;
margin: 0 3rem;
}
.masthead .masthead-subheading {
font-size: 1.25rem;
}
.masthead .masthead-avatar {
width: 15rem;
}
  



.divider-custom {
margin: 1.25rem 0 1.5rem;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.divider-custom .divider-custom-line {
width: 100%;
max-width: 7rem;
height: 0.25rem;
background-color: #2c3e50;
border-radius: 1rem;
border-color: #2c3e50 !important;
}
.divider-custom .divider-custom-line:first-child {
margin-right: 1rem;
}
.divider-custom .divider-custom-line:last-child {
margin-left: 1rem;
}
.divider-custom .divider-custom-icon {
color: #2c3e50 !important;
font-size: 2rem;
}
.divider-custom.divider-light .divider-custom-line {
background-color: #fff;
}
.divider-custom.divider-light .divider-custom-icon {
color: #fff !important;
}
  
  


.corps {
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
}

.hero {
    padding: 0rem;
}

.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    justify-items: center;
    color: #ffffff;
    text-shadow: 0 0 10px var(--cuvea-primary);
    font-family: "Marianne", sans-serif;  
    font-size: small;
    line-height: 1.5rem;
    padding: 3rem;
    background-color: #CE0707D1;  
    text-align: center;
}

.block-paragraph {
    padding:1rem;
    display: flex;  
    flex-direction: column;
    justify-content: center;
}

.block-paragraph a {
    padding:1rem;
    background-color: var(--cuvea-secondary);
    border-radius: 1rem;  
    color: white;
}

.block-paragraph a::after {
    content: '';
    display: inline-block;
    width: 16px; /* Ajustez la taille */
    height: 16px;
    margin-left: 8px;
    -webkit-mask-image: url("../img/icons/external-link-line.8c203f4f8465.svg");
    mask-image: url("../img/icons/external-link-line.8c203f4f8465.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: currentColor; /* Utilise la couleur actuelle du texte */
}

.block-paragraph a:hover {
    box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.4);
}



.block-markdown a{
    padding: 0.8rem;
    background-color: #330606de;
    color: white;
    border-radius: 0.8rem;
}

.block-url_link a {
    padding: 0.8rem;
    background-color: #330606de;
    color: white;
    border-radius: 0.8rem;
}


.breadcrumb-block {
    background-color:var(--cuvea-primary);
    padding: 15px 20px;
    display: flex;
    justify-content: center;
    margin-bottom:1rem;
}

nav.breadcrumb-container {
    font-size: 1.8rem;
    line-height: 1.8rem;
    margin-left: 23px;
    color: #fff;
}

.breadcrumb {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: row;    
    justify-content: center;
    align-items: center;  
    flex-wrap: wrap;
}

.breadcrumb li {
    display: flex;
    flex-direction: row;
    align-items: center;  
    text-align: center;
}

nav.breadcrumb-container li a {
    margin-right: 1rem;
    padding: 1rem;
    text-decoration: none;
    color: khaki;
    text-align: center;
}

nav.breadcrumb-container li:nth-child(n + 2)::before {
    display: inline-block;
    content: "|";
    font-size: 1.7rem;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: middle;
    margin-right: 2rem;
    margin-top: -2px;
    font-weight: 600;
}

.content-accueil {
    padding-left: 2rem;
    padding-right: 2rem;
}

.middle_content {
    padding: 1rem;
}

.video {
    display: flex;
    justify-content: center;

}

.full-width {
    width: 100%;
    height: auto;
}

.block_form_alerte {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    padding-left: 1rem;
    padding-right: 1rem;
}

.block_form_alerte h1 {
    margin-top: 3rem;
    padding: 2rem;
    text-align: center;
    line-height: 3.5rem;
    color: black;
    border: 1px solid var(--cuvea-primary);
    border-bottom: 8px solid var(--cuvea-primary);
    box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.4);

}

.form_alerte label {
    padding: 0rem;
}

input[type="submit"] {
    font-size: 3rem;
    align-items: center;
    text-align: center;
    display: block; /* Transforme en bloc pour que le margin fonctionne */
    margin: 0 auto;
    width: 50%;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
    padding: 1rem;
}

.form_field input {
    font-size: 2rem;
    text-align: left;
    width: 100%;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
    background-color: #CE070710;
    border: solid var(--cuvea-primary); /* Définit la couleur et le style des bordures */
    border-width: 1px 1px 1rem 1px; /* Épaisseur : haut, droite, bas, gauche */
    outline: none;
    padding:1rem;
}

.form_field select {
    font-size: 2rem;
    text-align: left;
    width: 100%;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: #CE070710;
    border: solid var(--cuvea-primary); /* Définit la couleur et le style des bordures */
    border-width: 1px 1px 1rem 1px; /* Épaisseur : haut, droite, bas, gauche */
    outline: none;
}

.form_field input:focus {
    background-color: #CE070740;/* Change la couleur de la bordure en rouge foncé au focus */
  }

.form_field textarea {
    font-style: italic;
    font-size: 1.2rem;
    width: 100%;
    background-color: #CE070710;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
    padding: 1rem;    
    border: solid var(--cuvea-primary); /* Définit la couleur et le style des bordures */
    border-width: 1px 1px 1rem 1px; /* Épaisseur : haut, droite, bas, gauche */
    outline: none;
}

.form_field .field-multi-checkbox > div > div > label {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
/* Annonces */

.item-1 {
    grid-area: img1;
}
.item-1 img {
    border-radius: 1rem 0 0 1rem;
}
.item-2 {
grid-area: img2;
}
.item-3 {
grid-area: img3;
}
.item-3 img {
    border-radius: 0 1rem 0 0;
}
.item-4 {
grid-area: img4;
}
.item-4 img {
    grid-area: img4;
    }

.item-5 {
grid-area: img4;
background-color: #0056b3;
color:white;
}
.item-5 img {
    border-radius: 0 0 1rem 0;
}

.photo_grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
        "img1 img1 img2 img3"
        "img1 img1 img4 img5";
    gap:0.5rem;
    padding: 1rem;
    border-radius: 2rem;
    overflow: hidden;

}

.photo_grid img {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.photo_grid img:hover {
    transform: scale(1.05); /* Zoom léger au survol */
}


.form_annonces > div {  
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.form_annonces > div > label {  
    flex:1;
}

.form_annonces > div > input, select, textarea {  
    flex:2;
}


.form_annonces input[type="submit"] {
    font-size: 2rem;
    align-items: center;
    text-align: center;
    display: block; /* Transforme en bloc pour que le margin fonctionne */
    margin: 0 auto;
    width: 50%;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: #2A175740;
}

.form_annonces input {
    font-size: 2rem;
    text-align: left;
    width: 100%;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
    background-color: #2A175710;
    border: solid #2A1757; /* Définit la couleur et le style des bordures */
    border-width: 1px 1px 1rem 1px; /* Épaisseur : haut, droite, bas, gauche */
    outline: none;
    padding:1rem;
}

.form_annonces select {
    font-size: 2rem;
    text-align: left;
    width: 100%;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: #2A175710;
    border: solid #2A1757; /* Définit la couleur et le style des bordures */
    border-width: 1px 1px 1rem 1px; /* Épaisseur : haut, droite, bas, gauche */
    outline: none;
}

.form_annonces input:focus {
    background-color: #2A175740;/* Change la couleur de la bordure en rouge foncé au focus */
  }

.form_annonces textarea {
    font-style: italic;
    font-size: 1.2rem;
    width: 100%;
    background-color: #2A175710;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
    padding: 1rem;    
    border: solid #2A1757; /* Définit la couleur et le style des bordures */
    border-width: 1px 1px 1rem 1px; /* Épaisseur : haut, droite, bas, gauche */
    outline: none;
}


/*Modal */

/* Modale */
.modal {
    display: none; /* Masquée par défaut */
    position: fixed;
    z-index: 111;
    left: 0;
    top: 0;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8); /* Fond sombre transparent */
    padding: 4rem;
}

.modal-content {
    display: block;
    margin: auto;
    max-width: 80%;
    max-height: 80%;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.caption {
    text-align: center;
    color: #fff;
    padding: 10px;
    font-size: 1rem;
}

/* Bouton de fermeture */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: white;
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* Boutons précédent et suivant */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 2rem;
    font-weight: bold;
    padding: 10px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    user-select: none;
}

.prev:hover,
.next:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* Position des boutons */
.prev {
    left: 10px;
}

.next {
    right: 10px;
}

/* Maps */

.leaflet-popup-close-button {
    display: none;
}

.myDivIcon {
    text-align: center;
    /* Horizontally center the text (icon) */
    line-height: 20px;
    /* Vertically center the text (icon) */
}

/* Icone de la carte OpenStreetMap*/

.icon-map {
    height: 2rem;
}

/* Partie contact changement de couleur H4 H5*/

.logo-sn {
    height: 2rem;
    width: 2rem;
    padding: 2rem;
}

/* Person Block */

.person_card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    margin-top: 3rem;
    box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.4);
}

.person_left_side {
    flex: 2;
}

.person_photo {
    width: 100%;
    height: 100%;

    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
}

.person_badge {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin-bottom: 2rem;
}

.badge {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;

}

.person_right_side {
    flex: 6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.top_right_card {
    font-weight: bold;
    font-size: xx-large;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 1rem;
    margin-top: 0.5rem;  
    text-align: center;  
    line-height: 3rem;
}

.person_surname {
    font-weight: 800;
}

.person_biography {  
    padding: 0 3rem;
}

/* App Block */

.app_card {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    margin-top: 3rem;
    box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.4);
}

.app_left_side {
    flex: 2;
}

.app.logo {
    width: 100%;
    height: 100%;

    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
}

.type_app {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    border-radius: 50%;
}

.app_right_side {
    flex: 6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.top_right_card {
    font-weight: bold;
    font-size: xx-large;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 1rem;
    margin-top: 0.5rem;  
    text-align: center;  
    line-height: 3rem;
}

.app_name {
    font-weight: 800;
}

.app_description {  
    padding: 0 3rem;
}

.list_file_block, .block-file {
    display: flex;
    flex-wrap: wrap;
    gap:3rem;
}

.file-block {
    border: 3px solid var(--cuvea-primary);
    border-bottom: 1rem solid var(--cuvea-primary);
    padding: 2rem;
    max-width:350px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden;
    text-align: left;
    background-color: #fff;
}

.file-info {
    display:flex;
    flex-direction: column;

} 

.file-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;  
    margin-top: 3rem;
}

.file-footer-left > img {
    width: 3rem;
    height: 3rem;
}


/* Blog Index Page */

/* Définition CSS de la partie Section pour page Blog Index Page */

.content{ 
    display:flex;  
    flex-direction: column;
    padding: 2rem;
  }
  
  
  /* Définition CSS de la partie Card pour page Blog Index Page */
  
  .band {
    width: 100%;
    /* max-width: 1240px; */
    gap: 20px;
    display: flex;
    flex-wrap: wrap;
    
  }

.item-band {
    width:100%;  
    display: flex;
    align-items: stretch;
  }
  
  @media only screen and (min-width: 850px) {
    .band {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }
  
  /* card */
  
  .card {
    background: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #fff;
    position: relative;
    top: 0;
    background-color:#ce0707;
    min-width: 100%;
  }
  
  .card-line {
    min-height: 100%;
    background: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #fff;
    position: relative;
    top: 0;
    background-color:#232832;
  }
  
  .card:hover {
    top: -2px;
    box-shadow: 0 4px 5px rgba(0,0,0,0.2);
  }
  
  .card article {
    padding: 20px;
    display: flex;
    flex: 1;
    justify-content: space-between;
    flex-direction: column;
    
  }
  .card .thumb {
    padding-bottom: 60%;
    background-size: cover;
    background-position: center center;
  }
  
  .card p { 
    flex: 1; /* make p grow to fill available space*/
    line-height: 1.4;
  }
  
  .card span {
    font-size: 12px;
    font-weight: bold;
    color: #EADF43;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 2em 0 0 0;
  }



/* Blog Page */

article {
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.article-badge-row  {
    line-height: 5rem;
}

.article-badge {
    padding: 1rem;
    background-color: #283D4A;
    color: #EADF43;
    border-radius: 1rem;
}

article img {  
    max-width: 100%;
    margin: auto;
}

  /*  Card Role */
.card_role {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.card_role_container {
  border-radius: 1rem; 
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-grow: initial;
  height: 100%;
}
.card_role_top {
  display: flex;
  align-items: flex-end;
  height: 35rem;
  justify-content: space-between;
  background-color: #3c454fc7;
  border-radius: 1rem 1rem 0rem 0rem;
  padding: 1rem;
  color: antiquewhite;
}

.card_role_price {
    background-color: #0d1a31bb;
    border-radius: 1rem;
    padding: 1rem;  
    position: relative;
    display: inline-block;
    border-style: outset;
    border-color: chartreuse;
}

.card_role_date {
    background-color: #0d1a31bb;
    border-radius: 1rem;
    padding: 1rem;  
    position: relative;
    margin-right: 0;
    display: inline-block;
    border-style: outset;
    border-color: rgb(0, 255, 225);
}

.card_role_bottom {  
    height: 25rem;
    display: flex;
    background-color: #0d1a31;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    padding: 1rem;
    color: white;
}

.card_role_name {
    text-align:center;
    text-decoration: dashed;
    font-weight: 900;
    font-size: xx-large;
    padding: 1rem;
}

.card_role_description {
    text-align:left;
    padding: 2rem;
    flex-grow: 4;
}

.card_role_vendeur {
    text-decoration: none;
    display: flex;
    justify-content: center;
    background-color: #273b5cbb;
    color: #b99ce9;
    padding: 1rem;
    border-radius: 1rem;
}

.card_role_actions {  
    display: flex;
    justify-content: space-around;
    position: relative;
    padding:1rem;
    background-color: #0d1a31;
}

.card_role_actions a {  
    text-decoration: none;
    background-color: #0d1a31;
    padding: 1rem;
    border-radius: 1rem;
    transition: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height:2rem;
    vertical-align:middle;
}

.card_role_actions a:hover {  
    text-decoration: none;
    background-color: #31230dd2;
    transform: scale(1.1);
    padding: 1rem;
    border-radius: 1rem;
}

.card_role_actions a img {  
    height:2rem;
    vertical-align:middle;
}

@media (min-width: 800px) {
    .card_role {
        grid-template-columns: 1fr 1fr
    }
}

@media (min-width: 992px) {
    .card_role {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

  /*  Tag */


.badge-col { 
    grid-column: 2;
    display:flex;
    flex-direction: column;
    justify-content: start;
    list-style: none;
    padding: 2rem;
  }
  
  .badge-row { 
    grid-column: 2;
    display:list-item;
    flex-direction: row;
    justify-content: space-around;
    list-style: none;
    padding: 2rem;
  }
  
  .badge-link {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 0.5rem; 
    padding: 1rem 0.5rem;
    background-color: rgba(74, 92, 78, 0.91);
    margin-bottom: 1rem;
  }
  
  .badge-icone {
    align-content: center;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.089);
    margin-right: 3px;
    padding: 0 8px;
    float: right;
    border-radius: 50%;
  }


arcticle {
    padding: 1rem;
}



/* Django Allauth custom */

/* Styles généraux pour centrer la section de connexion et la rendre attrayante */
.login_section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #f4f7fa;
    padding: 20px;
}

.logo_login .center {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.logo_login img {
    max-width: 90%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Style du formulaire de connexion */
.login_form {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 30px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.login_form form {
    display: flex;
    flex-direction: column;
}

.login_form label {
    font-size: 14px;
    color: #333333;
    margin-bottom: 5px;
}

.login_form input[type="text"],
.login_form input[type="password"],
.login_form input[type="checkbox"] {
    width: 90%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 14px;
    color: #333333;
    background-color: #f9fafb;
}

.login_form input[type="text"]:focus,
.login_form input[type="password"]:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 1px #3b82f6;
}

.login_form .helptext {
    text-align: right;
    font-size: 12px;
    margin-top: -10px;
    margin-bottom: 10px;
}

.login_form .helptext a {
    color: #3b82f6;
    text-decoration: none;
}

.login_form .helptext a:hover {
    text-decoration: underline;
}

/* Style du bouton de connexion */
.main_bt {
    width: 90%;
    padding: 10px;
    background-color: #3b82f6;
    color: #ffffff;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.main_bt:hover {
    background-color: #2563eb;
}

.field.margin_0 {
    margin: 0;
}

.label_field.hidden {
    display: none;
}

/* Style pour la case à cocher */
.login_form input[type="checkbox"] {
    width: auto;
    margin-right: 8px;
}

.login_form label[for="id_remember"] {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #555555;
}


/* Boite d'allert */

/* Style de la boîte de dialogue d'alerte */
[role="alertdialog"] {
    position: absolute;
    max-width: 400px;
    margin: 20px auto;
    padding: 15px;
    border-radius: 8px;
    background-color: #f0f9f4;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
    z-index:120;
}


/* Animation pour le fondu en sortie */
.fade-out {
    opacity: 0;
}

/* Liste des messages dans la boîte d'alerte */
.messages {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* Style du message de succès */
.success {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #276749; /* Vert foncé pour le texte */
    padding: 10px;
    border-radius: 4px;
    background-color: #c6f6d5; /* Vert pâle pour le fond */
}

/* Icône pour le message de succès */
.success::before {
    content: '✓';
    font-weight: bold;
    color: #276749;
    margin-right: 8px;
}



.two-column-container {
    display: flex;
    gap: 20px; /* Espacement entre les colonnes */
  }
  
  .two-column {
    flex: 1; /* Chaque colonne occupe 50% */
  }
  
  .two-column.left {
    background-color: #f9f9f9; /* Couleur pour la colonne gauche */
    padding: 10px;
  }
  
  .two-column.right {
    background-color: #e9e9e9; /* Couleur pour la colonne droite */
    padding: 10px;
  }
  
  @media (max-width: 768px) {
    .two-column-container {
        flex-direction: column; /* Les colonnes s'empilent sur mobile */
    }
  }

  .image-text-block {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 20px 0;
}

.image-text-block.reverse {
    flex-direction: row-reverse;
}

.image-text-content.text {
    flex: 1;
    padding: 10px;
    width:50%;
}

.image-text-content.image {
    flex: 1;
    text-align: center;
    width:50%;
}

.image-text-content.image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .image-text-block {
        flex-direction: column;
    }

    .image-text-block.reverse {
        flex-direction: column;
    }
}




.two-column-container {
    display: flex;
    gap: 20px; /* Espacement entre les colonnes */
  }
  
  .two-column {
    flex: 1; /* Chaque colonne occupe 50% */
  }
  
  .two-column .left {
    background-color: #f9f9f9; /* Couleur pour la colonne gauche */
    padding: 10px;
  }
  
  .two-column .right {
    background-color: #e9e9e9; /* Couleur pour la colonne droite */
    padding: 10px;
  }
  
  @media (max-width: 768px) {
    .two-column-container {
        flex-direction: column; /* Les colonnes s'empilent sur mobile */
    }
  }

/* Styles généraux pour le bloc trois colonnes */
.three-column-block {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px; /* Espace entre les colonnes */
    margin: 0 auto;
}

/* Style pour chaque colonne */
.three-column-block .column {
    flex: 1;
    padding: 16px;
    box-sizing: border-box;
}

/* Assurez-vous que chaque colonne a une largeur égale */
.three-column-block .left-column,
.three-column-block .center-column,
.three-column-block .right-column {
    min-width: 30%; /* Évite que les colonnes soient trop petites */
    max-width: 33.33%; /* Permet un alignement propre */
}

/* Mise en page pour les écrans plus petits */
@media (max-width: 768px) {
    .three-column-block {
        flex-direction: column; /* Empile les colonnes */
        gap: 0; /* Pas d'espace entre les colonnes en mode empilé */
    }

    .three-column-block .column {
        max-width: 100%; /* Les colonnes prennent toute la largeur */
        min-width: 100%;
        padding: 8px; /* Réduit le padding pour mobile */
    }
}


  /* FAQ */

  .faq {
    margin: 20px 0;
}

.faq-list {
    list-style: none;
    padding: 0;
}

.faq-item {
    margin: 10px 0;
}

.faq-question {
    background: #ce0707;
    color:var(--white);
    font-weight:400;
    border: none;
    width: 100%;
    text-align: left;
    padding: 10px;
    font-size: 2rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

.faq-question:hover {
    background: #e5e5e5;  
    color: black;
}

.faq-question::before {
    content: '';
    display: inline-block;
    width: 2rem; /* Taille du plus */
    height: 2rem;
    margin-left: 8px; /* Espacement entre le texte et l'icône */
    background: none;

    /* Dessine le symbole plus avec un SVG comme arrière-plan */
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill=\'%23000\' viewBox="0 0 16 16"><path d="M8 1a.5.5 0 0 1 .5.5v6h6a.5.5 0 0 1 0 1h-6v6a.5.5 0 0 1-1 0v-6h-6a.5.5 0 0 1 0-1h6v-6A.5.5 0 0 1 8 1z"/></svg>') no-repeat center;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill=\'%23000\' viewBox="0 0 16 16"><path d="M8 1a.5.5 0 0 1 .5.5v6h6a.5.5 0 0 1 0 1h-6v6a.5.5 0 0 1-1 0v-6h-6a.5.5 0 0 1 0-1h6v-6A.5.5 0 0 1 8 1z"/></svg>') no-repeat center;

    background-color: currentColor; /* Prend la couleur du texte */
}

.faq-question[aria-expanded="true"]::before {
    transform: rotate(45deg); /* Tourne le symbole pour indiquer un état ouvert */
    transition: transform 0.3s ease;
}

.faq-question::before {
    transition: transform 0.3s ease;
}

.faq-answer {
    padding: 10px;
    background: #fff;
    border-left: 6px solid var(--cuvea-primary);
    display: none;
}

.faq-answer.hidden {
    display: none;
}

.faq-answer:not(.hidden) {
    display: block;
}

.patch {
    font-size: 25px;
    background-color: skyblue;
    border-radius: 10px 30px 0px 90px;
    padding: 100px;
}

/* Conteneur principal */
#block-infosfooter {
    background-color: #f8f9fa; /* Couleur de fond douce */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Logo */
#block-infosfooter .site-logo {
    margin-bottom: 20px;
    display: block;
}

#block-infosfooter .site-logo img {
    max-width: 150px; /* Limite la taille du logo */
    height: auto;
}

/* Sections */
#block-infosfooter .row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

#block-infosfooter .row:last-child {
    margin-bottom: 0;
}

/* Icônes */
#block-infosfooter .icon-poi,
#block-infosfooter .icon-email,
#block-infosfooter .icon-phone,
#block-infosfooter .icon-fax,
#block-infosfooter .icon-clock-time {
    font-size: 20px;
    color: #007bff; /* Couleur bleue pour les icônes */
    margin-right: 10px;
}

/* Textes */
#block-infosfooter p {
    margin: 0;
    font-size: 14px;
    color: #333; /* Couleur principale du texte */
}

#block-infosfooter p strong,
#block-infosfooter p .fw-bolder {
    font-weight: bold;
    color: #000;
}

#block-infosfooter a {
    text-decoration: none;
    color: #007bff;
}

#block-infosfooter a:hover {
    text-decoration: underline;
    color: #0056b3; /* Couleur bleue foncée au survol */
}

/* Résponsive */
@media (max-width: 768px) {
    #block-infosfooter {
        padding: 15px;
    }

    #block-infosfooter .row {
        flex-direction: column; /* Empile les éléments */
        align-items: flex-start;
    }

    #block-infosfooter .row em {
        margin-bottom: 5px; /* Ajoute un espace entre les icônes et les textes */
    }
}

/* Style commun à toutes les notifications */
.notif-info,
.notif-alert,
.notif-success,
.notif-forbidden {
    padding: 15px;
    margin-top: 10px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #fff;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Style spécifique aux types de notifications */
.notif-info {
    background-color: #17a2b8; /* Bleu pour les informations */
    border: 1px solid #117a8b;
}

.notif-alert {
    background-color: #ffa700;
    border-left: 5px solid #ffae42;
}

.notif-success {
    background-color: #28a745; /* Vert pour le succès */
    border: 1px solid #1e7e34;
}

.notif-success {
    background-color: #28a745; /* Vert pour le succès */
    border: 1px solid #1e7e34;
}

/* Contenu de la notification */
.notif-content {
    padding: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #333;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
}

/* Ajout d'icônes (facultatif) */
.notif-info::before,
.notif-alert::before,
.notif-success::before,
.notif-forbidden {
    content: "ℹ"; /* Icône par défaut */
    font-size: 20px;
    margin-right: 10px;
}

.notif-alert::before {
    content: "⚠"; /* Icône d'alerte */
}

.notif-success::before {
    content: "✔"; /* Icône de succès */
}

.notif-forbidden::before {
    content: "⛔"; /* Icône de succès */
}

/* Responsive pour écrans plus petits */
@media (max-width: 768px) {
    .notif-info,
    .notif-alert,
    .notif-success,
    .notif-forbidden {
        font-size: 12px;
        padding: 10px;
    }

    .notif-content {
        font-size: 12px;
        padding: 8px;
    }
}

.featured-pages {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}



.cards-grid {
    display: flex;
    flex-wrap: wrap;
    row-gap: 8rem;    
    column-gap: 4rem;
    justify-content: space-between;
}


.card-menu-home { 
    background: #e5e5e5;
    height:300px;  
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-top: 16px solid var(--cuvea-primary);
    border-bottom: 8px solid var(--cuvea-primary);
    color: var(--cuvea-primary);  
    font-size: 2rem;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    flex: 1;
    min-width: 180px;
    gap:3rem;
}

.card-header-home { 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.card-content-home { 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.card-menu-actualite { 
    background: #e5e5e5;
    height:300px;  
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-top: 16px solid var(--cuvea-primary);
    border-bottom: 8px solid var(--cuvea-primary);
    color: var(--cuvea-primary);  
    font-size: 2rem;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    flex: 1;
    min-width: 300px;
}

.card-header-actualite { 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex:1;  
    height: 100%;
}

.card-content-actualite { 
    display: flex;
    flex-direction: column;  
    justify-content: space-evenly;
    align-items: center;
    flex:1;
    width:100%;
    height:100%;  
    padding: 2rem;

}
.card-institution {
    display: flex;
  flex-direction: row;
  height: 300px;
  width:100%;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
  gap: 3rem;
    border-top: 16px solid var(--cuvea-primary);
  border-bottom: 8px solid var(--cuvea-primary);
  
}

.card-institution-header{
    width:100%;
    height: 100%;
}

.card-institution-title{
    width:300px;  
    position: absolute;  
    font-weight: bolder;  
    text-align: center;
    margin:1rem;
    padding:1rem;
    background-color:#e5e5e5;
    border-bottom: 12px solid var(--cuvea-primary);
    box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}



.card-menu {   
    flex: 1 1 calc(33.333% - 1rem);
    box-shadow:4px 3px 4px rgba(0, 0, 0, 0.1);
    border-bottom: 4px solid var(--cuvea-primary);
    overflow: hidden;
    text-align: center;
    background-color: #fff;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    background-color: #edf2f4;  
    padding: 4rem;
}

.card-menu-doublebar {   
    border-top: 8px solid var(--cuvea-primary);
}

.card-menu-horizontal{ 
    display: flex;  
    flex-direction: row;
}

.card-menu-h-sm {
    min-height: 100px;
}
.card-menu-h-md {
    min-height: 200px;
}
.card-menu-h-lg {
    min-height: 300px;
}

.card-menu-l-sm {
    min-width: 300px;
}

.card-menu-l-md {
    min-width: 300px;
}

.card-menu-l-lg {
    min-width: 300px;
    flex: 1;
}


.card-title {
    font-size: 2rem;
}

.card-link {
    color: #007BFF;
    color: inherit; /* blue colors for links too */
    text-decoration: none;
    text-align: center; 
    font-size: large;
    transition: .3s ease-in-out;  
    flex: 1;
}

.card-link:hover {
    text-decoration: underline;
    transform: scale(1.05) ;
}

.card-header {
    height: 100%;
    flex:1;
}

.card-image {
    height: 100%;
}

.card-header-vertical {
    width:100%;
    flex:1;
}


.card-content {
    padding: 1rem;
    flex:1;  
    display: flex;
    justify-content: center;
    align-items: center;
}
.card-content-vertical {
    padding: 1rem;
    width:100%;
}

.card-menu-vertical > div {
    width:100%
}
.card-icon {
    display: flex;
    justify-content: center;
    align-items: center; 
    height: 100%;
    width:100%;
    object-fit: cover;

}

.card-image > img{
    height: 100%;
    width:100%;object-fit: cover;
}


.card-institution-image > img{
    height: 100%;
    width:100%;object-fit: cover;
}

.etape-block {
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 30px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.etape-header h3 {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}

.etape-image {
    text-align: center;
    margin-bottom: 20px;
}

.etape-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.etape-description {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    font-family: 'Arial', sans-serif;
}

.site-footer {
    background-color: var(--cuvea-primary);
    color: #ecf0f1;
    padding: 40px 20px;
    text-align: center;
    margin-top: 8rem;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    gap: 20px;
}

/* Footer Sections */
.footer-section {
    flex:1;
}

.footer-section h2 {
    text-transform: uppercase;
    border-bottom: 2px solid #e74c3c;
    display: inline-block;
}

.footer-section p,
.footer-section a {
    text-decoration: none;
}

.footer-section a:hover {
    color: #e74c3c;
}

.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}


.search_result_grid {
    display: flex;
    flex-direction: column;
}

/* Carte de chaque résultat de recherche */
.search_result_card {
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: row;
    padding: 16px;
    transition: transform 0.3s ease;
    margin-bottom: 1rem;
}

.search_result_menu:hover {
    transform: translateY(-10px);
}

/* Contenu de la carte */
.search_result_header {
    flex-shrink: 0;
    margin-right: 1rem;
}

.search_result_icon {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    background-color: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search_result_content {
    flex-grow: 1;
}

.search_result_title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.search_result_link {
    color: #333;
    text-decoration: none;
    transition: color 0.3s;
}

.search_result_link:hover {
    color: #007bff;
}

.search_result_body {
    font-size: 14px;
    color: #555;
}

/* Démarches Page */

.demarche_page {
    padding:1rem;
}

.demarche_header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: center;
    gap:1rem;
    color: white;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.demarche_contact {
    flex:1;
    background-color: var(--white);
    color: black;
    box-shadow: 0px 3px 8px -6px black inset;
    padding: 2rem;
}

.demarche_public-cible {
    flex:1;
    background-color: var(--white);
    padding: 2rem;
    color: black;
    box-shadow: 0px 3px 8px -6px black inset;
    
}

.demarche_description {
    width: 100%;
    background-color: var(--white);
    padding: 2rem;
    color: black;
    box-shadow: 0px 3px 8px -6px black inset;
    
}
/* Steps Section */

.etapes {
    position: relative; /* Nécessaire pour que la flèche puisse être positionnée relativement */
}
.etapes ul {  
    padding: 0;
    border-radius: 1rem;
    list-style: none;
    text-decoration: none;  
    
}
.etapes ul li {
    background-color: var(--white);
    border-radius: 1rem;

}

.etapes li:not(:last-child) {
    margin-bottom: 3rem;
}

.step_container {
    display: flex;
    flex-direction: column;  
    box-shadow: 0px 3px 8px -4px black;

}

.step_left {
    background-color: var(--white);
    padding: 2rem;
    color: black;
    width: 100%;
    display: flex;
    flex-direction: column;  
    justify-content: center;
    align-items: center;
    border-top:12px solid var(--cuvea-primary);
    border-bottom:1px dashed var(--cuvea-primary);
    
}

.step_number {
    font-size: 6rem;
    min-height: 8rem;
    border: 1rem solid var(--white);
    border-radius: 50%;
    padding:2rem;
    margin: 3rem;
}

.step_title {
    font-size: 3rem;
    text-align: center;
}

.step_right {
    width: 100%;
    padding: 1rem;  
}


.arrow {
    position: absolute;
    z-index: 0; /* Derrière le contenu */
    stroke: #000; /* Couleur de la flèche */
    fill: none;
}

.arrow-line {
    stroke-width: 2;
}


.drop-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 20px;
    border: 2px dashed #222245;
    color: #222245;
    cursor: pointer;
    transition: background .2s ease-in-out, border .2s ease-in-out;
  }
  
  .drop-container:hover {
    background: #eee;
  }
  
  .drop-title {
    color: #222245;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
  }
  
  .drop-container.drag-active {
    background: #eee;
  }
  
  input[type=file] {
    width: 350px;
    max-width: 100%;
    color: #222245;
    padding: 8px;
    background-color: #fff;
  }
  
  input[type=file]:focus {
    outline: 2px dashed #222245;
    outline-offset: 2px;
  }
  
  input[type=file]::file-selector-button {
    margin-right: 8px;
    border: none;
    background-color: #2A1757;
    padding: 8px 12px;
    cursor: pointer;
    color: white;
  }
  
  input[type=file]::file-selector-button:hover {
    background: #2a1757ab;
  }

input[type=checkbox] {
  height: 2rem;
  accent-color: #3c9757;
  cursor: pointer;
  transition: transform 0.3s;
  margin: 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;

}


  #selectedFiles {
    display: flex;
    flex-direction: row;  
    flex-wrap: wrap;  
    justify-content: center;
    align-items: center;
    gap: 1rem;
  }

  #selectedFiles img {

    max-width: 125px;
    max-height: 125px;
    float: left;
    margin-bottom:10px;
}

/* ====================================================================================================================== */

/* Carousel */

/* ====================================================================================================================== */

.container {
    overflow: hidden;
    padding: 1rem;
    /* Cache les éléments qui dépassent du container */
}
/* Définition du carousel */
.carousel {
    position: relative;
    /* Le carousel est positionné relativement à son parent */
}
/* Définition de l'élément contenant les diapositives */
.carousel-inner {
    display: flex;
    /* Affiche les éléments en ligne */
    overflow: hidden;
    /* Cache les éléments qui dépassent */
    height: 100vh;
    /* Hauteur égale à 100% de la hauteur de la vue */
    flex-wrap: nowrap;
    /* Empêche les éléments de se placer sur plusieurs lignes */
}
/* Définition des diapositives */
.slide {
    flex: 0 0 100%;
    /* Largeur de chaque diapositive est de 100% */
    height: 100%;
    /* Hauteur de chaque diapositive est de 100% */
    transition: .5s ease-in-out;
    /* Ajout d'une animation douce pour la transition entre les diapositives */
}
/* Définition de l'affichage de l'image de chaque diapositive */
.slide img {
    width: 100%;
    /* Largeur de l'image est de 100% */
    height: 100%;
    /* Hauteur de l'image est de 100% */
    object-fit: cover;
    /* Couvre tout l'espace disponible */
}
/* Définition des boutons de contrôle du carousel */
.carousel-controls {
    position: absolute;
    /* Les boutons sont absolument positionnés */
    z-index: 5;
    /* Ils sont placés au-dessus des autres éléments */
    left: 10%;
    /* La distance à gauche est de 10% */
    right: 10%;
    /* La distance à droite est de 10% */
    top: 50%;
    /* La distance du haut est de 50% */
    display: flex;
    /* Affiche les boutons en ligne */
    justify-content: space-between;
    /* Espacement égal entre les boutons */
}
/* Style des boutons de contrôle */
.carousel-controls button {
    padding: 10px;
    /* Ajout de padding pour un meilleur contrôle */
    background-color: aquamarine;
    /* Arrière-plan en aquamarine */
}
/* Définition des points de contrôle */
.carousel-dots {
    position: absolute;
    /* Les points sont absolument positionnés */
    z-index: 5;
    /* Ils sont placés au-dessus des autres éléments */
    left: 50%;
    /* La distance à gauche est de 50% */
    right: 50%;
    /* La distance à droite est de 50% */
    bottom: 10%;
    /*La distance du bas est de 10% */
    display: flex;
    /* Affiche les points en ligne */
    justify-content: center;
    /* Centrage des points */
}
/* Style des points de contrôle */
.carousel-dots .dot {
    border-radius: 50%;
    /* Les points sont en forme de cercle */
    margin: 5px;
    /* Ajout d'un margin pour un meilleur contrôle */
    cursor: pointer;
    /* Curseur en forme de main pour un meilleur contrôle */
}
/* Styles pour les points de navigation du carrousel */
.carousel-dots .active {
    /* Border de 10px pour le point actif */
    border: 10px solid #761530 !important;
    /* !important permet de surcharger les autres styles éventuels */
}
.carousel-dots .inactive {
    /* Border de 10px pour les points inactifs */
    border: 10px solid #2596be;
}

/* ====================================================================================================================== */

@media (min-width: 992px) {
    body {

        width: 1366px;
    }

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

    .middle-header {    
        display: flex;
        padding: 0rem;
        flex-direction: column;
      
    }
/*     .header a {
        margin-top: 1rem;
    } */
    .logo {    
        position: absolute;
        height: 230px;
        top: 20px;    
        margin-left: 2rem;
    }
    .nav-top {            
        padding-left: 230px; 
    }

    .nav-top > a {            
        padding: 1rem; 
    }

    .nav-title {
        display: flex;
        margin-left: 250px;
        border-bottom: 1px solid black;
    }
    

    .nav-dev {
        padding-left:230px;
    }

    .search-wrapper {
        display: flex;
        flex-direction: row;
    }

    .search-icon {

    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: -6rem;
        background-color: inherit;
        border:none;
    }

    .menu_columns {
        width: 100%;
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;    
        justify-content: space-around;  
    }

    .menu_title {
        position: relative; /* Nécessaire pour positionner le méga menu */
    }

    .menu_title > a {
        text-decoration: none;
        color: white;
        padding: 1rem;
        display: block;    
        height: 100%;
    }

    .menu_title > a:hover {
        background-color: #CD5252;
        text-shadow: 0 0 10px var(--cuvea-primary);
        padding: 1rem;
        
    }

    /* Style du méga menu */
    .mega_menu {    
        display: none;
        position: fixed;
        left: 0;
        width: 100%;
        z-index: 100;
    }

    .mega_menu_container {    
        max-width: 1366px;
        margin: auto;
        background-color: #940505;
        box-shadow: 0px 3px 8px -6px black inset;    
        padding: 30px 30px 30px 260px;
        display: flex;
        flex-direction: row;
        line-height: 1.2rem;
    }
    .mega_menu_img {
        margin-left: -275px;
        margin-top: 200px;
        position: absolute;
        overflow: hidden;
        height: 68%;
    }

    .mega_menu_row {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        width: 100%;
    }
    .mega_menu_column {
        display: flex;
        flex-direction: column;    
        flex-grow: 1;
        max-width: 25%;
    }
    
    .mega_menu_title {
        display: flex;
        flex-direction: row;
        font-size: 2rem;
        font-weight: 600;
        text-decoration: underline;    
        line-height: 3rem;        
    }
    
    .mega_menu_item {
        display: flex;
        flex-direction: column;    
        font-size: 12px;
        font-weight: 400;
        line-height: 12px;
    }
    

    .mega_menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex; /* Organiser les items sur une seule ligne */
        justify-content: left;    
        padding-left: 1rem;
        border-left: 2px solid white;
        margin-left: 1rem;
    }
    
    .mega_menu li {
        border-bottom: none; /* Supprime les bordures pour un affichage horizontal */
    }

    .mega_menu a {
        text-decoration: none;
        color: white;
        display: block;
        text-align: left;
        padding: 1rem;
    }

    .mega_menu a:hover {

        background-color: #ce0707d1;
        color: #EADF43;    
        box-shadow: 0px 3px 8px -6px #EADF43 inset;
    }
    /* Affiche le méga menu au survol */
    .menu_title:hover > .mega_menu {
        display: block;
    }

    .title {
        display: none;
    }
    .nav-info {
        margin-left: 230px;
        display: flex;
        justify-content: left;
        
    }

    .right-header {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        right: 0;
        top:0;
        border-radius: 0;    
        width: 100%;
        height: 100%;  
        scale: 1;
        margin-right: 0rem;

    }

    .right-header a {
        display:flex;
    }

    .right-header img {
        height: 48px;
    }

    .hero {
        /* height: 300px;   */
        background-repeat: no-repeat;
        background-size: cover;    
        padding-bottom: 125px;
    }

    .hero-content {
        font-size: small;
        line-height: 1.5rem;    
        max-width: 360px;
        margin-left: 50px;
    }

    .masthead {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .masthead .masthead-heading {
        font-size: 4rem;
        line-height: 4.5rem;
        text-transform: uppercase;
        padding: 6rem;
    }
    .masthead .masthead-subheading {
        font-size: 1.5rem;
        background-color: #CE070780;
        padding:3rem;
        border-radius: 1rem;
        margin:3rem;
    }
    .content{ 
        display:grid;
        /* grid-template-columns: 5fr 1fr; */
        column-gap: 2rem;
      }
      
      .content-accueil {
        padding-left: 0rem;
        padding-right: 0rem;
      }
      /* Définition CSS de la partie Card pour page Blog Index Page */
      
      .band {
        width: 100%;
        /* max-width: 1240px; */
        grid-column: 1;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
        grid-gap: 20px;
        padding: 2rem;
        
      }

      .item-1:first-of-type {
        grid-column: 1/ span 2;
        }
        .item-1:first-of-type h1 {
          font-size: 30px;
        }
        

    .person_card {
        flex-direction: row;
        border-top-left-radius: 2rem;
        border-bottom-left-radius: 2rem;
    }

    .person_photo {
        width: 100%;
        height: 100%;
        border-top-left-radius: 2rem;
        border-bottom-left-radius: 2rem;
        border-top-right-radius: 0rem;
    }
    .person_badge {
        flex-direction: column;
        justify-content: space-evenly;
        margin-top: 1rem;
        margin-left: -4rem;
        margin-bottom: 2rem;
    }
    .step_container {
        flex-direction: row;
    
    }
    
    .step_left {        
        width: 25%;
        flex-direction: column;      
        padding: 3rem;
        border-left:12px solid var(--cuvea-primary);
        border-right:4px dashed var(--cuvea-primary);
        border-top: inherit;
        border-bottom:inherit;
        
    }
    
    
    .step_right {
        width: 75%;     
        display: flex;
        flex-direction: column;
    }

    .card-institution {    
        flex:1;
        min-width: 30%;
    }

}


/* styles.css */

/* Headings */
h1 {
    font-size: 32px;
}

h2 {
    font-size: 28px;
}

h3 {
    font-size: 24px;
}

h4 {
    font-size: 20px;
}

h5 {
    font-size: 16px;
}

h6 {
    font-size: 14px;
}

/* Paragraphs */
p {
    font-size: 16px;
}