*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#080705;color:#f4f0e8;font-family:Arial,Helvetica,sans-serif;line-height:1.45}a{color:inherit;text-decoration:none}.nav{height:78px;position:fixed;z-index:50;top:0;left:0;right:0;display:flex;align-items:center;padding:7px 5%;background:#070604e8;border-bottom:1px solid #3d2c17;backdrop-filter:blur(12px)}.brand{width:155px;height:62px;overflow:hidden}.brand img,.footbrand img{width:100%;height:100%;object-fit:cover}.nav nav{display:flex;gap:28px;margin:auto;font-size:12px}.nav nav a:first-child,.nav nav a:hover{color:#e8ae4c}.menu{display:none}.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 21px;border-radius:5px;border:1px solid #7b6442;text-transform:uppercase;font-size:11px;font-weight:900;letter-spacing:.2px}.gold{background:linear-gradient(135deg,#f4c66e,#d99b3d);color:#171006;border-color:#e5ad4c}.dark{background:#080705;color:#fff}.hero{min-height:620px;padding:120px 6% 50px;display:grid;grid-template-columns:1fr 1.05fr;align-items:center;position:relative;overflow:hidden;background:linear-gradient(90deg,#070604 0%,#0c0905c9 50%,#0c09047a),url('assets/hero-accueil-clean.webp') center/cover}.shade{position:absolute;inset:0;background:radial-gradient(circle at 75% 35%,transparent 0,#0000 20%,#0008 75%)}.hero-copy,.devices{position:relative;z-index:2}.eyebrow{font-size:11px;letter-spacing:2.8px;color:#d8bd88}.hero h1{font-size:clamp(48px,5.6vw,82px);line-height:.93;margin:17px 0}.hero h1 span,h2 span{color:#e7aa48}.lead{max-width:620px;color:#d2cbc0;font-size:16px}.actions{display:flex;gap:12px;margin:27px 0}.benefits{display:flex;gap:22px;flex-wrap:wrap;font-size:11px;color:#d0c7ba}.devices{height:440px}.laptop{position:absolute;width:76%;height:315px;left:5%;top:42px;padding:10px;border:2px solid #725b3c;border-radius:15px;background:#111;transform:perspective(800px) rotateY(-6deg);box-shadow:0 30px 70px #000}.screen{height:100%;background:linear-gradient(120deg,#050505aa,#0007),url('assets/interface-site-web.webp') center/cover;border-radius:8px;overflow:hidden}.mini-head{height:42px;padding:14px;color:#e8b154;font-size:10px;background:#070707c9}.mini-head small{float:right;color:#ddd;font-size:6px}.mini-copy{padding:48px 25px}.mini-copy small{font-size:7px}.mini-copy b{display:block;font-size:26px;line-height:1;margin:9px 0 17px}.mini-copy em,.phone em{color:#e9ae4c;font-style:normal}.mini-copy i,.phone i{display:inline-block;background:#e4a847;color:#111;padding:9px;font-style:normal;font-size:7px;font-weight:bold}.phone{position:absolute;width:125px;height:260px;right:5%;bottom:25px;padding:7px;border:2px solid #745c3b;border-radius:20px;background:#111;box-shadow:0 20px 50px #000}.phone .screen{display:flex;flex-direction:column;justify-content:center;padding:12px;font-size:12px}.phone i{margin-top:20px;font-size:5px}.scribble{position:absolute;right:0;top:5px;font-family:cursive;font-style:italic;transform:rotate(-7deg);font-size:15px}.service-grid{padding:18px 3% 35px;display:grid;grid-template-columns:repeat(3,1fr);gap:13px;background:#0a0805}.service{background:#11100e;border:1px solid #3c3020}.service .photo{height:125px;background-size:cover;background-position:center}.s1 .photo{background-image:linear-gradient(#0002,#0007),url('assets/inspiration-salon-v2.webp')}.s2 .photo{background-image:linear-gradient(#0002,#0007),url('assets/inspiration-bain-v2.webp')}.s3 .photo{background-image:linear-gradient(#0002,#0007),url('assets/inspiration-cuisine-v2.webp')}.service-body{display:flex;gap:18px;padding:19px}.ico{color:#e6a942;font-size:38px}.service h3{margin:0 0 7px;font-size:18px;line-height:1.05}.service p{margin:0 0 9px;color:#aaa195;font-size:12px}.service a{color:#e7ab47;font-size:10px;font-weight:bold}.pricing{padding:50px 4%;display:grid;grid-template-columns:.65fr 2.35fr;gap:30px;background:radial-gradient(circle at 55% 30%,#3a2511,transparent 35%),#070604}.pricing-intro h2{font-size:42px;line-height:.96;margin:10px 0 15px}.pricing-intro>p:not(.eyebrow){color:#b9b0a4}.pricing-intro ul,.plan ul{list-style:none;padding:0}.pricing-intro li,.plan li{padding:5px 0;font-size:12px}.pricing-intro li:before,.plan li:before{content:'✓';color:#e8ab46;margin-right:10px}.hand{font-family:cursive;color:#e9b659;font-size:17px;font-style:italic;margin:35px 0 0 55px;transform:rotate(-5deg)}.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}.plan{position:relative;padding:26px 22px;background:linear-gradient(150deg,#17130d,#090806);border:1px solid #5a4326;border-radius:7px;text-align:center}.plan.featured{border:2px solid #e4aa48;box-shadow:0 0 25px #e1a33f66;transform:translateY(-8px)}.popular{position:absolute;left:-2px;right:-2px;top:-34px;padding:9px;background:#efbb62;color:#111;border-radius:8px 8px 0 0;font-size:10px;font-weight:900}.plan h3{margin:0;font-size:18px}.plan>p{color:#aaa096;font-size:11px}.was{color:#a7a09a;text-decoration:line-through;font-size:19px}.was b{float:right;background:#e9ad4a;color:#111;text-decoration:none;font-size:8px;padding:5px 8px;border-radius:4px}.price{font-size:40px;font-weight:900;margin:5px 0 15px}.featured .price{color:#f1bd60}.plan ul{text-align:left;min-height:210px}.plan .btn{width:100%}.process{padding:28px 4%;display:grid;grid-template-columns:.7fr 2.3fr;gap:35px;border-top:1px solid #322617;border-bottom:1px solid #322617;background:#090805}.process h2{font-size:20px;margin:0}.process p{font-size:11px;color:#aaa}.steps{display:flex;align-items:center;justify-content:space-between}.steps span{text-align:center;color:#e5aa49;font-size:25px}.steps span b{font-size:9px;background:#e6aa47;color:#111;border-radius:50%;padding:4px;vertical-align:top}.steps small{display:block;color:#ddd;font-size:10px;margin-top:7px}.steps i{color:#b37c31}.portfolio{padding:35px 4%;display:grid;grid-template-columns:.65fr 2.35fr;gap:30px}.portfolio-title h2{font-size:28px;line-height:1;margin:7px 0 20px}.works{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.works article{background:#111;padding:6px}.wimg{height:115px;background-size:cover;background-position:center}.w1{background-image:url('assets/inspiration-salon-v2.webp')}.w2{background-image:url('assets/inspiration-cuisine-v2.webp')}.w3{background-image:url('assets/inspiration-bain-v2.webp')}.w4{background-image:url('assets/inspiration-cuisine.webp')}.works b,.works small{display:block;font-size:10px;padding-top:5px}.works small{color:#8e867d}.contact{padding:32px 7%;display:grid;grid-template-columns:.8fr 1.2fr .55fr;gap:25px;align-items:center;background:linear-gradient(#090704cc,#090704dd),url('assets/inspiration-salon.webp') center/cover}.contact h2{font-size:27px;line-height:1;margin:0}.contact p{color:#aaa;font-size:11px}form{display:grid;grid-template-columns:1fr 1fr;gap:7px}input,textarea{padding:9px;background:#151515;color:#fff;border:1px solid #4b4135;border-radius:3px;font:inherit;font-size:10px}textarea{grid-column:1/-1;min-height:60px}.contact form .btn{grid-column:1/-1}#formMsg{grid-column:1/-1}.contact-points{display:flex;flex-direction:column;gap:15px;font-size:11px;color:#ddd}.contact-points span:first-letter{color:#e4a841}footer{padding:20px 5%;display:grid;grid-template-columns:160px 1fr 1fr;align-items:center;gap:25px;background:#050504;border-top:1px solid #2e251a}.footbrand{width:150px;height:70px}.footbrand img{object-fit:cover}footer nav{display:flex;gap:17px;font-size:9px}.footcontact{display:flex;gap:16px;justify-content:flex-end;font-size:9px}footer small{grid-column:1/-1;color:#777;font-size:9px}.reveal{opacity:0;transform:translateY(18px);transition:.65s}.reveal.visible{opacity:1;transform:none}@media(max-width:900px){.nav{height:68px;padding:6px 17px}.brand{width:110px;height:52px}.menu{display:block;margin-left:auto;background:none;border:0;color:#fff;font-size:25px}.navcta{display:none}.nav nav{display:none;position:absolute;top:68px;left:0;right:0;padding:20px;background:#080705;flex-direction:column}.nav.open nav{display:flex}.hero{grid-template-columns:1fr;padding-top:110px}.devices{height:350px}.service-grid,.plans{grid-template-columns:1fr}.pricing,.process,.portfolio,.contact{grid-template-columns:1fr}.plan.featured{transform:none;margin-top:32px}.plan ul{min-height:auto}.steps{overflow:auto;gap:18px;justify-content:flex-start}.works{grid-template-columns:1fr 1fr}footer{grid-template-columns:1fr;text-align:center}.footbrand{margin:auto}footer nav,.footcontact{justify-content:center;flex-wrap:wrap}}@media(max-width:560px){.hero h1{font-size:45px}.actions{flex-direction:column}.benefits{gap:10px}.devices{height:290px}.laptop{width:85%;height:220px}.phone{width:90px;height:185px}.mini-copy{padding:28px 15px}.mini-copy b{font-size:17px}.scribble{display:none}.service-grid{padding:12px}.pricing{padding:55px 18px}.pricing-intro h2{font-size:36px}.works{grid-template-columns:1fr}form{grid-template-columns:1fr}textarea,.contact form .btn,#formMsg{grid-column:auto}}
/* Correctif affichage production */
.reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* ===== LISIBILITÉ NSG ===== */

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.nav nav {
  font-size: 14px;
  font-weight: 600;
}

.lead {
  font-size: 17px;
  line-height: 1.6;
}

.benefits {
  font-size: 13px;
  font-weight: 600;
}

.service p {
  font-size: 14px;
  line-height: 1.55;
  color: #d6d0c7;
}

.service a {
  font-size: 12px;
}

.pricing-intro > p:not(.eyebrow) {
  font-size: 15px;
  line-height: 1.55;
}

.pricing-intro li,
.plan li {
  font-size: 14px;
  line-height: 1.45;
}

.plan > p {
  font-size: 13px;
  color: #d2cbc1;
}

.process p {
  font-size: 13px;
  line-height: 1.5;
  color: #d5cec4;
}

.steps small {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
}

.works b {
  font-size: 12px;
}

.works small {
  font-size: 11px;
  color: #bbb3a8;
}

.contact p {
  font-size: 13px;
  color: #ded7ce;
}

.contact-points {
  font-size: 13px;
  font-weight: 600;
}

input,
textarea {
  font-size: 13px;
}

footer nav {
  font-size: 12px;
  font-weight: 600;
}

.footcontact {
  font-size: 13px;
  font-weight: 700;
  gap: 22px;
}

footer small {
  font-size: 11px;
  color: #aaa39a;
}

@media (max-width: 900px) {
  .nav nav {
    font-size: 15px;
  }

  .service p,
  .pricing-intro li,
  .plan li {
    font-size: 14px;
  }

  .steps small {
    font-size: 12px;
  }

  .footcontact {
    font-size: 14px;
  }
}

/* Nouvelles images des services */
.s1 .photo {
  background-image: url('/assets/creation-web.webp') !important;
  background-position: center !important;
  background-size: cover !important;
}

.s2 .photo {
  background-image: url('/assets/gestion-generale.webp') !important;
  background-position: center !important;
  background-size: cover !important;
}

.s3 .photo {
  background-image: url('/assets/solutions-entreprises.png') !important;
  background-position: center !important;
  background-size: cover !important;
}
.s1 .photo {
  background-image: url('/assets/creation-web-v2.jpg?v=1') !important;
  background-position: center !important;
  background-size: cover !important;
}
.s1 .photo {
  background-image: url('/assets/creation-web-exacte.jpg?v=1') !important;
  background-position: center !important;
  background-size: cover !important;
}
.s1 .photo {
  background-image: url('/assets/creation-web-exacte.jpg?v=2') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: #080705 !important;
}
.s1 .photo {
  background-image: url('/assets/creation-web-final.jpg?v=1') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Affichage complet image Création Web */
.s1 .photo {
  background-image: url('/assets/creation-web-final.jpg?v=100') !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: #080705 !important;
  height: 190px !important;
}

.s1 .photo {
  background-image: url('/assets/creation-web-complete.jpg?v=101') !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: #080705 !important;
}

/* Icône ordinateur - Création de sites web */
.s1 .service-icon,
.s1 .icon {
  font-size: 0 !important;
  width: 28px !important;
  height: 22px !important;
  border: 2px solid #e7a91b !important;
  border-radius: 2px !important;
  position: relative !important;
  display: inline-block !important;
}

.s1 .service-icon::after,
.s1 .icon::after {
  content: "" !important;
  position: absolute !important;
  width: 12px !important;
  height: 2px !important;
  background: #e7a91b !important;
  left: 6px !important;
  bottom: -6px !important;
  box-shadow: 0 3px 0 #e7a91b !important;
}

/* Icône ordinateur — Création de sites web */
.service.s1 .icon {
  font-size: 0 !important;
  width: 26px !important;
  height: 18px !important;
  border: 2px solid #e7a91b !important;
  border-radius: 1px !important;
  box-sizing: border-box !important;
  position: relative !important;
  background: transparent !important;
}

.service.s1 .icon::before {
  content: "" !important;
  position: absolute !important;
  width: 8px !important;
  height: 4px !important;
  left: 7px !important;
  bottom: -6px !important;
  border-left: 2px solid #e7a91b !important;
  border-right: 2px solid #e7a91b !important;
}

.service.s1 .icon::after {
  content: "" !important;
  position: absolute !important;
  width: 16px !important;
  height: 2px !important;
  background: #e7a91b !important;
  left: 3px !important;
  bottom: -8px !important;
}

/* CORRECTION FINALE ICONE ORDINATEUR */
.service.s1 .icon {
  font-size: 0 !important;
  width: 30px !important;
  height: 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: visible !important;
}

.service.s1 .icon::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 1px !important;
  width: 26px !important;
  height: 16px !important;
  border: 2px solid #e7a91b !important;
  border-radius: 2px !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

.service.s1 .icon::after {
  content: "" !important;
  position: absolute !important;
  left: 7px !important;
  bottom: 0 !important;
  width: 16px !important;
  height: 2px !important;
  background: #e7a91b !important;
  border: 0 !important;
  box-shadow: 5px -4px 0 -4px #e7a91b !important;
}
.s1 .computer-icon {
  width: 30px;
  height: 22px;
  border: 2px solid #e7a91b;
  border-radius: 2px;
  color: transparent;
  box-sizing: border-box;
  position: relative;
  flex: 0 0 30px;
}

.s1 .computer-icon::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 5px;
  left: 10px;
  top: 20px;
  background: #e7a91b;
}

.s1 .computer-icon::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 2px;
  left: 5px;
  top: 25px;
  background: #e7a91b;
}

/* Image finale Solutions pour entreprises */
.service.s3 .photo {
  background-image: url('/assets/solutions-entreprises-final.jpg?v=200') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  height: 190px !important;
}

/* Alignement final des 3 cartes services */
.service-grid .service-body {
  min-height: 130px !important;
  align-items: flex-start !important;
  padding-top: 18px !important;
}

.service-grid .service-body h3 {
  margin-top: 0 !important;
}

/* Alignement Gestion générale uniquement */
.service.s2 .photo {
  height: 190px !important;
  min-height: 190px !important;
  background-size: cover !important;
  background-position: center !important;
}
.works .w1{background-image:url("/assets/realisation-renovation-HD.jpg?v=1") !important;}
.works .w1{background-size:contain !important;background-repeat:no-repeat !important;background-position:center !important;background-color:#080808 !important;}
.works .w1{height:220px !important;}
.works .w1{height:150px !important;}
.works .w2{background-image:url("/assets/realisation-commerce-HD.jpg?v=1") !important;background-size:contain !important;background-repeat:no-repeat !important;background-position:center !important;background-color:#080808 !important;height:150px !important;}
.works .w3{background-image:url("/assets/realisation-services-HD.jpg?v=1") !important;background-size:contain !important;background-repeat:no-repeat !important;background-position:center !important;background-color:#080808 !important;height:150px !important;}
.works .w4{background-image:url("/assets/realisation-restaurant-HD.jpg?v=1") !important;background-size:contain !important;background-repeat:no-repeat !important;background-position:center !important;background-color:#080808 !important;height:150px !important;}
.works .w1{background-size:auto 145px !important;background-position:center !important;}
.works .w1{background-size:cover !important;background-position:center 42% !important;height:150px !important;}
.works .w1{background-image:url("/assets/realisation-renovation-large.jpg?v=2") !important;background-size:cover !important;background-position:center !important;height:150px !important;}
.works .w2{background-image:url("/assets/realisation-commerce-large.jpg?v=2") !important;background-size:cover !important;background-position:center !important;height:150px !important;}
.works .w3{background-image:url("/assets/realisation-services-large.jpg?v=2") !important;background-size:cover !important;background-position:center !important;height:150px !important;}
.works .w4{background-image:url("/assets/realisation-restaurant-large.jpg?v=2") !important;background-size:cover !important;background-position:center !important;height:150px !important;}
.works article{position:relative;padding-bottom:12px !important}.works article::after{content:"↗";position:absolute;right:12px;bottom:13px;color:#e7a91b;font-size:24px;font-weight:300;line-height:1;}
.works article>b{display:block;font-size:15px !important;font-weight:700 !important;line-height:1.25;margin-top:7px}.works article>small{display:block;font-size:12px !important;color:#aaa !important;margin-top:6px}
.benefits .benefit{display:inline-flex;align-items:center;gap:10px}
.benefits .benefit::before{color:#e7a91b;font-size:22px;font-weight:700;line-height:1}
.benefits .design::before{content:"▣"}
.benefits .fiable::before{content:"✓"}
.benefits .resultat::before{content:"↗"}
.benefits .support::before{content:"◉"}
.benefits .design::before{content:"🖥";font-size:21px}
.benefits .support::before{content:"🎧";font-size:21px}
.social-icons{display:flex;align-items:center;gap:14px;margin-top:14px}
.social-icons span,.social-icons a{width:32px;height:32px;border:1px solid #e7a91b;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#e7a91b;font-weight:700;font-size:16px;line-height:1}
.social-icons .facebook{font-family:Arial,sans-serif;font-size:21px}
.social-icons .instagram{font-size:21px}
.social-icons .linkedin{font-family:Arial,sans-serif;font-size:14px}
.social-icons .instagram{
font-size:0;
position:relative;
box-sizing:border-box;
border:2px solid #e7a91b;
border-radius:9px;
}
.social-icons .instagram::before{
content:"";
width:10px;
height:10px;
border:2px solid #e7a91b;
border-radius:50%;
box-sizing:border-box;
}
.social-icons .instagram::after{
content:"";
position:absolute;
width:3px;
height:3px;
background:#e7a91b;
border-radius:50%;
top:7px;
right:7px;
}

/* Facebook premium */
.social-icons .facebook{
font-size:0;
position:relative;
}
.social-icons .facebook::before{
content:"f";
font-family:Arial,sans-serif;
font-size:24px;
font-weight:700;
color:#e7a91b;
line-height:1;
transform:translateY(2px);
}

/* LinkedIn premium */
.social-icons .linkedin{
font-size:0;
position:relative;
border-radius:7px;
}
.social-icons .linkedin::before{
content:"in";
font-family:Arial,sans-serif;
font-size:15px;
font-weight:700;
letter-spacing:-1px;
color:#e7a91b;
line-height:1;
}

/* ===== AVANTAGES WEB NSG ===== */
.web-features{
padding:80px 6%;
background:#090909;
}

.web-features-head{
text-align:center;
margin-bottom:45px;
}

.web-features-head h2{
font-size:42px;
line-height:1.05;
margin:8px 0 0;
}

.web-features-head h2 span{
color:#e7a91b;
}

.web-features-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
max-width:1250px;
margin:0 auto;
}

.web-features-grid article{
display:flex;
align-items:center;
gap:20px;
min-height:145px;
padding:25px;
border:1px solid rgba(231,169,27,.65);
border-radius:18px;
background:linear-gradient(135deg,#171717,#090909);
box-shadow:inset 0 0 30px rgba(231,169,27,.025);
transition:.3s ease;
}

.web-features-grid article:hover{
transform:translateY(-5px);
border-color:#e7a91b;
box-shadow:0 10px 35px rgba(231,169,27,.12);
}

.web-features-grid h3{
margin:0 0 8px;
color:#e7a91b;
font-size:20px;
}

.web-features-grid p{
margin:0;
color:#c8c8c8;
font-size:14px;
line-height:1.5;
}

.feature-icon{
width:70px;
height:70px;
min-width:70px;
border:2px solid #e7a91b;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
position:relative;
box-shadow:0 0 18px rgba(231,169,27,.18);
}

@media(max-width:900px){
.web-features-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:600px){
.web-features{padding:60px 20px}
.web-features-grid{grid-template-columns:1fr}
.web-features-grid article{min-height:125px}
.web-features-head h2{font-size:32px}
}

/* ===== PICTOGRAMMES DORÉS ===== */
.feature-icon::before{
color:#e7a91b;
font-family:Arial,sans-serif;
font-size:30px;
font-weight:500;
line-height:1;
}

/* Design sur mesure */
.icon-design::before{
content:"</>";
font-size:20px;
font-weight:700;
}

/* Performance */
.icon-performance::before{
content:"◴";
font-size:38px;
}

/* Mobile */
.icon-mobile::before{
content:"▯";
font-size:42px;
}

/* SEO */
.icon-seo::before{
content:"⌕";
font-size:43px;
}

/* Contenu professionnel */
.icon-content::before{
content:"✎";
font-size:34px;
}

/* Sécurité */
.icon-security::before{
content:"✓";
width:34px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
border:2px solid #e7a91b;
border-radius:50% 50% 55% 55%;
font-size:21px;
}

/* Statistiques */
.icon-stats::before{
content:"▂▅█";
font-size:22px;
letter-spacing:2px;
}

/* Support */
.icon-support::before{
content:"☏";
font-size:39px;
}

/* Évolutif */
.icon-evolution::before{
content:"⚙";
font-size:37px;
}

.feature-icon{
background:radial-gradient(circle,rgba(231,169,27,.10),transparent 65%);
}


/* ===== BENEFITS HERO PREMIUM ===== */
.hero .benefits{
display:grid;
grid-template-columns:repeat(4,1fr);
align-items:center;
margin-top:32px;
gap:0;
width:100%;
}

.hero .benefits .benefit{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
position:relative;
padding:5px 15px;
}

.hero .benefits .benefit:not(:last-child)::after{
content:"";
position:absolute;
right:0;
height:48px;
width:1px;
background:linear-gradient(transparent,#e7a91b,transparent);
}

.hero .benefits .benefit::before{
display:none !important;
}

.hero .benefits .benefit i{
width:52px;
height:52px;
min-width:52px;
border:2px solid #e7a91b;
border-radius:50%;
position:relative;
display:flex;
align-items:center;
justify-content:center;
background:radial-gradient(circle,rgba(231,169,27,.13),transparent 65%);
box-shadow:0 0 15px rgba(231,169,27,.20);
font-style:normal;
}

.hero .benefits .benefit b{
font-size:14px;
font-weight:400;
color:#f2f2f2;
white-space:nowrap;
}

.hero .benefits .benefit b em{
font-style:normal;
font-weight:700;
color:#e7a91b;
}

/* Icônes temporaires avant dessin SVG */
.hero .benefits .design i::before{
content:"</>";
color:#e7a91b;
font-size:14px;
font-weight:700;
}

.hero .benefits .fiable i::before{
content:"✓";
color:#e7a91b;
font-size:25px;
}

.hero .benefits .resultat i::before{
content:"▂▅█";
color:#e7a91b;
font-size:14px;
letter-spacing:1px;
}

.hero .benefits .support i::before{
content:"☏";
color:#e7a91b;
font-size:27px;
}

@media(max-width:750px){
.hero .benefits{
grid-template-columns:1fr 1fr;
gap:18px 0;
}
.hero .benefits .benefit:nth-child(2)::after{
display:none;
}
}


/* ===== VRAIS PICTOGRAMMES HERO ===== */

/* DESIGN MODERNE — écran */
.hero .benefits .design i::before{
content:"";
width:25px;
height:17px;
border:2px solid #e7a91b;
border-radius:3px;
box-sizing:border-box;
}
.hero .benefits .design i::after{
content:"";
position:absolute;
width:17px;
height:2px;
background:#e7a91b;
bottom:11px;
box-shadow:0 -3px 0 -1px #e7a91b;
}

/* SERVICE FIABLE — bouclier */
.hero .benefits .fiable i::before{
content:"✓";
width:25px;
height:29px;
display:flex;
align-items:center;
justify-content:center;
color:#e7a91b;
font-size:17px;
font-weight:700;
border:2px solid #e7a91b;
border-radius:12px 12px 15px 15px;
box-sizing:border-box;
}

/* RÉSULTATS CONCRETS — graphique */
.hero .benefits .resultat i::before{
content:"▂▅█";
color:#e7a91b;
font-size:16px;
font-weight:700;
letter-spacing:1px;
transform:translateY(2px);
}

/* SUPPORT CONTINU — casque */
.hero .benefits .support i::before{
content:"";
width:25px;
height:21px;
border:2px solid #e7a91b;
border-bottom:0;
border-radius:15px 15px 0 0;
box-sizing:border-box;
}
.hero .benefits .support i::after{
content:"";
position:absolute;
width:5px;
height:11px;
left:11px;
top:24px;
border-radius:4px;
background:#e7a91b;
box-shadow:24px 0 0 #e7a91b;
}


/* SUPPORT CONTINU — casque corrigé */
.hero .benefits .support i::before{
content:"";
position:absolute;
width:25px;
height:23px;
border:2px solid #e7a91b;
border-bottom:0;
border-radius:16px 16px 0 0;
box-sizing:border-box;
top:13px;
left:12px;
}

.hero .benefits .support i::after{
content:"";
position:absolute;
width:5px;
height:12px;
background:#e7a91b;
border-radius:4px;
left:9px;
top:27px;
box-shadow:29px 0 0 #e7a91b;
}

/* SUPPORT CONTINU — icône SVG uniforme */
.hero .benefits .support i::before{
content:"" !important;
position:static !important;
display:block !important;
width:28px !important;
height:28px !important;
border:0 !important;
border-radius:0 !important;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e7a91b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13v-2a8 8 0 0 1 16 0v2'/%3E%3Cpath d='M4 13h2.5v6H5a2 2 0 0 1-2-2v-2a2 2 0 0 1 1-2Z'/%3E%3Cpath d='M20 13h-2.5v6H19a2 2 0 0 0 2-2v-2a2 2 0 0 0-1-2Z'/%3E%3Cpath d='M17.5 19c-.8 1.5-2.2 2-4 2H12'/%3E%3C/svg%3E") center/contain no-repeat !important;
box-shadow:none !important;
transform:none !important;
}

.hero .benefits .support i::after{
display:none !important;
content:none !important;
}

/* RÉSULTATS CONCRETS — graphique SVG uniforme */
.hero .benefits .resultat i::before{
content:"" !important;
display:block !important;
width:28px !important;
height:28px !important;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e7a91b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V14h4v6M10 20V10h4v10M16 20V5h4v15'/%3E%3Cpath d='M3 20h18'/%3E%3C/svg%3E") center/contain no-repeat !important;
font-size:0 !important;
letter-spacing:0 !important;
transform:none !important;
}

/* ===== VERSION MOBILE NSG ===== */
@media(max-width:600px){

.hero{
min-height:auto !important;
padding:95px 18px 35px !important;
display:block !important;
}

.hero-copy{
width:100% !important;
}

.hero h1{
font-size:42px !important;
line-height:.95 !important;
margin:15px 0 18px !important;
}

.hero .lead{
font-size:15px !important;
line-height:1.55 !important;
}

.hero .actions{
display:grid !important;
grid-template-columns:1fr !important;
gap:10px !important;
margin:24px 0 !important;
}

.hero .actions .btn{
width:100% !important;
}

/* 4 avantages */
.hero .benefits{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:12px !important;
margin-top:25px !important;
}

.hero .benefits .benefit{
justify-content:flex-start !important;
padding:10px 5px !important;
gap:9px !important;
}

.hero .benefits .benefit i{
width:44px !important;
height:44px !important;
min-width:44px !important;
}

.hero .benefits .benefit b{
font-size:12px !important;
white-space:normal !important;
line-height:1.25 !important;
}

.hero .benefits .benefit::after{
display:none !important;
}

.devices{
height:285px !important;
margin-top:20px !important;
}

}

@media(max-width:600px){

/* SERVICES */
.service-grid{
display:grid !important;
grid-template-columns:1fr !important;
gap:16px !important;
padding:25px 16px 40px !important;
}

.service .photo{
height:180px !important;
}

.service-body{
padding:20px !important;
gap:15px !important;
}

.service h3{
font-size:20px !important;
}

.service p{
font-size:14px !important;
}

/* 9 AVANTAGES WEB */
.web-features{
padding:55px 16px !important;
}

.web-features-head{
margin-bottom:30px !important;
}

.web-features-head h2{
font-size:30px !important;
}

.web-features-grid{
grid-template-columns:1fr !important;
gap:12px !important;
}

.web-features-grid article{
min-height:115px !important;
padding:18px !important;
gap:16px !important;
border-radius:14px !important;
}

.feature-icon{
width:58px !important;
height:58px !important;
min-width:58px !important;
}

.web-features-grid h3{
font-size:18px !important;
}

.web-features-grid p{
font-size:13px !important;
}

/* FORFAITS */
.pricing{
display:block !important;
padding:55px 16px !important;
}

.pricing-intro{
margin-bottom:35px !important;
}

.pricing-intro h2{
font-size:34px !important;
}

.hand{
margin:25px 0 15px !important;
transform:none !important;
}

.plans{
display:grid !important;
grid-template-columns:1fr !important;
gap:24px !important;
}

.plan{
padding:28px 20px !important;
}

.plan.featured{
margin-top:32px !important;
transform:none !important;
}

.plan ul{
min-height:auto !important;
}

.price{
font-size:42px !important;
}

}

@media(max-width:600px){

/* RÉALISATIONS */
.portfolio{
display:block !important;
padding:50px 16px !important;
}

.portfolio-title{
margin-bottom:28px !important;
}

.portfolio-title h2{
font-size:30px !important;
}

.works{
display:grid !important;
grid-template-columns:1fr !important;
gap:18px !important;
}

.works .wimg{
height:190px !important;
}

/* CONTACT */
.contact{
display:block !important;
padding:50px 18px !important;
}

.contact h2{
font-size:30px !important;
margin-bottom:12px !important;
}

.contact form{
display:grid !important;
grid-template-columns:1fr !important;
gap:10px !important;
margin:28px 0 !important;
}

.contact input,
.contact textarea{
width:100% !important;
font-size:16px !important;
padding:13px !important;
}

.contact textarea{
min-height:120px !important;
}

.contact form .btn{
width:100% !important;
}

.contact-points{
margin-top:25px !important;
gap:12px !important;
}

/* FOOTER */
footer{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
text-align:center !important;
padding:35px 18px 25px !important;
gap:22px !important;
}

.footbrand{
width:145px !important;
height:70px !important;
}

footer nav{
display:flex !important;
justify-content:center !important;
flex-wrap:wrap !important;
gap:12px 18px !important;
font-size:12px !important;
}

.footcontact{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
gap:10px !important;
font-size:13px !important;
}

.social-icons{
justify-content:center !important;
margin-top:8px !important;
}

footer small{
width:100% !important;
font-size:10px !important;
}

}

/* ADAPTÉ MOBILE — vrai smartphone SVG */
.web-features .icon-mobile::before{
content:"" !important;
display:block !important;
width:30px !important;
height:38px !important;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30' fill='none' stroke='%23e7a91b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='26' rx='2.5'/%3E%3Cpath d='M9.5 5h5'/%3E%3Cpath d='M5 23h14'/%3E%3Ccircle cx='12' cy='25.5' r='.8' fill='%23e7a91b' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat !important;
font-size:0 !important;
}

/* ===== ANIMATIONS PREMIUM AU SCROLL ===== */
@media (prefers-reduced-motion: no-preference){

.reveal{
opacity:0 !important;
transform:translateY(32px) scale(.985) !important;
filter:blur(3px);
transition:
opacity .8s cubic-bezier(.2,.7,.2,1),
transform .8s cubic-bezier(.2,.7,.2,1),
filter .8s ease !important;
will-change:opacity,transform;
}

.reveal.visible{
opacity:1 !important;
transform:translateY(0) scale(1) !important;
filter:blur(0);
}

/* Cartes plus vivantes */
.service,
.plan,
.web-features-grid article,
.works article{
transition:
transform .35s ease,
border-color .35s ease,
box-shadow .35s ease !important;
}

/* Images */
.service .photo,
.works .wimg{
transition:transform .6s cubic-bezier(.2,.7,.2,1),
filter .6s ease !important;
}

/* Boutons */
.btn{
transition:
transform .25s ease,
box-shadow .25s ease,
border-color .25s ease !important;
}

@media(hover:hover) and (pointer:fine){

.service:hover,
.web-features-grid article:hover,
.works article:hover{
transform:translateY(-7px);
box-shadow:0 15px 35px rgba(231,169,27,.10);
}

.plan:hover{
transform:translateY(-6px);
box-shadow:0 18px 40px rgba(231,169,27,.12);
}

.service:hover .photo,
.works article:hover .wimg{
transform:scale(1.035);
filter:brightness(1.08);
}

.btn:hover{
transform:translateY(-2px);
box-shadow:0 8px 25px rgba(231,169,27,.18);
}

}

}

/* ===== EFFETS PREMIUM SUR LES IMAGES ===== */
@media (hover:hover) and (pointer:fine){

.service,
.works article{
overflow:hidden;
}

/* Images services */
.service .photo{
position:relative;
transition:
transform .65s cubic-bezier(.2,.7,.2,1),
filter .65s ease !important;
}

.service:hover .photo{
transform:scale(1.07) !important;
filter:brightness(1.12) contrast(1.04) !important;
}

/* Images réalisations */
.works .wimg{
position:relative;
transition:
transform .65s cubic-bezier(.2,.7,.2,1),
filter .65s ease !important;
}

.works article:hover .wimg{
transform:scale(1.07) !important;
filter:brightness(1.12) contrast(1.04) !important;
}

/* Halo doré sur la carte */
.service:hover,
.works article:hover{
border-color:#e7a91b !important;
box-shadow:
0 15px 40px rgba(0,0,0,.45),
0 0 22px rgba(231,169,27,.14) !important;
}

}

/* ===== REFLET DORÉ SUR LES IMAGES ===== */
@media (hover:hover) and (pointer:fine){

.service .photo,
.works .wimg{
overflow:hidden;
isolation:isolate;
}

.service .photo::after,
.works .wimg::after{
content:"";
position:absolute;
inset:-30%;
background:linear-gradient(
115deg,
transparent 35%,
rgba(231,169,27,0) 42%,
rgba(255,220,145,.20) 50%,
rgba(231,169,27,.08) 54%,
transparent 62%
);
transform:translateX(-130%) rotate(8deg);
transition:transform .8s cubic-bezier(.2,.7,.2,1);
pointer-events:none;
z-index:2;
}

.service:hover .photo::after,
.works article:hover .wimg::after{
transform:translateX(130%) rotate(8deg);
}

}

/* ===== BANNIÈRE CONTACT PREMIUM ===== */
.contact-premium{
background:#050505;
padding:35px 6% 45px;
display:flex;
justify-content:center;
overflow:hidden;
}

.contact-premium img{
display:block;
width:100%;
max-width:1250px;
height:auto;
border-radius:22px;
box-shadow:
0 20px 55px rgba(0,0,0,.55),
0 0 30px rgba(231,169,27,.08);
transition:
transform .5s cubic-bezier(.2,.7,.2,1),
filter .5s ease,
box-shadow .5s ease;
}

@media(hover:hover) and (pointer:fine){
.contact-premium img:hover{
transform:scale(1.012);
filter:brightness(1.06);
box-shadow:
0 25px 65px rgba(0,0,0,.65),
0 0 38px rgba(231,169,27,.16);
}
}

@media(max-width:600px){
.contact-premium{
padding:25px 12px 35px;
}
.contact-premium img{
border-radius:14px;
}
}

/* ===== LIENS CLIQUABLES BANNIÈRE CONTACT ===== */
.contact-premium-wrap{
position:relative;
width:100%;
max-width:1250px;
}

.contact-premium-wrap img{
width:100%;
max-width:none;
}

.contact-hotspot{
position:absolute;
top:0;
height:100%;
z-index:5;
display:block;
}

.phone-link{
left:0;
width:33.333%;
}

.email-link{
left:33.333%;
width:33.333%;
}

/* ===== EFFET FORFAIT SÉLECTIONNÉ ===== */
.plan.plan-selected{
transform:translateY(-10px) scale(1.025) !important;
border-color:#f2bd5d !important;
box-shadow:
0 18px 45px rgba(0,0,0,.55),
0 0 0 2px rgba(231,169,27,.35),
0 0 35px rgba(231,169,27,.30) !important;
animation:planSelectPulse .65s ease;
}

.plan.plan-selected .price{
color:#f4c66e !important;
text-shadow:0 0 18px rgba(231,169,27,.35);
}

.plan.plan-selected .pick{
background:linear-gradient(135deg,#f4c66e,#d99b3d) !important;
color:#171006 !important;
border-color:#f4c66e !important;
}

@keyframes planSelectPulse{
0%{transform:translateY(-6px) scale(1);}
45%{transform:translateY(-12px) scale(1.04);}
100%{transform:translateY(-10px) scale(1.025);}
}

/* ===== BADGE LE PLUS POPULAIRE PREMIUM ===== */
.plan.featured .popular{
position:absolute;
top:-18px;
left:50%;
right:auto;
transform:translateX(-50%);
width:max-content;
min-width:190px;
padding:9px 22px;
border-radius:30px;
background:linear-gradient(135deg,#f6ce7a 0%,#d99b3d 50%,#f0bd5b 100%);
border:1px solid rgba(255,225,160,.7);
color:#15100a;
font-size:10px;
font-weight:900;
letter-spacing:1.3px;
text-align:center;
white-space:nowrap;
box-shadow:
0 7px 22px rgba(0,0,0,.45),
0 0 22px rgba(231,169,27,.25);
z-index:5;
}

.plan.featured .popular::after{
content:"";
position:absolute;
inset:2px;
border-radius:30px;
border:1px solid rgba(255,255,255,.20);
pointer-events:none;
}

@media(max-width:600px){
.plan.featured .popular{
top:-17px;
min-width:180px;
padding:8px 18px;
font-size:9px;
}
}

/* ===== SÉLECTEUR DE LANGUE FR / EN ===== */
.lang-switch{
display:flex;
align-items:center;
gap:5px;
margin-right:14px;
padding:5px 8px;
border:1px solid rgba(231,169,27,.35);
border-radius:20px;
background:rgba(10,8,5,.75);
}

.lang-switch span{
color:#665338;
font-size:11px;
}

.lang-btn{
appearance:none;
border:0;
background:transparent;
color:#8f877b;
font-size:10px;
font-weight:900;
letter-spacing:1px;
padding:4px 6px;
cursor:pointer;
transition:color .25s ease,text-shadow .25s ease;
}

.lang-btn:hover{
color:#f1bd60;
}

.lang-btn.active{
color:#f1bd60;
text-shadow:0 0 12px rgba(231,169,27,.45);
}

@media(max-width:900px){
.lang-switch{
margin-left:auto;
margin-right:10px;
}
}

/* ===== EFFET PREMIUM BOUTONS NSG ===== */
.btn{
position:relative;
overflow:hidden;
isolation:isolate;
transition:
transform .28s ease,
box-shadow .35s ease,
filter .35s ease;
}

.btn::after{
content:"";
position:absolute;
top:-70%;
left:-60%;
width:35%;
height:240%;
background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.12),
rgba(255,220,145,.55),
rgba(255,255,255,.12),
transparent
);
transform:rotate(20deg);
transition:left .65s cubic-bezier(.2,.7,.2,1);
pointer-events:none;
z-index:-1;
}

@media(hover:hover) and (pointer:fine){
.btn:hover{
transform:translateY(-3px);
filter:brightness(1.08);
box-shadow:
0 10px 28px rgba(0,0,0,.35),
0 0 22px rgba(231,169,27,.18);
}

.btn:hover::after{
left:135%;
}
}

.btn:active{
transform:translateY(0) scale(.98);
}

/* ===== CARTES PREMIUM NSG ===== */
.service,
.web-features-grid article,
.works article{
position:relative;
transition:
transform .4s cubic-bezier(.2,.7,.2,1),
box-shadow .4s ease,
border-color .4s ease,
filter .4s ease;
}

@media(hover:hover) and (pointer:fine){

.web-features-grid article:hover,
.works article:hover{
transform:translateY(-7px) scale(1.012);
border-color:rgba(231,169,27,.55);
box-shadow:
0 20px 45px rgba(0,0,0,.45),
0 0 0 1px rgba(231,169,27,.12),
0 0 32px rgba(231,169,27,.12);
}

.service:hover{
border-color:rgba(231,169,27,.55);
box-shadow:
0 22px 50px rgba(0,0,0,.5),
0 0 30px rgba(231,169,27,.13);
}

.web-features-grid article:hover .feature-icon{
filter:
brightness(1.15)
drop-shadow(0 0 10px rgba(231,169,27,.4));
}

.works article:hover .wimg{
filter:brightness(1.08) contrast(1.03);
}

}

/* ===== PROFONDEUR & HALOS PREMIUM NSG ===== */
.service-grid,
.web-features,
.pricing,
.process,
.portfolio,
.contact{
position:relative;
isolation:isolate;
}

.web-features::before,
.pricing::before,
.portfolio::before,
.contact::before{
content:"";
position:absolute;
width:420px;
height:420px;
border-radius:50%;
background:radial-gradient(
circle,
rgba(231,169,27,.075) 0%,
rgba(231,169,27,.025) 38%,
transparent 70%
);
filter:blur(18px);
pointer-events:none;
z-index:-1;
animation:nsgGlowFloat 9s ease-in-out infinite alternate;
}

.web-features::before{
top:5%;
right:-180px;
}

.pricing::before{
top:20%;
left:-190px;
animation-delay:-3s;
}

.portfolio::before{
top:15%;
right:-180px;
animation-delay:-5s;
}

.contact::before{
bottom:-160px;
left:10%;
animation-delay:-7s;
}

@keyframes nsgGlowFloat{
0%{
transform:translate3d(0,0,0) scale(1);
opacity:.55;
}
100%{
transform:translate3d(25px,-35px,0) scale(1.15);
opacity:1;
}
}

@media(max-width:750px){
.web-features::before,
.pricing::before,
.portfolio::before,
.contact::before{
width:260px;
height:260px;
opacity:.65;
}
}

@media(prefers-reduced-motion:reduce){
.web-features::before,
.pricing::before,
.portfolio::before,
.contact::before{
animation:none;
}
}

/* ===== REFLET DORÉ ANIMÉ SUR LES TITRES ===== */
.hero h1 span,
.web-features-head h2 span,
.pricing-intro h2 span{
background:linear-gradient(
100deg,
#b77b20 0%,
#e7a91b 28%,
#ffe39a 48%,
#e7a91b 68%,
#b77b20 100%
);
background-size:220% auto;
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
animation:nsgGoldShine 6s ease-in-out infinite;
}

@keyframes nsgGoldShine{
0%,30%{background-position:100% center;}
65%,100%{background-position:-100% center;}
}

@media(hover:hover) and (pointer:fine){
.hero h1 span:hover,
.web-features-head h2 span:hover,
.pricing-intro h2 span:hover{
filter:drop-shadow(0 0 12px rgba(231,169,27,.35));
}
}

@media(prefers-reduced-motion:reduce){
.hero h1 span,
.web-features-head h2 span,
.pricing-intro h2 span{
animation:none;
}
}

/* ===== SCROLL BIDIRECTIONNEL PREMIUM NSG ===== */
.nsg-scroll{
opacity:0;
filter:blur(3px);
transition:
opacity .7s ease,
transform .8s cubic-bezier(.16,1,.3,1),
filter .7s ease;
will-change:transform,opacity;
}

.nsg-scroll.from-bottom{
transform:translate3d(0,42px,0) scale(.985);
}

.nsg-scroll.from-top{
transform:translate3d(0,-42px,0) scale(.985);
}

.nsg-scroll.nsg-in-view{
opacity:1;
filter:blur(0);
transform:translate3d(0,0,0) scale(1);
}

@media(max-width:750px){
.nsg-scroll.from-bottom{
transform:translate3d(0,25px,0);
}

.nsg-scroll.from-top{
transform:translate3d(0,-25px,0);
}
}

@media(prefers-reduced-motion:reduce){
.nsg-scroll,
.nsg-scroll.from-bottom,
.nsg-scroll.from-top{
opacity:1;
filter:none;
transform:none;
transition:none;
}
}

/* ===== INTRO PREMIUM NSG ===== */
.nsg-intro{
position:fixed;
inset:0;
z-index:99999;
background:
radial-gradient(circle at 50% 45%,rgba(231,169,27,.07),transparent 32%),
#030303;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}

.nsg-intro-content{
position:relative;
z-index:2;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
width:min(90vw,650px);
opacity:0;
transform:scale(.92);
animation:nsgIntroAppear .9s cubic-bezier(.16,1,.3,1) .15s forwards;
}

.nsg-intro-logo{
display:block;
width:min(390px,72vw);
height:auto;
filter:
drop-shadow(0 12px 30px rgba(0,0,0,.8))
drop-shadow(0 0 18px rgba(231,169,27,.15));
}

.nsg-intro-glow{
position:absolute;
left:50%;
top:50%;
width:520px;
height:520px;
border-radius:50%;
transform:translate(-50%,-50%);
background:radial-gradient(
circle,
rgba(231,169,27,.14) 0%,
rgba(231,169,27,.055) 30%,
transparent 68%
);
filter:blur(20px);
animation:nsgIntroGlow 2s ease-in-out infinite alternate;
}

.nsg-intro-line{
width:0;
height:1px;
margin-top:18px;
background:linear-gradient(
90deg,
transparent,
#b77b20,
#ffe09a,
#b77b20,
transparent
);
box-shadow:0 0 14px rgba(231,169,27,.5);
animation:nsgIntroLine 1s cubic-bezier(.16,1,.3,1) .55s forwards;
}

.nsg-intro-text{
margin-top:17px;
font-size:10px;
font-weight:700;
letter-spacing:4px;
color:#9b8a70;
text-align:center;
opacity:0;
transform:translateY(8px);
animation:nsgIntroText .65s ease 1s forwards;
}

@keyframes nsgIntroAppear{
to{
opacity:1;
transform:scale(1);
}
}

@keyframes nsgIntroLine{
to{width:min(330px,65vw);}
}

@keyframes nsgIntroText{
to{
opacity:1;
transform:translateY(0);
}
}

@keyframes nsgIntroGlow{
from{
opacity:.5;
transform:translate(-50%,-50%) scale(.9);
}
to{
opacity:1;
transform:translate(-50%,-50%) scale(1.12);
}
}

@media(max-width:600px){
.nsg-intro-logo{width:min(300px,76vw);}
.nsg-intro-text{
font-size:8px;
letter-spacing:2.5px;
}
}

@media(prefers-reduced-motion:reduce){
.nsg-intro-content,
.nsg-intro-line,
.nsg-intro-text,
.nsg-intro-glow{
animation:none;
opacity:1;
transform:none;
}
.nsg-intro-glow{
transform:translate(-50%,-50%);
}
}

/* ===== INTRO NSG OPTIMISÉE MOBILE ===== */
@media(max-width:600px){

.nsg-intro{
min-height:100dvh;
padding:20px;
}

.nsg-intro-content{
width:100%;
max-width:360px;
padding:0 18px;
}

.nsg-intro-logo{
width:82vw;
max-width:290px;
height:auto;
}

.nsg-intro-glow{
width:310px;
height:310px;
filter:blur(16px);
}

.nsg-intro-line{
margin-top:12px;
}

.nsg-intro-text{
width:100%;
margin-top:14px;
font-size:8px;
line-height:1.6;
letter-spacing:2px;
white-space:normal;
text-align:center;
}

}

@media(max-width:380px){

.nsg-intro-logo{
width:78vw;
max-width:255px;
}

.nsg-intro-glow{
width:260px;
height:260px;
}

.nsg-intro-text{
font-size:7px;
letter-spacing:1.5px;
}

}

/* ===== BLOQUER DÉBORDEMENT HORIZONTAL MOBILE ===== */
html,
body{
width:100%;
max-width:100%;
overflow-x:hidden !important;
}

body{
position:relative;
}

@media(max-width:750px){
main,
header,
footer,
section{
max-width:100vw;
overflow-x:hidden;
}
}

/* ===== ICÔNES PREMIUM POINTS CONTACT ===== */
.contact-points span{
display:flex;
align-items:center;
gap:12px;
}

.point-icon{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 38px;
width:38px;
height:38px;
border:1px solid rgba(231,169,27,.65);
border-radius:50%;
background:
radial-gradient(circle at 35% 30%,rgba(255,220,130,.12),transparent 45%),
rgba(10,8,5,.75);
box-shadow:
inset 0 0 12px rgba(231,169,27,.06),
0 0 14px rgba(231,169,27,.10);
}

.point-icon::before{
color:#efb640;
font-size:19px;
font-style:normal;
font-weight:900;
line-height:1;
text-shadow:0 0 9px rgba(231,169,27,.35);
}

.point-fast::before{
content:"⚡";
}

.point-safe::before{
content:"✓";
}

.point-advice::before{
content:"✦";
}

@media(hover:hover) and (pointer:fine){
.contact-points span:hover .point-icon{
transform:translateY(-2px) scale(1.08);
border-color:#f0b640;
box-shadow:
0 0 18px rgba(231,169,27,.28),
inset 0 0 12px rgba(231,169,27,.10);
}

.point-icon{
transition:
transform .3s ease,
border-color .3s ease,
box-shadow .3s ease;
}
}

@media(max-width:600px){
.point-icon{
flex-basis:34px;
width:34px;
height:34px;
}
.point-icon::before{
font-size:16px;
}
}

/* ===== PERFORMANCE MOBILE ===== */
@media(max-width:750px){

  /* Désactive les effets lourds pendant le scroll */
  .nsg-scroll{
    filter:none !important;
    transition:
      opacity .45s ease,
      transform .5s ease !important;
  }

  .nsg-scroll.from-bottom,
  .nsg-scroll.from-top{
    transform:translate3d(0,18px,0) !important;
  }

  .nsg-scroll.nsg-in-view{
    transform:translate3d(0,0,0) !important;
  }

  /* Halos beaucoup plus légers */
  .web-features::before,
  .pricing::before,
  .portfolio::before,
  .contact::before{
    animation:none !important;
    filter:blur(8px) !important;
    opacity:.35 !important;
  }

  /* Pas de transformation permanente des cartes */
  .service,
  .web-features-grid article,
  .works article{
    transform:none !important;
    filter:none !important;
  }

  /* Images plus fluides */
  .wimg,
  .service .photo{
    transform:translateZ(0);
    backface-visibility:hidden;
  }
}

html{
  -webkit-overflow-scrolling:touch;
}

/* ===== SCROLL MOBILE ULTRA FLUIDE ===== */
@media(max-width:750px){

  html,
  body{
    overflow-x:hidden !important;
    overscroll-behavior-x:none !important;
  }

  /* Désactivation complète des déplacements pendant le scroll */
  .nsg-scroll,
  .nsg-scroll.from-top,
  .nsg-scroll.from-bottom,
  .nsg-scroll.nsg-in-view{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
    animation:none !important;
    will-change:auto !important;
  }

  /* Désactivation des animations continues lourdes */
  .web-features::before,
  .pricing::before,
  .portfolio::before,
  .contact::before{
    animation:none !important;
    transform:none !important;
  }

  /* Évite les recalculs graphiques inutiles */
  .service,
  .web-features-grid article,
  .plan,
  .works article,
  .wimg,
  .service .photo{
    will-change:auto !important;
    backface-visibility:visible !important;
  }

  /* Aucun effet de déplacement au toucher */
  .service:active,
  .web-features-grid article:active,
  .plan:active,
  .works article:active{
    transform:none !important;
  }
}

/* ===== PROCESSUS PREMIUM NSG 2026 ===== */
.process-premium{
  position:relative;
  padding:58px 5%;
  display:grid;
  grid-template-columns:minmax(230px,.72fr) minmax(0,2.28fr);
  gap:55px;
  align-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 70% 50%,rgba(222,158,45,.09),transparent 32%),
    linear-gradient(135deg,#050504,#0d0a06 55%,#050504);
  border-top:1px solid rgba(218,160,66,.22);
  border-bottom:1px solid rgba(218,160,66,.22);
}

.process-premium::before{
  content:"";
  position:absolute;
  width:340px;
  height:340px;
  right:15%;
  top:50%;
  transform:translateY(-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(230,168,64,.08),transparent 68%);
  pointer-events:none;
}

.process-intro{
  position:relative;
  z-index:2;
}

.process-eyebrow{
  margin:0 0 12px !important;
  color:#dca84e !important;
  font-size:10px !important;
  font-weight:800;
  letter-spacing:3px;
}

.process-premium .process-intro h2{
  margin:0 0 15px;
  font-size:clamp(25px,2.3vw,38px);
  line-height:.98;
  letter-spacing:-1px;
}

.process-premium .process-intro h2 span{
  color:#e8ad4d;
}

.process-premium .process-intro > p:last-child{
  margin:0;
  color:#aaa297;
  font-size:13px;
  line-height:1.6;
}

.process-chain{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 42px 1fr 42px 1fr 42px 1fr 42px 1fr;
  align-items:center;
  gap:5px;
  overflow:visible;
}

.process-step{
  position:relative;
  min-width:0;
  text-align:center;
  color:#e8ad4d;
}

.step-number{
  position:absolute;
  z-index:4;
  top:-7px;
  right:calc(50% - 43px);
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg,#f4c76c,#c8892c);
  color:#100c06;
  border:2px solid #181109;
  box-shadow:0 0 16px rgba(232,173,77,.28);
  font-size:9px;
  font-weight:900;
}

.step-icon{
  width:76px;
  height:76px;
  margin:0 auto 13px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1px solid rgba(229,169,73,.55);
  background:
    radial-gradient(circle at 50% 40%,rgba(226,165,65,.12),transparent 58%),
    rgba(10,8,5,.78);
  box-shadow:
    inset 0 0 18px rgba(229,169,73,.06),
    0 0 22px rgba(229,169,73,.07);
}

.step-icon svg{
  width:42px;
  height:42px;
  fill:none;
  stroke:#e8ad4d;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  overflow:visible;
}

.process-step small{
  display:block;
  margin:0;
  color:#e5e0d8;
  font-size:11px;
  line-height:1.4;
  font-weight:700;
  letter-spacing:.15px;
}

.process-link{
  position:relative;
  display:block;
  width:100%;
  height:20px;
}

.process-link::before{
  content:"";
  position:absolute;
  left:0;
  right:7px;
  top:9px;
  height:1px;
  background:linear-gradient(90deg,rgba(200,139,48,.25),#e6aa47);
}

.process-link::after{
  content:"";
  position:absolute;
  right:2px;
  top:5px;
  width:7px;
  height:7px;
  border-top:1px solid #e6aa47;
  border-right:1px solid #e6aa47;
  transform:rotate(45deg);
}

.process-link span{
  display:block;
}

@media(max-width:900px){
  .process-premium{
    grid-template-columns:1fr;
    gap:38px;
    padding:50px 24px;
  }

  .process-intro{
    text-align:center;
  }

  .process-chain{
    width:min(100%,430px);
    margin:auto;
    grid-template-columns:1fr;
    gap:0;
    overflow:visible;
  }

  .process-step{
    padding:5px 0;
  }

  .step-icon{
    width:82px;
    height:82px;
  }

  .step-number{
    right:calc(50% - 46px);
  }

  .process-link{
    width:1px;
    height:43px;
    margin:0 auto;
  }

  .process-link::before{
    left:0;
    right:auto;
    top:0;
    bottom:7px;
    width:1px;
    height:auto;
    background:linear-gradient(180deg,rgba(200,139,48,.25),#e6aa47);
  }

  .process-link::after{
    right:auto;
    left:-3px;
    top:auto;
    bottom:3px;
    transform:rotate(135deg);
  }
}

@media(max-width:560px){
  .process-premium{
    padding:44px 18px;
  }

  .process-premium .process-intro h2{
    font-size:28px;
  }

  .step-icon{
    width:76px;
    height:76px;
  }

  .process-step small{
    font-size:12px;
  }
}

/* ===== ALIGNEMENT PARFAIT ICONES PROCESSUS ===== */
.process-step .step-icon{
  position:relative;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
}

.process-step .step-icon svg{
  position:absolute;
  inset:50% auto auto 50%;
  width:38px !important;
  height:38px !important;
  margin:0 !important;
  transform:translate(-50%,-50%);
  transform-origin:center center;
  display:block;
}

.process-step .step-number{
  top:-8px;
  left:50%;
  right:auto;
  transform:translateX(25px);
}

@media(max-width:900px){
  .process-step .step-number{
    left:50%;
    right:auto;
    transform:translateX(28px);
  }
}

/* ===== FUSÉE PREMIUM INCLINÉE ===== */
.step-launch .rocket-svg{
  width:42px !important;
  height:42px !important;
  transform:translate(-50%,-50%) rotate(38deg) !important;
  transform-origin:center center !important;
}

.step-launch .rocket-svg .rocket{
  stroke-width:2.4;
}

.step-launch .rocket-flame{
  stroke:#f2b84f;
}

/* ===== ICON 03 PREMIUM ===== */
.step-creation .creation-icon > i{
  font-size:30px !important;
  color:#e8ad4d !important;
  opacity:.92;
  font-weight:900;
  filter:
    drop-shadow(0 0 3px rgba(232,173,77,.22))
    drop-shadow(0 0 8px rgba(232,173,77,.10));
}

.step-creation .creation-icon{
  background:
    radial-gradient(circle at center,rgba(232,173,77,.055),transparent 62%),
    rgba(10,8,5,.45) !important;
}

/* ===== 03 TRANSPARENT / FIN ===== */
.step-creation .creation-icon > i{
  font-size:30px !important;
  color:transparent !important;
  -webkit-text-stroke:1.4px #e8ad4d;
  opacity:.95 !important;
  filter:drop-shadow(0 0 5px rgba(232,173,77,.22));
}

/* ===== ANIMATION CHAINE PROCESSUS NSG ===== */

/* État avant déclenchement */
.process-premium .process-step{
  opacity:.38;
  transition:opacity .45s ease, filter .45s ease;
}

.process-premium .process-link{
  opacity:.22;
  transition:opacity .3s ease;
}

.process-premium .process-link::before{
  transform:scaleX(0);
  transform-origin:left center;
}

.process-premium .process-link::after{
  opacity:0;
}

/* Étape activée */
.process-premium .process-step.chain-active{
  opacity:1;
  filter:drop-shadow(0 0 8px rgba(232,173,77,.18));
}

.process-premium .process-step.chain-active .step-icon{
  animation:nsgStepPulse .65s cubic-bezier(.16,1,.3,1) both;
}

.process-premium .process-step.chain-active .step-number{
  animation:nsgNumberPulse .55s cubic-bezier(.16,1,.3,1) both;
}

/* Ligne qui se dessine */
.process-premium .process-link.chain-active{
  opacity:1;
}

.process-premium .process-link.chain-active::before{
  animation:nsgDrawLink .48s ease forwards;
}

.process-premium .process-link.chain-active::after{
  animation:nsgArrowAppear .22s .38s ease forwards;
}

/* 01 — bulle */
.step-discussion.chain-active .step-icon svg{
  animation:nsgDiscussion .65s ease both;
}

/* 02 — document */
.step-proposal.chain-active .proposal-svg{
  animation:nsgDocument .65s ease both;
}

.step-proposal.chain-active .proposal-svg path:nth-child(n+3){
  stroke-dasharray:24;
  stroke-dashoffset:24;
  animation:nsgDocumentLine .38s ease forwards;
}

.step-proposal.chain-active .proposal-svg path:nth-child(4){
  animation-delay:.12s;
}

.step-proposal.chain-active .proposal-svg path:nth-child(5){
  animation-delay:.24s;
}

/* 03 — outils */
.step-creation.chain-active .creation-icon > i{
  animation:nsgTools .7s cubic-bezier(.16,1,.3,1) both;
}

/* 04 — engrenage */
.step-revision.chain-active .gear-svg{
  animation:nsgGear .8s cubic-bezier(.16,1,.3,1) both;
}

/* 05 — fusée */
.step-launch.chain-active .rocket-svg{
  animation:nsgRocket .85s cubic-bezier(.16,1,.3,1) both;
}

/* Keyframes */
@keyframes nsgStepPulse{
  0%{transform:scale(.88);box-shadow:0 0 0 rgba(232,173,77,0)}
  55%{transform:scale(1.09);box-shadow:0 0 28px rgba(232,173,77,.28)}
  100%{transform:scale(1);box-shadow:inset 0 0 18px rgba(229,169,73,.06),0 0 22px rgba(229,169,73,.10)}
}

@keyframes nsgNumberPulse{
  0%{box-shadow:0 0 0 rgba(232,173,77,0)}
  50%{box-shadow:0 0 24px rgba(232,173,77,.65)}
  100%{box-shadow:0 0 16px rgba(232,173,77,.28)}
}

@keyframes nsgDrawLink{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}

@keyframes nsgArrowAppear{
  from{opacity:0}
  to{opacity:1}
}

@keyframes nsgDiscussion{
  0%{transform:scale(.75);opacity:.25}
  55%{transform:scale(1.12)}
  100%{transform:scale(1);opacity:1}
}

@keyframes nsgDocument{
  0%{transform:translateY(-6px);opacity:.3}
  100%{transform:translateY(0);opacity:1}
}

@keyframes nsgDocumentLine{
  to{stroke-dashoffset:0}
}

@keyframes nsgTools{
  0%{transform:scale(.7) rotate(-12deg);opacity:.2}
  60%{transform:scale(1.15) rotate(5deg)}
  100%{transform:scale(1) rotate(0);opacity:.95}
}

@keyframes nsgGear{
  0%{transform:translate(-50%,-50%) rotate(0deg)}
  100%{transform:translate(-50%,-50%) rotate(180deg)}
}

@keyframes nsgRocket{
  0%{
    transform:translate(-58%,-40%) rotate(38deg) scale(.85);
    opacity:.3;
  }
  55%{
    transform:translate(-43%,-60%) rotate(38deg) scale(1.08);
    opacity:1;
  }
  100%{
    transform:translate(-50%,-50%) rotate(38deg) scale(1);
    opacity:1;
  }
}

/* Mobile : ligne verticale */
@media(max-width:900px){
  .process-premium .process-link::before{
    transform:scaleY(0);
    transform-origin:center top;
  }

  .process-premium .process-link.chain-active::before{
    animation:nsgDrawLinkMobile .48s ease forwards;
  }

  @keyframes nsgDrawLinkMobile{
    from{transform:scaleY(0)}
    to{transform:scaleY(1)}
  }
}

@media(prefers-reduced-motion:reduce){
  .process-premium .process-step,
  .process-premium .process-link,
  .process-premium .process-link::before,
  .process-premium .process-link::after{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }
}

/* ===== RECENTRAGE ICONES 01 + 02 ===== */
.step-discussion .step-icon svg,
.step-proposal .step-icon svg{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  margin:0 !important;
  transform:translate(-50%,-50%) !important;
  transform-origin:center center !important;
}

.step-discussion.chain-active .step-icon svg,
.step-proposal.chain-active .proposal-svg{
  animation:none !important;
}

/* ===== 05 - DECOLLAGE FUSEE ===== */
.step-launch.chain-active .rocket-svg{
  animation:nsgRocketTakeoff 1.25s cubic-bezier(.22,.8,.3,1) both !important;
}

@keyframes nsgRocketTakeoff{
  0%{
    transform:translate(-50%,-50%) rotate(38deg) scale(.85);
    opacity:.35;
  }

  25%{
    transform:translate(-53%,-47%) rotate(35deg) scale(1);
    opacity:1;
  }

  65%{
    transform:translate(-25%,-78%) rotate(38deg) scale(1.08);
    filter:drop-shadow(-8px 10px 7px rgba(232,173,77,.45));
  }

  82%{
    transform:translate(-42%,-60%) rotate(38deg) scale(1.03);
  }

  100%{
    transform:translate(-50%,-50%) rotate(38deg) scale(1);
    filter:drop-shadow(0 0 5px rgba(232,173,77,.25));
    opacity:1;
  }
}

/* ===== 05 - DECOLLAGE FUSEE PLUS PRONONCE ===== */
.step-launch.chain-active .rocket-svg{
  animation:nsgRocketTakeoffStrong 1.6s cubic-bezier(.22,.8,.25,1) both !important;
  transform-origin:center center !important;
}

@keyframes nsgRocketTakeoffStrong{
  0%{
    transform:translate(-50%,-50%) rotate(38deg) scale(1);
    opacity:1;
    filter:drop-shadow(0 0 3px rgba(232,173,77,.25));
  }

  15%{
    transform:translate(-58%,-42%) rotate(34deg) scale(.95);
  }

  55%{
    transform:translate(5%,-115%) rotate(40deg) scale(1.15);
    filter:
      drop-shadow(-18px 22px 8px rgba(232,173,77,.75))
      drop-shadow(-7px 9px 3px rgba(255,210,110,.55));
  }

  72%{
    transform:translate(18%,-135%) rotate(40deg) scale(1.08);
    opacity:.85;
  }

  85%{
    transform:translate(-38%,-65%) rotate(38deg) scale(1.04);
    opacity:1;
  }

  100%{
    transform:translate(-50%,-50%) rotate(38deg) scale(1);
    filter:drop-shadow(0 0 5px rgba(232,173,77,.28));
    opacity:1;
  }
}

/* ===== 9 ICONES NSG - ANIMATIONS PREMIUM ===== */

.web-features-grid article.feature-play .feature-icon::before{
  transform-origin:center;
}

/* 1 — Design : code apparaît */
.web-features-grid article.feature-play .icon-design::before{
  animation:nsgIconDesign .75s cubic-bezier(.16,1,.3,1);
}

/* 2 — Performance : accélération */
.web-features-grid article.feature-play .icon-performance::before{
  animation:nsgIconPerformance .85s cubic-bezier(.16,1,.3,1);
}

/* 3 — Mobile : téléphone se soulève */
.web-features-grid article.feature-play .icon-mobile::before{
  animation:nsgIconMobile .8s cubic-bezier(.16,1,.3,1);
}

/* 4 — SEO : recherche */
.web-features-grid article.feature-play .icon-seo::before{
  animation:nsgIconSeo .85s cubic-bezier(.16,1,.3,1);
}

/* 5 — Contenu : écriture */
.web-features-grid article.feature-play .icon-content::before{
  animation:nsgIconWrite .8s ease;
}

/* 6 — Sécurité : validation */
.web-features-grid article.feature-play .icon-security::before{
  animation:nsgIconSecurity .85s cubic-bezier(.16,1,.3,1);
}

/* 7 — Statistiques : croissance */
.web-features-grid article.feature-play .icon-stats::before{
  animation:nsgIconStats .9s cubic-bezier(.16,1,.3,1);
}

/* 8 — Support : petit appel */
.web-features-grid article.feature-play .icon-support::before{
  animation:nsgIconSupport .8s ease;
}

/* 9 — Évolutif : engrenage */
.web-features-grid article.feature-play .icon-evolution::before{
  animation:nsgIconGear 1s cubic-bezier(.16,1,.3,1);
}

@keyframes nsgIconDesign{
  0%{opacity:.15;transform:scale(.65)}
  55%{opacity:1;transform:scale(1.18)}
  100%{transform:scale(1)}
}

@keyframes nsgIconPerformance{
  0%{opacity:.25;transform:rotate(-70deg) scale(.75)}
  65%{opacity:1;transform:rotate(12deg) scale(1.12)}
  100%{transform:rotate(0) scale(1)}
}

@keyframes nsgIconMobile{
  0%{opacity:.3;transform:translateY(10px) scale(.88)}
  55%{opacity:1;transform:translateY(-5px) scale(1.08)}
  100%{transform:translateY(0) scale(1)}
}

@keyframes nsgIconSeo{
  0%{opacity:.25;transform:translate(-7px,7px) scale(.8)}
  55%{opacity:1;transform:translate(5px,-5px) scale(1.12)}
  100%{transform:translate(0,0) scale(1)}
}

@keyframes nsgIconWrite{
  0%{opacity:.25;transform:translate(-8px,7px) rotate(-10deg)}
  35%{transform:translate(5px,-2px) rotate(4deg)}
  70%{transform:translate(-2px,2px) rotate(-3deg)}
  100%{opacity:1;transform:translate(0,0) rotate(0)}
}

@keyframes nsgIconSecurity{
  0%{opacity:.25;transform:scale(.65)}
  55%{opacity:1;transform:scale(1.18)}
  75%{transform:scale(.94)}
  100%{transform:scale(1)}
}

@keyframes nsgIconStats{
  0%{opacity:.2;transform:scaleY(.25);transform-origin:center bottom}
  65%{opacity:1;transform:scaleY(1.15);transform-origin:center bottom}
  100%{transform:scaleY(1);transform-origin:center bottom}
}

@keyframes nsgIconSupport{
  0%{transform:rotate(0)}
  20%{transform:rotate(-13deg)}
  40%{transform:rotate(13deg)}
  60%{transform:rotate(-9deg)}
  80%{transform:rotate(6deg)}
  100%{transform:rotate(0)}
}

@keyframes nsgIconGear{
  0%{opacity:.35;transform:rotate(0deg) scale(.82)}
  70%{opacity:1;transform:rotate(300deg) scale(1.08)}
  100%{transform:rotate(360deg) scale(1)}
}

@media(prefers-reduced-motion:reduce){
  .web-features-grid article .feature-icon::before{
    animation:none !important;
  }
}

/* ===== ICONES NSG - SURVOL ORDINATEUR ===== */
@media (hover:hover) and (pointer:fine){

  .web-features-grid article:hover .icon-design::before{
    animation:nsgIconDesign .9s cubic-bezier(.16,1,.3,1);
  }

  .web-features-grid article:hover .icon-performance::before{
    animation:nsgIconPerformance 1s cubic-bezier(.16,1,.3,1);
  }

  .web-features-grid article:hover .icon-mobile::before{
    animation:nsgIconMobile .9s cubic-bezier(.16,1,.3,1);
  }

  .web-features-grid article:hover .icon-seo::before{
    animation:nsgIconSeo 1s cubic-bezier(.16,1,.3,1);
  }

  .web-features-grid article:hover .icon-content::before{
    animation:nsgIconWrite 1s ease;
  }

  .web-features-grid article:hover .icon-security::before{
    animation:nsgIconSecurity 1s cubic-bezier(.16,1,.3,1);
  }

  .web-features-grid article:hover .icon-stats::before{
    animation:nsgIconStats 1.1s cubic-bezier(.16,1,.3,1);
  }

  .web-features-grid article:hover .icon-support::before{
    animation:nsgIconSupport 1s ease;
  }

  .web-features-grid article:hover .icon-evolution::before{
    animation:nsgIconGear 1.2s cubic-bezier(.16,1,.3,1);
  }
}

/* ===== DESKTOP : ICONES UNIQUEMENT AU SURVOL ===== */
@media (hover:hover) and (pointer:fine){
  .web-features-grid article.feature-play .feature-icon::before{
    animation:none !important;
  }

  .web-features-grid article:hover .icon-design::before{animation:nsgIconDesign .9s cubic-bezier(.16,1,.3,1) !important;}
  .web-features-grid article:hover .icon-performance::before{animation:nsgIconPerformance 1s cubic-bezier(.16,1,.3,1) !important;}
  .web-features-grid article:hover .icon-mobile::before{animation:nsgIconMobile .9s cubic-bezier(.16,1,.3,1) !important;}
  .web-features-grid article:hover .icon-seo::before{animation:nsgIconSeo 1s cubic-bezier(.16,1,.3,1) !important;}
  .web-features-grid article:hover .icon-content::before{animation:nsgIconWrite 1s ease !important;}
  .web-features-grid article:hover .icon-security::before{animation:nsgIconSecurity 1s cubic-bezier(.16,1,.3,1) !important;}
  .web-features-grid article:hover .icon-stats::before{animation:nsgIconStats 1.1s cubic-bezier(.16,1,.3,1) !important;}
  .web-features-grid article:hover .icon-support::before{animation:nsgIconSupport 1s ease !important;}
  .web-features-grid article:hover .icon-evolution::before{animation:nsgIconGear 1.2s cubic-bezier(.16,1,.3,1) !important;}
}

/* ===== ICONES NSG - VITESSE MOBILE ===== */
@media (hover:none), (pointer:coarse){

  .web-features-grid article.feature-play .icon-design::before{
    animation-duration:1.25s !important;
  }

  .web-features-grid article.feature-play .icon-performance::before{
    animation-duration:1.35s !important;
  }

  .web-features-grid article.feature-play .icon-mobile::before{
    animation-duration:1.25s !important;
  }

  .web-features-grid article.feature-play .icon-seo::before{
    animation-duration:1.35s !important;
  }

  .web-features-grid article.feature-play .icon-content::before{
    animation-duration:1.3s !important;
  }

  .web-features-grid article.feature-play .icon-security::before{
    animation-duration:1.3s !important;
  }

  .web-features-grid article.feature-play .icon-stats::before{
    animation-duration:1.4s !important;
  }

  .web-features-grid article.feature-play .icon-support::before{
    animation-duration:1.3s !important;
  }

  .web-features-grid article.feature-play .icon-evolution::before{
    animation-duration:1.45s !important;
  }
}

/* ===== MENU HAMBURGER PREMIUM NSG ===== */
@media(max-width:900px){

  .nav .menu{
    position:relative;
    width:44px;
    height:44px;
    margin-left:auto;
    padding:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    background:rgba(12,9,5,.75);
    border:1px solid rgba(232,174,76,.38);
    border-radius:10px;
    cursor:pointer;
    box-shadow:
      inset 0 0 14px rgba(232,174,76,.05),
      0 0 18px rgba(0,0,0,.25);
  }

  .nav .menu span{
    display:block;
    width:22px;
    height:2px;
    border-radius:4px;
    background:linear-gradient(90deg,#c98b31,#f2c468,#c98b31);
    box-shadow:0 0 7px rgba(232,174,76,.22);
    transition:
      transform .38s cubic-bezier(.68,-.35,.27,1.35),
      opacity .22s ease,
      width .3s ease;
    transform-origin:center;
  }

  .nav.open .menu span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
  }

  .nav.open .menu span:nth-child(2){
    opacity:0;
    width:5px;
  }

  .nav.open .menu span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
  }

  .nav.open .menu{
    border-color:rgba(242,196,104,.7);
    box-shadow:
      inset 0 0 18px rgba(232,174,76,.08),
      0 0 18px rgba(232,174,76,.12);
  }
}

/* ===== CORRECTIF OUVERTURE MENU MOBILE ===== */
@media(max-width:900px){
  .nav.open > nav{
    display:flex !important;
    position:absolute !important;
    top:68px !important;
    left:0 !important;
    right:0 !important;
    z-index:999 !important;
    flex-direction:column !important;
    padding:22px 24px !important;
    background:rgba(7,6,4,.98) !important;
    border-top:1px solid rgba(232,174,76,.22);
    border-bottom:1px solid rgba(232,174,76,.35);
    box-shadow:0 18px 35px rgba(0,0,0,.55);
  }
}

/* ===== PANNEAU NAVIGATION MOBILE NSG ===== */
@media(max-width:900px){

  .nav > nav{
    display:flex !important;
    position:absolute !important;
    top:68px !important;
    left:0 !important;
    right:0 !important;
    margin:0 !important;
    padding:10px 20px 18px !important;
    flex-direction:column !important;
    gap:0 !important;

    background:
      linear-gradient(180deg,rgba(12,9,5,.99),rgba(5,4,3,.98)) !important;

    border-top:1px solid rgba(232,174,76,.22);
    border-bottom:1px solid rgba(232,174,76,.35);
    box-shadow:0 20px 35px rgba(0,0,0,.55);

    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-12px);

    transition:
      opacity .3s ease,
      transform .35s cubic-bezier(.16,1,.3,1),
      visibility .3s ease;
  }

  .nav.open > nav{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateY(0) !important;
  }

  .nav > nav a{
    display:block !important;
    width:100%;
    padding:15px 5px !important;

    color:#eee7dc !important;
    font-size:13px !important;
    font-weight:700 !important;
    letter-spacing:.7px;

    border-bottom:1px solid rgba(232,174,76,.12);
  }

  .nav > nav a:last-child{
    border-bottom:0;
  }

  .nav > nav a:active{
    color:#e8ae4c !important;
  }
}
/* ===== FIX DEFINITIF MENU MOBILE NSG ===== */
@media(max-width:900px){
  .nav{
    overflow:visible !important;
    z-index:100000 !important;
  }

  .nav > nav{
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    clip:auto !important;
    clip-path:none !important;
  }

  .nav.open > nav{
    display:flex !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
  }
}

/* Hamburger derrière l'intro NSG */
body:has(#nsg-intro) .nav{
  z-index:50 !important;
}

body:not(:has(#nsg-intro)) .nav{
  z-index:100000 !important;
}
@media (min-width:901px){
  .social-icons a{
    padding:0 !important;
    margin:0 !important;
    text-decoration:none !important;
    box-sizing:border-box !important;
    flex:0 0 32px !important;
  }
}

/* ===== SECTION SEO LOCAL NSG ===== */
.local-seo{
  position:relative;
  padding:58px 7%;
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 0%,rgba(231,169,27,.10),transparent 42%),
    #080705;
  border-top:1px solid rgba(231,169,27,.18);
  border-bottom:1px solid rgba(231,169,27,.18);
}

.local-seo-inner{
  max-width:900px;
  margin:0 auto;
}

.local-seo h2{
  margin:10px 0 22px;
  font-size:clamp(28px,3.5vw,44px);
  line-height:1.05;
}

.local-seo h2 span{
  color:#e7aa48;
}

.local-seo-inner > p:not(.eyebrow){
  max-width:780px;
  margin:10px auto;
  color:#bdb5aa;
  font-size:14px;
  line-height:1.75;
}

@media(max-width:750px){
  .local-seo{
    padding:45px 20px;
  }

  .local-seo h2{
    font-size:29px;
  }

  .local-seo-inner > p:not(.eyebrow){
    font-size:13px;
    line-height:1.7;
  }
}

/* ===== FAQ PREMIUM NSG ===== */
.faq-section{
  padding:70px 7%;
  background:
    radial-gradient(circle at 50% 0%,rgba(231,169,27,.08),transparent 38%),
    #060504;
  border-bottom:1px solid rgba(231,169,27,.18);
}

.faq-inner{
  max-width:950px;
  margin:0 auto;
}

.faq-section h2{
  margin:10px 0 32px;
  font-size:clamp(30px,3.8vw,46px);
  line-height:1.05;
}

.faq-section h2 span{
  color:#e7aa48;
}

.faq-list{
  display:grid;
  gap:10px;
}

.faq-list details{
  background:linear-gradient(135deg,#12100d,#090806);
  border:1px solid rgba(231,169,27,.25);
  border-radius:7px;
  overflow:hidden;
  transition:border-color .3s ease,box-shadow .3s ease;
}

.faq-list details[open]{
  border-color:rgba(231,169,27,.65);
  box-shadow:0 8px 28px rgba(0,0,0,.28);
}

.faq-list summary{
  position:relative;
  padding:20px 55px 20px 22px;
  color:#f4f0e8;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  list-style:none;
}

.faq-list summary::-webkit-details-marker{
  display:none;
}

.faq-list summary::after{
  content:"+";
  position:absolute;
  right:22px;
  top:50%;
  transform:translateY(-50%);
  color:#e7aa48;
  font-size:24px;
  font-weight:400;
  transition:transform .3s ease;
}

.faq-list details[open] summary::after{
  transform:translateY(-50%) rotate(45deg);
}

.faq-list details p{
  margin:0;
  padding:0 22px 22px;
  max-width:800px;
  color:#bdb5aa;
  font-size:13px;
  line-height:1.7;
}

@media(max-width:750px){
  .faq-section{
    padding:50px 20px;
  }

  .faq-section h2{
    font-size:29px;
  }

  .faq-list summary{
    padding:18px 50px 18px 18px;
    font-size:13px;
  }

  .faq-list details p{
    padding:0 18px 18px;
    font-size:12px;
  }
}

/* ===== HERO PAGE CREATION WEB NSG ===== */
.web-page-hero{
  position:relative;
  min-height:610px;
  display:flex;
  align-items:center;
  padding:125px 7% 75px;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(5,4,3,.98) 0%,rgba(8,6,4,.92) 48%,rgba(8,6,4,.55) 100%),
    url('/assets/hero-creation-web.webp') center/cover no-repeat;
  border-bottom:1px solid #3d2c17;
}

.web-page-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 72% 42%,rgba(232,173,77,.13),transparent 34%);
}

.web-page-hero-inner{
  position:relative;
  z-index:2;
  width:min(850px,100%);
}

.web-page-eyebrow{
  margin:0 0 18px;
  color:#d8bd88;
  font-size:11px;
  font-weight:700;
  letter-spacing:2.8px;
}

.web-page-hero h1{
  margin:0;
  max-width:950px;
  font-size:clamp(48px,5.5vw,78px);
  line-height:.96;
  letter-spacing:-2px;
}

.web-page-hero h1 span{
  color:#e7aa48;
}

.web-page-lead{
  max-width:670px;
  margin:24px 0 0;
  color:#d2cbc0;
  font-size:16px;
  line-height:1.65;
}

.web-page-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}

@media(max-width:600px){
  .web-page-hero{
    min-height:auto;
    padding:110px 18px 55px;
    background:
      linear-gradient(rgba(5,4,3,.88),rgba(5,4,3,.94)),
      url('/assets/hero-creation-web.webp') center/cover no-repeat;
  }

  .web-page-hero h1{
    font-size:42px;
    line-height:.98;
    letter-spacing:-1px;
  }

  .web-page-lead{
    font-size:15px;
    line-height:1.55;
  }

  .web-page-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:25px;
  }

  .web-page-actions .btn{
    width:100%;
  }
}

/* ===== CE QUE VOTRE SITE PEUT FAIRE ===== */
.web-results{
  position:relative;
  padding:105px 7%;
  background:
    radial-gradient(circle at 50% 0%,rgba(232,173,77,.08),transparent 38%),
    #090806;
  border-top:1px solid rgba(232,173,77,.18);
  overflow:hidden;
}

.web-results-head{
  max-width:850px;
  margin:0 auto 55px;
  text-align:center;
}

.web-results-head .eyebrow{
  margin-bottom:15px;
  color:#d8bd88;
  font-size:11px;
  font-weight:700;
  letter-spacing:2.8px;
}

.web-results-head h2{
  margin:0;
  font-size:clamp(38px,4.5vw,62px);
  line-height:1;
  letter-spacing:-1.5px;
}

.web-results-head h2 span{
  color:#e7aa48;
}

.web-results-head > p:last-child{
  max-width:690px;
  margin:22px auto 0;
  color:#aaa39a;
  font-size:15px;
  line-height:1.7;
}

.web-results-grid{
  width:min(1200px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.web-result-card{
  position:relative;
  min-height:300px;
  padding:32px 25px 28px;
  background:linear-gradient(145deg,#11100d,#090806);
  border:1px solid #302719;
  overflow:hidden;
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}

.web-result-card::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:2px;
  background:#e7aa48;
  transition:width .45s ease;
}

.web-result-card:hover{
  transform:translateY(-7px);
  border-color:#9b6d2e;
  box-shadow:0 18px 45px rgba(0,0,0,.32);
}

.web-result-card:hover::after{
  width:100%;
}

.web-result-number{
  position:absolute;
  top:22px;
  right:22px;
  color:#5d4a2c;
  font-size:12px;
  font-weight:700;
  letter-spacing:2px;
}

.web-result-card > i{
  display:flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  margin:20px 0 35px;
  color:#e7aa48;
  font-size:23px;
  border:1px solid #725329;
  border-radius:50%;
  box-shadow:0 0 22px rgba(232,173,77,.08);
}

.web-result-card h3{
  margin:0 0 14px;
  color:#f1eee8;
  font-size:15px;
  line-height:1.35;
  letter-spacing:.7px;
}

.web-result-card p{
  margin:0;
  color:#918b82;
  font-size:13px;
  line-height:1.65;
}

@media(max-width:950px){
  .web-results-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:600px){
  .web-results{
    padding:70px 18px;
  }

  .web-results-head{
    margin-bottom:35px;
    text-align:left;
  }

  .web-results-head h2{
    font-size:38px;
  }

  .web-results-head > p:last-child{
    margin-left:0;
  }

  .web-results-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .web-result-card{
    min-height:0;
    padding:27px 23px 25px;
  }

  .web-result-card > i{
    margin:15px 0 25px;
  }
}

/* ===== DESELECTION VISUELLE DE PRO SI UN AUTRE FORFAIT EST CHOISI ===== */
.plans:has(.plan.plan-selected:not(.featured)) .plan.featured{
  border:1px solid #5a4326 !important;
  box-shadow:none !important;
  transform:none !important;
}

.plans:has(.plan.plan-selected:not(.featured)) .plan.featured .price{
  color:#f4f0e8 !important;
  text-shadow:none !important;
}

/* ===== BOUTON PRO NON ACTIF SI UN AUTRE FORFAIT EST SELECTIONNE ===== */
.plans:has(.plan.plan-selected:not(.featured)) .plan.featured .pick{
  background:#080705 !important;
  color:#fff !important;
  border-color:#7b6442 !important;
}

/* ===== ANIMATION ICONES CE QUE VOTRE SITE PEUT FAIRE ===== */
.web-result-card > i{
  transition:
    transform .4s cubic-bezier(.2,.8,.2,1),
    box-shadow .4s ease,
    background .4s ease,
    color .4s ease;
}

.web-result-card:hover > i{
  transform:scale(1.15) rotate(-6deg);
  background:rgba(231,170,72,.10);
  color:#f4c66e;
  box-shadow:
    0 0 0 5px rgba(231,170,72,.06),
    0 0 28px rgba(231,170,72,.28);
}

/* ===== BANNIERE CONTACT HTML PREMIUM ===== */
.contact-premium-html{
  padding:0;
  background:#080705;
  border-top:1px solid rgba(231,170,72,.25);
  border-bottom:1px solid rgba(231,170,72,.18);
}

.contact-info-grid{
  width:min(1200px,100%);
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
}

.contact-info-item{
  min-height:145px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:30px 25px;
  position:relative;
  transition:background .35s ease;
}

.contact-info-item:not(:last-child){
  border-right:1px solid rgba(231,170,72,.18);
}

.contact-info-icon{
  width:52px;
  height:52px;
  flex:0 0 52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #8b642f;
  border-radius:50%;
  color:#e7aa48;
  font-size:19px;
  transition:transform .35s ease,box-shadow .35s ease,background .35s ease;
}

.contact-info-text{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.contact-info-text small{
  color:#b7aa98;
  font-size:9px;
  font-weight:700;
  letter-spacing:2.4px;
}

.contact-info-text strong{
  color:#f1eee8;
  font-size:15px;
  font-weight:500;
  letter-spacing:.3px;
}

.contact-info-item:hover{
  background:rgba(231,170,72,.035);
}

.contact-info-item:hover .contact-info-icon{
  transform:translateY(-4px) scale(1.08);
  background:rgba(231,170,72,.08);
  box-shadow:0 0 25px rgba(231,170,72,.22);
}

@media(max-width:750px){
  .contact-info-grid{
    grid-template-columns:1fr;
  }

  .contact-info-item{
    min-height:105px;
    justify-content:flex-start;
    padding:22px 28px;
  }

  .contact-info-item:not(:last-child){
    border-right:0;
    border-bottom:1px solid rgba(231,170,72,.15);
  }
}

/* ===== VOTRE SITE, CONCU SELON VOTRE ENTREPRISE ===== */
.web-tailored{
  padding:85px 6%;
  background:
    radial-gradient(circle at 75% 45%,rgba(215,158,66,.10),transparent 35%),
    linear-gradient(135deg,#070604,#0d0a06);
  border-top:1px solid rgba(218,168,86,.15);
}

.web-tailored-intro{
  max-width:760px;
  margin:0 auto 45px;
  text-align:center;
}

.web-tailored-intro h2{
  margin:12px 0 18px;
  font-size:clamp(34px,4vw,55px);
  line-height:.98;
}

.web-tailored-intro p:last-child{
  max-width:680px;
  margin:0 auto;
  color:#aaa197;
  font-size:14px;
  line-height:1.7;
}

.web-tailored-grid{
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid rgba(218,168,86,.18);
}

.web-tailored-item{
  min-height:150px;
  padding:30px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:17px;
  text-align:center;
  background:rgba(255,255,255,.012);
  border:1px solid rgba(218,168,86,.10);
  transition:.35s ease;
}

.web-tailored-item i{
  color:#e3aa4d;
  font-size:27px;
  transition:.35s ease;
}

.web-tailored-item span{
  color:#e9e4dc;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.2px;
}

.web-tailored-item:hover{
  background:rgba(218,168,86,.055);
  border-color:rgba(218,168,86,.42);
  transform:translateY(-4px);
}

.web-tailored-item:hover i{
  transform:translateY(-3px) scale(1.08);
}

@media(max-width:750px){
  .web-tailored{
    padding:60px 18px;
  }

  .web-tailored-grid{
    grid-template-columns:1fr 1fr;
  }

  .web-tailored-item{
    min-height:130px;
    padding:22px 12px;
  }

  .web-tailored-item span{
    font-size:9px;
  }
}

/* Animation des icônes - section Votre site */
.web-tailored-item:hover i{
  animation:nsgIconHover .65s ease;
}

@keyframes nsgIconHover{
  0%{transform:translateY(0) scale(1) rotate(0deg)}
  35%{transform:translateY(-7px) scale(1.13) rotate(-5deg)}
  65%{transform:translateY(-4px) scale(1.10) rotate(4deg)}
  100%{transform:translateY(-3px) scale(1.08) rotate(0deg)}
}

/* ===== CTA FINAL CREATION WEB ===== */
.web-final-cta{
  position:relative;
  overflow:hidden;
  padding:95px 20px;
  text-align:center;
  background:
    radial-gradient(circle at 50% 100%,rgba(224,168,76,.16),transparent 42%),
    linear-gradient(180deg,#0b0906,#050504);
  border-top:1px solid rgba(218,168,86,.16);
}

.web-final-cta:before{
  content:'';
  position:absolute;
  width:420px;
  height:420px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(218,168,86,.07);
  border-radius:50%;
  pointer-events:none;
}

.web-final-cta > *{
  position:relative;
  z-index:1;
}

.web-final-cta h2{
  margin:13px 0 18px;
  font-size:clamp(40px,5vw,68px);
  line-height:.95;
}

.web-final-cta h2 span{
  color:#e7aa48;
}

.web-final-cta > p:not(.eyebrow){
  max-width:590px;
  margin:0 auto 28px;
  color:#aaa197;
  font-size:14px;
  line-height:1.7;
}

.web-final-cta .btn{
  min-width:235px;
  transition:transform .3s ease,box-shadow .3s ease;
}

.web-final-cta .btn:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 35px rgba(231,170,72,.22);
}

@media(max-width:600px){
  .web-final-cta{
    padding:70px 18px;
  }

  .web-final-cta h2{
    font-size:40px;
  }
}

/* ===== TRANSITION CREATION WEB ===== */
.web-transition{
  position:fixed;
  inset:0;
  z-index:200000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#050504;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  overflow:hidden;
  transition:opacity .35s ease,visibility .35s ease;
}

.web-transition.active{
  opacity:1;
  visibility:visible;
  pointer-events:all;
}

.web-transition-grid{
  position:absolute;
  inset:-50%;
  background-image:
    linear-gradient(rgba(218,168,86,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(218,168,86,.055) 1px,transparent 1px);
  background-size:42px 42px;
  transform:perspective(700px) rotateX(58deg) translateY(15%);
  animation:webGridMove 2s linear infinite;
  mask-image:linear-gradient(to bottom,transparent 5%,#000 55%,transparent 95%);
}

.web-transition-content{
  position:relative;
  z-index:2;
  width:min(520px,86vw);
  text-align:center;
}

.web-transition-window{
  width:170px;
  height:112px;
  margin:0 auto 30px;
  border:1px solid rgba(231,170,72,.65);
  border-radius:8px;
  background:rgba(13,10,6,.88);
  box-shadow:0 0 45px rgba(231,170,72,.10);
  overflow:hidden;
  transform:scale(.82);
  opacity:0;
}

.web-transition.active .web-transition-window{
  animation:webWindowIn .6s .12s cubic-bezier(.16,1,.3,1) forwards;
}

.web-transition-dots{
  height:25px;
  display:flex;
  align-items:center;
  gap:5px;
  padding:0 9px;
  border-bottom:1px solid rgba(231,170,72,.18);
}

.web-transition-dots span{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#dba64f;
}

.web-transition-code{
  padding:17px 15px;
}

.web-transition-code span{
  display:block;
  width:0;
  height:3px;
  margin-bottom:10px;
  border-radius:4px;
  background:linear-gradient(90deg,#e7aa48,#75501d);
}

.web-transition.active .web-transition-code span:nth-child(1){
  animation:webCode .5s .35s forwards;
}
.web-transition.active .web-transition-code span:nth-child(2){
  animation:webCode .5s .48s forwards;
}
.web-transition.active .web-transition-code span:nth-child(3){
  animation:webCode .5s .61s forwards;
}
.web-transition.active .web-transition-code span:nth-child(4){
  animation:webCode .5s .74s forwards;
}

.web-transition-code span:nth-child(1){max-width:80%}
.web-transition-code span:nth-child(2){max-width:55%}
.web-transition-code span:nth-child(3){max-width:90%}
.web-transition-code span:nth-child(4){max-width:68%}

.web-transition-content > p{
  margin:0 0 10px;
  color:#d8a451;
  font-size:10px;
  font-weight:800;
  letter-spacing:3px;
}

.web-transition-content h2{
  margin:0 0 27px;
  color:#f3eee6;
  font-size:clamp(25px,4vw,39px);
  line-height:1;
}

.web-transition-content h2 span{
  color:#e7aa48;
}

.web-transition-loader{
  width:100%;
  max-width:360px;
  height:2px;
  margin:0 auto 12px;
  background:rgba(255,255,255,.10);
  overflow:hidden;
}

.web-transition-loader div{
  width:0;
  height:100%;
  background:linear-gradient(90deg,#815b25,#e7aa48,#f2c474);
  box-shadow:0 0 15px rgba(231,170,72,.6);
}

.web-transition.active .web-transition-loader div{
  animation:webLoading 1.45s .12s cubic-bezier(.22,.8,.3,1) forwards;
}

.web-transition-content small{
  color:#706b63;
  font-size:8px;
  font-weight:700;
  letter-spacing:3px;
}

@keyframes webGridMove{
  to{background-position:0 42px,42px 0}
}

@keyframes webWindowIn{
  to{opacity:1;transform:scale(1)}
}

@keyframes webCode{
  from{width:0}
  to{width:100%}
}

@keyframes webLoading{
  0%{width:0}
  35%{width:32%}
  70%{width:73%}
  100%{width:100%}
}

@media(max-width:600px){
  .web-transition-window{
    width:145px;
    height:100px;
    margin-bottom:25px;
  }

  .web-transition-content h2{
    font-size:27px;
  }
}


/* ===== HERO GESTION GENERALE ===== */
.management-hero{
  position:relative;
  min-height:620px;
  padding:125px 7% 75px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:60px;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 48%,rgba(218,168,86,.12),transparent 28%),
    linear-gradient(120deg,#050504 0%,#0b0805 55%,#080604 100%);
  border-bottom:1px solid rgba(218,168,86,.22);
}

.management-hero:before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.45;
  background-image:
    linear-gradient(rgba(218,168,86,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(218,168,86,.035) 1px,transparent 1px);
  background-size:55px 55px;
  mask-image:linear-gradient(90deg,transparent 30%,#000 100%);
}

.management-hero-inner{
  position:relative;
  z-index:2;
  max-width:760px;
}

.management-eyebrow{
  margin:0 0 18px;
  color:#dca64e;
  font-size:11px;
  font-weight:800;
  letter-spacing:2.6px;
}

.management-hero h1{
  margin:0 0 24px;
  color:#f3eee6;
  font-size:clamp(45px,5.5vw,76px);
  line-height:.92;
  letter-spacing:-2px;
}

.management-hero h1 span{
  color:#e5aa4c;
}

.management-lead{
  max-width:660px;
  margin:0 0 30px;
  color:#aaa197;
  font-size:15px;
  line-height:1.75;
}

.management-visual{
  position:relative;
  z-index:2;
  width:min(430px,38vw);
  aspect-ratio:1;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

.management-visual:before{
  content:'';
  position:absolute;
  width:72%;
  height:72%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(218,168,86,.10),transparent 67%);
  filter:blur(8px);
}

.management-orbit{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(218,168,86,.25);
}

.orbit-one{
  width:68%;
  height:68%;
  animation:managementSpin 18s linear infinite;
}

.orbit-two{
  width:92%;
  height:92%;
  border-style:dashed;
  border-color:rgba(218,168,86,.13);
  animation:managementSpinReverse 28s linear infinite;
}

.management-core{
  position:relative;
  z-index:3;
  width:112px;
  height:112px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(231,170,72,.65);
  border-radius:24px;
  background:linear-gradient(145deg,#171109,#090705);
  box-shadow:
    0 0 60px rgba(218,168,86,.12),
    inset 0 0 25px rgba(218,168,86,.06);
}

.management-core i{
  color:#e5aa4c;
  font-size:38px;
}

.management-node{
  position:absolute;
  z-index:4;
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(218,168,86,.35);
  border-radius:16px;
  background:#0d0a06;
  box-shadow:0 12px 35px rgba(0,0,0,.45);
  animation:managementFloat 3.5s ease-in-out infinite;
}

.management-node i{
  color:#dca64e;
  font-size:20px;
}

.node-one{
  top:10%;
  left:15%;
}

.node-two{
  top:23%;
  right:4%;
  animation-delay:-1.1s;
}

.node-three{
  bottom:8%;
  left:20%;
  animation-delay:-2.2s;
}

@keyframes managementSpin{
  to{transform:rotate(360deg)}
}

@keyframes managementSpinReverse{
  to{transform:rotate(-360deg)}
}

@keyframes managementFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}

@media(max-width:800px){
  .management-hero{
    min-height:auto;
    padding:115px 20px 60px;
    grid-template-columns:1fr;
    gap:40px;
    text-align:center;
  }

  .management-hero-inner{
    margin:auto;
  }

  .management-lead{
    margin-left:auto;
    margin-right:auto;
  }

  .management-hero h1{
    font-size:clamp(39px,11vw,56px);
  }

  .management-visual{
    width:min(330px,82vw);
  }
}


/* ===== SERVICES GESTION GENERALE ===== */
.management-services{
  padding:90px 6%;
  background:
    radial-gradient(circle at 15% 20%,rgba(218,168,86,.07),transparent 28%),
    linear-gradient(180deg,#080604,#050504);
}

.management-services-head{
  max-width:820px;
  margin:0 auto 52px;
  text-align:center;
}

.management-services-head h2{
  margin:12px 0 20px;
  color:#f1ece4;
  font-size:clamp(36px,4.5vw,58px);
  line-height:.98;
}

.management-services-head h2 span{
  color:#e5aa4c;
}

.management-services-head > p:last-child{
  max-width:720px;
  margin:0 auto;
  color:#aaa197;
  font-size:14px;
  line-height:1.75;
}

.management-services-grid{
  max-width:1180px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.management-service-card{
  position:relative;
  min-height:280px;
  padding:34px 30px;
  overflow:hidden;
  background:
    linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.008));
  border:1px solid rgba(218,168,86,.16);
  transition:transform .35s ease,border-color .35s ease,background .35s ease;
}

.management-service-card:before{
  content:'';
  position:absolute;
  width:130px;
  height:130px;
  right:-65px;
  top:-65px;
  border-radius:50%;
  background:rgba(218,168,86,.05);
  transition:.4s ease;
}

.management-service-card > span{
  position:absolute;
  right:24px;
  top:21px;
  color:rgba(218,168,86,.32);
  font-size:12px;
  font-weight:800;
  letter-spacing:2px;
}

.management-service-card i{
  display:flex;
  align-items:center;
  justify-content:center;
  width:55px;
  height:55px;
  margin-bottom:34px;
  color:#e1a84c;
  font-size:23px;
  border:1px solid rgba(218,168,86,.28);
  border-radius:13px;
  background:rgba(218,168,86,.035);
  transition:.35s ease;
}

.management-service-card h3{
  margin:0 0 13px;
  color:#eee8df;
  font-size:15px;
  letter-spacing:.7px;
}

.management-service-card p{
  margin:0;
  color:#938b81;
  font-size:13px;
  line-height:1.7;
}

.management-service-card:hover{
  transform:translateY(-7px);
  border-color:rgba(231,170,72,.55);
  background:rgba(218,168,86,.04);
}

.management-service-card:hover:before{
  transform:scale(1.6);
}

.management-service-card:hover i{
  transform:translateY(-4px) scale(1.08);
  border-color:rgba(231,170,72,.65);
  box-shadow:0 10px 30px rgba(218,168,86,.10);
}

@media(max-width:900px){
  .management-services-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:600px){
  .management-services{
    padding:65px 18px;
  }

  .management-services-grid{
    grid-template-columns:1fr;
  }

  .management-service-card{
    min-height:auto;
    padding:28px 24px;
  }
}


/* ===== ANIMATIONS CARTES GESTION ===== */
.management-service-card{
  opacity:0;
  transform:translateY(35px);
  transition:
    opacity .7s cubic-bezier(.16,1,.3,1),
    transform .7s cubic-bezier(.16,1,.3,1),
    border-color .35s ease,
    background .35s ease;
}

.management-service-card.management-visible{
  opacity:1;
  transform:translateY(0);
}

.management-service-card.management-visible:hover{
  transform:translateY(-7px);
}

.management-service-card:nth-child(1){transition-delay:.05s}
.management-service-card:nth-child(2){transition-delay:.12s}
.management-service-card:nth-child(3){transition-delay:.19s}
.management-service-card:nth-child(4){transition-delay:.08s}
.management-service-card:nth-child(5){transition-delay:.15s}
.management-service-card:nth-child(6){transition-delay:.22s}

@media(prefers-reduced-motion:reduce){
  .management-service-card{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* ===== ANIMATIONS ICONES GESTION ===== */

.management-service-card.management-visible:nth-child(1) i{
  animation:managementCheck .75s cubic-bezier(.16,1,.3,1) .35s both;
}

.management-service-card.management-visible:nth-child(2) i{
  animation:managementPeople .9s cubic-bezier(.16,1,.3,1) .45s both;
}

.management-service-card.management-visible:nth-child(3) i{
  animation:managementChart 1.1s cubic-bezier(.16,1,.3,1) .55s both;
}

.management-service-card.management-visible:nth-child(4) i{
  animation:managementHandshake .9s ease-in-out .4s both;
}

.management-service-card.management-visible:nth-child(5) i{
  animation:managementGears 1.4s cubic-bezier(.16,1,.3,1) .45s both;
}

.management-service-card.management-visible:nth-child(6) i{
  animation:managementCompass 1.3s cubic-bezier(.16,1,.3,1) .5s both;
}

@keyframes managementCheck{
  0%{transform:scale(.45);opacity:.25}
  55%{transform:scale(1.28)}
  75%{transform:scale(.92)}
  100%{transform:scale(1);opacity:1}
}

@keyframes managementPeople{
  0%{transform:scale(.7);opacity:.3}
  35%{transform:translateX(-5px) scale(1.08)}
  65%{transform:translateX(5px) scale(1.08)}
  100%{transform:translateX(0) scale(1);opacity:1}
}

@keyframes managementChart{
  0%{transform:scale(.55) translate(-8px,8px);opacity:.2}
  45%{transform:scale(.85) translate(-3px,3px);opacity:.7}
  75%{transform:scale(1.15) translate(2px,-3px)}
  100%{transform:scale(1) translate(0,0);opacity:1}
}

@keyframes managementHandshake{
  0%{transform:rotate(0deg) scale(.8);opacity:.3}
  25%{transform:rotate(-10deg) scale(1.08)}
  45%{transform:rotate(9deg)}
  65%{transform:rotate(-6deg)}
  82%{transform:rotate(4deg)}
  100%{transform:rotate(0deg) scale(1);opacity:1}
}

@keyframes managementGears{
  0%{transform:rotate(0deg) scale(.7);opacity:.25}
  70%{transform:rotate(300deg) scale(1.12);opacity:1}
  100%{transform:rotate(360deg) scale(1);opacity:1}
}

@keyframes managementCompass{
  0%{transform:rotate(-220deg) scale(.55);opacity:.2}
  70%{transform:rotate(18deg) scale(1.12);opacity:1}
  85%{transform:rotate(-7deg) scale(1.04)}
  100%{transform:rotate(0deg) scale(1);opacity:1}
}

@media(prefers-reduced-motion:reduce){
  .management-service-card.management-visible i{
    animation:none;
  }
}

/* ===== GESTION - ANIMATIONS PLUS LENTES + HOVER ===== */

/* 01 - Validation */
.management-service-card.management-visible:nth-child(1) i{
  animation:managementCheck 1.5s cubic-bezier(.16,1,.3,1) .35s both;
}
.management-service-card.management-visible:nth-child(1):hover i{
  animation:managementCheck 1.5s cubic-bezier(.16,1,.3,1) both;
}

/* 02 - Coordination */
.management-service-card.management-visible:nth-child(2) i{
  animation:managementPeople 1.7s cubic-bezier(.16,1,.3,1) .45s both;
}
.management-service-card.management-visible:nth-child(2):hover i{
  animation:managementPeople 1.7s cubic-bezier(.16,1,.3,1) both;
}

/* 03 - Graphique */
.management-service-card.management-visible:nth-child(3) i{
  animation:managementChart 2s cubic-bezier(.16,1,.3,1) .55s both;
}
.management-service-card.management-visible:nth-child(3):hover i{
  animation:managementChart 2s cubic-bezier(.16,1,.3,1) both;
}

/* 04 - Poignée de main */
.management-service-card.management-visible:nth-child(4) i{
  animation:managementHandshake 1.8s ease-in-out .4s both;
}
.management-service-card.management-visible:nth-child(4):hover i{
  animation:managementHandshake 1.8s ease-in-out both;
}

/* 05 - Engrenages */
.management-service-card.management-visible:nth-child(5) i{
  animation:managementGears 2.4s cubic-bezier(.16,1,.3,1) .45s both;
}
.management-service-card.management-visible:nth-child(5):hover i{
  animation:managementGears 2.4s cubic-bezier(.16,1,.3,1) both;
}

/* 06 - Boussole */
.management-service-card.management-visible:nth-child(6) i{
  animation:managementCompass 2.2s cubic-bezier(.16,1,.3,1) .5s both;
}
.management-service-card.management-visible:nth-child(6):hover i{
  animation:managementCompass 2.2s cubic-bezier(.16,1,.3,1) both;
}

/* ===== TRANSITION GESTION GENERALE ===== */

.management-transition{
  position:fixed;
  inset:0;
  z-index:200001;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 45%,rgba(218,168,86,.10),transparent 32%),
    #050504;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .35s ease,visibility .35s ease;
}

.management-transition.active{
  opacity:1;
  visibility:visible;
  pointer-events:all;
}

.management-transition-grid{
  position:absolute;
  inset:0;
  opacity:.13;
  background-image:
    linear-gradient(rgba(218,168,86,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(218,168,86,.16) 1px,transparent 1px);
  background-size:52px 52px;
  animation:managementGridMove 8s linear infinite;
}

.management-transition-content{
  position:relative;
  z-index:2;
  width:min(650px,90vw);
  text-align:center;
}

.management-transition-system{
  position:relative;
  width:220px;
  height:220px;
  margin:0 auto 28px;
}

.management-center{
  position:absolute;
  left:50%;
  top:50%;
  width:76px;
  height:76px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translate(-50%,-50%) scale(.3);
  border:1px solid rgba(229,170,76,.75);
  border-radius:20px;
  background:#0b0906;
  box-shadow:
    0 0 35px rgba(218,168,86,.18),
    inset 0 0 25px rgba(218,168,86,.06);
  color:#e5aa4c;
  font-size:30px;
  opacity:0;
}

.management-transition.active .management-center{
  animation:managementCenterIn .7s cubic-bezier(.16,1,.3,1) .15s forwards;
}

.management-transition.active .management-center i{
  animation:managementLoaderGear 2.4s linear .6s infinite;
}

.management-point{
  position:absolute;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(218,168,86,.38);
  border-radius:13px;
  background:#090806;
  color:#dca64e;
  font-size:17px;
  opacity:0;
  transform:scale(.35);
  box-shadow:0 0 20px rgba(218,168,86,.08);
}

.management-point.point-1{left:0;top:22px}
.management-point.point-2{right:0;top:22px}
.management-point.point-3{left:0;bottom:22px}
.management-point.point-4{right:0;bottom:22px}

.management-transition.active .point-1{
  animation:managementPointIn .55s cubic-bezier(.16,1,.3,1) .55s forwards;
}
.management-transition.active .point-2{
  animation:managementPointIn .55s cubic-bezier(.16,1,.3,1) .75s forwards;
}
.management-transition.active .point-3{
  animation:managementPointIn .55s cubic-bezier(.16,1,.3,1) .95s forwards;
}
.management-transition.active .point-4{
  animation:managementPointIn .55s cubic-bezier(.16,1,.3,1) 1.15s forwards;
}

.management-link{
  position:absolute;
  left:50%;
  top:50%;
  width:75px;
  height:1px;
  background:linear-gradient(90deg,#e5aa4c,rgba(229,170,76,.12));
  transform-origin:left center;
  opacity:0;
}

.management-link.link-1{
  transform:rotate(-137deg) scaleX(0);
}
.management-link.link-2{
  transform:rotate(-43deg) scaleX(0);
}
.management-link.link-3{
  transform:rotate(137deg) scaleX(0);
}
.management-link.link-4{
  transform:rotate(43deg) scaleX(0);
}

.management-transition.active .link-1{
  animation:managementLine1 .65s ease .45s forwards;
}
.management-transition.active .link-2{
  animation:managementLine2 .65s ease .65s forwards;
}
.management-transition.active .link-3{
  animation:managementLine3 .65s ease .85s forwards;
}
.management-transition.active .link-4{
  animation:managementLine4 .65s ease 1.05s forwards;
}

.management-transition-content > p{
  margin:0 0 12px;
  color:#d7a24b;
  font-size:11px;
  font-weight:800;
  letter-spacing:4px;
}

.management-transition-content h2{
  margin:0;
  color:#f1ece4;
  font-size:clamp(27px,4vw,43px);
  line-height:1.05;
  letter-spacing:-1px;
}

.management-transition-content h2 span{
  color:#e5aa4c;
}

.management-transition-loader{
  width:min(390px,75vw);
  height:2px;
  margin:30px auto 15px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
}

.management-transition-loader div{
  width:0;
  height:100%;
  background:linear-gradient(90deg,#a96e1f,#f0bf69);
  box-shadow:0 0 16px rgba(229,170,76,.55);
}

.management-transition.active .management-transition-loader div{
  animation:managementLoading 1.75s cubic-bezier(.16,1,.3,1) forwards;
}

.management-transition-content small{
  color:#756e65;
  font-size:9px;
  font-weight:700;
  letter-spacing:2.5px;
}

@keyframes managementCenterIn{
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

@keyframes managementLoaderGear{
  to{transform:rotate(360deg)}
}

@keyframes managementPointIn{
  60%{opacity:1;transform:scale(1.18)}
  100%{opacity:1;transform:scale(1)}
}

@keyframes managementLine1{
  to{opacity:1;transform:rotate(-137deg) scaleX(1)}
}
@keyframes managementLine2{
  to{opacity:1;transform:rotate(-43deg) scaleX(1)}
}
@keyframes managementLine3{
  to{opacity:1;transform:rotate(137deg) scaleX(1)}
}
@keyframes managementLine4{
  to{opacity:1;transform:rotate(43deg) scaleX(1)}
}

@keyframes managementLoading{
  0%{width:0}
  35%{width:34%}
  70%{width:72%}
  100%{width:100%}
}

@keyframes managementGridMove{
  to{background-position:52px 52px}
}

@media(max-width:600px){
  .management-transition-system{
    width:190px;
    height:190px;
  }

  .management-transition-content h2{
    font-size:28px;
  }
}

@media(prefers-reduced-motion:reduce){
  .management-transition *{
    animation-duration:.01ms !important;
    animation-delay:0s !important;
  }
}


/* ===== HERO SOLUTIONS POUR ENTREPRISES ===== */

.solutions-hero{
  position:relative;
  min-height:760px;
  padding:150px 7% 100px;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);
  align-items:center;
  gap:70px;
  overflow:hidden;
  background:
    radial-gradient(circle at 75% 45%,rgba(201,166,84,.10),transparent 32%),
    linear-gradient(135deg,#050505 0%,#0b0b0b 55%,#050505 100%);
}

.solutions-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.20;
  background-image:
    linear-gradient(rgba(201,166,84,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(201,166,84,.12) 1px,transparent 1px);
  background-size:55px 55px;
  mask-image:linear-gradient(to right,transparent 5%,black 65%,transparent);
}

.solutions-hero-inner{
  position:relative;
  z-index:2;
  max-width:760px;
}

.solutions-eyebrow{
  margin:0 0 22px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.22em;
  color:#c9a654;
}

.solutions-hero h1{
  margin:0;
  color:#fff;
  font-size:clamp(48px,5.4vw,82px);
  line-height:.98;
  letter-spacing:-.045em;
}

.solutions-hero h1 span{
  color:#c9a654;
}

.solutions-lead{
  max-width:680px;
  margin:30px 0 34px;
  color:#bcbcbc;
  font-size:17px;
  line-height:1.8;
}

.solutions-actions{
  display:flex;
  align-items:center;
  gap:16px;
}


/* Tableau de bord */

.solutions-visual{
  position:relative;
  z-index:2;
  min-height:500px;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1200px;
}

.solutions-dashboard{
  position:relative;
  width:min(100%,560px);
  height:355px;
  border:1px solid rgba(201,166,84,.42);
  border-radius:18px;
  overflow:hidden;
  background:
    linear-gradient(145deg,rgba(23,23,23,.96),rgba(7,7,7,.98));
  box-shadow:
    0 35px 90px rgba(0,0,0,.65),
    0 0 55px rgba(201,166,84,.08),
    inset 0 1px rgba(255,255,255,.04);
  transform:rotateY(-7deg) rotateX(3deg);
  animation:solutionsDashboardFloat 5s ease-in-out infinite;
}

.solutions-dashboard::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    115deg,
    transparent 20%,
    rgba(255,255,255,.035) 45%,
    transparent 70%
  );
}

.solutions-dashboard-top{
  height:46px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 17px;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);
}

.solutions-dashboard-top span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#c9a654;
  opacity:.75;
}

.solutions-dashboard-body{
  height:calc(100% - 46px);
  display:grid;
  grid-template-columns:76px 1fr;
}

.solutions-sidebar{
  padding:25px 20px;
  border-right:1px solid rgba(255,255,255,.06);
  display:flex;
  flex-direction:column;
  gap:22px;
}

.solutions-sidebar i{
  display:block;
  width:32px;
  height:6px;
  border-radius:10px;
  background:rgba(201,166,84,.28);
}

.solutions-sidebar i:first-child{
  background:#c9a654;
  box-shadow:0 0 15px rgba(201,166,84,.25);
}

.solutions-data{
  padding:30px;
}

.solutions-data-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-bottom:32px;
}

.solutions-data-row span{
  height:55px;
  border:1px solid rgba(201,166,84,.17);
  border-radius:8px;
  background:linear-gradient(
    135deg,
    rgba(201,166,84,.10),
    rgba(255,255,255,.015)
  );
}

.solutions-chart{
  height:105px;
  padding:10px 20px 0;
  display:flex;
  align-items:flex-end;
  gap:20px;
  border-left:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.solutions-chart i{
  flex:1;
  display:block;
  min-width:15px;
  border-radius:4px 4px 0 0;
  background:linear-gradient(to top,#8d6e2e,#d7b65d);
  transform-origin:bottom;
  animation:solutionsBarGrow 2.4s cubic-bezier(.16,1,.3,1) infinite alternate;
}

.solutions-chart i:nth-child(1){height:35%;animation-delay:.10s}
.solutions-chart i:nth-child(2){height:58%;animation-delay:.25s}
.solutions-chart i:nth-child(3){height:46%;animation-delay:.40s}
.solutions-chart i:nth-child(4){height:78%;animation-delay:.55s}
.solutions-chart i:nth-child(5){height:94%;animation-delay:.70s}

.solutions-data-line{
  width:82%;
  height:6px;
  margin-top:24px;
  border-radius:10px;
  background:rgba(255,255,255,.10);
}

.solutions-data-line.short{
  width:53%;
  margin-top:12px;
  background:rgba(201,166,84,.20);
}

.solutions-visual::before{
  content:"";
  position:absolute;
  width:430px;
  height:430px;
  border-radius:50%;
  border:1px solid rgba(201,166,84,.12);
  box-shadow:
    0 0 80px rgba(201,166,84,.06),
    inset 0 0 80px rgba(201,166,84,.03);
  animation:solutionsRing 12s linear infinite;
}

@keyframes solutionsDashboardFloat{
  0%,100%{transform:rotateY(-7deg) rotateX(3deg) translateY(0)}
  50%{transform:rotateY(-4deg) rotateX(1deg) translateY(-12px)}
}

@keyframes solutionsBarGrow{
  from{transform:scaleY(.35);opacity:.55}
  to{transform:scaleY(1);opacity:1}
}

@keyframes solutionsRing{
  to{transform:rotate(360deg)}
}

@media(max-width:900px){
  .solutions-hero{
    min-height:auto;
    padding:125px 6% 75px;
    grid-template-columns:1fr;
    gap:50px;
  }

  .solutions-hero h1{
    font-size:clamp(43px,12vw,65px);
  }

  .solutions-visual{
    min-height:390px;
  }

  .solutions-dashboard{
    height:310px;
    transform:none;
  }

  .solutions-visual::before{
    width:330px;
    height:330px;
  }

  .solutions-data{
    padding:22px;
  }

  .solutions-chart{
    gap:12px;
  }
}

@media(prefers-reduced-motion:reduce){
  .solutions-dashboard,
  .solutions-chart i,
  .solutions-visual::before{
    animation:none;
  }
}

/* ===== CARTES SOLUTIONS ENTREPRISES ===== */

.solutions-services{
  position:relative;
  padding:110px 7% 125px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 0%,rgba(201,166,84,.055),transparent 32%),
    #070707;
}

.solutions-services::before{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  left:-260px;
  top:180px;
  border-radius:50%;
  border:1px solid rgba(201,166,84,.07);
  pointer-events:none;
}

.solutions-services-head{
  position:relative;
  z-index:2;
  max-width:850px;
  margin:0 auto 65px;
  text-align:center;
}

.solutions-services-head .eyebrow{
  margin-bottom:18px;
  color:#c9a654;
  font-size:12px;
  font-weight:800;
  letter-spacing:.22em;
}

.solutions-services-head h2{
  margin:0;
  color:#fff;
  font-size:clamp(38px,4vw,58px);
  line-height:1.05;
  letter-spacing:-.035em;
}

.solutions-services-head h2 span{
  color:#c9a654;
}

.solutions-services-head > p:last-child{
  max-width:760px;
  margin:25px auto 0;
  color:#aaa;
  font-size:16px;
  line-height:1.8;
}

.solutions-services-grid{
  position:relative;
  z-index:2;
  width:min(100%,1280px);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.solutions-service-card{
  position:relative;
  min-height:300px;
  padding:34px 30px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.075);
  border-radius:15px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
  transition:
    transform .55s cubic-bezier(.16,1,.3,1),
    border-color .4s ease,
    background .4s ease,
    box-shadow .4s ease;
}

.solutions-service-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:0;
  height:2px;
  background:linear-gradient(90deg,#8d6e2e,#e1c46d);
  transition:width .6s cubic-bezier(.16,1,.3,1);
}

.solutions-service-card::after{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  right:-75px;
  bottom:-75px;
  border-radius:50%;
  background:rgba(201,166,84,.045);
  transform:scale(.7);
  transition:transform .6s ease,background .6s ease;
}

.solutions-service-card:hover{
  transform:translateY(-8px);
  border-color:rgba(201,166,84,.38);
  background:
    linear-gradient(145deg,rgba(201,166,84,.075),rgba(255,255,255,.012));
  box-shadow:0 25px 55px rgba(0,0,0,.32);
}

.solutions-service-card:hover::before{
  width:100%;
}

.solutions-service-card:hover::after{
  transform:scale(1.25);
  background:rgba(201,166,84,.07);
}

.solutions-service-card > span{
  position:absolute;
  top:25px;
  right:27px;
  color:rgba(201,166,84,.38);
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
}

.solutions-service-card > i{
  position:relative;
  z-index:2;
  width:58px;
  height:58px;
  margin-bottom:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(201,166,84,.28);
  border-radius:13px;
  color:#d6b75f;
  background:rgba(201,166,84,.055);
  font-size:23px;
  box-shadow:inset 0 0 20px rgba(201,166,84,.025);
  transform-origin:center;
}

.solutions-service-card h3{
  position:relative;
  z-index:2;
  margin:0 0 14px;
  color:#fff;
  font-size:18px;
  letter-spacing:.025em;
}

.solutions-service-card p{
  position:relative;
  z-index:2;
  margin:0;
  color:#9f9f9f;
  font-size:14px;
  line-height:1.75;
}


/* Animations des icônes */

.solutions-service-card:nth-child(1):hover > i{
  animation:solutionCRM 1.4s cubic-bezier(.16,1,.3,1);
}

.solutions-service-card:nth-child(2):hover > i{
  animation:solutionDashboard 1.5s cubic-bezier(.16,1,.3,1);
}

.solutions-service-card:nth-child(3):hover > i{
  animation:solutionFolder 1.5s cubic-bezier(.16,1,.3,1);
}

.solutions-service-card:nth-child(4):hover > i{
  animation:solutionUsers 1.6s cubic-bezier(.16,1,.3,1);
}

.solutions-service-card:nth-child(5):hover > i{
  animation:solutionInvoice 1.5s cubic-bezier(.16,1,.3,1);
}

.solutions-service-card:nth-child(6):hover > i{
  animation:solutionAutomation 2s cubic-bezier(.16,1,.3,1);
}

@keyframes solutionCRM{
  0%{transform:scale(1)}
  35%{transform:scale(1.16)}
  65%{transform:scale(.96)}
  100%{transform:scale(1)}
}

@keyframes solutionDashboard{
  0%{transform:rotate(0) scale(1)}
  35%{transform:rotate(-8deg) scale(1.1)}
  70%{transform:rotate(5deg)}
  100%{transform:rotate(0) scale(1)}
}

@keyframes solutionFolder{
  0%{transform:translateY(0)}
  35%{transform:translateY(-7px)}
  65%{transform:translateY(3px)}
  100%{transform:translateY(0)}
}

@keyframes solutionUsers{
  0%{transform:scale(1)}
  30%{transform:scale(1.12) translateX(-3px)}
  60%{transform:scale(1.12) translateX(3px)}
  100%{transform:scale(1) translateX(0)}
}

@keyframes solutionInvoice{
  0%{transform:translateY(0) scale(1)}
  40%{transform:translateY(-7px) scale(1.08)}
  100%{transform:translateY(0) scale(1)}
}

@keyframes solutionAutomation{
  from{transform:rotate(0)}
  to{transform:rotate(360deg)}
}

@media(max-width:1000px){
  .solutions-services-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:650px){
  .solutions-services{
    padding:80px 6%;
  }

  .solutions-services-grid{
    grid-template-columns:1fr;
  }

  .solutions-service-card{
    min-height:270px;
  }
}

@media(prefers-reduced-motion:reduce){
  .solutions-service-card,
  .solutions-service-card > i{
    animation:none !important;
    transition:none;
  }
}

/* ===== INTEGRATIONS SOLUTIONS ENTREPRISES ===== */

.solutions-integrations{
  position:relative;
  padding:120px 7%;
  overflow:hidden;
  border-top:1px solid rgba(201,166,84,.10);
  border-bottom:1px solid rgba(201,166,84,.10);
  background:
    radial-gradient(circle at 75% 50%,rgba(201,166,84,.09),transparent 30%),
    linear-gradient(135deg,#050505,#0b0b0b);
}

.solutions-integrations-inner{
  position:relative;
  z-index:2;
  width:min(100%,1280px);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(430px,.9fr);
  align-items:center;
  gap:100px;
}

.solutions-integrations-copy{
  max-width:650px;
}

.solutions-integrations-copy .eyebrow{
  margin:0 0 20px;
  color:#c9a654;
  font-size:12px;
  font-weight:800;
  letter-spacing:.22em;
}

.solutions-integrations-copy h2{
  margin:0;
  color:#fff;
  font-size:clamp(38px,4vw,58px);
  line-height:1.06;
  letter-spacing:-.035em;
}

.solutions-integrations-copy h2 span{
  color:#c9a654;
}

.solutions-integrations-copy > p:last-child{
  margin:27px 0 0;
  max-width:620px;
  color:#aaa;
  font-size:16px;
  line-height:1.85;
}


/* Réseau d'intégrations */

.solutions-integrations-visual{
  position:relative;
  width:460px;
  height:460px;
  margin:auto;
}

.solutions-integrations-visual::before,
.solutions-integrations-visual::after{
  content:"";
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(201,166,84,.13);
  pointer-events:none;
}

.solutions-integrations-visual::before{
  inset:35px;
  animation:solutionsOrbit 18s linear infinite;
}

.solutions-integrations-visual::after{
  inset:105px;
  border-style:dashed;
  opacity:.7;
  animation:solutionsOrbitReverse 14s linear infinite;
}

.integration-center{
  position:absolute;
  z-index:5;
  left:50%;
  top:50%;
  width:105px;
  height:105px;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(201,166,84,.55);
  border-radius:24px;
  color:#e0bd61;
  font-size:37px;
  background:
    radial-gradient(circle,rgba(201,166,84,.16),rgba(12,12,12,.96) 70%);
  box-shadow:
    0 0 45px rgba(201,166,84,.14),
    inset 0 0 30px rgba(201,166,84,.06);
}

.integration-center::after{
  content:"NSG";
  position:absolute;
  bottom:-29px;
  color:rgba(201,166,84,.65);
  font-size:9px;
  font-weight:800;
  letter-spacing:.25em;
}

.integration-node{
  position:absolute;
  z-index:4;
  width:68px;
  height:68px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(201,166,84,.34);
  border-radius:17px;
  color:#d9b65b;
  background:#10100f;
  font-size:22px;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
  animation:solutionsNodeFloat 4s ease-in-out infinite;
}

.integration-node::after{
  position:absolute;
  top:78px;
  white-space:nowrap;
  color:#8f8f8f;
  font-size:10px;
  font-family:inherit;
  font-weight:700;
  letter-spacing:.12em;
}

.integration-node.node-a{
  left:20px;
  top:75px;
}
.integration-node.node-a::after{content:attr(data-label);}

.integration-node.node-b{
  right:20px;
  top:75px;
  animation-delay:.5s;
}
.integration-node.node-b::after{content:attr(data-label);}

.integration-node.node-c{
  left:20px;
  bottom:65px;
  animation-delay:1s;
}
.integration-node.node-c::after{content:attr(data-label);}

.integration-node.node-d{
  right:20px;
  bottom:65px;
  animation-delay:1.5s;
}
.integration-node.node-d::after{content:attr(data-label);}


/* Lignes vers le système central */

.integration-line{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  width:155px;
  height:1px;
  overflow:hidden;
  background:rgba(201,166,84,.13);
  transform-origin:left center;
}

.integration-line::after{
  content:"";
  position:absolute;
  top:0;
  left:-55%;
  width:55%;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    #e0bd61,
    transparent
  );
  animation:solutionsDataFlow 2.3s linear infinite;
}

.integration-line.line-a{
  transform:rotate(218deg);
}

.integration-line.line-b{
  transform:rotate(322deg);
}

.integration-line.line-c{
  transform:rotate(142deg);
}

.integration-line.line-d{
  transform:rotate(38deg);
}

.integration-line.line-b::after{animation-delay:.5s}
.integration-line.line-c::after{animation-delay:1s}
.integration-line.line-d::after{animation-delay:1.5s}

@keyframes solutionsDataFlow{
  from{left:-55%}
  to{left:110%}
}

@keyframes solutionsNodeFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}

@keyframes solutionsOrbit{
  to{transform:rotate(360deg)}
}

@keyframes solutionsOrbitReverse{
  to{transform:rotate(-360deg)}
}

@media(max-width:950px){
  .solutions-integrations{
    padding:90px 6%;
  }

  .solutions-integrations-inner{
    grid-template-columns:1fr;
    gap:60px;
  }

  .solutions-integrations-copy{
    max-width:760px;
  }

  .solutions-integrations-visual{
    width:400px;
    height:400px;
  }
}

@media(max-width:520px){
  .solutions-integrations-visual{
    width:320px;
    height:320px;
  }

  .solutions-integrations-visual::before{
    inset:25px;
  }

  .solutions-integrations-visual::after{
    inset:75px;
  }

  .integration-center{
    width:82px;
    height:82px;
    font-size:29px;
  }

  .integration-node{
    width:55px;
    height:55px;
    border-radius:14px;
    font-size:18px;
  }

  .integration-node.node-a,
  .integration-node.node-c{
    left:5px;
  }

  .integration-node.node-b,
  .integration-node.node-d{
    right:5px;
  }

  .integration-node.node-a,
  .integration-node.node-b{
    top:50px;
  }

  .integration-node.node-c,
  .integration-node.node-d{
    bottom:45px;
  }

  .integration-line{
    width:112px;
  }

  .integration-node::after{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .solutions-integrations-visual::before,
  .solutions-integrations-visual::after,
  .integration-node,
  .integration-line::after{
    animation:none;
  }
}

/* ===== PROCESSUS SOLUTIONS ENTREPRISES ===== */

.solutions-process{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 40%,rgba(201,166,84,.065),transparent 35%),
    #080808;
}

.solutions-process::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.12;
  background-image:
    linear-gradient(rgba(201,166,84,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(201,166,84,.10) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,transparent,black 30%,black 70%,transparent);
}

.solutions-process .process-step{
  position:relative;
}

.solutions-process .step-icon{
  position:relative;
  overflow:visible;
  transition:
    transform .45s cubic-bezier(.16,1,.3,1),
    border-color .4s ease,
    box-shadow .4s ease;
}

.solutions-process .step-icon::before{
  content:"";
  position:absolute;
  inset:-7px;
  border:1px solid rgba(201,166,84,.16);
  border-radius:50%;
  opacity:0;
  transform:scale(.7);
}

.solutions-process .process-step.chain-active .step-icon::before{
  animation:solutionProcessPulse 1.8s cubic-bezier(.16,1,.3,1) both;
}

.solutions-process .process-step.chain-active .step-icon{
  box-shadow:
    0 0 0 1px rgba(201,166,84,.10),
    0 0 28px rgba(201,166,84,.12);
}

.solutions-process .process-step:hover .step-icon{
  transform:translateY(-7px) scale(1.06);
  border-color:rgba(201,166,84,.65);
  box-shadow:0 0 35px rgba(201,166,84,.18);
}

/* 01 - Analyse */
.solutions-process .process-step:nth-of-type(1):hover .step-icon i{
  animation:solutionScan 1.5s ease-in-out;
}

/* 02 - Architecture */
.solutions-process .process-step:nth-of-type(3):hover .step-icon i{
  animation:solutionStructure 1.4s cubic-bezier(.16,1,.3,1);
}

/* 03 - Développement */
.solutions-process .process-step:nth-of-type(5):hover .step-icon i{
  animation:solutionCode 1.3s ease-in-out;
}

/* 04 - Tests */
.solutions-process .process-step:nth-of-type(7):hover .step-icon i{
  animation:solutionTest 1.5s cubic-bezier(.16,1,.3,1);
}

/* 05 - Mise en service */
.solutions-process .process-step:nth-of-type(9):hover .step-icon i{
  animation:solutionLaunch 1.7s cubic-bezier(.16,1,.3,1);
}

@keyframes solutionProcessPulse{
  0%{
    opacity:0;
    transform:scale(.65);
  }
  35%{
    opacity:.8;
  }
  100%{
    opacity:0;
    transform:scale(1.45);
  }
}

@keyframes solutionScan{
  0%,100%{transform:scale(1) rotate(0)}
  35%{transform:scale(1.15) rotate(-8deg)}
  70%{transform:scale(1.08) rotate(8deg)}
}

@keyframes solutionStructure{
  0%{transform:scale(.8);opacity:.5}
  45%{transform:scale(1.18);opacity:1}
  70%{transform:scale(.96)}
  100%{transform:scale(1)}
}

@keyframes solutionCode{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)}
  50%{transform:translateX(5px)}
  75%{transform:translateX(-2px)}
}

@keyframes solutionTest{
  0%{transform:scale(1)}
  35%{transform:scale(1.18) rotate(-7deg)}
  65%{transform:scale(1.08) rotate(5deg)}
  100%{transform:scale(1) rotate(0)}
}

@keyframes solutionLaunch{
  0%{transform:translate(0,0) scale(1)}
  40%{transform:translate(5px,-9px) scale(1.12)}
  70%{transform:translate(2px,-4px) scale(1.05)}
  100%{transform:translate(0,0) scale(1)}
}

@media(prefers-reduced-motion:reduce){
  .solutions-process .step-icon,
  .solutions-process .step-icon::before,
  .solutions-process .step-icon i{
    animation:none !important;
    transition:none;
  }
}

/* ===== TRANSITION SOLUTIONS POUR ENTREPRISES ===== */
.solutions-transition{
  position:fixed;
  inset:0;
  z-index:99998;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#050505;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease,visibility .25s ease;
  overflow:hidden;
}

.solutions-transition.active{
  opacity:1;
  visibility:visible;
  pointer-events:all;
}

.solutions-transition-grid{
  position:absolute;
  inset:-20%;
  background-image:
    linear-gradient(rgba(201,166,92,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(201,166,92,.055) 1px,transparent 1px);
  background-size:42px 42px;
  transform:perspective(600px) rotateX(60deg) translateY(15%);
  animation:solutionsGrid 4s linear infinite;
}

.solutions-transition::after{
  content:"";
  position:absolute;
  width:650px;
  height:650px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(201,166,92,.12),transparent 68%);
  animation:solutionsGlow 2s ease-in-out infinite alternate;
}

.solutions-transition-content{
  position:relative;
  z-index:2;
  width:min(90%,700px);
  text-align:center;
}

.solutions-transition-system{
  position:relative;
  width:270px;
  height:190px;
  margin:0 auto 34px;
}

.solutions-transition-core,
.solutions-transition-node{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(201,166,92,.55);
  background:#0b0b0b;
  color:#d6b76d;
  box-shadow:0 0 25px rgba(201,166,92,.12);
}

.solutions-transition-core{
  width:74px;
  height:74px;
  border-radius:18px;
  left:98px;
  top:58px;
  font-size:28px;
  animation:solutionsCore 1.4s ease-in-out infinite alternate;
}

.solutions-transition-node{
  width:46px;
  height:46px;
  border-radius:12px;
  font-size:16px;
  opacity:0;
  transform:scale(.55);
}

.solutions-transition-node.node-1{left:5px;top:10px;animation:solutionsNode .45s .15s forwards;}
.solutions-transition-node.node-2{right:5px;top:10px;animation:solutionsNode .45s .35s forwards;}
.solutions-transition-node.node-3{left:5px;bottom:5px;animation:solutionsNode .45s .55s forwards;}
.solutions-transition-node.node-4{right:5px;bottom:5px;animation:solutionsNode .45s .75s forwards;}

.solutions-transition-line{
  position:absolute;
  height:1px;
  width:93px;
  background:linear-gradient(90deg,transparent,#d6b76d);
  transform-origin:left center;
  opacity:.8;
  overflow:hidden;
}

.solutions-transition-line::after{
  content:"";
  position:absolute;
  top:-1px;
  width:20px;
  height:3px;
  background:#f0d38b;
  box-shadow:0 0 10px #d6b76d;
  animation:solutionsData 1s linear infinite;
}

.solutions-transition-line.line-1{left:40px;top:55px;transform:rotate(25deg);}
.solutions-transition-line.line-2{right:38px;top:55px;transform:rotate(155deg);}
.solutions-transition-line.line-3{left:40px;bottom:51px;transform:rotate(-25deg);}
.solutions-transition-line.line-4{right:38px;bottom:51px;transform:rotate(205deg);}

.solutions-transition-content > p{
  margin:0 0 10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.28em;
  color:#d6b76d;
}

.solutions-transition-content h2{
  margin:0;
  color:#fff;
  font-size:clamp(25px,4vw,42px);
  line-height:1.12;
  letter-spacing:.03em;
}

.solutions-transition-content h2 span{
  color:#d6b76d;
}

.solutions-transition-loader{
  width:min(360px,75vw);
  height:2px;
  margin:28px auto 15px;
  background:rgba(255,255,255,.1);
  overflow:hidden;
}

.solutions-transition-loader div{
  width:0;
  height:100%;
  background:linear-gradient(90deg,#9f7d38,#f1d58a);
  box-shadow:0 0 12px rgba(214,183,109,.7);
}

.solutions-transition.active .solutions-transition-loader div{
  animation:solutionsLoad 1.65s cubic-bezier(.2,.7,.25,1) forwards;
}

.solutions-transition-content small{
  color:rgba(255,255,255,.48);
  font-size:10px;
  letter-spacing:.22em;
}

@keyframes solutionsNode{
  to{opacity:1;transform:scale(1);}
}

@keyframes solutionsCore{
  from{box-shadow:0 0 15px rgba(201,166,92,.15);}
  to{box-shadow:0 0 45px rgba(201,166,92,.4);}
}

@keyframes solutionsData{
  from{left:-25px;}
  to{left:100%;}
}

@keyframes solutionsLoad{
  0%{width:0;}
  35%{width:38%;}
  70%{width:72%;}
  100%{width:100%;}
}

@keyframes solutionsGrid{
  from{background-position:0 0;}
  to{background-position:0 42px;}
}

@keyframes solutionsGlow{
  from{opacity:.45;transform:scale(.9);}
  to{opacity:1;transform:scale(1.08);}
}

@media(max-width:600px){
  .solutions-transition-system{
    transform:scale(.85);
    margin-bottom:20px;
  }

  .solutions-transition-content > p{
    font-size:10px;
    letter-spacing:.2em;
  }

  .solutions-transition-content small{
    font-size:8px;
    letter-spacing:.15em;
  }
}

/* ===== CORRECTION LIGNES TRANSITION SOLUTIONS ===== */
.solutions-transition-line{
  width:78px;
  transform-origin:0 50%;
}

.solutions-transition-line.line-1{
  left:54px;
  top:43px;
  transform:rotate(28deg);
}

.solutions-transition-line.line-2{
  left:216px;
  top:43px;
  transform:rotate(152deg);
}

.solutions-transition-line.line-3{
  left:54px;
  bottom:38px;
  transform:rotate(-28deg);
}

.solutions-transition-line.line-4{
  left:216px;
  bottom:38px;
  transform:rotate(208deg);
}

/* ===== TRANSITION SOUMISSION - CREATION WEB ===== */
.quote-web-transition{
  position:fixed;
  inset:0;
  z-index:100001;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#050505;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  overflow:hidden;
  transition:opacity .25s ease,visibility .25s ease;
}

.quote-web-transition.active{
  opacity:1;
  visibility:visible;
  pointer-events:all;
}

.quote-web-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(205,171,96,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(205,171,96,.045) 1px,transparent 1px);
  background-size:42px 42px;
}

.quote-web-transition::after{
  content:"";
  position:absolute;
  width:600px;
  height:600px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(210,176,96,.13),transparent 68%);
  animation:quoteWebGlow 1.5s ease-in-out infinite alternate;
}

.quote-web-content{
  position:relative;
  z-index:2;
  width:min(90%,650px);
  text-align:center;
}

.quote-web-form{
  width:250px;
  margin:0 auto 32px;
  padding:0 0 18px;
  border:1px solid rgba(210,176,96,.45);
  border-radius:15px;
  background:#0b0b0b;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  overflow:hidden;
}

.quote-web-form-top{
  height:30px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 12px;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.quote-web-form-top span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(210,176,96,.55);
}

.quote-web-form-body{
  padding:17px 18px 0;
}

.quote-web-field{
  height:30px;
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:6px;
  color:#d6b76d;
  opacity:.35;
}

.quote-web-field i{
  width:13px;
  font-size:10px;
}

.quote-web-field span{
  display:block;
  height:3px;
  width:0;
  border-radius:10px;
  background:rgba(255,255,255,.65);
}

.quote-web-transition.active .field-1{
  animation:quoteWebField .25s .15s forwards;
}
.quote-web-transition.active .field-1 span{
  animation:quoteWebType .35s .25s forwards;
}

.quote-web-transition.active .field-2{
  animation:quoteWebField .25s .48s forwards;
}
.quote-web-transition.active .field-2 span{
  animation:quoteWebType .35s .58s forwards;
}

.quote-web-transition.active .field-3{
  animation:quoteWebField .25s .81s forwards;
}
.quote-web-transition.active .field-3 span{
  animation:quoteWebType .35s .91s forwards;
}

.quote-web-submit{
  width:38px;
  height:28px;
  margin:14px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  border:1px solid rgba(210,176,96,.3);
  color:#d6b76d;
  opacity:.25;
  transform:scale(.8);
}

.quote-web-transition.active .quote-web-submit{
  animation:quoteWebCheck .35s 1.18s forwards;
}

.quote-web-content > p{
  margin:0 0 9px;
  color:#d6b76d;
  font-size:11px;
  font-weight:700;
  letter-spacing:.27em;
}

.quote-web-content h2{
  margin:0;
  color:#fff;
  font-size:clamp(26px,4vw,41px);
  line-height:1.12;
}

.quote-web-content h2 span{
  color:#d6b76d;
}

.quote-web-loader{
  width:min(350px,75vw);
  height:2px;
  margin:27px auto 14px;
  background:rgba(255,255,255,.1);
  overflow:hidden;
}

.quote-web-loader div{
  width:0;
  height:100%;
  background:linear-gradient(90deg,#9f7d38,#f1d58a);
  box-shadow:0 0 12px rgba(214,183,109,.7);
}

.quote-web-transition.active .quote-web-loader div{
  animation:quoteWebLoad 1.7s cubic-bezier(.2,.7,.25,1) forwards;
}

.quote-web-content small{
  color:rgba(255,255,255,.45);
  font-size:9px;
  letter-spacing:.22em;
}

@keyframes quoteWebField{
  to{
    opacity:1;
    border-color:rgba(210,176,96,.35);
  }
}

@keyframes quoteWebType{
  to{width:75%;}
}

@keyframes quoteWebCheck{
  to{
    opacity:1;
    transform:scale(1);
    color:#080808;
    background:#d6b76d;
    box-shadow:0 0 22px rgba(214,183,109,.35);
  }
}

@keyframes quoteWebLoad{
  0%{width:0;}
  35%{width:36%;}
  70%{width:74%;}
  100%{width:100%;}
}

@keyframes quoteWebGlow{
  from{opacity:.4;transform:scale(.9);}
  to{opacity:1;transform:scale(1.08);}
}

@media(max-width:600px){
  .quote-web-form{
    transform:scale(.9);
    margin-bottom:20px;
  }

  .quote-web-content > p{
    font-size:9px;
    letter-spacing:.2em;
  }

  .quote-web-content small{
    font-size:8px;
    letter-spacing:.15em;
  }
}

/* ===== TRANSITION SOUMISSION - GESTION GENERALE ===== */
.quote-management-transition{
  position:fixed;
  inset:0;
  z-index:100001;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#050505;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  overflow:hidden;
  transition:opacity .25s ease,visibility .25s ease;
}

.quote-management-transition.active{
  opacity:1;
  visibility:visible;
  pointer-events:all;
}

.quote-management-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(205,171,96,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(205,171,96,.045) 1px,transparent 1px);
  background-size:42px 42px;
}

.quote-management-transition::after{
  content:"";
  position:absolute;
  width:620px;
  height:620px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(210,176,96,.13),transparent 68%);
  animation:quoteManagementGlow 1.5s ease-in-out infinite alternate;
}

.quote-management-content{
  position:relative;
  z-index:2;
  width:min(90%,650px);
  text-align:center;
}

.quote-management-board{
  position:relative;
  width:245px;
  min-height:190px;
  margin:0 auto 32px;
  padding:17px;
  border:1px solid rgba(210,176,96,.45);
  border-radius:16px;
  background:#0b0b0b;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}

.quote-management-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:13px;
  margin-bottom:13px;
  border-bottom:1px solid rgba(255,255,255,.07);
  color:#d6b76d;
}

.quote-management-top span{
  font-size:9px;
  font-weight:700;
  letter-spacing:.22em;
}

.quote-management-top i{
  font-size:14px;
}

.quote-management-task{
  height:30px;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:9px;
  padding:0 9px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:7px;
  opacity:.35;
}

.task-check{
  width:16px;
  height:16px;
  flex:0 0 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(210,176,96,.5);
  border-radius:50%;
  color:transparent;
  font-size:7px;
}

.task-line{
  width:0;
  height:3px;
  border-radius:20px;
  background:rgba(255,255,255,.6);
}

.quote-management-transition.active .task-1{
  animation:quoteManagementTask .25s .15s forwards;
}

.quote-management-transition.active .task-1 .task-line{
  animation:quoteManagementLine .3s .22s forwards;
}

.quote-management-transition.active .task-1 .task-check{
  animation:quoteManagementCheck .25s .4s forwards;
}

.quote-management-transition.active .task-2{
  animation:quoteManagementTask .25s .48s forwards;
}

.quote-management-transition.active .task-2 .task-line{
  animation:quoteManagementLine .3s .55s forwards;
}

.quote-management-transition.active .task-2 .task-check{
  animation:quoteManagementCheck .25s .73s forwards;
}

.quote-management-transition.active .task-3{
  animation:quoteManagementTask .25s .81s forwards;
}

.quote-management-transition.active .task-3 .task-line{
  animation:quoteManagementLine .3s .88s forwards;
}

.quote-management-transition.active .task-3 .task-check{
  animation:quoteManagementCheck .25s 1.06s forwards;
}

.quote-management-status{
  position:absolute;
  right:-16px;
  bottom:-16px;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(210,176,96,.55);
  border-radius:13px;
  background:#0b0b0b;
  color:#d6b76d;
  font-size:19px;
  opacity:0;
  transform:scale(.6) rotate(-10deg);
}

.quote-management-transition.active .quote-management-status{
  animation:quoteManagementStatus .35s 1.2s forwards;
}

.quote-management-content > p{
  margin:0 0 9px;
  color:#d6b76d;
  font-size:11px;
  font-weight:700;
  letter-spacing:.27em;
}

.quote-management-content h2{
  margin:0;
  color:#fff;
  font-size:clamp(26px,4vw,41px);
  line-height:1.12;
}

.quote-management-content h2 span{
  color:#d6b76d;
}

.quote-management-loader{
  width:min(350px,75vw);
  height:2px;
  margin:27px auto 14px;
  background:rgba(255,255,255,.1);
  overflow:hidden;
}

.quote-management-loader div{
  width:0;
  height:100%;
  background:linear-gradient(90deg,#9f7d38,#f1d58a);
  box-shadow:0 0 12px rgba(214,183,109,.7);
}

.quote-management-transition.active .quote-management-loader div{
  animation:quoteManagementLoad 1.7s cubic-bezier(.2,.7,.25,1) forwards;
}

.quote-management-content small{
  color:rgba(255,255,255,.45);
  font-size:9px;
  letter-spacing:.22em;
}

@keyframes quoteManagementTask{
  to{
    opacity:1;
    border-color:rgba(210,176,96,.3);
  }
}

@keyframes quoteManagementLine{
  to{width:72%;}
}

@keyframes quoteManagementCheck{
  to{
    color:#080808;
    background:#d6b76d;
    border-color:#d6b76d;
    box-shadow:0 0 12px rgba(214,183,109,.3);
  }
}

@keyframes quoteManagementStatus{
  to{
    opacity:1;
    transform:scale(1) rotate(0);
    box-shadow:0 0 25px rgba(214,183,109,.25);
  }
}

@keyframes quoteManagementLoad{
  0%{width:0;}
  35%{width:36%;}
  70%{width:74%;}
  100%{width:100%;}
}

@keyframes quoteManagementGlow{
  from{opacity:.4;transform:scale(.9);}
  to{opacity:1;transform:scale(1.08);}
}

@media(max-width:600px){
  .quote-management-board{
    transform:scale(.9);
    margin-bottom:20px;
  }

  .quote-management-content > p{
    font-size:9px;
    letter-spacing:.2em;
  }

  .quote-management-content small{
    font-size:8px;
    letter-spacing:.14em;
  }
}

/* ===== TRANSITION SOUMISSION - SOLUTIONS ENTREPRISES ===== */
.quote-solutions-transition{
  position:fixed;
  inset:0;
  z-index:100001;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#050505;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  overflow:hidden;
  transition:opacity .25s ease,visibility .25s ease;
}

.quote-solutions-transition.active{
  opacity:1;
  visibility:visible;
  pointer-events:all;
}

.quote-solutions-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(205,171,96,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(205,171,96,.045) 1px,transparent 1px);
  background-size:42px 42px;
}

.quote-solutions-transition::after{
  content:"";
  position:absolute;
  width:620px;
  height:620px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(210,176,96,.13),transparent 68%);
  animation:quoteSolutionsGlow 1.5s ease-in-out infinite alternate;
}

.quote-solutions-content{
  position:relative;
  z-index:2;
  width:min(90%,650px);
  text-align:center;
}

.quote-solutions-system{
  position:relative;
  width:270px;
  height:190px;
  margin:0 auto 30px;
}

.quote-solutions-core,
.quote-solutions-node{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0b0b0b;
  border:1px solid rgba(210,176,96,.5);
  color:#d6b76d;
  box-shadow:0 0 20px rgba(214,183,109,.1);
}

.quote-solutions-core{
  width:70px;
  height:70px;
  left:100px;
  top:60px;
  border-radius:18px;
  font-size:24px;
  color:transparent;
}

.quote-solutions-node{
  width:44px;
  height:44px;
  border-radius:12px;
  font-size:15px;
  opacity:.35;
}

.quote-solutions-node.node-1{left:5px;top:5px;}
.quote-solutions-node.node-2{right:5px;top:5px;}
.quote-solutions-node.node-3{left:5px;bottom:5px;}
.quote-solutions-node.node-4{right:5px;bottom:5px;}

.quote-solutions-line{
  position:absolute;
  width:78px;
  height:1px;
  background:rgba(214,183,109,.25);
  transform-origin:0 50%;
  overflow:hidden;
}

.quote-solutions-line::after{
  content:"";
  position:absolute;
  left:-24px;
  top:-1px;
  width:20px;
  height:3px;
  background:#f0d38b;
  box-shadow:0 0 10px #d6b76d;
}

.quote-solutions-line.line-1{
  left:52px;
  top:42px;
  transform:rotate(29deg);
}

.quote-solutions-line.line-2{
  left:218px;
  top:42px;
  transform:rotate(151deg);
}

.quote-solutions-line.line-3{
  left:52px;
  bottom:39px;
  transform:rotate(-29deg);
}

.quote-solutions-line.line-4{
  left:218px;
  bottom:39px;
  transform:rotate(209deg);
}

.quote-solutions-transition.active .quote-solutions-line::after{
  animation:quoteSolutionsData .75s linear 2;
}

.quote-solutions-transition.active .node-1{
  animation:quoteSolutionsNode .3s .12s forwards;
}

.quote-solutions-transition.active .node-2{
  animation:quoteSolutionsNode .3s .32s forwards;
}

.quote-solutions-transition.active .node-3{
  animation:quoteSolutionsNode .3s .52s forwards;
}

.quote-solutions-transition.active .node-4{
  animation:quoteSolutionsNode .3s .72s forwards;
}

.quote-solutions-transition.active .quote-solutions-core{
  animation:quoteSolutionsCore .4s 1.15s forwards;
}

.quote-solutions-content > p{
  margin:0 0 9px;
  color:#d6b76d;
  font-size:11px;
  font-weight:700;
  letter-spacing:.27em;
}

.quote-solutions-content h2{
  margin:0;
  color:#fff;
  font-size:clamp(26px,4vw,41px);
  line-height:1.12;
}

.quote-solutions-content h2 span{
  color:#d6b76d;
}

.quote-solutions-loader{
  width:min(350px,75vw);
  height:2px;
  margin:27px auto 14px;
  background:rgba(255,255,255,.1);
  overflow:hidden;
}

.quote-solutions-loader div{
  width:0;
  height:100%;
  background:linear-gradient(90deg,#9f7d38,#f1d58a);
  box-shadow:0 0 12px rgba(214,183,109,.7);
}

.quote-solutions-transition.active .quote-solutions-loader div{
  animation:quoteSolutionsLoad 1.7s cubic-bezier(.2,.7,.25,1) forwards;
}

.quote-solutions-content small{
  color:rgba(255,255,255,.45);
  font-size:9px;
  letter-spacing:.22em;
}

@keyframes quoteSolutionsNode{
  to{
    opacity:1;
    box-shadow:0 0 24px rgba(214,183,109,.25);
  }
}

@keyframes quoteSolutionsData{
  from{left:-24px;}
  to{left:100%;}
}

@keyframes quoteSolutionsCore{
  to{
    color:#080808;
    background:#d6b76d;
    border-color:#d6b76d;
    transform:scale(1.08);
    box-shadow:0 0 38px rgba(214,183,109,.45);
  }
}

@keyframes quoteSolutionsLoad{
  0%{width:0;}
  35%{width:36%;}
  70%{width:74%;}
  100%{width:100%;}
}

@keyframes quoteSolutionsGlow{
  from{opacity:.4;transform:scale(.9);}
  to{opacity:1;transform:scale(1.08);}
}

@media(max-width:600px){
  .quote-solutions-system{
    transform:scale(.88);
    margin-bottom:18px;
  }

  .quote-solutions-content > p{
    font-size:9px;
    letter-spacing:.19em;
  }

  .quote-solutions-content small{
    font-size:8px;
    letter-spacing:.14em;
  }
}

/* ===== ICONES PREMIUM CARTES SERVICES ===== */
.premium-service-icon{
  position:relative;
  width:54px;
  height:54px;
  flex:0 0 54px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#d6b24c;
  filter:drop-shadow(0 0 7px rgba(214,178,76,.16));
}

/* ===== GESTION GENERALE ===== */
.management-icon .premium-ring{
  position:absolute;
  width:38px;
  height:38px;
  border:1px solid rgba(214,178,76,.72);
  border-radius:50%;
  box-shadow:
    inset 0 0 12px rgba(214,178,76,.05),
    0 0 12px rgba(214,178,76,.08);
}

.management-icon .premium-ring::before,
.management-icon .premium-ring::after{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(214,178,76,.16);
  border-radius:50%;
}

.management-icon .premium-ring::after{
  inset:11px;
  border-color:rgba(214,178,76,.4);
}

.management-gear{
  position:relative;
  z-index:3;
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #d6b24c;
  border-radius:5px;
  font-size:10px;
  line-height:1;
  background:#11100d;
  box-shadow:0 0 9px rgba(214,178,76,.2);
}

.management-dot{
  position:absolute;
  width:5px;
  height:5px;
  border:1px solid #d6b24c;
  background:#11100d;
  border-radius:50%;
  z-index:4;
}

.management-dot.dot-a{top:5px;left:25px;}
.management-dot.dot-b{bottom:9px;left:7px;}
.management-dot.dot-c{bottom:9px;right:7px;}

/* ===== SOLUTIONS ENTREPRISES ===== */
.solutions-icon::before{
  content:"";
  position:absolute;
  width:42px;
  height:42px;
  border:1px solid rgba(214,178,76,.18);
  border-radius:12px;
  transform:rotate(45deg);
}

.solution-core{
  position:absolute;
  left:22px;
  top:22px;
  width:10px;
  height:10px;
  margin:-5px 0 0 -5px;
  border:1px solid #e0bd5a;
  background:#11100d;
  transform:rotate(45deg);
  z-index:5;
  box-shadow:0 0 10px rgba(214,178,76,.35);
}

.solution-node{
  position:absolute;
  width:6px;
  height:6px;
  margin:-3px 0 0 -3px;
  border:1px solid #d6b24c;
  border-radius:50%;
  background:#11100d;
  z-index:4;
  box-shadow:0 0 6px rgba(214,178,76,.2);
}

.solution-node.node-a{left:27px;top:5px;}
.solution-node.node-b{left:49px;top:27px;}
.solution-node.node-c{left:27px;top:49px;}
.solution-node.node-d{left:5px;top:27px;}

.solution-line{
  position:absolute;
  left:27px;
  top:27px;
  width:22px;
  height:1px;
  background:linear-gradient(90deg,#d6b24c,rgba(214,178,76,.2));
  transform-origin:0 50%;
  z-index:2;
}

.solution-line.line-a{transform:rotate(-90deg);}
.solution-line.line-b{transform:rotate(0deg);}
.solution-line.line-c{transform:rotate(90deg);}
.solution-line.line-d{transform:rotate(180deg);}

/* ===== EFFET PREMIUM AU SURVOL ===== */
.service:hover .premium-service-icon{
  filter:drop-shadow(0 0 10px rgba(214,178,76,.32));
}

.service:hover .management-icon .premium-ring{
  transform:rotate(90deg);
  border-color:#e4c15e;
}

.service:hover .management-gear{
  transform:rotate(45deg);
}

.service:hover .solutions-icon::before{
  transform:rotate(135deg);
  border-color:rgba(214,178,76,.45);
}

.service:hover .solution-core{
  background:#d6b24c;
  box-shadow:0 0 15px rgba(214,178,76,.55);
}

.premium-service-icon,
.management-icon .premium-ring,
.management-gear,
.solutions-icon::before,
.solution-core{
  transition:transform .65s cubic-bezier(.2,.7,.2,1),
             border-color .35s ease,
             background .35s ease,
             filter .35s ease,
             box-shadow .35s ease;
}

/* ===== ICONE PREMIUM CREATION WEB ===== */
.web-premium-icon{
  position:relative;
  width:54px;
  height:54px;
  flex:0 0 54px;
}

.web-screen{
  position:absolute;
  left:6px;
  top:7px;
  width:42px;
  height:29px;
  border:1.5px solid #d6b24c;
  border-radius:4px;
  background:#0d0d0c;
  overflow:hidden;
  box-shadow:
    inset 0 0 12px rgba(214,178,76,.05),
    0 0 10px rgba(214,178,76,.12);
  transition:
    transform .55s cubic-bezier(.2,.7,.2,1),
    border-color .35s ease,
    box-shadow .35s ease;
}

/* Barre du mini navigateur */
.web-screen-top{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:6px;
  border-bottom:1px solid rgba(214,178,76,.25);
  display:flex;
  align-items:center;
  gap:2px;
  padding-left:3px;
  box-sizing:border-box;
}

.web-screen-top i{
  display:block;
  width:2px;
  height:2px;
  border-radius:50%;
  background:#d6b24c;
  opacity:.7;
}

/* Mini interface */
.web-screen-layout{
  position:absolute;
  left:4px;
  right:4px;
  top:10px;
  bottom:4px;
}

.web-sidebar{
  position:absolute;
  left:0;
  top:0;
  width:7px;
  height:100%;
  border:1px solid rgba(214,178,76,.42);
  border-radius:1px;
  box-sizing:border-box;
}

.web-content-line{
  position:absolute;
  left:11px;
  height:1px;
  background:#d6b24c;
  transform-origin:left center;
}

.web-content-line.line-1{
  top:1px;
  width:20px;
  opacity:.85;
}

.web-content-line.line-2{
  top:5px;
  width:14px;
  opacity:.4;
}

.web-content-box{
  position:absolute;
  left:11px;
  top:9px;
  width:20px;
  height:5px;
  border:1px solid rgba(214,178,76,.35);
  border-radius:1px;
  box-sizing:border-box;
}

/* Pied de l'écran */
.web-stand{
  position:absolute;
  left:25px;
  top:36px;
  width:4px;
  height:7px;
  background:linear-gradient(
    90deg,
    rgba(214,178,76,.45),
    #e1bd58,
    rgba(214,178,76,.45)
  );
}

.web-base{
  position:absolute;
  left:18px;
  top:43px;
  width:18px;
  height:2px;
  border-radius:2px;
  background:#d6b24c;
  box-shadow:0 0 7px rgba(214,178,76,.22);
}

/* Animation premium */
.service:hover .web-screen{
  transform:translateY(-2px);
  border-color:#edcc70;
  box-shadow:
    inset 0 0 14px rgba(214,178,76,.08),
    0 0 15px rgba(214,178,76,.25);
}

.service:hover .web-content-line.line-1{
  animation:webPremiumLine1 .65s ease both;
}

.service:hover .web-content-line.line-2{
  animation:webPremiumLine2 .65s .1s ease both;
}

.service:hover .web-content-box{
  border-color:#d6b24c;
  box-shadow:inset 0 0 5px rgba(214,178,76,.16);
}

@keyframes webPremiumLine1{
  0%{transform:scaleX(.25);opacity:.25;}
  100%{transform:scaleX(1);opacity:.85;}
}

@keyframes webPremiumLine2{
  0%{transform:scaleX(.25);opacity:.15;}
  100%{transform:scaleX(1);opacity:.4;}
}

/* ===== CENTRAGE ICONE GESTION GENERALE ===== */
.management-icon{
  transform:translateX(4px);
}

/* ===== CENTRAGE CARRE CENTRAL GESTION ===== */
.management-gear{
  position:absolute;
  left:50%;
  top:50%;
  margin:0;
  transform:translate(-50%,-50%);
}

.service:hover .management-gear{
  transform:translate(-50%,-50%) rotate(45deg);
}

/* ===== LOGO GESTION GENERALE V2 ===== */
.management-icon-v2{
  position:relative;
  width:54px;
  height:54px;
  flex:0 0 54px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:none !important;
}

.mgmt-circle{
  position:relative;
  width:42px;
  height:42px;
  box-sizing:border-box;
  border:1px solid rgba(214,178,76,.78);
  border-radius:50%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:4px;
  padding-bottom:10px;
  background:
    radial-gradient(circle at center,
      rgba(214,178,76,.08) 0%,
      rgba(214,178,76,.025) 48%,
      transparent 70%);
  box-shadow:
    inset 0 0 12px rgba(214,178,76,.05),
    0 0 12px rgba(214,178,76,.10);
}

.mgmt-circle::before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(214,178,76,.16);
  border-radius:50%;
}

.mgmt-bar{
  position:relative;
  z-index:2;
  display:block;
  width:4px;
  border:1px solid #d6b24c;
  border-radius:2px 2px 0 0;
  box-sizing:border-box;
  background:rgba(214,178,76,.10);
  transform-origin:center bottom;
}

.mgmt-bar.bar-1{height:8px;}
.mgmt-bar.bar-2{height:14px;}
.mgmt-bar.bar-3{height:20px;}

.service:hover .management-icon-v2 .mgmt-circle{
  border-color:#edcc70;
  box-shadow:
    inset 0 0 15px rgba(214,178,76,.08),
    0 0 16px rgba(214,178,76,.24);
}

.service:hover .management-icon-v2 .mgmt-bar{
  animation:mgmtBars .55s cubic-bezier(.2,.7,.2,1) both;
}

.service:hover .management-icon-v2 .bar-2{animation-delay:.07s;}
.service:hover .management-icon-v2 .bar-3{animation-delay:.14s;}

.mgmt-circle{
  transition:border-color .35s ease,box-shadow .35s ease;
}

@keyframes mgmtBars{
  0%{transform:scaleY(.35);opacity:.35;}
  100%{transform:scaleY(1);opacity:1;}
}

/* ===== LOGO SOLUTIONS ENTREPRISES V2 ===== */
.solutions-icon-v2{
  position:relative;
  width:54px;
  height:54px;
  flex:0 0 54px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.solutions-dashboard{
  position:relative;
  width:44px;
  height:38px;
  box-sizing:border-box;
  border:1px solid rgba(214,178,76,.8);
  border-radius:7px;
  background:
    linear-gradient(145deg,rgba(214,178,76,.07),transparent 55%),
    #0d0d0c;
  overflow:hidden;
  box-shadow:
    inset 0 0 12px rgba(214,178,76,.04),
    0 0 12px rgba(214,178,76,.1);
  transition:border-color .35s ease,box-shadow .35s ease,transform .45s ease;
}

/* Barre supérieure */
.solutions-dots{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:8px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:2px;
  padding-left:5px;
  border-bottom:1px solid rgba(214,178,76,.2);
}

.solutions-dots i{
  display:block;
  width:2px;
  height:2px;
  border-radius:50%;
  background:#d6b24c;
  opacity:.65;
}

/* Zone graphique */
.solutions-chart{
  position:absolute;
  left:7px;
  right:7px;
  bottom:6px;
  height:19px;
  display:flex;
  align-items:flex-end;
  gap:4px;
  border-bottom:1px solid rgba(214,178,76,.25);
}

.solutions-chart .chart-bar{
  display:block;
  width:5px;
  box-sizing:border-box;
  border:1px solid #d6b24c;
  border-bottom:0;
  border-radius:1px 1px 0 0;
  background:rgba(214,178,76,.12);
  transform-origin:center bottom;
}

.solutions-chart .bar-1{height:6px;}
.solutions-chart .bar-2{height:10px;}
.solutions-chart .bar-3{height:15px;}

/* Courbe de croissance */
.chart-growth{
  position:absolute;
  width:17px;
  height:10px;
  right:0;
  top:0;
  border-top:1px solid #e5c35f;
  transform:rotate(-28deg);
  transform-origin:right center;
}

.chart-growth::after{
  content:"";
  position:absolute;
  right:-1px;
  top:-4px;
  width:5px;
  height:5px;
  border-top:1px solid #e5c35f;
  border-right:1px solid #e5c35f;
  transform:rotate(28deg);
}

/* Animation */
.service:hover .solutions-dashboard{
  transform:translateY(-2px);
  border-color:#edcc70;
  box-shadow:
    inset 0 0 14px rgba(214,178,76,.07),
    0 0 16px rgba(214,178,76,.25);
}

.service:hover .solutions-chart .chart-bar{
  animation:solutionsBars .55s cubic-bezier(.2,.7,.2,1) both;
}

.service:hover .solutions-chart .bar-2{animation-delay:.07s;}
.service:hover .solutions-chart .bar-3{animation-delay:.14s;}

.service:hover .chart-growth{
  animation:solutionsGrowth .6s .12s ease both;
}

@keyframes solutionsBars{
  0%{transform:scaleY(.2);opacity:.3;}
  100%{transform:scaleY(1);opacity:1;}
}

@keyframes solutionsGrowth{
  0%{transform:rotate(-28deg) scaleX(.2);opacity:.2;}
  100%{transform:rotate(-28deg) scaleX(1);opacity:1;}
}

/* ===== SOLUTIONS V2 — LOGO STATIQUE ===== */
.solutions-icon-v2,
.solutions-icon-v2 *{
  animation:none !important;
}

.service:hover .solutions-icon-v2 .solutions-dashboard{
  transform:none !important;
  border-color:rgba(214,178,76,.8) !important;
  box-shadow:
    inset 0 0 12px rgba(214,178,76,.04),
    0 0 12px rgba(214,178,76,.1) !important;
}

.service:hover .solutions-icon-v2 .chart-bar{
  animation:none !important;
  transform:none !important;
}

.service:hover .solutions-icon-v2 .chart-growth{
  animation:none !important;
  transform:rotate(-28deg) !important;
}

/* ===== ANIMATION CONTINUE DES 3 LOGOS ===== */

/* --- CREATION WEB --- */
.web-premium-icon .web-screen{
  animation:webScreenFloat 3s ease-in-out infinite;
}

.web-premium-icon .web-content-line.line-1{
  animation:webLinePulse 2.2s ease-in-out infinite;
}

.web-premium-icon .web-content-line.line-2{
  animation:webLinePulse 2.2s .25s ease-in-out infinite;
}

.web-premium-icon .web-content-box{
  animation:webBoxPulse 2.8s ease-in-out infinite;
}

@keyframes webScreenFloat{
  0%,100%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(-2px);
  }
}

@keyframes webLinePulse{
  0%,100%{
    opacity:.35;
    transform:scaleX(.65);
  }
  50%{
    opacity:1;
    transform:scaleX(1);
  }
}

@keyframes webBoxPulse{
  0%,100%{
    opacity:.4;
  }
  50%{
    opacity:1;
    box-shadow:inset 0 0 6px rgba(214,178,76,.18);
  }
}


/* --- GESTION GENERALE --- */
.management-icon-v2 .mgmt-bar{
  animation:managementBars 1.8s ease-in-out infinite;
}

.management-icon-v2 .bar-1{
  animation-delay:0s;
}

.management-icon-v2 .bar-2{
  animation-delay:.18s;
}

.management-icon-v2 .bar-3{
  animation-delay:.36s;
}

.management-icon-v2 .mgmt-circle{
  animation:managementGlow 3s ease-in-out infinite;
}

@keyframes managementBars{
  0%,100%{
    transform:scaleY(.55);
    opacity:.45;
  }
  50%{
    transform:scaleY(1);
    opacity:1;
  }
}

@keyframes managementGlow{
  0%,100%{
    box-shadow:
      inset 0 0 12px rgba(214,178,76,.04),
      0 0 8px rgba(214,178,76,.08);
  }
  50%{
    box-shadow:
      inset 0 0 15px rgba(214,178,76,.09),
      0 0 16px rgba(214,178,76,.24);
  }
}


/* --- SOLUTIONS ENTREPRISES --- */
.solutions-icon-v2 .solutions-dashboard{
  animation:solutionsFloat 3.2s ease-in-out infinite;
}

.solutions-icon-v2 .bar-1{
  animation:solutionBar1 1.7s ease-in-out infinite;
}

.solutions-icon-v2 .bar-2{
  animation:solutionBar2 1.7s .18s ease-in-out infinite;
}

.solutions-icon-v2 .bar-3{
  animation:solutionBar3 1.7s .36s ease-in-out infinite;
}

.solutions-icon-v2 .chart-growth{
  animation:solutionGrowth 2s ease-in-out infinite;
}

@keyframes solutionsFloat{
  0%,100%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(-2px);
  }
}

@keyframes solutionBar1{
  0%,100%{transform:scaleY(.55);}
  50%{transform:scaleY(1);}
}

@keyframes solutionBar2{
  0%,100%{transform:scaleY(.45);}
  50%{transform:scaleY(1);}
}

@keyframes solutionBar3{
  0%,100%{transform:scaleY(.5);}
  50%{transform:scaleY(1);}
}

@keyframes solutionGrowth{
  0%,100%{
    opacity:.35;
    transform:rotate(-28deg) scaleX(.65);
  }
  50%{
    opacity:1;
    transform:rotate(-28deg) scaleX(1);
  }
}

/* ===== REACTIVATION ANIMATION SOLUTIONS ENTREPRISES ===== */

.solutions-icon-v2 .solutions-dashboard{
  animation:solutionsFloat 3.2s ease-in-out infinite !important;
}

.solutions-icon-v2 .chart-bar.bar-1{
  animation:solutionBar1 1.7s ease-in-out infinite !important;
}

.solutions-icon-v2 .chart-bar.bar-2{
  animation:solutionBar2 1.7s .18s ease-in-out infinite !important;
}

.solutions-icon-v2 .chart-bar.bar-3{
  animation:solutionBar3 1.7s .36s ease-in-out infinite !important;
}

.solutions-icon-v2 .chart-growth{
  animation:solutionGrowth 2s ease-in-out infinite !important;
}

/* ===== VIDEO D'OUVERTURE GESTION NSG ===== */
#nsg-intro-video {
  display: block;
  width: min(520px, 90vw);
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border: 0;
  background: transparent;
  filter: none;
}

@media (max-width: 600px) {
  #nsg-intro-video {
    width: min(340px, 90vw);
    max-width: 100%;
    height: auto;
  }
}

/* Harmonisation du fond de l'introduction vidéo */
.nsg-intro {
  background: #000000;
}

/* ===== OPTIMISATION MOBILE CARTES SOLUTIONS NSG ===== */
@media (max-width: 650px) {
  .solutions-services-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    width: 100%;
  }

  .solutions-service-card {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 28px 22px;
    border-radius: 16px;
    overflow: hidden;
  }

  .solutions-service-card > i {
    margin-bottom: 24px;
  }

  .solutions-service-card h3 {
    font-size: 17px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .solutions-service-card p {
    font-size: 14px;
    line-height: 1.7;
    overflow-wrap: anywhere;
  }
}

@media (hover: none), (pointer: coarse) {
  .solutions-service-card:hover {
    transform: none;
  }

  .solutions-service-card:hover > i {
    animation: none;
  }
}

/* ===== CORRECTION TABLEAU DE BORD PAGE SOLUTIONS ===== */
.solutions-hero .solutions-visual > .solutions-dashboard {
  width: min(100%, 560px);
  height: 355px;
  border: 1px solid rgba(201,166,84,.42);
  border-radius: 18px;
  background: linear-gradient(145deg,rgba(23,23,23,.96),rgba(7,7,7,.98));
  box-shadow: 0 35px 90px rgba(0,0,0,.65),
              0 0 55px rgba(201,166,84,.08);
  transform: rotateY(-7deg) rotateX(3deg);
  animation: solutionsDashboardFloat 5s ease-in-out infinite;
}

@media (max-width: 900px) {
  .solutions-hero .solutions-visual > .solutions-dashboard {
    width: 100%;
    max-width: 560px;
    height: 310px;
    transform: none;
  }
}

@media (max-width: 600px) {
  .solutions-hero .solutions-visual {
    min-height: 290px;
  }

  .solutions-hero .solutions-visual > .solutions-dashboard {
    height: 245px;
  }
}

/* ===== DIAGRAMME SOLUTIONS NSG PLUS GRAND ===== */
.solutions-hero .solutions-chart {
  height: 145px;
  box-sizing: border-box;
}

/* ===== GRAND DIAGRAMME ANIME - MOBILE ET ORDINATEUR ===== */
.solutions-hero .solutions-chart {
  height: 175px !important;
  box-sizing: border-box;
  align-items: flex-end;
}

.solutions-hero .solutions-chart i:nth-child(1) { height: 55% !important; }
.solutions-hero .solutions-chart i:nth-child(2) { height: 72% !important; }
.solutions-hero .solutions-chart i:nth-child(3) { height: 65% !important; }
.solutions-hero .solutions-chart i:nth-child(4) { height: 88% !important; }
.solutions-hero .solutions-chart i:nth-child(5) { height: 100% !important; }

/* ===== AJUSTEMENT DIAGRAMME MOBILE NSG ===== */
@media (max-width: 650px) {
  .solutions-hero .solutions-chart {
    height: 160px !important;
  }
}

/* ===== CORRECTION HAUTEUR BARRES MOBILE ===== */
@media (max-width: 650px) {
  .solutions-hero .solutions-chart {
    height: 105px !important;
  }

  .solutions-hero .solutions-chart i:nth-child(1) { height: 45% !important; }
  .solutions-hero .solutions-chart i:nth-child(2) { height: 60% !important; }
  .solutions-hero .solutions-chart i:nth-child(3) { height: 55% !important; }
  .solutions-hero .solutions-chart i:nth-child(4) { height: 75% !important; }
  .solutions-hero .solutions-chart i:nth-child(5) { height: 90% !important; }
}

/* ===== MENU HAMBURGER PREMIUM GESTION NSG ===== */
@media (max-width: 900px) {

  .nav .menu {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 8px;
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(201,166,84,.3);
    border-radius: 10px;
    cursor: pointer;
    z-index: 3;
  }

  .nav .menu span {
    display: block;
    width: 23px;
    height: 2px;
    flex-shrink: 0;
    border-radius: 4px;
    background: #d6b75f;
    transition: transform .35s ease, opacity .25s ease;
  }

  .nav.open .menu span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .nav.open .menu span:nth-child(2) {
    opacity: 0;
  }

  .nav.open .menu span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .nav > nav {
    display: flex;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 12px 5% 22px;
    background: linear-gradient(160deg,#14110b,#050505);
    border-bottom: 1px solid rgba(201,166,84,.35);
    box-shadow: 0 25px 50px rgba(0,0,0,.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease,
                visibility .35s ease;
  }

  .nav.open > nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav > nav a {
    display: block;
    padding: 17px 14px;
    color: #eee5d5;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid rgba(201,166,84,.12);
    transition: color .25s ease, padding-left .3s ease;
  }

  .nav > nav a:hover,
  .nav > nav a:focus-visible {
    color: #e8bb63;
    padding-left: 22px;
  }

  .nav > nav a:last-child {
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav .menu span,
  .nav > nav,
  .nav > nav a {
    transition: none;
  }
}


/* ===== HERO ANIMÉ CRÉATION WEB NSG ===== */
.web-page-hero-inner{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  column-gap:34px;
  align-items:center;
}
.web-page-hero-inner > .web-page-eyebrow,
.web-page-hero-inner > h1,
.web-page-hero-inner > .web-page-lead,
.web-page-hero-inner > .web-page-actions{
  grid-column:1;
}
.nsg-web-showcase{
  grid-column:2;
  grid-row:1 / span 4;
  position:relative;
  min-height:360px;
  display:flex;
  justify-content:center;
  align-items:center;
  isolation:isolate;
}
.nsg-web-showcase::before{
  content:"";
  position:absolute;
  width:90%;
  aspect-ratio:1;
  background:radial-gradient(circle,#a77a2a22,transparent 68%);
  z-index:-1;
}
.nsg-web-orbit{
  position:absolute;
  width:85%;
  max-width:390px;
  aspect-ratio:1;
  border:1px dashed #b88a3540;
  border-radius:50%;
  animation:nsgWebRotate 28s linear infinite;
}
.nsg-web-orbit::before{
  content:"";
  position:absolute;
  top:12%;
  left:14%;
  width:7px;
  height:7px;
  background:#e5b755;
  border-radius:50%;
  box-shadow:0 0 18px #d6a449;
}
.nsg-web-browser{
  width:83%;
  max-width:380px;
  aspect-ratio:1.5;
  position:relative;
  z-index:2;
  overflow:hidden;
  border:1px solid #b78a42;
  border-radius:12px;
  background:#0b0b0c;
  box-shadow:0 0 45px #bd873226,0 20px 55px #0009;
  animation:nsgWebFloat 5s ease-in-out infinite;
}
.nsg-web-browser-top{
  height:28px;
  display:flex;
  align-items:center;
  gap:5px;
  padding:0 11px;
  background:#15120e;
  border-bottom:1px solid #8e6b3266;
}
.nsg-web-browser-top > span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#c89c51;
}
.nsg-web-browser-top > div{
  margin-left:12px;
  padding:3px 12px;
  border:1px solid #5d482c;
  border-radius:4px;
  color:#c8a66d;
  font-size:8px;
}
.nsg-web-browser-body{padding:17px}
.nsg-web-mini-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
}
.nsg-web-mini-nav strong{
  font-size:13px;
  letter-spacing:2px;
  color:#e6b65b;
}
.nsg-web-mini-nav > div{display:flex;gap:6px}
.nsg-web-mini-nav i{
  display:block;
  width:17px;
  height:2px;
  background:#8a7757;
}
.nsg-web-mini-layout{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:12px;
  align-items:center;
}
.nsg-web-mini-copy h3{
  margin:0;
  color:#fff4df;
  font-size:clamp(12px,1.3vw,19px);
  line-height:1.2;
}
.nsg-web-mini-copy h3 em{
  color:#d8a449;
  font-style:normal;
}
.nsg-web-mini-line{
  width:90%;
  height:3px;
  margin-top:9px;
  background:#7c6d57;
  border-radius:5px;
}
.nsg-web-mini-line.short{width:65%;opacity:.5}
.nsg-web-mini-button{
  display:inline-block;
  margin-top:15px;
  padding:7px 10px;
  border-radius:3px;
  background:linear-gradient(100deg,#b98532,#f2c96c);
  color:#130d03;
  font-size:8px;
  font-weight:800;
}
.nsg-web-mini-art{
  min-height:125px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  border:1px solid #b68c4266;
  border-radius:7px;
  color:#e3b65d;
  background:linear-gradient(140deg,#302515,#0b0d12);
}
.nsg-web-mini-art::before{
  content:"";
  position:absolute;
  width:95px;
  height:95px;
  border:1px solid #c49b5155;
  border-radius:50%;
  animation:nsgWebRotate 14s linear infinite;
}
.nsg-web-mini-art svg{
  width:65px;
  height:65px;
  filter:drop-shadow(0 0 9px #c59652);
  animation:nsgWebPulse 3s ease-in-out infinite;
}
.nsg-web-floating-tag{
  position:absolute;
  z-index:3;
  padding:10px 12px;
  border:1px solid #bc8c49;
  border-radius:8px;
  background:#0d0b09ed;
  color:#eac277;
  font-size:10px;
  font-weight:800;
  letter-spacing:1px;
  box-shadow:0 0 20px #bd8d3628;
}
.nsg-web-floating-tag.tag-design{
  top:14%;
  right:0;
  animation:nsgWebFloat 4s ease-in-out infinite;
}
.nsg-web-floating-tag.tag-responsive{
  bottom:13%;
  left:0;
  animation:nsgWebFloat 4.8s ease-in-out infinite reverse;
}
.nsg-web-particle{
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#d8a74f;
  box-shadow:0 0 12px #d8a74f;
  animation:nsgWebSpark 4s ease-in-out infinite;
}
.nsg-web-particle.p1{top:17%;left:17%}
.nsg-web-particle.p2{top:78%;right:13%;animation-delay:1s}
.nsg-web-particle.p3{top:28%;right:18%;animation-delay:2s}
@keyframes nsgWebRotate{to{transform:rotate(360deg)}}
@keyframes nsgWebFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
@keyframes nsgWebPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}
@keyframes nsgWebSpark{
  0%,100%{opacity:.1;transform:scale(.5)}
  50%{opacity:1;transform:scale(1.5)}
}
@media(max-width:900px){
  .web-page-hero-inner{display:flex;flex-direction:column;align-items:stretch}
  .nsg-web-showcase{width:100%;min-height:310px;margin-top:24px}
  .nsg-web-browser{width:78%}
  .nsg-web-floating-tag{font-size:9px}
  .nsg-web-mini-copy h3{font-size:clamp(12px,3vw,18px)}
}
@media(max-width:420px){
  .nsg-web-showcase{min-height:260px}
  .nsg-web-browser{width:85%}
  .nsg-web-browser-body{padding:10px}
  .nsg-web-mini-nav{margin-bottom:10px}
  .nsg-web-mini-art{min-height:90px}
  .nsg-web-mini-art svg{width:45px;height:45px}
  .nsg-web-floating-tag{padding:7px;font-size:7px}
  .nsg-web-mini-button{font-size:6px;padding:5px}
}
@media(prefers-reduced-motion:reduce){
  .nsg-web-showcase *{animation:none!important}
}

/* ===== AJUSTEMENT FINAL HERO WEB - PC SEULEMENT ===== */
@media (min-width: 901px) {
  .web-page-hero-inner {
    width: min(94%, 1600px);
    max-width: 1600px;
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 65px;
  }

  .nsg-web-showcase {
    width: 100%;
    min-height: 420px;
    transform: translateX(35px) scale(1.12);
    transform-origin: center;
  }

  .nsg-web-browser {
    width: 90%;
    max-width: 460px;
  }

  .nsg-web-floating-tag.tag-design {
    right: 0;
  }

  .nsg-web-floating-tag.tag-responsive {
    left: 0;
  }
}