/* =========================
   Apparition fluide des images
   ========================= */
img.img-soft{
  filter: blur(10px);
  opacity: 0;
  transform: translateY(4px);
  transition: filter .45s ease, opacity .45s ease, transform .45s ease;
  will-change: filter, opacity, transform;
}
img.img-soft.is-loaded{
  filter: blur(0);
  opacity: 1;
  transform: none;
}
/* Révélation groupée : quand le conteneur est .revealed, on enlève le flou d’un coup */
[data-reveal="together"].revealed img.img-soft{
  filter: blur(0);
  opacity: 1;
  transform: none;
}

/* =========================
   Règles globales
   ========================= */
html { scrollbar-gutter: stable; }
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Segeo UI", Arial, sans-serif;
  margin: 0;
  color: #333;
}

.social-icons { margin-bottom: 8px; text-align: center; }
.social-icons a { color: #0079b2; font-size: 1.3em; margin-left: 12px; transition: color 0.3s; }
.social-icons a:hover { color: #005d86; }
.social-icons img { width: auto; height: 25px; }

.btn-global{
  background: white;
  color: #0d47a1;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: bold;
}
.btn-header{
  background: #0079b2;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: bold;
}

/* =========================
   Hero
   ========================= */
#simple { background: linear-gradient(to right, #69bcd7, #0079b2); color: white; text-align: center; }

#hero{
  background: linear-gradient(to right, #69bcd7, #0079b2);
  color: white;
  text-align: center;
  padding: 40px 20px;
  position: relative;
  overflow: hidden;
}
#hero h1 { font-size: 2.2em; margin-bottom: 15px; }
#hero h2 { font-size: 2.2em; margin-top: 0 !important; }

/* --- Héros : logos réactifs + pas de décalage --- */
.decorated-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:nowrap; /* reste en une ligne sur grands écrans */
  margin-bottom:10px;
}
.image-anime{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  flex:0 0 auto;
}
#hero .image-anime{
  --hero-icon: clamp(48px, 6vw, 80px); /* min 48, max 80, responsive */
}
#hero .image-anime picture,
#hero .image-anime img{
  width: var(--hero-icon);
  height: var(--hero-icon);
  flex: 0 0 var(--hero-icon); /* réserve l’espace pour éviter le reflow */
  display:block;
  object-fit: contain;
}
.title-content{
  text-align:center;
  min-width: clamp(220px, 35vw, 520px);
  flex: 0 1 auto;
}

/* =========================
   Section contact
   ========================= */
.section-contact { text-align: center; padding: 60px 20px; }
.section-contact h2 { font-size: 1.8rem; margin-bottom: 40px; font-weight: 700; }

.contact-container{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto;
}
.map{
  flex: 1;
  min-width: 350px;
  max-width: 800px;
  height: 425px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.map iframe{ width:100%; height:100%; border:0; }

.separator-section{
  display:flex; justify-content:center; align-items:center;
  margin:1rem 0 3rem 0;
}
.split-section{
  display:block; width:200px; height:10px; border:none; border-radius:4px;
  background: linear-gradient(to right,#69bcd7,#0079b2);
}
.split-section2{
  display:block; width:200px; height:10px; border:none; border-radius:4px;
  background: linear-gradient(to right,#69bcd7,white);
}

.contact-info{
  background:#f9fafb; border-radius:12px; padding:30px 40px; max-width:600px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  font-family:'Segoe UI', Roboto, sans-serif;
  color:#333; line-height:1.6;
  transition: transform .3s ease, box-shadow .3s ease;
}
.contact-info:hover{ transform: translateY(-3px); box-shadow:0 6px 16px rgba(0,0,0,.12); }
.contact-info h3{
  font-size:1.6rem; color:#0079b2; margin-bottom:15px; text-align:center;
  text-transform:uppercase; letter-spacing:1px;
}
.contact-info p{ margin:10px 0; font-size:1rem; color:#444; }
.contact-info p strong{ color:#0079b2; }
.contact-info a{ color:#0079b2; text-decoration:none; font-weight:500; transition: color .2s ease; }
.contact-info a:hover{ color:#e67e22; text-decoration: underline; }
.contact-info p + p { border-top:1px solid #eee; padding-top:10px; margin-top:10px; }

/* =========================
   Étapes
   ========================= */
.steps-section{ background:#f8f9fa; padding:80px 20px; text-align:center; }
.steps-sections h2{ color:#0079b2; font-size:2em; margin-bottom:50px; font-weight:700; }

.steps-container{
  display:flex; justify-content:center; align-items:stretch; gap:35px; flex-wrap:wrap;
  max-width:1000px; margin:35px auto;
}
.step-card{
  background:white; border-radius:16px; box-shadow:0 4px 15px rgba(0,0,0,.1);
  padding:5px 5px; flex:1; min-width:220px; max-width:230px;
  transition: transform .3s ease, box-shadow .3s ease;
  opacity:.8; animation: pulseCard 5s ease-in-out infinite;
}
.step-card:nth-child(1){ animation-delay:0s; }
.step-card:nth-child(2){ animation-delay:1s; }
.step-card:nth-child(3){ animation-delay:2s; }
.step-card:nth-child(4){ animation-delay:3s; }
.step-card p{ color:#424242; font-size:.80em; line-height:1.4em; }
.step-card img{ width:40px; height:auto; margin-bottom:2px; filter: drop-shadow(0 2px rgba(0,0,0,.1)); }

/* =========================
   Galerie
   ========================= */
.gallery-section{ background:#f9f9f9; padding:80px 20px; text-align:center; }
.gallery-section h2{ color:#0079b2; font-size:2em; margin-bottom:50px; font-weight:700; }

.gallery-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
  grid-auto-rows:250px; gap:20px; max-width:1100px; margin:0 auto;
}
.gallery-item{
  position:relative; overflow:hidden; border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  transition: transform .4s ease, box-shadow .4s ease;
}
.gallery-item:hover{ transform: scale(1.04); box-shadow: 0 6px 18px rgba(0,121,178,.3); }
.gallery-item img{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.2); transition: all 1.2s ease-out; will-change: transform, filter, opacity;
}
.gallery-item.large{ grid-column: span 2; grid-row: span 2; }
.gallery-item.wide { grid-column: span 2; }
.gallery-item.tall { grid-row: span 2; }
.fade-in{ opacity:0; transform: translateY(30px); transition: all .8s ease-out; }
.fade-in.visible{ opacity:1; transform:none; }

/* =========================
   Carrousel
   ========================= */
.carrousel-controls{
  position:relative; width:100%;
  display:flex; justify-content:space-between; align-items:center;
  margin-top:16px;
}
.carrousel-btn{
  background: rgba(255,255,255,.9); color:#0079b2; border:2px solid #0079b2;
  padding:12px 20px; font-size:1.8rem; font-weight:bold; cursor:pointer;
  border-radius:50%; width:55px; height:55px; display:flex; align-items:center; justify-content:center;
  transition: all .3s ease; box-shadow:0 4px 12px rgba(0,121,178,.2);
}
.carrousel-btn:hover{ background:#0079b2; color:white; transform: scale(1.1); box-shadow:0 6px 18px rgba(0,121,178,.4); }
.carrousel-btn:active{ transform: scale(.95); }

/* =========================
   Lightbox
   ========================= */
section{ padding:60px 20px; text-align:center; }

.lightbox{
  display:none; position:fixed; top:0; left:0; width:100%; height:100%;
  backdrop-filter: blur(10px); background: rgba(0,0,0,.5);
  justify-content:center; align-items:center; flex-direction:column; z-index:9999;
  animation: fadeIn .4s ease forwards;
}
.lightbox img{
  max-width:80%; max-height:70vh; border-radius:12px;
  box-shadow: 0 8px 25px rgba(0,0,0,.4);
  transition: transform .3s ease; object-fit: contain;
}
.lightbox img:hover{ transform: scale(1.02); }
.lightbox p{ color:white; font-size:1.2rem; margin-top:20px; text-align:center; max-width:80%; }
.lightbox .close-btn{
  position:absolute; top:30px; right:50px; color:white; font-size:2.5rem; cursor:pointer; transition:.3s; font-weight:bold;
}
.lightbox .close-btn:hover{ color:#69bcd7; }


.big-since {
  font-size: 30px;
  font-weight: bold;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 1200px){
  .contact-info{ padding:20px; margin:10px; }
  .contact-info h3{ font-size:1.3rem; }

  .contact-container{ flex-direction:column; align-items:center; }

  #hero{ padding:40px 16px; }
  .hero-svg{ max-width:420px; margin-bottom:20px; }

  .steps-container{ gap:30px; }
  .step-card{ padding:2px; min-width:0; flex:1; }
  .step-card img{ width:25px; }
  .step-card p{ font-size: 0.68em; }

  .gallery-grid{ grid-template-columns:1fr 1fr; grid-auto-rows:180px; }

  .gallery-item.large,
  .gallery-item.wide,
  .gallery-item.tall{
    grid-column: span 1; grid-row: span 1;
  }

  .carrousel-controls{ padding:0; margin-top:20px; }
  .carrousel-btn{ width:45px; height:45px; font-size:1.5rem; padding:8px 14px; }
}

/* Héros en colonne sous 992px : logos au-dessus et en-dessous du titre */
@media (max-width: 992px){
  .decorated-title{
    flex-direction:column;
    gap:10px;
    flex-wrap:wrap;
  }
  .image-anime{ flex-wrap:wrap; }
  .title-content{ min-width:auto; }
}
@media (max-width: 600px){
  .steps-container{ gap:10px; }
}


/* iOS smooth scroll */
@supports (-webkit-overflow-scrolling: touch){
  .gallery-grid { -webkit-overflow-scrolling: touch; }
}

/* =========================
   Keyframes
   ========================= */
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
@keyframes pulseCard{
  0%,100%{ transform: scale(1); opacity:.7; }
  15%,35%{ transform: scale(1.12); opacity:1; }
  45%{ transform: scale(1); opacity:.9; }
}