/* ============================================================
   RAI WEB DESIGN — style.css
   Direction : sobre et lumineuse. Blanc casse, charbon, une seule
   touche de couleur (le vert du lagon), serif legere et filets fins.
   Les images sont des rendus 3D generes pour le studio.
   Aucune bibliotheque : animations en CSS, defilement natif.
   ============================================================ */

@font-face{font-family:'Source Serif 4';src:url('assets/fonts/ss4.woff2') format('woff2');font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('assets/fonts/ss4-italic.woff2') format('woff2');font-weight:200 900;font-style:italic;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('assets/fonts/sans.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'Gloock';src:url('assets/fonts/gloock.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Schibsted Grotesk';src:url('assets/fonts/schibsted.woff2') format('woff2');font-weight:400 900;font-display:swap}
@font-face{font-family:'Sig';src:url('assets/fonts/sig.woff2') format('woff2');font-weight:400;font-display:swap}

:root{
  --ivory:#F3F0EA; --ivory-2:#EAE6DE; --paper:#FBF9F5;
  --ink:#161616; --ink-2:#5B5750;
  --char:#141414; --char-2:#1C1C1C;
  --tx:#F2EFEA; --tx-2:#A7A39C;
  /* la seule couleur : le vert du lagon, fonce sur clair, clair sur fonce */
  --lagoon:#2E6B66; --lagoon-lt:#9CCFC8;

  --serif:'Gloock','Source Serif 4','Iowan Old Style',Georgia,serif;
  --sans:'Schibsted Grotesk','Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --sigf:'Sig','Brush Script MT',cursive;

  --gutter:clamp(1.1rem,4.4vw,4rem);
  --maxw:1320px;
  --e:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.76,0,.24,1);
  --top-h:76px;
}
.light{--fg:var(--ink);--fg-2:var(--ink-2);--ln:rgba(22,22,22,.12);--ln-2:rgba(22,22,22,.24);--surf:var(--paper);--accent:var(--lagoon);
  --btn-bg:var(--ink);--btn-fg:var(--ivory);--btn-h:#333;background:var(--ivory);color:var(--fg)}
.dark{--fg:var(--tx);--fg-2:var(--tx-2);--ln:rgba(242,239,234,.12);--ln-2:rgba(242,239,234,.26);--surf:var(--char-2);--accent:var(--lagoon-lt);
  --btn-bg:var(--ivory);--btn-fg:var(--ink);--btn-h:#fff;background:var(--char);color:var(--fg)}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--top-h);background:var(--ivory)}
body{margin:0;background:var(--ivory);color:var(--ink);font:400 clamp(1rem,.95rem + .2vw,1.1rem)/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit}
p,h1,h2,h3,ul,ol,figure{margin:0}
button{font:inherit;color:inherit}
::selection{background:var(--lagoon);color:#fff}
:focus-visible{outline:1.5px solid var(--lagoon);outline-offset:4px}
.dark :focus-visible{outline-color:var(--lagoon-lt)}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:1rem;top:-4rem;z-index:200;background:var(--ink);color:var(--ivory);padding:.7rem 1rem;border-radius:999px;text-decoration:none}
.skip:focus{top:1rem}

/* ---------- apparitions ---------- */
html.js .rv,html.js .reveal-up{opacity:0;transform:translateY(28px);transition:opacity 1.1s var(--e),transform 1.1s var(--e)}
html.js .rv.in,html.js .reveal-up.in{opacity:1;transform:none}

/* ---------- typographie ---------- */
.label{display:flex;align-items:center;gap:.9rem;margin-bottom:clamp(1.2rem,2.6vw,1.8rem);
  font:500 .74rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--fg-2)}
.label::before{content:"";width:34px;height:1px;background:var(--accent);flex:none}
.label i{font-style:normal;color:var(--accent)}
.label--c{justify-content:center}
.h2{font:300 clamp(2.4rem,5.6vw,5.4rem)/1.02 var(--serif);letter-spacing:-.025em;margin-bottom:clamp(2.4rem,5.4vw,4rem);text-wrap:balance}
.h2 em{font-style:italic;color:var(--accent)}
.sec{padding-block:clamp(5rem,12vw,10rem)}

/* ---------- boutons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.75rem;min-height:52px;padding:.85rem 1.6rem;
  font:500 .95rem/1 var(--sans);letter-spacing:.02em;text-decoration:none;cursor:pointer;border-radius:999px;border:1px solid transparent;
  transition:transform .4s var(--e),background-color .3s,border-color .3s,color .3s}
.btn svg{transition:transform .4s var(--e)}
.btn:hover svg{transform:translateX(4px)}
.btn--gold,.btn--p,.btn--dark{background:var(--btn-bg);color:var(--btn-fg)}
.btn--gold:hover,.btn--p:hover,.btn--dark:hover{background:var(--btn-h)}
.btn--line{border-color:var(--ln-2);color:inherit;background:transparent}
.btn--line:hover{border-color:currentColor}
.btn--xl{min-height:60px;padding:1.05rem 2rem;font-size:1.02rem}

/* ============================================================
   OUVERTURE : le nom monte lettre par lettre, un filet se
   remplit, puis le rideau se leve.
   ============================================================ */
.intro{position:fixed;inset:0;z-index:150;background:var(--ivory);color:var(--ink);display:none;
  flex-direction:column;align-items:center;justify-content:center;clip-path:inset(0 0 0 0);transition:clip-path 1s var(--e-io)}
html.js:not(.no-intro) .intro{display:flex}
.intro.off{clip-path:inset(0 0 100% 0)}
.intro__name{font:300 clamp(2.8rem,9.4vw,8.6rem)/1 var(--serif);letter-spacing:-.03em;white-space:nowrap;overflow:hidden;padding:.08em .04em}
.intro__name span{display:inline-block;transform:translateY(110%);animation:rise 1.1s var(--e) forwards}
.intro__name em{font-style:italic;color:var(--lagoon)}
.intro__name span:nth-child(1){animation-delay:.10s}.intro__name span:nth-child(2){animation-delay:.14s}
.intro__name span:nth-child(3){animation-delay:.18s}.intro__name span:nth-child(5){animation-delay:.24s}
.intro__name span:nth-child(6){animation-delay:.28s}.intro__name span:nth-child(7){animation-delay:.32s}
.intro__name em span:nth-child(1){animation-delay:.40s}.intro__name em span:nth-child(2){animation-delay:.44s}
.intro__name em span:nth-child(3){animation-delay:.48s}.intro__name em span:nth-child(4){animation-delay:.52s}
.intro__name em span:nth-child(5){animation-delay:.56s}.intro__name em span:nth-child(6){animation-delay:.60s}
@keyframes rise{to{transform:none}}
.intro__foot{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(1.6rem,6vh,3.4rem);display:flex;align-items:center;gap:1.4rem;
  font:500 .72rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.intro__line{flex:1;height:1px;background:rgba(22,22,22,.12);position:relative;overflow:hidden}
.intro__line b{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(0);animation:fill 1.9s var(--e-io) .2s forwards}
@keyframes fill{to{transform:scaleX(1)}}
.intro__n{font:300 1.6rem/1 var(--serif);letter-spacing:0;color:var(--ink);font-variant-numeric:tabular-nums;min-width:3ch;text-align:right}
.intro__skip{position:absolute;top:clamp(1rem,3vh,1.8rem);right:var(--gutter);min-height:44px;padding:.5rem 1.1rem;border-radius:999px;
  background:none;border:1px solid rgba(22,22,22,.24);color:var(--ink-2);font:500 .72rem var(--sans);letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.intro__skip:hover{color:var(--ink);border-color:var(--ink)}
@media (max-width:600px){ .intro__foot span:first-child{display:none} }

/* ============================================================
   BANNIERE
   ============================================================ */
.top{position:fixed;left:0;right:0;top:0;z-index:60;color:var(--ink);border-bottom:1px solid transparent;transition:background-color .5s,border-color .5s}
.top.is-scrolled{background:rgba(243,240,234,.94);border-bottom-color:rgba(22,22,22,.08)}
.top__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:var(--top-h);max-width:calc(var(--maxw) + 2rem);margin-inline:auto;padding-inline:var(--gutter)}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;min-height:44px}
.logo__mark{width:40px;height:19px;color:var(--ink)}
.logo__name{font:400 1.22rem/1 var(--serif);letter-spacing:-.005em}
.top__nav{display:flex;gap:clamp(1.2rem,2.8vw,2.6rem)}
.top__nav a{position:relative;font:500 .82rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink-2);padding-block:.9rem;transition:color .3s}
.top__nav a::after{content:"";position:absolute;left:0;right:0;bottom:.55rem;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--e)}
.top__nav a:hover{color:var(--ink)}
.top__nav a:hover::after{transform:scaleX(1);transform-origin:left}
.top__right{display:flex;align-items:center;gap:clamp(.6rem,1.4vw,1.1rem)}
.lang{display:flex;gap:2px;padding:3px;border:1px solid rgba(22,22,22,.16);border-radius:999px}
.lang button{background:none;border:0;border-radius:999px;min-width:40px;min-height:36px;font:500 .72rem var(--sans);letter-spacing:.14em;cursor:pointer;color:var(--ink-2)}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--ivory)}
.call{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:.55rem 1.2rem;border-radius:999px;background:var(--ink);color:var(--ivory);
  font:500 .8rem var(--sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:background .3s}
.call:hover{background:#333}
.mbtn{display:none;min-height:44px;padding:.5rem 1.1rem;border-radius:999px;border:1px solid rgba(22,22,22,.24);background:none;cursor:pointer;
  font:500 .76rem var(--sans);letter-spacing:.16em;text-transform:uppercase}
.mbtn__c{display:none}
html.menu-open .mbtn__o{display:none}
html.menu-open .mbtn__c{display:inline}
html.menu-open .top{background:var(--ivory)}
@media (max-width:1000px){ .top__nav{display:none} .mbtn{display:inline-flex;align-items:center} }
@media (max-width:640px){
  .top .lang{display:none}
  .call span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .call{width:44px;padding:0;justify-content:center}
  .logo__name{font-size:1.08rem}
}

/* ---------- menu plein ecran ---------- */
.menu{position:fixed;inset:0;z-index:55;background:var(--ivory);color:var(--ink);
  padding:calc(var(--top-h) + 2.4rem) var(--gutter) 2rem;display:flex;flex-direction:column;justify-content:space-between;overflow-y:auto;
  opacity:0;transition:opacity .45s var(--e)}
html.menu-open .menu{opacity:1}
.menu__nav{display:flex;flex-direction:column}
.menu__nav a{display:flex;align-items:baseline;gap:1.1rem;padding:.6rem 0;border-bottom:1px solid rgba(22,22,22,.1);text-decoration:none;
  transform:translateY(14px);opacity:0;transition:transform .7s var(--e),opacity .7s var(--e)}
html.menu-open .menu__nav a{transform:none;opacity:1}
html.menu-open .menu__nav a:nth-child(2){transition-delay:.03s}html.menu-open .menu__nav a:nth-child(3){transition-delay:.06s}
html.menu-open .menu__nav a:nth-child(4){transition-delay:.09s}html.menu-open .menu__nav a:nth-child(5){transition-delay:.12s}
html.menu-open .menu__nav a:nth-child(6){transition-delay:.15s}html.menu-open .menu__nav a:nth-child(7){transition-delay:.18s}
html.menu-open .menu__nav a:nth-child(8){transition-delay:.21s}
.menu__nav i{font:500 .72rem var(--sans);letter-spacing:.16em;color:var(--lagoon);font-style:normal;min-width:2.2ch}
.menu__nav em{font:300 clamp(1.8rem,6.4vw,2.8rem)/1.12 var(--serif);font-style:normal;letter-spacing:-.02em}
.menu__foot{display:grid;gap:.3rem;margin-top:2rem;color:var(--ink-2);font-size:.95rem}
.menu__foot a{min-height:44px;display:flex;align-items:center;text-decoration:none}
.menu__foot i{font-style:normal}
.lang--menu{display:none;width:max-content;margin-bottom:.8rem}
@media (max-width:640px){ .lang--menu{display:flex} }

/* ============================================================
   HERO : rien que de la typographie
   ============================================================ */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;
  padding:calc(var(--top-h) + 1.6rem) 0 1.2rem}
/* une lueur de lagon qui suit doucement le pointeur (variables posees par le script) */
.hero__glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(38vw circle at var(--gx,72%) var(--gy,30%),rgba(46,107,102,.13),transparent 70%),
             radial-gradient(30vw circle at 12% 88%,rgba(214,196,168,.28),transparent 70%);
  transition:background-position .2s}
.hero__wrap{position:relative;z-index:2;display:flex;flex-direction:column}
.eyebrow{display:inline-flex;align-items:center;gap:.8rem;margin-bottom:clamp(1.4rem,3vw,2.2rem);font:500 .74rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lagoon)}
.hero__t{font:300 clamp(3.2rem,min(7.4vw,12.5vh),9rem)/.92 var(--serif);letter-spacing:-.045em;color:var(--ink)}
.hero__t .ln{display:block;overflow:hidden;padding-bottom:.06em;white-space:nowrap}
.hero__t .ln>span{display:block}
.hero__t .ln--i1{padding-left:18%}
.hero__t .ln--i2{padding-left:34%;padding-bottom:.2em;margin-bottom:-.14em}
.hero__t em{font-style:italic;color:var(--lagoon);position:relative;padding-right:.04em}
/* le trait sous « fin », trace a la main */
.fin__line{position:absolute;left:-2%;right:-4%;bottom:-.04em;width:106%;height:.22em;overflow:visible}
.fin__line path{fill:none;stroke:var(--lagoon);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.4s var(--e) 1.1s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero__row{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem 4rem;margin-top:clamp(2rem,4vw,3.4rem)}
/* le mot qui change : une pile de mots, on en montre un a la fois */
.rot{font:300 clamp(1.4rem,2.4vw,2.1rem)/1.2 var(--serif);letter-spacing:-.01em;display:flex;gap:.35em;align-items:baseline;flex-wrap:wrap}
.rot__w{position:relative;display:inline-grid;height:1.25em;overflow:hidden;vertical-align:bottom}
.rot__w b{grid-area:1/1;font-weight:400;font-style:italic;color:var(--lagoon);white-space:nowrap;transform:translateY(110%);opacity:0;transition:transform .8s var(--e),opacity .8s var(--e)}
.rot__w b.on{transform:none;opacity:1}
.rot__w b.out{transform:translateY(-110%);opacity:0}
html:not(.js) .rot__w b:first-child{transform:none;opacity:1}
.hero__side{max-width:380px}
.hero__sub{color:var(--ink-2);font-size:1rem;line-height:1.65}
.hero__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.3rem}
.hero__meta{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:clamp(1.6rem,4vh,3rem);
  padding-top:1.2rem;border-top:1px solid var(--ln);font:500 .7rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.hero__meta i{font-style:normal;color:var(--ink)}
.hero__scroll{display:inline-flex;align-items:center;gap:.7rem}
.hero__scroll i{width:34px;height:1px;background:var(--ink);transform-origin:left;animation:drip 2.4s var(--e-io) infinite}
@keyframes drip{0%{transform:scaleX(0)}50%{transform:scaleX(1);transform-origin:left}51%{transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
/* entree du hero : les lignes montent l'une apres l'autre */
html.js .hero__t .ln>span{transform:translateY(105%)}
html.js.ready .hero__t .ln>span{animation:rise 1.3s var(--e) forwards}
html.js.ready .hero__t .ln:nth-child(2)>span{animation-delay:.08s}
html.js.ready .hero__t .ln:nth-child(3)>span{animation-delay:.16s}
html.js.ready .hero__t .ln:nth-child(4)>span{animation-delay:.24s}
html.js .eyebrow,html.js .hero__row,html.js .hero__meta{opacity:0}
html.js.ready .eyebrow{animation:fade 1s var(--e) forwards}
html.js.ready .hero__row{animation:fade 1.2s var(--e) .45s forwards}
html.js.ready .hero__meta{animation:fade 1.2s var(--e) .6s forwards}
html.js.ready.no-intro .hero__t .ln>span,html.js.ready.no-intro .eyebrow,html.js.ready.no-intro .hero__row,html.js.ready.no-intro .hero__meta{animation-duration:.01s;animation-delay:0s}
@keyframes fade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (max-width:900px){
  .hero{justify-content:flex-end}
  .hero__t{font-size:clamp(3rem,15vw,6rem)}
  .hero__t .ln--i1{padding-left:10%}
  .hero__t .ln--i2{padding-left:16%}
  .hero__row{flex-direction:column;align-items:flex-start;gap:1.6rem}
  .hero__meta span:nth-child(2){display:none}
}

/* ============================================================
   BANDEAU DEFILANT
   ============================================================ */
.ticker{overflow:hidden;padding-block:clamp(1.4rem,3vw,2.2rem);border-block:1px solid var(--ln)}
.ticker__track{display:flex;width:max-content;animation:tick 48s linear infinite}
.ticker__seq{display:flex;align-items:center;flex:none}
.ticker b{font:300 clamp(1.8rem,3.6vw,3.2rem)/1.15 var(--serif);white-space:nowrap;padding-inline:clamp(1.2rem,2.6vw,2.4rem);letter-spacing:-.02em}
.ticker b:nth-of-type(even){font-style:italic;color:var(--lagoon)}
.ticker i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--ink)}
@keyframes tick{to{transform:translateX(-50%)}}

/* ============================================================
   CHIFFRES
   ============================================================ */
.stats{padding-block:clamp(3.4rem,7vw,5.4rem);border-bottom:1px solid var(--ln)}
.stats__row{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:.4rem clamp(1rem,2.4vw,2.2rem);border-left:1px solid var(--ln);display:flex;flex-direction:column;gap:.8rem}
.stat:first-child{border-left:0;padding-left:0}
.stat__n{font:300 clamp(3rem,6vw,5.6rem)/1 var(--serif);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stat__n sup{font-size:.38em;vertical-align:top;margin-left:.06em;color:var(--accent)}
.stat__l{display:flex;flex-direction:column;line-height:1.35;font-size:.92rem}
.stat__l b{font-weight:500}
.stat__l em{font-style:normal;color:var(--fg-2)}
@media (max-width:760px){ .stats__row{grid-template-columns:1fr 1fr;row-gap:2.2rem} .stat:nth-child(3){border-left:0;padding-left:0} }

/* ============================================================
   MISSION
   ============================================================ */
.mission__txt{font:300 clamp(1.9rem,4.4vw,4.2rem)/1.14 var(--serif);letter-spacing:-.025em;max-width:22ch;text-wrap:pretty}
html.js .mission__txt w{color:#7F7A72;transition:color .6s ease}
html.js .mission__txt.in w{color:var(--ink);transition-delay:calc(var(--i) * 26ms)}
.mission__txt w.hot{font-style:italic;color:var(--lagoon)}
html.js .mission__txt w.hot{color:#4A7A75}
html.js .mission__txt.in w.hot{color:var(--lagoon)}
.mission__sig{display:flex;align-items:baseline;gap:1rem;margin-top:clamp(1.8rem,3.4vw,2.6rem)}
.sig{font:clamp(2.6rem,4vw,3.4rem)/1 var(--sigf)}
.mission__sig em{font:500 .74rem var(--sans);font-style:normal;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-2)}

/* ============================================================
   SERVICES : trois cartes illustrees, puis l'audit
   ============================================================ */
.services{padding-top:clamp(3rem,7vw,5rem)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.card{position:relative;display:flex;flex-direction:column;gap:.9rem;padding:clamp(.7rem,1.2vw,.9rem) clamp(.7rem,1.2vw,.9rem) clamp(1.6rem,2.6vw,2.2rem);
  background:var(--paper);border:1px solid var(--ln);border-radius:22px;transition:border-color .5s,transform .8s var(--e),opacity 1.1s var(--e)}
.card:hover{border-color:var(--ln-2)}
/* les illustrations des cartes, dessinees en CSS dans le meme decor que le hero */
.card__art{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;margin-bottom:.6rem;
  background:linear-gradient(180deg,#D3E6E2 0%,#E8EFEA 55%,#EDE7DC 100%)}
/* chaque illustration montre le service : un site qui se construit, un avant/apres, un site suivi en ligne */
.card__art i,.card__art b{display:block}
.w{position:absolute;left:9%;right:9%;top:13%;bottom:0;background:#FBFAF6;border-radius:10px 10px 0 0;box-shadow:0 18px 40px -18px rgba(40,60,55,.35);overflow:hidden}
.card__art .w__bar{display:flex;align-items:center;gap:4px;height:14%;padding:0 5%;border-bottom:1px solid #ECE7DD}
.w__bar i{width:6px;height:6px;border-radius:50%;background:#DCD5C8}
.w__url{margin-left:6%;flex:1;font:500 .6rem/1 var(--sans);color:#8A857C;background:#F1EDE5;border-radius:99px;padding:.3em .8em}
.w__body{position:relative;height:86%;padding:6% 7%}
.k{border-radius:3px;background:#E6E0D4;margin-bottom:5%}
.k--nav{height:5%;width:100%;background:linear-gradient(90deg,#161616 0 14%,transparent 14% 60%,#E6E0D4 60%)}
.k--h1{height:11%;width:78%;background:#2B2B2B}
.k--h2{height:6%;width:56%}
.k--btn{height:10%;width:30%;border-radius:99px;background:#2E6B66}
.k--img{position:absolute;right:7%;top:30%;width:34%;height:46%;border-radius:6px;background:linear-gradient(160deg,#9CCFC8,#D3E6E2 60%,#EDE7DC)}
/* 01 : les blocs se posent un a un */
.w--build{right:30%}
.w--build .k{transform-origin:left;animation:build 6s var(--e) infinite}
.w--build .k--h1{animation-delay:.25s}.w--build .k--h2{animation-delay:.5s}.w--build .k--btn{animation-delay:.75s}.w--build .k--img{animation-delay:1s}
@keyframes build{0%,6%{opacity:0;transform:scaleX(.3)}18%,88%{opacity:1;transform:none}100%{opacity:0}}
.ph{position:absolute;right:9%;bottom:0;width:22%;height:66%;background:#FBFAF6;border:3px solid #161616;border-bottom:0;border-radius:14px 14px 0 0;padding:26px 9px 0;box-shadow:0 18px 40px -18px rgba(40,60,55,.4)}
.ph .k--h1{width:90%;height:9%}.ph .k--img{position:static;width:100%;height:34%;margin-bottom:10%}.ph .k--btn{width:70%;height:8%}
/* 02 : le curseur avant/apres balaie la page */
.w--ba .w__body{padding:0}
.ba{position:absolute;inset:0;padding:6% 7%}
.ba--old{background:#E9E4F2}
.o{background:#B9B3C6;margin-bottom:5%}
.o--hd{height:16%;background:repeating-linear-gradient(90deg,#7A6FA0 0 8px,#9187B5 8px 16px);border:2px outset #CFC8E0}
.o--l{height:4%;width:92%}.o--s{width:60%}
.o--tb{height:22%;width:50%;background:#fff;border:2px inset #CFC8E0}
.ba--new{background:#FBFAF6;clip-path:inset(0 0 0 var(--x,50%));animation:sweep 7s ease-in-out infinite}
.ba__h{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;margin-left:-1px;background:#161616;animation:sweep 7s ease-in-out infinite}
.ba__h::after{content:"";position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px;border-radius:50%;background:#161616;box-shadow:0 0 0 3px #FBFAF6}
@property --x{syntax:"<percentage>";inherits:false;initial-value:50%}
@keyframes sweep{0%,100%{--x:62%}50%{--x:22%}}
.tag{position:absolute;top:4%;font:500 .62rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#4A5754}
.tag--old{left:9%}.tag--new{right:9%}
/* 03 : le site est en ligne, suivi et entretenu */
.live{display:inline-flex;align-items:center;gap:.45em;font:500 .68rem/1 var(--sans);color:#2E6B66;background:#E3EFEC;border-radius:99px;padding:.45em .8em}
.live i{width:7px;height:7px;border-radius:50%;background:#2E6B66;animation:ping 2s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(46,107,102,.5)}100%{box-shadow:0 0 0 8px rgba(46,107,102,0)}}
.spark{display:block;width:100%;height:30%;overflow:visible;margin:7% 0 5%}
.spark path{fill:none;stroke:#2E6B66;stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1;animation:spark 6s var(--e) infinite}
@keyframes spark{0%{stroke-dashoffset:1;opacity:1}40%,90%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.todo{display:grid;gap:.4em;font:400 .66rem/1.2 var(--sans);color:#4A5754}
.card__art em{font-style:normal}
.todo span{display:flex;align-items:center;gap:.5em}
.todo i{width:10px;height:10px;border-radius:3px;background:#2E6B66;box-shadow:inset 0 0 0 2px #2E6B66}
.todo--p i{background:transparent;animation:tick 6s steps(1) infinite}
@keyframes tick{0%,55%{background:transparent}56%,100%{background:#2E6B66}}
.card:hover .w{transform:translateY(-4px)}.w,.ph{transition:transform 1s var(--e)}
@media (prefers-reduced-motion:reduce){.card__art *{animation:none!important}}
.card__n,.card__t,.card p{padding-inline:clamp(.8rem,1.6vw,1.3rem)}
.card__n{font:500 .72rem var(--sans);letter-spacing:.2em;color:var(--lagoon)}
.card__t{font:300 clamp(1.7rem,2.4vw,2.2rem)/1.08 var(--serif);letter-spacing:-.02em}
.card p{color:var(--fg-2);font-size:.98rem}
.card::before{display:none}
@media (max-width:900px){ .cards{grid-template-columns:1fr} }

.audit{margin-top:clamp(4rem,8vw,6rem);display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;
  padding:clamp(2rem,4.4vw,3.6rem);border-radius:24px;background:var(--char);color:var(--tx);
  --fg-2:var(--tx-2);--ln-2:rgba(242,239,234,.26);--accent:var(--lagoon-lt);--btn-bg:var(--ivory);--btn-fg:var(--ink);--btn-h:#fff}
.audit .label{margin-bottom:1rem;color:var(--tx-2)}
.audit__t{font:300 clamp(1.9rem,3.4vw,3rem)/1.06 var(--serif);letter-spacing:-.02em;margin-bottom:.9rem}
.audit__p{color:var(--tx-2)}
.audit__form{display:grid;gap:.9rem}
.audit__row{display:flex;align-items:center;gap:.4rem;padding:.4rem .4rem .4rem 1.2rem;border:1px solid var(--ln-2);border-radius:999px;background:rgba(255,255,255,.04);transition:border-color .3s}
.audit__row:focus-within{border-color:var(--lagoon-lt)}
.audit__pre{color:var(--tx-2);font-size:.95rem}
.audit__in{flex:1;min-width:0;border:0;background:transparent;color:var(--tx);font:400 1rem var(--sans);padding:.7rem .2rem;outline:none}
.audit__in::placeholder{color:#8F8B84}
.audit__note{font-size:.86rem;color:var(--tx-2);padding-left:1.2rem}
#audit.is-bad .audit__row{animation:shake .4s;border-color:#D9725E}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media (max-width:860px){
  .audit{grid-template-columns:1fr}
  .audit__row{flex-wrap:wrap;border-radius:18px;padding:.6rem}
  .audit__pre{padding-left:.6rem}
  .audit__row .btn{width:100%}
}

/* ============================================================
   HISTOIRE : defilement horizontal sur grand ecran
   ============================================================ */
.story{position:relative;border-block:1px solid var(--ln);background:var(--ivory-2)}
.story__pin{padding-block:clamp(5rem,10vw,8rem);overflow:hidden}
.story__track{display:flex;gap:clamp(1rem,2.4vw,2rem);padding-inline:var(--gutter)}
.ch{flex:none;width:min(80vw,540px);padding:clamp(1.8rem,3.2vw,2.8rem);background:var(--paper);border:1px solid var(--ln);border-radius:20px;transition:opacity .5s ease}
.story.is-pin .ch{opacity:.8}
.story.is-pin .ch.act{opacity:1}
.ch__k{display:block;font:italic 300 clamp(2.2rem,4.4vw,3.8rem)/1 var(--serif);letter-spacing:-.02em;color:var(--lagoon);margin-bottom:1.2rem}
.ch__t{font:300 clamp(1.15rem,1.7vw,1.45rem)/1.5 var(--serif)}
.story__rail{height:1px;margin:clamp(2.4rem,4vw,3.4rem) var(--gutter) 0;background:var(--ln)}
.story__rail i{display:block;height:100%;background:var(--ink);transform:scaleX(0);transform-origin:left}
.story.is-pin .story__pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:calc(var(--top-h) + 1rem) 2rem}
.story.is-pin .story__track{will-change:transform}
@media (max-width:1024px){ .story__track{flex-direction:column} .ch{width:auto} .story__rail{display:none} }

/* ============================================================
   OFFRE
   ============================================================ */
.offer{padding-top:clamp(4rem,9vw,7rem)}
.offer__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.6rem)}
.panel{padding:clamp(1.8rem,3.2vw,2.8rem);display:flex;flex-direction:column;gap:1.1rem;background:var(--paper);border:1px solid var(--ln);border-radius:20px}
.panel--alt{background:var(--char);color:var(--tx);border-color:var(--char);--fg-2:var(--tx-2);--ln:rgba(242,239,234,.14);--btn-bg:var(--ivory);--btn-fg:var(--ink);--btn-h:#fff}
.panel--alt p{color:var(--tx-2)}
.panel--alt .panel__hi{color:var(--tx)}
.panel__t{font:300 clamp(1.7rem,2.6vw,2.3rem)/1.1 var(--serif);letter-spacing:-.02em}
.chk{list-style:none;padding:0;display:grid}
.chk li{display:flex;gap:1rem;align-items:baseline;padding:.85rem 0;border-bottom:1px solid var(--ln)}
.chk li:last-child{border-bottom:0}
.chk li::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;transform:translateY(-2px);background:var(--lagoon)}
.slots{border:1px solid var(--ln);border-radius:14px;padding:1.1rem 1.2rem}
.slots__head{display:flex;justify-content:space-between;gap:1rem;font:500 .74rem var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--tx-2)}
.slots__head b{color:var(--tx);font-weight:500}
.slots__bar{height:2px;background:rgba(242,239,234,.14);margin:1rem 0 .8rem;overflow:hidden}
.slots__bar i{display:block;height:100%;background:var(--lagoon-lt);transform-origin:left;transform:scaleX(0);transition:transform 1.6s var(--e)}
.slots__foot{font-size:.92rem;color:var(--tx)}
.slots__why{font-size:.86rem;margin-top:.2rem}
.panel .btn{align-self:flex-start;margin-top:auto}
@media (max-width:860px){ .offer__grid{grid-template-columns:1fr} }

/* ============================================================
   TARIFS (HTML genere depuis content/tarifs.js)
   ============================================================ */
.tarifs{padding-top:clamp(3rem,7vw,5rem)}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem);align-items:stretch}
.tcard{position:relative;display:flex;flex-direction:column;cursor:pointer;-webkit-tap-highlight-color:transparent;
  padding:clamp(1.8rem,3vw,2.6rem);background:var(--paper);border:1px solid var(--ln);border-radius:20px;
  transition:background-color .5s,color .5s,border-color .5s,transform .8s var(--e),opacity 1.1s var(--e)}
.tcard:hover{border-color:var(--ln-2)}
.tcard.is-sel{background:var(--char);color:var(--tx);border-color:var(--char)}
.tcard:focus-visible{outline:1.5px solid var(--lagoon);outline-offset:4px}
.tcard__pop{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);margin:0;padding:.4rem .9rem;border-radius:999px;white-space:nowrap;
  background:var(--lagoon);color:#fff;font:600 .66rem var(--sans);letter-spacing:.2em;text-transform:uppercase}
.tcard__nom{font:300 clamp(1.7rem,2.4vw,2.1rem)/1.1 var(--serif);letter-spacing:-.02em}
.tcard__acc{color:var(--ink-2);font-size:.95rem;margin:.5rem 0 1.6rem;transition:color .5s}
.tcard__prix{font:300 clamp(2.4rem,4vw,3.4rem)/1 var(--serif);letter-spacing:-.035em;margin-bottom:1.6rem}
.tcard__pre{display:block;font:500 .7rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.5rem;transition:color .5s}
.tcard__list{list-style:none;padding:0;display:grid;gap:.6rem;margin-bottom:1.8rem;flex:1}
.tcard__list li{position:relative;padding-left:1.3rem;font-size:.95rem;color:var(--ink-2);line-height:1.5;transition:color .5s}
.tcard__list li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--lagoon)}
.tcard.is-sel .tcard__acc,.tcard.is-sel .tcard__pre,.tcard.is-sel .tcard__list li{color:var(--tx-2)}
.tcard.is-sel .tcard__list li::before{background:var(--lagoon-lt)}
.tcard__etat{display:flex;align-items:center;gap:.7rem;padding-top:1.1rem;border-top:1px solid var(--ln);margin:0;
  font:500 .72rem var(--sans);letter-spacing:.18em;text-transform:uppercase}
.tcard.is-sel .tcard__etat{border-top-color:rgba(242,239,234,.14)}
.tcard__etat::before{content:"";width:16px;height:16px;border:1px solid var(--ln-2);border-radius:50%;flex:none}
.tcard.is-sel .tcard__etat::before{border-color:var(--ivory);background:var(--ivory);box-shadow:inset 0 0 0 3px var(--char)}
.tcard__on{display:none;color:var(--tx)}
.tcard.is-sel .tcard__on{display:inline}
.tcard.is-sel .tcard__off{display:none}
.tpick{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem 2rem;margin-top:clamp(1.6rem,3vw,2.4rem);
  padding:1.2rem 1.2rem 1.2rem 1.8rem;border:1px solid var(--ln);border-radius:999px}
.tpick__l{font:500 .74rem var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;margin:0}
#tpickNom{font:italic 400 1.5rem/1 var(--serif);letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.tnote{margin-top:1.2rem;font-size:.88rem;color:var(--ink-2)}
@media (max-width:900px){ .tgrid{grid-template-columns:1fr;row-gap:2rem} .tpick{border-radius:20px;padding:1.2rem} }

/* ============================================================
   DEROULE
   ============================================================ */
.steps{padding-top:clamp(3rem,7vw,5rem)}
.steps__list{list-style:none;padding:0;border-top:1px solid var(--ln-2)}
.step{display:grid;grid-template-columns:clamp(4rem,9vw,7.5rem) 1fr auto;gap:.5rem clamp(1rem,3vw,2.8rem);padding:clamp(1.6rem,3vw,2.4rem) 0;border-bottom:1px solid var(--ln);align-items:start}
.step__n{font:italic 300 clamp(2.2rem,4vw,3.4rem)/1 var(--serif);color:var(--lagoon)}
.step__t{font:300 clamp(1.5rem,2.4vw,2.1rem)/1.1 var(--serif);letter-spacing:-.02em;margin-bottom:.6rem}
.step p{color:var(--ink-2);max-width:60ch}
.step__when{font:500 .7rem var(--sans);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;padding:.5rem .9rem;border:1px solid var(--ln-2);border-radius:999px}
@media (max-width:700px){ .step{grid-template-columns:3.4rem 1fr} .step__when{grid-column:2;justify-self:start} }

/* ============================================================
   REALISATIONS : une galerie qui s'incurve, sur fond charbon
   ============================================================ */
.work{overflow:hidden}
.work .h2{margin-bottom:clamp(2rem,4vw,3rem)}
.film__strip{display:flex;gap:clamp(14px,1.8vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:20px calc(50% - min(42vw,380px));perspective:1600px;overscroll-behavior-x:contain}
.film__strip::-webkit-scrollbar{display:none}
.frame{position:relative;flex:none;width:min(84vw,760px);aspect-ratio:16/10;scroll-snap-align:center;border-radius:16px;overflow:hidden;background:#111;
  text-decoration:none;color:var(--tx);border:1px solid rgba(242,239,234,.1);
  transform:rotateY(var(--ry,0deg)) scale(var(--sc,1));opacity:var(--op,1);transition:transform .5s var(--e),opacity .5s}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e)}
.frame:hover img{transform:scale(1.03)}
.frame__go{position:absolute;right:14px;bottom:14px;display:flex;gap:.6rem;align-items:center;padding:.55rem 1rem;border-radius:999px;
  background:rgba(20,20,20,.8);border:1px solid rgba(242,239,234,.3);font:500 .72rem var(--sans);letter-spacing:.16em;text-transform:uppercase;
  opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s var(--e)}
.frame__go span:first-child{display:none}
.frame:hover .frame__go,.frame:focus-visible .frame__go{opacity:1;transform:none}
@media (hover:none){ .frame__go{opacity:1;transform:none} }
.frame__card{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;text-align:center;
  background:radial-gradient(60% 60% at 50% 45%,#2A1236,#0C0710)}
.frame__card b{font:italic 300 clamp(2.4rem,5vw,4.4rem)/1 var(--serif);color:#FFE6F4;text-shadow:0 0 12px #ff5ad8,0 0 36px #b44cff}
.frame__card em{font:500 .74rem var(--sans);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:#E6D6F2}
.frame__card--next{background:var(--ivory)}
.frame__card--next b{color:var(--ink);text-shadow:none}
.frame__card--next em{color:var(--lagoon)}
.film__bar{display:flex;align-items:flex-end;justify-content:space-between;gap:1.4rem;margin-top:clamp(1.6rem,3vw,2.4rem)}
.film__t{font:300 clamp(1.9rem,3.6vw,3.2rem)/1.05 var(--serif);letter-spacing:-.02em}
.film__m{font:500 .74rem var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--tx-2);margin-top:.6rem}
.film__ctl{display:flex;align-items:center;gap:.6rem}
.film__count{font:300 1.1rem var(--serif);color:var(--tx-2);margin-right:.8rem;font-variant-numeric:tabular-nums}
.film__count b{font-weight:300;color:var(--tx)}
.film__btn{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:none;border:1px solid rgba(242,239,234,.24);color:var(--tx);cursor:pointer;transition:border-color .3s,background .3s}
.film__btn:hover{border-color:var(--tx);background:rgba(242,239,234,.06)}
.work__more{margin-top:2.4rem;color:var(--tx-2);font-size:.92rem}
@media (max-width:640px){ .film__bar{flex-direction:column;align-items:flex-start} }

/* ============================================================
   FAQ (HTML genere depuis content/faq.js)
   ============================================================ */
.faq__t{font:300 clamp(2.2rem,4.8vw,4.4rem)/1.04 var(--serif);letter-spacing:-.025em;max-width:18ch;margin-bottom:clamp(2.2rem,4vw,3.4rem)}
.faq__list{border-top:1px solid var(--ln-2)}
.faq__item{border-bottom:1px solid var(--ln)}
.faq__q{display:grid;grid-template-columns:3.2rem 1fr 38px;align-items:center;gap:1rem;padding:1.4rem 0;cursor:pointer;list-style:none;min-height:60px}
.faq__q::-webkit-details-marker{display:none}
.faq__n{font:italic 300 1.2rem var(--serif);color:var(--lagoon)}
.faq__qt{font:400 clamp(1.2rem,2vw,1.6rem)/1.3 var(--serif);letter-spacing:-.01em;transition:color .3s}
.faq__ic{width:38px;height:38px;border:1px solid var(--ln-2);border-radius:50%;position:relative;transition:background .4s,border-color .4s}
.faq__ic::before,.faq__ic::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1px;background:var(--ink);transform:translate(-50%,-50%);transition:transform .4s var(--e),background .4s}
.faq__ic::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__item[open] .faq__ic{background:var(--ink);border-color:var(--ink)}
.faq__item[open] .faq__ic::before,.faq__item[open] .faq__ic::after{background:var(--ivory)}
.faq__item[open] .faq__ic::after{transform:translate(-50%,-50%) rotate(0)}
.faq__q:hover .faq__qt{color:var(--lagoon)}
.faq__r{padding:0 0 1.6rem calc(3.2rem + 1rem);color:var(--ink-2);max-width:68ch}
@media (max-width:600px){ .faq__q{grid-template-columns:2.4rem 1fr 36px} .faq__r{padding-left:0} }

/* ============================================================
   CONTACT
   ============================================================ */
.fin{text-align:center;border-top:1px solid var(--ln)}
.fin__wrap{display:flex;flex-direction:column;align-items:center}
.fin__t{font:300 clamp(3.4rem,11vw,10rem)/.95 var(--serif);letter-spacing:-.04em}
.fin__t em{font-style:italic;color:var(--lagoon);padding-right:.05em}
.fin__sub{max-width:44ch;margin:1.6rem 0 2.4rem;color:var(--ink-2);font-size:1.06rem}
.fin__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem}
.fin__micro{margin-top:1.6rem;font:500 .72rem var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}

/* ============================================================
   PIED DE PAGE : l'adresse en grand, puis le nom du studio
   qui monte lettre par lettre
   ============================================================ */
.ft{padding-top:clamp(4rem,8vw,6rem);overflow:hidden}
.ft__cta{padding-bottom:clamp(3rem,6vw,4.6rem);border-bottom:1px solid var(--ln)}
.ft__mailrow{display:flex;align-items:center;flex-wrap:wrap;gap:1rem 1.6rem}
.ft__mail{font:300 clamp(1.3rem,6.2vw,5.6rem)/1.05 var(--serif);letter-spacing:-.035em;text-decoration:none;color:var(--tx);
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .8s var(--e);overflow-wrap:anywhere}
.ft__mail:hover{background-size:100% 1px}
.ft__copy{min-height:48px;padding:.7rem 1.3rem;border-radius:999px;border:1px solid var(--ln-2);background:none;color:var(--tx);cursor:pointer;
  font:500 .78rem var(--sans);letter-spacing:.16em;text-transform:uppercase;transition:background .3s,color .3s,border-color .3s}
.ft__copy:hover{border-color:var(--tx)}
.ft__copy.ok{background:var(--lagoon-lt);color:var(--ink);border-color:var(--lagoon-lt)}
.ft__avail{display:flex;align-items:center;gap:.5rem;margin-top:1.4rem;color:var(--tx-2);font-size:.92rem;flex-wrap:wrap}
.ft__top{display:grid;grid-template-columns:1fr 1.4fr;gap:3rem;padding-block:clamp(3rem,6vw,4.4rem);border-bottom:1px solid var(--ln)}
.ft__lead{font:300 clamp(1.6rem,2.8vw,2.4rem)/1.2 var(--serif);letter-spacing:-.02em;max-width:18ch}
.ft__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.ft__col{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem}
.ft__col h3{font:500 .72rem var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--lagoon-lt);margin-bottom:.8rem}
.ft__col a{position:relative;text-decoration:none;color:var(--tx);min-height:40px;display:inline-flex;align-items:center;gap:.5rem;overflow-wrap:anywhere}
.ft__col a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--e)}
.ft__col a:hover::after{transform:scaleX(1);transform-origin:left}
.ft__col p{color:var(--tx-2);padding-block:.45rem}
.clock__dot{width:7px;height:7px;border-radius:50%;background:#7FD08A;box-shadow:0 0 10px #7FD08A;flex:none}
.clock__dot.off{background:#C9B38A;box-shadow:none}
.ft__base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-block:1.6rem;font-size:.86rem;color:var(--tx-2)}
.ft__base a{color:var(--tx-2);min-height:44px;display:inline-flex;align-items:center;margin-block:-.8rem}
.ft__base a:hover{color:var(--tx)}
.ft__mark{margin:0;padding-inline:var(--gutter);white-space:nowrap;text-align:center;overflow:hidden;
  font:300 clamp(3rem,14vw,16rem)/.8 var(--serif);margin-bottom:-.12em;padding-top:.05em;color:#E9E5DE}
.ft__mark #ftType{display:inline-block;letter-spacing:-.045em}
.ft__mark em{font-style:italic;color:#9A968F}
.ft__mark .fl{display:inline-block}
html.js .ft__mark .fl{transform:translateY(100%);transition:transform 1.1s var(--e)}
html.js .ft__mark.in .fl{transform:none}
.ft__mark .fl:nth-child(2){transition-delay:.03s}.ft__mark .fl:nth-child(3){transition-delay:.06s}.ft__mark .fl:nth-child(4){transition-delay:.1s}
.ft__mark .fl:nth-child(5){transition-delay:.13s}.ft__mark .fl:nth-child(6){transition-delay:.16s}
.ft__mark em .fl:nth-child(1){transition-delay:.22s}.ft__mark em .fl:nth-child(2){transition-delay:.25s}.ft__mark em .fl:nth-child(3){transition-delay:.28s}
.ft__mark em .fl:nth-child(4){transition-delay:.31s}.ft__mark em .fl:nth-child(5){transition-delay:.34s}.ft__mark em .fl:nth-child(6){transition-delay:.37s}
@media (max-width:860px){ .ft__top{grid-template-columns:1fr} }
@media (max-width:560px){ .ft__cols{grid-template-columns:1fr 1fr} .ft__col:first-child{grid-column:1/-1} }

/* ============================================================
   TRANSITIONS
   ============================================================ */
/* les titres de section montent ligne par ligne derriere un masque */
.h2 .hl{display:block;overflow:hidden;padding-bottom:.06em}
.h2 .hl>span{display:block}
html.js .h2.rv{opacity:1;transform:none}
html.js .h2.rv .hl>span{transform:translateY(105%);transition:transform 1.2s var(--e)}
html.js .h2.rv.in .hl>span{transform:none}
html.js .h2.rv .hl:nth-child(2)>span{transition-delay:.08s}
html.js .h2.rv .hl:nth-child(3)>span{transition-delay:.16s}
/* les sections sombres s'ouvrent comme un rideau en entrant dans l'ecran */
html.js .curtain{clip-path:inset(4% 3% 0 round 28px);transition:clip-path 1.4s var(--e)}
html.js .curtain.open{clip-path:inset(0 0 0 round 0)}
/* les cartes arrivent en cascade */
.cards .card:nth-child(2),.tgrid .tcard:nth-child(2),.offer__grid .panel:nth-child(2){transition-delay:.1s}
.cards .card:nth-child(3),.tgrid .tcard:nth-child(3){transition-delay:.2s}
/* les boutons pleins : un fond qui monte au survol */
.btn--gold,.btn--p,.btn--dark{isolation:isolate;overflow:hidden}
.btn--gold::before,.btn--p::before,.btn--dark::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--lagoon);transform:translateY(101%);border-radius:inherit;transition:transform .6s var(--e)}
.dark .btn--gold::before,.panel--alt .btn--dark::before,.audit .btn--gold::before{background:var(--lagoon-lt)}
@media (hover:hover){
.btn--gold:hover::before,.btn--p:hover::before,.btn--dark:hover::before{transform:none}
.btn--gold:hover,.btn--p:hover,.btn--dark:hover{background:var(--btn-bg)}
.dark .btn--gold:hover,.audit .btn--gold:hover,.panel--alt .btn--dark:hover{color:var(--ink)}
.light .btn--gold:hover,.light .btn--dark:hover,.tpick .btn--p:hover{color:#fff}
}
.btn--gold:hover,.btn--p:hover,.btn--dark:hover{background:var(--btn-bg)}

/* ============================================================
   BOUTON FLOTTANT
   ============================================================ */
.fabw{position:fixed;right:clamp(1rem,2.4vw,1.8rem);bottom:clamp(1rem,2.4vw,1.8rem);z-index:70}
.fab{display:inline-flex;align-items:center;gap:.6rem;min-height:52px;padding:.8rem 1.4rem;border-radius:999px;border:0;cursor:pointer;
  background:var(--ink);color:var(--ivory);font:500 .92rem var(--sans);letter-spacing:.02em;box-shadow:0 14px 30px -12px rgba(0,0,0,.45);
  opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .4s,transform .5s var(--e)}
.fab.is-on{opacity:1;transform:none;pointer-events:auto}
.fabw__menu{position:absolute;right:0;bottom:calc(100% + 12px);min-width:260px;background:var(--paper);color:var(--ink);border:1px solid rgba(22,22,22,.12);border-radius:18px;overflow:hidden;box-shadow:0 24px 60px -20px rgba(0,0,0,.35)}
.fabw__opt{display:flex;padding:1rem 1.2rem;text-decoration:none;border-bottom:1px solid rgba(22,22,22,.08)}
.fabw__opt:last-child{border-bottom:0}
.fabw__opt:hover{background:var(--ivory)}
.fabw__opt span{display:grid}
.fabw__opt b{font-weight:500}
.fabw__opt small{font-size:.84rem;color:var(--ink-2)}

/* ---------- performance ---------- */
.steps,.faq{content-visibility:auto;contain-intrinsic-size:auto 900px}

@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .hero__scroll i,.ca__b3{animation:none} }

/* ============================================================
   FACON APPLICATION (telephone surtout)
   ============================================================ */
html{-webkit-tap-highlight-color:transparent}
/* les boutons s'enfoncent legerement sous le doigt */
.btn:active,.call:active,.lang button:active,.film__btn:active,.pill-b:active,.tabbar a:active,.tabbar button:active,.card:active,.tcard:active,.frame:active{transform:scale(.97)}

/* ---------- pastilles (FAQ, tarifs) ---------- */
.pills{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gutter) * -1) clamp(1.4rem,3vw,2rem);padding:0 var(--gutter) .2rem;scroll-snap-type:x proximity}
.pills::-webkit-scrollbar{display:none}
.pill-b{flex:none;scroll-snap-align:start;min-height:44px;padding:.55rem 1.1rem;border-radius:999px;border:1px solid var(--ln-2);background:transparent;color:var(--fg);
  font:500 .86rem var(--sans);cursor:pointer;white-space:nowrap;transition:background .3s,color .3s,border-color .3s,transform .2s}
.pill-b.is-on{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.faq__item.is-hid{display:none}
.tpills{display:none}

/* ---------- barre d'onglets ---------- */
.tabbar{display:none}
@media (max-width:760px){
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .fabw{display:none}
  .tabbar{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:80;display:grid;grid-template-columns:repeat(4,1fr);
    padding:6px;border-radius:26px;background:rgba(251,249,245,.94);border:1px solid rgba(22,22,22,.08);
    box-shadow:0 18px 40px -18px rgba(0,0,0,.35);transition:transform .5s var(--e),opacity .4s}
  .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:54px;border-radius:20px;border:0;background:none;
    color:var(--ink-2);text-decoration:none;font:500 .66rem var(--sans);letter-spacing:.04em;cursor:pointer;transition:background .35s,color .35s,transform .2s}
  .tabbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
  .tabbar .on{background:var(--ink);color:var(--ivory)}
  html.menu-open .tabbar,html.bs-open .tabbar{transform:translateY(140%);opacity:0}

  /* tarifs : un carrousel qu'on fait glisser, pilote par les pastilles */
  .tpills{display:flex}
  .tgrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:12px;margin-inline:calc(var(--gutter) * -1);padding:18px var(--gutter) 6px;row-gap:0}
  .tgrid::-webkit-scrollbar{display:none}
  .tcard{flex:none;width:84%;scroll-snap-align:center}

  /* realisations : des cartes hautes, facon stories */
  .film__strip{padding-inline:7vw;perspective:none;gap:10px}
  .frame{width:86vw;aspect-ratio:4/5;transform:none!important;opacity:1!important;border-radius:22px}
  .frame img{object-position:50% 0}
  .frame__go{display:none}
  .film__bars{display:flex;gap:5px;padding:0 7vw 12px}
  .film__bars i{flex:1;height:3px;border-radius:3px;background:rgba(242,239,234,.2);overflow:hidden}
  .film__bars i b{display:block;height:100%;background:var(--tx);transform-origin:left;transform:scaleX(0)}
  .film__bars i.done b{transform:none}
  .film__bars i.now b{animation:story var(--dur,5s) linear forwards}
  .film.paused .film__bars i.now b{animation-play-state:paused}
  .film__btn{display:none}
}
.film__bars{display:none}
@media (max-width:760px){ .film__bars{display:flex} }
@keyframes story{to{transform:none}}

/* ---------- fenetre qui monte du bas ---------- */
.bs{position:fixed;inset:0;z-index:140}
.bs__back{position:absolute;inset:0;background:rgba(10,10,10,.42);opacity:0;transition:opacity .4s}
.bs.on .bs__back{opacity:1}
.bs__panel{position:absolute;left:0;right:0;bottom:0;max-height:88vh;overflow:auto;overscroll-behavior:contain;background:var(--paper);color:var(--ink);
  border-radius:26px 26px 0 0;padding:10px var(--gutter) calc(1.6rem + env(safe-area-inset-bottom));box-shadow:0 -20px 60px -20px rgba(0,0,0,.4);
  transform:translateY(100%);transition:transform .55s var(--e);outline:none}
.bs.on .bs__panel{transform:translateY(var(--drag,0px))}
.bs.dragging .bs__panel{transition:none}
@media (min-width:761px){ .bs__panel{left:50%;right:auto;width:min(560px,92vw);bottom:2rem;border-radius:26px;transform:translate(-50%,120%)} .bs.on .bs__panel{transform:translate(-50%,var(--drag,0px))} }
.bs__grab{display:flex;justify-content:center;padding:4px 0 12px;cursor:grab;touch-action:none}
.bs__grab i{width:40px;height:5px;border-radius:5px;background:rgba(22,22,22,.18)}
.bs__x{position:absolute;right:14px;top:12px;width:40px;height:40px;border-radius:50%;border:0;background:var(--ivory);display:grid;place-items:center;cursor:pointer}
.bs__k{font:500 .72rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--lagoon);margin-bottom:.6rem}
.bs__t{font:300 clamp(1.9rem,7vw,2.6rem)/1.05 var(--serif);letter-spacing:-.025em;margin-bottom:.6rem;padding-right:3rem}
.bs__p{color:var(--ink-2);margin-bottom:1.2rem}
.bs__price{font:300 2.4rem/1 var(--serif);letter-spacing:-.03em;margin:.2rem 0 1rem}
.bs__list{list-style:none;padding:0;margin:0 0 1.4rem;display:grid;gap:.5rem}
.bs__list li{position:relative;padding-left:1.2rem;color:var(--ink-2);font-size:.95rem}
.bs__list li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--lagoon)}
.bs__acts{display:grid;gap:.6rem}
.bs__acts .btn{width:100%;--btn-bg:var(--ink);--btn-fg:var(--ivory);--btn-h:#333;--ln-2:rgba(22,22,22,.24)}
.bs__meta{display:flex;align-items:center;gap:.5rem;margin-top:1.1rem;font-size:.88rem;color:var(--ink-2)}
.bs__img{border-radius:16px;overflow:hidden;margin-bottom:1rem;aspect-ratio:16/10;background:var(--ivory-2)}
.bs__img img{width:100%;height:100%;object-fit:cover;object-position:50% 0}

/* ---------- petite notification ---------- */
.toast{position:fixed;left:50%;top:calc(12px + env(safe-area-inset-top));z-index:160;transform:translate(-50%,-160%);max-width:min(92vw,420px);
  padding:.8rem 1.2rem;border-radius:16px;background:var(--ink);color:var(--ivory);font:500 .9rem var(--sans);box-shadow:0 16px 40px -16px rgba(0,0,0,.5);
  transition:transform .55s var(--e);pointer-events:none;text-align:center}
.toast.on{transform:translate(-50%,0)}

/* ---------- installer le site ---------- */
.install{position:fixed;left:12px;right:12px;bottom:calc(96px + env(safe-area-inset-bottom));z-index:85;display:flex;align-items:center;gap:.8rem;
  padding:.8rem .8rem .8rem .9rem;border-radius:20px;background:var(--ink);color:var(--ivory);box-shadow:0 20px 50px -20px rgba(0,0,0,.6);
  transform:translateY(20px);opacity:0;transition:transform .6s var(--e),opacity .4s}
.install.on{transform:none;opacity:1}
.install img{border-radius:11px;flex:none}
.install__t{flex:1;display:grid;line-height:1.3;font-size:.85rem}
.install__t span{color:#BDB9B2}
.install__go{min-height:40px;padding:.5rem 1rem;border-radius:999px;border:0;background:var(--ivory);color:var(--ink);font:600 .82rem var(--sans);cursor:pointer}
.install__x{width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:var(--ivory);display:grid;place-items:center;cursor:pointer;flex:none}
@media (min-width:761px){ .install{left:auto;right:1.6rem;bottom:1.6rem;width:380px} }
/* respiration douce des illustrations : la fenetre et le telephone flottent, decales */
.card__art .w{animation:bob 7s ease-in-out infinite}
.card__art .ph{animation:bob 7s ease-in-out -3.5s infinite}
.card__art--2 .w{animation-delay:-2s}.card__art--3 .w{animation-delay:-4.5s}
.card__art--1 .k--img{background-size:200% 200%}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -6px}}
.w--host .w__url::after{content:"";display:inline-block;width:1px;height:1em;margin-left:2px;vertical-align:-2px;background:#8A857C;animation:caret 1.1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.card:not(.in) .card__art *{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.card__art .w,.card__art .ph{animation:none}}

/* ============ TYPO + COULEURS DE SECTION + ACCUEIL CENTRE ============ */
/* Gloock : un serif d'affiche a fort contraste, peu vu sur les sites de studio ; pas d'italique, l'accent passe par la couleur */
.hero__t,.h2,.card__t{letter-spacing:-.02em}
.hero__t em,.h2 em{font-style:normal}
/* une teinte claire par section, toutes tirees du lagon et du sable pour aller ensemble */
.mission{background:#F6EEE6}
.services{background:#E8F1EE}
.offer{background:#F3EFE6}
.tarifs{background:#EEF0F5}
.steps{background:#F5ECE9}
.faq{background:#EFEDF4}
section.fin{background:#E3EFEC}
.stats{background:#FBF9F5}
/* accueil : tout au centre */
.hero__wrap{align-items:center;text-align:center}
.hero__t .ln--i1,.hero__t .ln--i2{padding-left:0}
.hero__row{flex-direction:column;align-items:center;gap:1.2rem}
.hero__side{max-width:560px}
.hero .rot{justify-content:center}.hero .rot__w{justify-items:start}
.hero__cta{justify-content:center}
.hero .eyebrow{justify-content:center}
.hero__t{position:relative;z-index:1;isolation:isolate}

/* ============ INSPIRATIONS : titres centres, pastilles, grille de points, badges tournants ============ */
/* etiquettes en pastille */
.sec .label,.story .label{width:fit-content;padding:.55em 1em;border-radius:99px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  background:color-mix(in srgb,var(--accent) 9%,transparent);gap:.6rem}
.sec .label::before,.story .label::before{width:6px;height:6px;border-radius:50%}
/* sections dont le titre passe au centre */
#services>.wrap>.label,#offer>.wrap>.label,#tarifs>.wrap>.label,#steps>.wrap>.label,#faq>.wrap>.label{margin-inline:auto}
#services .h2,#offer .h2,#tarifs .h2,#steps .h2,#faq .h2{text-align:center;margin-inline:auto}
/* les titres arrivent aussi en sortant d'un flou */
html.js .h2.rv .hl>span{filter:blur(10px);opacity:.2;transition:transform 1.2s var(--e),filter 1.2s var(--e),opacity 1.2s var(--e)}
html.js .h2.rv.in .hl>span{filter:none;opacity:1}
.h2 .hl:nth-child(2)>span{transition-delay:.12s!important}
/* grille de points qui s'efface sur les bords */
.dots{position:relative}
.dots::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(color-mix(in srgb,var(--fg) 22%,transparent) 1px,transparent 1.4px);background-size:18px 18px;
  -webkit-mask:radial-gradient(ellipse 75% 70% at 50% 50%,#000 20%,transparent 80%);mask:radial-gradient(ellipse 75% 70% at 50% 50%,#000 20%,transparent 80%)}
.dots>*{position:relative;z-index:1}
/* badge rond au texte qui tourne */
.spin{position:absolute;width:clamp(110px,13vw,170px);aspect-ratio:1;color:var(--accent);pointer-events:none;z-index:0}
.spin svg{width:100%;height:100%;animation:spin 22s linear infinite;overflow:visible}
.spin text{font:600 10.5px var(--sans);letter-spacing:.1em;text-transform:uppercase;fill:currentColor}
.spin b{position:absolute;inset:36%;border-radius:50%;background:currentColor;opacity:.12}
@keyframes spin{to{rotate:360deg}}
#tarifs .wrap{position:relative}
.spin--a{left:-2%;top:22%}.spin--b{right:-2%;bottom:6%}.spin--b svg{animation-direction:reverse}
@media (max-width:760px){.spin{display:none}}
@media (prefers-reduced-motion:reduce){.spin svg{animation:none}html.js .h2.rv .hl>span{filter:none;opacity:1}}
.tnote{text-align:center}
/* ============ POUR QUI ============ */
.who{background:#F7F1E4}
#who>.wrap>.label{margin-inline:auto}#who .h2{text-align:center;margin-inline:auto}
.who__g{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.4vw,1.2rem)}
.who__c{display:flex;flex-direction:column;gap:.8rem;padding:clamp(1.4rem,2.2vw,1.9rem);background:var(--paper);border:1px solid var(--ln);border-radius:22px;
  transition:border-color .5s,translate .8s var(--e),opacity 1.1s var(--e)}
.who__c:nth-child(2){transition-delay:.08s}.who__c:nth-child(3){transition-delay:.16s}.who__c:nth-child(4){transition-delay:.24s}
.who__ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#E3EFEC;color:var(--lagoon);margin-bottom:.4rem}
.who__t{font:400 clamp(1.35rem,1.8vw,1.6rem)/1.12 var(--serif);letter-spacing:-.015em}
.who__c p{color:var(--fg-2);font-size:.95rem;flex:1}
.who__go{display:inline-flex;align-items:center;gap:.5rem;width:fit-content;font:500 .9rem var(--sans);color:var(--ink);text-decoration:none;
  padding:.65em 1.1em;border-radius:99px;border:1px solid var(--ln-2);transition:background .3s,color .3s,border-color .3s}
.who__go svg{transition:translate .3s var(--e)}
@media (hover:hover){.who__c:hover{border-color:var(--ln-2);translate:0 -4px}.who__go:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}.who__go:hover svg{translate:3px 0}}
.who__c:last-child{background:#161616;border-color:#161616;color:#F3F0EA}
.who__c:last-child p{color:rgba(243,240,234,.72)}
.who__c:last-child .who__ic{background:rgba(156,207,200,.14);color:#9CCFC8}
.who__c:last-child .who__go{background:#F3F0EA;color:#161616;border-color:#F3F0EA}
@media (max-width:1000px){.who__g{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.who__g{grid-template-columns:1fr}}

/* ============ COMMENT CA MARCHE ============ */
#how>.wrap>.label{margin-inline:auto}#how .h2{text-align:center;margin-inline:auto;margin-bottom:1.2rem}
.how__sub{max-width:520px;margin:0 auto clamp(3rem,6vw,5rem);text-align:center;color:var(--fg-2)}
.how__tl{position:relative;--rail:clamp(44px,5vw,64px)}
.how__list{list-style:none;margin:0;padding:0}
.how__rail{position:absolute;left:calc(var(--rail)/2);top:28px;bottom:28px;width:2px;margin-left:-1px;background:var(--ln);border-radius:2px;overflow:hidden}
.how__fill{position:absolute;inset:0;display:block;background:var(--lagoon);transform:scaleY(0);transform-origin:top;will-change:transform}
.how__s{position:relative;display:grid;grid-template-columns:var(--rail) minmax(0,1fr) minmax(0,1.05fr);gap:0 clamp(1.4rem,4vw,4rem);align-items:center;
  padding-block:clamp(1.6rem,3.4vw,2.8rem)}
.how__s+.how__s{border-top:1px solid var(--ln)}
.how__dot{position:relative;z-index:1;display:grid;place-items:center;width:clamp(40px,4.4vw,52px);aspect-ratio:1;margin-inline:auto;border-radius:50%;
  font:500 .8rem/1 var(--sans);letter-spacing:.06em;color:var(--fg-2);background:var(--ivory);border:1px solid var(--ln-2);
  transition:background .5s var(--e),color .5s var(--e),border-color .5s var(--e),transform .6s var(--e)}
.how__s.on .how__dot{background:var(--lagoon);border-color:var(--lagoon);color:#fff;transform:scale(1.08)}
.how__n{font:500 .72rem var(--sans);letter-spacing:.2em;color:var(--lagoon);margin-bottom:.6rem}
.how__t{font:400 clamp(1.7rem,2.8vw,2.5rem)/1.08 var(--serif);letter-spacing:-.02em;margin-bottom:.8rem}
.how__d{color:var(--fg-2);max-width:440px}
.how__art{margin:0;border-radius:22px;background:var(--paper);border:1px solid var(--ln);overflow:hidden;
  background-image:radial-gradient(color-mix(in srgb,var(--fg) 12%,transparent) 1px,transparent 1.4px);background-size:16px 16px}
.how__art svg{display:block;width:100%;height:auto;aspect-ratio:320/220}
.how__cta{display:flex;justify-content:center;margin-top:clamp(2.4rem,5vw,4rem)}
@media (max-width:760px){
  .how__s{grid-template-columns:var(--rail) minmax(0,1fr);gap:1.1rem 1rem;align-items:start}
  .how__dot{grid-row:1/3}
  .how__txt,.how__art{grid-column:2}
}
/* couleurs des illustrations, prises dans la palette du site */
.how svg .i-p{fill:#FBFAF6}.how svg .i-k{fill:#161616}.how svg .i-l{fill:#2E6B66}.how svg .i-a{fill:#9CCFC8}
.how svg .i-m{fill:#E3EFEC}.how svg .i-s{fill:#E6E0D4}.how svg .i-sd{fill:#D2C2A6}.how svg .i-dim{fill:#4A4A4A}.how svg .i-w{fill:#fff}
.how svg .i-hr{fill:#2E6B66}
.how svg .i-sh{filter:drop-shadow(0 10px 18px rgba(40,60,55,.16))}
.how svg .i-tx{font:500 11px var(--sans);fill:#161616}.how svg .i-tx--l{fill:#F3F0EA}.how svg .i-tx--b{font-size:13px}
.how svg .i-str-l,.how svg .i-str-w,.how svg .i-str-g{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.how svg .i-str-l{stroke:#F3F0EA}.how svg .i-str-w{stroke:#fff;stroke-width:3}.how svg .i-str-g{stroke:#2E6B66;stroke-width:2}
/* scenes : chaque element anime part d'un etat de depart et finit sur transform:none / opacity:1 */
.how .a{transform-box:fill-box}
.a-x,.a-load{transform-origin:left center}.a-y,.a-wave{transform-origin:center bottom}.a-pop{transform-origin:center}
.a-pgl{transform-origin:right center}.a-pgr{transform-origin:left center}
@keyframes hx{from{transform:scaleX(0)}}
@keyframes hy{from{transform:scaleY(0)}}
@keyframes hpop{0%{transform:scale(0);opacity:0}70%{transform:scale(1.12);opacity:1}100%{transform:none;opacity:1}}
@keyframes hup{from{transform:translateY(14px);opacity:0}}
@keyframes hfade{from{opacity:0}}
@keyframes hslide{0%{transform:translateX(-40px);opacity:0}25%{transform:translateX(-40px);opacity:1}100%{transform:translateX(12px);opacity:1}}
@keyframes hdrop{from{transform:translateY(-26px);opacity:0}}
@keyframes hwave{50%{transform:scaleY(.35)}}
@keyframes hblink{50%{opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .how .a{animation:var(--k) .8s var(--e) var(--d,0s) both paused}
  .how .play .a{animation-play-state:running}
  .a-x{--k:hx}.a-y{--k:hy}.a-pop{--k:hpop}.a-up{--k:hup}.a-fade{--k:hfade}.a-drop{--k:hdrop}
  .a-pgl,.a-pgr{--k:hx}
  .how .a-load{--k:hx;animation-duration:1.1s;animation-timing-function:cubic-bezier(.6,0,.2,1)}
  .how .a-slide{--k:hslide;animation-duration:1.1s}
  .how .a-wave{--k:hwave;animation-duration:.5s;animation-iteration-count:4;animation-timing-function:ease-in-out}
  .how .a-blink{--k:hblink;animation-duration:.8s;animation-iteration-count:3;animation-timing-function:steps(1)}
}
/* sans animation : le bouton d'apercu reste pose contre le telephone */
@media (prefers-reduced-motion:reduce){.how .a-slide{transform:translateX(12px)}}
.how .rewind .a{animation:none!important}
/* ============ ACCUEIL EN VIDEO ============ */
.hero__vid{margin:clamp(1.4rem,3vw,2.2rem) auto 0;width:min(100%,1040px);aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#141414;
  box-shadow:0 40px 80px -40px rgba(20,40,36,.45),0 0 0 1px rgba(22,22,22,.08)}
.hero__vid video{display:block;width:100%;height:100%;object-fit:cover}
.hero .hero__cta{margin-top:clamp(1.4rem,3vw,2rem)}
@media (max-width:760px){.hero__vid{border-radius:16px;aspect-ratio:4/5;width:min(100%,440px)}}
@media (max-width:760px){.hero{min-height:auto;justify-content:flex-start;padding-top:calc(var(--top-h) + 2.4rem);padding-bottom:2.4rem}}
/* ============ CHOIX A L'ARRIVEE ============ */
.pick{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:16px}
.pick__back{position:absolute;inset:0;background:rgba(20,20,20,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .4s var(--e)}
.pick__panel{position:relative;width:min(100%,620px);padding:clamp(1.6rem,4vw,2.6rem);background:var(--ivory);border-radius:26px;text-align:center;
  box-shadow:0 40px 90px -30px rgba(20,30,28,.5);opacity:0;transform:translateY(24px) scale(.97);transition:opacity .45s var(--e),transform .6s var(--e)}
.pick.on .pick__back{opacity:1}.pick.on .pick__panel{opacity:1;transform:none}
.pick__x{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--ink-2);cursor:pointer}
.pick__x:hover{background:rgba(22,22,22,.06)}
.pick__k{font:500 .72rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--lagoon);margin-bottom:.7rem}
.pick__t{font:400 clamp(1.9rem,4.4vw,2.7rem)/1.05 var(--serif);letter-spacing:-.025em;margin-bottom:clamp(1.3rem,3vw,1.8rem)}
.pick__g{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.pick__o{display:flex;flex-direction:column;align-items:center;gap:.45rem;padding:1.4rem 1rem;border:1px solid rgba(22,22,22,.14);border-radius:20px;background:#FBF9F5;
  color:var(--ink);text-decoration:none;font:inherit;cursor:pointer;transition:border-color .3s,transform .4s var(--e),background .3s}
.pick__o b{font:400 1.3rem/1.15 var(--serif);letter-spacing:-.01em}
.pick__o>span:last-child{font-size:.88rem;color:var(--ink-2)}
.pick__ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:#E3EFEC;color:var(--lagoon);margin-bottom:.3rem}
.pick__o:focus-visible{outline:2px solid var(--lagoon);outline-offset:3px}
@media (hover:hover){.pick__o:hover{border-color:var(--lagoon);transform:translateY(-3px)}}
@media (max-width:520px){.pick__g{grid-template-columns:1fr}.pick__o{flex-direction:row;text-align:left;flex-wrap:wrap;column-gap:.9rem}.pick__o .pick__ic{margin:0;grid-row:span 2}
  .pick__o{display:grid;grid-template-columns:52px 1fr;align-items:center;row-gap:.1rem}.pick__o b,.pick__o>span:last-child{grid-column:2}.pick__ic{grid-row:1/3}}
@media (prefers-reduced-motion:reduce){.pick__back,.pick__panel{transition:none}}
.pick__panel:focus{outline:none}
/* lien vers l'autre service (page video) : toujours accessible, meme apres le choix a l'arrivee */
.top__alt{color:var(--lagoon)!important}
.menu__alt{margin-top:.6rem}
.menu__alt em{color:var(--lagoon)}
/* ============ TARIFS : delai, ideal pour, comparatif, apres, doute ============ */
.tcard__delai{display:inline-flex;align-items:center;gap:.45rem;width:fit-content;margin:-.2rem 0 1.1rem;padding:.4em .85em;border-radius:99px;
  font:500 .78rem var(--sans);background:color-mix(in srgb,var(--lagoon) 12%,transparent);color:var(--lagoon)}
.tcard--avant .tcard__delai{background:rgba(156,207,200,.16);color:#9CCFC8}
.tcard__ideal{margin-top:1.1rem;padding:.9rem 1rem;border-radius:14px;font-size:.9rem;line-height:1.5;background:rgba(22,22,22,.04);color:var(--fg-2)}
.tcard__ideal b{display:block;font:500 .7rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--lagoon);margin-bottom:.25rem}
.tcard--avant .tcard__ideal{background:rgba(243,240,234,.07);color:rgba(243,240,234,.75)}
.tcard--avant .tcard__ideal b{color:#9CCFC8}
.tcmp{margin-top:clamp(2rem,4vw,3rem);border:1px solid var(--ln);border-radius:22px;background:var(--paper);overflow:hidden}
.tcmp summary{display:flex;align-items:center;justify-content:center;gap:.6rem;min-height:60px;padding:0 1.2rem;cursor:pointer;list-style:none;font:500 .95rem var(--sans)}
.tcmp summary::-webkit-details-marker{display:none}
.tcmp summary svg{transition:rotate .4s var(--e)}
.tcmp[open] summary svg{rotate:180deg}
.tcmp__wrap{overflow-x:auto;border-top:1px solid var(--ln)}
.tcmp table{width:100%;min-width:560px;border-collapse:collapse;font-size:.92rem}
.tcmp th,.tcmp td{padding:.85rem 1rem;text-align:center;border-bottom:1px solid var(--ln)}
.tcmp tbody tr:last-child>*{border-bottom:0}
.tcmp thead th{font:400 1.15rem var(--serif);letter-spacing:-.01em}
.tcmp tbody th{text-align:left;font-weight:400;color:var(--fg-2)}
.tcmp td{color:var(--ink)}
.tcmp__ok{color:var(--lagoon)}.tcmp__ok svg{display:inline-block;vertical-align:middle}
.tcmp__no{color:rgba(22,22,22,.3)}
.tcmp tbody tr:nth-child(odd){background:rgba(22,22,22,.018)}
.tapres{margin-top:clamp(2.4rem,5vw,3.6rem)}
.tapres__l{text-align:center;font:500 .72rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--lagoon);margin-bottom:1rem}
.tapres__g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.8rem,1.4vw,1.2rem)}
.tapres__c{display:flex;justify-content:space-between;gap:1.2rem;align-items:flex-start;padding:clamp(1.3rem,2.2vw,1.8rem);background:var(--paper);border:1px solid var(--ln);border-radius:22px}
.tapres__c h3{font:400 clamp(1.3rem,1.8vw,1.55rem)/1.15 var(--serif);letter-spacing:-.015em;margin-bottom:.45rem}
.tapres__c p{color:var(--fg-2);font-size:.93rem}
.tapres__c a{display:inline-block;margin-top:.6rem;font:500 .9rem var(--sans);color:var(--lagoon)}
.tapres__p{flex:none;padding:.4em .85em;border-radius:99px;border:1px solid var(--ln-2);font:500 .78rem var(--sans);white-space:nowrap}
.tdoute{display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;margin-top:clamp(1.4rem,3vw,2rem);padding:clamp(1.2rem,2.4vw,1.6rem) clamp(1.3rem,2.4vw,2rem);
  border-radius:22px;background:#E3EFEC}
.tdoute p{max-width:620px;color:var(--ink)}
@media (max-width:760px){.tapres__g{grid-template-columns:1fr}.tapres__c{flex-direction:column}.tdoute{flex-direction:column;align-items:flex-start}}
@media (max-width:600px){
  .tcmp table{min-width:0;font-size:.8rem;table-layout:fixed}
  .tcmp th,.tcmp td{padding:.7rem .35rem}
  .tcmp tbody th{width:38%;padding-left:.9rem}
  .tcmp thead td{width:38%}
  .tcmp thead th{font-size:.95rem}
}
/* ============ UN SEUL INTERLOCUTEUR + PROPRIETE ============ */
.direct{background:#F3EFE6}
#direct>.wrap>.label{margin-inline:auto}#direct .h2{text-align:center;margin-inline:auto}
.dir__g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.8rem,1.6vw,1.4rem)}
.dir__c{margin:0;padding:clamp(1.4rem,2.6vw,2.2rem);border-radius:22px;background:var(--paper);border:1px solid var(--ln);display:flex;flex-direction:column;gap:1.6rem}
.dir__c--b{background:#161616;border-color:#161616;color:#F3F0EA}
.dir__c figcaption b{display:block;font:400 clamp(1.4rem,2vw,1.8rem)/1.1 var(--serif);letter-spacing:-.015em;margin-bottom:.5rem}
.dir__c figcaption span{color:var(--fg-2);font-size:.95rem}
.dir__c--b figcaption span{color:rgba(243,240,234,.72)}
.dir__flow{position:relative;display:flex;align-items:center;justify-content:space-between;gap:.4rem;margin-top:auto;padding:1.2rem 0}
.dir__flow::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:repeating-linear-gradient(90deg,var(--ln-2) 0 6px,transparent 6px 12px)}
.dir__c--b .dir__flow::before{background:linear-gradient(90deg,#9CCFC8,#2E6B66)}
.dir__you,.dir__site{position:relative;z-index:1;flex:none;padding:.5em .8em;border-radius:99px;font:500 .72rem var(--sans);letter-spacing:.06em;background:var(--ink);color:var(--ivory)}
.dir__site{background:var(--lagoon);color:#fff}
.dir__c--b .dir__you{background:#F3F0EA;color:#161616}
.dir__chain{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:flex;gap:.3rem;flex:1;justify-content:center;flex-wrap:wrap}
.dir__chain li{padding:.45em .6em;border-radius:10px;font:500 .66rem var(--sans);background:#E6E0D4;color:var(--ink-2);white-space:nowrap}
.dir__rai span{display:inline-block;padding:.35em 1.1em;border-radius:12px;font:400 1.3rem var(--serif);background:#2E6B66;color:#fff}
.dir__chain .dir__rai{background:none;padding:0}
/* le message : un point qui voyage. En agence il palit, ici il arrive entier */
.dir__msg{position:absolute;z-index:2;left:0;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--lagoon);box-shadow:0 0 0 4px color-mix(in srgb,var(--lagoon) 25%,transparent);opacity:0}
.dir__c--b .dir__msg{background:#9CCFC8;box-shadow:0 0 0 4px rgba(156,207,200,.3)}
@keyframes msgA{0%{left:0;opacity:1;transform:scale(1)}100%{left:calc(100% - 12px);opacity:.12;transform:scale(.45)}}
@keyframes msgB{0%{left:0;opacity:1}100%{left:calc(100% - 12px);opacity:1}}
.dir__c.in .dir__msg{animation:msgA 3.4s cubic-bezier(.5,0,.5,1) .6s infinite}
.dir__c--b.in .dir__msg{animation:msgB 1.6s cubic-bezier(.6,0,.3,1) .6s infinite}
.dir__more{text-align:center;margin-top:1.6rem}
.dir__more a{font:500 .95rem var(--sans);color:var(--lagoon)}
.own{display:grid;grid-template-columns:auto 1fr 1.4fr;gap:1rem clamp(1.2rem,3vw,2.4rem);align-items:center;margin-top:clamp(.8rem,1.6vw,1.4rem);padding:clamp(1.4rem,2.6vw,2rem);border-radius:22px;background:#E3EFEC}
.own__ic{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--paper);color:var(--lagoon)}
.own__t h3{font:400 clamp(1.4rem,2vw,1.8rem)/1.1 var(--serif);letter-spacing:-.015em;margin-bottom:.3rem}
.own__t p{color:var(--fg-2);font-size:.95rem}
.own__l{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.own__l li{position:relative;padding-left:1.6rem;font-size:.93rem}
.own__l li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:7px;border-left:2px solid var(--lagoon);border-bottom:2px solid var(--lagoon);rotate:-45deg}
@media (max-width:860px){.dir__g{grid-template-columns:1fr}.own{grid-template-columns:auto 1fr}.own__l{grid-column:1/-1}}
@media (max-width:480px){.dir__chain li{font-size:.6rem;padding:.4em .45em}}
@media (prefers-reduced-motion:reduce){.dir__c .dir__msg{animation:none!important;opacity:0}}
/* etudes de cas, badge disponibilite, phrase de pied de page */
.work__cases{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:1.6rem;font:500 .8rem var(--sans);letter-spacing:.08em;color:rgba(243,240,234,.6)}
.work__cases a{padding:.55em 1em;border:1px solid rgba(243,240,234,.22);border-radius:99px;color:#F3F0EA;text-decoration:none;letter-spacing:0;font-size:.88rem}
.work__cases a:hover{border-color:#9CCFC8;color:#9CCFC8}
.availb{display:inline-flex;align-items:center;gap:.55rem;width:fit-content;padding:.5em .9em;border-radius:99px;font:500 .78rem var(--sans);
  background:color-mix(in srgb,var(--lagoon) 12%,transparent);color:var(--ink)}
.availb i{width:8px;height:8px;border-radius:50%;background:#3BA776;box-shadow:0 0 0 0 rgba(59,167,118,.5);animation:ping 2s ease-out infinite}
.dark .availb,.ft .availb{background:rgba(156,207,200,.12);color:#F3F0EA}
.menu__foot .availb{margin-bottom:1rem}
.ft__seo{max-width:460px;margin-top:1rem;font-size:.9rem;line-height:1.55;opacity:.62}
.ft__cta .availb{margin-top:1rem}
.tarifs__sub{max-width:560px;margin:-1.4rem auto clamp(2.2rem,4vw,3rem);text-align:center;color:var(--fg-2)}

/* =====================================================================
   REFONTE PRO (octobre 2026) : une palette stricte, moins de cartes,
   moins de pastilles, une lecture plus nette. Ce bloc passe en dernier
   et l'emporte sur les reglages precedents.
   ===================================================================== */
:root{--sand:#ECE6DB;--ink-2:#4A4741}
/* deux tons clairs en alternance, le noir reserve aux realisations et au pied de page */
.services,.stats,.direct,.how,.faq{background:var(--ivory)}
.mission,.story,.tarifs,section.fin{background:var(--sand)}
.stats{border-block:0}
.story{border-block:0}
/* etiquettes de section : un simple trait et du texte, plus de pastille */
.sec .label,.story .label{padding:0;border:0;background:none;border-radius:0;gap:.9rem}
.sec .label::before,.story .label::before{width:34px;height:1px;border-radius:0;background:var(--accent)}
/* textes secondaires plus lisibles */
.card p,.who__c p,.tapres__c p,.how__d,.dir__c figcaption span,.own__t p,.tcard__list li,.faq p{color:var(--ink-2)}
.how__d,.card p{font-size:1.02rem;line-height:1.7}
/* services : une ligne par service, illustration et texte en alternance */
.cards{grid-template-columns:1fr;gap:clamp(2.6rem,6vw,5rem)}
.card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"art n" "art t" "art p";align-content:center;column-gap:clamp(2rem,5vw,5rem);row-gap:.7rem;
  padding:0;background:none;border:0;border-radius:0}
.card:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"n art" "t art" "p art"}
.card__art{grid-area:art;margin:0;border-radius:24px;align-self:center}
.card__n{grid-area:n;align-self:end}.card__t{grid-area:t}.card>p{grid-area:p;align-self:start;max-width:46ch}
.card__n,.card__t,.card p{padding-inline:0}
.card__t{font-size:clamp(2rem,3.4vw,3rem)}
.card:hover{transform:none}
@media (max-width:760px){
  .card,.card:nth-child(even){grid-template-columns:1fr;grid-template-areas:"art" "n" "t" "p";row-gap:.6rem}
  .card__art{margin-bottom:.6rem}
}
/* tarifs : les mentions « sur devis » et delais en texte simple */
.tapres__p{border:0;padding:0;font:500 .82rem var(--sans);color:var(--lagoon)}
.tcard__delai{background:none!important;padding:0;margin:-.2rem 0 1.1rem}
/* tout bouton reagit au survol et a l'appui */
.btn,.who__go,.pick__o,.tcard,.film__btn,.ft__copy{transition:transform .25s var(--e),background-color .3s,color .3s,border-color .3s,box-shadow .3s}
.btn:active,.who__go:active,.film__btn:active,.ft__copy:active,.call:active{transform:scale(.97)}
@media (hover:hover){.btn:hover{transform:translateY(-1px)}}
a:focus-visible,button:focus-visible,summary:focus-visible,[role="radio"]:focus-visible{outline:2px solid var(--lagoon);outline-offset:3px;border-radius:8px}
/* haut de page : la video, deux boutons, puis le bandeau */
.hero{padding-bottom:clamp(2rem,4vw,3rem)}
.hero__vid{margin-top:clamp(.6rem,2vw,1.2rem)}
/* frise : plus compacte */
.how__s{padding-block:clamp(1.2rem,2.6vw,2rem)}
.how__art{max-width:460px;justify-self:end;width:100%}
.how__cta{gap:.7rem;flex-wrap:wrap}
/* grain tres leger sur les fonds clairs, pour casser l'aplat numerique */
body::after{content:"";position:fixed;inset:0;z-index:300;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.card{grid-template-rows:1fr auto auto auto 1fr;grid-template-areas:"art ." "art n" "art t" "art p" "art .";row-gap:.8rem}
.card:nth-child(even){grid-template-areas:". art" "n art" "t art" "p art" ". art"}
.card>p{align-self:start}
@media (max-width:760px){.card,.card:nth-child(even){grid-template-rows:auto;grid-template-areas:"art" "n" "t" "p"}}
.dir__c--b figcaption span{color:rgba(243,240,234,.78)}
.tcard--avant .tcard__list li{color:rgba(243,240,234,.82)}
/* ============ AVIS CLIENT ============ */
.quote{margin-top:clamp(3rem,6vw,5rem);margin-bottom:0;padding-top:clamp(2rem,4vw,3rem);border-top:1px solid rgba(243,240,234,.14)}
.quote blockquote{margin:0}
.quote p{font:400 clamp(1.6rem,3.4vw,2.9rem)/1.2 var(--serif);letter-spacing:-.02em;color:#F3F0EA;max-width:28ch;text-wrap:balance}
.quote figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;margin-top:1.4rem;font:500 .85rem var(--sans);color:rgba(243,240,234,.66)}
.quote figcaption b{font:400 1.15rem var(--serif);color:#9CCFC8}
.quote figcaption a{color:#F3F0EA}