.hero-section {background-color: var(--rouge);color: white;padding: 0;min-height:calc(100vh - var(--hheaderDesktop));display: flex;flex-direction: column;}
.hero-section .container-fluid {padding-left:var(--margeDesktop);padding-right:var(--margeDesktop);padding-top: 45px;min-height: calc(100vh - var(--hheaderDesktop));flex: 1;display: flex;flex-direction: column;}
.hero-section .container-fluid .row {border-top: 1px solid rgba(246,245,243,.2);flex: 1;height: 50%;display: flex;align-items: flex-end;max-height: 42vh;}
.hero-section .container-fluid .c_img{height:100%;max-height: 42vh;display: flex;justify-content: end;}
.hero-section .container-fluid .c_img img{height:100%;max-height: 35vh;border-radius:12px;}
.hero-section h1 {font-size: 7rem;font-weight: 500;font-family: 'Figtree', sans-serif;line-height:1.04;}
.c_animChevron {position: absolute;bottom: 20px;right: 20px;justify-content: flex-end;display: flex;}
.animChevron {display: flex;flex-wrap: wrap;width: 40px;height: 140px;list-style: none;padding: 0;margin: 0;overflow: hidden;position: relative;}
.animChevron li {width: 20px;height: 20px;position: absolute;display: flex;justify-content: center;align-items: center;transition: top 0.7s linear, left 0.7s linear;}
.listChevron{display: flex;flex-wrap: wrap;flex-direction: column;width: 20px;height:60px;list-style: none;padding: 0;margin: 0;overflow: hidden;position: relative;}
.listChevron li {width:20px;height:20px;display:flex;justify-content:center;align-items:center;}

.hero-network {
  
  background:
    radial-gradient(circle at 76% 48%, rgba(255, 211, 205, .24), transparent 28%),
    linear-gradient(135deg, #d81636 0%, #c71334 55%, #af0c2a 100%);
  color: var(--hero-cream);
  min-height: calc(100vh - var(--hheaderDesktop));
  overflow: hidden;
  position: relative;
}
.hero-network::before {
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(to right, transparent, black 55%, black);
  pointer-events: none;
  position: absolute;
}
.hero-network__glow {border: 1px solid rgba(255,255,255,.12);border-radius: 50%;position: absolute;}
.hero-network__glow--one {height: 520px;right: -210px;top: -260px;width: 520px;}
.hero-network__glow--two {bottom: -350px;height: 700px;left: 30%;width: 700px;}
.hero-network__inner {align-items: center;display: grid;gap: clamp(30px, 4vw, 80px);grid-template-columns: minmax(320px, .85fr) minmax(600px, 1.15fr);margin: 0 auto;max-width: 1800px;min-height: calc(100vh - var(--hheaderDesktop));padding: 55px var(--margeDesktop) 80px;position: relative;z-index: 1;}
.hero-network__intro {max-width: 680px;}
.hero-network__eyebrow {align-items: center;color: rgba(255,255,255,.8);display: flex;font-size: 13px;gap: 12px;letter-spacing: .12em;margin-bottom: 28px;text-transform: uppercase;}
.hero-network__eyebrow span {background: white;height: 2px;width: 34px;}
.hero-network h1 {color: white;font-size: clamp(4rem, 6vw, 7.5rem);font-weight: 500;letter-spacing: -.055em;line-height: .92;margin: 0 0 30px;max-width: 760px;text-transform: uppercase;}
.hero-network__lead {color: rgba(255,255,255,.78);font-size: clamp(1.05rem, 1.3vw, 1.35rem);line-height: 1.45;max-width: 590px;}
.hero-network__actions {display: flex;flex-wrap: wrap;gap: 14px;margin-top: 36px;}
.hero-network__button {align-items: center;border: 1px solid rgba(255,255,255,.65);border-radius: 6px;color: white;display: inline-flex;font-size: 14px;font-weight: 600;gap: 34px;justify-content: space-between;min-width: 215px;padding: 16px 20px;text-decoration: none;transition: background .25s ease, color .25s ease, transform .25s ease;}
.hero-network__button:hover {background: white;color: var(--rouge);transform: translateY(-3px);}
.hero-network__button--light {background: white;color: var(--rouge);}
.hero-network__button--light:hover {background: var(--hero-deep-red);color: white;}
.hero-network__proofs {display: flex;gap: 0;list-style: none;margin: 52px 0 0;padding: 0;}
.hero-network__proofs li {border-left: 1px solid rgba(255,255,255,.25);display: flex;flex-direction: column;gap: 2px;padding: 0 28px;}
.hero-network__proofs li:first-child {border-left: 0;padding-left: 0;}
.hero-network__proofs strong {font-size: 15px;font-weight: 600;}
.hero-network__proofs span {color: rgba(255,255,255,.62);font-size: 12px;}

.hero-network__map {aspect-ratio: 800 / 620;max-width: 880px;position: relative;width: 100%;}
.hero-network__connections {inset: 0;overflow: visible;position: absolute;width: 100%;}
.network-line {animation: networkFlow 3.2s linear infinite;fill: none;stroke: rgba(255,255,255,.55);stroke-dasharray: 3 11;stroke-linecap: round;stroke-width: 1.5;}
.network-line--reverse {animation-direction: reverse;animation-duration: 3.8s;}
.network-line--slow {animation-duration: 4.5s;}
.network-pulse {animation: networkPulse 2.4s ease-out infinite;fill: white;filter: drop-shadow(0 0 7px white);}
.network-pulse--delay {animation-delay: .8s;}
.network-pulse--delay-two {animation-delay: 1.6s;}
.network-node {align-items: center;animation: nodeFloat 5s ease-in-out infinite;background: rgba(255,255,255,.11);border: 1px solid rgba(255,255,255,.38);border-radius: 9px;box-shadow: 0 18px 35px rgba(92,0,18,.16);display: flex;gap: 12px;min-height: 76px;padding: 13px 16px;position: absolute;width: 205px;}
.network-node:nth-of-type(even) {animation-delay: -2.5s;}
.network-node__icon {align-items: center;border: 1px solid rgba(255,255,255,.3);border-radius: 6px;display: flex;font-family: monospace;font-size: 16px;height: 38px;justify-content: center;width: 38px;}
.network-node span:last-child {display: flex;flex-direction: column;gap: 3px;}
.network-node strong {font-size: 14px;font-weight: 600;}
.network-node small {color: rgba(255,255,255,.62);font-size: 11px;}
.network-node--strategy {left: 10px;top: 65px;}
.network-node--design {right: 10px;top: 65px;}
.network-node--development {left: -20px;top: 262px;}
.network-node--seo {right: -20px;top: 262px;}
.network-node--data {bottom: 30px;left: 10px;}
.network-node--launch {bottom: 30px;right: 10px;}
.network-core {background: rgba(113,4,27,.32);border: 1px solid rgba(255,255,255,.5);border-radius: 12px;box-shadow: 0 25px 70px rgba(94,0,20,.32), 0 0 45px rgba(255,255,255,.12);left: 50%;overflow: hidden;padding: 13px;position: absolute;top: 50%;transform: translate(-50%, -50%);width: 250px;}
.network-core__bar {align-items: center;display: flex;gap: 5px;height: 24px;}
.network-core__bar i {background: rgba(255,255,255,.55);border-radius: 50%;height: 5px;width: 5px;}
.network-core__bar span {color: rgba(255,255,255,.5);font-family: monospace;font-size: 9px;margin-left: auto;}
.network-core__screen {border-radius: 7px;height: 165px;overflow: hidden;position: relative;}
.network-core__screen img,.network-core__screen video {height: 100%;object-fit: cover;width: 100%;}
.network-core__screen::after {background: linear-gradient(to top, rgba(84,0,18,.88), transparent 75%);content: "";inset: 0;position: absolute;}
.network-core__overlay {bottom: 14px;display: flex;flex-direction: column;left: 14px;position: absolute;z-index: 1;}
.network-core__overlay span {color: rgba(255,255,255,.65);font-size: 9px;text-transform: uppercase;}
.network-core__overlay strong {font-size: 14px;font-weight: 600;}
.network-core__status {align-items: center;color: rgba(255,255,255,.68);display: flex;font-size: 10px;gap: 6px;padding: 11px 2px 0;}
.network-core__status span {animation: statusPulse 1.6s ease-in-out infinite;background: #fff;border-radius: 50%;box-shadow: 0 0 8px white;height: 6px;width: 6px;}
.hero-network__scroll {align-items: center;bottom: 24px;color: rgba(255,255,255,.65);display: flex;font-size: 10px;gap: 10px;left: var(--margeDesktop);letter-spacing: .12em;position: absolute;text-decoration: none;text-transform: uppercase;z-index: 2;}
.hero-network__scroll i {animation: scrollHint 1.4s ease-in-out infinite;font-size: 16px;font-style: normal;}
@keyframes networkFlow {to {stroke-dashoffset: -56;}}
@keyframes networkPulse {0%, 100% {opacity: 0;r: 3;}45% {opacity: 1;r: 5;}80% {opacity: 0;r: 12;}}
@keyframes nodeFloat {50% {transform: translateY(-7px);}}
@keyframes statusPulse {50% {opacity: .3;transform: scale(.7);}}
@keyframes scrollHint {50% {transform: translateY(5px);}}

section .big{font-size:64px;line-height:1.06;font-weight:600;color:var(--black);}
section .big span{color:var(--rouge);}
section p.bigless{font-size:48px;line-height:1.12;font-weight:500;color:var(--black);}
section p.bigless span{color:var(--rouge);}
section p{color:var(--darkgrey);font-size:1.125rem;line-height:1.3;}

.edito.wBg {background-image: url(../../img/design/pattern-edito.webp);background-position:top right ;}
.edito .container-fluid{background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);}
.edito h2{font-size:64px;line-height:1.06;font-weight:600;color:var(--rouge);margin:0;padding:0;}


.services {background:var(--grey);}
.services .container-fluid{padding-left:var(--margeDesktop);padding-right:var(--margeDesktop);}
.services .c_contenu{display:flex;flex-direction:column;justify-content:center;}
.services .c_contenu h2{}
.services .c_contenu h2 span{color:var(--greyDeux)}

.services .cards {position:relative;display: grid;gap: 80px 0;grid-template-rows: repeat(5,600px);list-style: none;margin: 0 auto 80px;padding: 0;width: 100%;}
.services .cards .card{position: sticky;top: 100px;border: unset;background-color: unset;border-radius:12px;overflow: hidden;}
.services .cards .card.site-internet{background-color:var(--orange);}
.services .cards .card.plateforme{background-color:var(--jaune);}
.services .cards .card.referencement{background-color:var(--bleu);}
.services .cards .card.site-immobilier{background-color:var(--vert-clair);}
.services .cards .card:not(:first-child) .c_contenu{align-items: center;gap:1.5rem;}
.services .cards .card:not(:first-child) .c_contenu p,
.services .cards .card:not(:first-child) .c_contenu h2{text-align: center;}

.services .cards .card.fwhite h2.big,
.services .cards .card.fwhite p{color:white;}
.services .cards .card.fwhite .btn-contact{background-color:white;}
.services .cards .card.fblack .btn-contact{background-color:var(--black);}
.services .cards .card.site-internet .btn-contact{color:var(--orange);}
.services .cards .card.plateforme .btn-contact{color:var(--jaune);}
.services .cards .card.referencement .btn-contact{color:var(--bleu);}
.services .cards .card.site-immobilier .btn-contact{color:var(--vert-clair);}

.services .listChevron {position: absolute;bottom: 2.5rem;right: 1rem;}

.services .pagination {display:flex;width:1rem;flex-direction: column;gap:.75rem;position:absolute;bottom:1.5rem;right:2rem;z-index: 1;}
.services .pagination button{width:1rem;height:1rem;border:1px solid white;border-radius:50%;background:unset;}
.services .pagination button.active{background:white}

.services .cards .card .r_symbol{height:33%;}
.services .cards .card .r_visuel{height:67%;}
.services .cards .card .symbol{display:flex;justify-content:center;align-items:center;height: 100%;}
.services .cards .card.site-internet .symbol{background:var(--bordeaux);}
.services .cards .card.plateforme .symbol{background:var(--jaune-moutarde)}
.services .cards .card.referencement .symbol{background:var(--bleu-clair);}
.services .cards .card.site-immobilier .symbol{background:var(--vert-fonce);}

.services .cards .card .bg_visuel{}
.services .cards .card.site-internet .bg_visuel{background:url(/img/design/site-internet.png) lightgray 50% / cover no-repeat;}
.services .cards .card.plateforme .bg_visuel{background:url(/img/design/plateforme-web.png) lightgray 50% / cover no-repeat;}
.services .cards .card.referencement .bg_visuel{background:url(/img/design/referencement.png) lightgray 50% / cover no-repeat;}
.services .cards .card.site-immobilier .bg_visuel{background:url(/img/design/site-immobilier.png) lightgray 50% / cover no-repeat;}

.services .cards .card.site-internet .bg_illu{background:url(/img/design/deco-site-internet.webp) lightgray 50% / cover no-repeat;}
.services .cards .card.plateforme .bg_illu{background:url(/img/design/deco-plateforme.webp) lightgray 50% / cover no-repeat;}
.services .cards .card.referencement .bg_illu{background:url(/img/design/deco-referencement.webp) lightgray 50% / cover no-repeat;}
.services .cards .card.site-immobilier .bg_illu{background:url(/img/design/deco-site-immobilier.webp) lightgray 50% / cover no-repeat;}

.services .c_visuel {position: relative;width: 100%;aspect-ratio: 1/1;display: flex;justify-content: center;align-items: center;}
.services .c_visuel .svg1,
.services .c_visuel .svg2,
.services .c_visuel .svg3,
.services .c_visuel .svg4 {position: absolute;width: 40%;height: 80%;opacity: 0;transform: rotate(0deg);animation: svgSequence 8s infinite;}
.services .c_visuel .svg2,
.services .c_visuel .svg3 {width: 64%;}
/* Décalage parfaitement séquentiel */
.services .c_visuel .svg1 { animation-delay: 0s; }
.services .c_visuel .svg2 { animation-delay: 2s; }
.services .c_visuel .svg3 { animation-delay: 4s; }
.services .c_visuel .svg4 { animation-delay: 6s; }
  
  @keyframes svgSequence {

    /* invisible */
  0% { opacity: 0; }

  /* apparition */
  5% { opacity: 1; }

  /* visible */
  15% { opacity: 1; transform: rotate(0deg); }

  /* rotation */
  22% { transform: rotate(90deg); }

  /* disparition */
  25% { opacity: 0; }

  /* pause (rien à l’écran) */
  100% { opacity: 0; }
}


.agence .c_pattern{position:relative;background-image:url(../../img/design/bg-agence.webp);background-position:center center;border-radius: 12px;padding: 5rem 6rem;}
.agence .c_pattern::before{content:"";position:absolute;width:100%;height:100%;top:0;left:0;background: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%);border-radius: 12px;}
.agence .row{z-index: 1;position: relative;}
.agence .titre {display: flex;gap: 2rem;padding-bottom: 4rem;margin-bottom: 8rem;border-bottom: 1px solid rgba(255,255,255,0.5);align-items: center;}
.agence .titre h2 {color: var(--grey);font-size: 64px;font-style: normal;font-weight: 500;line-height: 68px;}
.agence p.bigless {color: #FFF;margin-bottom: 2rem;}
.c_symbol {position: relative;display: flex;justify-content: center;align-items: center;border-radius:8px;overflow:hidden;width:100%;max-width:290px;height:auto;aspect-ratio:1;}
.c_symbol svg{position: relative;z-index: 2;}
.c_symbol .overlay-flou{position: absolute;top: 0;left: 0;width: 100%;height: 100%;backdrop-filter: blur(40px);background: rgba(255, 255, 255, 0.2);z-index: 1;}

.projets h2.section-title {font-size: 64px;font-weight: 600;line-height: 1.06;}
.projets h2.section-title span{color:var(--rouge);}
.projets .project-card{box-shadow:unset;text-decoration: none;}
.projets .project-card img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:12px;}
.projets p.refClient {color: var(--rouge);font-size: 1rem;font-weight: 600;line-height: 1.4;}
.projets .card-title {color: var(--black);font-size: 2rem;font-weight: 500;line-height: 1.1;}

.logos .logo-marquee {--logo-card-width: clamp(260px, 25vw, 420px);--logo-gap: 24px;overflow: hidden;width: 100%;}
.logos .logo-marquee__track {display: flex;width: 100%;}
.logos .logo-marquee__group {display: flex;gap: var(--logo-gap);list-style: none;margin: 0;padding: 0;will-change: transform;}
.logos .logo-marquee__slide {background: var(--grey);display: flex;justify-content: center;align-items: center;flex: 0 0 var(--logo-card-width);height:247px;overflow: hidden;padding: 40px 56px;}
.logos .logo-marquee__slide a {display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;}
.logos .logo-marquee__slide img{display:block;width:100%;height:100%;max-width:180px;max-height:86px;object-fit:contain;filter: grayscale(100%);opacity: 0.7;}

.labo {background: var(--grey);}
.labo .titre {display: flex;gap: 2rem;padding-bottom: 2rem;margin-bottom: 2rem;align-items: center;}
.labo .titre h2 {color: var(--black);font-size: 64px;font-style: normal;font-weight: 500;line-height: 68px;}
.labo .intro {display: flex;flex-direction: column;justify-content: space-between;}
.labo .btn-contact{max-width:240px;}
.labo .splide a{text-decoration: none;}
.labo .splide .visuel{aspect-ratio: 9/8;width:100%;height:auto;}
.labo .splide .visuel img {  object-fit: cover;width: 100%;height: 100%;border-radius: 8px;}
.labo .splide .title {font-size: 1.5rem;font-weight: 500;line-height: 1.25;}
.labo .splide__arrows {position: absolute;bottom: 0;display: flex;gap: 8px;}.splide__arrow {width: 24px;height: 24px;display: inline-flex;left: 0;position: relative;border-radius: 6px;background: rgba(184, 180, 173, 0.20);}.splide__arrow svg{height: 1em;width: 1em;}
.labo .splide .cat {font-size:12px;font-weight:700;line-height:1.66;text-transform:uppercase;color:var(--midgrey);}
.faq {background-image: url(../../img/design/pattern-faq.webp);background-position:top right;background-color: var(--rouge);}
.faq .container-fluid{background: linear-gradient(to right, rgba(216, 22, 16, 0) 0%, rgba(216, 22, 16, 1) 100%);}
.faq .titre {display: flex;gap: 2rem;align-items: center;}
.faq .titre h2 {color: white;font-size: 64px;font-style: normal;font-weight: 500;line-height: 68px;}

.accordion-item {
    color: white;
    background-color: transparent;
    border: none;border-bottom:1px solid rgba(246,245,243,0.2);padding-bottom:40px;margin-bottom:40px;
  }
  .accordion-button {
    background: transparent;
    color: var(--grey);
    padding: 0;
    font-size: 32px;
    line-height: 1.12;
  }
  .accordion-button:not(.collapsed){color:unset;background-color: unset;box-shadow:unset;}
  .accordion-button:focus, .accordion-button:hover{box-shadow:unset;border-color:unset;}
  .accordion-button::after{background-image:url(../../img/design/plusFaq.svg);background-size:24px 24px;width:24px;height:24px;}
  .accordion-button:not(.collapsed)::after{background-image:url(../../img/design/plusFaq.svg);}
@media (max-width:1600px) {
    .hero-section h1 {font-size: 5rem;}
    .hero-network__inner {gap: 20px;grid-template-columns: minmax(320px, .8fr) minmax(560px, 1.2fr);}
    .hero-network__map {transform: scale(.92);transform-origin: center right;}
}
@media (max-width:1300px) {
    .hero-network__inner {grid-template-columns: minmax(300px, .8fr) minmax(500px, 1.2fr);}
    .hero-network__map {transform: scale(.82);transform-origin: center right;width: 120%;}
    .hero-network h1 {font-size: clamp(3.6rem, 6vw, 5.5rem);}
    .hero-network__proofs li {padding: 0 18px;}
}
@media (max-width:991.98px) {
    .hero-network {min-height: auto;}
    .hero-network__inner {display: flex;flex-direction: column;min-height: auto;padding: 70px var(--margeMobile) 100px;}
    .hero-network__intro {max-width: 720px;width: 100%;}
    .hero-network h1 {font-size: clamp(2.75rem, 11vw, 6rem);}
    .hero-network__map {margin: 20px auto 0;max-width: 760px;transform: none;width: 100%;}
    .hero-network__scroll {left: var(--margeMobile);}
    .edito h2, section .big, .projets h2.section-title {font-size: clamp(2.5rem, 6vw, 4rem);}
    .services .container-fluid{padding-left:var(--margeMobile);padding-right:var(--margeMobile);}
    .bg_visuel {aspect-ratio: 2 / 1;}
    .services .cards .card .r_symbol{display:none;}
    .services .cards .card .r_visuel{height:100%;}
    .services .cards .card{top:1rem;}
    .services .cards{grid-template-rows: repeat(5, calc(100vh - 5rem));}
    .agence .c_pattern {padding: 2rem;}
    .agence .titre{padding-bottom: 1rem;margin-bottom: 3rem;}
    section p.bigless {font-size: 2.5rem;}
}
@media (max-width:700px) {
    .hero-network__inner {padding-top: 45px;}
    .hero-network__lead {font-size: 1rem;}
    .hero-network__actions {align-items: stretch;flex-direction: column;}
    .hero-network__button {width: 100%;}
    .hero-network__proofs {justify-content: space-between;margin-top: 34px;}
    .hero-network__proofs li {padding: 0 10px;}
    .hero-network__proofs strong {font-size: 12px;}
    .hero-network__proofs span {font-size: 10px;}
    .hero-network__map {aspect-ratio: auto;display: grid;gap: 10px;grid-template-columns: 1fr 1fr;margin-top: 35px;}
    .hero-network__connections {display: none;}
    .network-node {animation: none;min-height: 68px;padding: 10px;position: static;width: auto;}
    .network-node__icon {font-size: 13px;height: 32px;min-width: 32px;width: 32px;}
    .network-node strong {font-size: 12px;}
    .network-node small {font-size: 9px;}
    .network-core {grid-column: 1 / -1;grid-row: 1;margin-bottom: 10px;position: relative;left: auto;top: auto;transform: none;width: 100%;}
    .network-core__screen {height: 210px;}
}
@media (prefers-reduced-motion: reduce) {
    .network-line,.network-pulse,.network-node,.network-core__status span,.hero-network__scroll i {animation: none;}
}