/* iapiap.com — styles. Design system v0.4.2. Fonts self-hosted (no third-party requests). */
@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/fonts/geist-mono-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/fonts/geist-mono-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
html{background:#FFFFFF;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-color-scheme: dark){html{background:#121216;color-scheme:dark}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0}
:root{
  --bg:#FFFFFF; --surface:#F7F7F9; --surface-2:#EFEFF3; --line:#E2E2E8; --line-strong:#C9C9D2;
  --fg:#16161D; --fg-2:#5B5B67; --fg-3:#7C7C89; --night:#121216;
  --sig:#FF5A36; --sig-400:#FF7A5A; --on:#14141A; --lagon:#12B5E5;
  --display:"Bricolage Grotesque", system-ui, sans-serif;
  --text:-apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease-b:cubic-bezier(.34,1.56,.64,1); --ease:cubic-bezier(.22,1,.36,1);
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#121216; --surface:#1A1A20; --surface-2:#22222A; --line:#2A2A32; --line-strong:#41414B; --fg:#F7F7F9; --fg-2:#A3A3AF; --fg-3:#8A8A96; --night:#0B0B0E; }
}
a{color:inherit} a:hover{color:inherit}
.iap{background:var(--bg);color:var(--fg);font-family:var(--text);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100%}
.iap *{box-sizing:border-box}
.wrap{max-width:1120px;margin:0 auto;padding-inline:40px}
@media (max-width:900px){.wrap{padding-inline:24px}}
@media (max-width:560px){.wrap{padding-inline:16px}}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:12px;z-index:30;background:var(--bg);padding:8px 12px;border-radius:8px}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:6px}

/* Logotype : positions mesurées sur Bricolage Grotesque 760, opsz 96 */
.lg{position:relative;display:inline-block;font-family:var(--display);font-weight:760;font-variation-settings:"opsz" 96;letter-spacing:-.035em;line-height:1;white-space:nowrap;color:inherit}
.lg i{position:absolute;display:block;width:.15em;height:.15em;top:.1125em;background:var(--sig);border-radius:50%}
.lg .d1{left:.0375em}
.lg .d2{left:1.274em;border-radius:31%;background:var(--dot2, var(--sig))}
.lg .d2.down{top:.9em;border-radius:50%}
.lg .fly{left:.0375em;opacity:0}
.lg.jump .d2{animation:iapShow 1s linear .6s both}
.lg.jump .fly{animation:iapJump 1s cubic-bezier(.45,0,.35,1) .6s both}
@keyframes iapJump{
  0%{opacity:1;transform:translate(0,0) scale(1,1);border-radius:50%}
  12%{transform:translate(0,.02em) scale(1.15,.85);border-radius:50%}
  50%{transform:translate(.62em,-.55em) scale(.95,1.08);border-radius:42%}
  86%{transform:translate(1.2365em,.012em) scale(1.18,.82);border-radius:31%;background:var(--dot2, var(--sig))}
  99%{opacity:1;transform:translate(1.2365em,0) scale(1,1);border-radius:31%;background:var(--dot2, var(--sig))}
  100%{opacity:0;transform:translate(1.2365em,0)}
}
@keyframes iapShow{0%,99%{opacity:0}100%{opacity:1}}
@media (prefers-reduced-motion: reduce){.lg .fly{display:none}.lg.jump .d2{animation:none}}

/* Saut de l'en-tête rejoué (survol, passage de l'ouverture) */
.lg.jump.ja .d2{animation:iapShowA 1s linear both}.lg.jump.ja .fly{animation:iapJumpA 1s cubic-bezier(.45,0,.35,1) both}
.lg.jump.jb .d2{animation:iapShowB 1s linear both}.lg.jump.jb .fly{animation:iapJumpB 1s cubic-bezier(.45,0,.35,1) both}
@keyframes iapShowA{0%,99%{opacity:0}100%{opacity:1}}
@keyframes iapShowB{0%,99%{opacity:0}100%{opacity:1}}
@keyframes iapJumpA{
  0%{opacity:1;transform:translate(0,0) scale(1,1);border-radius:50%}
  12%{transform:translate(0,.02em) scale(1.15,.85);border-radius:50%}
  50%{transform:translate(.62em,-.55em) scale(.95,1.08);border-radius:42%}
  86%{transform:translate(1.2365em,.012em) scale(1.18,.82);border-radius:31%;background:var(--dot2, var(--sig))}
  99%{opacity:1;transform:translate(1.2365em,0) scale(1,1);border-radius:31%;background:var(--dot2, var(--sig))}
  100%{opacity:0;transform:translate(1.2365em,0)}
}
@keyframes iapJumpB{
  0%{opacity:1;transform:translate(0,0) scale(1,1);border-radius:50%}
  12%{transform:translate(0,.02em) scale(1.15,.85);border-radius:50%}
  50%{transform:translate(.62em,-.55em) scale(.95,1.08);border-radius:42%}
  86%{transform:translate(1.2365em,.012em) scale(1.18,.82);border-radius:31%;background:var(--dot2, var(--sig))}
  99%{opacity:1;transform:translate(1.2365em,0) scale(1,1);border-radius:31%;background:var(--dot2, var(--sig))}
  100%{opacity:0;transform:translate(1.2365em,0)}
}
/* En-tête */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb, var(--bg) 88%, transparent);backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:24px;min-height:68px;flex-wrap:wrap;padding-block:10px}
.brand{text-decoration:none;font-size:30px;margin-right:auto;display:inline-flex;align-items:baseline}
/* Descripteur : « studio » en Geist Mono capitales, comme les labels (LE BESOIN). Accolé au logotype, jamais seul, jamais dans les apps. */
.desc{font-family:var(--mono);font-weight:500;font-size:.36em;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);margin-left:.5em;line-height:1}
.menu{display:flex;gap:4px;flex-wrap:wrap}
.menu a{text-decoration:none;font-size:15px;color:var(--fg-2);padding:8px 12px;border-radius:999px}
.menu a:hover{background:var(--surface);color:var(--fg)}
@media (max-width:860px){.menu{display:none}}
.seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--surface-2);gap:2px}
.seg a,.seg button{font:inherit;font-size:13px;font-weight:650;border:0;background:transparent;color:var(--fg-2);padding:6px 11px;border-radius:999px;cursor:pointer;min-height:32px}
.seg a.on,.seg button.on{background:var(--bg);color:var(--fg);box-shadow:0 1px 2px rgba(18,18,22,.14)}

/* Boutons */
.btn{font:inherit;font-size:16px;font-weight:650;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:transform .32s var(--ease-b),background .16s var(--ease)}
.btn:active{transform:scale(.97)}
.btn-p{background:var(--sig);color:var(--on)} .btn-p:hover{background:var(--sig-400);color:var(--on)}
.btn-s{background:transparent;color:var(--fg);border-color:var(--line-strong)} .btn-s:hover{background:var(--surface)}
.btn-ink{background:var(--fg);color:var(--bg)} .btn-ink:hover{color:var(--bg)}
.btn-sm{min-height:40px;font-size:14px;padding:0 16px}
.arr{transition:transform .32s var(--ease-b)} .btn:hover .arr{transform:translateX(3px)}

/* Typo */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);display:flex;align-items:center;gap:10px;margin:0 0 18px}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--sig);flex:none}
.h1{font-family:var(--display);font-weight:780;font-variation-settings:"opsz" 96;font-size:clamp(52px,8.4vw,112px);letter-spacing:-.035em;line-height:.98;margin:0;text-wrap:balance}
.h2{font-family:var(--display);font-weight:750;font-variation-settings:"opsz" 96;font-size:clamp(36px,5vw,60px);letter-spacing:-.028em;line-height:1.02;margin:0 0 16px;text-wrap:balance}
.h3{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.015em;line-height:1.15;margin:0}
.lead{font-size:clamp(18px,1.9vw,21px);color:var(--fg-2);max-width:60ch;margin:24px 0 0}
.muted{color:var(--fg-2)} .small{font-size:14px}
.trace{font-family:var(--mono);font-size:11.5px;padding:2px 7px;border-radius:6px;background:var(--surface-2);color:var(--fg-2);border:1px solid var(--line);white-space:nowrap}
section.blk{padding-block:112px;border-top:1px solid var(--line)}
@media (max-width:700px){section.blk{padding-block:72px}}

/* Ouverture */
.hero{padding-block:88px 104px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:56px;align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px;align-items:center}
.shelf{background:var(--surface);border-radius:28px;padding:28px}
.shelf-head{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;padding:4px 0 26px;font-size:clamp(56px,6.4vw,88px)}
.shelf-head .desc{font-size:.26em}
/* Logo vivant : un geste tiré au hasard à chaque visite (6 aller-retour punchy, 5 goutte, 3 saut), en boucle jusqu'au rechargement. */
.lg.live i{left:.0375em;background:none;border-radius:0;will-change:transform}
.lg.live i b{position:absolute;inset:0;display:block;will-change:transform;transform-origin:50% 100%}
.lg.live .p1 b{background:#FF5A36;border-radius:50%}
.lg.live .p2{transform:translateX(1.2365em)}
.lg.live .p2 b{background:#12B5E5;border-radius:31%}
.lg.live .fly{opacity:0}
.lg.live .fly b{background:#FF5A36;border-radius:50%}
/* 6 · aller-retour punchy (4,2 s) */
.lg.g6 .p1{animation:pkAx 4.2s linear 1.2s infinite both}
.lg.g6 .p2{animation:pkBx 4.2s linear 1.2s infinite both}
.lg.g6 .p1 b{animation:pkAy 4.2s linear 1.2s infinite both}
.lg.g6 .p2 b{animation:pkBy 4.2s linear 1.2s infinite both}
@keyframes pkAx{0%,36%{transform:translateX(0);animation-timing-function:cubic-bezier(.7,0,.25,1)}46%,86%{transform:translateX(1.2365em);animation-timing-function:cubic-bezier(.7,0,.25,1)}96%,100%{transform:translateX(0)}}
@keyframes pkBx{0%,36%{transform:translateX(1.2365em);animation-timing-function:cubic-bezier(.7,0,.25,1)}46%,86%{transform:translateX(0);animation-timing-function:cubic-bezier(.7,0,.25,1)}96%,100%{transform:translateX(1.2365em)}}
@keyframes pkAy{0%,30%{transform:translateY(0) scale(1,1);border-radius:50%;background:#FF5A36}36%{transform:translateY(.03em) scale(1.28,.68);animation-timing-function:cubic-bezier(.2,.9,.3,1)}41%{transform:translateY(-.78em) scale(.82,1.22);border-radius:40%;background:#FF5A36}41.01%{background:#12B5E5}46%{transform:translateY(0) scale(1.38,.62);border-radius:31%;background:#12B5E5;animation-timing-function:cubic-bezier(.3,1.6,.5,1)}50%{transform:translateY(0) scale(.9,1.12)}53%,80%{transform:translateY(0) scale(1,1);border-radius:31%;background:#12B5E5}86%{transform:translateY(.03em) scale(1.28,.68);animation-timing-function:cubic-bezier(.2,.9,.3,1)}91%{transform:translateY(-.78em) scale(.82,1.22);border-radius:40%;background:#12B5E5}91.01%{background:#FF5A36}96%{transform:translateY(0) scale(1.38,.62);border-radius:50%;background:#FF5A36;animation-timing-function:cubic-bezier(.3,1.6,.5,1)}98.5%{transform:translateY(0) scale(.9,1.12)}100%{transform:translateY(0) scale(1,1);border-radius:50%;background:#FF5A36}}
@keyframes pkBy{0%,30%{transform:translateY(0) scale(1,1);border-radius:31%;background:#12B5E5}36%{transform:translateY(.03em) scale(1.28,.68);animation-timing-function:cubic-bezier(.2,.9,.3,1)}41%{transform:translateY(-.34em) scale(.82,1.22);border-radius:40%;background:#12B5E5}41.01%{background:#FF5A36}46%{transform:translateY(0) scale(1.38,.62);border-radius:50%;background:#FF5A36;animation-timing-function:cubic-bezier(.3,1.6,.5,1)}50%{transform:translateY(0) scale(.9,1.12)}53%,80%{transform:translateY(0) scale(1,1);border-radius:50%;background:#FF5A36}86%{transform:translateY(.03em) scale(1.28,.68);animation-timing-function:cubic-bezier(.2,.9,.3,1)}91%{transform:translateY(-.34em) scale(.82,1.22);border-radius:40%;background:#FF5A36}91.01%{background:#12B5E5}96%{transform:translateY(0) scale(1.38,.62);border-radius:31%;background:#12B5E5;animation-timing-function:cubic-bezier(.3,1.6,.5,1)}98.5%{transform:translateY(0) scale(.9,1.12)}100%{transform:translateY(0) scale(1,1);border-radius:31%;background:#12B5E5}}
/* 5 · goutte (5,5 s) */
.lg.g5 .p2 b{animation:gt5 5.5s linear 1.2s infinite both}
@keyframes gt5{0%{transform:translateY(0) scale(1);border-radius:31%;background:#12B5E5;opacity:1;animation-timing-function:cubic-bezier(.32,0,.67,0)}7%{transform:translateY(0) scale(0);opacity:1}8%{transform:translateY(-1.4em) scale(.7,1.1);border-radius:50%;background:#FF5A36;opacity:0}15%{opacity:1;animation-timing-function:cubic-bezier(.55,0,1,.45)}29%{transform:translateY(0) scale(.8,1.25);border-radius:50%;background:#FF5A36}33%{transform:translateY(0) scale(1.45,.6);border-radius:45%;background:#FF5A36;animation-timing-function:cubic-bezier(.33,1,.68,1)}41%{transform:translateY(0) scale(.94,1.06);border-radius:34%;background:#12B5E5}47%,100%{transform:translateY(0) scale(1);border-radius:31%;background:#12B5E5;opacity:1}}
/* 3 · le saut (4 s) */
.lg.g3 .p2{animation:jp3hide 4s linear 1.2s infinite both}
.lg.g3 .fly{animation:jp3x 4s cubic-bezier(.65,0,.35,1) 1.2s infinite both}
.lg.g3 .fly b{animation:jp3y 4s linear 1.2s infinite both}
@keyframes jp3hide{0%{opacity:1}3%,24%{opacity:0}25%,100%{opacity:1}}
@keyframes jp3x{0%{opacity:1;transform:translateX(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}20%{transform:translateX(1.2365em)}24.5%{opacity:1;transform:translateX(1.2365em)}25%,100%{opacity:0;transform:translateX(1.2365em)}}
@keyframes jp3y{0%{transform:translateY(0);border-radius:50%;background:#FF5A36;animation-timing-function:cubic-bezier(.33,1,.68,1)}10%{transform:translateY(-.55em);border-radius:42%;animation-timing-function:cubic-bezier(.32,0,.67,0)}20%{transform:translateY(0) scale(1.12,.88);border-radius:31%;background:#12B5E5;animation-timing-function:cubic-bezier(.33,1,.68,1)}23%,100%{transform:translateY(0) scale(1);border-radius:31%;background:#12B5E5}}
.lg.live:hover i,.lg.live:hover i b{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){.lg.live i,.lg.live i b{animation:none !important}.lg.live .fly{display:none}}
.shelf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 22px;padding-bottom:26px}
.slot{aspect-ratio:1/1;border-radius:22.5%;border:2px dashed var(--line-strong);display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;font-family:var(--mono);font-size:11px;color:var(--fg-3)}
.slot{position:relative;cursor:default;padding-bottom:0}
/* Étiquette sous l'icône, comme sur l'écran d'accueil de l'iPhone ; le point bleu = app nouvellement installée */
.slot .lbl{position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:5px;font-family:var(--text);font-size:13px;font-weight:500;color:var(--fg);white-space:nowrap}
.slot:not(.app) .lbl{font-family:var(--mono);font-size:11.5px;font-weight:400;color:var(--fg-3)}
.newdot{display:block;width:7px;height:7px;border-radius:50%;background:#0A84FF}
.slot.app{border:0;padding:0;display:block;cursor:pointer}
.slot.app .ico{display:block;width:100%;height:100%;border-radius:22.5%;overflow:hidden;box-shadow:0 1px 2px rgba(18,18,22,.08),0 10px 24px rgba(18,18,22,.12);transition:transform .32s var(--ease-b)}
.slot.app:hover .ico{transform:translateY(-3px) scale(1.03)}
.slot.app svg{display:block;width:100%;height:100%}
.newest{position:absolute;top:-10px;left:-8px;z-index:2;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;padding:3px 8px;border-radius:999px;background:var(--sig);color:var(--on);white-space:nowrap}
.bubble{position:absolute;bottom:calc(100% + 10px);left:50%;z-index:3;transform:translateX(-50%) translateY(4px) scale(.92);opacity:0;pointer-events:none;font-family:var(--mono);font-size:12px;padding:6px 11px;border-radius:999px;background:var(--fg);color:var(--bg);white-space:nowrap;transition:opacity .2s var(--ease),transform .32s var(--ease-b)}
.bubble::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--fg)}
.slot:hover .bubble,.slot:focus-visible .bubble{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.shelf-cap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:20px;font-size:14px;color:var(--fg-2)}

/* Preuves */
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:40px}
@media (max-width:760px){.metrics{grid-template-columns:1fr}}
.metric{background:var(--surface);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:12px}
.fig{word-spacing:-.4em;font-family:var(--mono);font-weight:500;font-size:clamp(48px,6vw,72px);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;align-self:flex-start}
.metric .row{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}

/* Apps */
.appcard{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;padding:32px;border-radius:28px;background:var(--surface);margin-top:40px;position:relative;overflow:hidden}
.appcard::after{content:"";position:absolute;right:-90px;top:-90px;width:260px;height:260px;border-radius:50%;background:var(--lagon);opacity:.16}
@media (max-width:700px){.appcard{grid-template-columns:1fr;padding:24px}}
.appicon{width:104px;height:104px;border-radius:22.5%;overflow:hidden;box-shadow:0 1px 2px rgba(18,18,22,.08),0 10px 24px rgba(18,18,22,.14)}
.appicon svg{display:block;width:100%;height:100%}
.app-body{display:flex;flex-direction:column;gap:20px;position:relative;z-index:1;min-width:0}
.app-head{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.app-name{font-family:var(--display);font-weight:760;font-variation-settings:"opsz" 96;font-size:44px;letter-spacing:-.03em;line-height:1;margin:0}
.badge{display:inline-flex;align-items:center;gap:7px;min-height:28px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:650;background:var(--bg);color:var(--fg)}
.badge .pt{width:8px;height:8px;border-radius:50%;background:var(--lagon);box-shadow:0 0 0 3px color-mix(in srgb, var(--lagon) 30%, transparent)}
.badge.idle .pt{background:transparent;border:1.5px solid var(--fg-3);box-shadow:none}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:900px){.facts{grid-template-columns:1fr}}
.fact b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2);font-weight:500;margin-bottom:6px}
.fact p{margin:0;font-size:16px}
.signup{display:flex;gap:8px;flex-wrap:wrap;max-width:560px}
.signup label{width:100%;font-size:14px;color:var(--fg-2)}
.field{flex:1 1 240px;min-height:48px;border-radius:999px;border:1.5px solid var(--line-strong);background:var(--bg);color:var(--fg);font:inherit;font-size:16px;padding:0 18px;min-width:0}
.field:focus{outline:none;border-color:var(--fg)}
.btn-lagon{background:var(--lagon);color:var(--on)} .btn-lagon:hover{color:var(--on);filter:brightness(1.06)}
.msg{width:100%;margin:2px 0 0;font-size:14px;color:var(--fg-2);min-height:1.4em}
/* Origine du nom : ia + app → ia-app → ia-app ia-app → iapiap (positions calculées en JS, une fois, à l'apparition) */
.namerow{display:flex;align-items:baseline;flex-wrap:wrap;gap:.45em;margin:4px 0 22px;font-size:clamp(18px,1.9vw,21px);color:var(--fg-2)}
.nm{position:relative;display:inline-block;font-family:var(--display);font-weight:760;font-variation-settings:"opsz" 96;letter-spacing:-.035em;line-height:1;white-space:nowrap;color:var(--fg);font-size:1.55em;transition:width .7s cubic-bezier(.65,0,.35,1)}
.nm .t{position:absolute;left:0;top:0;display:inline-block;transition:transform .7s cubic-bezier(.65,0,.35,1),opacity .3s ease;will-change:transform,opacity}
.nm .t.op{color:var(--fg-3);font-weight:500}
.nm .t .dot{position:absolute;left:.0375em;top:.1125em;width:.15em;height:.15em;border-radius:50%;background:var(--fg);transition:background .5s ease,border-radius .5s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.nm.final .t.i1 .dot{background:var(--sig);transform:scale(1.05)}
.nm.final .t.i4 .dot{background:var(--lagon);border-radius:31%;transform:scale(1.05)}
.nm .ghost{visibility:hidden}
.vision{font-family:var(--display);font-weight:700;font-variation-settings:"opsz" 96;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.015em;line-height:1.25;max-width:34ch;margin:8px 0 20px;text-wrap:balance}
.newest-l{margin:0 0 -6px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);display:flex;align-items:center;gap:8px}
.newest-l::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sig)}
.vp{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
@media (max-width:760px){.vp{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vp li{display:flex;flex-direction:column;gap:10px;font-size:14.5px;line-height:1.35}
.vp svg{width:44px;height:44px;padding:10px;border-radius:14px;background:color-mix(in srgb, var(--lagon) 16%, transparent);fill:none;stroke:#0E8DB3;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-color-scheme: dark){.vp svg{stroke:#12B5E5}}
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:600px}
.shot{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.phone{aspect-ratio:9/19.5;border-radius:16%/7.4%;background:#1A1A20;padding:5%;position:relative;max-width:100%}
.island{position:absolute;top:4.2%;left:50%;transform:translateX(-50%);width:30%;height:3.2%;border-radius:999px;background:#0B0B0E;z-index:1}
.screen{height:100%;border-radius:12%/5.6%;background:var(--bg);border:1.5px dashed var(--line-strong);display:grid;place-items:center;padding:8px;text-align:center}
.screen span{font-family:var(--mono);font-size:11px;color:var(--fg-3);line-height:1.4}
.shot figcaption{font-size:13.5px;color:var(--fg-2)}
.cosign{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--fg-2)}
.next-slot{margin-top:12px;border:2px dashed var(--line-strong);border-radius:28px;padding:28px 32px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:center}
@media (max-width:700px){.next-slot{grid-template-columns:1fr;padding:24px}}
.next-slot .slot{width:72px;align-self:start}

/* Méthode */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:40px;counter-reset:s}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step{border-top:2px solid var(--fg);padding-top:18px;display:flex;flex-direction:column;gap:8px}
.step .n{font-family:var(--mono);font-size:12px;color:var(--fg-2)}
.step h3{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.012em;line-height:1.2;margin:0}
.step p{margin:0;font-size:15.5px;color:var(--fg-2)}
.tools{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:48px}
@media (max-width:800px){.tools{grid-template-columns:1fr}}
.tools > div{background:var(--surface);border-radius:20px;padding:24px}
.tools p{margin:8px 0 0}
.motto{font-family:var(--mono);font-size:16px}

/* Principes */
.pr{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.1fr);gap:24px;padding:26px 0;border-top:1px solid var(--line);align-items:baseline}
.pr:last-child{border-bottom:1px solid var(--line)}
@media (max-width:760px){.pr{grid-template-columns:1fr;gap:6px}}
.pr .n{font-family:var(--mono);font-size:13px;color:var(--fg-2)}
.pr h3{font-family:var(--display);font-weight:720;font-variation-settings:"opsz" 96;font-size:clamp(26px,3vw,34px);letter-spacing:-.02em;line-height:1.1;margin:0}
.pr p{margin:0;color:var(--fg-2)}
.principles{margin-top:40px}

/* Qui */
.who{display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:start;margin-top:8px}
@media (max-width:700px){.who{grid-template-columns:1fr;gap:24px}}
.avatar{width:120px;height:120px;border-radius:50%;background:#1A1A20;color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:720;font-size:40px;position:relative}
.avatar::after{content:"";position:absolute;right:2px;top:2px;width:26px;height:26px;border-radius:50%;background:var(--sig);border:4px solid var(--bg)}
.who p{font-size:clamp(19px,2vw,22px);line-height:1.5;margin:0 0 16px;max-width:58ch}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 20px}
.chip{font-family:var(--mono);font-size:12.5px;padding:6px 12px;border-radius:999px;background:var(--surface-2);color:var(--fg)}
.who p.role{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);margin:0 0 22px}
.who-logo{display:flex;align-items:baseline;flex-wrap:wrap;font-size:clamp(56px,7vw,88px);margin:12px 0 28px;color:var(--fg)}
.who-logo .desc{font-size:.26em}
.quote{margin:8px 0 28px;padding:4px 0 4px 26px;border-left:0;position:relative}
.quote::before{content:"«";position:absolute;left:-6px;top:-14px;font-family:var(--display);font-weight:800;font-size:56px;line-height:1;color:var(--sig)}
.who .quote p{font-family:var(--display);font-weight:650;font-variation-settings:"opsz" 96;font-size:clamp(21px,2.3vw,27px);letter-spacing:-.012em;line-height:1.3;margin:0 0 12px;max-width:40ch}
.quote footer{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.quote .qname{color:var(--fg)}
.sign{font-family:var(--mono);font-size:13px;color:var(--fg-2)}

/* Contact */
.contact{background:var(--sig);color:var(--on);border-radius:36px;padding:64px 56px;margin-block:24px 112px}
@media (max-width:700px){.contact{padding:40px 24px;border-radius:28px;margin-bottom:72px}}
.contact .eyebrow{color:var(--on)} .contact .eyebrow::before{background:var(--on)}
.contact .h2{color:var(--on)}
.contact p{font-size:clamp(18px,1.9vw,21px);max-width:56ch;margin:0}
.mail{font-family:var(--mono);font-size:clamp(18px,2.2vw,24px);user-select:all;padding:10px 16px;border-radius:14px;background:rgba(20,20,26,.08)}
.contact .btn-ink{background:#14141A;color:#fff}
.contact .btn-line{background:transparent;color:var(--on);border-color:rgba(20,20,26,.35)}

/* Pied */
.foot{border-top:1px solid var(--line);padding-block:32px 48px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;font-size:14px;color:var(--fg-2)}
.foot a{color:var(--fg-2);text-decoration-color:var(--sig);text-decoration-thickness:2px;text-underline-offset:3px}
.foot-l{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.foot-r{display:flex;gap:16px;flex-wrap:wrap}

/* Site additions */
.seg a{display:inline-flex;align-items:center;text-decoration:none;font-size:13px;font-weight:650;color:var(--fg-2);padding:6px 11px;border-radius:999px;min-height:32px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn[disabled]{opacity:.6;cursor:progress}
.msg a{color:var(--fg-2);text-decoration-color:var(--lagon);text-decoration-thickness:2px;text-underline-offset:3px}
.foot-r a{min-height:24px}
/* Legal pages */
.legal{padding-block:72px 96px;max-width:760px}
.legal h1{font-family:var(--display);font-weight:760;font-variation-settings:"opsz" 96;font-size:clamp(40px,6vw,64px);letter-spacing:-.03em;line-height:1;margin:0 0 12px}
.legal h2{font-family:var(--display);font-weight:720;font-size:24px;letter-spacing:-.012em;line-height:1.2;margin:48px 0 10px}
.legal p,.legal li{color:var(--fg-2)}
.legal p strong,.legal li strong{color:var(--fg);font-weight:650}
.legal ul{padding-left:20px}
.legal a{text-decoration-color:var(--sig);text-decoration-thickness:2px;text-underline-offset:3px}
.legal .upd{font-family:var(--mono);font-size:12.5px;color:var(--fg-3);margin:0 0 32px}
.todo{background:#FFE1D8;color:#14141A;padding:0 .3em;border-radius:4px}
.nf{padding-block:120px;text-align:left}
@media (max-width:560px){.top .btn-sm{display:none}.brand{font-size:26px}}