/* Google Fonts removed — local @font-face used instead */
/* ===================================
   BIUX DESIGN SYSTEM — v2 clean
   =================================== */

/* === FONTS === */
@font-face{font-family:'Outfit';src:url('../fonts/Outfit-Thin.woff') format('woff');font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:'Outfit';src:url('../fonts/Outfit-ExtraLight.woff') format('woff');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Outfit';src:url('../fonts/Outfit-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Outfit';src:url('../fonts/Outfit-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Outfit';src:url('../fonts/Outfit-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/PlusJakartaSans-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/PlusJakartaSans-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('../fonts/EBGaramond-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

:root {
    --bg: #00030f;
    --bg-light: #0a0d18;
    --bg-card: #0f1220;
    --blue: #206dff;
    --blue-hover: #1a5ad4;
    --white: #ffffff;
    --text: rgba(255,255,255,0.8);
    --text-dark: #555;
    --text-muted: #888;
    --border: rgba(255,255,255,0.1);
    --font: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Plus Jakarta Sans', 'Outfit', sans-serif;
    --font-serif: 'EB Garamond', Georgia, serif;
    --max-w: 1280px;
    --pad: 2rem;
    --radius: 0.25rem;
    --radius-lg: 0.375rem;
    --ease: 0.3s cubic-bezier(0.33,1,0.68,1);
}

/* === RESET === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font);background:var(--bg);color:var(--white);line-height:1.5;overflow-x:clip;font-weight:300}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{background:none;border:none;cursor:pointer;font:inherit;color:inherit}

/* === TYPO === */
.heading-style-h1{font-family:'Plus Jakarta Sans',sans-serif;font-size:3.6rem;font-weight:400;line-height:1.2;letter-spacing:-0.01em}
.heading-style-h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:2.2rem;font-weight:400;line-height:1.2}
.heading-style-h3{font-size:clamp(1rem,2vw,1.375rem);font-weight:500;line-height:1.3}
.text-size-regular{font-family:'Outfit',sans-serif;font-size:1.0rem;line-height:1.5;color:var(--text);font-weight:300}
.text-size-medium{font-size:1.0625rem;line-height:1.5;font-weight:300}
.text-size-small{font-size:0.875rem;line-height:1.5;font-weight:300}
.text-style-allcaps{text-transform:uppercase;letter-spacing:0.05em;font-size:0.8125rem}
.text-weight-bold{font-weight:700}
.text-align-center{text-align:center}
.text-span{color:var(--blue);font-family:var(--font-serif);font-style:italic}
.is-dark{color:var(--text-dark)!important}
.is-white{color:var(--white)!important}
.is-blue{color:var(--blue)!important}

/* === LAYOUT === */
.page-wrapper{min-height:100vh}
.padding-global{padding-left:var(--pad);padding-right:var(--pad)}
.container-large{max-width:var(--max-w);margin:0 auto;width:100%}
.padding-section-medium{padding:5rem 0}
.padding-section-small{padding:3rem 0}
.padding-section-medium-top{padding:5rem 0 3rem}
.max-width-large{max-width:48rem}
.max-width-medium{max-width:38rem;margin:0 auto}
.max-width-mediumplus{max-width:42rem}

/* === BUTTONS === */
.button{display:inline-flex;align-items:center;justify-content:center;padding:0.45rem 1.5rem;background:var(--blue);color:#fff;font-size:1rem;font-weight:300;border-radius:0.25rem;overflow:hidden;transition:all 0.4s;white-space:nowrap}
.button:hover{background:var(--blue-hover)}
.button-texte-wrap{display:flex;flex-direction:column;overflow:hidden;height:1.4em}
.button-texte{transition:transform var(--ease)}
.button:hover .button-texte{transform:translateY(-100%)}
.button.is-secondary{background:transparent;border:1px solid var(--border)}
.button.is-secondary:hover{border-color:var(--white)}
.button.is-third{background:#eef2ff;color:#00030f}
.button.is-third:hover{background:#d9e6fe}

/* ===================================
   NAVBAR
   =================================== */
.navigation-wrap{position:fixed;top:0;left:0;right:0;z-index:1000;padding:0.75rem 0;transition:background var(--ease)}
.admin-bar .navigation-wrap{top:32px}
@media(max-width:782px){.admin-bar .navigation-wrap{top:46px}}
.navigation-wrap.scrolled,.navigation-wrap:hover{background:#00030f;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.navbar{display:flex}
.navbar-full{width:100%;padding:0 var(--pad)}
.navbar-container{display:flex;align-items:center;justify-content:space-between;max-width:var(--max-w);margin:0 auto;padding:0}
.navbar-logo{display:flex;align-items:center}
.logo-img,.flowbase-logo{height:1.85rem;width:auto}
.nav-menu{display:flex;align-items:center;gap:0.25rem}
.navbar-link{font-family:'Outfit',sans-serif;padding:0.5rem 0.85rem;font-size:1.05rem;font-weight:300;color:#fff;cursor:pointer;transition:opacity var(--ease)}
.navbar-link:hover{opacity:0.7}

/* Dropdown */
.dropdown-toggle2{display:flex;align-items:center;gap:0.25rem;padding:0.625rem 1rem;cursor:pointer}
.drop-arrow-plain{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;transition:transform var(--ease);order:2}
.dropdown-toggle2 .navbar-link{order:1}
.dropdown.is-open .drop-arrow-plain{transform:rotate(180deg)}
/* Dropdown — full width relative to navbar-container */
.nav-menu{position:static}
.dropdown{position:static}
.dropdown-list{position:absolute;top:100%;left:0;right:0;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity 0.4s ease,transform 0.4s ease,visibility 0.4s ease;padding-top:0.75rem;z-index:100}
.dropdown.is-open .dropdown-list{opacity:1;visibility:visible;transform:translateY(0)}
/* Dropdown panel */
.dropdown-list-full-wrap{background:#00030f;border:none;border-radius:7px;max-width:var(--max-w);margin:0 auto;box-shadow:0 20px 60px rgba(0,0,0,0.5);overflow:hidden}
.nav-bottom-bar{display:flex;align-items:center;gap:1.25rem;padding:1rem 0.5rem;margin-top:0.5rem}
.nav-bottom-bar .button.is-secondary{font-size:0.875rem;padding:0.5rem 1.25rem;border-color:rgba(255,255,255,0.3);color:#fff}
.nav-bottom-link{font-size:0.9375rem;color:rgba(255,255,255,0.5);font-weight:300;transition:color var(--ease)}
.nav-bottom-link:hover{color:#fff}

/* Types de vidéos : grid 1.5fr + 1fr */
.navbar-drop-container{display:grid;grid-template-columns:1.5fr 1fr;gap:12px;padding:1.25rem;align-items:stretch}
/* Nos expertises : 3 colonnes */
.navbar-drop-container.is-3columns{display:grid;grid-template-columns:1fr 1fr minmax(240px,300px);gap:12px;padding:1.25rem;align-items:stretch}

/* nav-column-grid = zone "VIDÉOS" avec bg subtle */
.nav-column-grid{display:flex;flex-direction:column;background:rgba(255,255,255,0.05);border-radius:7px;padding:1rem;margin:0;flex:1}
.nav-column-grid > .text-size-regular{font-family:'Outfit',sans-serif;color:#fff;font-size:1rem;font-weight:500;letter-spacing:0.08em;margin-bottom:0.75rem}

/* Les 2 colonnes de liens vidéos */
.nav-column-contain{display:flex;gap:2rem;width:100%;flex:1}

/* Chaque colonne de liens */
.nav-column-wrap{display:flex;flex-direction:column;flex:1;justify-content:space-between}

/* Bloc droit : vidéos courtes + motion design */
.nav-column-group{display:flex;flex-direction:column;gap:16px;margin:0}

/* Sous-section */
.nav-column{display:flex;flex-direction:column}
.nav-column > .text-size-regular{font-family:'Outfit',sans-serif;color:#fff;font-size:1rem;font-weight:500;letter-spacing:0.08em;margin-bottom:0.5rem}
/* Fond grisé sur les sous-sections dans nav-column-group */
.nav-column-group > .nav-column{background:rgba(255,255,255,0.05);border-radius:7px;padding:1rem;flex:1}
.is-toppad{padding-top:0.5rem}

/* Colonnes expertises */
.navbar-drop-container.is-3columns > .nav-column{min-width:0;background:rgba(255,255,255,0.05);border-radius:7px;padding:1rem}
.navbar-drop-container.is-3columns > .nav-column > .text-size-regular{font-family:'Outfit',sans-serif;color:#fff;font-size:1rem;font-weight:500;letter-spacing:0.08em;margin-bottom:0.5rem}

/* Liens dans les dropdowns — images 70x70 comme Webflow */
.nav-link-block{display:flex;align-items:center;padding:6px 0;transition:all 0.4s;text-decoration:none}
.nav-link-block{transition:background 0.2s ease;border-radius:0.5rem}.nav-link-block:hover{background:rgba(255,255,255,0.06);opacity:1}
.nav-link-block.is-soon{opacity:0.5;cursor:default}
.nav-link-img{width:60px;height:60px;object-fit:cover;border-radius:4px;flex-shrink:0}
.nav-content-wrap{flex:1;min-width:0;padding-left:0.9rem}
.nav-title{font-family:'Outfit',sans-serif;color:#eef2ff;font-size:1rem;font-weight:300;margin-bottom:2px}
.nav-link-details{font-family:'Outfit',sans-serif;color:#eef2ff;font-size:14px;font-weight:200;opacity:0.6}

/* SOON badge */
.nav-title-row{display:flex;align-items:center;gap:0.5rem;margin-bottom:6px}
.nav-title-row .nav-title{margin-bottom:0}
.soon-wrap{display:inline-flex;align-items:center;padding:2px 6px;border:1px solid var(--blue);border-radius:4px}
.soon-wrap .text-size-small{font-size:0.625rem;font-weight:600;letter-spacing:0.05em}
.is-blue{color:var(--blue)}

/* CTA plan dans dropdown expertises — fond clair comme Webflow */
.nav-column-plan{display:flex;flex-direction:column;gap:0.75rem;padding:1.25rem;background:#eef2ff;border-radius:7px;margin:0}
.nav-plan-img{width:100%;border-radius:6px;object-fit:cover;aspect-ratio:16/9}
.nav-plan-wrap{display:flex;flex-direction:column;gap:0.375rem}
.nav-plan-wrap .text-size-regular{font-family:'Outfit',sans-serif;font-size:1rem;font-weight:300;line-height:1.5;color:#00030f}
.nav-plan-wrap .text-style-allcaps{font-family:'Outfit',sans-serif;font-weight:200;font-size:1rem;letter-spacing:0.08em;margin-bottom:0.125rem;color:#00030f}
.nav-column-plan .button{font-family:'Outfit',sans-serif;font-size:15px;font-weight:300;padding:0.625rem 1.25rem;margin-top:0.25rem;text-align:center;width:100%}

/* Navbar CTA — même style que les autres boutons */

/* Mobile nav */
.navigation-mobile{display:none}
@media(max-width:991px){
    .navbar{display:none}
    .navigation-mobile{display:block}
    .navigation-container-mob{display:flex;align-items:center;justify-content:space-between;padding:0.75rem var(--pad)}
    .mobile-right-nav{display:flex;align-items:center;gap:0.75rem}
    .menu-mob{display:flex;flex-direction:column;gap:5px;padding:0.5rem}
    .hamburger-line{display:block;width:22px;height:2px;background:#fff;transition:var(--ease)}
    .menu-mob.is-open .hamburger-line:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
    .menu-mob.is-open .hamburger-line:nth-child(2){opacity:0}
    .menu-mob.is-open .hamburger-line:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
    .mobile-nav{display:none;flex-direction:column;background:var(--bg);padding:1rem var(--pad) 2rem;border-top:1px solid var(--border);max-height:80vh;overflow-y:auto}
    .mobile-nav.is-open{display:flex}
    .mobile-dropdown{border-bottom:1px solid var(--border)}
    .mobile-toggle{display:flex;align-items:center;gap:0.5rem;width:100%;padding:1rem 0}
    .icon-dropdown-toggle{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid currentColor;transition:transform var(--ease)}
    .mobile-dropdown.is-open .icon-dropdown-toggle{transform:rotate(180deg)}
    .dropdown-list-mob{display:none;padding-bottom:1rem}
    .mobile-dropdown.is-open .dropdown-list-mob{display:block}
    .navigation-link-block-mob{display:flex;align-items:center;gap:0.75rem;padding:0.5rem 0 0.5rem 1.5rem}
    .nav-content-wrap-title{padding:0.75rem 0 0.25rem}
    .nav-title-bold{font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted)}
    .mobile-nav-link{display:block;padding:1rem 0;border-bottom:1px solid var(--border);font-weight:500}
}

/* ===================================
   HERO
   =================================== */
.hero-section{position:relative;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding-bottom:1.5rem}
.hero-bg-img-contain{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden}
.hero-bg-img{width:100%;height:100%;object-fit:cover}
.layer-gradient{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,15,0) 0%,rgba(10,10,15,0.4) 70%,rgba(10,10,15,0.7) 100%);z-index:1}
.layer-gradient.is-hero{background:linear-gradient(90deg,rgba(10,10,15,0.8) 0%,rgba(10,10,15,0.6) 35%,rgba(10,10,15,0.2) 65%,rgba(10,10,15,0.05) 100%),linear-gradient(180deg,rgba(10,10,15,0.15) 0%,rgba(10,10,15,0.3) 70%,rgba(10,10,15,0.9) 100%)}
.hero-content-contain{position:relative;z-index:2;padding-top:10rem}
.hero-component{display:flex;flex-direction:column;gap:3rem}
.hero-heading-contain{display:flex;flex-direction:column;gap:2rem}
.hero-button-contain{display:flex;gap:1rem;flex-wrap:wrap}
@media(max-width:767px){
    .hero-bg-img-contain{width:100%;opacity:0.4}
    .hero-content-contain{padding-top:7rem}
}

/* ===================================
   LOGOS
   =================================== */
.logo-section{position:relative;z-index:2;padding:0.5rem 0 2rem;display:flex;flex-direction:column;gap:1.25rem}
.logo-ticker-overflow{overflow:hidden;width:100%}
.logo-ticker-track{display:flex;align-items:center;gap:3.5rem;width:max-content;animation:logo-scroll 40s linear infinite}
.logo-ticker-track:hover{animation-play-state:running}
@keyframes logo-scroll{0%{transform:translateX(0)}100%{transform:translateX(-33.333%)}}
.ticker-logo{height:7rem;width:auto;opacity:1;filter:brightness(0) invert(1);object-fit:contain;flex-shrink:0;transition:opacity var(--ease)}
.ticker-logo:hover{opacity:1}
.trustpilot-contain{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}
.truspilot-img{height:1.25rem;width:auto}

/* ===================================
   PROJETS GRID
   =================================== */
.projet-section{background:#eef2ff;color:#111;overflow:hidden}
.projet-component{display:flex;flex-direction:column;gap:2.5rem;align-items:center}
.projet-component-top{display:flex;flex-direction:column;gap:1rem;align-items:center;text-align:center}
.projet-component-top .heading-style-h2{color:#111}
.projet-component-top .text-size-regular{color:var(--text-dark)}
/* Projet ticker — 2 rows, infinite scroll, opposite directions */
.projet-ticker-wrap{display:flex;flex-direction:column;gap:0.75rem;overflow:hidden}
.projet-ticker{overflow:hidden;width:100%}
.projet-ticker-track{display:flex;gap:0.75rem;width:max-content}
.projet-ticker.is-left .projet-ticker-track{animation:ticker-left 40s linear infinite}
.projet-ticker.is-right .projet-ticker-track{animation:ticker-right 40s linear infinite}
@keyframes ticker-left{0%{transform:translateX(0)}100%{transform:translateX(-33.333%)}}
@keyframes ticker-right{0%{transform:translateX(-33.333%)}100%{transform:translateX(0)}}
.projet-ticker:hover .projet-ticker-track{animation-play-state:running}

.projet-item{border-radius:0.5rem;overflow:hidden;position:relative;flex-shrink:0}
.projet-item[item-style="paysage"]{width:31.1125rem;height:17.5rem}
.projet-item[item-style="verticale"]{width:9.84375rem;height:17.5rem}
.projet-wrap{width:100%;height:100%;position:relative}
.projet-main-content{display:block;width:100%;height:100%;position:relative;overflow:hidden;border-radius:var(--radius)}
.projet-photo-wrap{position:absolute;inset:0}
.projet-img{width:100%;height:100%;object-fit:cover}
.position-absolute-full{position:absolute;inset:0}
.projet-button{position:absolute;bottom:0.75rem;left:0.75rem;right:0.75rem;z-index:3}
.projet-button .projet-card-name{display:inline-flex;align-items:center;padding:0.4rem 0.65rem;background:rgba(40,40,50,0.25);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);border:none;border-radius:0.35rem;font-family:'Outfit',sans-serif;font-size:1.15rem;font-weight:300;color:#fff;max-width:100%}
.projet-section .button{color:#fff}
@media(max-width:991px){
    .projet-ticker.is-left .projet-ticker-track{animation-duration:40s}
    .projet-ticker.is-right .projet-ticker-track{animation-duration:40s}
}
@media(max-width:767px){
    .projet-item[item-style="paysage"]{width:75vw;max-width:31.1125rem;height:14rem}
    .projet-item[item-style="verticale"]{width:30vw;max-width:9.84375rem;height:14rem}
}

/* ===================================
   PROCESS (tabs)
   =================================== */
.process-section{background:#eef2ff;color:#111;overflow:hidden}
.process-mobile-section{display:none}
.process-sticky{display:flex;flex-direction:column}
.process-component{display:flex;flex-direction:column;gap:1rem;align-items:center;padding-top:3rem}
.process-component .heading-style-h2{color:#111}
.process_tab-contain{padding:2rem var(--pad) 0}
.process_tab-wrapper{max-width:var(--max-w);margin:0 auto}
.process_tab-list{display:flex;border-bottom:2px solid #e5e5e5;position:relative}.process_tab-list::after{content:"";position:absolute;bottom:-2px;left:0;height:2px;background:var(--blue);width:var(--progress,20%);transition:width 0.5s cubic-bezier(0.4,0,0.2,1)}
.process_tab-item{flex:1;padding:1rem 0.5rem;text-align:center;position:relative;cursor:pointer;opacity:0.4;transition:opacity var(--ease)}
.process_tab-item .heading-style-h3{font-family:'Outfit',sans-serif;color:#111;font-size:1.6rem;font-weight:300}
.process_tab-item.is-active{opacity:1}
.process_tab-line{display:none}
.process-progress-bar-filler{display:none}
.process-content{display:grid;grid-template-columns:1fr 1fr;gap:5rem;max-width:var(--max-w);margin:0 auto;padding:2rem var(--pad);align-items:center}
.overview_content-list{display:flex;flex-direction:column}
.overview_content-item{display:none;flex-direction:column;gap:1.5rem}
.overview_content-item.is-active{display:flex}
.overview_content-item p{color:var(--text-dark);text-align:justify}
.overview-heading .heading-style-h3{font-family:'Outfit',sans-serif;color:#111;font-size:1.6rem;font-weight:300}
.overview-img-mobile{display:none;border-radius:var(--radius)}
.process-visual{position:relative}
.process_img-list{position:relative;aspect-ratio:16/9}
.process_img-item{position:absolute;inset:0;display:none}
.process_img-item.is-active{display:block}
.process_img-photo{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-lg)}
.button-process-wrap{display:flex;justify-content:center;padding:1.5rem 0 3rem}
.process-trigger{display:none}
.process-section .button{color:#fff}
@media(max-width:767px){
    .process-sticky{display:none}
    .process-mobile-section{display:block;background:#eef2ff;color:#111}
    .process-mobile-component{display:flex;flex-direction:column;gap:2rem;align-items:center}
    .process-mobile-component .heading-style-h2{color:#111}
    .splide.is-2{width:100%}
    .splide__item.is-2{display:flex;flex-direction:column;gap:1rem}
    .process-mobile-img{width:100%;border-radius:var(--radius)}
    .splide__item.is-2 .text-size-regular{color:var(--text-dark)!important}
    .splide__item.is-2 .text-size-medium{color:#111!important}
    .overview-img-mobile{display:block}
    .process-content{grid-template-columns:1fr}
    .process-visual{display:none}
}

/* ===================================
   AGENCE
   =================================== */
.agence-section{overflow:hidden}.agence-section .padding-section-medium{padding:0}
.agence-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center}
.agence-img{width:100%;height:100%;object-fit:cover;min-height:700px;max-height:950px}
.agence-content-contain{display:flex;flex-direction:column;gap:4rem;justify-content:center;padding:0 7.5rem;margin:0}.agence-content-contain .button{margin-top:1rem}
.agence-content-contain p{color:var(--text);text-align:justify}.agence-content-contain .heading-style-h2{text-align:justify}
.agence-content-contain strong{color:#fff}
.agence-content-contain .button{align-self:flex-start}
@media(max-width:991px){
    .agence-grid{grid-template-columns:1fr}
    .agence-img{min-height:250px;max-height:350px}
    .agence-content-contain{padding:2rem 1.5rem;gap:1.5rem}
    .agence-content-contain p{text-align:left;font-size:0.9375rem}
    .agence-content-contain .heading-style-h2{text-align:left;font-size:1.75rem}
    .agence-section .padding-section-medium{padding:0}
    .agence-img{min-height:200px;max-height:280px}
}

/* ===================================
   AVIS (Splide)
   =================================== */
.avis-section{background:#eef2ff;overflow:hidden;color:#111}.avis-section .padding-global{padding-left:0;padding-right:0}.avis-section .container-large{max-width:100%;padding:0}
.avis-component{display:flex;flex-direction:column;gap:2.5rem;align-items:center}.avis-section .heading-style-h2{color:#111}
.splide.is-1{width:100%;overflow:hidden}
.splide__track{overflow:hidden!important}
.splide__item.is-1{background:#d9e6fe;border:none;border-radius:0.75rem;padding:1.75rem;display:flex;flex-direction:column;gap:1rem;height:100%;position:relative}
.avis-top-contain{display:flex;align-items:flex-start;justify-content:space-between;gap:0.75rem}
.avis-info-contain{display:flex;align-items:center;gap:0.625rem;min-width:0;flex:1}
.avis-client-img{width:2.25rem;height:2.25rem;border-radius:50%;object-fit:cover;flex-shrink:0}
.avis-client-info-contain{min-width:0;flex:1}
.avis-content{display:flex;flex-direction:column;gap:2px}
.avis-content .text-size-small{font-family:'Outfit',sans-serif;color:#666;font-size:1rem;font-weight:400}
.avis-content .is-medium{font-weight:600;color:#111;font-size:0.8125rem}
.avis-bottom-contain .is-medium{font-family:'Outfit',sans-serif;font-weight:500;color:#111;font-size:1rem}
.avis-stars{color:#f5b731;font-size:1rem;letter-spacing:2px}
.avis-bottom-contain{display:flex;align-items:center;gap:0.75rem;margin-top:auto;padding-top:1rem}.splide__item.is-1 .avis-logo{position:static;height:2rem;width:auto;max-width:5rem;object-fit:contain;opacity:0.7;margin-left:auto;flex-shrink:0}
.splide__item.is-1{justify-content:flex-start}
.avis-logo{height:1rem;width:auto;opacity:0.7;margin-top:0.25rem}
.avis-img-reseaux{height:1.25rem;width:auto;flex-shrink:0}
.splide__item.is-1 .text-size-medium{font-family:'Outfit',sans-serif;font-size:1.25rem;font-weight:300;line-height:1.65;color:#333}

/* Splide arrows */
.splide__arrows{display:flex;justify-content:center;gap:2rem;margin-top:2rem}
.splide__arrow{display:flex;align-items:center;width:5rem;color:#111;opacity:0.6;transition:opacity var(--ease);padding:0}
.splide__arrow svg{width:100%;height:auto}
.splide__arrow:hover{opacity:1}
.splide__arrow.splide__arrow--prev{transform:scaleX(-1)}
.splide__arrow:disabled{opacity:0.2}
.splide__arrows.is-center{margin-top:1.5rem}
.process-mobile-section .splide__arrow{color:#111}

/* ===================================
   GALLERY
   =================================== */
.gallery-section{background:var(--bg);overflow:hidden;padding:2rem 0}
.gallery-contain{position:relative}
.gallery-content{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding-bottom:2.5rem;position:relative;z-index:2}
.gallery-component{position:relative}
.marquee{overflow:hidden}
.marquee-wrapper{display:flex;gap:1rem;margin-bottom:1rem;width:max-content}
.marquee-wrapper.is-right{margin-bottom:0}
.marquee-wrapper.is-left{animation:gallery-scroll-left 40s linear infinite}
.marquee-wrapper.is-right{animation:gallery-scroll-right 40s linear infinite}
.marquee-track{display:flex;gap:1rem;flex-shrink:0}
.marquee-track:not(:first-child){display:flex}
.marquee-slide{width:560px;flex-shrink:0}
.swiper-gallery{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
@keyframes gallery-scroll-left{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes gallery-scroll-right{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}

/* ===================================
   CTA
   =================================== */
.cta-section{background:#a9cdfc;padding:3rem 0 0;margin:0;overflow:hidden}
.cta-section .padding-section-small{padding:0;display:flex;align-items:center;height:100%}
.cta-component{overflow:visible;margin:0;padding:0}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:2rem}
.devis-mockup{display:flex;align-items:flex-start;justify-content:center;padding:0;position:relative;margin-top:-2rem}
.devis-paper{background:#fff;border-radius:0.75rem 0.75rem 0 0;box-shadow:0 8px 40px rgba(0,0,0,0.06);padding:2.5rem;width:100%;max-width:340px;position:relative}
.devis-logo{width:70px;height:auto;filter:brightness(0);opacity:0.15}
.skel-bar{height:10px;border-radius:5px;background:#ddd5cc}
.skel-bar.thin{height:6px}
.skel-bar.is-accent{background:var(--blue);opacity:0.4}
.skel-bar.w15{width:15%}.skel-bar.w20{width:20%}.skel-bar.w25{width:25%}.skel-bar.w30{width:30%}.skel-bar.w35{width:35%}.skel-bar.w40{width:40%}.skel-bar.w45{width:45%}.skel-bar.w50{width:50%}.skel-bar.w55{width:55%}.skel-bar.w60{width:60%}.skel-bar.w70{width:70%}.skel-bar.w75{width:75%}.skel-bar.w80{width:80%}.skel-bar.w85{width:85%}.skel-bar.w90{width:90%}.skel-bar.w92{width:92%}.skel-bar.w95{width:95%}
.devis-skel-header{margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid #e0d8d0}






.devis-skel-lines{display:flex;flex-direction:column;gap:10px;margin-bottom:1.75rem}.devis-skel-lines.is-full{gap:12px;margin-bottom:2rem}
.devis-skel-sign{margin-top:1.5rem;padding-top:0.75rem;display:flex;justify-content:flex-end}
.devis-signature-svg{width:120px;height:35px}
.devis-signature-path{stroke-dasharray:500;stroke-dashoffset:500}
.devis-line{opacity:0;transform:translateY(8px);transition:opacity 0.5s ease,transform 0.5s ease}
.devis-line.is-visible{opacity:1;transform:translateY(0)}
.devis-signature-path.is-drawing{animation:drawSignature 1.2s ease forwards}
@keyframes drawSignature{to{stroke-dashoffset:0}}
.devis-float-photo{position:absolute;width:56px;height:56px;border-radius:50%;object-fit:cover;border:none;box-shadow:0 4px 16px rgba(0,0,0,0.1)}
.devis-float-photo.fp-1{animation:floatA 10s ease-in-out infinite}
.devis-float-photo.fp-2{animation:floatB 12s ease-in-out infinite}
.devis-float-photo.fp-3{animation:floatC 11s ease-in-out infinite}
@keyframes floatA{0%,100%{transform:translate(0,0)}25%{transform:translate(5px,-6px)}50%{transform:translate(-3px,-10px)}75%{transform:translate(6px,-3px)}}
@keyframes floatB{0%,100%{transform:translate(0,0)}25%{transform:translate(-6px,4px)}50%{transform:translate(5px,8px)}75%{transform:translate(-4px,-5px)}}
@keyframes floatC{0%,100%{transform:translate(0,0)}25%{transform:translate(5px,6px)}50%{transform:translate(-5px,-4px)}75%{transform:translate(-6px,5px)}}
.devis-float-photo.fp-1{top:5%;right:-28px}
.devis-float-photo.fp-2{top:45%;left:-28px}
.devis-float-photo.fp-3{bottom:15%;right:-28px}
.cta-content-contain{display:flex;flex-direction:column;gap:1.25rem;justify-content:center;min-height:100%}
.cta-content-contain .heading-style-h2{color:#111;font-size:clamp(1.5rem,2.2vw,2rem);font-weight:400}
.cta-content-contain p{color:#333;font-size:1rem}
.cta-content-contain .button{color:#fff;align-self:flex-start}
@media(max-width:767px){
    .cta-grid{grid-template-columns:1fr}
    
    .cta-content-contain{padding:2rem 1.5rem;text-align:center}
    .cta-content-contain .button{align-self:center}
    .cta-section{padding:2rem 0}.devis-mockup{display:none}
}

/* ===================================
   FAQ
   =================================== */
.faq-section{background:#eef2ff;overflow:hidden}
.faq-component{display:grid;grid-template-columns:1fr 1.4fr;gap:4rem;align-items:start}
.faq-title-contain{display:flex;flex-direction:column;gap:1.5rem;align-items:flex-start;position:sticky;top:6rem}
.faq-title-contain .heading-style-h2{color:#111;font-size:clamp(1.75rem,3vw,2.5rem);font-weight:400}
.faq-title-contain .button{color:#fff}
.accordion-wrappe{display:flex;flex-direction:column;min-width:0}
.accordion-dropdown{border-bottom:1px solid #222}
.accordion-dropdown:first-child{border-top:1px solid #222}
.accordian-toggle{width:100%;padding:1.75rem 0;cursor:pointer;text-align:left}
.accordian-title-wrapper{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.accordian-title-wrapper .text-size-regular{font-family:'Outfit',sans-serif;color:#111;font-weight:300;font-size:1rem;line-height:1.4}
.accordian-icon{flex-shrink:0;transition:transform var(--ease);color:#111;margin-top:4px;width:24px;height:24px}
.accordian-icon svg{width:24px;height:24px}
.accordion-dropdown.is-open .accordian-icon{transform:rotate(180deg)}
.accordian-list{max-height:0;overflow:hidden;transition:max-height 0.4s ease,padding 0.4s ease;padding-bottom:0}
.accordion-dropdown.is-open .accordian-list{max-height:40rem;padding-bottom:1.25rem}
.f-accordian-content p{font-family:'Outfit',sans-serif;color:var(--text-dark);font-weight:300;font-size:1rem;line-height:1.7;text-align:justify}
@media(max-width:767px){
    .faq-component{grid-template-columns:1fr;gap:2rem}
    .faq-title-contain{position:static}
}

/* ===================================
   SEO CONTENT — HP bottom section
   =================================== */
.seo-content-section{border-top:1px solid var(--border)}
.seo-text{max-width:48rem;padding:3.5rem 0 4rem}
.seo-text p{color:var(--text-muted);font-size:0.9375rem;line-height:1.8;margin-bottom:1rem;text-align:justify}
.seo-text p:last-child{margin-bottom:0}
.seo-text h2{font-size:1.125rem;font-weight:600;color:var(--text);margin:2rem 0 0.75rem}
.seo-text strong{color:var(--text)}
.seo-text a{color:var(--text);text-decoration:underline;text-decoration-color:rgba(255,255,255,0.2);text-underline-offset:2px;transition:text-decoration-color var(--ease)}
.seo-text a:hover{text-decoration-color:var(--blue)}

/* ===================================
   FOOTER
   =================================== */
.footer-section{background:var(--bg);border-top:1px solid var(--border);margin-top:0;padding-bottom:0}
.footer-section .padding-section-medium-top{padding-bottom:0}

.footer-contain{display:flex;flex-direction:column;gap:2rem;padding-bottom:0}
.footer-component-top{display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:end}
.footer-title-light{font-family:'Plus Jakarta Sans',sans-serif;font-weight:400;font-size:2.2rem}
.footer-reseaux-contain{display:flex;flex-direction:column;gap:0.75rem;grid-column:1}
.reseau-contain{display:flex;align-items:center;gap:0.375rem;transition:opacity var(--ease);color:#fff}
.reseau-contain:hover{opacity:0.7}
.reseau-contain .text-size-regular{font-family:'Outfit',sans-serif;font-weight:200;font-size:1rem}
.icon-embed-xxsmall{width:1rem;height:1rem}
.icon-embed-xxsmall svg{width:100%;height:100%}
.footer-button-contain{grid-column:2;grid-row:1/span 2;align-self:center;display:flex;flex-direction:column;align-items:flex-end;gap:1rem}
.footer-line{height:2px;background:rgba(255,255,255,1)}
.footer-component-down{display:grid;grid-template-columns:repeat(4,1fr);gap:3rem 2rem}
.footer-nav-list{display:flex;flex-direction:column;gap:0.5rem}
.footer-nav-list > div:first-child{font-family:'Outfit',sans-serif;font-weight:500;color:#fff;margin-bottom:0.125rem;font-size:1rem}
.footer-nav-list a{font-family:'Outfit',sans-serif;color:#fff;font-size:1rem;font-weight:200;text-transform:uppercase;letter-spacing:0.04em;transition:opacity var(--ease)}
.footer-nav-list a:hover{opacity:0.7}
.footer-obligations{display:flex;align-items:center;justify-content:space-between;padding-top:0;border-top:none;flex-wrap:wrap;gap:0;margin-top:0;padding-bottom:0}
.footer-img{height:auto;width:100%;max-height:none;opacity:1;margin-bottom:0;line-height:0}
.obligations-contain{display:flex;gap:2rem;flex-wrap:wrap;justify-content:center;width:100%;text-transform:uppercase;letter-spacing:0.04em;margin-top:0;padding-bottom:1.25rem}
.obligations-contain a,.obligations-contain span{font-family:'Outfit',sans-serif;color:var(--text-muted);font-size:0.875rem;font-weight:200}
.obligations-contain a:hover{color:#fff}
@media(max-width:767px){
    .footer-component-top{grid-template-columns:1fr;text-align:center}
    .footer-reseaux-contain{justify-content:center}
    .footer-button-contain{grid-column:1;grid-row:auto;justify-self:center}
    .text-align-bottom-right{text-align:center}
    .footer-component-down{grid-template-columns:repeat(2,1fr)}
    .footer-obligations{flex-direction:column;text-align:center}
    .obligations-contain{justify-content:center}
}

/* ===================================
   BLOG — moved to blog.css (loaded conditionally)
   =================================== */

/* ===================================
   VIDEO POPUP
   =================================== */
.popoup-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.92);display:none;align-items:center;justify-content:center;z-index:10000}
.popoup-overlay.is-open{display:flex}
.popup-close-overlay{position:absolute;inset:0;z-index:1}
.popup{position:relative;z-index:2;width:90vw;max-width:960px}
.popup.is-vertical{max-width:400px}
.popup-close-button{position:absolute;top:-2.5rem;right:0;color:#fff;font-size:0.875rem;z-index:3}
.iframe-wrapper{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:var(--radius)}
.iframe-wrapper.is-vertical{padding-bottom:177.78%}
.iframe-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.popup-play-link-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.popup-video-thumbnail{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.popup-play-link{position:relative;z-index:2}
.popup-play-icon{width:5rem;height:5rem}

/* ===================================
   PAGES
   =================================== */
.page-header{padding-top:8rem;padding-bottom:3rem}
.page-content{padding-bottom:5rem}
.page-content p{color:var(--text);margin-bottom:1rem}
.page-content h2{margin:2rem 0 1rem}
.page-content h3{margin:1.5rem 0 0.75rem}
.page-content ul,.page-content ol{padding-left:1.5rem;margin-bottom:1rem}
.page-content li{margin-bottom:0.5rem}
.page-content img{border-radius:var(--radius);margin:1.5rem 0}
.service-hero{position:relative;padding-top:10rem;padding-bottom:4rem;overflow:hidden}
.service-hero-bg{position:absolute;inset:0;z-index:0}
.service-hero-bg img{width:100%;height:100%;object-fit:cover;opacity:0.3}
.service-hero-content{position:relative;z-index:2;display:flex;flex-direction:column;gap:1.5rem}
/* --- Service page content design system --- */

/* Section wrapper — alternating bg */
.sc-section{padding:3.5rem 0;border-top:1px solid var(--border)}
.sc-section:first-child{border-top:none;padding-top:0}
.sc-section-light{background:#fff;color:#111;padding:3.5rem 2rem;border-radius:var(--radius-lg);margin:2.5rem 0}
.sc-section-light h2,.sc-section-light h3{color:#111}
.sc-section-light p,.sc-section-light li{color:var(--text-dark)}

/* Intro lead paragraph */
.sc-lead{font-size:1.125rem;line-height:1.7;color:var(--text);max-width:52rem;margin-bottom:2rem}

/* Feature grid — 2 or 3 columns */
.sc-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem;margin:1.5rem 0}
.sc-feature{background:var(--bg-card);border:1px solid transparent;border-radius:var(--radius);padding:1.75rem;transition:border-color var(--ease)}
.sc-feature:hover{border-color:var(--blue)}
.sc-feature-icon{font-size:1.5rem;margin-bottom:0.75rem}
.sc-feature h3{font-family:'Outfit',sans-serif;font-size:1.6rem;font-weight:300;margin:0 0 0.5rem}
.sc-feature p{font-family:'Outfit',sans-serif;color:var(--text-muted);font-size:1rem;font-weight:300;margin:0;text-align:justify}
.sc-feature{position:relative;overflow:hidden;min-height:220px}.sc-feature h3,.sc-feature p{position:relative;z-index:2}
.sc-feature-preview{position:absolute;bottom:0;right:0;width:60%;aspect-ratio:16/9;pointer-events:none;overflow:hidden;border-radius:var(--radius) 0 0 0}.sc-feature-preview::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,20,20,0.95) 0%,rgba(20,20,20,0.6) 40%,rgba(20,20,20,0.2) 65%,transparent 100%),linear-gradient(90deg,rgba(20,20,20,0.9) 0%,rgba(20,20,20,0.4) 45%,transparent 75%);border-radius:inherit}
.sc-feature-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
.sc-feature-preview video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.sc-feature-preview video{width:100%;height:100%;object-fit:cover;opacity:1}


/* Highlight stat/number cards */
.sc-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1.5rem 0}
.sc-stat{text-align:center;padding:1.5rem 1rem}
.sc-stat-number{font-size:2rem;font-weight:700;color:var(--blue);line-height:1}
.sc-stat-label{font-size:0.875rem;color:var(--text-muted);margin-top:0.5rem}

/* Process steps — numbered */
.sc-steps{display:flex;flex-direction:column;gap:1.5rem;margin:1.5rem 0;counter-reset:step}
.sc-step{display:flex;gap:1.25rem;align-items:flex-start;counter-increment:step}
.sc-step::before{content:counter(step);flex-shrink:0;width:2.5rem;height:2.5rem;background:var(--blue);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem}
.sc-step-content h3{font-size:1rem;font-weight:600;margin:0 0 0.25rem}
.sc-step-content p{color:var(--text-muted);font-size:0.9375rem;margin:0}

/* Bold paragraph blocks (for process without numbers) */
.sc-block{margin:1.25rem 0}
.sc-block strong{display:block;color:#fff;font-size:1rem;margin-bottom:0.25rem}
.sc-block p{color:var(--text-muted);margin:0}

/* Inline CTA button */
.sc-cta{display:flex;gap:1rem;margin:2rem 0;flex-wrap:wrap}
.sc-cta .button{padding:0.875rem 2rem}

/* FAQ accordion (service pages) */
.sc-faq{margin:1.5rem 0}
.sc-faq-item{border-bottom:1px solid var(--border)}
.sc-faq-item:first-child{border-top:1px solid var(--border)}
.sc-faq-q{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 0;cursor:pointer;font-weight:600;font-size:1rem;width:100%;text-align:left;color:#fff}
.sc-faq-q::after{content:'+';font-size:1.25rem;color:var(--text-muted);transition:transform var(--ease)}
.sc-faq-item.is-open .sc-faq-q::after{content:'-'}
.sc-faq-a{max-height:0;overflow:hidden;transition:max-height 0.4s ease,padding 0.3s ease}
.sc-faq-item.is-open .sc-faq-a{max-height:40rem;padding-bottom:1.25rem}
.sc-faq-a p{color:var(--text-muted);font-size:0.9375rem;margin:0}

/* Advantages list (check marks) */
.sc-checks{list-style:none;padding:0;margin:1rem 0}
.sc-checks li{padding:0.5rem 0 0.5rem 2rem;position:relative;color:var(--text)}
.sc-checks li::before{content:'\\2713';position:absolute;left:0;color:var(--blue);font-weight:700}

/* Separator */
.sc-divider{border:none;border-top:1px solid var(--border);margin:2.5rem 0}

/* Link natural dans le contenu */
.page-content a{color:var(--blue);text-decoration:underline;text-decoration-color:rgba(77,101,255,0.3);text-underline-offset:2px;transition:text-decoration-color var(--ease)}
.page-content a:hover{text-decoration-color:var(--blue)}

/* Responsive */
@media(max-width:767px){
    .sc-features{grid-template-columns:1fr}
    .sc-stats{grid-template-columns:1fr 1fr}
    .sc-step{flex-direction:column;gap:0.75rem}
    .sc-step::before{width:2rem;height:2rem;font-size:0.875rem}
}

/* --- Legacy compat --- */
.service-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.service-feature{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem}
.service-feature h3{font-size:1.125rem;font-weight:600;margin-bottom:0.75rem}
/* blog legacy styles moved to blog.css */
.error-404{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80vh;text-align:center;gap:1.5rem}
.error-404 .heading-style-h1{font-size:8rem;color:var(--blue)}

/* ===================================
   SERVICE PAGE — Rich layouts (motion-design, etc.)
   =================================== */

/* Logo row (inline, pas ticker JS) */
.logo-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.5rem 2.5rem}
.logo-row .ticker-logo{height:2.5rem;width:auto;opacity:0.5;filter:brightness(0) invert(1);transition:opacity var(--ease)}
.logo-row .ticker-logo:hover{opacity:0.8}

/* Hero video bg */
.service-hero.is-video .service-hero-bg{overflow:hidden}
.service-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.5}

/* Benefice sections — image + texte côte à côte */
.benefice-section{overflow:hidden}
.benefice-row{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.benefice-row.is-reversed{direction:rtl}
.benefice-row.is-reversed > *{direction:ltr}
.benefice-text{display:flex;flex-direction:column;gap:1rem}
.benefice-text .heading-style-h2{margin-bottom:0.5rem}
.benefice-text .button{align-self:flex-start;margin-top:0.5rem}
.benefice-img{width:100%;border-radius:0.25rem;object-fit:cover;max-height:28rem}

/* Motion design projects grid */
.md-projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.md-project-card{border-radius:0.5rem;overflow:hidden;position:relative;aspect-ratio:16/10;background:var(--bg-card);cursor:pointer;transition:transform 0.3s ease}
a.md-project-card{text-decoration:none;color:inherit}
.md-project-card:hover{transform:scale(1.02)}
.md-project-card video,.md-project-card .md-project-visual video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.md-project-visual{position:absolute;inset:0;overflow:hidden}
.md-project-card iframe,.md-project-card .md-project-visual iframe{position:absolute;inset:0;width:100%;height:100%;border:none;pointer-events:none;z-index:1}
.md-project-poster,.md-project-card .md-project-visual .md-project-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 0.3s;z-index:2}
.md-project-card:hover .md-project-poster{opacity:0}
.md-project-label{position:absolute;bottom:0.75rem;left:0.75rem;padding:0.55rem 0.9rem;background:rgba(40,40,50,0.25);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);border:none;border-radius:0.35rem;font-family:'Outfit',sans-serif;font-size:1.15rem;font-weight:300;color:#fff;z-index:2;display:inline-flex;align-items:center;gap:0.5rem}
.md-project-label::after{content:'';display:inline-flex;width:16px;height:16px;background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;opacity:1;font-size:unset;font-weight:unset}

/* Process grid — s'adapte au nombre d'etapes */
.md-process-grid{display:flex;gap:1.5rem}
.md-process-grid .md-process-step{flex:1}
.md-process-step{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem 1.5rem;display:flex;flex-direction:column;gap:0.75rem}
.md-process-num{font-size:2rem;font-weight:700;color:var(--blue);line-height:1}
.md-process-step .heading-style-h3{margin:0}
.md-process-step .text-size-regular{color:var(--text-muted);margin:0}

/* Formats visuels */
.md-formats-row{display:grid;grid-template-columns:2fr 1.2fr 0.8fr;gap:1.25rem;align-items:end}
.md-format-item{position:relative}
.md-format-img{width:100%;border-radius:var(--radius-lg);display:block}
.md-format-label{text-align:center;margin-top:0.75rem;font-size:0.875rem;color:var(--text-muted)}

/* Responsive */
@media(max-width:991px){
    .benefice-row{grid-template-columns:1fr}
    .benefice-row.is-reversed{direction:ltr}
    .benefice-img{max-height:20rem}
    .md-process-grid{flex-wrap:wrap}
    .md-process-grid .md-process-step{flex:1 1 calc(33% - 1.5rem);min-width:200px}
    .md-formats-row{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:767px){
    .md-projects-grid{grid-template-columns:repeat(2,1fr)}
    .md-process-grid{flex-direction:column}
    .md-process-grid .md-process-step{min-width:100%}
    .md-formats-row{grid-template-columns:1fr}
    .md-format-img{max-width:20rem;margin:0 auto}
}

/* Utilities */
.hide{display:none!important}
@media(max-width:991px){.hide-tablet{display:none!important}}
@media(max-width:767px){.hide-mobile-landscape{display:none!important}}
@media(max-width:479px){.hide-mobile{display:none!important}}
.is-mobile-center,.is-mobil-center{}
@media(max-width:767px){.is-mobile-center,.is-mobil-center{text-align:center}}

/* ===================================
   SERVICE PAGES — Light content (#eef2ff)
   Hero + logos restent dark, tout le contenu passe en clair
   =================================== */

.is-service-page .main-wrapper{background:#eef2ff}

/* Hero & logos : restent dark */
.is-service-page .service-hero{background:#00030f}
.is-service-page .logo-section{background:#00030f}

/* Textes : dark sur fond clair (exclure footer + cards avis) */
.is-service-page .main-wrapper .heading-style-h2{color:#00030f}
.is-service-page .main-wrapper .heading-style-h3{color:#00030f}
.is-service-page .main-wrapper .text-size-regular{color:#333;text-align:justify}
.is-service-page .text-align-center .text-size-regular{text-align:center}
.is-service-page .main-wrapper .text-size-medium{color:#333}
.is-service-page .main-wrapper .text-size-small{color:#555}

/* Hero : texte reste blanc */
.is-service-page .service-hero .heading-style-h1,
.is-service-page .service-hero .heading-style-h2,
.is-service-page .service-hero .text-size-regular,
.is-service-page .service-hero p{color:#fff}

/* Logo section : texte reste blanc */
.is-service-page .logo-section .text-size-regular{color:rgba(255,255,255,0.8)}

/* Benefice sections : texte + liens */
.is-service-page .benefice-text a:not(.button){color:var(--blue)}
.is-service-page .benefice-text strong{color:#00030f}

/* Process cards : fond blanc au lieu de dark */
.is-service-page .md-process-step{background:#fff;border-color:#e2e5f0}
.is-service-page .md-process-step .text-size-regular{color:#555}
.is-service-page .md-process-step .heading-style-h3{color:#00030f}

/* Projects grid */


/* Avis section — fond clair, mais cards restent dark */
.is-service-page .splide__arrow svg{color:#00030f}

/* FAQ section — deja en #fff, renforcer */
.is-service-page .faq-section{background:#fff}
.is-service-page .accordian-toggle .text-size-regular{color:#333}
.is-service-page .accordian-icon{color:#333}
.is-service-page .f-accordian-content .text-size-regular{color:#555}

/* CTA section — deja #a9cdfc, pas de changement */

/* sc-* classes (anciennes pages service) */
.is-service-page .sc-faq-q{color:#00030f}
.is-service-page .sc-faq-a p{color:#555}
.is-service-page .sc-faq-item{border-color:#e2e5f0}

/* Boutons secondary sur fond clair */
.is-service-page .button.is-secondary{border-color:rgba(0,3,15,0.2);color:#00030f}
.is-service-page .button.is-secondary:hover{border-color:#00030f}
/* Mais PAS dans le hero */
.is-service-page .service-hero .button.is-secondary{border-color:rgba(255,255,255,0.2);color:#fff}
.is-service-page .service-hero .button.is-secondary:hover{border-color:#fff}

/* Page agence / projets (pas de service-hero, hero inline) */
.is-service-page .main-wrapper > .padding-global:first-child{background:#00030f}
.is-service-page .main-wrapper > .padding-global:first-child .heading-style-h1{color:#fff}
.is-service-page .main-wrapper > .padding-global:first-child .text-size-regular{color:rgba(255,255,255,0.8)}
.is-service-page .main-wrapper > .padding-global:first-child .text-size-small{color:rgba(255,255,255,0.6)}

/* === ACCESSIBILITY === */
@media(prefers-reduced-motion:reduce){
    .logo-ticker-track,.projet-ticker-track,.ticker-track{animation:none !important}
    .splide__track{transition:none !important}
    *{transition-duration:0.01ms !important;animation-duration:0.01ms !important}
}

/* === BREADCRUMB (pages service) === */
.breadcrumb-wrap .breadcrumb{font-family:'Outfit',sans-serif;font-size:1rem;font-weight:300}
.breadcrumb-wrap .breadcrumb a{font-family:'Outfit',sans-serif;font-size:1rem;font-weight:300;color:rgba(255,255,255,0.5);text-decoration:none;transition:color var(--ease)}
.breadcrumb-wrap .breadcrumb a:hover{color:#fff}
.breadcrumb-wrap .breadcrumb .breadcrumb-sep{color:rgba(255,255,255,0.3);margin:0 0.375rem}
.breadcrumb-wrap .breadcrumb .breadcrumb-current{color:rgba(255,255,255,0.7);font-size:1.15rem}

/* ===================================

/* =============================================
   RESPONSIVE COMPLET — BIUX
   Patch exhaustif tablette + mobile
   ============================================= */

/* === GLOBAL OVERFLOW FIX === */
html{overflow-x:clip}
.page-wrapper{overflow-x:clip;width:100%}

/* ===================================
   TABLET (max-width: 991px)
   =================================== */
@media(max-width:991px){
    /* Typo */
    .heading-style-h1{font-size:3rem}
    .heading-style-h2,.heading-style-h2.is-white,.heading-style-h2.is-smaller{font-size:1.8rem}
    .heading-style-h3{font-size:1.5rem}
    
    /* Sections */
    .padding-section-medium{padding-top:4rem;padding-bottom:4rem}
    .padding-section-medium-top{padding-top:4rem;padding-bottom:4rem}
    .padding-section-large{padding-top:6rem;padding-bottom:6rem}
    
    /* Navigation */
    .navigation-wrap{padding:0.75rem 0}
    .flowbase-logo{width:80px;height:auto}
    .mobile-right-nav .button{padding:0.4rem 1rem;font-size:0.875rem;white-space:nowrap}
    
    /* Hero */
    .hero-content-contain{padding-top:8rem}
    
    /* CTA */
    .cta-grid{grid-template-columns:1fr}
    
    
    .cta-content-contain{align-items:center;text-align:center}
    .cta-content-contain .button{align-self:center}
    
    /* Process tabs */
    .process_tab-list{flex-wrap:wrap;gap:0}
    .process_tab-item .heading-style-h3{font-size:0.8125rem}
    .process-content{gap:2rem}
    
    /* Benefice / avantages */
    .benefice-row{grid-template-columns:1fr!important;gap:2rem}
    .benefice-row.is-reversed{direction:ltr}
    .benefice-img{max-height:20rem}
    
    /* Service pages */
    .md-formats-row{grid-template-columns:1fr 1fr 1fr}
    
    /* Projets grid */
    .md-projects-grid{grid-template-columns:repeat(2,1fr)}
    
    /* Process steps */
    .md-process-grid{flex-wrap:wrap}
    .md-process-grid .md-process-step{flex:1 1 calc(33% - 1.5rem);min-width:200px}
    
    /* Blog */
    .collection-list{grid-template-columns:1fr 1fr}
    .new-article-wrap{grid-template-columns:1fr}
    .blogpost-list{grid-template-columns:1fr 1fr}
    
    /* Equipe */
    .equipe-component{grid-template-columns:1fr .5fr 1fr;grid-auto-flow:dense}
    
    /* Trustpilot */
    .trustpilot-contain{flex-wrap:wrap;justify-content:center}
    
    /* Logo ticker */
    .ticker-logo{height:5rem}
    .logo-component{overflow:hidden}
    
    /* Footer */
    .footer-component-down{grid-template-columns:repeat(2,1fr)}
}

/* ===================================
   MOBILE LANDSCAPE (max-width: 767px)
   =================================== */
@media(max-width:767px){
    /* Typo */
    .heading-style-h1{font-size:2.5rem}
    .heading-style-h2,.heading-style-h2.is-white,.heading-style-h2.is-smaller{font-size:1.8rem}
    .heading-style-h3{font-size:1.5rem}
    .heading-style-h3.is-mobile-center{text-align:center}
    .heading-style-h4{font-size:1rem}
    .heading-style-h2.is-mobile-center{text-align:center}
    .text-size-large{font-size:1.25rem}
    .is-italic{font-size:3rem}
    .text-style-nowrap{white-space:normal}
    
    /* Layout */
    .padding-global{padding-left:1.25rem;padding-right:1.25rem}
    .padding-section-small{padding-top:2rem;padding-bottom:2rem}
    .padding-section-medium{padding-top:3rem;padding-bottom:3rem}
    .padding-section-medium-top{padding-top:3rem;padding-bottom:3rem}
    .padding-section-large{padding-top:4rem;padding-bottom:4rem}
    .text-size-regular.is-dark.is-mobile-center,
    .text-size-regular.is-dark.is-mobil-center,
    .text-size-regular.is-grey.is-mobile-center,
    .text-size-regular.is-grey.is-mobil-center{text-align:center}
    .max-width-full-mobile-landscape{width:100%;max-width:none}
    
    /* Navigation mobile */
    .navbar{display:none}
    .navigation-mobile{display:block}
    .flowbase-logo{width:80px;height:auto}
    .mobile-right-nav .button{padding:0.4rem 1rem;font-size:0.875rem}
    
    /* Hero */
    .hero-bg-img-contain{width:100%;opacity:0.4}
    .hero-content-contain{padding-top:7rem}
    .hero-button-contain{flex-wrap:wrap;justify-content:center}
    
    /* Logos */
    .ticker-logo{height:4rem}
    .trustpilot-contain{flex-direction:column;gap:.6rem}
    
    /* Projects ticker */
    .projet-item[item-style="paysage"]{width:75vw;max-width:31.1125rem;height:14rem}
    .projet-item[item-style="verticale"]{width:30vw;max-width:9.84375rem;height:14rem}
    
    /* Process section - hide desktop, show mobile */
    .process-sticky{display:none}
    .process-mobile-section{display:block;background:#eef2ff;color:#111}
    .process-mobile-component{display:flex;flex-direction:column;gap:2rem;align-items:center}
    .process-mobile-component .heading-style-h2{color:#111}
    .overview-img-mobile{display:block}
    .process-content{grid-template-columns:1fr}
    .process-visual{display:none}
    .process_tab-list{flex-wrap:wrap;gap:0.25rem}
    .process_tab-item .heading-style-h3{font-size:0.75rem}
    
    /* CTA */
    .cta-grid{grid-template-columns:1fr}
    
    
    .cta-content-contain{align-items:center;text-align:center}
    .cta-content-contain .button{align-self:center}
    
    /* FAQ */
    .faq-component{grid-template-columns:1fr}
    
    /* Footer */
    .footer-component-top{grid-template-columns:1fr;text-align:center}
    .footer-reseaux-contain{justify-content:center}
    .footer-button-contain{grid-column:1;grid-row:auto;justify-self:center}
    .text-align-bottom-right{text-align:center}
    .footer-component-down{grid-template-columns:1fr 1fr}
    .footer-obligations{flex-direction:column;text-align:center}
    .obligations-contain{justify-content:center}
    .footer-img{height:auto}
    
    /* Benefice / avantages */
    .benefice-row{grid-template-columns:1fr!important;gap:2rem}
    .benefice-gallery{width:100%}
    .benefice-gallery.desktop{display:none}
    .benefice-gallery.mobile{display:block}
    .benefice-content-contain{width:100%}
    .benefices-img{height:400px}
    .benefices-img.is-mobile{display:block}
    .benefices-img.is-desktop{display:none}
    
    /* Formats */
    .format-top{flex-direction:column;gap:2rem}
    .format-visuel{grid-template-columns:auto}
    .format-img{height:300px}
    
    /* Grilles */
    .collection-list{grid-template-columns:1fr}
    .new-article-wrap{grid-template-columns:1fr}
    .blogpost-list{grid-template-columns:1fr}
    .hisotoire-component{grid-template-columns:1fr}
    .autres-list{grid-template-columns:1fr}
    .collection-list-2{grid-template-columns:1fr}
    .video-wrapper-verticale{grid-template-columns:1fr 1fr}
    .video-grid-container{height:400px}
    
    /* Gallery marquee */
    .marquee-slide{width:350px}
    .project-sliders-wrapper{padding-left:0;padding-right:0}
    
    /* Agence */
    .agence-grid{grid-template-columns:1fr}
    .agence-section{height:auto}
    
    /* Service pages hero */
    .service-hero{padding-top:7rem;padding-bottom:3rem}
    .service-hero-content{text-align:center;align-items:center}
    .service-hero-content .hero-button-contain{justify-content:center}
    
    /* Service page grids */
    .md-projects-grid{grid-template-columns:repeat(2,1fr)}
    .md-process-grid{flex-wrap:wrap}
    .md-process-grid .md-process-step{flex:1 1 calc(50% - 1.5rem);min-width:200px}
    .md-formats-row{grid-template-columns:1fr}
    .md-format-img{max-width:20rem;margin:0 auto}
    
    /* Chiffres */
    .projet-chiffre-contain{grid-template-columns:1fr 1fr}
    
    /* Accordions */
    .accordian-list{width:100%}
    
    /* Blog */
    .blog-article-layout{grid-template-columns:1fr}
    .blog-article-sidebar{display:none}
    .blog-post-sommaire{display:none}
    .blog-article-hero{grid-template-columns:1fr}
    .blog-article-hero-img{min-height:250px}
    
    /* Splide avis */
    .splide.is-2{width:100%}
    .splide__track.is-2{height:auto}
    .splide__list.is-2{height:42rem}
    .splide__slide.is-2{width:100%}
    .splide__item.is-2{padding:1rem}
    .splide__arrows.is-center{justify-content:flex-start}
    
    /* Breadcrumb */
    .breadcrumb-wrap{margin-bottom:0.75rem!important}
}

/* ===================================
   MOBILE PORTRAIT (max-width: 479px)
   =================================== */
@media(max-width:479px){
    /* Typo */
    .heading-style-h1{font-size:2rem}
    .is-italic{font-size:2.6rem}
    .text-span{font-size:2.5rem}
    
    /* Hero */
    .hero-component{gap:2.5rem}
    .hero-button-contain{flex-direction:column;gap:.7rem}
    .hero-heading-contain{gap:1.1rem}
    
    /* Navigation */
    .navigation-container-mob{padding:0.5rem 1.25rem}
    .flowbase-logo{width:70px}
    .mobile-right-nav .button{padding:0.35rem 0.75rem;font-size:0.8rem}
    .mobile-right-nav{gap:0.5rem}
    
    /* CTA */
    
    
    /* Footer */
    .footer-component-down{grid-template-columns:1fr 1fr}
    .obligations-contain{grid-template-columns:auto;grid-auto-flow:row}
    
    /* Grilles */
    .format-visuel{grid-template-columns:2fr}
    .format-img{height:auto}
    .equipe-component{grid-template-columns:1fr}
    .video-wrapper-verticale{grid-template-columns:1fr}
    .video-grid-container{height:500px}
    .projet-chiffre-contain{grid-template-columns:1fr}
    .projet-photo-wrap{min-height:55vw}
    
    /* Process steps */
    .md-process-grid{flex-direction:column}
    .md-process-grid .md-process-step{min-width:100%}
    
    /* Splide */
    .splide__list.is-2{height:45rem}
    
    /* Logos */
    .ticker-logo{height:3rem}
    
    /* Process mobile */
    .process-mobile-component{width:90vw}
    
    /* Blog */
    .blog-article-hero-img{min-height:200px}
}

/* === SPLIDE ARROWS FIX === */
.splide__arrow{background:none;border:none;cursor:pointer;padding:0.5rem;color:currentColor;-webkit-appearance:none;appearance:none}
.splide__arrow svg{width:100px;height:15px}
.splide__arrows{display:flex;gap:1.5rem;justify-content:center;margin-top:1rem}
.splide__arrows.is-center{justify-content:center}

/* === GALLERY SECTION MOBILE FIX === */
@media(max-width:767px){
    .gallery-section{overflow:hidden}
    .gallery-contain{overflow:hidden}
    .project-sliders-wrapper{overflow:hidden;padding:0}
    
    /* Agence section */
    .agence-grid{grid-template-columns:1fr}
    .agence-img{min-height:300px;max-height:400px}
    
    /* SC features grid */
    .sc-features{grid-template-columns:1fr!important}
    
    /* Global overflow prevention */
    .padding-global{overflow:hidden}
    section{overflow:hidden}
    .container-large{overflow:hidden}
    
    /* Process mobile slider height */
    .splide.is-2{overflow:visible}
    .splide__track.is-2{overflow:hidden}
    .splide__list.is-2{height:auto}
    .splide__slide.is-2{width:100%}
    .splide__item.is-2{padding:0}
    
    /* Projet ticker mobile */
    .projet-ticker-wrap{overflow:hidden;width:100%}
    .projet-ticker{overflow:hidden}
    .projet-item[item-style='paysage']{width:70vw;height:12rem}
    .projet-item[item-style='verticale']{width:25vw;height:12rem}
}

@media(max-width:479px){
    .sc-features{grid-template-columns:1fr!important}
    .splide__arrows{gap:1rem}
    .splide__arrow svg{width:80px;height:12px}
    .projet-item[item-style='paysage']{width:80vw;height:10rem}
    .projet-item[item-style='verticale']{width:35vw;height:10rem}
    .agence-img{min-height:250px;max-height:350px}
}

/* === GALLERY SECTION MOBILE COMPLETE FIX === */
@media(max-width:767px){
    /* Gallery mobile */
    .gallery-section{padding:1rem 0}
    .gallery-section .marquee-slide{width:220px}
    .gallery-section .marquee-wrapper{gap:0.5rem;margin-bottom:0.5rem}
    .gallery-section .marquee-track{gap:0.5rem}
    .gallery-content{padding-bottom:1.5rem;gap:1rem}
    .gallery-content .heading-style-h2{font-size:1.5rem}
}

@media(max-width:479px){
    .gallery-section .marquee-slide{width:160px}
    .gallery-section .marquee-wrapper{gap:0.25rem;margin-bottom:0.25rem}
    .gallery-section .marquee-track{gap:0.25rem}
}

/* === PROCESS MOBILE SLIDER FIX === */
@media(max-width:767px){
    .splide__list.is-2{height:auto!important}
    .splide__slide.is-2{height:auto!important}
    .splide__item.is-2{
        display:flex;
        flex-direction:column;
        gap:1.25rem;
        padding:0 0.5rem;
    }
    .process-mobile-img{
        width:100%;
        height:auto;
        aspect-ratio:16/10;
        object-fit:cover;
        border-radius:8px;
    }
    .process-mobile-section .padding-section-medium{padding-top:2rem;padding-bottom:2rem}
    .process-mobile-component{gap:1.5rem;width:100%!important}
    .splide__arrows{margin-top:0.5rem}
    .button-process-wrap{padding:1rem 0 2rem}
}
@media(max-width:479px){
    .splide__list.is-2{height:auto!important}
    .process-mobile-component{width:100%!important}
}

/* === GALLERY MOBILE === */
@media(max-width:767px){
    .gallery-section .marquee-slide{width:220px}
    .gallery-section .marquee-wrapper{gap:0.5rem;margin-bottom:0.5rem}
    .gallery-section .marquee-track{gap:0.5rem}
    .gallery-section .marquee-wrapper.is-left{animation-duration:20s}
    .gallery-section .marquee-wrapper.is-right{animation-duration:20s}
}


/* Hero alignment now uses standard padding-global system */

/* Hero buttons */
.hero-button-contain .button.is-third{padding:0.6rem 1.75rem;border-radius:0.25rem;font-size:1rem}
.hero-button-contain .button.is-secondary{background:transparent;border:none;padding:0.35rem 1rem;font-size:1rem}

/* Hide play button + label on hover video */
.projet-button{transition:opacity 0.4s ease}
.projet-main-content:hover .projet-button{opacity:0}
.projet-main-content:hover .layer-gradient{opacity:0}
.layer-gradient{transition:opacity 0.4s ease}

/* Agence compact dropdown */
.agence-dropdown{position:relative}
.agence-drop-menu{position:absolute;top:100%;right:0;min-width:340px;background:#1a1a24;border:1px solid rgba(255,255,255,0.08);border-radius:0.75rem;padding:1.25rem;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity 0.3s ease,transform 0.3s ease,visibility 0.3s;z-index:1000;margin-top:0.75rem}
.agence-dropdown:hover .agence-drop-menu,.agence-drop-menu:hover{opacity:1;visibility:visible;transform:translateY(0)}
.agence-drop-label{display:block;font-size:0.6875rem;font-weight:600;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:1rem}
.agence-drop-item{display:flex;align-items:flex-start;gap:0.875rem;padding:0.625rem;border-radius:0.5rem;text-decoration:none;transition:background 0.2s ease;margin-bottom:0.25rem}
.agence-drop-item:hover{background:rgba(255,255,255,0.06)}
.agence-drop-icon{width:44px;height:44px;border-radius:0.625rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.agence-drop-title{font-size:0.9375rem;font-weight:600;color:#fff;margin-bottom:0.2rem}
.agence-drop-desc{font-size:0.8125rem;color:rgba(255,255,255,0.5);line-height:1.4}

/* Agence dropdown — compact single column */
.navbar-drop-container.is-agence{gap:0;padding:0;align-items:stretch;width:auto}
.navbar-drop-container.is-agence > .nav-column{background:none;padding:0;min-width:0;width:260px}

/* Agence dropdown compact */
.dropdown:has(.is-agence){position:relative}
.dropdown:has(.is-agence) .dropdown-list{left:auto;right:auto;width:auto;padding-top:1rem}
.dropdown:has(.is-agence) .dropdown-list-full-wrap{max-width:none;width:auto;padding:1.25rem;margin-top:0.5rem}

/* Devis page — navbar always dark */
.page-devis .navigation-wrap,.single-projet .navigation-wrap{background:#00030f}
.footer-entreprises{font-family:'Outfit',sans-serif!important;font-weight:300!important;font-size:1.15rem!important}

/* Vimeo background iframe — cover behavior */
.vimeo-bg-cover,



.md-project-vimeo{position:absolute;inset:0;z-index:1;overflow:hidden}
.md-project-vimeo iframe{position:absolute;inset:0;width:100%;height:100%;border:none}

@media(max-width:767px){
    .logo-row .ticker-logo{height:3.5rem!important}
    .logo-row{gap:1.5rem 2rem}
}

/* === Content protection === */
img{-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none;pointer-events:none}
a img{pointer-events:none}
a{-webkit-user-drag:none}
video{-webkit-user-drag:none;pointer-events:none}
body{-webkit-touch-callout:none}