html, body {
      margin: 0;
      padding: 0;
      overflow-x: hidden; /* empêche le scroll horizontal */
    }





body {
    margin: 0;
    font-family: Arial, sans-serif;
	
}
html {
    scroll-behavior: smooth;
}


/*******************FONTS********************/
@font-face {
  font-family: "EloquentJF Pro";
  src: url("fonts/eloquentjfregularpro.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Bistrot Script";
  src: url("fonts/BistroScript-Regular.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
/*@font-face {
  font-family: "EloquentJF Pro";
  src: url("fonts/EloquentJFPro-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}*/


.titre_petit {
  font-family: "EloquentJF Pro", sans-serif;
  font-size: 22px;
  font-weight:100;
}

.titre_grand {
  font-family: "EloquentJF Pro", sans-serif;
  font-size: 30px;
  line-height:32px;
  font-weight:100;
}

.texte_normal
{
font-family:Roboto;
font-size:18px;
color:#45484a;
font-weight:300;
line-height: 1.3;
	
}



.texte_normal_lien
{
	text-decoration:none;
	font-family:Roboto;
	font-size:18px;
	color:#45484a;
	font-weight:500;
	line-height: 1.3;
	
}

.texte_normal_lien:hover
{
	text-decoration:underline;
	
	
}

.titre_themes_carrousel
{
		font-size:40px;
		font-family:Bistrot Script;
		font-weight:100;
	
}


.texte_gras
{
	font-weight:900;
	
}

/******Bouton*******/

.bouton {
  

  font-family: Roboto,arial;
  color: #ffffff;
  font-size: 16px;
  font-weight:300;
    padding: 3px 16px 3px 16px;
  text-decoration: none;
  border-radius:3px;
 	-webkit-transition: filter 0.2s ease;
	transition: filter 0.2s ease;
}

.bouton:hover {
  background: #e75a58;
  background-image: -webkit-linear-gradient(top, #e75a58, #e75a58);
  background-image: -moz-linear-gradient(top, #e75a58, #e75a58);
  background-image: -ms-linear-gradient(top, #e75a58, #e75a58);
  background-image: -o-linear-gradient(top, #e75a58, #e75a58);
  background-image: linear-gradient(to bottom, #e75a58, #e75a58);
  text-decoration: none;
  filter: brightness(1.05);
  
}
/********************/


/********************************************/




/*Titre zones images parallax*/
.titre_photo_parallax
{
	width:50%;
	height:60px;
	margin:0 auto;
	color:#3396a8;
	padding-top:90px;
	position:relative;
	text-align:center;
}









.navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    /*padding: 15px 30px;*/
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	margin-top:0px;
	position:fixed;
	z-index:99999999;
	width:100%;
	top:0px;
	height:80px;
}

.logo img {
    height: 80px;
	margin-top:0px;
}

.nav-links {
    list-style: none;
    display: flex;
    /*gap: 20px;*/
    align-items: center;
    position: relative;

	margin-top:20px;
	
}

.nav-links li {
    position: relative;
    padding-left: 15px ;
	padding-right: 15px ;
    display: flex;
    align-items: center;

	
}

.nav-links li:not(:first-child) {
    border-left: 1px solid #ccc; /* Allongement des barres verticales */
    height: 70px; /* Ajustement de la hauteur des séparateurs */
    align-self: center;
}

.nav-links a {
    text-decoration: none;
    color:#4e4e4e;
    font-weight: bold;
    padding-bottom: 5px;
    display: block;
    position: relative;
	transition: 0.3s ease-in-out;
	
	
   
	
}


.nav-links a::after {
    content: '';
    display: block;
    width: 40px; /* Barre  par défaut */
    height: 4px; /* Épaisseur de la barre */
    background-color: #3bbbd6;
    margin: auto;
    margin-top: 5px;
    transition: width 0.3s ease-in-out;
}

.nav-links a.active::after {
    width: 100%;
	
}
.nav-links a.active {
    color: #3bbbd6; /* Change la couleur du texte */
}
.nav-links a:hover::after {
    width: 100%; /* Effet au survol */
	
}

.nav-links a:hover {
   color: #3bbbd6; /*couleur texte au survol*/ 
}

color: #0099cc;

.dropdown {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    background: red;
    z-index: 99999999999999;
}

/* Enlève l'effet de la flèche et du survol */
.dropdown::after {
    content: ''; /* Supprime la double flèche */
}

.dropdown img {
    width: 12px; /* Ajuster selon l'image de la flèche souhaitée */
    height: auto;
    margin-left: 5px;
}

/* Masquer le checkbox */
.dropdown-checkbox {
    display: none;
}

/* Le label agit comme un bouton cliquable */
.dropdown-toggle {
    cursor: pointer;
}

/* Menu déroulant caché par défaut */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 5px;
    z-index: 99999999999999999999999999999;
}

/* Afficher le menu lorsque le checkbox est coché */
.dropdown-checkbox:checked + .dropdown-toggle + .dropdown-menu {
    display: block;
    left: -10px;
}

/* Enlève l'effet de la flèche et du survol */
.dropdown-toggle::after {
    content: ''; /* Supprime la double flèche */
}

/* Désactivation de l'effet de barre pour la liste déroulante des langues */
.dropdown a::after {
    display: none;
}

/* Style des liens */
.dropdown-menu a {
    color: #4e4e4e;
    text-decoration: none;
    font-weight: bold;
}

/* Ajout d'un effet au survol pour les liens */
.dropdown-menu a:hover {
    color: #3bbbd6;
}
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.bar {
    width: 30px;
    height: 3px;
    background-color: #5f5f5f;
    margin: 5px;
}






/*Video */

   /* Conteneur pour ratio 16:9 */
    .video-wrapper {
      position: relative;
      width: 100%;
	  width: 100vw;   /* largeur du viewport */
	height: 100vh; 
         }

    .video-wrapper video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
	
	
	

   
	
	
/***********************TITRE SECTION**************************/

.titre_section
{
width:100%;
text-align:center;
margin-top:20px;
margin-bottom:40px;
min-height:10px;
overflow:hidden;
}
/***************************************************************/	
	
	
	
	
	
	
	
	
/*********************************ZONE PRESENTATION***********************************/	


div#presentation2
{
	z-index:3;
	scroll-margin-top:0px;
	margin-bottom:0px;
	background:white;
	width: 100%;
	height: 450px;
	position:relative;
	
}


div#zone_presentation	
{
	top:100px;
	/*background:green;*/
	margin:0 auto;
	width:1000px;
	min-height:100px;
	overflow:hidden;
	position:relative;
	
}
	
	
div#zone_presentation_gauche
{
	float:left;
	width:420px;
	margin-right:5px;
	min-height:20px;
	overflow:hidden;
	/*background:pink;*/
	text-align:right;
	font-family:Roboto;
	font-size:18px;
	font-weight:500;
	color:#2fbed5;
	line-height: 1.3;
	
}


div#zone_presentation_droite
{
	
	float:right;
	width:550px;
	margin_left:5px;
	min-height:20px;
	overflow:hidden;
	/*background:yellow;*/
	text-align:left;
	font-family:Robot;
	
}


.canard {
      width: 150px; /* adapte selon ton image */
	  float:left;
      animation: flotter 4s ease-in-out infinite;
    }
	
 @keyframes flotter {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

/********************************FIN ZONE DE PRESENTATION*****************************/	


    /* Fallback pour navigateurs qui ne supportent pas aspect-ratio */
    @supports not (aspect-ratio: 16 / 9) {
      .video-wrapper {
        padding-top: 56.25%;
        height: 0;
      }

      .video-wrapper video {
        position: absolute;
        top: 0;
        left: 0;
      }
    }
	
	
	
	
/*********LOGOS PRESENTATION**********/
	
div#logo_presentation_bds2
{
	position: fixed; 
	bottom: 0px;  
	left: 50%;  
	transform: translateX(-50%);  
	width: 700px;  
	height: 112px;  
	display: flex;  
	align-items: center; 
	justify-content: center; 
	background-image: url('img/logos_video_presentation.png'); 
	background-size: cover; 
	background-repeat: no-repeat; 
	background-attachment: fixed;
	transition: opacity 0.1s;
	
}	
	
/*****************ZONE OFFICES DE TOURISME********************/
div#zone_globale_officestourime
{
	width:1500px;
	min-height:40px;
	overflow:hidden;
	margin:0 auto;	
	
}

div#zone_intro_officestourime
{
	margin-top:50px;
	float:left;
	margin-left:25px;
	width:35%;
	min-height:100px;
	overflow:hidden;
	text-align:left;
	
	
}

div#contenu_intro_officestourime
{
	margin:0 auto;
	width:350px;
	min-height:20px;
	overflow:hidden;
	padding-bottom:30px;
	
	
}


div#mouton
{
	width:200px;
	height:200px;
	margin-left:15px;
	margin-top:50px;
	
	
}



 :root{
      --head-left: 62%;       /* décalage gauche de la tête */
      --head-top: 10%;        /* décalage vertical de la tête */
      --head-width: 30%;      /* largeur relative de la tête par rapport au conteneur */
      --nod-angle: 10deg;     /* amplitude du hochement */
      --nod-duration: 1.4s;   /* durée de l'animation */
    }

   
.sheep-wrapper{
  position:relative;
  width:100%;
  height:auto;
  aspect-ratio: 360/270; /* rapport largeur/hauteur pour garder les proportions du mouton */
  max-width:600px; /* limite facultative */
  user-select:none;
}

.sheep-body{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}

.sheep-head{
  position:absolute;
  left:var(--head-left);
  top:var(--head-top);
  width:var(--head-width);
  height:auto;
  transform-origin: 22% 72%;
  pointer-events:none;
  animation: nod var(--nod-duration) ease-in-out infinite alternate;
}

@keyframes nod{
  0%{ transform: rotate(calc(-1 * var(--nod-angle))) translateY(0); }
  100%{ transform: rotate(var(--nod-angle)) translateY(3%); }
}





div#zone_carte_officestourime
{
	 float:right;
	 width:800px;
	 height:800px;
	
	
}
/*************************************************************/	
	
	
	
/*****************CAROUSSEL OT'S*********************/


    .carousel {
      position: relative;
      width: 80vw;          /* largeur relative */
      max-width: 800px;     /* limite max */
      aspect-ratio: 1 / 1;  /* carré */
      overflow: hidden;
      
      
      background: #000;
      touch-action: pan-y; /* évite conflit scroll */
    }

    .carousel-images {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .carousel-images img {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 1s ease;
    }

    .carousel-images img.active {
      opacity: 1;
      z-index: 2;
    }

    /* Zone coordonnées */
    .info {
      position: absolute;
      bottom: 10px;
      left: 10px;
      background: rgba(255, 255, 255, 1);
      color: #3e3c3d;
	  border-radius:3px;
      padding: 10px;
      border : 1px #f5c000 solid;
      /*max-width: 60%;*/
      font-size: 0.9rem;
      z-index: 3;
    }
	.logo_info_carrousel
	{
		position:relative;
		margin-top:5px;
		float:left; 
		height:90px; 
		width:90px;	
	}	
	
	.contenu_info_ot
	{
		position:relative;
		padding-left:5px;
		float:right;
		margin-left:5px;
		
		min-height:80px;
		overflow:hidden;
		max-width:300px;
		
	}
	.nom_territoire 
	{
		font-family: "EloquentJF Pro", sans-serif;
		font-size: 19px;
		font-weight:100;
		line-height:20px;
		
	}


    /* Points */
    .dots {
      position: absolute;
      bottom: 15px;
      right: 15px;
      display: flex;
      gap: 6px;
      z-index: 3;
    }

    .dots span {
      width: 18px;
      height: 18px;
      background: #3396a8;
      border-radius: 50%;
      opacity: 0.3;
      cursor: pointer;
      transition: opacity 0.3s;
    }

    .dots span.active {
      opacity: 1;
    }

    @media (max-width: 768px) {
      .info {
        font-size: 0.8rem;
        max-width: 70%;
      }
      .dots span {
        width: 10px;
        height: 10px;
      }
    }
	
	
	
	
		
	
	.nav-arrows {
	  position: absolute;
	  top: 50%;                  
	  left: 50%;
	  transform: translate(-50%, -50%); 
	  width: calc(100% - 40px);
	  display: flex;
	  justify-content: space-between;
	  z-index: 5;
	  pointer-events: none;
	}

	.arrow_carte_interactive {
	
	 
	 
	  cursor: pointer;
	  pointer-events: auto;
	  user-select: none;
	 background: #f1bd28;
		border: none;
		padding: 10px 10px;
	  transition: background 0.3s;
	}

	.arrow_carte_interactive:hover {
	 background: #e1b530;
	}

	
	@media (max-width: 768px) {
	  .nav-arrows {
		display: none;
	  }
	}

	
	
	

/************FIN CARROUSEL************************/


/**********************CARROUSEL THEMES*************************/
/* --- Structure générale --- */
.carousel_images {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: auto;
  overflow: hidden;
  height: 650px; /* ✅ Hauteur visible */
  background:#fff;
  
}

.slides_carrousel {
  display: flex;
  height: 100%; /* ✅ les slides prennent la hauteur du carrousel */
  transition: transform 0.8s ease-in-out;
}

.slide_carrousel {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 20px;
  min-width: 100%;
  height: 100%; /* ✅ chaque slide remplit le carrousel */
}

/* --- Blocs images en background --- */
.block {
  background-size: cover;
  background-position: center;
  
  width: 100%;
  height: 100%;
}

/* --- Positionnement des zones --- */
.slide_carrousel .large {
  grid-row: span 2;
  position: relative;
}
.slide_carrousel .top-right {
  grid-row: 1;
  grid-column: 2;
}
.slide_carrousel .bottom-right {
  grid-row: 2;
  grid-column: 2;
}

/* --- Titre du thème --- */

.container_titre_theme
{
	display: inline-flex;
	position: absolute; 
	top: 20px; 
	left: 0px;
	
	
}


.theme-title {
  
 
  background: rgba(255,255,255,1);
  padding-left:40px;
  padding-right:40px;
  padding-top:25px;
   padding-bottom:25px;
  color:#4c4c4c;
   font-weight: 300;
   /*font-family:Bistrot Script, Arial;*/
   font-family: "EloquentJF Pro", sans-serif;
  font-size: 28px;
}

.etoiles_fliantes_titre
{
	width:70px;
	padding:10px; 
	background-image: url('img/etoiles_trame_blanc.png');
	background-repeat: repeat;
	background-position: 0 0; 
	background-size: auto;
	
}



/* --- Flèches navigation --- */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #f1bd28;
  border: none;
  padding: 10px 10px;
  
  cursor: pointer;
}
.arrow:hover { background: #e1b530; }
.arrow.left { left: 10px; }
.arrow.right { right: 10px; }








#contenant_carousel_images
{
	background:#fff;
	min-height:100px;
	overflow:hidden;
	padding-top:50px;
	padding-bottom:50px;
	width:1000px;
	padding-right:50px;
	padding-left:50px;
	top:0px;
	margin:0 auto;
	
	
}












/* --- Responsive --- */
@media (max-width: 800px) {
  .carousel_images {
    height: 550px;
  }
  .slide_carrousel {
    display: flex;
    flex-direction: column;
  }
  .block {
    flex: 1;
  }
}

/***************************************************************/







/***********************CAROUSEL AGENDA*****************************/

:root{
  
  --accent:#4ab8af;
  --accent-2:#f4b300;
  --card-gap:20px;
}



/* Container */
.carousel-wrapper{
  position:relative;
  max-width:1200px;
  margin:0 auto;
  box-sizing:border-box;
}

/* Viewport */
.viewport{
  overflow:hidden;
  position:relative;
}

/* Carousel */
.carousel_agenda{
  display:flex;
  align-items:flex-start;
  transition:transform 1.5s cubic-bezier(.22,.9,.35,1);
  will-change:transform;
  padding:10px 0;
}

/* Card */
.card{
  background:#fff;
  color:#222;

  overflow:hidden;
  margin:0 10px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  text-decoration:none;
  display:block;
  transition:transform .25s ease, box-shadow .25s ease;
  flex:0 0 calc(33.333% - (var(--card-gap) * (2/3)));
  cursor:pointer;
}
.card:hover{ transform:translateY(-6px) scale(1.03); box-shadow:0 18px 40px rgba(0,0,0,.12); }

/* Thumb + ribbon */
.thumb-wrap{ position:relative; }
.thumb{ width:100%; aspect-ratio:1/1; display:block; object-fit:cover; background:#ddd; }

.ribbon{ position:absolute; top:12px;font-family:Roboto; left:0px; padding:6px 10px; color:#fff; font-weight:600; font-size:22px; }
.ribbon.default{ background:var(--accent); }
.ribbon.yellow{ background:var(--accent-2); }

/* Meta */
.meta{ padding:20px 16px 20px; text-align:left; }
.meta .small{ color:var(--accent); font-weight:400; font-size:.85rem; font-family:Roboto;display:block; margin-bottom:3px;}
.meta .title_agenda{ color:var(--accent); font-family: "EloquentJF Pro", sans-serif;  font-weight:100; font-size:1.6rem; margin:2px 0 8px; }
.meta .bold{ font-weight:700; font-size:1.2rem; margin-bottom:6px; font-family:Roboto;color:#4c4c4c}
.meta .place{ font-style:italic; font-size:1rem;font-family:Roboto; font-weight:600;color:#4c4c4c}

/* Nav buttons */
.nav-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  padding: 10px 10px;
  border:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.85);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  cursor:pointer; transition:transform .12s ease; z-index:30;
}

.nav-btn:hover
{
	 background:rgba(255,255,255,0.75);
	
}


/*.nav-btn:active{ transform:translateY(-50%) scale(.96); }*/
.nav-btn[disabled]{ opacity:.45; pointer-events:none; cursor:default; }

/* outside on large screens */
.nav-prev{ left:-70px; }
.nav-next{ right:-70px; }
.nav-btn svg{ width:18px; height:18px; stroke:#0b0b0b; stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* move inside on smaller screens */
@media (max-width:1350px){
  .nav-prev{ left:10px; }
  .nav-next{ right:10px; }
}

/* hide on very small (touch handled by swipe) */
@media (max-width:700px){
  .nav-btn{ display:none; }
}

/* responsive cards (3 / 2 / 1) */
@media (max-width:1100px){
  .card{ flex:0 0 calc(50% - (var(--card-gap)/2)); }
}
@media (max-width:700px){
  .card{ flex:0 0 calc(100% - var(--card-gap)); }
}
/********************************************************/





/******************************NOS EDITIONS******************************************/
.zone-pdf {
  display: flex;
  flex-wrap: wrap;           /* permet de passer à la ligne */
  justify-content: center;   /* centre horizontalement */
  gap: 100px;                 /* espace entre les éléments */
  max-width: 1200px;         /* limite la largeur totale */
  margin: 0 auto;   /* centre la zone dans la page */
  padding-top:80px;
  padding-bottom:70px;
  
}

.pdf-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30%;                /* environ 3 éléments par ligne */
  max-width: 250px;          /* évite que ça devienne trop grand */
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
   text-decoration: none;
}

.pdf-item:hover {
  transform: scale(1.05);
  
  z-index: 1; 
}

.pdf-item img {
  width: 100%;
  height: auto;
  
}

.pdf-item p {
  margin-top: 8px;
  color: #ffffff;
}
.document_nos_editions
{
	 display: flex;
  flex-direction: column;
  align-items: center;
	background:pink;
	width:200px;
	height:350px;
	
}



.Picto_nos_editions
{
	width:200px;
	position:relative;
	min-height:10px;
	overflow:hidden;
	margin:0 auto;
	
	
}

.cheval_animation {
  position: relative;
  width: 200px;
  height: 170px;
  overflow: hidden;
  margin-top:30px;
  margin-bottom:5px;

}

.sol {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;      /* Hauteur */
  background: #a6d6c3; /* Couleur de fond */
  border-radius: 50%; /* Donne la forme ovale */
}


.cheval {
  position: absolute;
  bottom: 15px;
  width: 180px;
  left: 10px;
  animation: trot 0.4s ease-in-out infinite alternate;
}

@keyframes trot {
  0% { transform: translateY(0); }
  100% { transform: translateY(-4px); }
}
/***********************************FIN NOS EDITIONS***********************************/




/****************************EN DIRECT DE ...***************************************/

.zone-webcam {
  max-width: 1300px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  text-align: center;
}

.zone-webcam h2 {
  margin-bottom: 25px;
  font-size: 1.8em;
}

.webcam-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* Centrage horizontal */
  gap: 30px;
}

.webcam-card {
  position: relative;
  width: 300px;
  height: 300px;
  
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: white;
  border-radius:3px;
  
}

.webcam-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(60%);
  transition: transform 0.5s ease, filter 0.5s ease;
}

/* Bloc centré (logo + nom commune) */
.info_commune {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: opacity 0.3s ease;
  color: white;
  text-shadow: 0 0 6px rgba(0,0,0,0.8);
}

.icon_webcam {
  
  color:#ffffff;
}

.city-name {
  margin-top: 10px;
  font-family: "EloquentJF Pro", sans-serif;
  font-size: 24px;
  line-height:35px;
  font-weight:100;
}

/* Contenu visible au survol */
.hover-info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  background-color: rgba(0,0,0,0.3);
}

.hover-icon {
  font-size: 2em;
}

.hover-text {
  margin-top: 8px;
  font-size: 1.3em;
  font-weight: 400;
  font-family:Roboto,arial;
}

/* Effets de survol */
.webcam-card:hover img {
  
  filter: brightness(110%) saturate(110%) hue-rotate(0deg);
  transform: scale(1.20); /* effet zoom */
}

.webcam-card:hover .info_commune {
  opacity: 0;
}

.webcam-card:hover .hover-info {
  opacity: 1;
}


/*********************************************************************************/


/****************************************COMMENT VENIR****************************************/

div#zone_comment_venir
{
	width:1300px;
	
	min-height:150px;
	overflow:hidden;
	margin:0 auto;
	margin-bottom:40px;
	
}

div#zone_gauche_comment_venir
{
	float:left;
	min-height:50px;
	overflow:hidden;
	width:350px;
	
	margin-top:100px;
	margin-left:10px;
	
	
}

div#zone_droite_comment_venir
{
	float:right;
	width:680px;
	height:680px;
	border-radius:3px;
	
	
}

@media (max-width: 1300px) 
{
div#zone_comment_venir
{
	width:98%;
		
}
}
/**********************************************************************************************/

/**************************************LOGOS OT FOOTER*******************************************/


/* ----- Zone contenant les logos ----- */
.logos-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  padding: 40px 0;
  flex-wrap: wrap;
  width:1200px;
  min-height:50px;
  overflow:hidden;
  margin:0 auto;
  padding-top:50px;
  padding-bottom:50px;
  border-bottom:#a0a0a0 solid 1px;
}

/* ----- Chaque logo cliquable ----- */
.logos-container a {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
}

/* ----- Image du logo ----- */
.logos-container img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  display: block;
  transition: transform 0.3s ease;
}

/* ----- Effet zoom au survol ----- */
.logos-container a:hover img {
  transform: scale(1.15);
}

/* ----- Version mobile : 2 logos par ligne, centrés ----- */
@media (max-width: 700px) {
  .logos-container {
    justify-content: center;       /* centre tout le groupe */
    gap: 25px;
  }

  .logos-container a {
    width: calc(50% - 15px);       /* 2 par ligne avec petit espace */
    display: flex;
    justify-content: center;       /* centre chaque logo dans sa moitié */
  }

  .logos-container img {
    width: 100px;
    height: 100px;
  }
}




/***********************************************************************************************/


/******************************************************/	
	
@media (max-width: 1500px) 
{	
	
	div#zone_globale_officestourime
	{
		width:100%;
	
	}
	
	
	
	div#zone_intro_officestourime
	{
		margin-top:30px;
		float:left;
		margin-left:25px;
		width:30%;
		min-height:100px;
		overflow:hidden;
		text-align:left;
		
		
	}
	
	
	
	div#contenu_intro_officestourime
	{
		padding-bottom:15px;
		
	}
	
	div#mouton
	{
		width:150px;
		height:150px;
		margin-left:10px;
		margin-top:50px;
		
		
	}
	
	
	div#zone_carte_officestourime
	{
		width:700px;
		height:700px;
	}
	
	 .carousel {
       
      max-width: 700px;     /* limite max */
      
    }
	
}

@media (max-width: 1200px) {
.logos-container
{
	width:100%;
	
}
}


@media (max-width: 1200px) {
	
.titre_photo_parallax
{
	width:90%;
	
	
}		

div#zone_presentation	
{
	top:40px;
	width:790px;
	
	
}
	
div#zone_presentation_gauche
{
	float:none;
	margin:0 auto;
	width:100%;
	margin-right:0;
	text-align:center;
	
	
}	

div#zone_presentation_droite
{
	float:none;
	margin:0 auto;
	width:100%;
	margin-right:0;
	text-align:center;
	
	
}	

.canard 
{
  padding-top:25px;
  float:none;
  margin:0 auto;
  width:120px;
}	
	
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 85px;
        left: 0;
        width: 100%;
        
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		align-items: flex-start; /* Centrage à gauche */
        padding-left: 20px; /* Ajustement de l'espacement */
        text-align: left; /* Alignement à gauche */
		background:rgba(199,207,214,0.9);
		
    }
	.nav-links a 
	{
		text-decoration: none;
		color:#343434;
		font-size:20px;
		padding-bottom: 2px;
		
	}
    .nav-links.active {
        display: flex;
    }
	.nav-links a::after {
		width:0;
	}
    .menu-toggle {
        display: flex;
		margin-right:15px;
    }
	
	.nav-links li:not(:first-child)
	{
		border-left: none; /* Allongement des barres verticales */
   
	}
	.nav-links a:hover::after 
	{
    width: 0; /* Effet au survol */
	
	}
	.nav-links li {
        text-align: left; /* S'assurer que chaque élément est aligné à gauche */
        width: 100%;
    }

	.navbar
	{
			justify-content: space-between
		
	}
	
	.dropdown {
		
		background: unset; 
		
		}

	.dropdown-menu {
   
    background: white; 
    box-shadow: none;
    
	}
	
	.video-wrapper 
{
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9; /* CSS native, plus propre que padding-top */
}	


div#zone_intro_officestourime
{
	margin-top:100px;
	float:none;
	margin-left:0;
	margin:0 auto;
	width:98%;
	min-height:100px;
	overflow:hidden;
	text-align:center;
	
	
}

div#contenu_intro_officestourime
{
	margin:0 auto;
	width:100%;
	min-height:20px;
	overflow:hidden;
	padding-top:30px;
	padding-bottom:30px;
	
	
}

div#mouton
{
	width:130px;
	height:130px;
	
	margin-left:0;
	margin-right:0;
	
	
	margin:0 auto;
	margin-top:50px;
	
}


div#zone_carte_officestourime
{
	 float:none;
	 width:100%;
	 height:auto;
	 margin:0 auto;
	  /* chemin relatif vers l'image */
	  background-image: url('img/etoiles_trame.gif');

	  /* répète sur l'axe X et Y (tuile) */
	  background-repeat: repeat;

	  /* position de départ */
	  background-position: 0 0;

	  /* conserve la taille originale du motif (ne l'étire pas) */
	  background-size: auto;
	
	
}

.carousel {
    
      width: 100%;          /* largeur relative */
      max-width: none;     /* limite max */
     
    }
.info
{
 background:none;	
 color: black;
 border:none;
 left:0;
}
.info-mobile {
  position: relative;
  width: 90%;
 background:white;
border : 1px #f5c000 solid;
  margin:0 auto;
  margin-bottom:10px;
 
  left: 0;
  
  border-radius: 0;
  margin-top: 20px; /* par ex. pour espacer du carrousel */
  display: flex;
    flex-direction: column; /* empile les enfants */
    align-items: flex-start; /* ou center si tu veux centrer */
}


  .info-mobile > .contenu_info_ot {
    float: none;       /* annule le float */
    width:90%;       /* chaque div prend toute la largeur */
    margin-bottom: 5px;
	margin:0 auto;
	text-align:center	/* espace entre elles */
  }
  .info-mobile > .logo_info_carrousel
  {
	   float: none; 
	  margin:0 auto;
	   margin-bottom: 5px;
	  
	  
  }
  

  .dots {
    left: 50%;
    right: auto;         /* on supprime le "alignement à droite" */
    transform: translateX(-50%);
    bottom: 15px;
  }

    .dots span {
      width: 22px;
      height: 22px;
      background: #3396a8;
      border-radius: 50%;
      opacity: 0.3;
      cursor: pointer;
      transition: opacity 0.3s;
    }


#contenant_carousel_images
{
	
	width:100%;
	padding-right:0;
	padding-left:0;
	
}







div#zone_gauche_comment_venir
{
	margin-top:80px;
	width:auto;
	width:25%;
	
	
	
}

div#zone_droite_comment_venir
{
	width:auto;
	width: 70%;
	height:auto;
	aspect-ratio: 1 / 1;
	
	
}











}


@media (max-width: 850px) 
{
.texte_normal
{

font-size:18px;

	
}



.texte_normal_lien
{
	
	font-size:18px;
	
	
}	
.titre_photo_parallax
{
	width:95%;
	
	
}	
	
	
	
	/*********LOGOS PRESENTATION**********/
div#logo_presentation_bds2
{
	
	width: 300px;  
	height: 48px;  
	
	
}

/* Conteneur pour ratio 16:9 */
.video-wrapper 
{
      position: relative;
      width: 100%;
      aspect-ratio: 15 / 9; /* CSS native, plus propre que padding-top */
}	

div#zone_presentation	
{
	
	width:98%;
	
	
}

div#presentation2
{
	
	height: 700px;
	
}


div#zone_comment_venir
{
	width:98%;
		
}

div#zone_gauche_comment_venir
{
	float:none;
	margin-top:20px;
	margin-left:0;
	width:98%;
	margin:0 auto;
	text-align:center;
	
	
}

div#zone_droite_comment_venir
{
	float:none;
	width:100%;
	margin:0 auto;
	margin-top:30px;
	
	
}

	
}