* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inria Sans', sans-serif;
  color: #000;
}

body {
  margin: 0;
  background-color: #FFFFFF;
  color: #333;
}

/* Style pour le skip link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #000;
  color: #fff;
  padding: 8px;
  text-decoration: none;
  border-radius: 4px;
  z-index: 10000;
  font-weight: bold;
}

.skip-link:focus {
  top: 6px;
}

/* Classe pour les éléments faits pour être cachés visuellement mais accessibles aux lecteurs d'écran */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #A8D4E4;
  height: 100px;
  padding: 10px 20px;
  position: relative;
}

.site-title {
  font-size: 2.2rem;
  font-family: 'Inria Sans', sans-serif;
  margin: 0 auto;
  font-weight: 700;
}

.language-switch {
  position: absolute;
  left: 20px;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.language-switch button {
  background: #fff;
  border: none;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.logo-image {
  max-height: 70px; /* Ajuste selon la taille souhaitée */
  vertical-align: middle;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


.menu-toggle {
  background: #fff;
  border: none;
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  height: 3px;
  width: 20px;
  background-color: #333;
  border-radius: 2px;
}

/* Style du bouton burger */

.burger-menu {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  /* Gardez tous vos autres styles existants */
}

.burger-menu:focus {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

.burger-menu {
  position: absolute;
  top: 35px;
  right: 40px;
  width: 40px;
  height: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  z-index: 6000;
}

.bar {
  width: 100%;
  height: 5px;
  background-color: white;
  border-radius: 5px;
  transition: 0.3s;
}

.burger-text {
  position: absolute;
  top: 35px;
  right: 100px;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  color: black;
  text-align: left;
  font-weight: 900;
  font-style: italic;
}

.burger-text::after {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-left: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'><polygon points='0,0 10,5 0,10' fill='black'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}


/* Style du menu */
.nav-links {
  position: fixed;
  top: 0;
  right: -250px; /* Caché par défaut */
  width: 250px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  transition: right 0.3s ease-in-out;
  z-index: 5000;
}

.nav-links a {
  color: white;
  text-decoration: none;
  font-size: 20px;
  padding: 10px 20px;
}

.nav-links a:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
}

/* Ajout de la classe active pour afficher le menu */
.nav-active {
  right: 0;
}

/* Animation du bouton burger lorsqu'il est actif */
.burger-menu.active .bar:nth-child(1) {
  transform: translateY(12px) rotate(45deg); /* Descend plus avant la rotation */}
.burger-menu.active .bar:nth-child(2) {
  opacity: 0;
}
.burger-menu.active .bar:nth-child(3) {
  transform: translateY(-12px) rotate(-45deg); /* Monte plus avant la rotation */}

  

/*Section 1*/
.intro-section {
  background-color: #A8D4E4;
  width: 100%;
  margin: 0;
  padding: 40px 0;
}

.inner-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  justify-content: center; /* centre le groupe */
}

.intro-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 45px; /* écart constant entre texte et image */
}

.intro-text {
  font-size: 5vw;
  background-color: white;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  max-width: 400px;
  flex-shrink: 0;
}

.intro-img img {
  width: 700px;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .intro-container {
    justify-content: center;
  }

  .intro-group {
    flex-direction: column; 
    align-items: center;  
    text-align: center;
    gap: 10px;
  }

  .intro-text {
    font-size: 0.5rem;
    padding: 1rem;
    width: 100%;
    max-width: 90%;
    text-align: center;
  }

  .intro-img img {
    width: 100%;
    max-width: 90%;
  }

  h2 {
    font-size: 5vw;
  }

  .row {
    padding-left: 20px;
    padding-right: 20px;
    gap: 20px;
  }

  .col-md-4 {
    padding-left: 10px;
    padding-right: 10px;
  }
  
}

  /*Section 2*/

  .bg-light p {
    text-align: justify;
    font-size: 1rem;
    font-weight: 500;
  }

  /* Section avec le cercle en haut */
.col-md-4 {
  position: relative; /* Nécessaire pour positionner le cercle par rapport à chaque bloc */
  padding-left: 15px;
  padding-right: 15px;
}

.col-md-4::before {
  content: ""; /* Permet de créer un élément vide */
  position: absolute; /* Positionner le cercle */
  top: -20px; /* Décale le cercle vers le haut par rapport au bloc */
  left: 50%; /* Centrer le cercle horizontalement */
  transform: translateX(-50%); /* Ajuste le positionnement pour qu'il soit exactement centré */
  width: 40px; /* Taille du cercle */
  height: 40px; /* Taille du cercle */
  border-radius: 50%; /* Donne la forme ronde */
  background-color: grey; /* Couleur du cercle */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Ombre pour le style */
}

#carouselAccueil .carousel-inner {
  height: 100%;
  min-height: 400px; /* même hauteur que la section */
}

#carouselAccueil .carousel-item {
  height: 100%;
}

#carouselAccueil .carousel-item img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.text-carousel{
  font-size: 1.3rem !important;
}

.carousel-consortium {
  height: 400px; /* hauteur par défaut */
}

@media (max-width: 768px) {
  .carousel-consortium {
    height: 200px; /* réduit sur mobile */
  }

  .text-carousel{
    font-size: 0.9rem !important;
  }
}


/*CSS Bootstrap personnalisé*/

.custom-site-footer {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bolder;
  padding-bottom: 40px;
  padding-right: 10px;
    background-color: #A8D4E4;
    position: relative;
  }

.custom-mention{
  margin-top: 50px;
    text-align: center;
    width: 100%;
  }

  .custom-blue-button {
    display: inline-block;
    background-color: #A8D4E4; /* même bleu que le header */
    color: #000;
    padding: 12px 28px;
    border: none;
    border-radius: 50px;
    font-weight: bold;
    font-size: 16px;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transition: background-color 0.3s, transform 0.2s;
  }
  
  .custom-blue-button:hover {
    background-color: #8EC1D8;
    transform: translateY(-2px);
  }
  

/* MOBILE */

/* Masquer le texte à côté du burger menu sur les petits écrans */
@media (max-width: 768px) {
  .burger-text {
    display: none;
    position: absolute;
  top: 15px;
  right: 25px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  color: #333;
  text-align: center;
  font-weight: 900;
  font-style: italic;
  }

  .burger-menu {
    position: fixed;
    z-index: 10000;
  }

  .bar {
    background-color: #000; /* noir par défaut */
    transition: background-color 0.3s;
  }
  
  /* Quand la classe 'burger-white' est active sur le parent */
  .burger-white .bar {
    background-color: #fff; /* blanc quand le menu est ouvert */
  }
  
  .img-anr{
    margin-bottom: 50px;
    }
}

.img-anr{
  right: 5px;
  }

  /* Styles pour la carte interactive */
.france-map-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.map-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden; 
    border-radius: 10px; 
}

.france-map {
    width: 100%;
    height: auto;
    max-width: 600px;
    max-height: 600px;
    border-radius: 10px;
    object-position: center;
    display: block;
    margin: 0 auto;
}

/* Style pour simuler une carte en attendant le PNG */
.france-outline {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    max-width: 600px;
    max-height: 600px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 700"><path d="M200 150 L180 200 L160 280 L140 350 L150 420 L180 480 L220 520 L280 540 L350 545 L420 540 L480 520 L540 480 L580 440 L600 380 L620 320 L610 260 L590 200 L560 150 L520 120 L480 100 L420 90 L360 95 L300 100 L250 120 Z" fill="%23e8f4f8" stroke="%23ddd" stroke-width="2"/></svg>') no-repeat center;
    background-size: contain;
    position: relative;
    margin: 0 auto;
    display: block;
}

.region-marker {
    position: absolute;
    width: 50px;
    height: 50px;
    background: #4a90e2;
    border: 3px solid white;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.4);
    z-index: 100;

    border: 3px solid white;
    padding: 0;
}

.region-marker:hover {
    transform: scale(1.15);
    background: #2c5aa0;
    box-shadow: 0 6px 25px rgba(74, 144, 226, 0.6);
}

.region-marker::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(74, 144, 226, 0.3);
    animation: pulse 2s infinite;
    z-index: -1;
}

.region-marker:focus {
    outline: 3px solid #4a90e2;
    outline-offset: 2px;
    transform: scale(1.15);
}

.region-marker:focus:not(:focus-visible) {
    outline: none;
}

.region-marker:focus-visible {
    outline: 3px solid #4a90e2;
    outline-offset: 2px;
}

/* Style pour indiquer qu'un élément est focusable */
.region-marker:focus .sr-only {
    position: static;
    width: auto;
    height: auto;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 10px;
    margin-top: 2px;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

/* Positionnement des marqueurs sur la carte */
.region-marker[data-region="rouen"] {
    top: 15%;
    left: 44%;
}

.region-marker[data-region="caen"] {
    top: 18%;
    left: 35%;
}

.region-marker[data-region="paris"] {
    top: 21%;
    left: 51%;
}

.region-marker[data-region="grenoble"] {
    top: 62%;
    left: 70%;
}

.info-popup {
    position: absolute;
    background: white;
    border-radius: 15px;
    padding: 1.5rem;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    max-width: 320px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000; /* Z-index élevé pour passer au-dessus */
    border: 2px solid #4a90e2;
    transform: translateY(10px);
}

.info-popup.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.info-popup::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #4a90e2;
}

.info-popup h4 {
    color: #4a90e2;
    font-weight: 700;
    margin-bottom: 1rem;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-popup p {
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 600;
    color: #333;
}

.info-popup ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-popup li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
    font-size: 0.9rem;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.info-popup li:last-child {
    border-bottom: none;
}

.info-popup strong {
    color: #4a90e2;
}

main {
    flex: 1;
}

@media (max-width: 768px) {
    .region-marker[data-region="rouen"] {
        top: 15%;
        left: 42%;
    }

    .region-marker[data-region="caen"] {
        top: 18%;
        left: 31%;
    }

    .region-marker[data-region="paris"] {
        top: 20%;
        left: 53%;
    }

    .region-marker[data-region="grenoble"] {
        top: 63%;
        left: 75%;
    }
    
    .france-map-container {
        padding: 1rem;
    }
    
    .info-popup {
        max-width: 280px;
        padding: 1rem;
    }

    .region-marker {
        width: 30px;
        height: 30px;
        font-size: 10px;
    }

    h3 {
        font-size: 1.5rem;
    }
}
  
/* CACHER PAGE ANNONCES */

/* .nav-links a[href*="annonces"],
footer a[href*="annonces"] {
    display: none !important;
} */