/* css realisation projets */
.slider-project {
  position:relative;
  width: 100%;
  z-index: 1;
}

.slider__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:20;
  border:0;
  background:rgba(0,0,0,.6);
  color:#fff;
  width:32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.slider__nav:focus{outline:3px solid rgba(21,156,228,.35)}
.slider__nav--prev{left:0}
.slider__nav--next{right:0}

.slider__viewport{
  overflow:hidden;
  margin:0 64px; 
}

.container-project {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  row-gap: 30px;
  margin: 30px 0;
}
.container-project ul li {
	padding: 0;
	margin: 0;
	background: none;
}
.project {
  padding: 1em;
  background: #f7f7f7;
}
.project .videoWrapper {
	position: relative!important;
	padding-bottom: 56.25%!important; /* 16:9 */
	height: 0!important;
	margin-bottom: 15px!important;
}
.project .videoWrapper iframe {
	position: absolute!important;
	top: 0!important;
	left: 0!important;
	width: 100%!important;
	height: 100%!important;
}
.project-data {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 30px;
  list-style: none;
  margin: 0;
  padding: 15px 0 0 0;
  margin-top: 20px!important;
}
.slider__track{
  display:flex;
  gap:16px;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
  padding:0;
  margin:0;
  list-style:none;
}

.slider__slide{
  flex:0 0 calc((100% - 32px) / 3); 
  display:flex;
  align-items:center;
  justify-content:center;
}
.slider__slide img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

.slider__dots{
  display:flex;
  gap:8px;
  justify-content:center;
  margin-top:14px;
  display: none;
}
.slider__dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#d3d3d3;
  cursor:pointer;
}
.slider__dot[aria-current="true"]{background:#333}
.id-img img {
	width: 60%;
	height: auto;
	max-width: 120px;
	margin-top: 12px;
	-webkit-border-radius: 300px;
-moz-border-radius: 300px;
border-radius: 300px;
}
.rating {
  display: flex;
  gap: 2px;
}
.id-name {
	font-weight: 600;
}
.rating svg {
  width: 24px;
  height: 24px;
  fill: #ccc;
}
.rating svg.filled {
  fill: #f5b301;
}
.localisation {
padding-top: 15px!important;
}
.localisation p {
	position: relative;
	padding-left: 25px!important;
}
.localisation p::before {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'><path fill='%23EA4335' d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z'/><circle cx='12' cy='9' r='2.5' fill='%23ffffff'/></svg>");
  position: absolute;
  left: 0;
  top: -0.1em;
  width: 24px;
  height: 24px;
}
.blockquote {
	-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
background: rgba(164, 1, 51, 0.05);
padding: 30px;
margin-top: 20px;
}
.project p.title {
font-size: 1.25em!important;
color: #404040;
font-weight: 300;
margin: 20px 0;
	}

@media (max-width:1100px){
  .slider__viewport{margin:0 60px}
  .slider__slide{flex:0 0 calc((100% - 16px) / 2)} /* 1 gap of 16 */
}

/* Mobile: show 1 slide */
@media (max-width:600px){
  .slider__viewport{margin:0}
  .slider__slide{flex:0 0 100%}
  .slider__nav{width:36px;height:36px}

}
@media (min-width:1000px){
.project {
padding: 2em;
	}
.container-project {
  grid-template-columns: repeat(2, 1fr);
  row-gap: 30px;
  column-gap: 30px;
}
.content .project p, .content .project ul {
	font-size: 0.9em!important;
}
.project p.title {
font-size: 1.45em!important;
	}
.slider__viewport{margin:0 55px}
.slider__slide{flex:0 0 100%}
.slider__nav{width:36px;height:36px}
}

@media (min-width:1380px){
.slider__viewport{margin:0 60px}
  .slider__slide{flex:0 0 calc((100% - 16px) / 2)} /* 1 gap of 16 */
	}

@media (min-width:1400px){
.container-project {
    margin: 50px 0!important;   
}
.project p.title {
font-size: 2.1em!important;
	}
	}

/* Empêche la sélection et améliore le comportement tactile */
.slider__track {
  touch-action: pan-y;     /* laisse le scroll vertical mais permet gestures horizontales */
  -webkit-user-drag: none;
  user-select: none;
  -ms-user-select: none;
}

/* Empêche le drag natif des images */
.slider__slide img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: auto;
}

@media (max-width: 600px) {
  .slider__nav {
    display: none !important;
  }
}