/* =========================
   FONTS & PALETTE
   ========================= */
@import url('https://fonts.googleapis.com/css2?family=Hind+Guntur:wght@400;500;700&display=swap');

:root{
  --rose:#FB6F76;
  --peche:#F4B393;
  --beige:#FFDCA9;
  --noir:#252627;
  --blanc:#FFFFFF;
}

/* =========================
   RESET SIMPLE
   ========================= */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

body{
  font-family:'Hind Guntur',sans-serif;
  color:var(--noir);
  background:var(--blanc);
  line-height:1.6;
  font-size:18px;
  opacity:0;
  transition:opacity .8s ease;
}
body.loaded, body.admin-body{opacity:1}
h1,h2,h3,h4{font-family:'Typo Grotesk',sans-serif;font-weight:900;margin-bottom:1rem}

/* =========================
   NAVBAR (desktop + mobile)
   ========================= */
.navbar{
  position:fixed;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 3rem;
  background:rgba(37,38,39,.6);
  backdrop-filter:blur(4px);
  transition:background-color .3s ease;
  z-index:1200;
}
.navbar.scrolled{background:rgba(37,38,39,1)}
.navbar .logo img{height:50px}
.navbar .logo a{display:inline-block;transition:opacity .3s}
.navbar .logo a:hover{opacity:.8;cursor:pointer}

.navbar-right{display:flex;align-items:center}
.navbar-right a{
  margin-left:1.5rem;
  font-weight:700;color:var(--blanc);
  transition:color .3s;
}
.navbar-right a:hover{color:var(--rose)}
.navbar-right .btn-contact{
  padding:.75rem 1.5rem;font-size:1rem;
  background:#A0EEC0;border-radius:999px;
  color:var(--noir);font-weight:700;transition:opacity .3s
}
.navbar-right .btn-contact:hover{opacity:.9}

/* Bouton burger — caché par défaut (desktop) */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:40px;height:40px;
  background:transparent;border:0;cursor:pointer;
  z-index:1300;
}
.nav-toggle .bar{
  display:block;width:100%;height:3px;margin:4px 0;
  background:var(--blanc);transition:.3s;
}
/* état "X" */
.nav-toggle.active .bar:nth-child(1){transform:rotate(45deg) translate(6px,5px);}
.nav-toggle.active .bar:nth-child(2){opacity:0;}
.nav-toggle.active .bar:nth-child(3){transform:rotate(-45deg) translate(6px,-5px);}

/* =========================
   BOUTON OUTLINE GRADIENT
   ========================= */
.btn-main-outline{
  position:relative;display:inline-block;
  padding:.75rem 2rem;border-radius:999px;border:2px solid transparent;
  font-size:1.4rem;font-family:'Typo Grotesk Black',sans-serif;
  background:linear-gradient(90deg,#FAD126,#FF544F);
  background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  transition:transform .3s,background .3s;overflow:hidden;z-index:0;
}
.btn-main-outline::after{
  content:"";position:absolute;inset:0;border-radius:999px;padding:2px;
  background:linear-gradient(90deg,#FAD126,#FF544F);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;-webkit-mask-composite:destination-out;z-index:-1;
}
.btn-main-outline:hover{
  transform:scale(1.05);
  background:linear-gradient(90deg,#FAD126,#FF544F);
  -webkit-background-clip:padding-box;-webkit-text-fill-color:var(--blanc);color:var(--blanc);
}

/* =========================
   HERO
   ========================= */
.hero{
  position:relative;height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:0 8rem;color:var(--blanc);overflow:hidden;
}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:brightness(.3);backdrop-filter:blur(10px);
}
.hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.4);z-index:1}
.hero-content{position:relative;z-index:2;padding:0 5rem}
.hero-content h1{font-size:3.5rem}
.hero-content .subtitle{font-size:1.5rem;font-weight:700;margin-bottom:1rem}
.hero-content .hero-text{
  font-size:1.2rem;margin:1rem 0 2rem;max-width:700px;
  word-break:keep-all;hyphens:none;overflow-wrap:break-word;
}
.scroll-down{
  position:absolute;left:50%;bottom:8rem;transform:translateX(-50%);
  padding:.5rem 1.5rem;background:#A0EEC0;border-radius:999px;color:var(--noir);
  font:700 1.5rem 'Typo Grotesk',sans-serif;text-align:center;cursor:pointer;
  animation:bounce 1.5s infinite;text-decoration:none;opacity:.9;z-index:2;
}
.scroll-down:hover{opacity:1}
@keyframes bounce{0%,20%,50%,80%,100%{transform:translateX(-50%) translateY(0)}40%{transform:translateX(-50%) translateY(8px)}60%{transform:translateX(-50%) translateY(4px)}}

/* =========================
   SECTIONS DIVERS
   ========================= */
.demo{background:var(--blanc);padding:6rem 4rem;display:flex;align-items:center;justify-content:space-between;gap:3rem;flex-wrap:wrap}
.demo-img { flex: 1; max-width: none; }
.demo-text{flex:1;padding-left:4rem}
.demo-text h3{text-transform:uppercase;font-size:1rem;color:var(--beige)}
.demo-text h2{font-size:3rem;margin-bottom:1.5rem}
.demo-text p{margin-bottom:1rem}
.video-container{ width:100%; max-width:900px; margin:0 auto; }
.video-wrapper{ aspect-ratio:16/9; width:100%; height:auto; border:none; border-radius:12px; }

/* Profil */
.profil{position:relative;background:#03172f;color:var(--blanc);overflow:hidden}
.wave-top{width:100%;line-height:0;}
.wave-top svg{display:block;width:100%;height:150px;pointer-events:none}
.wave-top .shape-fill{fill:var(--blanc)}
.profil-img{position:absolute;inset:0 0 0 50%;overflow:hidden}
.profil-img img{width:100%;height:100%;object-fit:cover;mask-image:linear-gradient(to left,rgba(0,0,0,1) 60%,rgba(0,0,0,0));-webkit-mask-image:linear-gradient(to left,rgba(0,0,0,1) 60%,rgba(0,0,0,0))}
.profil-content{position:relative;display:flex;align-items:flex-start;z-index:1;padding:6rem 4rem;min-height:600px;flex-wrap:wrap}
.profil-text{flex:1;max-width:800px;display:flex;flex-direction:column;justify-content:center;padding:0 7rem 0 2rem}
.profil-text h3{text-transform:uppercase;font-size:1rem;color:var(--beige)}
.profil-text h2{font-size:3rem;margin-bottom:1.5rem}
.profil-text p{font-size:1.125rem;margin-bottom:1rem}
.profil-text a.btn-main-outline{display:inline-block;max-width:fit-content}
.trusted-by .wave-top,
.faq-section .wave-top,
/* Les sections qui portent une vague doivent être positionnées */
.trusted-by,
.faq-section,
.apropos-section{ position: relative; }

/* Vague collée en haut des sections */
.trusted-by .wave-top,
.faq-section .wave-top,
.profil .wave-top,
.apropos-section .wave-top{
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  line-height: 0;
  z-index: 1;
}

/* Services */
.services{padding:6rem 11rem;background:var(--blanc);color:var(--noir)}
.services h3{text-transform:uppercase;font-size:1rem}
.services h2{font-size:3rem;margin-bottom:2rem}
.services-tabs{display:flex;justify-content:center;gap:2rem;margin-bottom:2rem;border-bottom:2px solid #ccc;font-size:1.2rem}
.services-tabs .tab{position:relative;padding:1rem;font-weight:700;cursor:pointer;transition:color .3s,transform .3s}
.services-tabs .tab:hover{color:var(--rose);transform:scale(1.05)}
.services-tabs .tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;border-radius:2px;background:linear-gradient(90deg,#FAD126,#FF544F)}
.services-content{display:none;align-items:center;gap:2rem;flex-wrap:wrap;opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s}
.services-content.active{display:flex;opacity:1;transform:translateY(0)}
.services-text{flex:1;padding:0 1.5rem}
.services-text ul{margin-top:1rem;padding-left:1.5rem}
.services-text li{margin-bottom:1rem;list-style:disc}
.services-img{flex:1;max-width:600px}
.services-img img{width:100%;height:auto;border-radius:8px;object-fit:cover}

/* Footer */
.footer-coralens{background:var(--noir);color:var(--blanc);padding:4rem 2rem;font-size:1rem}
.footer-grid{display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;gap:4rem;margin-bottom:2rem}
.footer-col{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:220px;max-width:300px}
.footer-col h4{font-family:'Typo Grotesk',sans-serif;font-weight:900;font-size:1.3rem;margin-bottom:1rem;color:var(--beige);text-align:center}
.footer-col:first-child{text-align:left;align-items:flex-start}
.footer-col:first-child h4{text-align:left}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:.5rem}
.footer-coralens a{color:var(--blanc);opacity:.85;line-height:1.6;transition:color .3s}
.footer-coralens a:hover{color:var(--rose)}
.footer-socials{margin-top:1rem;display:flex;gap:.5rem}
.circle{display:inline-block;width:32px;height:32px;background:var(--beige);color:var(--noir);border-radius:50%;text-align:center;line-height:32px;font-family:'Typo Grotesk',sans-serif;font-weight:700;font-size:.9rem;transition:transform .2s,background .3s}
.circle i{font-size:1rem;line-height:32px}
.circle:hover{transform:scale(1.1);background:var(--rose);color:var(--blanc)}
.footer-coralens i.fa-envelope,.footer-coralens i.fa-phone{margin-right:.5rem}
.footer-bottom{text-align:center;font-size:.85rem;border-top:1px solid rgba(255,255,255,.1);padding-top:1rem;opacity:.7}

/* Utils */
.gradient-text{background:linear-gradient(90deg,#FAD126,#FF544F);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.dot{font-family:'Hind Guntur',sans-serif}

/* =========================
   HERO SMALL (pages intérieures)
   ========================= */
.hero-small{
  height:50vh;display:flex;align-items:center;justify-content:center;text-align:center;
  background:#252627;color:var(--blanc);padding-top:3rem;
}

/* =========================
   VIDÉOS (featured + grille + popup)
   ========================= */
.featured-video{
  display:flex;flex-wrap:wrap;gap:2rem;align-items:center;
  padding:6rem 8rem 4rem;background:#252627;color:var(--blanc);
  box-shadow:inset 0 60px 60px -40px rgba(0,0,0,.5);margin:0 auto;
}
.featured-thumb{position:relative;flex:1 1 480px;max-width:600px;aspect-ratio:16/9;overflow:hidden;border-radius:8px;box-shadow:0 5px 15px rgba(0,0,0,.3);cursor:pointer}
.featured-thumb img{width:100%;height:100%;object-fit:cover}
.featured-overlay{position:absolute;inset:0;background:rgba(0,0,0,.4);opacity:0;transition:opacity .3s}
.featured-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:4rem;color:var(--blanc);opacity:0;transition:opacity .3s,transform .3s}
.featured-thumb:hover .featured-overlay{opacity:1}
.featured-thumb:hover .featured-icon{opacity:1;transform:translate(-50%,-50%) scale(1.1)}
.featured-content{flex:1 1 400px}
.featured-content h2{font-size:2.2rem;margin-bottom:1rem;color:var(--blanc)}
.featured-description{font-size:1.3rem;line-height:1.6;margin-bottom:1.5rem}
.btn-play-featured{padding:.75rem 2rem}
.section-tag{text-transform:uppercase;font-size:.9rem;color:var(--beige);margin-bottom:.5rem;letter-spacing:1px}
.featured-badge{position:absolute;top:1rem;left:1rem;background:var(--rose);color:var(--blanc);font-size:.9rem;padding:.3rem .8rem;border-radius:999px;font-weight:700;box-shadow:0 3px 6px rgba(0,0,0,.3);z-index:2}

/* Filtres (vidéos & photos – mutualisés) */
.videos-filters,.photos-filters{padding:4rem 2rem;background:var(--blanc)}
.videos-filters-header,.photos-filters-header{max-width:700px;margin:0 auto 2rem;text-align:left}
.videos-filters-subtitle,.photos-filters-subtitle{font-size:1.1rem;color:var(--noir);opacity:.8;margin-top:.5rem;margin-bottom:2rem}
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;text-align:center}
.filter-btn{
  padding:.75rem 1.5rem;border-radius:999px;border:2px solid var(--rose);
  background:transparent;color:var(--noir);font-weight:700;cursor:pointer;transition:all .3s;font-family:'Typo Grotesk',sans-serif;
}
.filter-btn:hover,.filter-btn.active{background:var(--rose);color:var(--blanc)}

/* Grille vidéos */
.videos-gallery{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;padding:4rem 2rem;background:var(--blanc)}
.video-item{flex:0 1 calc(25% - 2rem);display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:transform .3s}
.video-item:hover{transform:scale(1.03)}
.video-title{margin-top:.75rem;font-size:1rem;color:var(--noir);text-align:center}

/* Vignette vidéo (dédupliquée) */
.video-thumb{position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;border-radius:8px;box-shadow:0 5px 15px rgba(0,0,0,.1);cursor:pointer;transition:transform .3s}
.video-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.video-thumb:hover img{transform:scale(1.05)}
.video-hover-overlay{position:absolute;inset:0;background:rgba(0,0,0,.4);opacity:0;transition:opacity .3s}
.video-hover-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:3rem;color:var(--blanc);opacity:0;transition:opacity .3s,transform .3s}
.video-thumb:hover .video-hover-overlay{opacity:1}
.video-thumb:hover .video-hover-icon{opacity:1;transform:translate(-50%,-50%) scale(1.1)}

/* --- Instagram (vertical / Reels) --- */
.video-item.instagram .video-thumb {aspect-ratio: 9 / 16;}
.video-item.instagram .video-thumb img {width: 100%;height: 100%;object-fit: cover;object-position: center;}

/* Badge plateforme vidéo */
.video-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  font-size: 0.75rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  z-index: 2;
}
.badge-instagram { background: #FFA500; }
.badge-youtube { background: #FF544F; }

/* Popup vidéo */
.video-popup{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .4s;z-index:999}
.video-popup.active{opacity:1;visibility:visible}
.video-popup-content{background:var(--noir);padding:1rem;border-radius:8px;max-width:900px;width:90%;color:var(--blanc);text-align:center;position:relative}
.popup-close{position:absolute;top:1rem;right:1rem;font-size:2rem;color:var(--blanc);cursor:pointer}
.video-popup-frame{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:8px}
.video-popup-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:none}
.video-popup-description{margin-top:1rem;font-size:1rem;line-height:1.5}

/* =========================
   TRUSTED BY (logos défilants)
   ========================= */
.trusted-by {
  padding: 6rem 2rem;
  background: #03172f;
  color: var(--blanc);
  text-align: center;
}

.trusted-by-header {
  max-width: 700px;
  margin: 0 auto 2rem;
  text-align: left;
}
.trusted-by-header .section-tag {
  color: var(--beige);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.trusted-by-header h2 {
  font-size: 2rem;
  color: var(--blanc);
}

.trusted-by-slider-wrapper {
  width: 100%;
  max-width: 1000px;
  overflow: hidden;
  margin: 3rem auto 0;
  position: relative;
}

.slider-track {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: max-content;
  padding: 0.5rem 0;
  animation: scroll-logos 25s linear infinite;
}

.slider-track img {
  height: 80px;    /* taille uniforme */
  width: auto;
  display: block;
  object-fit: contain;
  opacity: 0.9;
  transition: transform 0.3s ease, opacity 0.3s ease;
  margin: 0;
}
.slider-track img:hover {
  transform: scale(1.08);
  opacity: 1;
}

@keyframes scroll-logos {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 768px) {
  .slider-track img { height: 56px; }
}

/* =========================
   PHOTOS (masonry + lightbox)
   ========================= */
.photos-gallery{column-count:4;column-gap:1.5rem;padding:2rem;background:var(--blanc)}
.photo-item{break-inside:avoid;margin-bottom:1.5rem;cursor:pointer;overflow:hidden;border-radius:8px;box-shadow:0 5px 15px rgba(0,0,0,.1);transition:transform .3s}
.photo-item:hover{transform:scale(1.02)}
.photo-item img{width:100%;height:auto;display:block}
.photo-lightbox{position:fixed !important;inset:0;width:100vw;height:100vh;background:rgba(0,0,0,.95);display:none;justify-content:center;align-items:center;z-index:999999 !important}
.photo-lightbox.active{display:flex}
.photo-lightbox-content{background:var(--noir);padding:1rem;border-radius:8px;max-width:90%;max-height:90%;color:var(--blanc);text-align:center;position:relative}
.lightbox-close{position:absolute;top:1rem;right:1rem;font-size:2rem;color:var(--blanc);cursor:pointer}
.photo-lightbox-content img{max-width:100%;max-height:70vh;border-radius:8px}
.photo-lightbox-description{margin-top:1rem;font-size:1rem;line-height:1.5}
.lightbox-image-wrapper{position:relative;display:flex;align-items:center;justify-content:center}
.lightbox-prev,.lightbox-next{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,.2);color:#fff;font-size:2rem;border:0;cursor:pointer;padding:.5rem 1rem;border-radius:4px;z-index:10;transition:background .2s
}
.lightbox-prev:hover,.lightbox-next:hover{background:rgba(255,255,255,.4)}
.lightbox-prev{left:1rem}.lightbox-next{right:1rem}
.photo-lightbox .lightbox-prev,.photo-lightbox .lightbox-next{font-size:3rem;background:none;color:#fff;padding:0 1rem}

/* =========================
   CONTACT (form + modale)
   ========================= */
.contact-form{padding:4rem 2rem;background:var(--blanc);border-top:2px solid var(--rose)}
.contact-form-container{max-width:700px;margin:0 auto;text-align:left}
.contact-form h2{font-size:2rem;margin-bottom:2rem;color:var(--noir)}
.form-group{margin-bottom:1.5rem}
.form-group label{display:block;margin-bottom:.5rem;color:var(--noir);font-weight:700}
.form-group input[type=text],
.form-group input[type=email],
.form-group textarea{width:100%;padding:.75rem;border:2px solid var(--rose);border-radius:6px;font-size:1rem;font-family:'Inter',sans-serif;color:var(--noir);transition:border-color .3s}
.form-group input[type=text]:focus,
.form-group input[type=email]:focus,
.form-group textarea:focus{border-color:var(--noir);outline:none}
.form-group textarea{resize:vertical}
.form-group input[type="checkbox"]{width:auto;display:inline-block;margin-right:.5rem}
.form-group label a{color:var(--rose);text-decoration:underline}
.hidden{display:none}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);align-items:center;justify-content:center;z-index:9999}
.modal.active{display:flex}
.modal-content{background:var(--noir);padding:2rem;border-radius:8px;text-align:center;max-width:500px;width:90%;color:var(--blanc);position:relative}
.modal-close{position:absolute;top:1rem;right:1rem;font-size:2rem;color:var(--blanc);cursor:pointer}
#success-modal .modal-content{color:var(--noir)}
.contact-info{margin-top:3rem;border-top:2px solid var(--rose);padding-top:2rem}
.contact-info h3{font-size:1.5rem;margin-bottom:1rem;color:var(--noir)}
.contact-info p{font-size:1.1rem;margin-bottom:.5rem}
.contact-info a{color:var(--rose);text-decoration:underline}

/* =========================
   FAQ
   ========================= */
.faq-section{padding:6rem 2rem 4rem;background:#03172f;color:var(--blanc);position:relative;width:100%}
.faq-inner{max-width:800px;margin:0 auto}
.faq-section .section-tag{color:var(--beige);font-size:1.2rem;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:1px;text-align:left}
.faq-section h2{font-size:2rem;color:var(--blanc);margin-bottom:2rem;text-align:left}
.faq-item{border-bottom:1px solid var(--rose);margin-bottom:1rem}
.faq-question{background:none;border:0;width:100%;text-align:left;font-size:1.2rem;padding:1rem 0;cursor:pointer;color:var(--blanc);font-family:'Inter',sans-serif;font-weight:700;transition:color .3s}
.faq-header{display:flex;justify-content:space-between;align-items:center}
.faq-question:hover{color:var(--rose)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s}
.faq-answer p{padding:.5rem 0 1rem;font-size:1rem;color:var(--blanc)}
.faq-item.active .faq-answer{max-height:500px}
.faq-question .chevron{display:inline-block;transition:transform .4s;width:1rem;height:1rem;border-right:2px solid var(--rose);border-bottom:2px solid var(--rose);transform:rotate(45deg);margin-left:1rem}
.faq-item.active .chevron{transform:rotate(-135deg)}

/* =========================
   A PROPOS
   ========================= */
.apropos-section{padding:6rem 2rem;background:var(--blanc);color:var(--noir);width:100%}
.apropos-section.dark{background:#03172f;color:var(--blanc)}
.apropos-inner{max-width:800px;margin:0 auto}
.apropos-section .section-tag{color:var(--beige);font-size:.9rem;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:1px;text-align:left}
.apropos-section h2{font-size:2rem;margin-bottom:2rem;text-align:left}
.apropos-section p{font-size:1.1rem;line-height:1.6;margin-bottom:1.5rem;text-align:left}
.apropos-section .btn-main-outline{margin-top:1rem;padding:.75rem 2rem;display:inline-block}
.apropos-photo{width:100%;max-width:700px;border-radius:8px;margin-bottom:1.5rem}
.apropos-vision{max-width:1000px;margin:0 auto;display:flex;gap:3rem;align-items:center;flex-wrap:wrap;padding:0 2rem}
.vision-text{flex:1 1 500px}
.vision-photo{flex:0 1 400px}
.vision-photo img{width:100%;border-radius:8px}

/* =========================
   ADMIN (extraits utiles)
   ========================= */
.admin-body{background:#fafafa;padding:4rem 2rem;font-family:'Inter',sans-serif}
.admin-form-section{max-width:700px;margin:0 auto;background:var(--blanc);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.1);padding:3rem 4rem}
.admin-form-section h1{font-family:'Syne',sans-serif;font-size:2.4rem;margin-bottom:2rem;text-align:center}
.admin-form .form-group{margin-bottom:1.5rem}
.admin-form .form-group label{font-weight:700;display:block;margin-bottom:.5rem;color:var(--noir)}
.admin-form input[type="text"],.admin-form select,.admin-form textarea,.admin-form input[type="file"]{width:100%;padding:.75rem;border:2px solid var(--rose);border-radius:8px;font-size:1rem;font-family:'Inter',sans-serif}
.admin-form textarea{resize:vertical}
.admin-form .btn-main-outline{margin-top:1rem;display:block;width:100%;text-align:center}

/* =========================
   RESPONSIVE
   ========================= */

/* === MODE GRID PACK (masonry) — activé quand .videos-gallery a la classe .gridpack === */
.videos-gallery.gridpack{
  display: grid !important;                        /* override du flex */
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 colonnes desktop */
  grid-auto-flow: dense;                           /* tasse les cases */
  gap: 2rem;
  align-items: start;
}
.videos-gallery.gridpack .video-item{ margin: 0; transform: translateZ(0); }

/* En mode pack SEULEMENT, les IG reviennent en 9/16 pour créer le “tall” */
.videos-gallery.gridpack .video-item.instagram .video-thumb{ aspect-ratio: 9 / 16; }
.videos-gallery.gridpack .video-item.instagram .video-thumb img{
  width:100%; height:100%; object-fit:cover; object-position:center;
}

/* ===== Timeline (Mon histoire) ===== */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline li { position: relative; padding-left: 1.5rem; margin: 1.1rem 0; }
.timeline h4 { margin: 0 0 .25rem; font-weight: 800; }
.timeline p { margin: 0; }
.tl-dot {                /* <— nom différent de .dot existant */
  position: absolute;
  left: 0; top: .55rem;
  width: .55rem; height: .55rem;
  border-radius: 50%;
  background: var(--rose);
}

/* ===== Matériel (grille responsive) ===== */
.gear-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.gear h4 { margin: 0 0 .25rem; font-weight: 800; }
.gear-note { margin-top: 1rem; }

/* Petits écrans */
@media (max-width: 768px){
  .apropos-inner { padding: 0 .25rem; }
}


@media (max-width: 768px){
  .videos-gallery.gridpack{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 4 colonnes desktop */
    grid-auto-rows: 6px;
    gap: 1.25rem;
  }
}


/* >= 1024 */
@media (max-width:1024px){
  .hero{padding:0 4rem}
  .hero-content h1{font-size:2.5rem}
  .demo,.profil-content{flex-direction:column}
  .services-content{flex-direction:column}
  .photos-gallery{column-count:2}
}

/* <= 768 */
@media (max-width: 768px){
  .navbar{
    flex-direction: row;
    justify-content: space-between;
    padding: 1rem 1.5rem;
  }

  /* bouton visible seulement en mobile */
  .nav-toggle{ display: flex; }

  /* panneau latéral droit pour le menu */
.navbar-right{
  position: fixed; 
  top: 0; 
  right: 0;
  height: 100dvh;
  width: 45% !important;        /* <— rétréci et prioritaire */
  max-width: 300px !important;  /* <— rétréci et prioritaire */
  background: var(--noir);
  display: flex; 
  flex-direction: column;
  align-items: center; 
  justify-content: center;
  padding: 96px 1rem 2rem;       /* un poil moins large */
  transform: translateX(100%);   
  transition: transform .3s ease;
  z-index: 1200;
}

.navbar-right.active,
.navbar-right.open{
  transform: translateX(0) !important;
}

  .navbar-right a{
    margin: 1rem 0; 
    font-size: 1.3rem;
  }

  /* Hide decorative waves on phone */
  .hero .wave-top svg,
  .profil .wave-top svg,
  .trusted-by .wave-top svg,
  .apropos-section .wave-top svg,
  .faq-section .wave-top svg {
    display: none !important;
  }
	
  /* Profil */
  .profil .profil-img,
  .profil .profil-img img{
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  .profil-content{
    padding: 3rem 1.25rem;   
    min-height: auto;        
  }
  .profil-text{
    max-width: 100%;
    padding: 0;              
  }

  /* Hero */
  .hero{ padding: 2rem; text-align: center; }
  .hero-content{ max-width: 100%; padding: 0; }
  .scroll-down{ bottom: 5rem; }

.featured-video{
  padding: 2rem 1rem;  /* bords cohérents avec le reste */
  gap: 1rem;
  flex-direction: column;
}

/* la vignette ne doit pas garder un flex-basis de 480px */
.featured-thumb{
  flex: 0 0 auto;      /* ← annule "1 1 480px" */
  width: 100%;
  max-width: none;
  aspect-ratio: 16 / 9; /* garantit un vrai 16:9 (pas “carré”) */
  border-radius: 12px;
}

.featured-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-content{
  width: 100%;
  padding: 0;
  text-align: left;
}
  
  .videos-gallery{ padding: 2rem 1rem; }

  /* Grid cards */
  .video-item{ flex: 0 1 calc(50% - 2rem); }

  /* Photos masonry */
  .photos-gallery{ column-count: 1; }

  /* Footer */
  .footer-coralens{ padding: 3rem 1.25rem; }
  .footer-grid{ flex-direction: column; align-items: center; text-align: center; }
  .footer-col{ align-items: center; text-align: center; }
  .footer-col:first-child{ align-items: center; text-align: center; }
  .footer-col:first-child h4{ text-align: center; }

  /* Forms / pages */
  .contact-form-container,
  .apropos-inner{ padding: 0 1rem; }
  
  /* titres plus raisonnables sur mobile */
  .services h2{ font-size: 2.2rem; }
  .services h3{ font-size: .95rem; }
  .profil-text h2{ font-size: 2.4rem; }
  .hero-content h1{ font-size: 2.4rem; }

  .demo{ padding: 4rem 1.25rem; align-items: flex-start; }
  .demo-text{ padding-left: 0; width: 100%; text-align: left; }

  .services{ padding: 4rem 1.25rem; }
  .services-tabs{ justify-content: flex-start; }
  .services-content{ align-items: flex-start; }
  .services-text{ padding: 0; width: 100%; text-align: left; }

  /* Petits en-têtes de section */
  .videos-filters-header,
  .trusted-by-header,
  .faq-inner,
  .apropos-inner{ padding: 0 1.25rem; text-align: left; }
}