/* Au-delà du cadre. Maquette. Système : angles vifs partout, un seul accent (cobalt). */
@font-face{font-family:"Bricolage";src:url(assets/fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Geist";src:url(assets/fonts/geist.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --bg:#f1f2f4; --surface:#ffffff; --ink:#12151b; --muted:#565d6b; --line:#d3d7de;
  --accent:#1e3fae; --accent-ink:#ffffff; --accent-soft:#e3e8f7;
  --display:"Bricolage","Helvetica Neue",Arial,sans-serif;
  --text:"Geist","Helvetica Neue",Arial,sans-serif;
  --gut:clamp(20px,4vw,56px);
  --ease:cubic-bezier(.16,1,.3,1);
  --nav-h:68px;
  /* z-index : 0 canvas, 1 contenu, 10 nav */
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0f1216;--surface:#171b21;--ink:#eceef2;--muted:#a3aab8;--line:#2a303a;--accent:#8ea7ff;--accent-ink:#0b1022;--accent-soft:#1a2238}
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.6 var(--text);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p,ol,ul,figure,blockquote,dl,dd,fieldset{margin:0;padding:0}
ol,ul{list-style:none}
fieldset{border:0;min-width:0}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bg);padding:10px 14px;z-index:20}
.skip:focus{left:8px}

.wrap{width:100%;max-width:1320px;margin-inline:auto;padding-inline:var(--gut)}
main,.footer{position:relative;z-index:1}
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.solid{background:var(--bg)}

.ic{display:inline-block;width:1.15em;height:1.15em;flex:none;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;vertical-align:-.2em}

/* Typo */
h1,h2,h3,.h2{font-family:var(--display);font-weight:600;letter-spacing:-.025em;line-height:1.05;text-wrap:balance}
h1{font-size:clamp(2.5rem,5.2vw,4.5rem)}
.h2{font-size:clamp(2rem,3.6vw,3.25rem)}
h3{font-size:1.25rem;letter-spacing:-.015em;line-height:1.2}
.eyebrow{font-size:.8125rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:20px}
.lead{font-size:clamp(1.0625rem,1.4vw,1.25rem);color:var(--muted);max-width:44ch;margin-top:24px}
.body{color:var(--muted);max-width:60ch;margin-top:16px}

/* Boutons et liens */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border:1px solid transparent;font-weight:500;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .25s var(--ease),background-color .25s,color .25s,border-color .25s}
.btn:active{transform:translateY(1px) scale(.985)}
.btn--primary{background:var(--accent);color:var(--accent-ink)}
.btn--primary:hover{background:color-mix(in srgb,var(--accent) 86%,var(--ink))}
.btn--ghost{border-color:var(--ink);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--bg)}
.btn--light{background:#fff;color:#16224f}
.btn--light:hover{background:#e6ebfb}
.link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-weight:500;color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.link .ic{transition:transform .3s var(--ease)}
.link:hover .ic{transform:translateX(4px)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}

/* Nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:10;height:var(--nav-h);background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.is-stuck{border-bottom-color:var(--line)}
.nav__in{height:100%;display:flex;align-items:center;gap:32px}
.brand{display:inline-flex;align-items:center;gap:12px;font-family:var(--display);font-weight:600;font-size:1.125rem;letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.brand__mark{width:22px;height:26px;border:4px solid var(--ink);position:relative}
.brand__mark::after{content:"";position:absolute;right:-9px;bottom:-9px;width:10px;height:10px;background:var(--accent)}
.nav__links{display:flex;gap:28px;margin-left:auto}
.nav__links a{font-size:.9375rem;text-decoration:none;color:var(--muted);white-space:nowrap;transition:color .2s}
.nav__links a:hover{color:var(--ink)}
.nav__cta{min-height:42px;padding:0 18px;font-size:.9375rem}
.nav__toggle{display:none;width:44px;height:44px;border:1px solid var(--line);background:none;cursor:pointer;font-size:1.25rem;align-items:center;justify-content:center}

/* Zones 3D */
.stage{position:relative;min-height:320px}
.stage__fallback{display:none;position:absolute;inset:0;margin:auto;max-height:86%;width:auto;box-shadow:0 30px 60px -30px rgb(18 21 27/.35)}
.no-gl .stage__fallback{display:block}
.no-gl #gl,.no-gl .stage__hint{display:none}

/* Hero */
.hero{min-height:100dvh;display:flex;align-items:center;padding-top:var(--nav-h)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center}
.hero__stage{height:min(74dvh,720px)}
.hero__text>*{animation:rise .9s var(--ease) both}
.hero__text>:nth-child(2){animation-delay:.08s}.hero__text>:nth-child(3){animation-delay:.16s}.hero__text>:nth-child(4){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}

/* Preuve */
.proof{position:relative;border-block:1px solid var(--line);background:var(--bg)}
.proof__in{display:grid;grid-template-columns:repeat(3,1fr)}
.proof__item{padding:26px 0;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.proof__item+.proof__item{padding-left:32px;border-left:1px solid var(--line)}
.proof__item strong{font-family:var(--display);font-size:1.75rem;letter-spacing:-.02em;font-weight:600;white-space:nowrap}
.proof__item span{color:var(--muted);font-size:.9375rem}

/* Sections */
.services,.process,.courses,.reviews,.story,.contact{padding-block:clamp(88px,11vw,152px)}

/* Bento : 4 contenus, 4 cellules */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-top:56px}
.tile{background:var(--surface);display:flex;flex-direction:column;overflow:hidden}
.tile img{width:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.tile:hover img{transform:scale(1.035)}
.tile__body{padding:28px}
.tile__body p{color:var(--muted);margin-top:10px;max-width:46ch}
.tile--a{grid-column:span 7;grid-row:span 2}
.tile--a img{flex:1;min-height:320px;height:100%}
.tile--b,.tile--c{grid-column:span 5}
.tile--b img,.tile--c img{aspect-ratio:16/8}
.tile--d{grid-column:span 12;flex-direction:row;align-items:stretch;background:var(--accent);color:var(--accent-ink)}
.tile--d .tile__body{flex:1;padding:clamp(28px,4vw,56px);align-self:center}
.tile--d .tile__body p{color:inherit;opacity:.86;font-size:1.125rem}
.tile--d .link{color:inherit}
.tile--d img{width:44%;background:#fff}

/* Anatomie */
.anatomy{height:340vh;position:relative}
.anatomy__sticky{position:sticky;top:0;height:100dvh;display:flex;align-items:center;padding-top:var(--nav-h)}
.anatomy__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:center}
.anatomy__stage{height:min(78dvh,760px)}
.layers{margin-top:36px;display:grid;gap:4px;max-width:44ch}
.layers li{padding:12px 0 12px 20px;border-left:2px solid var(--line);opacity:.42;transition:opacity .4s,border-color .4s}
.layers li p{color:var(--muted);font-size:.9375rem;margin-top:4px;overflow:hidden;max-height:0;transition:max-height .5s var(--ease)}
.layers li.is-active{opacity:1;border-left-color:var(--accent)}
.layers li.is-active p{max-height:7em}

/* Configurateur */
.config{padding-block:clamp(72px,9vw,128px);min-height:100dvh;display:flex;align-items:center}
.config__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
.config__stage{height:min(80dvh,780px);cursor:grab;touch-action:pan-y}
.config__stage.is-drag{cursor:grabbing}
.stage__hint{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:.875rem;color:var(--muted)}
.config__panel{background:var(--surface);padding:clamp(24px,3vw,40px)}
.config__panel .h2{font-size:clamp(1.75rem,2.6vw,2.5rem)}
.field{margin-top:26px}
.field legend,.field label{font-size:.875rem;font-weight:500;display:flex;justify-content:space-between;width:100%;margin-bottom:10px}
.field output{color:var(--muted);font-weight:400;font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:40px;padding:0 14px;border:1px solid var(--line);background:none;cursor:pointer;font-size:.9375rem;transition:border-color .2s,background-color .2s,color .2s}
.chip.is-on{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.swatch{border:0;background:none;padding:0;cursor:pointer;display:grid;justify-items:center;gap:6px;font-size:.75rem;color:var(--muted);width:56px}
.swatch::before{content:"";width:40px;height:40px;background:var(--c);border:1px solid var(--line);outline:2px solid transparent;outline-offset:3px;transition:outline-color .2s,transform .3s var(--ease)}
.swatch:hover::before{transform:translateY(-2px)}
.swatch.is-on{color:var(--ink)}
.swatch.is-on::before{outline-color:var(--accent)}
input[type=range]{width:100%;accent-color:var(--accent);height:28px;margin:0}
.config__result{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted)}
.config__result strong{color:var(--ink);font-family:var(--display);font-size:1.25rem;font-variant-numeric:tabular-nums}

/* Créations : panoramique horizontal piloté par le scroll (desktop), scroll natif sinon */
.works{position:relative}
.works__sticky{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;justify-content:center;padding-top:var(--nav-h);overflow:hidden}
.works__head{display:flex;align-items:baseline;gap:24px;flex-wrap:wrap}
.works__head .body{margin-top:0}
.works__viewport{margin-top:clamp(20px,3vh,40px)}
.works__track{display:flex;gap:24px;padding-inline:var(--gut);width:max-content;will-change:transform}
.works__track figure{background:#fff;color:#12151b;display:flex;flex-direction:column}
.works__track img{height:min(56dvh,560px);width:auto;max-width:none}
.works__track figcaption{padding:14px 18px 16px;display:flex;justify-content:space-between;gap:16px;align-items:baseline;border-top:1px solid #e6e8ec}
.works__track figcaption strong{font-family:var(--display);font-weight:600;letter-spacing:-.01em}
.works__track figcaption span{font-size:.8125rem;color:#565d6b;white-space:nowrap}
.works.is-native{height:auto!important}
.works.is-native .works__sticky{position:static;height:auto;padding-block:clamp(88px,11vw,152px) clamp(64px,8vw,104px)}
.works.is-native .works__viewport{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:12px}
.works.is-native .works__track li{scroll-snap-align:center}
.works.is-native .works__track img{height:min(52dvh,420px)}

/* Démarche */
.process__quote blockquote{font-family:var(--display);font-weight:500;font-size:clamp(1.625rem,3.2vw,2.75rem);line-height:1.18;letter-spacing:-.02em;max-width:26ch;text-wrap:balance}
.process__quote{display:grid;gap:20px;padding-left:clamp(0px,12vw,200px)}
.process__quote figcaption{color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:clamp(56px,7vw,96px);counter-reset:s}
.steps li{border-top:2px solid var(--ink);padding-top:20px}
.steps p{color:var(--muted);margin-top:10px}

/* Cours */
.plans{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:20px;margin-top:56px}
.plan{background:var(--surface);padding:28px;display:flex;flex-direction:column;gap:8px}
.plan p:not(.plan__price){color:var(--muted);font-size:.9375rem}
.plan__price{font-family:var(--display);font-weight:600;font-size:2.25rem;letter-spacing:-.03em;line-height:1;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.plan__price span{font-family:var(--text);font-size:.875rem;font-weight:400;letter-spacing:0;color:var(--muted)}
.plan--feature{grid-row:span 3;background:var(--accent);color:var(--accent-ink);justify-content:flex-end;padding:clamp(28px,3vw,44px)}
.plan--feature .plan__price{font-size:clamp(3.5rem,6vw,5.5rem);margin-bottom:auto}
.plan--feature .plan__price span,.plan--feature p:not(.plan__price){color:inherit;opacity:.86}
.plan--feature h3{font-size:1.75rem}
.plan--feature .btn{margin-top:20px;align-self:flex-start}
.plan:last-child{grid-column:span 2}

/* Avis */
.reviews__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,96px);align-items:start}
.reviews__score{position:sticky;top:calc(var(--nav-h) + 40px)}
.score{display:flex;align-items:center;gap:18px;margin-top:32px}
.score strong{font-family:var(--display);font-size:clamp(4rem,8vw,6.5rem);font-weight:600;letter-spacing:-.04em;line-height:1}
.stars{display:flex;gap:4px;color:var(--accent);font-size:1.375rem}
.quotes{columns:2;column-gap:20px}
.quotes li{break-inside:avoid;background:var(--surface);padding:26px;margin-bottom:20px}
.quotes blockquote{font-size:1.0625rem;line-height:1.5}
.quotes li:nth-child(3n+1) blockquote{font-family:var(--display);font-size:1.375rem;line-height:1.3;letter-spacing:-.01em}

/* Histoire */
.story__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:32px 40px;align-items:end}
.story__img{grid-column:1/-1;width:100%;aspect-ratio:16/6;object-fit:cover}
.story__text{grid-column:1/7}
.timeline{grid-column:8/-1;display:grid;gap:18px}
.timeline div{display:grid;grid-template-columns:64px 1fr;gap:16px}
.timeline dt{font-family:var(--display);font-weight:600;color:var(--accent)}
.timeline dd{color:var(--muted)}

/* Contact */
.contact__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);margin-top:56px;align-items:start}
.info{display:grid;gap:36px}
.info__row{display:grid;grid-template-columns:28px 1fr;gap:18px}
.info__row>.ic{font-size:1.5rem;color:var(--accent);margin-top:2px}
.info__row h3{font-size:1.0625rem;margin-bottom:6px}
.info__row p{color:var(--muted)}
.info__row .btn{margin-top:16px}
.info__row .link{margin-top:10px}
.tel{font-family:var(--display);font-size:1.75rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.tel:hover{color:var(--accent)}
.hours{border-collapse:collapse;width:100%;max-width:340px;font-variant-numeric:tabular-nums}
.hours th{font-weight:400;text-align:left;color:var(--muted);padding:5px 0}
.hours td{text-align:right;padding:5px 0}
.hours tr.is-today th,.hours tr.is-today td{color:var(--accent);font-weight:600}
.map{aspect-ratio:16/9;background:var(--surface)}
.map iframe{width:100%;height:100%;border:0;display:block}
.form{background:var(--surface);padding:clamp(24px,3vw,40px);margin-top:20px;display:grid;gap:18px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.input{display:grid;gap:8px}
.input label{font-size:.875rem;font-weight:500}
.input input,.input select,.input textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--muted);border-radius:0;background:var(--bg);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.input textarea{resize:vertical}
.input :is(input,select,textarea):focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent)}
.input.is-error :is(input,textarea){border-color:#c22a2a}
.help{font-size:.8125rem;color:var(--muted)}
.error{font-size:.8125rem;color:#c22a2a;font-weight:500}
@media (prefers-color-scheme:dark){.error{color:#ff8f8f}.input.is-error :is(input,textarea){border-color:#ff8f8f}}
.form .btn{justify-self:start}
.form__ok{padding:14px 16px;background:var(--accent-soft);border-left:3px solid var(--accent)}

/* Pied de page */
.footer{border-top:1px solid var(--line);padding-block:56px}
.footer__in{display:grid;grid-template-columns:1.4fr 1fr;gap:32px}
.footer p{color:var(--muted);font-size:.9375rem}
.footer .brand{color:var(--ink);margin-bottom:14px}
.footer nav{display:grid;gap:8px;justify-items:start;align-content:start}
.footer nav a{text-decoration:none}
.footer nav a:hover{color:var(--accent)}
.footer__legal{grid-column:1/-1;border-top:1px solid var(--line);padding-top:24px;font-size:.8125rem!important}

/* Apparition au scroll */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0)*70ms)}
.reveal.is-in{opacity:1;transform:none}

/* Responsive */
@media (max-width:1023px){
  .nav__links{position:fixed;inset:var(--nav-h) 0 auto 0;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:8px var(--gut) 20px;display:none}
  .nav__links.is-open{display:flex}
  .nav__links a{padding:14px 0;font-size:1.0625rem;color:var(--ink);border-bottom:1px solid var(--line)}
  .nav__toggle{display:inline-flex}
  .nav__cta{margin-left:auto}
  .plans{grid-template-columns:1fr 1fr}
  .plan--feature{grid-column:1/-1;grid-row:auto;min-height:320px}
}
@media (max-width:767px){
  .nav__cta{display:none}
  .nav__toggle{margin-left:auto}
  .hero{align-items:flex-start;padding-top:calc(var(--nav-h) + 32px)}
  .hero__grid,.anatomy__grid,.config__grid,.reviews__grid,.contact__grid,.footer__in{grid-template-columns:1fr}
  .hero__stage{height:56dvh}
  .proof__in{grid-template-columns:1fr}
  .proof__item{padding:16px 0}
  .proof__item+.proof__item{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .bento{grid-template-columns:1fr;margin-top:36px}
  .tile--a,.tile--b,.tile--c,.tile--d{grid-column:auto;grid-row:auto}
  .tile--a img{min-height:0;aspect-ratio:4/3}
  .tile--d{flex-direction:column}
  .tile--d img{width:100%}
  .anatomy__sticky{align-items:flex-start;padding-top:calc(var(--nav-h) + 16px)}
  .anatomy__grid{gap:8px}
  .anatomy__stage{height:44dvh;order:-1}
  .anatomy__text .h2{font-size:1.75rem}
  .layers{margin-top:16px}
  .layers li{display:none}
  .layers li.is-active{display:block}
  .config{display:block}
  .config__stage{height:58dvh}
  .process__quote{padding-left:0}
  .steps{grid-template-columns:1fr;gap:28px}
  .plans{grid-template-columns:1fr}
  .plan:last-child,.plan--feature{grid-column:auto}
  .reviews__score{position:static}
  .quotes{columns:1}
  .story__grid{grid-template-columns:1fr;gap:28px}
  .story__img,.story__text,.timeline{grid-column:auto}
  .swatches{gap:8px}
  .swatch{width:52px}
  .story__img{aspect-ratio:4/3}
  .form__row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .hero__text>*{animation:none}
  .tile img,.link .ic,.btn{transition:none}
}