:root{--cs-ink:#101010;--cs-paper:#f2efe8;--cs-white:#fff;--cs-pink:#e44050;--cs-muted:#777;--cs-line:rgba(16,16,16,.18);--cs-dark-line:rgba(255,255,255,.18);--cs-max:1500px;--cs-pad:clamp(22px,4vw,72px)}*{box-sizing:border-box}html{scroll-behavior:smooth}body.cs-body{margin:0;background:var(--cs-paper);color:var(--cs-ink);font-family:Arial,Helvetica,sans-serif;line-height:1.35}.cs-body a{color:inherit;text-decoration:none}.cs-skip{position:fixed;left:12px;top:-100px;z-index:1000;background:#fff;padding:12px 16px}.cs-skip:focus{top:12px}.cs-header{position:fixed;z-index:100;top:0;left:0;right:0;height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--cs-pad);mix-blend-mode:difference;color:#fff}.cs-brand{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:800;letter-spacing:.16em}.cs-brand__mark{width:31px;height:31px;border:1px solid currentColor;display:grid;place-items:center;font-size:10px}.cs-nav__toggle{display:none;border:0;background:none;color:inherit;font:inherit}.cs-nav__panel{display:flex;align-items:center;gap:clamp(14px,2vw,32px);font-size:12px;font-weight:700}.cs-nav__cta{border:1px solid currentColor;padding:11px 16px}.cs-kicker,.cs-section__eyebrow{font-size:11px;letter-spacing:.18em;font-weight:800;text-transform:uppercase}.cs-hero{min-height:100vh;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);background:#fff}.cs-hero__copy{padding:clamp(130px,15vh,190px) var(--cs-pad) 72px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.cs-hero h1{margin:25px 0 30px;font-size:clamp(52px,6.2vw,112px);line-height:.92;letter-spacing:-.065em;font-weight:800;max-width:920px}.cs-hero h1 em,.cs-section h2 em,.cs-contact h2 em{font-family:Georgia,'Times New Roman',serif;font-weight:400}.cs-hero__lead{max-width:570px;font-size:clamp(17px,1.35vw,23px);line-height:1.45;margin:0 0 34px}.cs-button{display:inline-flex;align-items:center;gap:34px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:16px 18px;border:1px solid}.cs-button--dark{background:var(--cs-ink);color:#fff;border-color:var(--cs-ink)}.cs-button--light{color:#fff;border-color:#fff}.cs-hero__media{position:relative;min-height:100vh;overflow:hidden;background:var(--cs-pink)}.cs-hero__video{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}.cs-video-toggle{position:absolute;right:20px;bottom:20px;z-index:2;border:1px solid rgba(255,255,255,.7);background:rgba(0,0,0,.18);color:#fff;padding:9px 13px;font-size:11px;backdrop-filter:blur(5px)}.cs-hero__caption{position:absolute;bottom:22px;left:24px;color:#fff;font-size:9px;letter-spacing:.18em;font-weight:700}.cs-section{padding:clamp(90px,11vw,180px) var(--cs-pad);max-width:var(--cs-max);margin:0 auto}.cs-section__eyebrow{margin-bottom:55px}.cs-intro__grid,.cs-factory__grid{display:grid;grid-template-columns:1fr 1fr;gap:8vw}.cs-section h2,.cs-clients h2{font-size:clamp(42px,5.4vw,90px);line-height:.98;letter-spacing:-.055em;margin:0}.cs-large-copy{font-size:clamp(25px,2.7vw,43px);line-height:1.12;letter-spacing:-.03em;margin-top:0}.cs-triad{margin-top:55px;border-top:1px solid var(--cs-line);border-bottom:1px solid var(--cs-line);display:grid;grid-template-columns:repeat(3,1fr)}.cs-triad span{padding:18px 12px 18px 0;font-weight:700}.cs-section__head{display:grid;grid-template-columns:1.4fr .6fr;gap:8vw;align-items:end;margin-bottom:65px}.cs-section__head .cs-kicker{margin-bottom:18px}.cs-section__head>p{max-width:380px;margin:0 0 5px;color:#666}.cs-projects{padding-top:50px}.cs-project-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 34px;align-items:start}.cs-project-card__visual{aspect-ratio:4/3;background:#dedbd4;display:grid;place-items:center;text-align:center;font-size:13px;letter-spacing:.12em;font-weight:800}.cs-project-card--tall{margin-top:100px}.cs-project-card--tall .cs-project-card__visual{aspect-ratio:4/5}.cs-project-card--wide .cs-project-card__visual{aspect-ratio:16/10}.cs-project-card__meta{display:flex;justify-content:space-between;gap:20px;padding-top:13px;font-size:12px}.cs-os{background:#101010;color:#fff;padding:clamp(100px,11vw,180px) var(--cs-pad);overflow:hidden}.cs-os__intro{max-width:930px;margin:0 auto 90px}.cs-os__intro h2{font-size:clamp(55px,8vw,132px);line-height:.9;letter-spacing:-.065em;margin:22px 0 28px}.cs-os__intro>p:last-child{max-width:650px;font-size:20px;color:#c9c9c9}.cs-os__stage{max-width:1300px;margin:auto;display:grid;grid-template-columns:1.45fr .55fr;gap:70px;align-items:center}.cs-os__orbit{position:relative;aspect-ratio:1/1;border:1px solid var(--cs-dark-line);border-radius:50%;max-width:760px}.cs-os__orbit:before,.cs-os__orbit:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.09);border-radius:50%;inset:12%;}.cs-os__orbit:after{inset:29%}.cs-os__center{position:absolute;inset:33%;border-radius:50%;background:var(--cs-pink);display:grid;place-content:center;text-align:center}.cs-os__center span{font-size:12px;letter-spacing:.2em}.cs-os__center strong{font-size:70px;line-height:.9}.cs-os__center small{font-size:8px;letter-spacing:.16em;margin-top:12px}.cs-os__step{position:absolute;transform:translate(-50%,-50%);background:#101010;color:#fff;border:1px solid #555;border-radius:999px;padding:10px 14px;display:flex;gap:8px;cursor:pointer;font-size:11px;white-space:nowrap}.cs-os__step b{color:#8c8c8c}.cs-os__step.is-active{background:#fff;color:#101010;border-color:#fff}.cs-os__step:nth-of-type(1){left:50%;top:2%}.cs-os__step:nth-of-type(2){left:85%;top:22%}.cs-os__step:nth-of-type(3){left:96%;top:60%}.cs-os__step:nth-of-type(4){left:72%;top:92%}.cs-os__step:nth-of-type(5){left:28%;top:92%}.cs-os__step:nth-of-type(6){left:4%;top:60%}.cs-os__step:nth-of-type(7){left:15%;top:22%}.cs-os__detail{border-top:1px solid var(--cs-dark-line);padding-top:28px;min-height:250px}.cs-os__detail-num{font-size:12px;color:#888}.cs-os__detail h3{font-size:clamp(40px,5vw,72px);margin:15px 0 12px;letter-spacing:-.04em}.cs-os__detail p{font-family:Georgia,serif;font-size:25px;color:#d5d5d5}.cs-os__closing{max-width:1300px;margin:80px auto 0;border-top:1px solid var(--cs-dark-line);padding-top:28px;font-size:clamp(28px,3vw,48px)}.cs-os__closing em{font-family:Georgia,serif}.cs-factory{max-width:none;background:var(--cs-pink);color:#fff}.cs-factory__grid{max-width:var(--cs-max);margin:auto}.cs-factory .cs-section__eyebrow{max-width:var(--cs-max);margin-left:auto;margin-right:auto}.cs-tech-strip{max-width:var(--cs-max);margin:80px auto 0;border-top:1px solid rgba(255,255,255,.45);border-bottom:1px solid rgba(255,255,255,.45);display:flex;flex-wrap:wrap}.cs-tech-strip span{padding:18px 28px 18px 0;margin-right:28px;font-size:13px;font-weight:800}.cs-list-grid{border-top:1px solid var(--cs-line)}.cs-list-grid article{display:grid;grid-template-columns:70px .8fr 1.2fr;gap:25px;padding:28px 0;border-bottom:1px solid var(--cs-line);align-items:start}.cs-list-grid h3{font-size:clamp(25px,2.4vw,38px);margin:0}.cs-list-grid p{margin:5px 0 0;max-width:550px;color:#666}.cs-history{padding-top:80px}.cs-timeline{border-top:1px solid var(--cs-line)}.cs-timeline article{display:grid;grid-template-columns:180px 1fr;padding:30px 0;border-bottom:1px solid var(--cs-line)}.cs-timeline time{font-size:clamp(28px,4vw,60px);font-weight:800}.cs-timeline h3{font-size:28px;margin:0 0 8px}.cs-timeline p{margin:0;color:#666}.cs-timeline .is-placeholder{opacity:.45}.cs-clients{background:#151515;color:#fff;padding:clamp(100px,11vw,180px) var(--cs-pad)}.cs-clients__head{max-width:1100px;margin:0 auto 70px}.cs-clients__head .cs-kicker{margin-bottom:20px}.cs-logo-grid{max-width:1300px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--cs-dark-line);border-left:1px solid var(--cs-dark-line)}.cs-logo-grid span{height:150px;display:grid;place-items:center;border-right:1px solid var(--cs-dark-line);border-bottom:1px solid var(--cs-dark-line);font-size:12px;letter-spacing:.12em;color:#a7a7a7}.cs-view-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.cs-view-grid__image{aspect-ratio:4/3;background:#d9d6cf;display:grid;place-items:center;font-size:11px;letter-spacing:.13em;font-weight:800}.cs-view-grid article:nth-child(2) .cs-view-grid__image{background:#101010;color:#fff}.cs-view-grid article:nth-child(3) .cs-view-grid__image{background:var(--cs-pink);color:#fff}.cs-view-grid p{font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin:16px 0 8px}.cs-view-grid h3{font-size:30px;margin:0}.cs-contact{min-height:82vh;background:#101010;color:#fff;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:100px var(--cs-pad)}.cs-contact h2{font-size:clamp(70px,11vw,180px);line-height:.82;letter-spacing:-.07em;max-width:1250px;margin:28px 0 60px}.cs-footer{background:#101010;color:#888;border-top:1px solid var(--cs-dark-line);display:flex;justify-content:space-between;padding:24px var(--cs-pad);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
@media(max-width:900px){.cs-header{height:68px;mix-blend-mode:normal;background:rgba(255,255,255,.9);color:#111;backdrop-filter:blur(10px)}.cs-nav__toggle{display:flex;align-items:center;gap:10px}.cs-nav__burger{width:18px;height:1px;background:currentColor;box-shadow:0 5px currentColor}.cs-nav__panel{position:fixed;inset:68px 0 auto 0;background:#101010;color:#fff;display:none;flex-direction:column;align-items:flex-start;padding:28px var(--cs-pad) 40px;gap:20px}.cs-nav__panel.is-open{display:flex}.cs-hero{grid-template-columns:1fr}.cs-hero__copy{min-height:78vh;padding-top:115px}.cs-hero__media{min-height:68vh}.cs-intro__grid,.cs-factory__grid,.cs-section__head,.cs-os__stage{grid-template-columns:1fr}.cs-triad{grid-template-columns:1fr}.cs-triad span+span{border-top:1px solid var(--cs-line)}.cs-project-grid{grid-template-columns:1fr}.cs-project-card--tall{margin-top:0}.cs-os__stage{gap:55px}.cs-os__orbit{width:min(90vw,650px);margin:auto}.cs-os__detail{min-height:auto}.cs-list-grid article{grid-template-columns:45px 1fr}.cs-list-grid article p{grid-column:2}.cs-timeline article{grid-template-columns:110px 1fr}.cs-logo-grid{grid-template-columns:repeat(2,1fr)}.cs-view-grid{grid-template-columns:1fr}.cs-footer{gap:20px;flex-direction:column}}
@media(max-width:560px){.cs-brand__name{display:none}.cs-hero h1{font-size:clamp(49px,14vw,72px)}.cs-hero__lead{font-size:17px}.cs-hero__media{min-height:58vh}.cs-section{padding-top:90px;padding-bottom:90px}.cs-os{padding-top:90px;padding-bottom:90px}.cs-os__orbit{border-radius:0;aspect-ratio:auto;display:grid;gap:8px;border:0}.cs-os__orbit:before,.cs-os__orbit:after,.cs-os__center{display:none}.cs-os__step{position:static;transform:none;border-radius:0;width:100%;justify-content:space-between;padding:14px}.cs-logo-grid{grid-template-columns:1fr}.cs-logo-grid span{height:105px}.cs-timeline article{grid-template-columns:1fr;gap:8px}.cs-contact{min-height:70vh}.cs-contact h2{font-size:20vw}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cs-hero__video{display:none}.cs-hero__media{background:url('../media/hero-poster.jpg') center/cover no-repeat}.cs-video-toggle{display:none}}

/* === V2 DA — 02/10/2026 ======================================== */
/* Header : logo cachet, état blanc sur Hero vidéo, noir au scroll */
.cs-header{
  mix-blend-mode:normal;
  background:transparent;
  transition:background-color .28s ease,color .28s ease,box-shadow .28s ease;
}
.cs-brand{display:block;line-height:0;flex:0 0 auto}
.cs-brand__logo{display:block;width:clamp(58px,4.8vw,78px);height:auto}
.cs-header.is-over-hero .cs-nav{color:#fff}
.cs-header.is-over-hero .cs-nav__cta{border-color:rgba(255,255,255,.82)}
.cs-header:not(.is-over-hero){background:rgba(242,239,232,.94);color:var(--cs-ink);box-shadow:0 1px 0 rgba(16,16,16,.10);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cs-header:not(.is-over-hero) .cs-nav{color:var(--cs-ink)}
.cs-header a:focus-visible,.cs-header button:focus-visible{outline:2px solid currentColor;outline-offset:5px}

/* CTA : le sélecteur global .cs-body a est plus spécifique dans Stukram. */
.cs-body a.cs-button--dark{background:var(--cs-ink);color:#fff;border-color:var(--cs-ink)}
.cs-body a.cs-button--dark:hover,.cs-body a.cs-button--dark:focus-visible{background:#fff;color:var(--cs-ink)}
.cs-body a.cs-button--light{color:#fff;border-color:#fff}
.cs-body a.cs-button--light:hover,.cs-body a.cs-button--light:focus-visible{background:#fff;color:var(--cs-ink)}

/* Hero vidéo : conserver la main entière. Le fond rose absorbe naturellement
   les zones libres du 16:9 dans le cadre vertical. */
.cs-hero__media{background:#ef4051}
.cs-hero__video{object-fit:contain;object-position:center center;background:#ef4051}

/* Sections sombres : forcer la lisibilité contre les styles génériques Stukram. */
.cs-os,.cs-os h2,.cs-os h3,.cs-os p,.cs-os .cs-kicker,.cs-os__closing,.cs-os__center{color:#fff}
.cs-os__intro>p:last-child,.cs-os__detail p{color:#fff}
.cs-os__detail-num{color:rgba(255,255,255,.72)}
.cs-os__step{color:#fff}
.cs-os__step.is-active{color:#101010}
.cs-os__step.is-active b{color:#555}

.cs-clients,.cs-clients h2,.cs-clients p,.cs-clients .cs-kicker{color:#fff}
.cs-logo-grid span{color:#fff}

.cs-footer,.cs-footer span{color:#fff}

@media(max-width:900px){
  .cs-header{height:72px;background:transparent;color:#111;backdrop-filter:none;-webkit-backdrop-filter:none}
  .cs-header.is-over-hero{background:rgba(242,239,232,.94);box-shadow:0 1px 0 rgba(16,16,16,.08)}
  .cs-header.is-over-hero .cs-nav{color:var(--cs-ink)}
  .cs-brand__logo{width:56px}
  .cs-nav__panel{color:#fff}
  .cs-nav__panel a{color:#fff}
  .cs-hero__video{object-fit:contain;object-position:center center}
}

@media(prefers-reduced-motion:reduce){
  .cs-header{transition:none}
  .cs-hero__media{background:#ef4051 url('../media/hero-poster.jpg') center/contain no-repeat}
}


/* =========================================================
   CLAN SAUVAGE — HEADER RESPONSIVE V2
   Desktop large > 1750 : navigation complète
   <= 1750 : navigation burger, sans modifier le Hero desktop
   ========================================================= */

@media (min-width:901px) and (max-width:1920px){
  .cs-header,
  .cs-header:not(.is-scrolled).is-over-hero,
  .cs-header.is-scrolled{
    height:78px !important;
    padding:0 clamp(22px,3vw,42px) !important;
    background:rgba(242,239,232,.97) !important;
    color:#101010 !important;
    box-shadow:0 1px 0 rgba(16,16,16,.12) !important;
    mix-blend-mode:normal !important;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }

  .cs-header:not(.is-scrolled) .cs-brand,
  .cs-header.is-scrolled .cs-brand{
    transform:none !important;
  }

  .cs-header:not(.is-scrolled) .cs-brand__logo,
  .cs-header.is-scrolled .cs-brand__logo{
    width:62px !important;
    max-width:none !important;
  }

  .cs-header .cs-nav,
  .cs-header .cs-nav a,
  .cs-header .cs-nav button,
  .cs-header:not(.is-scrolled).is-over-hero .cs-nav{
    color:#101010 !important;
  }

  .cs-nav__toggle{
    display:flex !important;
    align-items:center;
    gap:10px;
    border:0;
    background:none;
    color:#101010 !important;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.06em;
    cursor:pointer;
  }

  .cs-nav__burger{
    width:20px;
    height:1px;
    background:currentColor;
    box-shadow:0 6px currentColor;
  }

  .cs-header .cs-nav__panel{
    position:fixed !important;
    top:78px;
    left:0;
    right:0;
    display:none !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:18px !important;
    padding:30px clamp(22px,3vw,42px) 38px !important;
    background:#101010 !important;
    color:#fff !important;
    border-top:1px solid rgba(255,255,255,.12);
    box-shadow:0 18px 40px rgba(0,0,0,.18);
  }

  .cs-header .cs-nav__panel.is-open{
    display:flex !important;
  }

  .cs-header .cs-nav__panel > a,
  .cs-header .cs-nav__panel .cs-lang-switch,
  .cs-header .cs-nav__panel .cs-lang-switch a{
    color:#fff !important;
    font-size:15px !important;
  }

  .cs-header .cs-nav__panel > .cs-nav__cta,
  .cs-header .cs-nav__panel > .cs-nav__login{
    width:auto;
    min-width:190px;
    align-self:flex-start;
    justify-content:space-between;
    padding:14px 16px !important;
    border-color:rgba(255,255,255,.65) !important;
  }

  .cs-lang-switch{
    margin:4px 0 0 !important;
  }
}


/* === HOTFIX PUBLIC — 11/10/2026 ================================
   FR/EN : bascule burger avant troncature des libellés longs.
   CTA Terrains conquis : texte blanc sur fond noir.
   =============================================================== */
.cs-body a.cs-button-dark,
.cs-body a.cs-button-dark:visited{
  color:#fff !important;
}
.cs-body a.cs-button-dark:hover,
.cs-body a.cs-button-dark:focus-visible{
  color:#fff !important;
}





/* Burger menu — CTA compacts, non pleine largeur */
.cs-header .cs-nav__panel > .cs-nav__login{
  margin-top:8px;
}


/* Burger FR/EN — CTA compacts et alignés */
@media (max-width:1920px){
  .cs-header .cs-nav__panel > .cs-nav__cta,
  .cs-header .cs-nav__panel > .cs-nav__login{
    width:auto !important;
    min-width:190px;
    align-self:flex-start;
    justify-content:space-between;
  }
}


/* Header desktop FR/EN — alignement vertical des deux CTA */
@media (min-width:1921px){
  .cs-header .cs-nav__panel > .cs-nav__login,
  .cs-header .cs-nav__panel > .cs-nav__cta{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:46px !important;
    padding:0 18px !important;
    line-height:1 !important;
    box-sizing:border-box !important;
    vertical-align:middle !important;
  }
}


/* Header desktop FR/EN — micro-alignement du bouton Sign in / Se connecter */
@media (min-width:1921px){
  .cs-header .cs-nav__panel > .cs-nav__login{
    transform:translateY(-4px) !important;
  }
}

/* Legacy exact — bouton connexion dans le burger */
.cs-nav__panel > .cs-nav__login{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:0 24px;
    border:1px solid currentColor;
    text-decoration:none;
    font-weight:700;
    width:fit-content;
}

@media(max-width:900px){
    .cs-nav__panel > .cs-nav__login{
        width:100%;
        box-sizing:border-box;
    }
}