* {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    font-size:20px;

}

html {
    scroll-behavior: smooth; /* Applique un défilement fluide sur la page */
    zoom:0.65;
    width: 100%;
    height: 100%;
}

.veil{
    margin-left:800px;
}

/* Styles pour les grands écrans (ordinateurs de bureau) */
@media (min-width: 1440px) {

    body {
        zoom:140%
    }
  }
  

  @media (max-width: 1079px) and (min-width: 768px) {
    body {
      zoom: 0.7; /* Zoom réduit légèrement pour s'adapter à l'écran */
    }

      .logo_right_nav img {
          display:none !important;
          right : 0;
      }

  }
  
  /* Styles pour les petits écrans (téléphones mobiles) */
  @media (max-width: 768px) {
    body {
      zoom: 0.4; /* Zoom réduit davantage pour un meilleur affichage */
    }
      .logo_right_nav img {
          left:20px;
          height : 50%;
          width : auto;

      }
  }
  


.logo_center_nav {
    position: relative;
    max-width: 50px;
    max-height: 50px;
}

header {
    margin: 20px 0 0 30px; /* Marge en haut et à gauche (ajuste selon tes besoins) */
    font-weight: bold;
}

.header-wrapper {
    margin: 20px 0 0 30px; /* Marge en haut et à gauche */
    position: relative; /* Conteneur pour gérer la marge du header fixe */
}


.header_nav {
    background: url('img/fond.jpg') no-repeat center center;
    background-size: cover;
    height: 310px;
    width: 100%;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    position: fixed; /* Fixe le header en haut de la page */
    top: 0; /* Place le header en haut */
    left: 0; /* Aligne le header à gauche */
    z-index: 1000; /* Assure que le header est au-dessus des autres éléments */
}

nav {
    display: inline-block; /* Limite la largeur de la nav à son contenu */
    margin-right:100px;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    padding: 5px 0; /* Ajoute du padding pour espacer les éléments */
    position: relative; /* Nécessaire pour positionner le pseudo-élément */
}

nav ul li::after {
    content: "";
    display: block;
    height: 2px; /* Épaisseur de la barre */
    background: white; /* Couleur de la barre */
    position: absolute;
    bottom: 0; /* Place la barre en bas de l'élément */
    left: 0; /* Commence à gauche */
    width: calc(100% + 60px); /* Longueur de la barre avec un décalage vers la droite */
    margin-left: 0px; /* Décalage pour ajuster la position de la barre */
}




nav li a {
    color: white;
    padding: 5px;
    text-decoration: none;
    display: block;
}

nav li a:hover {
    color: yellow; /* Couleur au survol des liens */
}

.logo_center_nav {
    position: absolute; /* Permet de placer le logo précisément */
    left: 50%; /* Centre le logo horizontalement */
    top: 20%; /* Ajuste la position du logo vers le haut (modifier selon le besoin) */
    transform: translateX(-230%); /* Centre le logo horizontalement */
    text-align: center; /* Centre le texte sous le logo */
    
}

.logo_center_nav img {
    height: 100px; /* Préserve les proportions du logo */
    margin-left:-30px;
    margin-bottom:0;
}

.logo_right_nav {
    position: relative;
    width: auto; /* Assure que le conteneur peut ajuster sa taille */
    height: auto; /* Assure que le conteneur peut ajuster sa taille */
    overflow: visible;
}

.logo_right_nav img {
    position: relative;
    right: 100px;
    width: 250px !important; /* Force la largeur du logo */
    height: auto !important; /* Maintient les proportions */
    max-width: 100%; /* S'assure que l'image ne dépasse pas la largeur du conteneur */
    max-height: 100%; /* S'assure que l'image ne dépasse pas la hauteur du conteneur */
    display: block; /* Assure que l'image est affichée comme un bloc */
}


.logo-tagline {
    margin-top: 40px; /* Marge entre le logo et la phrase */
    color: rgb(0, 158, 189); /* Couleur du texte de la phrase */
    font-size: 40px; /* Taille de la police de la phrase */
    white-space: nowrap; /* Empêche le retour à la ligne */
    background-color: white; /* Fond blanc pour la phrase */
    display: inline-block; /* Assure que le fond blanc s'ajuste à la largeur du texte */
    margin-left:-300px;
    padding: 5px 120px; /* Padding pour étendre le fond blanc à droite et à gauche */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.blue{
    color: rgb(0, 158, 189); 
    font-weight:bold;
}

.bold{
    font-weight:700;
}

.ita{
    font-style: italic; /* Met le texte en italique */
    text-align: right; /* Aligne le texte à droite */
    display: block; /* Permet à text-align de fonctionner correctement */
}



h1 {
    background-color: rgb(0, 49, 73); /* Couleur de fond */
    color: white; /* Couleur du texte */
    padding: 8px; /* Padding autour du texte */
    text-align: center; /* Centre le texte */
    margin: 30px auto 60px; /* Marge au-dessus, au centre horizontalement et en bas */
    display: block; /* Change en block pour que le centrage fonctionne */
    width: fit-content; /* Ajuste la largeur au contenu, si tu souhaites garder un fond autour du texte */
    font-size: 28px; /* Taille de la police */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Ombre portée du texte */
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.3);
}


.text-container {
    margin-left: 200px; /* Ajuste la marge à gauche du texte */
    margin-right: 300px; /* Ajuste la marge à droite du texte */
    padding: 20px; /* Ajoute un espacement intérieur */
    background-color: rgba(0, 0, 0, 0); /* Fond transparent pour le conteneur */
    display: inline-block; /* Réduit la taille du conteneur au texte et marges */
    position: relative; /* Nécessaire pour positionner l'image additionnelle */
    text-align: justify; /* Justifie le texte */
    justify-content: center;
    color: rgb(0, 49, 73); /* Couleur du texte */
    max-width: 1200px; /* Limite la largeur maximale du texte */
    box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur totale */
    font-size:26px;
    
}

.text-container-a{
    margin-left: 200px; /* Ajuste la marge à gauche du texte */
    margin-right: 200px; /* Ajuste la marge à droite du texte */
    padding: 20px; /* Ajoute un espacement intérieur */
    background-color: rgba(0, 0, 0, 0); /* Fond transparent pour le conteneur */
    display: inline-block; /* Réduit la taille du conteneur au texte et marges */
    position: relative; /* Nécessaire pour positionner l'image additionnelle */
    text-align: justify; /* Justifie le texte */
    justify-content: center;
    color: rgb(0, 49, 73); /* Couleur du texte */
    max-width: 1325px; /* Limite la largeur maximale du texte */
    box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur totale */
    font-size:26px;
}

.text-container p {
    margin-bottom: 1em; /* Ajoute un espace entre les paragraphes */
}

body{
    padding-top: 350px; /* Ajustez cette valeur à la hauteur de votre header */
}

.container {
    display: flex; /* Utilise Flexbox pour aligner les éléments horizontalement */
    align-items: flex-start; /* Aligne les éléments au début du conteneur */
}

.logo {
    position: relative; /* Assure que les propriétés top, bottom, left, right sont appliquées */
    margin-right: 0px; /* Espace entre le logo et le texte */
    margin-left: 130px;
    top: 100px; /* Ajuste cette valeur pour déplacer le logo vers le bas */
    width: 200px; /* Ajuste la taille du logo selon tes besoins */
    height: auto; /* Maintient les proportions du logo */
}

.centered-title {
    text-align: center; /* Centre le texte du titre */
    margin: 0; /* Réduit les marges autour du titre */
    padding: 8px; /* Réduit le padding autour du titre */
    transform: translateX(800%);
    
}

h2 {
    text-align: center;
    background-color: rgb(0, 158, 189);
    color: white;
    padding: 10px;
    margin-right: 10px; /* Marge à droite de l'élément */
    display: inline-block; /* Réduit le fond au texte uniquement */
    white-space: nowrap;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Ombre portée du texte */
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.3); /* Ombre portée du conteneur */
}


.additional-image {
    position: absolute; /* Positionne l'image de manière absolue */
    right: -350px; /* Déplace l'image à droite en dehors du conteneur (ajustez selon la largeur de l'image) */
    bottom: 180px; /* Maintient l'image à 20 pixels du bas du conteneur */
    max-width: 250px; /* Limite la largeur de l'image */
    height: auto; /* Maintient les proportions de l'image */
    margin-left:50px;
}

.cv{
    max-width:300px;
    height:auto;
    margin-left:140px;
    margin-right:-95px;
}

.text-containers {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.solution-item {
    width: 21%; /* Ajuste la largeur de chaque section */
    padding: 10px;
    box-sizing: border-box;
    text-align: justify; /* Justifie le texte */
    position: relative; /* Nécessaire pour positionner le h3 à l'intérieur de l'élément */
}

.solution-item h3 {
    text-align: right; /* Aligne le texte à droite */
    position: absolute;
    top: 0; /* Place le h3 en haut de chaque section */
    right: 0; /* Positionne le h3 à droite */
    transform: translateX(-10%); /* Décale légèrement le h3 vers la droite */
    width: max-content; /* Ajuste la largeur du h3 au contenu */
}

.solution-item h3::after {
    content: "";
    display: block;
    height: 2px; /* Épaisseur du trait */
    background: rgb(0, 158, 189); /* Couleur du trait */
    position: absolute;
    bottom: -10px; /* Positionne le trait sous le titre */
    right: 0; /* Aligne le trait à droite */
    width: 480px; /* Prend la largeur du titre */
    transform: translateX(-0%); /* Ajuste si nécessaire pour centrer le trait */
}

.solution-item h4{
    text-align:center;
}

.solution-item:first-child {
    margin-left: 120px; /* Ajoute une marge à gauche du premier élément */
}

.solution-item:last-child {
    margin-right: 230px; /* Ajoute une marge à droite du dernier élément */
}



.link {
    text-decoration: none;
    color: rgb(0, 49, 73);
    display: inline-block; /* Permet de contrôler l'alignement à droite */
    text-align: right; /* Assure que le texte à l'intérieur du lien est aligné à droite */
    width: 100%; /* S'assure que le lien occupe toute la largeur disponible */
}


/* Style pour centrer et aligner à gauche le titre */
/* Style pour centrer et aligner à gauche le titre */


h1.conseil {
    float: left;
    text-align: left;
    background-color: #003344;
    color: white;
    padding: 10px 20px;
    display: block; /* Assure que l'élément occupe toute la largeur */
    width: auto; /* Ajuste la largeur à son contenu */
    box-sizing: border-box; /* Inclut padding et bordures dans la largeur totale */
}



/* Section contenant les schémas et listes */
#system, #map {
    margin-bottom: 30px;
}

/* Utilisation de flexbox pour aligner les sections system et map */
#system, #map {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 50px; /* Espacement entre les sections */
}

/* Style pour les h2 dans les sections schema et map */
#system .schema, #map .schema2 {
    text-align: center;
    border: 2px solid #003344;
    padding: 20px;
    padding-right:40px;
    padding-left:40px;
    display: inline-block;
    margin-bottom: 20px;
    color: #009ec6;
    background-color:white;
    border-radius:10px;
}

/* Listes spécifiques aux sections system et map */
#system ul, #map ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#system ul li, #map ul li {
    margin-left: 30px;
    font-size: 1.1em;
}

/* Style pour les images sous les h2 */
#system .image-schema, #map .image-schema {
    display: block;
    margin: 20px auto 0;
    max-width: 200px;
}

/* Style pour la section "Redéfinir le modèle" */
#redefine {
    background-color: #009ec6;
    color: white;
    padding: 20px;
    font-size: 1.1em;
}

#redefine h3 {
    margin-top: 0;
}

#redefine ul {
    list-style-type: disc;
    margin-left: 20px;
}


#more {
    position: relative; /* Nécessaire pour que le positionnement absolu fonctionne correctement */
    margin-top:-100px;
}



.morecontainer {
    max-width: 1000px; /* Ajustez la largeur maximale si nécessaire */
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px; /* Ajoutez un peu de padding si nécessaire */
}

.more-containers {
    display: flex;
    justify-content: flex-end; /* Aligne les éléments à droite */
    gap: 200px;
}

.more-item {
    width: 50%; /* Ajustez la largeur des sections pour les aligner correctement */
    padding: 20px;
    box-sizing: border-box;
    text-align: justify;
    position: relative;
    font-weight:bold;
    color:#003344;
    border-width: 2px;       /* Épaisseur de la bordure */
    border-style: solid;     /* Style de la bordure (solide, pointillé, etc.) */
    border-color: #000000;
    border-radius: 50px;
    text-shdow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Ombre portée du texte */
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.3);
}

.more-item:first-child {
    margin-left: 0; /* Supprime la marge à gauche du premier élément */
}

.more-item:last-child {
    margin-right: -300px; /* Supprime la marge à droite du dernier élément */
}

h1.plus{
    margin-left:80px;
    transform : translateY(600%);
    margin-right:0;


}

.more-item h4 {
    border: 2px solid #000; /* Bordure noire solide de 2px */
    padding: 20px 5px; /* Padding vertical (haut et bas) de 10px, horizontal (droite et gauche) de 5px */
    border-radius: 15px; /* Coins arrondis */
    margin: 0; /* Su1pprime les marges par défaut */
    text-align: center; /* Centre le texte */
    margin-bottom:-30px;
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.3);
    background-color: lightgoldenrodyellow;
    
}

.cadre {
    background-color: #009ec6;
    color: white;
    display: block; /* Assure que le conteneur prend toute la largeur disponible */
    margin-left: auto; /* Permet de pousser l'élément vers la droite */ 
    margin-right:300px;
    width: fit-content; /* Ajuste la largeur en fonction du contenu */
    padding-top: 10px;    /* Ajuste le padding en haut */
    padding-right: 40px;  /* Ajuste le padding à droite */
    padding-bottom: 10px; /* Ajuste le padding en bas */
    padding-left: 40px; 
    font-weight:bold;
}

.cadre h5 {
    text-align:center;
}

.soldat{
    margin-left:580px;
    margin-bottom:-200px;
    margin-right:50px;
}







.cata-containers {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.cata-item {
    width: 21%; /* Ajuste la largeur de chaque section */
    padding: 20px; /* Ajoute du padding à l'intérieur du cadre */
    padding-bottom:0;
    box-sizing: border-box;
    text-align: justify; /* Justifie le texte */
    position: relative;
    border: 1px solid #000; /* Bordure autour de chaque liste */
    border-radius: 64px; /* Coins arrondis */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Ajoute une ombre légère pour donner du relief */
}

.cata-item h4 {
    text-align: center;
}

.cata-item:first-child {
    margin-left: 120px; /* Ajoute une marge à gauche du premier élément */
}

.cata-item:last-child {
    margin-right: 230px; /* Ajoute une marge à droite du dernier élément */
}

.cata {
    margin-left: 300px;
}

.cata-item li {
    list-style-type: none; /* Supprime les puces par défaut */
    position: relative; /* Nécessaire pour positionner le carré blanc avant chaque élément */
    padding-left: 30px; /* Espace pour le carré blanc, ajustez selon la taille du carré */
    margin-bottom: 10px; /* Ajoute un espace entre les éléments de liste */
    font-weight:bold;
    color:#003344;
}

.cata-item li::before {
    content: ""; /* Nécessaire pour générer un élément avant chaque li */
    position: absolute; /* Positionne le carré blanc par rapport à li */
    left: 0; /* Place le carré blanc à l'extrême gauche de li */
    top: 50%; /* Centre verticalement le carré blanc */
    transform: translateY(-50%); /* Ajuste pour une meilleure verticalité */
    width: 10px; /* Largeur du carré blanc */
    height: 10px; /* Hauteur du carré blanc */
    background-color: #fff; /* Couleur de fond du carré blanc */
    border: 1px solid #000; /* Bordure noire autour du carré blanc (facultatif) */
    border-radius: 2px; /* Arrondit légèrement les coins du carré (facultatif) */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Ombre légère pour les carrés blancs */

}

.cata-item h4{
    margin-top:20px;
    font-size:30px;
}

/* Styles pour la section des actualités */
#actualites {
    background-color: #f9f9f9; /* Fond gris clair pour la section */
    border-radius: 8px; /* Coins arrondis */
    padding: 20px; /* Espacement interne */
    margin: 20px 0; /* Espacement vertical */
}

/* Titre de la section */
#actualites h2 {
    text-align: center; /* Centrer le titre */
    margin-bottom: 20px; /* Espacement en bas du titre */
}

/* Articles d'actualités */
.article {
    background-color: #fff; /* Fond blanc pour chaque article */
    margin-left : 50px;
    border: 1px solid #ddd; /* Bordure grise autour de l'article */
    border-radius: 5px; /* Coins arrondis pour chaque article */
    padding: 15px; /* Espacement interne pour chaque article */
    margin-bottom: 50px; /* Espacement entre les articles */
    margin-top:50px;
}

.article h3 {
    margin: 0; /* Retirer la marge du titre de l'article */
    color: #009ec6; /* Couleur du titre */
    font-size : 32px;
    margin-right:800px;
}

.article p {
    margin: 5px 0; /* Espacement pour les paragraphes */
    color: #555; /* Couleur du texte des paragraphes */
    line-height: 1.4; /* Hauteur de ligne pour améliorer la lisibilité */
    font-size : 24px;
    margin-right:600px;
    margin-bottom:80px;
}

/* Date de publication */
.article p.date {
    font-size: 0.9em; /* Taille de police plus petite pour la date */
    color: #888; /* Couleur grise pour la date */
    margin-top: 5px; /* Espacement au-dessus de la date */
}


.contact-section {
    display: flex;
    justify-content: space-between;
    margin: 20px;
}

.contact-info, .contact-form, .map {
    width: 30%; /* Ajustez selon vos besoins */
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
}

.contact-info {
    margin-right: 20px; /* Espace entre info et formulaire */
}

.contact-form {
    margin-right: 20px; /* Espace entre formulaire et carte */
}

.contact-info h2, .contact-form h2, .map h2 {
    text-align: left; /* Alignement à gauche */
    margin-top: 0; /* Supprime la marge au-dessus pour une meilleure alignement */
}

.contact-form label {
    display: block;
    margin-top: 10px;
}

.contact-form input, .contact-form textarea {
    width: 90%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.contact-form button {
    margin-top: 10px;
    padding: 10px 15px;
    background-color: rgb(0, 49, 73);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.contact-form button:hover {
    background-color: rgb(0, 158, 189);
}

.form-actions {
    display: flex;
    align-items: center;
}

.result-message {
    margin-left: 10px; /* Espace entre le bouton et le message */
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    color: #155724; /* Couleur du texte */
    background-color: #d4edda; /* Couleur de fond */
    border: 1px solid #c3e6cb; /* Bordure */
    background-image: none; /* Supprime l'icône d'arrière-plan */
    margin-top:10px;
}

.article img {
    display: block;
    margin-left: auto;
    margin-right: 140px;
    max-width: 15%;
    height: auto;
    margin-top: -110px;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Animation fluide avec une courbe d'accélération/décélération */
}

.article img:hover {
    transform: scale(2);



}






.map iframe {
    width: 100%;
    border-radius: 8px;
}