:root{
  --primary:#F8B045;
  --secondary:#151829;
  --text:#1F2430;
  --muted:#6B7280;
  --bg:#FFFFFF;
  --card:#F7F7FA;
  --radius:12px;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg);scroll-behavior:smooth}
img{max-width:100%;display:block}
a{color:var(--secondary);text-decoration:none}
.container{width:min(1200px,92%);margin-inline:auto}
.grid{display:grid;gap:24px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:999px;border:1px solid transparent;font-weight:700;cursor:pointer;transition:.25s}
.btn-primary{background:var(--primary);color:#111}
.btn-dark{background:#151829;color:#fff}
.btn-primary:hover,.btn-dark:hover{transform:translateY(-1px);filter:brightness(.95)}
.section{padding:80px 0}
.badge{font-size:.9rem;padding:8px 14px;border-radius:999px;background:rgba(248,176,69,.15);color:var(--primary);display:inline-flex;gap:8px;align-items:center}
h1,h2,h3{color:var(--secondary);margin:0 0 12px}
h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.1}
h2{font-size:clamp(1.6rem,3.4vw,2.2rem)}
p{margin:0 0 12px;color:#3a4052}

/* Header */
.site-header{
  position:fixed; top:20px; left:50%; transform:translateX(-50%);
  width:min(1300px,92%);
  border-radius:50px;
 background: rgba(255,255,255,0.09); /* transparent */
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px) /*saturate(180%)*/;
  border:2px dotted #fff;
  z-index:3000;
  transition:background .3s, box-shadow .3s;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0px;transition:.9s;}
.logo-img{height:46px;transition:.3s;}
.site-header.scrolled .logo-img{content: url('../img/Logo_Shapp/Shapp_Logo-Fond-Blanc.png');height:40px} 
.site-header.scrolled .header-inner{padding:10px 0px}
.nav{display:flex;align-items:center;gap:18px}
.site-header .btn-primary{background-color:#F4F5F9;transition:color .25s;transition:.2s;}
.site-header .btn-primary:hover {background: var(--primary);color: white;}
.nav a{color:#000;font-weight:600;transition:color .25s;transition:.2s;}
.site-header.scrolled{background:#fff; box-shadow:0 4px 20px rgba(0,0,0,.08)}
.site-header.scrolled .nav a{color:#111;font-size: 10pt}
.site-header.scrolled .btn-primary{background:var(--primary)}
.site-header.scrolled .btn-primary:hover {background: var(--primary);color: white;}
/* Burger */
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer}
.burger span{width:26px;height:3px;background:#fff;border-radius:2px;transition:.3s}
.site-header.scrolled .burger span{background:#151829}
  
.burger.active span:nth-child(1){transform: rotate(45deg) translate(5px,5px)}
.burger.active span:nth-child(2){opacity:0}
.burger.active span:nth-child(3){transform: rotate(-45deg) translate(6px,-6px)}

/* Hero */
.hero{position:relative;padding:120px 0 4px;overflow:hidden;height:728px;background:url('../img/bg_banner_shapp.svg') no-repeat bottom/cover}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center}
.partie_gauche_banner{max-width:620px; margin-top: -350px}
.partie_gauche_banner h1{font-size: 47pt;font-weight: 700}
.hero .banner{border-radius:28px;/*box-shadow:var(--shadow);*/max-width:520px;margin-inline:auto;transform-origin:center center;will-change:transform;opacity:0;transform:translateY(100px) rotate(-20deg) scale(.9);transition:transform .8s ease-out,opacity .8s ease-out}
.hero .banner.visible{opacity:1;transform:translateY(0) rotate(-20deg) scale(1)}
.eyebrow{background: white; color: black;margin-bottom: 30px; padding: 10px 30px}

.downloads{display:flex;gap:12px;flex-wrap:wrap}
.store{display:inline-flex;align-items:center;gap:0px;padding:px px;border-radius:50px;border:px solid #E5E7EB;color:#111;background:#}
.store img{width: 140px}

/* Intro */
.intro{text-align:center;padding:80px 0;background:#fff}
.intro-title{font-size:2rem;font-weight:800;color:var(--secondary);margin-bottom:12px}
.intro-subtitle{font-size:1.5rem;font-weight:600;color:#1f2430;margin-bottom:20px}
.intro-text{font-size:1rem;line-height:1.6;color:#4a4f5c;margin-bottom:16px}
.intro-bold{font-weight:700;color:var(--secondary);margin-bottom:24px}

/* Services buttons */
.services .services-buttons{grid-template-columns:repeat(5,minmax(0,1fr));margin-top:16px}
.service-btn{display:flex;flex-direction:column;align-items:center;gap:10px;background:#fff;border:1px solid #EEE;border-radius:16px;padding:16px;cursor:pointer;transition:.25s}
.service-btn img{width:56px;height:56px;object-fit:contain}
.service-btn span{font-weight:700;color:var(--secondary)}
.service-btn small{color:#6b7280}
.service-btn:hover{transform:translateY(-3px);box-shadow:var(--shadow);background:#F8B04533}
.service-btn.active{background:var(--primary);}
.service-btn.active span,.service-btn.active small{color:#fff}

/* Services slider */
.services-slider{background:#f9f9fb url('../img/bg-pattern.svg') repeat;padding:100px 20px}
.slider-wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.slider-img{text-align:center}
.service-banner{margin-bottom: -300px; max-width:360px;transform-origin:center center;transform: rotate(-9deg) scale(1);will-change:transform;transition: opacity .5s ease;}
.slider-text h2{font-size:2rem;font-weight:800;color:var(--secondary);margin-bottom:16px}
.slider-nav{margin-top:24px}
.nav-btn{background:var(--primary);color:#111;border:none;padding:12px 18px;margin:0 6px;border-radius:50%;font-size:1.2rem;cursor:pointer;transition:background .3s}
.nav-btn:hover{background:#e69c2e}

/* Promo Ribbon */
.promo-ribbon{background:#e9eaee;padding:0px 0px 15px 0px;max-height: 500px;margin-bottom: 200px}
.ribbon{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:24px;padding:40px 0;background:;position:relative;padding: 100px 0px}
.promo-ribbon:before,.promo-ribbon:after{content:"";position:absolute;left:0;right:0;height:14px;background:linear-gradient(135deg,transparent 75%,#cfd3dd 75%) 0 0/18px 14px,linear-gradient(-135deg,transparent 75%,#cfd3dd 75%) 0 0/18px 14px}
.ribbon:before{top:0}
.ribbon:after{bottom:0;transform:rotate(180deg)}
.ribbon-left{padding-left:16px}
.ribbon-badge{font-size:2.5rem;font-weight:900;color:#0f1220;background:;border-radius:16px;display:inline-block;padding:0px 0px;margin-bottom:0px}
.ribbon-left h3{font-size:1.8rem;color:#0f1220}
.ribbon-left h3 span{color:var(--primary)}
.ribbon-left p{color:#333}
.ribbon-right img{max-width:320px;margin:0 auto;margin-top:-300px;display:block; position: absolute;z-index: 500;}

/* Join */
.join-head{text-align:center;margin-bottom:24px}
.join-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px; margin-top: 100px}
.join-card{background:#f7f7fa;border:1px solid #EEE;border-radius:130px 50px 49px 70px;padding:24px;text-align:center;position:relative}
.join-card .avatar{width:157px;height:157px;object-fit:cover;border-radius:50%;position:absolute;left:50%;transform:translate(-50%,-60%);top:0;border:6px solid #f7f7fa}
.join-card h3{margin-top:48px}
.join-card p{min-height:70px}
.join-card .btn{margin-top:8px}


.popup{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);justify-content:center;align-items:center;z-index:9999;}
.popup-content{background:#fff;width:80%;height:80%;position:relative;border-radius:10px;overflow:hidden;box-shadow:0 5px 15px rgba(0,0,0,0.3);}
.popup-content iframe{width:100%;height:100%;border:none;}
.close{position:absolute;top:10px;right:15px;font-size:28px;font-weight:bold;color:#333;cursor:pointer;z-index:10000;}
/*.btn-popup{display:inline-block;padding:12px 20px;background:#F8B045;color:#fff;text-decoration:none;border-radius:6px;font-weight:600;margin:5px;transition:all .3s ease;}
.btn-popup:hover{background:#151829;color:#fff;} */
@media(max-width:768px){.popup-content{width:95%;height:85%;}}
@media(max-width:480px){.popup-content{width:100%;height:90%;border-radius:0;}}


/* Contact */
.contact-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:flex-start}
.contact-form{background:#fff;border-radius:16px;padding:28px;box-shadow:var(--shadow)}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:.9rem;font-weight:600;color:#444;margin-bottom:6px}
.form-group input,.form-group textarea{width:100%;padding:14px 16px;border-radius:10px;border:1px solid #E5E7EB;font-size:1rem;outline:none;transition:border .2s, box-shadow .2s}
.form-group input:focus,.form-group textarea:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(248,176,69,.2)}



/* FAQ */
.faq{padding:50px 20px;background:#f9f9f9;}
.faq-title{text-align:center;font-size:28px;margin-bottom:30px;color:#151829;}
.faq-item{border-bottom:1px solid #ddd;}
.faq-question{width:100%;text-align:left;background:none;border:none;outline:none;padding:15px;font-size:18px;font-weight:600;cursor:pointer;position:relative;}
.faq-question::after{content:"▾";position:absolute;right:20px;transition:transform 0.3s;}
.faq-question.active::after{transform:rotate(180deg);}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.4s ease;padding:0 15px;}
.faq-answer p{margin:15px 0;color:#444;line-height:1.6;}
@media(max-width:768px){.faq-title{font-size:24px;}.faq-question{font-size:16px;}}






/* Footer */
.footer{background:#0f1220;color:#cfd3dd;padding:56px 0 16px}
.footer .footer-logo{height:45px;margin-bottom:8px}
.footer .brand{color:#fff;font-weight:800;text-decoration:none;display:inline-block;margin:4px 0 8px}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}
.footer h4{margin:0 0 10px}
.footer ul{margin:0;padding-left:0}
.footer ul.flat li{list-style:none;margin:0px 0}
.footer ul.flat li a{font-size:9pt;font-weight:300; color:rgb(168, 168, 168)}
.footer .copyright{color:#9aa0aa;margin-top:0px;margin-bottom:10px;font-size:.8rem}
.footer .store-row{display:flex;gap:10px;flex-wrap:wrap}
.footer .store.small{padding:0px 0px;border-radius:50px;font-size:.1rem;border:0px;}
.footer .store.small img{max-width: 100px}
.footer .bottom{color:rgb(168, 168, 168);display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.08);margin-top:24px;padding-top:14px;font-size:.7rem}
.footer .socials a{display:inline-block;margin-left:3px;opacity:.9}
.footer .socials img{width:15px;height:15px;display:block;}

/* Responsive */
@media (max-width:1000px){
  .hero{width:100%; padding-top:150px;margin: auto; margin-left: 0px; padding-right: 0px;text-align: center}
  .hero .wrap{grid-template-columns:1fr; text-align:center}
  .services .services-buttons{grid-template-columns:repeat(3,1fr)}
  .slider-wrap{grid-template-columns:1fr}
  .contact-wrap{grid-template-columns:1fr}
  .join-grid{grid-template-columns:1fr; gap:32px}
  .hero .banner{margin-top:20px}


    .services:{max-width: 1000px; overflow: hidden; text-align: center}
  .services-slider .slider-text{margin: auto; text-align: center}
  .slider-img{max-width: 100px}
  .services .services-buttons{grid-template-columns:repeat(3,1fr); text-align: center;margin-bottom: 170px}
  .ribbon-left{text-align: center}
  .hero{max-width: 1000px; padding-top:150px;margin: auto; margin-left: 0px; padding-right: 0px;text-align: center}
  .partie_gauche_banner{max-width:500px; margin-top: 0px}
  .partie_gauche_banner h1{font-size: 34pt;font-weight: 700}
  .downloads {
    display: flex;
    justify-content: center; /* centre horizontalement */
    align-items: center;     /* centre verticalement (si besoin) */
    gap: 20px;               /* espace entre les deux boutons */
    margin-top: 20px;
    }

    .join-grid article{grid-template-columns:1fr; gap:32px; margin-bottom: 120px}
    #last-joint-card{margin-bottom: 0px}

}
@media (max-width:768px){
  
  .burger{display:flex}
  .nav{position:absolute;top:70px;right:20px;flex-direction:column;align-items:flex-start;gap:16px;background:#fff;padding:20px;border-radius:12px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translateY(-20px);transition:.3s}
  .nav a{color:#111 !important}
  .nav.active{opacity:1;pointer-events:auto;transform:translateY(0)}
  .ribbon{grid-template-columns:1fr}


  .services:{max-width: 768px; overflow: hidden; text-align: center}
  .services-slider .slider-text{margin: auto; text-align: center}
  .slider-img{max-width: 100px}
  .services .services-buttons{grid-template-columns:repeat(3,1fr); text-align: center;margin-bottom: 170px}
  .ribbon-left{text-align: center}
  .hero{max-width: 768px; padding-top:150px;margin: auto; margin-left: 0px; padding-right: 0px;text-align: center}
  .partie_gauche_banner{max-width:500px; margin-top: 0px}
  .partie_gauche_banner h1{font-size: 34pt;font-weight: 700}
  .downloads {
    display: flex;
    justify-content: center; /* centre horizontalement */
    align-items: center;     /* centre verticalement (si besoin) */
    gap: 20px;               /* espace entre les deux boutons */
    margin-top: 20px;
    }
    .join {margin-top: 320px}
    .join-grid article{grid-template-columns:1fr; gap:32px; margin-bottom: 120px}
    .ribbon-right img{max-width:200px;margin-bottom:-200px;margin-top:0px;display:block; position: relative;z-index: 500;}
    #last-joint-card{margin-bottom: 0px}
}



@media (max-width:640px){

    .site-header{
      /*width: 240px;*/
    }

  .services:{max-width: 640px; overflow: hidden; text-align: center}
  .services-slider .slider-text{margin: auto; text-align: center;margin-top: 100px}
  .slider-img{max-width: 100px}
  .services .services-buttons{grid-template-columns:repeat(3,1fr); text-align: center;margin-bottom: 100px}
  .ribbon-left{text-align: center}
  .hero{max-width: 640px;height: 1200px; padding-top:150px;margin: auto; margin-left: 0px; padding-right: 0px;text-align: center}
  .partie_gauche_banner{max-width:500px; margin-top: 0px}
  .partie_gauche_banner h1{font-size: 34pt;font-weight: 700}
  .downloads {
    display: flex;
    justify-content: center; /* centre horizontalement */
    align-items: center;     /* centre verticalement (si besoin) */
    gap: 20px;               /* espace entre les deux boutons */
    margin-top: 20px;
    }

.downloads .store img {height: px; /* taille uniforme */}
.join-grid article{grid-template-columns:1fr; gap:32px; margin-bottom: 120px}
#last-joint-card{margin-bottom: 0px}
.footer .cols {grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur mobile */}
.footer .foot-brand {grid-column: span 2; /* occupe toute la largeur si besoin */}
.store-row img{width: 120px}



}