/* ===========================
   Bloc En Savoir Plus
   =========================== */

:root{
  --blue:#52a3aa;
}

/* ---- Bloc principal ---- */
.advice{
  border:2px solid var(--blue);
  border-radius:16px;
  padding:36px 28px;
  max-width:1080px;

  /* marge externe fluide gauche/droite */
  margin:80px clamp(20px, 8vw, 160px);
  
  position:relative;
}

/* ---- En-tête avec icône + titre ---- */
.advice-header{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:20px;
}

/* ---- Icône circulaire ---- */
.advice-icon{
  flex-shrink:0;
  width:40px;
  height:40px;
  border:2px solid var(--blue);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--blue);
  font-weight:700;
  font-size:20px;
  background:#fff;
}

/* ---- Titre ---- */
.advice-title{
  font-size:clamp(14px, 5vw, 26px);
  font-weight:800;
  color:var(--blue);
  text-transform: uppercase;
  margin:0;
  letter-spacing:.5px;
}

/* ---- Texte ---- */
.advice p{
  margin:0;
  font-size:clamp(15px, 2vw, 18px);
  color:var(--blue);
  line-height:1.6;
}

/* ---- Lignes soulignées ---- */
.advice a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:2px;
  text-decoration-color:var(--blue);
  font-weight:700;
}


/* ===========================
   Rectangle de texte blogTxt
   =========================== */

/* Mobile par défaut : empilé, rien ne chevauche */
.blogTxt{
  background:#c8e1e4; /* fallback */
  background:rgba(117,181,187,.40);
  padding:20px;
  margin-top:0px;
  line-height:1.8;
  box-sizing:border-box;
  word-wrap:break-word;
  border-radius:4px;
}

/* Desktop (Bootstrap 3: lg >= 1200px) : on décale visuellement */
@media (min-width:769px){
  .blogTxt{
    margin-top:40px;          /* un peu plus d'air */
    position:relative;        /* permet z-index */
    z-index:1;                /* passe au-dessus de l'image si besoin */
    box-shadow:0 6px 20px rgba(0,0,0,.18);
  }
  /* texte qui mord à gauche (sur l'image à gauche) */
  .shift-left{
    transform:translateX(-55px);
    -webkit-transform:translateX(-55px);
    -ms-transform:translateX(-55px);
    margin-right:20px;        /* espace visuel côté droit */
	padding-left: 40px !important;
  }
  /* variante si tu veux mordre à droite */
  .shift-right{
    transform:translateX(55px);
    -webkit-transform:translateX(55px);
    -ms-transform:translateX(55px);
    margin-left:20px;
	padding-right: 40px !important;
  }
}
@media (max-width:768px){
	.blogTxt{
		background:#c8e1e4; /* fallback */
		background:rgba(117,181,187,.40);
	}
}


/* ===========================
   Lightbox Ekko : Supprime les bordures et l’arrière-plan autour de l’image
   =========================== */

.ekko-lightbox .modal-header { display: none; }
.ekko-lightbox .modal-dialog { margin: 0px; }
.ekko-lightbox .modal-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Supprime aussi les bordures autour de l’image elle-même */
.ekko-lightbox .modal-body img {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}


/* ===========================
   Map Leaflet Open Street Map
   =========================== */

.map-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 6px; /* si tu veux garder l’effet img-rounded */
}

/* Ratio 4:3 sur desktop */
.map-container::before {
  content: "";
  display: block;
  padding-bottom: 75%; /* 3/4 = 0.75 -> ratio 4:3 */
}

/* La carte prend toute la place du container */
#mapid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Sur mobile : ratio 1:1 */
@media (max-width: 767px) {
  .map-container::before {
    padding-bottom: 100%; /* 1:1 */
  }
}


/* ===========================
   Galerie responsive harmonisée (Bootstrap 3 OK)
   =========================== */

.gallery {
  display: grid;
  gap: 12px;
}

/* Images parfaitement carrées */
.g-item {
	position: relative;
	overflow: hidden;
	border-radius: 4px;
}
.g-item::before {
	content: "";
	display: block;
	padding-bottom: 100%; /* carré parfait */
}
.g-item img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ----- Mobile (pile simple) ----- */
.gallery {
	grid-template-columns: 1fr;
}

/* ----- Tablette + (>=768px) ----- */
@media (min-width: 0px) {

	/* ===== 1 photo ===== */
	.gallery.count-1 {
		grid-template-columns: 1fr;
	}

	/* ===== 2 photos ===== [1][  2  ] */
	.gallery.count-2 {
		grid-template-columns: repeat(3, 1fr);
	}
	.gallery.count-2 .g-item:nth-child(1) { grid-column: 1 / span 1; }
	.gallery.count-2 .g-item:nth-child(2) {
		grid-column: 2 / span 2;
	}
	/* La grande image garde la même hauteur */
	.gallery.count-2 .g-item:nth-child(2)::before {
		padding-bottom: calc(50% - 6px); /* moitié de 100% - moitié du gap */
	}

	/* ===== 3 photos ===== [1][3][4] */
	.gallery.count-3 {
		grid-template-columns: repeat(3, 1fr);
	}

/* Ligne 1 */
.gallery.count-3 .g-item:nth-child(1) {
  grid-column: 1 / span 1; /* petite */
  grid-row: 1;
}
.gallery.count-3 .g-item:nth-child(2) {
  grid-column: 2 / span 2; /* grande */
  grid-row: 1;
}

/* Ligne 2 */
.gallery.count-3 .g-item:nth-child(3) {
  grid-column: 1 / span 3; /* pleine largeur */
  grid-row: 2;
}

/* Ratios (gap = 12px donc compensation de 6px) */
.gallery.count-3 .g-item:nth-child(1)::before {
  padding-bottom: 100%; /* petite carrée */
}
.gallery.count-3 .g-item:nth-child(2)::before {
  padding-bottom: calc(50% - 6px); /* grande, même hauteur que la 1 */
}
/* 3e image : format 5/3 = 60% de la largeur */
.gallery.count-3 .g-item:nth-child(3)::before {
  padding-bottom: 60%;
}

/* Ajustement si gap = 14px (>=1200px) */
@media (min-width:1200px) {
  .gallery.count-3 .g-item:nth-child(2)::before {
    padding-bottom: calc(50% - 7px);
  }
}

	/* ===== 4 photos ===== [1][   2   ] / [   3   ][4]  */
	.gallery.count-4{
		grid-template-columns: repeat(3, 1fr);
	}

	/* ligne 1 */
	.gallery.count-4 .g-item:nth-child(1){ grid-column: 1 / span 1; grid-row: 1; } /* petite */
	.gallery.count-4 .g-item:nth-child(2){ grid-column: 2 / span 2; grid-row: 1; } /* grande */

	/* ligne 2 */
	.gallery.count-4 .g-item:nth-child(3){ grid-column: 1 / span 2; grid-row: 2; } /* grande */
	.gallery.count-4 .g-item:nth-child(4){ grid-column: 3 / span 1; grid-row: 2; } /* petite */

	/* ratios (compensation du gap = 12px -> 6px) */
	.gallery.count-4 .g-item:nth-child(1)::before,
	.gallery.count-4 .g-item:nth-child(4)::before{
		padding-bottom: 100%;                  /* petites : carrées */
	}
	.gallery.count-4 .g-item:nth-child(2)::before,
	.gallery.count-4 .g-item:nth-child(3)::before{
		padding-bottom: calc(50% - 6px);       /* grandes : même hauteur que les carrées */
	}

	/* quand le gap passe à 14px sur >=1200px, ajuste aussi : */
	@media (min-width:1200px){
		.gallery.count-4 .g-item:nth-child(2)::before,
		.gallery.count-4 .g-item:nth-child(3)::before{
			padding-bottom: calc(50% - 7px);
		}
	}

	/* ===== 5 photos ===== [1][  2  ] / [3][4][5] */
	.gallery.count-5 {
		grid-template-columns: repeat(3, 1fr);
	}
	.gallery.count-5 .g-item:nth-child(1) { grid-column: 1 / span 1; grid-row: 1; }
	.gallery.count-5 .g-item:nth-child(2) { grid-column: 2 / span 2; grid-row: 1; }
	.gallery.count-5 .g-item:nth-child(3),
	.gallery.count-5 .g-item:nth-child(4),
	.gallery.count-5 .g-item:nth-child(5) {
		grid-column: span 1;
		grid-row: 2;
	}
	/* Ajuste la #2 pour compenser le gap */
	.gallery.count-5 .g-item:nth-child(2)::before {
		padding-bottom: calc(50% - 6px);
	}
}

/* ----- Desktop large (>=1200px) ----- */
@media (min-width: 1200px) {
	.gallery { gap: 14px; }
	.gallery.count-2 .g-item:nth-child(2)::before,
	.gallery.count-5 .g-item:nth-child(2)::before {
		padding-bottom: calc(50% - 7px);
	}
}


/* ===========================
   Divers à vérifier si utiles
   =========================== */

	/* body { padding-top: 0; padding-bottom: 100px; } */

    .btn-file {
        position: relative;
        overflow: hidden;
    }
    .btn-file input[type=file] {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 100%;
        min-height: 100%;
        font-size: 100px;
        text-align: right;
        filter: alpha(opacity=0);
        opacity: 0;
        outline: none;
        background: white;
        cursor: inherit;
        display: block;
    }
	.img-vide{ background-color: lightgrey; height: 230px; }

	.fixed-bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #f8f8f8;
	border-top: 1px solid #ddd;
	padding: 10px;
	text-align: center;
	z-index: 1030; /* au-dessus du contenu */
	}

	p.legende>a { text-decoration: underline; color: #428BCA; }
	p.legende>a:hover { color: #5f5131; }
	.trombino img { margin-bottom: 0; }
	.trombino > div { margin-bottom: 10px; }

	.well {
		background-color: #e4ded1;
	}
	.resume {
		background-color: #FFF;
		font-size: 1.2em;
		color: #5f5131;
		font-style: italic;
		-webkit-box-shadow: 5px 5px 2px 0 #ABABAB;
		box-shadow: 5px 5px 2px 0 #ABABAB;
		margin-bottom: 40px;
	}
	.resume>span {
		font-size: 1.5em;
		line-height: 10px;
		font-weight: 900;
		color: #BBBB18;
	}
	.imageheader{
		background: #c8e3e7;
		-webkit-box-shadow: 5px 2px 2px rgba(0,0,0,0);
		box-shadow: 5px 2px 2px rgba(0,0,0,0);
	}
	.lesaviezvous{
		background-color: #58a3ad;
		color: #FFF;
		padding: 15px;
		margin: 15px;
		margin-bottom: 40px;
	}
	@media screen and (max-width: 768px) {
		div#headerImage>div.container { padding-left: 0; padding-right: 0; }
		div.blogTxt>h3 { margin-top: 0; }
		.marginleft-80
		{
			margin-top: -80px;
			margin-bottom: unset;
			margin-left: -10px;
  			margin-right: 20px;
		}
		.marginright-80
		{
			margin-top: -80px;
			margin-bottom: unset;
			margin-left: 20px;
  			margin-right: -10px;
		}
	}