/* Suite de panneaux pleine largeur, comme une planche de présentation : un panneau = une idée.
   Panneaux pleins (navy, crème, bleu, orange) et panneaux coupés en deux moitiés de couleur.
   Énoncés centrés, détails alignés à gauche. Archivo seule, largeur variable. */
:root{
  --navy:#0A1440;
  --navy-deep:#060C2A;
  --screen:#111E57;
  --cream:#FFF4EA;
  --sand:#EFDAC5;
  --sky:#38B6FE;
  --orange:#FD914E;
  --postmark:#D1551E;
  --on-navy:rgba(255,244,234,.72);
  --on-cream:rgba(10,20,64,.70);
  --rule-navy:rgba(255,244,234,.22);
  --rule-cream:rgba(10,20,64,.16);
  --font:"Archivo","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-padding-top:90px;-webkit-tap-highlight-color:rgba(253,145,78,.2)}
a,button,summary,label,input,select,textarea{touch-action:manipulation}
body{margin:0;background:var(--cream);color:var(--navy);font-family:var(--font);font-variation-settings:"wdth" 100;font-size:17px;line-height:1.6;font-weight:420;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
[hidden]{display:none!important}
p{margin:0}
h1,h2,h3{margin:0;font-weight:800;font-variation-settings:"wdth" 116;letter-spacing:-.038em;line-height:.94;text-wrap:balance}
em{font-style:normal;color:var(--sky)}
.orangeb em,.skyb em,.cream em{color:var(--postmark)}
::selection{background:var(--orange);color:var(--navy)}
:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.skip{position:absolute;left:16px;top:-80px;z-index:100;padding:12px 20px;border-radius:999px;background:var(--orange);color:var(--navy);font-weight:700;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
main:focus{outline:none}

.navy{background:var(--navy);color:var(--cream)}
.deep{background:var(--navy-deep);color:var(--cream)}
.cream{background:var(--cream);color:var(--navy)}
.skyb{background:var(--sky);color:var(--navy)}
.orangeb{background:var(--orange);color:var(--navy)}

.panel{padding-block:clamp(96px,14vw,196px);position:relative;overflow:hidden}
.wrap{max-width:1240px;margin-inline:auto;padding-left:max(clamp(20px,5vw,64px),env(safe-area-inset-left,0px));padding-right:max(clamp(20px,5vw,64px),env(safe-area-inset-right,0px))}
.mid{max-width:960px;margin-inline:auto;text-align:center}
.mid .lede{margin-inline:auto}

h1{font-size:clamp(2.7rem,8.4vw,6.6rem);font-variation-settings:"wdth" 110;letter-spacing:-.045em}
h2{font-size:clamp(2.1rem,5.6vw,4.4rem)}
h3{font-size:1.2rem;font-variation-settings:"wdth" 104;letter-spacing:-.02em;line-height:1.2}
.lede{margin-top:28px;max-width:52ch;font-size:clamp(1.04rem,1.5vw,1.22rem);line-height:1.55;color:var(--on-navy)}
.cream .lede,.skyb .lede,.orangeb .lede,.half-cream .lede,.half-sky .lede{color:var(--on-cream)}

.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-variation-settings:"wdth" 104;font-size:1.02rem;letter-spacing:-.012em;padding:16px 30px;text-decoration:none;border:2px solid transparent;border-radius:999px;cursor:pointer;transition:background .18s,color .18s,border-color .18s,translate .25s var(--ease),scale .15s,transform .35s var(--ease);transform:translate(var(--mx,0px),var(--my,0px))}
.btn:hover{translate:0 -2px}
.btn:active{scale:.97}
.btn-orange{background:var(--orange);color:var(--navy)}
.btn-orange:hover{background:var(--cream)}
.btn-navy{background:var(--navy);color:var(--cream)}
.btn-navy:hover{background:var(--postmark)}
.btn-ghost{border-color:currentColor;background:transparent;color:inherit}
.btn-ghost:hover{background:currentColor;color:var(--navy)}
.btn-sm{padding:11px 22px;font-size:.93rem}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:42px}
.mid .cta{justify-content:center}

header{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:var(--navy-deep);color:var(--cream);transition:box-shadow .3s}
header.scrolled{box-shadow:0 12px 30px -20px rgba(6,12,42,.9)}
.bar{display:flex;align-items:center;gap:clamp(18px,3vw,46px);height:74px}
.logo{height:30px;width:auto;flex:none}
nav{display:flex;gap:30px;margin-left:auto;font-weight:600;font-size:.97rem}
nav a{position:relative;color:inherit;text-decoration:none;padding-block:5px;border-bottom:2px solid transparent}
nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
nav a:hover::after,nav a.on::after{transform:scaleX(1);transform-origin:left}

/* ouverture */
/* ouverture : affiche marseillaise, le soleil se lève sur la mer puis s'y couche au défilement */
.hero{--sea:clamp(76px,10vw,150px);--sun:clamp(260px,34vw,480px);text-align:center;padding-block:clamp(44px,5vw,72px) calc(var(--sea) + var(--sun)*.3)}
.sun{position:absolute;left:50%;bottom:calc(var(--sea) - var(--sun)/2);width:var(--sun);aspect-ratio:1;translate:calc(-50% + var(--sx,0px)) var(--sy,0px);pointer-events:none;animation:sunrise 1.8s var(--ease) .15s backwards}
@keyframes sunrise{from{transform:translateY(34%);opacity:.2}}
.sun g{transform-origin:50% 50%;animation:settle 4.5s var(--ease) .15s backwards}
@keyframes settle{from{transform:rotate(-16deg)}}
.sea{position:absolute;left:0;right:0;bottom:0;height:var(--sea);background:linear-gradient(180deg,#0e1b55 0%,var(--navy-deep) 100%);box-shadow:0 -1px 0 rgba(253,145,78,.55)}
.sea svg{position:absolute;display:block;height:100%}
.swell{inset:0;width:100%}
.glint{left:50%;top:0;width:calc(var(--sun)*.42);translate:-50% 0}
.glint rect{transform-box:fill-box;transform-origin:center;animation:shimmer 1.6s ease-in-out calc(.6s + var(--i)*.12s) 2 alternate}
@keyframes shimmer{to{transform:scaleX(.82);opacity:.45}}
.hero .wrap{position:relative;z-index:2}
.hero .wrap>*{animation:rise .9s var(--ease) backwards}
.hero .wrap>:nth-child(2){animation-delay:.12s}
.hero .wrap>:nth-child(3){animation-delay:.22s}
@keyframes rise{from{opacity:0;translate:0 18px}}
.hero h1{max-width:15ch;margin-inline:auto;font-size:clamp(2.5rem,6vw,5rem);font-variation-settings:"wdth" 112;letter-spacing:-.045em;line-height:.92}
.hero h1 em{display:block}
.kicker{display:block;margin-bottom:clamp(22px,3vw,34px);font-size:clamp(.78rem,1.1vw,.9rem);font-weight:700;font-variation-settings:"wdth" 118;letter-spacing:.16em;text-transform:uppercase;line-height:1.2;color:var(--orange)}
.hero .cta{justify-content:center;margin-top:36px}
/* fond plein : les rayons du soleil passent derrière, pas à travers */
.hero .btn-ghost{background:var(--navy)}
.hero .btn-ghost:hover{background:var(--cream)}
.hero p.intro{max-width:46ch;margin:clamp(22px,2.4vw,30px) auto 0;font-size:clamp(1.05rem,1.6vw,1.26rem);line-height:1.55;color:var(--on-navy)}

/* énoncé */
.claim h2{max-width:17ch;margin-inline:auto}
.claim .lede{max-width:46ch}

/* téléphones : proportions d'un iPhone 15 Pro en titane noir (écran de 393 × 852 points).
   --w est la largeur du téléphone ; dans l'écran, tout est mesuré en points iOS (--pt). */
.stage{display:flex;justify-content:center;align-items:flex-end;gap:clamp(14px,3vw,40px);margin-top:clamp(52px,7vw,84px)}
.phone{--w:min(300px,72vw);position:relative;width:var(--w);flex:none;padding:calc(var(--w)*.011);border-radius:calc(var(--w)*.165);background:linear-gradient(155deg,#8d8f94 0%,#3c3d42 14%,#232428 46%,#2e2f34 80%,#7b7d82 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 48px 92px -54px rgba(6,12,42,.95),0 2px 6px rgba(6,12,42,.4);translate:0 var(--py,0px);transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease)}
.phone .case{border-radius:calc(var(--w)*.154);padding:calc(var(--w)*.022);background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
/* boutons latéraux : action et volume à gauche, côté à droite */
.phone::before,.phone::after{content:"";position:absolute;width:calc(var(--w)*.011);background:linear-gradient(90deg,#2a2b2f,#7d7f84 55%,#3a3b40)}
.phone::before{right:calc(var(--w)*-.009);top:27%;height:12.5%;border-radius:0 2px 2px 0}
.phone::after{left:calc(var(--w)*-.009);top:17%;height:27%;border-radius:2px 0 0 2px;-webkit-mask:linear-gradient(180deg,#000 0 15%,transparent 15% 33%,#000 33% 59%,transparent 59% 74%,#000 74%);mask:linear-gradient(180deg,#000 0 15%,transparent 15% 33%,#000 33% 59%,transparent 59% 74%,#000 74%)}
.screen{--pt:calc(100cqw / 393);container-type:inline-size;aspect-ratio:393/852;border-radius:calc(var(--w)*.131);overflow:hidden;position:relative;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Helvetica Neue",Arial,sans-serif;font-variation-settings:normal;letter-spacing:-.01em;font-weight:400;line-height:1.25;text-align:left;-webkit-font-smoothing:antialiased}
.screen::after{content:"";position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 30%);pointer-events:none;z-index:6}
.island{position:absolute;top:calc(var(--pt)*11);left:50%;translate:-50% 0;width:calc(var(--pt)*126);height:calc(var(--pt)*37);background:#000;border-radius:999px;z-index:5}
.island::after{content:"";position:absolute;right:calc(var(--pt)*12);top:50%;width:calc(var(--pt)*12);height:calc(var(--pt)*12);translate:0 -50%;border-radius:50%;background:radial-gradient(circle at 38% 36%,#334066 0,#121829 42%,#05070d 72%)}
.status{position:relative;z-index:4;display:grid;grid-template-columns:1fr calc(var(--pt)*126) 1fr;align-items:center;height:calc(var(--pt)*59);font-size:calc(var(--pt)*17);font-weight:600;letter-spacing:-.02em}
.status .t{justify-self:center;padding-left:calc(var(--pt)*8)}
.status .ic{grid-column:3;justify-self:center;display:flex;align-items:center;gap:calc(var(--pt)*5);padding-right:calc(var(--pt)*4)}
.status svg{display:block;height:calc(var(--pt)*12);width:auto}
.status svg:last-child{height:calc(var(--pt)*13)}

/* écran verrouillé : fond d'écran au crépuscule sur la mer */
.lock{background:radial-gradient(95% 34% at 50% 84%,rgba(253,145,78,.78) 0%,rgba(209,85,30,.42) 40%,rgba(209,85,30,0) 72%),linear-gradient(180deg,#060d33 0%,#10205f 34%,#253686 60%,#3a2f72 80%,#120e30 100%);color:#fff}
.lockicon{display:block;width:calc(var(--pt)*15);height:auto;margin:calc(var(--pt)*4) auto 0}
.clock{text-align:center;margin-top:calc(var(--pt)*6);text-shadow:0 1px 12px rgba(6,13,51,.25)}
.clock .d{font-size:calc(var(--pt)*21);font-weight:600;letter-spacing:0;opacity:.88}
.clock .h{font-size:calc(var(--pt)*104);font-weight:600;letter-spacing:-.025em;line-height:1.02}
.notifs{margin-top:auto;padding:0 calc(var(--pt)*10);display:flex;flex-direction:column;gap:calc(var(--pt)*8)}
.notif{display:grid;grid-template-columns:calc(var(--pt)*38) minmax(0,1fr);gap:calc(var(--pt)*11);align-items:center;padding:calc(var(--pt)*13) calc(var(--pt)*15) calc(var(--pt)*13) calc(var(--pt)*13);border-radius:calc(var(--pt)*23);background:rgba(36,36,44,.46);-webkit-backdrop-filter:blur(24px) saturate(1.7);backdrop-filter:blur(24px) saturate(1.7);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.07)}
.notif .app{width:calc(var(--pt)*38);height:calc(var(--pt)*38);border-radius:22.4%;display:grid;place-items:center;color:#fff}
.notif .app svg{width:62%;height:62%;fill:currentColor}
.notif .app.sms{background:linear-gradient(180deg,#6bf387,#0fbb30)}
.notif .app.wa{background:linear-gradient(180deg,#5fe886,#1ab34f)}
.notif .app.pf{background:linear-gradient(180deg,#ffab70,#f0702b)}
.notif .hd{display:flex;justify-content:space-between;align-items:baseline;gap:calc(var(--pt)*8)}
.notif b{font-size:calc(var(--pt)*15);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif .ago{font-size:calc(var(--pt)*13);color:rgba(235,235,245,.62);flex:none;letter-spacing:0}
.notif p{font-size:calc(var(--pt)*15);line-height:1.3;margin-top:calc(var(--pt)*1)}
.stackhint{height:calc(var(--pt)*9);margin:0 calc(var(--pt)*24);border-radius:0 0 calc(var(--pt)*16) calc(var(--pt)*16);background:rgba(36,36,44,.3);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.lockbar{display:flex;justify-content:space-between;padding:0 calc(var(--pt)*46);margin-top:calc(var(--pt)*30)}
.lockbar span{width:calc(var(--pt)*50);height:calc(var(--pt)*50);border-radius:50%;background:rgba(20,20,28,.4);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);display:grid;place-items:center;color:#fff}
.lockbar svg{width:calc(var(--pt)*22);height:calc(var(--pt)*22);fill:currentColor}
.grab{width:calc(var(--pt)*134);height:calc(var(--pt)*5);border-radius:99px;background:#fff;margin:calc(var(--pt)*24) auto calc(var(--pt)*8);flex:none}

/* Messages */
.chat{background:#fff;color:#000}
.chat .status{background:#f6f6f6}
.chat .top{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;padding:calc(var(--pt)*2) calc(var(--pt)*16) calc(var(--pt)*9);background:#f6f6f6;border-bottom:.5px solid rgba(60,60,67,.29)}
.chat .back,.chat .vid{color:#007aff;margin-top:calc(var(--pt)*16)}
.chat .back svg{display:block;width:calc(var(--pt)*11);height:calc(var(--pt)*19);fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.chat .vid{justify-self:end}
.chat .vid svg{display:block;width:calc(var(--pt)*26);height:calc(var(--pt)*18);fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}
.chat .idn{display:flex;flex-direction:column;align-items:center;gap:calc(var(--pt)*5)}
.chat .av{width:calc(var(--pt)*50);height:calc(var(--pt)*50);border-radius:50%;background:linear-gradient(180deg,#a5abb8,#858994);display:grid;place-items:center;color:#fff;font-size:calc(var(--pt)*21);font-weight:500;letter-spacing:.01em}
.chat .nm{display:flex;align-items:center;gap:calc(var(--pt)*3);font-size:calc(var(--pt)*11);color:#000}
.chat .nm svg{width:calc(var(--pt)*5);height:calc(var(--pt)*9);fill:none;stroke:#8e8e93;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bubbles{flex:1;min-height:0;padding:calc(var(--pt)*8) calc(var(--pt)*16) 0;display:flex;flex-direction:column;justify-content:flex-end;gap:calc(var(--pt)*2);overflow:hidden}
.day{align-self:center;text-align:center;font-size:calc(var(--pt)*11);line-height:1.35;color:#8e8e93;margin:calc(var(--pt)*14) 0 calc(var(--pt)*8);letter-spacing:0}
.day b{font-weight:600}
.b{position:relative;z-index:0;max-width:76%;padding:calc(var(--pt)*7) calc(var(--pt)*12);font-size:calc(var(--pt)*17);line-height:1.3;border-radius:calc(var(--pt)*18)}
.b.recv{background:#e9e9eb;color:#000;align-self:flex-start}
.b.sent{background:#007aff;color:#fff;align-self:flex-end}
.b.recv+.b.sent,.b.sent+.b.recv{margin-top:calc(var(--pt)*8)}
/* queues des bulles, comme dans Messages */
.b.tail::before,.b.tail::after{content:"";position:absolute;z-index:-1;bottom:0;height:calc(var(--pt)*20)}
.b.recv.tail::before{left:calc(var(--pt)*-7);width:calc(var(--pt)*20);background:#e9e9eb;border-bottom-right-radius:calc(var(--pt)*16)}
.b.recv.tail::after{left:calc(var(--pt)*-26);width:calc(var(--pt)*26);background:#fff;border-bottom-right-radius:calc(var(--pt)*10)}
.b.sent.tail::before{right:calc(var(--pt)*-7);width:calc(var(--pt)*20);background:#007aff;border-bottom-left-radius:calc(var(--pt)*16)}
.b.sent.tail::after{right:calc(var(--pt)*-26);width:calc(var(--pt)*26);background:#fff;border-bottom-left-radius:calc(var(--pt)*10)}
.read{align-self:flex-end;font-size:calc(var(--pt)*11);color:#8e8e93;margin-top:calc(var(--pt)*3);letter-spacing:0}
.read b{font-weight:600}
.inputbar{display:flex;align-items:center;gap:calc(var(--pt)*8);padding:calc(var(--pt)*8) calc(var(--pt)*12) 0}
.inputbar .plus{width:calc(var(--pt)*34);height:calc(var(--pt)*34);border-radius:50%;background:#e9e9eb;color:#7c7c80;display:grid;place-items:center;flex:none}
.inputbar .plus svg{width:calc(var(--pt)*20);height:calc(var(--pt)*20);fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.inputbar .fld{flex:1;display:flex;align-items:center;justify-content:space-between;height:calc(var(--pt)*36);border:1px solid #c6c6c8;border-radius:99px;padding:0 calc(var(--pt)*10) 0 calc(var(--pt)*14);font-size:calc(var(--pt)*17);color:#c4c4c6}
.inputbar .fld svg{width:calc(var(--pt)*20);height:calc(var(--pt)*20);fill:none;stroke:#8e8e93;stroke-width:1.8;stroke-linecap:round}
.chat .grab{background:#000;margin-top:calc(var(--pt)*28)}

/* panneaux coupés en deux */
.duo-panel{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.half{padding:clamp(60px,8vw,120px) max(clamp(28px,5vw,76px),env(safe-area-inset-right,0px)) clamp(60px,8vw,120px) max(clamp(28px,5vw,76px),env(safe-area-inset-left,0px));display:flex;flex-direction:column;justify-content:center}
.half-navy{background:var(--navy);color:var(--cream)}
.half-sky{background:var(--sky);color:var(--navy)}
.half-cream{background:var(--cream);color:var(--navy)}
.half-orange{background:var(--orange);color:var(--navy)}
.half.center{text-align:center;align-items:center}
.half h2{max-width:15ch}
.half .phone{--w:min(268px,66vw);margin-inline:auto}

/* services en liste */
.list{margin-top:clamp(50px,7vw,80px);border-top:1px solid var(--rule-navy)}
.list .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(20px,4vw,60px);align-items:baseline;padding-block:clamp(22px,2.6vw,34px);border-bottom:1px solid var(--rule-navy)}
.list .name{font-weight:800;font-variation-settings:"wdth" 114;letter-spacing:-.035em;font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1;transition:translate .45s var(--ease),color .25s}
.list .row{position:relative}
.list .row::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.list .row:hover::after{transform:scaleX(1)}
.list .row:hover .name{translate:12px 0;color:var(--orange)}
.list p{color:var(--on-navy);font-size:1.02rem}

/* étapes */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(26px,4vw,56px);margin-top:clamp(52px,7vw,86px)}
.step .n{font-weight:800;font-variation-settings:"wdth" 122;font-size:clamp(3rem,5vw,4.4rem);line-height:.8;color:var(--orange);letter-spacing:-.06em}
.step h3{margin-top:22px}
.step p{margin-top:12px;font-size:1rem;color:var(--on-cream)}

/* promesses inverses */
.vows{margin-top:clamp(50px,6vw,76px)}
.vow{padding-block:clamp(26px,3.4vw,42px);border-top:1px solid rgba(10,20,64,.3);max-width:28ch;margin-inline:auto}
.vow h3{font-size:clamp(1.4rem,3vw,2.1rem);font-variation-settings:"wdth" 112;letter-spacing:-.03em}
.vow p{margin-top:12px;color:rgba(10,20,64,.78);font-size:1.02rem}

/* binôme */
.who{display:grid;grid-template-columns:62px 1fr;gap:20px;align-items:start;padding-block:26px}
.who+.who{border-top:1px solid var(--rule-cream)}
.pill{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:1.6rem;font-variation-settings:"wdth" 110;color:var(--navy)}
.pill.a{background:var(--sky)}
.pill.y{background:var(--orange)}
.who p{margin-top:7px;color:var(--on-cream);font-size:1rem}

/* zone */
.zone{margin-top:clamp(40px,5vw,60px);display:flex;flex-wrap:wrap;justify-content:center;gap:0 clamp(28px,5vw,64px);border-top:1px solid rgba(10,20,64,.3);border-bottom:1px solid rgba(10,20,64,.3)}
.zone div{padding:20px 0;text-align:center}
.zone b{display:block;font-weight:800;font-variation-settings:"wdth" 114;letter-spacing:-.03em;font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1}
.zone span{font-size:.95rem;color:rgba(10,20,64,.65)}

/* questions */
.faq{margin-top:clamp(46px,6vw,72px);border-top:1px solid var(--rule-cream);max-width:980px}
details{border-bottom:1px solid var(--rule-cream)}
summary{transition:color .2s;list-style:none;cursor:pointer;padding:clamp(24px,3vw,34px) 54px clamp(24px,3vw,34px) 0;font-weight:800;font-variation-settings:"wdth" 108;letter-spacing:-.025em;font-size:clamp(1.1rem,2.3vw,1.6rem);position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:10px;top:50%;width:18px;height:2px;background:var(--postmark);margin-top:-1px}
summary::before{content:"";position:absolute;right:18px;top:50%;width:2px;height:18px;background:var(--postmark);margin-top:-9px;transition:transform .35s var(--ease)}
summary:hover{color:var(--postmark)}
details[open] summary::before{transform:rotate(90deg)}
details[open]>p{animation:unfold .45s var(--ease)}
@keyframes unfold{from{opacity:0;translate:0 -6px}}
details p{padding-bottom:30px;max-width:68ch;color:var(--on-cream)}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(44px,6vw,90px);align-items:start}
form{display:grid;gap:18px;margin-top:6px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{display:block;font-size:.95rem;font-weight:600;margin-bottom:9px;color:var(--on-navy);transition:color .25s}
form div:focus-within>label{color:var(--cream)}
input,select,textarea{width:100%;min-width:0;font-family:var(--font);font-size:1rem;color:var(--cream);background:transparent;border:0;border-bottom:1.5px solid var(--rule-navy);border-radius:0;padding:11px 2px;transition:border-color .25s}
input:focus,select:focus,textarea:focus{border-color:var(--orange);outline:none}
textarea{resize:vertical;min-height:88px}
input::placeholder,textarea::placeholder{color:rgba(255,244,234,.36)}
select{appearance:none;cursor:pointer;padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23FFF4EA' stroke-opacity='.75' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center;background-size:12px 8px}
select option{color:#0A1440;background:#FFF4EA}
form .btn{justify-self:start;margin-top:12px}
.opt{font-weight:400;font-size:.85rem;color:rgba(255,244,234,.5);margin-left:4px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
form .btn[disabled]{opacity:.65;cursor:progress}
.send-status{color:var(--orange);font-size:.97rem}
form .note,.out .note{font-size:.9rem;color:var(--on-navy)}
form .note a{color:var(--sky);text-decoration:none}
form .note a:hover{text-decoration:underline}
.out{border:1px solid var(--rule-navy);padding:28px;animation:rise .5s var(--ease)}
.out:focus{outline:none}
.out .ok{font-weight:800;font-variation-settings:"wdth" 110;letter-spacing:-.03em;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1;color:var(--cream);margin-bottom:12px}
.direct{margin-top:clamp(36px,4vw,52px);border-top:1px solid var(--rule-navy)}
.chan{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:20px 0;border-bottom:1px solid var(--rule-navy)}
.chan .k{font-size:.95rem;color:var(--on-navy);width:98px;flex:none}
.chan .v{font-weight:800;font-variation-settings:"wdth" 108;letter-spacing:-.025em;font-size:clamp(1.15rem,2.4vw,1.6rem);color:var(--cream);text-decoration:none;word-break:break-word}
a.v:hover{color:var(--sky)}
.copy{background:none;border:1px solid rgba(255,244,234,.4);color:var(--cream);padding:7px 15px;font-family:var(--font);font-size:.85rem;cursor:pointer;margin-left:auto;flex:none;border-radius:999px}
.copy:hover{background:var(--cream);color:var(--navy)}

/* signature finale */
.sign{text-align:center;padding-block:clamp(90px,12vw,170px)}
.sign img{width:min(420px,72vw);height:auto;margin-inline:auto}
.sign .line{margin-top:clamp(30px,4vw,48px);font-weight:700;font-variation-settings:"wdth" 108;letter-spacing:-.02em;font-size:clamp(1.1rem,2.4vw,1.6rem)}
.sign .coord{margin-top:18px;color:var(--on-navy)}
.legal{margin-top:clamp(46px,5vw,70px);padding-top:26px;border-top:1px solid var(--rule-navy);font-size:.86rem;color:rgba(255,244,234,.5);max-width:70ch;margin-inline:auto}

/* révélations au défilement */
.rv{opacity:0;translate:0 26px;transition:opacity .8s var(--ease),translate .9s var(--ease),scale .6s var(--ease);transition-delay:var(--d,0ms)}
.rv.rv-drop{translate:0 -12px}
.rv.rv-pop{translate:0 10px;scale:.96}
.rv.in{opacity:1;translate:none;scale:none}

@media (max-width:940px){
  .duo-panel{grid-template-columns:1fr}
  .contact,.list .row{grid-template-columns:1fr}
  .list .row{gap:10px}
  .steps{grid-template-columns:1fr 1fr}
  nav{display:none}
}
@media (max-width:620px){
  .steps,.row2{grid-template-columns:1fr}
  .bar{height:64px}
  .logo{height:24px}
  .hdr-cta{display:none}
  .stage{margin-top:46px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}