/* GoSafeMorse /rejoindre/ — feuille unique. Base = maquette validée (proto/proto.css, Phase 6) reprise À L'IDENTIQUE,
   puis ajouts techniques (CSP, états, pages secondaires) en fin de fichier. Aucune modification esthétique non prévue. */
@font-face{font-family:"Montserrat";src:url("../assets/fonts/Montserrat-latin-VF.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{
  --encre:#2D2D2D;--noir:#020202;--vert-tendre:#99CC66;--vert-vif:#09AD32;--vert-profond:#0A7A26;
  --lavande:#9999CC;--violet:#7445CC;--creme:#FAF7EF;--blanc:#fff;
  --fs-display:clamp(2.1rem,5vw,3.9rem);--fs-h2:clamp(1.5rem,3vw,2.2rem);--fs-body:clamp(1rem,1.15vw,1.1rem);
  --ease:cubic-bezier(.2,.7,.2,1)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Montserrat",system-ui,sans-serif;color:var(--encre);background:var(--creme);font-size:var(--fs-body);line-height:1.55;font-feature-settings:"tnum" 0}
img{max-width:100%;display:block}
a{color:var(--vert-profond)}
:focus-visible{outline:3px solid var(--encre);outline-offset:3px;box-shadow:0 0 0 6px #fff}
.wrap{width:min(1200px,100% - 2.5rem);margin-inline:auto}
h1,h2,h3{margin:0;line-height:1.05;letter-spacing:-.015em;font-weight:800}
h1{font-size:var(--fs-display)}h2{font-size:var(--fs-h2);line-height:1.1}
p{margin:0 0 1em;max-width:62ch}
.eyebrow{font-size:.85rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--vert-profond);margin-bottom:1.25rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:.85rem 1.75rem;border-radius:999px;font:700 1rem/1 "Montserrat",sans-serif;text-decoration:none;border:0;cursor:pointer;transition:transform .24s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--vert-tendre);color:var(--noir)}
.btn-secondary{background:transparent;border:1.5px solid var(--encre);color:var(--encre)}
.on-night .btn-secondary{border-color:#fff;color:#fff}
/* header */
.site-header{padding:1.25rem 0}.site-header .wrap{display:flex;align-items:center;justify-content:space-between}
.site-header img{height:84px;width:auto;margin:-14px 0}
.site-header a.link{font-weight:600;font-size:1.1rem}
/* hero */
.hero{padding:clamp(2rem,6vw,5rem) 0 clamp(3rem,8vw,7rem);position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center}
.hero h1 .accent{color:var(--vert-profond)}
.hero .lead{margin:1.5rem 0 2rem;font-size:clamp(1.15rem,1.7vw,1.4rem);color:var(--encre)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.counter{display:flex;align-items:center;gap:.75rem;font-weight:600;font-size:.95rem}
.dots{display:inline-flex;gap:5px}.dots i{width:9px;height:9px;border-radius:50%;background:var(--vert-vif);animation:pulse 1.8s var(--ease) infinite}
.dots i:nth-child(2){animation-delay:.25s}.dots i:nth-child(3){animation-delay:.5s}
@keyframes pulse{0%,60%,100%{transform:scale(1);opacity:.55}20%{transform:scale(1.5);opacity:1}}
.horizon{max-width:400px;margin-inline:auto;width:100%}

.horizon img{width:100%;height:auto}

/* day list */
.day{padding:clamp(4rem,9vw,8rem) 0;background:var(--blanc)}
.day h2{margin-bottom:2rem;max-width:22ch}
.day ul{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--encre)}
.day li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.4rem 0;border-bottom:1.5px solid rgba(45,45,45,.25);font-size:clamp(1rem,1.8vw,1.3rem)}
.day li b{font-weight:800;font-size:clamp(1.25rem,2.8vw,2rem);letter-spacing:-.01em}
.day .q{margin-top:2.5rem;font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:700;line-height:1.2;max-width:none}.hl{color:var(--vert-profond)}
/* night */
.night{background:var(--encre);color:#fff;padding:clamp(5rem,11vw,10rem) 0 clamp(4rem,8vw,7rem);position:relative}
.night::before{content:"";position:absolute;left:0;right:0;top:-1px;height:60px;background:var(--blanc);border-radius:0 0 50% 50%/0 0 100% 100%}
.night h2{font-size:var(--fs-display);margin-bottom:3rem}
.night h2 .dim{color:var(--vert-tendre)}
.night ul{list-style:none;margin:0 0 3rem;padding:0;display:grid;gap:.5rem}
.night li{font-size:clamp(1.05rem,1.9vw,1.4rem);font-weight:500;opacity:.92}
.night .ask{font-size:var(--fs-h2);font-weight:800;line-height:1.15;max-width:none;margin-bottom:.4em}.night .ask2{font-size:clamp(1.25rem,2.4vw,1.75rem);color:var(--vert-tendre);font-weight:700;max-width:30ch}
/* signal */
.signal{background:var(--noir);color:#fff;padding:clamp(4rem,9vw,8rem) 0;text-align:center}
.signal h2{margin-bottom:1.5rem}
.signal p{margin-inline:auto;color:#dcdcdc}
.morse{display:flex;justify-content:center;align-items:center;gap:clamp(.8rem,3vw,1.8rem);margin:3rem 0 1rem}
.morse i{width:clamp(28px,6vw,56px);height:clamp(28px,6vw,56px);border-radius:50%;background:var(--vert-tendre);animation:tap 2.4s var(--ease) infinite}
.morse i:nth-child(2){animation-delay:.3s}.morse i:nth-child(3){animation-delay:.6s}
@keyframes tap{0%,55%,100%{transform:scale(1)}15%{transform:scale(1.35);box-shadow:0 0 0 14px rgba(153,204,102,.18)}}
.tap-label{font-weight:800;letter-spacing:.2em;font-size:.9rem;color:var(--vert-tendre)}
.note-demo{font-size:.9rem;color:#bdbdbd;margin-top:1.25rem}
/* promise */
.promise{padding:clamp(4rem,9vw,8rem) 0}
.promise h2{font-size:var(--fs-display);max-width:18ch}
.promise h2 em{font-style:normal;color:var(--vert-profond)}
.promise .box{margin-top:2.5rem;border-left:5px solid var(--vert-tendre);padding:.25rem 0 .25rem 1.5rem;max-width:62ch}
.stat{margin-top:4rem;display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:center;padding-top:3rem;border-top:1.5px solid rgba(45,45,45,.25)}
.stat .n{font-size:clamp(4rem,12vw,9rem);font-weight:800;line-height:.9;color:var(--vert-profond);letter-spacing:-.04em}
.stat small{display:block;font-size:.8rem;margin-top:.5rem;opacity:.75}
/* tiers */
.tiers{padding:clamp(4rem,9vw,8rem) 0;background:var(--blanc)}
.tiers-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);margin-top:3rem;align-items:start}
.tier-note{font-size:.95rem;border-left:5px solid var(--lavande);padding-left:1rem;margin:1.5rem 0 2rem}
fieldset{border:0;margin:0;padding:0}legend{font-weight:800;font-size:1.05rem;margin-bottom:1rem}
.tier{display:block;position:relative;padding:1.25rem 1rem 1.25rem 4rem;border-top:1.5px solid rgba(45,45,45,.25);cursor:pointer;transition:background .24s var(--ease)}
.tier:last-of-type{border-bottom:1.5px solid rgba(45,45,45,.25)}
.tier input{position:absolute;opacity:0}
.tier .mark{position:absolute;left:1rem;top:1.45rem;width:28px;height:28px;border-radius:50%;border:2px solid var(--encre);background:#fff;transition:all .24s var(--ease)}
.tier .mark::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--vert-tendre);transform:scale(0);transition:transform .24s var(--ease)}
.tier input:checked + .mark{border-color:var(--vert-profond)}
.tier input:checked + .mark::after{transform:scale(1)}
.tier:has(input:checked){background:var(--creme)}
.tier input:focus-visible + .mark{outline:3px solid var(--encre);outline-offset:3px}
.tier .name{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem 1rem;font-weight:800;font-size:1.15rem}
.tier .price{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:800}
.tier .price small{font-weight:500;font-size:.8rem}
.tier .tag{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--vert-tendre);color:var(--noir);padding:.25rem .6rem;border-radius:999px}
.tier .tl{font-size:.95rem;margin:.35rem 0 0;max-width:none;opacity:.85}
.tier .inc{font-size:.85rem;font-weight:600;color:var(--vert-profond);margin:.35rem 0 0}
.tier ul{margin:.6rem 0 0;padding-left:1.1rem;font-size:.92rem}
.tier ul li{margin-bottom:.2rem}
.form{position:sticky;top:1.5rem;background:var(--creme);padding:clamp(1.5rem,3vw,2.25rem);border-radius:24px}
.form h3{font-size:1.6rem;margin-bottom:.4rem}
.form .picked{font-size:.95rem;margin-bottom:1.25rem}
label.f{display:block;font-weight:700;font-size:.95rem;margin:1rem 0 .4rem}
input.txt{width:100%;min-height:52px;border:1.5px solid var(--encre);border-radius:14px;padding:.75rem 1rem;font:500 1rem "Montserrat",sans-serif;background:#fff}
.form .btn{width:100%;margin-top:1.5rem}
.note-paid{font-size:.9rem;margin:.9rem 0 0;font-weight:600}
.form:has(#t-gratuit:checked) .note-paid{display:none}
.form:has(#t-gratuit:checked) .only-free{display:block}
.only-free{display:none;font-size:.9rem;margin:.9rem 0 0}
.legal-mini{font-size:.78rem;opacity:.8;margin-top:1rem}
/* free actions */
.free{padding:clamp(4rem,9vw,7rem) 0;background:var(--creme)}
.free .row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);margin-top:2.5rem}
.pills{display:flex;flex-wrap:wrap;gap:.6rem}
.pill{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1.1rem;border-radius:999px;border:1.5px solid var(--encre);text-decoration:none;color:var(--encre);font-weight:600;font-size:.95rem}
.begin{height:clamp(70px,12vw,120px);width:auto;margin-top:2rem}
/* footer */
.site-footer{background:var(--noir);color:#fff;padding:3rem 0 2.5rem}
.site-footer .wrap{display:grid;gap:1.5rem}
.site-footer img{height:120px;width:auto;margin:-20px 0}
.site-footer .rescue{font-size:.92rem;color:#d6d6d6;max-width:70ch}
.site-footer a{color:#fff}
.baseline{font-weight:800;font-size:1.25rem}.baseline b{color:var(--vert-tendre)}
@media (max-width:860px){
  .hero .wrap,.tiers-grid,.free .row{grid-template-columns:1fr}
  .horizon{max-width:230px;margin-top:1rem}
  .form{position:static}
  .stat{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* v2 */
.mini{font-size:.85rem;margin:1rem 0 0;opacity:.85}
.eyebrow.dark{color:var(--vert-tendre)}
.signal .big{font-size:clamp(1.15rem,2.2vw,1.6rem);font-weight:600;color:#fff;max-width:34ch}
.big.small{font-size:clamp(1.05rem,1.6vw,1.3rem);font-weight:500}
.demo{margin:2.5rem auto 2.5rem;max-width:560px}
.morse{gap:clamp(.6rem,2.5vw,1.4rem)}
.morse i{width:clamp(22px,5vw,40px);height:clamp(22px,5vw,40px);animation:none;opacity:.35;transition:all .24s var(--ease)}
.morse i.on{opacity:1;transform:scale(1.25);box-shadow:0 0 0 10px rgba(153,204,102,.18)}
.morse .link-line{flex:1;height:3px;background:repeating-linear-gradient(90deg,var(--vert-tendre) 0 8px,transparent 8px 16px);opacity:.4;min-width:40px}
.morse i.friend{background:#fff}
.demo.done .link-line{opacity:1}
.tap-label{display:flex;justify-content:center;gap:clamp(.6rem,2.5vw,1.4rem);margin-bottom:1.5rem}
.tap-label span{font-size:.75rem;width:clamp(22px,5vw,40px);text-align:center;white-space:nowrap}
.tap-label .fr{width:auto;color:#fff;margin-left:clamp(40px,8vw,90px)}
.signal .cols{display:grid;grid-template-columns:1fr 1fr;gap:2rem;text-align:left;max-width:860px;margin:3rem auto 2rem}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}.checks li{padding-left:1.6rem;position:relative;color:#fff;font-weight:600}
.checks li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--vert-tendre)}
.signal p.big.small{color:#dcdcdc}
.conv{padding:clamp(3rem,7vw,6rem) 0}
.conv h2{max-width:20ch}.verbs{font-weight:800;font-size:clamp(1.15rem,2.4vw,1.75rem);margin:1.25rem 0 .5rem;max-width:none}
.lead2{font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:none}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);margin:2.5rem 0 1rem;padding-top:2rem;border-top:1.5px solid rgba(45,45,45,.25)}
.stat{display:block;border:0;padding:0;margin:0}
.stat .n{font-size:clamp(2.4rem,5.5vw,4rem);font-weight:800;line-height:1;color:var(--vert-profond);letter-spacing:-.03em;margin-bottom:.6rem}
.stat .n span{font-size:.3em;font-weight:700;letter-spacing:0;color:var(--encre)}
.foot{font-size:.8rem;opacity:.85;max-width:80ch}
.conv .big{margin-top:2rem}
.hint{font-size:.82rem;margin:.4rem 0 0;opacity:.85}.hint.shield{margin-top:1rem}
.chk{display:flex;gap:.7rem;align-items:flex-start;font-size:.85rem;margin-top:.9rem;line-height:1.45}
.chk input{width:22px;height:22px;flex:none;accent-color:var(--vert-profond);margin-top:1px}
.wall{padding:clamp(3rem,7vw,5rem) 0;background:var(--creme)}
.names{list-style:none;margin:1.5rem 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.names li{padding:.5rem 1.1rem;border-radius:999px;background:#fff;border:1.5px solid var(--vert-tendre);font-weight:700}
.next{padding:clamp(3rem,7vw,6rem) 0;background:var(--blanc)}
.steps{list-style:none;margin:2rem 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;counter-reset:s}
.steps li{counter-increment:s;border-top:4px solid var(--vert-tendre);padding-top:1rem}
.steps b{display:block;margin-bottom:.4rem}.steps span{font-size:.95rem}
.slogan{font-weight:800;font-size:clamp(1.15rem,2.2vw,1.6rem);line-height:1.3;margin-top:2rem}
.begin{height:auto;width:clamp(150px,22vw,230px);margin-top:1rem}
.pill svg{fill:currentColor;flex:none;margin-right:.55rem}
.pill{gap:0}
.pills.dark .pill{border-color:#fff;color:#fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.todo{font-size:.75em;color:var(--violet);font-style:normal}
.faq{padding:clamp(3rem,7vw,5rem) 0;background:var(--creme)}
.faq details{border-top:1.5px solid rgba(45,45,45,.25);padding:1rem 0}.faq details:last-of-type{border-bottom:1.5px solid rgba(45,45,45,.25)}
.faq summary{font-weight:700;cursor:pointer;min-height:44px;display:flex;align-items:center}
.faq details p{margin:.5rem 0 0}
.free h2{margin-bottom:.5rem}
.tier-note{max-width:70ch}
@media (max-width:860px){.signal .cols,.stats,.steps{grid-template-columns:1fr}.tap-label .fr{margin-left:auto}}

/* v3 */
.site-header{position:sticky;top:0;z-index:20;background:var(--creme);border-bottom:1px solid rgba(45,45,45,.12);padding:.4rem 0}
.site-header .link{display:inline-flex;align-items:center;min-height:44px;padding:0 1.2rem;border-radius:999px;background:var(--vert-tendre);color:var(--noir);text-decoration:none;font-weight:700}
.how{padding:clamp(3.5rem,8vw,6.5rem) 0;background:var(--blanc)}
.how h2{max-width:20ch;margin-bottom:2.5rem}
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
.flow li{border-top:1.5px solid var(--encre);padding-top:1.25rem}
.flow .num{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--vert-tendre);color:var(--noir);font-weight:800;margin-bottom:1rem}
.flow h3{font-size:1.2rem;margin-bottom:.6rem;line-height:1.2}.flow p{font-size:.98rem;margin:0}
.sit-title{margin:3rem 0 1rem;font-weight:800}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.chips li{padding:.65rem 1.2rem;border-radius:999px;background:var(--creme);border:1.5px solid rgba(45,45,45,.2);font-weight:600;font-size:.95rem}
.free-app{padding:clamp(3.5rem,8vw,6rem) 0;background:var(--vert-tendre);color:var(--noir)}
.free-app .eyebrow{color:var(--noir)}
.free-app h2{max-width:20ch;margin-bottom:2rem}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,3vw,3rem);margin-bottom:1.5rem}
.trio .n{font-size:clamp(2.4rem,6vw,4.2rem);font-weight:800;line-height:1;letter-spacing:-.03em}
.trio p{margin:.4rem 0 0;font-weight:600;font-size:.98rem}
.sm{font-size:.95rem;max-width:62ch}
.ambition{background:var(--noir);color:#fff;padding:clamp(4rem,9vw,7.5rem) 0}
.ambition .not{font-size:clamp(1.15rem,2.4vw,1.7rem);font-weight:600;color:#bdbdbd;text-decoration:line-through;text-decoration-color:rgba(255,255,255,.4);margin:0 0 .4rem}
.ambition .yes{font-size:var(--fs-display);font-weight:800;line-height:1.05;letter-spacing:-.02em;max-width:16ch;margin:0 0 3rem}
.ambition .yes span{color:var(--vert-tendre)}
.ambition blockquote{margin:0;border-left:5px solid var(--vert-tendre);padding-left:1.5rem;max-width:62ch}
.ambition blockquote p{font-size:clamp(1.05rem,1.6vw,1.25rem);color:#ececec}
.ambition footer{font-weight:700;color:var(--vert-tendre);font-size:.95rem}
.facts{max-width:62ch}
.rescue.about{max-width:70ch}
.pill.n-instagram svg{color:#E4405F}.pill.n-tiktok svg{color:#FE2C55}.pill.n-youtube svg{color:#FF0000}.pill.n-linkedin svg{color:#0A66C2}.pill.n-facebook svg{color:#1877F2}.pill.n-x svg,.pill.n-threads svg{color:#111}
.pills.dark .pill{background:#fff;border-color:#fff;color:var(--noir)}
@media (max-width:860px){.flow,.trio{grid-template-columns:1fr}}

/* v4 */
.free-app{text-align:center}.free-app h2,.free-app .sm{margin-inline:auto}.free-app .eyebrow{text-align:center}
.free-app .trio{max-width:900px;margin:0 auto 1.75rem}
.free-app .trio p{margin-inline:auto;max-width:22ch}
.stat .duo{display:flex;gap:clamp(2.5rem,7vw,5rem);margin-bottom:.9rem}
.stat .duo .n{margin-bottom:.35rem}
.stat .duo span{display:block;font-weight:700;font-size:.95rem;color:var(--encre)}
.stats{gap:clamp(2.5rem,6vw,5rem)}
.btn-xl{min-height:60px;padding:1rem 2.2rem;font-size:1.1rem;box-shadow:0 10px 24px -10px rgba(10,122,38,.55)}
.btn-xl span{margin-left:.6rem;transition:transform .24s var(--ease)}.btn-xl:hover span{transform:translateX(4px)}
.hero .lead b{display:block;margin-top:.4rem}
.cta-band{background:var(--vert-tendre);color:var(--noir);padding:clamp(2rem,5vw,3.5rem) 0}
.cta-band .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem}
.cb-t{font-size:clamp(1.3rem,2.8vw,2rem);font-weight:800;line-height:1.15;margin:0 0 .3rem}.cb-s{margin:0;font-weight:600}
.cta-band .btn-primary{background:var(--noir);color:#fff;box-shadow:none}
/* v5 : relief, verre liquide discret, animations, easter eggs */
.pill{border:0!important;background:transparent!important;min-height:48px;padding:.5rem 1rem;position:relative;isolation:isolate;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}
.pill svg{width:24px;height:24px;margin-right:.6rem;filter:drop-shadow(0 2px 2px rgba(0,0,0,.18))}
.pill:hover,.pill:focus-visible{transform:translateY(-3px) scale(1.04);background:linear-gradient(145deg,rgba(255,255,255,.65),rgba(255,255,255,.18))!important;backdrop-filter:blur(10px) saturate(1.4);-webkit-backdrop-filter:blur(10px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(0,0,0,.06),0 12px 24px -12px rgba(0,0,0,.35)}
.pills.dark .pill{background:transparent!important;color:#fff}
.pills.dark .pill:hover,.pills.dark .pill:focus-visible{background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.06))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 12px 24px -12px rgba(0,0,0,.6)}
.pills.dark .pill.n-x svg,.pills.dark .pill.n-threads svg{color:#fff}
.btn-primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(0,0,0,.14),0 10px 20px -10px rgba(10,122,38,.6)}
.btn-primary:active{transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(0,0,0,.18)}
.cta-band .btn-primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 20px -10px rgba(0,0,0,.7)}
.horizon{perspective:900px}
.horizon img{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s var(--ease);filter:drop-shadow(0 34px 26px rgba(10,122,38,.28)) drop-shadow(0 6px 4px rgba(10,122,38,.25));animation:float 6s ease-in-out infinite;cursor:pointer}
.horizon img.spin{animation:spin 1s var(--ease)}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes spin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
.morse i{background:radial-gradient(circle at 35% 30%,#e3f5c8,#99CC66 55%,#6d9c3c);box-shadow:inset 0 -4px 6px rgba(0,0,0,.25),0 8px 14px -6px rgba(0,0,0,.6)}
.morse i.friend{background:radial-gradient(circle at 35% 30%,#fff,#e9e9e9 60%,#b9b9b9)}
.tier{transition:background .24s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.tier:hover{transform:translateY(-2px);box-shadow:0 14px 28px -18px rgba(0,0,0,.35)}
.form{box-shadow:0 30px 50px -30px rgba(0,0,0,.35),inset 0 1px 0 #fff}
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.toast{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,140%);background:var(--noir);color:#fff;padding:.9rem 1.4rem;border-radius:999px;font-weight:600;font-size:.95rem;z-index:50;transition:transform .5s var(--ease);max-width:calc(100% - 2rem);text-align:center;box-shadow:0 14px 30px -10px rgba(0,0,0,.6)}
.toast.show{transform:translate(-50%,0)}
.confetti{position:fixed;top:-20px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e3f5c8,#99CC66 55%,#6d9c3c);z-index:60;pointer-events:none;animation:fall 2.4s cubic-bezier(.3,.6,.4,1) forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg);opacity:.85}}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}.horizon img{animation:none;transform:none}.confetti{display:none}}

/* v6 : design plus éditorial (Airbnb / Apple) */
.hero{padding:clamp(2rem,5vw,4rem) 0 clamp(3rem,6vw,5rem)}
.hero h1{font-size:clamp(2.4rem,6.4vw,5.4rem);letter-spacing:-.035em}
.hero .horizon{max-width:520px;margin-right:-8%}
.bar{display:flex;align-items:stretch;background:#fff;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.08),0 18px 40px -16px rgba(0,0,0,.28);max-width:720px;margin:1.75rem 0 1rem;padding:.4rem .4rem .4rem .5rem;border:1px solid rgba(0,0,0,.06)}
.seg{display:flex;flex-direction:column;justify-content:center;padding:.5rem 1.2rem;border-radius:999px;flex:1;min-width:0;transition:background .2s}
.seg:hover,.seg:focus-within{background:var(--creme)}
.seg + .seg{border-left:1px solid rgba(0,0,0,.1)}
.seg span{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.seg input,.seg select{border:0;background:transparent;font:500 .95rem "Montserrat",sans-serif;color:var(--encre);padding:.15rem 0;width:100%;outline:none;text-overflow:ellipsis}
.go{border:0;border-radius:999px;background:var(--vert-tendre);color:var(--noir);font:800 1rem "Montserrat",sans-serif;padding:0 1.6rem;cursor:pointer;min-height:56px;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(0,0,0,.14)}
.go:hover{background:#8fc257}.go span{margin-left:.4rem}
.big-counter{display:flex;align-items:center;gap:.75rem;font-weight:600;margin:.75rem 0 0}
.howgrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,6vw,6rem);align-items:center;margin-top:1rem}
.howgrid .flow{grid-template-columns:1fr;gap:1.5rem}
.device-wrap{display:grid;justify-items:center}
.device{width:min(290px,80%);aspect-ratio:9/18.5;background:#111;border-radius:46px;padding:11px;box-shadow:0 40px 60px -30px rgba(0,0,0,.55),inset 0 0 0 2px #333,inset 0 0 0 4px #000;transform:rotate(-4deg);transition:transform .5s var(--ease)}
.device:hover{transform:rotate(0) translateY(-6px)}
.screen{position:relative;height:100%;border-radius:36px;background:linear-gradient(180deg,#f3efe3,#e6ebd9);overflow:hidden;padding:2.2rem 1rem 1rem}
.island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:34%;height:22px;border-radius:999px;background:#000}
.clock{font-weight:800;font-size:3rem;text-align:center;margin:1.4rem 0 1rem;letter-spacing:-.04em;color:var(--encre)}
.notif{background:rgba(255,255,255,.92);border-radius:18px;padding:.7rem .9rem;margin-bottom:.6rem;box-shadow:0 8px 16px -10px rgba(0,0,0,.4);font-size:.75rem;display:grid;gap:.1rem;opacity:0;animation:notif 6s var(--ease) infinite}
.notif b{font-size:.78rem}.n2{animation-delay:1.4s}
@keyframes notif{0%,8%{opacity:0;transform:translateY(14px)}18%,80%{opacity:1;transform:none}95%,100%{opacity:0}}
.circle{display:flex;justify-content:center;gap:.5rem;margin-top:1rem}.circle i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:.8rem;background:var(--vert-tendre);color:var(--noir);box-shadow:inset 0 -3px 4px rgba(0,0,0,.15)}
.cap{font-size:.75rem;margin-top:1.2rem;opacity:.75}
.tiles{list-style:none;margin:0 -1.25rem;padding:.5rem 1.25rem 1.25rem;display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory}
.tile{flex:0 0 clamp(190px,22vw,250px);aspect-ratio:4/5;border-radius:28px;padding:1.2rem;display:flex;flex-direction:column;justify-content:space-between;scroll-snap-align:start;box-shadow:0 16px 30px -22px rgba(0,0,0,.5);transition:transform .35s var(--ease)}
.tile:hover{transform:translateY(-6px) rotate(-.6deg)}
.tile b{font-size:1.05rem;line-height:1.2;font-weight:800}
.tile:nth-child(1){background:var(--vert-tendre)}.tile:nth-child(2){background:#E9E6F7}.tile:nth-child(3){background:#FBE9C8}.tile:nth-child(4){background:#DDEFC9}.tile:nth-child(5){background:#E3EEF5}.tile:nth-child(6){background:#F3DED6}
.glyph{width:64px;height:64px;border-radius:50%;background:var(--noir);position:relative;display:block}
.glyph::after{content:"";position:absolute;width:22px;height:22px;border-radius:50%;background:var(--vert-tendre);right:-6px;top:-6px}
.g1{border-radius:50% 50% 50% 8px}.g2{border-radius:14px}.g3{border-radius:50% 50% 8px 50%}.g4{border-radius:50% 8px 50% 50%}.g5{clip-path:polygon(50% 0,100% 100%,0 100%)}
@media (max-width:860px){.bar{flex-direction:column;border-radius:28px;padding:.5rem}.seg{padding:.7rem 1.1rem}.seg + .seg{border-left:0;border-top:1px solid rgba(0,0,0,.1)}.go{min-height:56px;margin-top:.4rem}.howgrid{grid-template-columns:1fr}.hero .horizon{margin-right:auto}}
@media (prefers-reduced-motion:reduce){.notif{opacity:1;animation:none}.device{transform:none}}
.toast{visibility:hidden;opacity:0;transition:transform .5s var(--ease),opacity .3s,visibility 0s .5s}
.toast.show{visibility:visible;opacity:1;transition:transform .5s var(--ease),opacity .3s}

/* v7 */
.free-app .eyebrow,.free-app h2{margin-inline:auto;text-align:center;max-width:none}
.free-app .eyebrow{display:block}
.hero .wrap{grid-template-columns:1.35fr .65fr}
.bar{max-width:none;width:100%}
.seg{padding:.6rem 1.6rem}.seg:nth-child(1){flex:1.25}.seg:nth-child(2){flex:1}.seg:nth-child(3){flex:1.4}
.seg select,.seg input{font-size:1rem}
.big-counter{font-size:1.05rem}
/* téléphone déclenché au survol */
.device-wrap{cursor:pointer;outline-offset:8px}
.taps{display:flex;justify-content:center;align-items:center;gap:.6rem;margin:.2rem 0 .9rem;flex-wrap:wrap}
.taps i{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e3f5c8,#99CC66 55%,#6d9c3c);opacity:.3;transform:scale(.8);box-shadow:inset 0 -3px 4px rgba(0,0,0,.2)}
.taps em{flex-basis:100%;text-align:center;font-style:normal;font-weight:800;letter-spacing:.2em;font-size:.65rem;color:var(--vert-profond)}
.notif{animation:none;opacity:0;transform:translateY(14px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.circle i{opacity:.35;transform:scale(.85);transition:all .35s var(--ease)}
.wave{display:flex;justify-content:center;align-items:flex-end;gap:4px;height:26px;margin-top:.9rem;opacity:0;transition:opacity .4s}
.wave s{width:5px;height:6px;border-radius:3px;background:var(--vert-profond);display:block}
.device-wrap.play .taps i:nth-child(1){animation:tap3 .5s .3s both}.device-wrap.play .taps i:nth-child(2){animation:tap3 .5s .9s both}.device-wrap.play .taps i:nth-child(3){animation:tap3 .5s 1.5s both}
@keyframes tap3{to{opacity:1;transform:scale(1.25)}}
.device-wrap.play .n1{opacity:1;transform:none;transition-delay:2.3s}
.device-wrap.play .n2{opacity:1;transform:none;transition-delay:3.3s}
.device-wrap.play .circle i{opacity:1;transform:none}.device-wrap.play .circle i:nth-child(1){transition-delay:3.6s}.device-wrap.play .circle i:nth-child(2){transition-delay:3.9s}.device-wrap.play .circle i:nth-child(3){transition-delay:4.2s}
.device-wrap.play .wave{opacity:1;transition-delay:3.6s}
.device-wrap.play .wave s{animation:wv .8s ease-in-out infinite alternate}.wave s:nth-child(2){animation-delay:.1s!important}.wave s:nth-child(3){animation-delay:.2s!important}.wave s:nth-child(4){animation-delay:.3s!important}.wave s:nth-child(5){animation-delay:.4s!important}
@keyframes wv{to{height:24px}}
.device-wrap.play .device{transform:rotate(0) translateY(-6px)}
/* situations : petites pastilles colorées */
.sits{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.sits li{padding:.6rem 1.1rem;border-radius:999px;font-weight:700;font-size:.95rem;color:var(--noir)}
.sits .s0{background:var(--vert-tendre)}.sits .s1{background:#E3E0F4}.sits .s2{background:#FBE9C8}.sits .s3{background:#DDEFC9}.sits .s4{background:#DCEAF3}.sits .s5{background:#F3DED6}
/* jauge des paliers */
.goal{margin:2rem 0 2.5rem;max-width:920px}
.goal-t{font-size:clamp(1.3rem,2.6vw,1.9rem);margin:0 0 1.6rem;max-width:none}.goal-t b{font-size:1.3em;color:var(--vert-profond)}
.meter{position:relative;height:16px;border-radius:999px;background:#e9e7df;margin:0 0 4.2rem;box-shadow:inset 0 2px 4px rgba(0,0,0,.12)}
.meter .fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:linear-gradient(90deg,var(--vert-tendre),var(--vert-vif));box-shadow:0 0 0 0;transition:width 1.6s var(--ease)}
.ms{position:absolute;top:26px;transform:translateX(-100%);text-align:right;font-size:.8rem;line-height:1.25;white-space:nowrap}
.ms::before{content:"";position:absolute;right:0;top:-28px;width:3px;height:28px;background:var(--encre);border-radius:2px;opacity:.5}
.ms b{font-size:1.05rem}.ms small{display:block;font-weight:700;color:var(--vert-profond)}
.goal-s{max-width:62ch}
/* trois façons */
.ways{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem)}
.ways li{border-top:1.5px solid var(--encre);padding-top:1.25rem;display:flex;flex-direction:column;align-items:flex-start;gap:.3rem}
.big-n{font-size:clamp(3rem,7vw,5rem);font-weight:800;line-height:1;color:var(--vert-tendre);letter-spacing:-.04em}
.ways h3{font-size:1.3rem;margin:.2rem 0}.ways p{margin:0 0 .8rem;font-size:.98rem}
@media (max-width:860px){.ways{grid-template-columns:1fr}.hero .wrap{grid-template-columns:1fr}.ms small{display:none}}
@media (prefers-reduced-motion:reduce){.device-wrap .notif,.device-wrap .circle i,.device-wrap .wave,.device-wrap .taps i{opacity:1;transform:none;transition:none;animation:none}}

/* v8 : revue UX/UI globale */
.announce{background:var(--noir);color:#fff;font-size:.88rem;position:relative;z-index:30}
.announce .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem 1.4rem;padding:.55rem 0;text-align:center}
.announce b{color:var(--vert-tendre)}.announce a{color:#fff;font-weight:700}
.a-mini{display:inline-block;width:90px;height:6px;border-radius:999px;background:rgba(255,255,255,.2);position:relative;overflow:hidden}
.a-mini i{position:absolute;left:0;top:0;bottom:0;width:6.4%;background:var(--vert-tendre);border-radius:999px}
@media (max-width:860px){.a-mini,.a-next{display:none}}
.site-header{top:0}
.circle{display:block;text-align:center;margin-top:.7rem}
.circle .ct{font-size:.72rem;font-weight:800;margin:0;letter-spacing:.02em}
.circle .av{display:flex;justify-content:center;gap:.6rem;margin:.5rem 0}
.circle .av i{width:38px;height:38px;border-radius:50%;background:var(--vert-tendre);position:relative;display:block;box-shadow:inset 0 -3px 4px rgba(0,0,0,.15)}
.circle .av i::before{content:"";position:absolute;left:50%;top:7px;width:13px;height:13px;border-radius:50%;background:var(--noir);transform:translateX(-50%)}
.circle .av i::after{content:"";position:absolute;left:50%;bottom:0;width:26px;height:13px;border-radius:13px 13px 0 0;background:var(--noir);transform:translateX(-50%)}
.circle .cs{font-size:.72rem;font-weight:700;color:var(--vert-profond);margin:0}
/* en-têtes centrés (Airbnb/Apple) */
.ch .eyebrow,.ch h2{text-align:center;margin-inline:auto}
.ch h2{max-width:24ch}
.how.ch h2{max-width:24ch}
.sit-title{text-align:center;margin:3rem 0 1rem}
.sits{justify-content:center}
.conv.ch .verbs,.conv.ch .lead2{text-align:center;margin-inline:auto}
.next.ch .big.small,.next.ch .slogan,.next.ch .goal-s{text-align:center;margin-inline:auto}
.next .steps{max-width:1000px;margin-inline:auto}
.goal{margin:2rem auto 2.5rem;text-align:center}
.goal-t{text-align:center;margin-inline:auto}
.meter{margin-inline:auto}
.free.ch h2{max-width:26ch}
.faq.ch details{max-width:860px;margin-inline:auto}
.faq.ch h2{margin-bottom:1.5rem}
/* lisibilité : aucun texte sous 0,85 rem */
.legal-mini{font-size:.85rem}.foot{font-size:.85rem}.hint{font-size:.88rem}.mini{font-size:.9rem}.ms{font-size:.9rem}.cap{font-size:.85rem}.steps span{font-size:1rem}.tier .tl{font-size:1rem}.tier ul{font-size:.98rem}.chk{font-size:.92rem}.note-demo{font-size:.95rem}
.ms b{font-size:1.1rem}

/* v9 */
.hero-goal{margin:1.1rem 0 .6rem;max-width:560px}
.hero-goal p{margin:0 0 .4rem;font-size:1rem;max-width:none}.hero-goal b{color:var(--vert-profond);font-size:1.15em}
.mini-meter{height:8px;border-radius:999px;background:#e5e2d8;position:relative;overflow:hidden;margin:.35rem 0 .5rem}
.mini-meter i{position:absolute;left:0;top:0;bottom:0;width:0;transition:width 1.6s var(--ease);border-radius:999px;background:linear-gradient(90deg,var(--vert-tendre),var(--vert-vif))}
.hg-s{font-size:.9rem!important;font-weight:600}
.wall-count{text-align:center;margin:1rem auto 1.5rem;max-width:none}
.wall .names{justify-content:center}
.names .slot{width:110px;height:44px;padding:0;border:2px dashed rgba(45,45,45,.25);background:transparent}
.wall-empty{text-align:center;margin:1rem auto 0;font-size:.95rem;max-width:56ch}
/* v9 mobile */
.site-header .link{white-space:nowrap}
@media (max-width:860px){
  .site-header img{height:64px;margin:-10px 0}
  .site-header .link{padding:0 1rem;font-size:.9rem}
  .seg{border-radius:16px}
  .bar{border-radius:26px}
  .hero h1{font-size:2.3rem}
  .names .slot{width:88px}
}

/* v10 : contreparties cohérentes */
.paid-only,.partners-only{display:none}
.tiers-grid:has(#t-veilleur:checked) .paid-only,.tiers-grid:has(#t-protecteur:checked) .paid-only,.tiers-grid:has(#t-ambassadeur:checked) .paid-only,.tiers-grid:has(#t-cobatisseur:checked) .paid-only,.tiers-grid:has(#t-partenaires:checked) .paid-only{display:block}
.tiers-grid:has(#t-veilleur:checked) .chk.paid-only,.tiers-grid:has(#t-protecteur:checked) .chk.paid-only,.tiers-grid:has(#t-ambassadeur:checked) .chk.paid-only,.tiers-grid:has(#t-cobatisseur:checked) .chk.paid-only,.tiers-grid:has(#t-partenaires:checked) .chk.paid-only{display:flex}
.tiers-grid:has(#t-partenaires:checked) .partners-only{display:block}
.tiers-grid:has(#t-partenaires:checked) .chk.partners-only{display:flex}
.f em{font-weight:500;font-style:normal;opacity:.75}

/* v11 */
.btn-change{display:inline-flex;align-items:center;gap:.8rem;padding:.6rem 1.5rem .6rem .7rem;border-radius:999px;color:var(--noir);font-weight:800;text-decoration:none;min-height:56px;position:relative;background:linear-gradient(145deg,rgba(243,78,73,.30),rgba(243,78,73,.10));backdrop-filter:blur(12px) saturate(1.5);-webkit-backdrop-filter:blur(12px) saturate(1.5);border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -3px 8px rgba(243,78,73,.22),0 16px 30px -16px rgba(243,78,73,.65);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.btn-change img{width:36px;height:36px;border-radius:10px;box-shadow:0 4px 8px -3px rgba(243,78,73,.6)}
.btn-change:hover,.btn-change:focus-visible{transform:translateY(-3px) scale(1.02);box-shadow:inset 0 1px 0 #fff,inset 0 -3px 8px rgba(243,78,73,.3),0 22px 34px -16px rgba(243,78,73,.8)}
.promise{padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.conv{padding-top:clamp(1rem,2vw,1.75rem)}
.conv .eyebrow{margin-bottom:.8rem}
.conv h2{margin-bottom:.6rem}

/* v12 */
.faq summary{list-style:none;justify-content:space-between;gap:1rem;padding-right:.3rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:3px solid var(--vert-profond);border-bottom:3px solid var(--vert-profond);transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq summary:hover{color:var(--vert-profond)}
.faq-hint{text-align:center;font-size:.9rem;margin:0 auto 1.25rem;opacity:.8}
.site-header .wrap{align-items:center}
.site-header a:first-child img{transform:translateY(-9px)}

/* v12 responsive */
.site-header a:first-child{flex:none}
.pill{min-height:44px}
@media (max-width:480px){.site-header .link .long{display:none}.site-header img{height:56px}.ms{font-size:.78rem}.ms b{font-size:.9rem}.goal-t{font-size:1.15rem}.hero h1{font-size:2.1rem}}
@media (max-width:480px){.pm{display:none}.ms{font-size:.78rem}.ms b{font-size:.85rem}.goal-t{font-size:1.1rem}}

/* logo remonté */
.site-header{padding:.2rem 0}.site-header a:first-child img{transform:translateY(-18px);height:84px}
@media (max-width:860px){.site-header a:first-child img{height:64px;transform:translateY(-12px)}}
@media (max-width:480px){.site-header a:first-child img{height:56px;transform:translateY(-10px)}}
/* logo : remonté sans être coupé */
.site-header{padding:.45rem 0}
.site-header a:first-child img{transform:translateY(-7px);height:84px}
@media (max-width:860px){.site-header a:first-child img{height:64px;transform:translateY(-5px)}}
@media (max-width:480px){.site-header a:first-child img{height:56px;transform:translateY(-4px)}}

/* symbole aligné sur le titre */
@media (min-width:861px){.hero .wrap{align-items:start}.hero .horizon{margin-top:2.4rem}}

/* =====================================================================
   AJOUTS TECHNIQUES PHASE 7 (aucun changement de DA : états, CSP, a11y)
   ===================================================================== */
:root{--erreur:#B3261E}
[hidden]{display:none!important}
.skip-link{position:absolute;left:1rem;top:-100px;z-index:100;background:var(--noir);color:#fff;padding:.8rem 1.2rem;border-radius:999px;font-weight:700;text-decoration:none}
.skip-link:focus{top:1rem}
/* jauge : positions des paliers en CSS (plus de style dynamique) */
.ms[data-p="20"]{left:20%}.ms[data-p="50"]{left:50%}.ms[data-p="100"]{left:100%}
/* contreparties : repli par classe pour les navigateurs sans :has() */
.tiers-grid.is-paid .paid-only{display:block}.tiers-grid.is-paid .chk.paid-only{display:flex}
.tiers-grid.is-partners .partners-only{display:block}.tiers-grid.is-partners .chk.partners-only{display:flex}
/* Gratuit : pas de « Aucun paiement », message pétition + réseaux (corrige le sélecteur de la maquette) */
.tiers-grid:has(#t-gratuit:checked) .note-paid,.tiers-grid.is-free .note-paid{display:none}
.tiers-grid:has(#t-gratuit:checked) .only-free,.tiers-grid.is-free .only-free{display:block}
.tiers-col{min-width:0}
/* pot de miel : hors écran, hors tabulation */
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
/* anti-robot ALTCHA : calcul invisible (le texte « Vérification anti-robot automatique » l'annonce) */
.altcha-slot{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* champs : erreur = texte + bordure (jamais la couleur seule) */
input.txt[aria-invalid="true"]{border-color:var(--erreur);border-width:2px}
.chk:has(input[aria-invalid="true"]) span{text-decoration:underline;text-decoration-color:var(--erreur);text-underline-offset:3px}
.field-err{display:block;font-size:.88rem;font-weight:700;color:var(--erreur);margin:.35rem 0 0}
.field-err::before{content:"! ";font-weight:800}
.form-status{margin:1rem 0 0;font-size:.95rem;font-weight:600;min-height:1px}
.form-status.is-err{color:var(--erreur)}
.form-status a{font-weight:800}
.btn[disabled],.btn[aria-busy="true"]{opacity:.7;cursor:progress;transform:none}
.form .done{display:grid;gap:.6rem}
.form .done h3{font-size:1.6rem}
.form .done .morse-ok{display:flex;gap:.5rem;margin:.2rem 0 .4rem}
.form .done .morse-ok i{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e3f5c8,#99CC66 55%,#6d9c3c)}
.noscript-note{background:#fff;border-left:5px solid var(--lavande);padding:1rem 1.2rem;margin:1rem 0;border-radius:0 14px 14px 0;font-size:.95rem}
/* compteurs alimentés par l'API : masqués tant qu'aucune valeur réelle */
.counter[hidden],.hero-goal[hidden]{display:none!important}
/* mur + cercle des partenaires (texte seul) */
.names li.name-chip{max-width:100%;overflow-wrap:anywhere}
.partners-wall{margin-top:2.5rem}
.partners-wall h3{text-align:center;font-size:1.3rem;margin-bottom:1rem}
.partners-wall .names a{color:var(--encre);text-decoration:underline;text-decoration-color:var(--vert-tendre);text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px;padding:0 .2rem}
.names li.partner{padding:0 1rem}
/* bandeau visible UNIQUEMENT en simulation locale (tests/serve_prod_like.py --mock) */
.demo-banner{position:sticky;top:0;z-index:99;margin:0;max-width:none;background:var(--violet);color:#fff;text-align:center;font-weight:700;font-size:.9rem;padding:.5rem 1rem}
/* pages secondaires (confirmer, gérer, légales) */
.page{padding:clamp(2.5rem,7vw,5rem) 0 clamp(3rem,8vw,6rem)}
.page .wrap{max-width:820px}
.page h1{font-size:clamp(2rem,5vw,3.2rem);margin-bottom:1.25rem}
.page h1:focus{outline:none}
.page h2{font-size:clamp(1.25rem,2.4vw,1.6rem);margin:2.2rem 0 .8rem}
.page ul{padding-left:1.2rem}.page li{margin-bottom:.4rem}
.page .lead{font-size:clamp(1.1rem,1.8vw,1.3rem)}
.panel{background:#fff;border-radius:24px;padding:clamp(1.5rem,4vw,2.5rem);box-shadow:0 30px 50px -30px rgba(0,0,0,.35),inset 0 1px 0 #fff;margin-top:1.5rem}
.panel .btn{margin-top:1rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1rem}
.btn-row .btn{margin-top:0}
.btn-erase{background:#fff;border:1.5px solid var(--erreur);color:var(--erreur)}
.share{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0}
.share .btn{min-height:48px;padding:.7rem 1.3rem;font-size:.95rem}
.share-input{width:100%;min-height:48px;border:1.5px solid var(--encre);border-radius:14px;padding:.6rem .9rem;font:500 .95rem "Montserrat",sans-serif;margin-top:.6rem}
.status-line{font-weight:600;margin-top:.8rem}
.err-line{color:var(--erreur);font-weight:700;margin-top:.8rem}
.legal dl{display:grid;grid-template-columns:minmax(0,14rem) 1fr;gap:.5rem 1.2rem;margin:0}
.legal dt{font-weight:700}.legal dd{margin:0}
.legal .tbc{background:#FBE9C8;border-radius:6px;padding:0 .3rem;font-weight:600}
.back{display:inline-flex;align-items:center;min-height:44px;font-weight:700;margin-top:2rem}
@media (max-width:640px){.legal dl{grid-template-columns:1fr}.legal dd{margin-bottom:.6rem}}
@media (prefers-reduced-motion:reduce){.mini-meter i,.meter .fill{transition:none}}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
/* niveaux : contenu des <label> en éléments « phrasing » (HTML valide), rendu identique à la maquette (p / ul) */
.tier .tl,.tier .inc{display:block}
.tier .ul{display:block;margin:.6rem 0 0;padding-left:1.1rem;font-size:.98rem}
.tier .ul>span{display:list-item;list-style:disc outside;margin-bottom:.2rem}
/* cibles tactiles ≥ 44 px sans changer le rendu : zone de clic agrandie (padding compensé / pseudo-élément) */
.site-header a:first-child{position:relative}
.site-header a:first-child::after{content:"";position:absolute;left:0;right:0;top:50%;height:48px;transform:translateY(-50%)}
.chk{padding:9px 0;margin-top:calc(.9rem - 9px);margin-bottom:-9px}

/* v8 : titre, liste centrée, téléphone en 5 scènes (calquées sur l'application) */
.hero h1 .gsm{color:#1B9A3E}
.sit-title{text-align:center;margin:3rem auto 1rem;width:100%}
.sits{justify-content:center;max-width:860px;margin-inline:auto;text-align:center}
.sits li{text-align:center}
.device-wrap{position:relative;cursor:pointer}
.dev-box{position:relative;width:min(290px,80%);transform:rotate(-4deg);transition:transform .6s var(--ease)}
.dev-box .device{width:100%;transform:none}
.device-wrap[data-step="3"] .dev-box,.device-wrap[data-step="4"] .dev-box{transform:rotate(0)}
.device:hover{transform:none}
.screen{background:#FAFAF8;padding:0}
.appbar{position:absolute;inset:0 0 auto 0;height:92px;padding-top:32px;display:flex;justify-content:center;align-items:center;gap:.5rem;font-weight:800;font-size:1.1rem;color:#1d2a22;background:#fff;border-bottom:1px solid rgba(0,0,0,.07);z-index:2}
.appbar img{height:40px;width:auto}
.sc{position:absolute;inset:92px 0 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;padding:.8rem 1rem 1.1rem;text-align:center;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s}
.device-wrap[data-step="0"] .sc0,.device-wrap[data-step="1"] .sc1,.device-wrap[data-step="1"] .sc0,.device-wrap[data-step="2"] .sc2,.device-wrap[data-step="3"] .sc3,.device-wrap[data-step="4"] .sc4{opacity:1;visibility:visible;transition:opacity .45s var(--ease)}
.sc1{z-index:3}
.ic{width:92px;height:auto;flex:none}
.ic-ask{width:74px}
.sct{margin:.35rem 0 0;font-weight:800;font-size:.9rem;line-height:1.2;color:#232826}
.scp{margin:0;font-size:.62rem;line-height:1.35;color:#5b625e}
.sct.l,.scp.l{text-align:left;align-self:stretch}
.bt{display:block;align-self:stretch;border-radius:10px;padding:.62rem .4rem;font-weight:700;font-size:.66rem;color:#fff;position:relative;overflow:hidden}
.bt-g{background:#1E9E45}.bt-r{background:#D9435B}.bt-o{background:#fff;color:#1a1f1c;border:1.5px solid #1E9E45}
.sc0 .bt-g{margin-top:.5rem}
.scrim{position:absolute;inset:-92px 0 0 0;background:rgba(40,44,42,.5)}
.modal{position:relative;background:#fff;border-radius:14px;padding:.9rem .8rem;display:flex;flex-direction:column;gap:.45rem;align-items:center;box-shadow:0 14px 30px -14px rgba(0,0,0,.5);align-self:stretch}
.modal .ic{width:60px}
.ping{position:absolute;right:16%;top:50%;width:16px;height:16px;margin:-8px 0 0;border-radius:50%;background:rgba(255,255,255,.75);opacity:0;text-decoration:none}
.device-wrap[data-step="0"] .sc0 .ping,.device-wrap[data-step="1"] .sc1 .ping{animation:ping 1s 1.1s ease-out both}
@keyframes ping{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(2.6)}}
.rec{align-self:stretch;position:relative;text-align:left;background:#fff;border-radius:12px;padding:.6rem .8rem;box-shadow:0 6px 14px -10px rgba(0,0,0,.4)}
.rec b{display:block;font-size:.68rem}.rec span{font-size:.6rem;color:#7a817d}
.rec i{position:absolute;right:.8rem;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#99CC66;animation:blink 1.2s ease-in-out infinite alternate}
@keyframes blink{to{opacity:.3}}
.ic-bars .b{transform-box:fill-box;transform-origin:center;animation:eq 1s ease-in-out infinite alternate}
.ic-bars .b1,.ic-bars .b5{animation-delay:.2s}.ic-bars .b2,.ic-bars .b4{animation-delay:.45s}
@keyframes eq{from{transform:scaleY(.55)}to{transform:scaleY(1.08)}}
.sc3{inset:0;background:radial-gradient(120% 80% at 50% 0,#1c2a22,#0a0f0c);justify-content:flex-start;padding-top:3.4rem}
.lockclock{font-weight:800;font-size:2.8rem;letter-spacing:-.04em;color:rgba(255,255,255,.88)}
.lockdot{display:flex;align-items:center;gap:.4rem;font-size:.62rem;color:rgba(255,255,255,.7);font-weight:600}
.lockdot i{width:8px;height:8px;border-radius:50%;background:#99CC66;animation:blink 1s ease-in-out infinite alternate}
.device-wrap[data-step="3"] .appbar{opacity:0;transition:opacity .4s}
.appbar{transition:opacity .4s .2s}
.ic-siren{animation:siren .8s ease-in-out infinite alternate}
@keyframes siren{to{transform:scale(1.05)}}
/* ondes autour du téléphone */
.rings{position:absolute;inset:0;pointer-events:none}
.rings i{position:absolute;inset:0;border-radius:50px;border:2px solid #99CC66;opacity:0}
.device-wrap[data-step="3"] .rings i,.device-wrap[data-step="4"] .rings i{animation:ring 2.1s ease-out infinite}
.device-wrap[data-step="4"] .rings i{border-color:#D9435B}
.rings i:nth-child(2){animation-delay:.7s!important}.rings i:nth-child(3){animation-delay:1.4s!important}
@keyframes ring{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}
.device-wrap[data-step="3"] .device{animation:buzz 1.5s ease-in-out .5s 1 both}
@keyframes buzz{0%,100%{transform:none}10%,40%,70%{transform:translateX(-3px) rotate(-.6deg)}25%,55%,85%{transform:translateX(3px) rotate(.6deg)}}
/* tapotements sous le téléphone */
.taps{height:3.4rem;margin:1rem 0 .2rem;opacity:0;transition:opacity .4s}
.device-wrap[data-step="3"] .taps{opacity:1}
.device-wrap[data-step="3"] .taps i{animation:tap3 .45s both}
.device-wrap[data-step="3"] .taps i:nth-child(1){animation-delay:.5s}.device-wrap[data-step="3"] .taps i:nth-child(2){animation-delay:1s}.device-wrap[data-step="3"] .taps i:nth-child(3){animation-delay:1.5s}
.dots{display:flex;gap:.45rem;list-style:none;margin:.3rem 0 .6rem;padding:0}
.dots li{width:8px;height:8px;border-radius:50%;background:rgba(0,0,0,.18);transition:all .3s var(--ease)}
.device-wrap[data-step="0"] .dots li:nth-child(1),.device-wrap[data-step="1"] .dots li:nth-child(2),.device-wrap[data-step="2"] .dots li:nth-child(3),.device-wrap[data-step="3"] .dots li:nth-child(4),.device-wrap[data-step="4"] .dots li:nth-child(5){background:var(--vert-profond);width:22px;border-radius:999px}
.cap{text-align:center;max-width:300px;min-height:5.2em}
.cap .live{display:block;font-size:.95rem;opacity:1;margin-bottom:.35rem;color:var(--encre)}
.cap .demo-note{font-size:.72rem;opacity:.7}
@media (prefers-reduced-motion:reduce){.rings{display:none}.sc,.taps,.dots li,.appbar,.dev-box{transition:none}.ic-bars .b,.ic-siren,.rec i,.lockdot i,.ping,.device-wrap[data-step] .device,.device-wrap[data-step] .taps i{animation:none!important}.device-wrap[data-step="3"] .taps i{opacity:1;transform:none}}

/* ===== v9 : sac transparent, écran éteint, parcours des proches, corrections mobile ===== */
.sc3{background:#040605;justify-content:flex-start;padding-top:1.1rem}
.device-wrap[data-step="3"] .appbar{opacity:0}
.liveact{display:flex;align-items:center;gap:.5rem;align-self:center;padding:.5rem .9rem;border-radius:999px;background:#000;border:1px solid rgba(153,204,102,.45);color:#d9efc3;font-size:.62rem;font-weight:700;letter-spacing:.02em;margin-top:2.1rem;box-shadow:0 0 18px -4px rgba(153,204,102,.55)}
.la-bars{display:flex;align-items:center;gap:2px;height:14px}
.la-bars s{display:block;width:3px;height:5px;border-radius:2px;background:#99CC66;animation:eq2 .9s ease-in-out infinite alternate}
.la-bars s:nth-child(2){animation-delay:.15s}.la-bars s:nth-child(3){animation-delay:.3s}.la-bars s:nth-child(4){animation-delay:.45s}
@keyframes eq2{to{height:14px}}
.offnote{margin:.7rem 0 0;font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.34)}
/* sac transparent */
.bag{position:absolute;z-index:4;left:-11%;right:-11%;bottom:-6%;height:62%;border-radius:20px 20px 46px 46px;background:linear-gradient(150deg,rgba(255,255,255,.34),rgba(214,226,238,.18) 55%,rgba(255,255,255,.28));border:2px solid rgba(120,142,170,.55);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),0 22px 30px -18px rgba(20,35,60,.55);opacity:0;transform:translateY(46%);transition:opacity .6s var(--ease),transform .8s var(--ease);pointer-events:none}
.bag::before{content:"";position:absolute;left:6%;right:6%;top:9px;height:0;border-top:2px dashed rgba(120,142,170,.55)}
.bag .bshine{position:absolute;left:12%;top:18%;width:16%;height:62%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0));transform:rotate(12deg)}
.bag .bh{position:absolute;top:-34%;width:26%;height:38%;border:3px solid rgba(120,142,170,.62);border-bottom:0;border-radius:999px 999px 0 0}
.bag .bh1{left:7%}.bag .bh2{right:7%}
.device-wrap[data-step="3"] .bag{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.bag{transition:none}.la-bars s{animation:none}}
/* titre « inverser la question » : le TAP.TAP.TAP. ne se colle plus */
.tap-label{display:flex;justify-content:space-between;gap:1rem}
.tap-label span{display:inline-block}
.tap-label span:not(.fr){margin-right:.15rem;letter-spacing:.12em}
.tap-label span:not(.fr)+span:not(.fr){margin-left:.6rem}
.cb-s2{font-weight:800;margin-top:.55rem}
/* ----- parcours côté proches ----- */
.relay{margin:clamp(3rem,7vw,5.5rem) auto 0;max-width:1000px;text-align:center}
.relay-h{font-size:clamp(1.35rem,3vw,2rem);font-weight:800;letter-spacing:-.02em;margin:0 auto 2rem;max-width:22ch;line-height:1.15}
.relay-stage{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;justify-items:center;gap:clamp(1rem,3vw,2.5rem)}
.relay-from,.relay-to{display:grid;justify-items:center;gap:1rem}
.rdev{width:clamp(210px,22vw,250px);aspect-ratio:9/18.5;background:#111;border-radius:40px;padding:9px;box-shadow:0 36px 50px -28px rgba(0,0,0,.55),inset 0 0 0 2px #333,inset 0 0 0 4px #000}
.rdev-s{width:clamp(170px,17vw,200px);transform:rotate(-3deg)}
.rdev-r{transform:rotate(2deg)}
.rscreen{position:relative;height:100%;border-radius:32px;overflow:hidden;background:#FAFAF8;font-size:.62rem;line-height:1.35;color:#1d2a22;text-align:center}
.r-island{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:34%;height:18px;border-radius:999px;background:#000;z-index:6}
.rs-sender{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;padding:2.6rem .9rem 1rem}
.rscreen .ic{width:70px}
.r-t{margin:.3rem 0 0;font-weight:800;font-size:.82rem;line-height:1.2;color:#232826}
.r-p{margin:0;font-size:.58rem;color:#5b625e}
.r-btn{display:block;align-self:stretch;margin-top:.4rem;border-radius:9px;padding:.55rem .4rem;font-weight:700;font-size:.62rem;color:#fff}
.r-red{background:#D9435B}.r-green{background:#1E9E45}
.relay-cap{margin:0;max-width:24ch;font-weight:700;font-size:.95rem;line-height:1.35}
.relay-link{display:flex;gap:.55rem}
.relay-link i{width:12px;height:12px;border-radius:50%;background:#99CC66;opacity:.25;animation:relay-dot 1.4s ease-in-out infinite}
.relay-link i:nth-child(2){animation-delay:.25s}.relay-link i:nth-child(3){animation-delay:.5s}
@keyframes relay-dot{40%{opacity:1;transform:scale(1.35)}}
.rs{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s;display:flex;flex-direction:column;align-items:center}
.relay[data-step="0"] .rs-lock,.relay[data-step="1"] .rs-lock,.relay[data-step="2"] .rs-sms,.relay[data-step="3"] .rs-otp,.relay[data-step="4"] .rs-mon{opacity:1;visibility:visible;transition:opacity .45s var(--ease)}
/* écran verrouillé */
.rs-lock{background:linear-gradient(165deg,#1f4068,#0d1b2e);color:#fff;padding:2.4rem .8rem 1rem;gap:.35rem}
.lk-ic{width:18px;margin-top:.3rem}
.lk-sh{transform-box:fill-box;transform-origin:left bottom;transition:transform .5s var(--ease)}
.relay[data-step="1"] .lk-sh{transform:translateY(-3px) rotate(-28deg)}
.lk-time{font-size:2.5rem;font-weight:800;letter-spacing:-.04em;margin-top:.1rem}
.notif2{margin-top:2.2rem;align-self:stretch;text-align:left;background:rgba(255,255,255,.92);color:#1d2a22;border-radius:14px;padding:.55rem .65rem;display:grid;gap:.1rem;box-shadow:0 10px 20px -10px rgba(0,0,0,.6);opacity:0;transform:translateY(-14px)}
.relay[data-step="0"] .notif2,.relay[data-step="1"] .notif2{animation:notif-in .6s .5s var(--ease) both}
@keyframes notif-in{to{opacity:1;transform:none}}
.n2-top{display:flex;justify-content:space-between;font-size:.5rem;font-weight:700;letter-spacing:.08em;color:#6b726e}
.notif2 b{font-size:.7rem}.notif2 span:last-child{font-size:.6rem}
.r-hint{margin-top:auto;font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;opacity:0}
.relay[data-step="1"] .r-hint{opacity:.8;transition:opacity .4s}
/* SMS */
.rs-sms{background:#fff;padding-top:2.2rem}
.sms-top{align-self:stretch;display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.2rem 0 .5rem;border-bottom:1px solid rgba(0,0,0,.08);position:relative}
.sms-back{position:absolute;left:.7rem;top:.1rem;font-size:1.3rem;color:#0A84FF;line-height:1}
.sms-av{width:26px;height:26px;border-radius:50%;background:#99CC66}
.sms-name{font-size:.55rem;color:#555}
.sms-body{align-self:stretch;padding:.8rem .7rem;text-align:left}
.bubble{display:inline-block;max-width:92%;background:#E9E9EB;color:#111;border-radius:16px 16px 16px 4px;padding:.55rem .7rem;font-size:.64rem;line-height:1.45;word-break:break-word}
.lnk{color:#0A84FF}
.tapfx{position:absolute;width:26px;height:26px;border-radius:50%;background:rgba(10,132,255,.35);opacity:0}
.tapfx-link{left:34%;top:32%}
.relay[data-step="2"] .tapfx-link{animation:tapfx .9s 1.6s ease-out both}
@keyframes tapfx{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(2.4)}}
/* code à usage unique */
.rs-otp{padding:2.4rem .8rem .8rem;gap:.35rem;background:#FAFAF8}
.r-box{margin:.3rem 0;align-self:stretch;border:1.5px solid #27B24A;background:#EEF8F0;border-radius:10px;padding:.5rem .5rem;font-size:.56rem;color:#3d4a42}
.r-lab{margin:.2rem 0 0;font-size:.6rem;color:#4b524e}
.otp{display:flex;gap:.4rem;margin:.2rem 0 .5rem}
.otp span{width:30px;height:36px;border:1.5px solid #27B24A;background:#F2FAF4;border-radius:8px;display:grid;place-items:center;font-size:1rem;font-weight:800;color:#1d2a22}
.otp b{opacity:0}
.relay[data-step="3"] .otp b{animation:show-d .01s both}
.relay[data-step="3"] .otp span:nth-child(1) b{animation-delay:.7s}.relay[data-step="3"] .otp span:nth-child(2) b{animation-delay:1.2s}.relay[data-step="3"] .otp span:nth-child(3) b{animation-delay:1.7s}.relay[data-step="3"] .otp span:nth-child(4) b{animation-delay:2.2s}
@keyframes show-d{to{opacity:1}}
.tapfx-btn{left:46%;bottom:9%;background:rgba(255,255,255,.7)}
.relay[data-step="3"] .tapfx-btn{animation:tapfx .9s 3.4s ease-out both}
/* moniteur */
.rs-mon{background:#FAFAF8;justify-content:flex-start}
.mon-top{align-self:stretch;background:#22303f;color:#fff;padding:2rem .6rem .55rem;display:grid;gap:.25rem;justify-items:center}
.mon-brand{display:flex;align-items:center;gap:.3rem;font-weight:800;font-size:.7rem}
.mon-brand img{height:14px;width:auto}
.mon-top b{font-size:.62rem;letter-spacing:.06em}
.mon-on{display:inline-flex;align-items:center;gap:.3rem;font-size:.55rem;font-weight:800}
.mon-on i{width:8px;height:8px;border-radius:50%;background:#27B24A}
.map{position:relative;align-self:stretch;height:30%;background:#D9F2DD;overflow:hidden}
.m-river{position:absolute;left:-10%;top:48%;width:130%;height:12px;background:#BCE2F5;border-radius:999px;transform:rotate(-18deg)}
.m-road{position:absolute;background:#fff;border-radius:6px}
.m-r1{left:-5%;top:30%;width:110%;height:7px;transform:rotate(14deg)}
.m-r2{left:60%;top:-10%;width:7px;height:130%;transform:rotate(-12deg)}
.m-route{position:absolute;left:49%;top:30%;width:4px;height:48%;background:#27B24A;border-radius:3px}
.m-pin{position:absolute;left:41%;top:12%;width:26px;height:31px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.3));animation:pin-bob 1.4s ease-in-out infinite alternate}
@keyframes pin-bob{to{transform:translateY(-3px)}}
.mon-ok{margin:.55rem 0 .3rem;font-weight:800;color:#1E9E45;font-size:.68rem}
.mon-audio{align-self:stretch;margin:0 .6rem;border:1px solid rgba(0,0,0,.14);border-radius:12px;padding:.5rem .6rem;display:grid;grid-template-columns:1fr auto;gap:.35rem .5rem;align-items:center;text-align:left}
.mon-audio b{grid-column:1/-1;font-size:.62rem}
.mon-vol{height:12px;border-radius:999px;background:#E3F3E7;position:relative;overflow:hidden}
.mon-vol i{position:absolute;inset:0 38% 0 0;background:#27B24A;border-radius:999px}
.mon-eq{display:flex;align-items:flex-end;gap:2px;height:22px}
.mon-eq s{display:block;width:3px;height:6px;background:#1E9E45;border-radius:1px;animation:eq3 .8s ease-in-out infinite alternate}
.mon-eq s:nth-child(2n){animation-delay:.2s}.mon-eq s:nth-child(3n){animation-delay:.4s}
@keyframes eq3{to{height:22px}}
@media (prefers-reduced-motion:reduce){.m-pin,.mon-eq s,.relay-link i,.notif2{animation:none!important}.notif2{opacity:1;transform:none}.rs{transition:none}}
/* mobile : le proche seul, l'alerte envoyée devient une carte */
@media (max-width:760px){
  .relay-stage{grid-template-columns:1fr;gap:1.1rem}
  .rdev-s{display:none}
  .relay-from{gap:.4rem}
  .relay-cap{max-width:30ch;font-size:1rem;background:#fff;border-radius:18px;padding:.9rem 1.1rem;box-shadow:0 12px 24px -18px rgba(0,0,0,.4)}
  .relay-link{flex-direction:column;align-items:center;gap:.45rem}
  .rdev-r{width:min(252px,72vw)}
}
/* mobile : en-tête plus compact, espacements */
@media (max-width:860px){
  .site-header{padding:0}
  .site-header .wrap{min-height:52px}
  .site-header img{height:40px!important;margin:0!important}
  .site-header a:first-child img{transform:none!important;height:40px!important}
  .site-header .link{min-height:38px;padding:0 .95rem;font-size:.88rem}
}
/* v9b : rien ne dépasse de l'écran ; TAP. TAP. TAP. aligné sous chaque point */
.how,.relay,.signal{overflow-x:clip}
.signal .morse{display:grid;grid-template-columns:repeat(3,48px) 1fr 48px;align-items:center;justify-items:center;gap:0;margin:2.4rem 0 .5rem}
.signal .morse .link-line{width:100%;min-width:0}
.signal .tap-label{display:grid;grid-template-columns:repeat(3,48px) 1fr 48px;justify-items:center;gap:0;margin-bottom:1.4rem}
.signal .tap-label span{width:auto;margin:0;font-size:.7rem;letter-spacing:.1em}
.signal .tap-label .fr{grid-column:5;justify-self:end;margin:0;white-space:nowrap;letter-spacing:.06em}
@media (max-width:480px){
  .signal .morse{grid-template-columns:repeat(3,44px) 1fr 44px}
  .signal .tap-label{grid-template-columns:repeat(3,44px) 1fr 44px}
  .signal .tap-label span{font-size:.64rem}
}

/* v10 : commandes des démonstrations (précédent, pause, suivant, points cliquables) + finitions */
.ctl{display:flex;align-items:center;justify-content:center;gap:.7rem;margin:.4rem 0 .9rem}
.cbtn{width:44px;height:44px;border-radius:50%;border:2px solid var(--encre);background:#fff;color:var(--encre);display:grid;place-items:center;cursor:pointer;padding:0;transition:background .2s,transform .2s,color .2s}
.cbtn svg{width:20px;height:20px}
.cbtn:hover{background:var(--vert-tendre);transform:translateY(-1px)}
.cbtn:focus-visible,.dots button:focus-visible{outline:3px solid var(--vert-profond);outline-offset:3px}
.cbtn .i-play{display:none}
.cbtn.is-paused .i-play{display:block}.cbtn.is-paused .i-pause{display:none}
.ctl .dots{margin:0}
.dots li{position:relative;width:10px;height:10px}
.dots li button{all:unset;display:block;width:100%;height:100%;border-radius:inherit;cursor:pointer}
.dots li button::after{content:"";position:absolute;inset:-14px -7px}
[data-step="0"] .dots li:nth-child(1),[data-step="1"] .dots li:nth-child(2),[data-step="2"] .dots li:nth-child(3),[data-step="3"] .dots li:nth-child(4),[data-step="4"] .dots li:nth-child(5){background:var(--vert-profond);width:26px;border-radius:999px}
.dots li{background:rgba(0,0,0,.2);border-radius:50%}
/* finitions : vibration à l'arrivée du SMS, doigt qui touche, transitions plus douces */
.relay[data-step="0"] .rdev-r{animation:buzz2 .7s 1.1s 1 both}
@keyframes buzz2{0%,100%{transform:rotate(2deg)}15%,45%,75%{transform:rotate(2deg) translateX(-3px)}30%,60%,90%{transform:rotate(2deg) translateX(3px)}}
.sc,.rs{transition-duration:.55s}
.device-wrap[data-step="0"] .sc0 .bt-g,.device-wrap[data-step="1"] .sc1 .bt-g{animation:press .5s 1.15s both}
@keyframes press{50%{transform:scale(.96);filter:brightness(.9)}}
.relay-link i{animation-duration:1.1s}
@media (prefers-reduced-motion:reduce){.relay[data-step="0"] .rdev-r{animation:none}.device-wrap .bt-g{animation:none!important}}

/* ===== v11 : finition premium (cadre sobre, sac en verre fin, ondes douces, commandes discrètes) ===== */
.dev-box{transform:none;animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.device,.rdev{background:linear-gradient(150deg,#34373c,#0c0d0f 70%);border-radius:48px;padding:7px;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 1.5px #44474d,0 46px 56px -34px rgba(8,22,10,.5),0 14px 24px -14px rgba(0,0,0,.35)}
.screen{border-radius:41px}.rscreen{border-radius:41px}
.rdev-s,.rdev-r{transform:none}
.dev-box::after{content:"";position:absolute;left:14%;right:14%;bottom:-26px;height:18px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.26),transparent);filter:blur(5px);z-index:0}
/* sac transparent : verre fin, filets, pas de pavé blanc */
.bag,.bag-back{position:absolute;left:-14%;width:128%;height:auto;pointer-events:none;overflow:visible}
.bag-back{bottom:calc(-6% + 0px);z-index:1;opacity:0;transition:opacity .6s var(--ease)}
.bag{bottom:-6%;z-index:4;opacity:0;transform:translateY(40%);transition:opacity .6s var(--ease),transform .85s var(--ease);background:none;border:0;box-shadow:none;border-radius:0}
.bag::before,.bag::after{content:none}
.device-wrap[data-step="3"] .bag,.device-wrap[data-step="3"] .bag-back{opacity:1;transform:none}
.bag-back{transform:none}
.device{position:relative;z-index:2}
/* ondes : cercles doux qui s'élargissent, plus de contours rectangulaires */
.rings i{inset:-14% -34%;border:0;border-radius:50%;background:radial-gradient(closest-side,transparent 62%,rgba(153,204,102,.30) 70%,rgba(153,204,102,.0) 74%)}
.device-wrap[data-step="4"] .rings i{background:radial-gradient(closest-side,transparent 62%,rgba(217,67,91,.26) 70%,rgba(217,67,91,0) 74%)}
.device-wrap[data-step="3"] .rings i,.device-wrap[data-step="4"] .rings i{animation:ring2 3s cubic-bezier(.2,.6,.2,1) infinite}
.rings i:nth-child(2){animation-delay:1s!important}.rings i:nth-child(3){animation-delay:2s!important}
@keyframes ring2{0%{opacity:0;transform:scale(.62)}25%{opacity:.95}100%{opacity:0;transform:scale(1.18)}}
/* TAP : trois petits points discrets, plus d'« autocollants » */
.taps{gap:.9rem;height:2.8rem;margin:1.1rem 0 .2rem;align-items:center;flex-wrap:nowrap}
.taps i{width:9px;height:9px;background:var(--vert-profond);box-shadow:none;opacity:.22;transform:none}
.taps em{flex-basis:auto;order:-1;font-size:.62rem;letter-spacing:.28em;color:var(--gris,#6b6b6b);font-weight:700;margin-right:.4rem}
.device-wrap[data-step="3"] .taps i{animation:tap4 .6s both}
@keyframes tap4{0%{opacity:.22;transform:scale(1)}50%{opacity:1;transform:scale(1.9);box-shadow:0 0 0 7px rgba(10,122,38,.12)}100%{opacity:1;transform:scale(1.3);box-shadow:none}}
/* lien entre les deux téléphones : un filet qui s'anime */
.relay-link{width:70px;height:2px;gap:0;background:rgba(10,122,38,.18);position:relative;border-radius:2px;overflow:hidden}
.relay-link i{position:absolute;top:0;left:-30%;width:30%;height:100%;border-radius:2px;background:linear-gradient(90deg,transparent,var(--vert-profond),transparent);opacity:1;animation:slide 1.6s ease-in-out infinite}
.relay-link i:nth-child(2){animation-delay:.5s}.relay-link i:nth-child(3){animation-delay:1s}
@keyframes slide{to{left:110%}}
@media (max-width:760px){.relay-link{width:2px;height:46px}.relay-link i{left:0;top:-30%;width:100%;height:30%;background:linear-gradient(180deg,transparent,var(--vert-profond),transparent);animation:slidev 1.6s ease-in-out infinite}@keyframes slidev{to{top:110%}}}
@keyframes buzz2{0%,100%{transform:none}15%,45%,75%{transform:translateX(-3px)}30%,60%,90%{transform:translateX(3px)}}
/* commandes discrètes */
.cbtn{width:40px;height:40px;border:1px solid rgba(0,0,0,.16);background:rgba(255,255,255,.9);box-shadow:0 6px 14px -10px rgba(0,0,0,.45);color:var(--encre)}
.cbtn:hover{background:#fff;border-color:rgba(0,0,0,.3);transform:translateY(-1px)}
.cbtn svg{width:18px;height:18px}
.ctl{gap:.8rem}
@media (prefers-reduced-motion:reduce){.dev-box{animation:none}.rings{display:none}.relay-link i{animation:none}.taps i{animation:none!important}}
/* v13 : scène « téléphone dans la poche d'un jean » (étape 3) */
.device{transition:opacity .5s var(--ease),transform .7s var(--ease)}
.device-wrap[data-step="3"] .device-wrap[data-step="3"] .cap{max-width:34ch;margin:.2rem auto 0;min-height:0;text-align:center}
.relay .cap{max-width:46ch}
.demo-note{margin:.2rem auto 0;max-width:46ch;text-align:center;font-size:.76rem;opacity:.7}
.device-wrap .demo-note{max-width:30ch}
@media (prefers-reduced-motion:reduce){.device{transition:none}}

/* mur des partenaires : section à part, fond légèrement différent */
.wall-partners{background:#fff;border-top:1px solid rgba(0,0,0,.06)}
.wall-partners .names{justify-content:center}
.wall-partners .names a{color:var(--encre);text-decoration:underline;text-decoration-color:var(--vert-tendre);text-underline-offset:3px;font-weight:700}

/* ===== v14 : écrans plus visuels et plus percutants ===== */
/* surveillance active : aura qui respire, puces d'état */
.sc2{overflow:hidden}
.aura{position:absolute;left:50%;top:21%;width:220px;height:220px;margin:-110px 0 0 -110px;pointer-events:none}
.aura i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,rgba(39,178,74,.30),rgba(39,178,74,0) 70%);animation:aura 3.2s ease-out infinite}
.aura i:nth-child(2){animation-delay:1.6s}
@keyframes aura{0%{transform:scale(.35);opacity:0}30%{opacity:1}100%{transform:scale(1.2);opacity:0}}
.sc2 .ic{position:relative}
.chips2{display:flex;gap:.3rem;justify-content:center;flex-wrap:wrap;margin:.1rem 0 .1rem}
.chips2 span{display:inline-flex;align-items:center;gap:.28rem;padding:.22rem .5rem;border-radius:999px;background:#fff;border:1px solid rgba(0,0,0,.08);font-size:.5rem;font-weight:700;color:#1d2a22;box-shadow:0 4px 8px -6px rgba(0,0,0,.4)}
.chips2 i{width:6px;height:6px;border-radius:50%;background:#27B24A;animation:blink 1.2s ease-in-out infinite alternate}
.chips2 span:nth-child(2) i{animation-delay:.3s}.chips2 span:nth-child(3) i{animation-delay:.6s}
/* alerte : plein rouge, anneaux qui pulsent, proches prévenus un par un */
.sc4{background:radial-gradient(120% 90% at 50% 18%,#e3405a 0%,#b3243d 55%,#7c1428 100%);overflow:hidden}
.device-wrap[data-step="4"] .appbar{opacity:0}
.al-rings{position:absolute;left:50%;top:27%;width:230px;height:230px;margin:-115px 0 0 -115px;pointer-events:none}
.al-rings i{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);opacity:0;animation:al-ring 2.4s ease-out infinite}
.al-rings i:nth-child(2){animation-delay:.8s}.al-rings i:nth-child(3){animation-delay:1.6s}
@keyframes al-ring{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1);opacity:0}}
.sct-w,.scp-w{color:#fff}.scp-w{opacity:.9;font-size:.66rem}
.sc4 .ic{filter:drop-shadow(0 8px 14px rgba(0,0,0,.35));width:98px}
.sc4 .sct-w{font-size:1rem;text-shadow:0 2px 10px rgba(0,0,0,.25)}
.al-crew{display:flex;gap:.45rem;justify-content:center;margin:.3rem 0 .1rem}
.av{position:relative;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.22);border:1.5px solid rgba(255,255,255,.7);display:grid;place-items:center;opacity:.4;transform:scale(.85)}
.av b{font-size:.8rem;color:#fff;opacity:0;transform:scale(.4)}
.device-wrap[data-step="4"] .av,.relay[data-step="4"] .av,.relay[data-step="0"] .av{animation:av-in .5s both}
.device-wrap[data-step="4"] .av b,.relay[data-step="0"] .av b{animation:tick .35s both}
.a1{animation-delay:.9s!important}.a2{animation-delay:1.7s!important}.a3{animation-delay:2.5s!important}
.a1 b{animation-delay:1.1s!important}.a2 b{animation-delay:1.9s!important}.a3 b{animation-delay:2.7s!important}
@keyframes av-in{to{opacity:1;transform:none;background:#fff;border-color:#fff}}
@keyframes tick{to{opacity:1;transform:none;color:#1E9E45}}
.al-n{margin:0;font-size:.62rem;font-weight:800;letter-spacing:.04em;color:#fff;text-transform:uppercase}
.bt-w{background:#fff;color:#a8213a;box-shadow:0 8px 16px -8px rgba(0,0,0,.4)}
.rs-sender{background:radial-gradient(120% 90% at 50% 18%,#e3405a 0%,#b3243d 55%,#7c1428 100%)}
.rs-sender .r-t,.rs-sender .r-p{color:#fff}.rs-sender .r-p{opacity:.9}
.rs-sender .ic{filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))}
.r-white{background:#fff;color:#a8213a}
/* téléphone du proche : notification qui claque, moniteur « en direct » */
.rs-lock{background:linear-gradient(165deg,#3a2140,#12101f 60%,#0a0a14)}
.n2-badge{background:#D9435B;color:#fff;border-radius:999px;padding:.05rem .4rem;font-size:.46rem;font-weight:800;letter-spacing:.08em}
.notif2{border:1.5px solid rgba(217,67,91,.55);box-shadow:0 0 0 0 rgba(217,67,91,.5),0 14px 26px -12px rgba(0,0,0,.7)}
.relay[data-step="0"] .notif2{animation:notif-in .6s .5s var(--ease) both,notif-glow 1.6s 1.2s ease-out 2}
@keyframes notif-glow{0%{box-shadow:0 0 0 0 rgba(217,67,91,.55),0 14px 26px -12px rgba(0,0,0,.7)}100%{box-shadow:0 0 0 16px rgba(217,67,91,0),0 14px 26px -12px rgba(0,0,0,.7)}}
.mon-top{position:relative}
.mon-live{position:absolute;right:.5rem;top:2rem;display:inline-flex;align-items:center;gap:.25rem;background:#D9435B;color:#fff;border-radius:999px;padding:.12rem .45rem;font-size:.45rem;font-weight:800;letter-spacing:.08em}
.mon-live i{width:5px;height:5px;border-radius:50%;background:#fff;animation:blink .8s ease-in-out infinite alternate}
.map{height:34%}
.m-ping{position:absolute;left:calc(41% + 3px);top:14%;width:20px;height:20px;border-radius:50%;background:rgba(217,67,91,.35);animation:mping 2s ease-out infinite}
.m-ping2{animation-delay:1s}
@keyframes mping{0%{transform:scale(.4);opacity:.9}100%{transform:scale(3.4);opacity:0}}
.m-trail{position:absolute;left:calc(49% - 3px);top:58%;width:10px;height:10px;border-radius:50%;background:#27B24A;box-shadow:0 0 0 4px rgba(39,178,74,.25);animation:trail 3s ease-in-out infinite alternate}
@keyframes trail{0%{top:70%}100%{top:36%}}
.mon-eq{height:30px;gap:2px}
.mon-eq s{width:3px;background:linear-gradient(180deg,#27B24A,#0A7A26)}
@keyframes eq3{to{height:30px}}
.mon-eq s:nth-child(4n){animation-delay:.1s}.mon-eq s:nth-child(5n){animation-delay:.5s}
@media (prefers-reduced-motion:reduce){.aura i,.al-rings i,.m-ping,.m-trail,.mon-live i,.chips2 i{animation:none}.av,.av b{animation:none!important;opacity:1;transform:none}.av b{color:#1E9E45}.av{background:#fff}}

/* ===== v15 : tailles identiques, centrage des effets, pastille « poche ou sac », écrans du proche vivants ===== */
:root{--phw:clamp(220px,21vw,250px)}
@media (max-width:860px){:root{--phw:min(250px,68vw)}}
.dev-box{width:var(--phw)}
.rdev,.rdev-s,.rdev-r{width:var(--phw)}
/* effets centrés SUR le rond de l'icône (le conteneur et l'icône partagent le même centre) */
.fx-wrap{position:relative;width:96px;height:96px;display:grid;place-items:center;flex:none}
.fx-wrap .ic{width:100%;height:auto;display:block;position:relative;z-index:1}
.fx-wrap .aura,.fx-wrap .al-rings{position:absolute;left:auto;top:auto;width:auto;height:auto;margin:0;inset:-95%;pointer-events:none}
.fx-wrap .aura i,.fx-wrap .al-rings i{inset:0}
.sc4 .fx-wrap{width:104px;height:104px}
.rs-sender .fx-wrap{width:84px;height:84px}
.sc4 .ic,.rs-sender .ic{width:100%}
/* pastille « poche ou sac » */
.where svg{width:19px;height:19px;color:var(--vert-profond)}
.where .w-it{display:inline-flex;align-items:center;gap:.4rem}.where em{font-style:normal}
.where .w-or{font-weight:600;opacity:.45}
.dev-box{margin-bottom:2.2rem}
/* barre d'état */
.r-status,.screen .r-status{position:absolute;top:10px;left:0;right:0;z-index:7;display:flex;justify-content:space-between;align-items:center;padding:0 20px;font-size:.55rem;font-weight:800;color:#111;pointer-events:none}
.r-ic{display:inline-flex;align-items:center;gap:4px}.r-ic svg{height:8px;width:auto;fill:currentColor}
.relay[data-step="0"] .rscreen .r-status,.relay[data-step="1"] .rscreen .r-status,.relay[data-step="4"] .rscreen .r-status,.device-wrap[data-step="3"] .screen .r-status,.device-wrap[data-step="4"] .screen .r-status{color:#fff}
.rs-sender .r-status{color:#fff}
/* téléphone du proche : écran verrouillé vivant */
.rs-lock{padding-top:3.2rem}
.lk-glow{position:absolute;inset:-25%;background:radial-gradient(55% 38% at 28% 22%,rgba(217,67,91,.42),transparent 62%),radial-gradient(50% 40% at 82% 72%,rgba(88,110,230,.32),transparent 62%);animation:glowmove 7s ease-in-out infinite alternate}
@keyframes glowmove{to{transform:translate(8%,6%) scale(1.1)}}
.rs-lock>*{position:relative}.rs-lock>.lk-glow{position:absolute}
.notif2{margin-top:1.6rem}
.relay[data-step="1"] .notif2{opacity:.35!important;transition:opacity .5s}
.faceid{position:absolute!important;left:50%;bottom:20%;width:54px;height:54px;margin-left:-27px;opacity:0;transition:opacity .4s}
.faceid>svg{width:100%;height:100%}
.relay[data-step="1"] .faceid{opacity:1}
.faceid .scan{position:absolute;left:7px;right:7px;top:10px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#fff,transparent);animation:scanl 1s ease-in-out infinite alternate}
@keyframes scanl{to{top:42px}}
.fid-ok{position:absolute;inset:-4px;border-radius:50%;background:#27B24A;display:grid;place-items:center;opacity:0;transform:scale(.5)}
.fid-ok svg{width:30px;height:30px}
.relay[data-step="1"] .fid-ok{animation:fidok .35s 1.5s var(--ease) both}
@keyframes fidok{to{opacity:1;transform:none}}
.lk-bottom{position:absolute!important;left:0;right:0;bottom:14px;display:flex;justify-content:space-between;padding:0 22px}
.lk-bottom .lk-btn{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);display:grid;place-items:center}.lk-bottom svg{width:17px;height:17px}
/* SMS : horodatage, doigt qui touche le lien */
.rs-sms{padding-top:2.6rem}
.sms-time{margin:.55rem 0 0;font-size:.5rem;color:#8a8f8c;font-weight:600}
.sms-body{position:relative;margin-top:.3rem}
.finger{position:absolute;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 8px 18px rgba(0,0,0,.35),0 0 0 3px rgba(10,132,255,.35);left:92px;top:32px;opacity:0}
.relay[data-step="2"] .finger{animation:fingermove 2.4s .4s var(--ease) both}
@keyframes fingermove{0%{opacity:0;transform:translate(70px,110px)}30%{opacity:1}65%,100%{opacity:1;transform:none}}
.relay[data-step="2"] .lnk{animation:lnkhot .3s 1.7s both}
@keyframes lnkhot{to{background:rgba(10,132,255,.2);border-radius:4px}}
.tapfx-link{left:92px;top:32px;width:30px;height:30px}
/* code à usage unique : clavier numérique qui s'enfonce touche par touche */
.rs-otp{padding:2.8rem 0 0;gap:0;justify-content:space-between;align-items:stretch}
.otp-head{display:flex;flex-direction:column;align-items:center;gap:.28rem;padding:0 .8rem}
.otp-head .ic{width:56px}
.otp-head .r-btn{position:relative;align-self:stretch;overflow:hidden}
.tapfx-btn{left:60%;top:30%;bottom:auto;width:24px;height:24px}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:6px;background:#cfd3da}
.k{height:28px;border-radius:6px;background:#fff;display:grid;place-items:center;font-size:.85rem;font-weight:500;color:#111;box-shadow:0 1px 0 rgba(0,0,0,.25)}
.k-e{background:transparent;box-shadow:none}
.relay[data-step="3"] .k4{animation:kp .4s .7s both}.relay[data-step="3"] .k8{animation:kp .4s 1.2s both}.relay[data-step="3"] .k1{animation:kp .4s 1.7s both}.relay[data-step="3"] .k5{animation:kp .4s 2.2s both}
@keyframes kp{0%{background:#fff}40%{background:#99CC66;transform:scale(.94)}100%{background:#fff}}
/* moniteur : barre d'état blanche sur l'en-tête */
.mon-top{padding-top:2.4rem}
@media (prefers-reduced-motion:reduce){.lk-glow,.faceid .scan,.finger,.k{animation:none!important}.where{transition:none}}
/* l'écran d'alerte occupe tout l'écran (plus de bande blanche en haut) */
.sc4{inset:0;padding-top:3.4rem}
.sc2{inset:92px 0 0 0}

.mon-row{display:flex;gap:.55rem;justify-content:center;align-items:center}
.mon-live{position:static;top:auto;right:auto}

.mon-info{align-self:stretch;margin:.45rem .6rem 0;display:grid;grid-template-columns:1fr 1fr;gap:.4rem;font-size:.5rem;color:#6b726e;text-align:left}
.mon-info span{display:grid;gap:.1rem}.mon-info b{font-size:.66rem;color:#1d2a22}
.mon-call{align-self:stretch;margin:.5rem .6rem 0;text-align:center}

/* ===== v16 : situation « poche » / « sac » (le téléphone reste visible, écran éteint, « Surveillance active ») ===== */
.dev-box{margin-bottom:4rem}
.device{position:relative;z-index:2}
.sc-back,.sc-front{position:absolute;left:-14%;bottom:0;width:128%;height:auto;pointer-events:none;overflow:visible;opacity:0;transition:opacity .55s var(--ease),transform .75s var(--ease)}
.sc-back{z-index:1}
.sc-front{z-index:4;transform:translateY(28px)}
.device-wrap[data-step="3"] .sc-back,.device-wrap[data-step="3"] .sc-front{opacity:1}
.device-wrap[data-step="3"] .sc-front{transform:none}
.sc-back .g-pocket,.sc-back .g-bag,.sc-front .g-pocket,.sc-front .g-bag{transition:opacity .35s var(--ease)}
.device-wrap[data-where="pocket"] .g-bag,.device-wrap[data-where="bag"] .g-pocket{opacity:0}
.sc-back{filter:drop-shadow(0 26px 24px rgba(10,20,40,.22))}
.sc-front{filter:drop-shadow(0 -4px 8px rgba(10,20,40,.22)) drop-shadow(0 16px 14px rgba(10,20,40,.22))}
.device-wrap[data-where="bag"] .sc-front{filter:drop-shadow(0 14px 14px rgba(10,20,40,.18))}
.device-wrap[data-where="bag"] .sc-back{filter:drop-shadow(0 18px 18px rgba(10,20,40,.14))}
/* sélecteur Poche / Sac */
.where{position:absolute;z-index:7;left:50%;bottom:-3.4rem;transform:translate(-50%,10px);display:flex;gap:4px;padding:4px;border-radius:999px;background:#fff;box-shadow:0 14px 28px -14px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.07);opacity:0;pointer-events:none;transition:opacity .5s var(--ease) .15s,transform .6s var(--ease) .15s}
.device-wrap[data-step="3"] .where{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.where .w-it{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1.05rem;border:0;border-radius:999px;background:transparent;color:var(--encre);font:800 .78rem "Montserrat",sans-serif;cursor:pointer;transition:background .25s,color .25s}
.where .w-it svg{width:18px;height:18px;color:var(--vert-profond);transition:color .25s}
.where .w-it:hover{background:rgba(153,204,102,.25)}
.where .w-it.is-on{background:var(--encre);color:#fff}.where .w-it.is-on svg{color:var(--vert-tendre)}
.where .w-it:focus-visible{outline:3px solid var(--vert-profond);outline-offset:2px}
/* « Surveillance active » bien lisible sur l'écran éteint */
.liveact{font-size:.86rem;padding:.75rem 1.2rem;margin-top:2.6rem;gap:.6rem}
.la-bars{height:20px;gap:3px}.la-bars s{width:4px}
@keyframes eq2{to{height:20px}}
.offnote{font-size:.62rem;margin-top:.8rem}
@media (prefers-reduced-motion:reduce){.where,.sc-back,.sc-front{transition:none}}
.liveact{white-space:nowrap;font-size:.76rem;padding:.65rem 1rem;gap:.55rem;margin-top:2.4rem}
.la-bars{height:18px}@keyframes eq2{to{height:18px}}
/* mobile : le symbole du héros prend moins de place, sections plus serrées */
@media (max-width:860px){
  .hero{padding:1.4rem 0 1.4rem}
  .hero .horizon{max-width:150px;margin:.4rem auto 0}
  .hero .wrap{gap:1rem}
  .hero h1{margin-bottom:.4rem}
  .hero .lead{margin:1rem 0 1.2rem}
  section{scroll-margin-top:60px}
}
/* parcours des proches : les deux téléphones sont alignés par le haut, le trait de liaison est au milieu de leur hauteur */
.relay-stage{align-items:start}
.relay-from,.relay-to{align-self:start}
.relay-link{align-self:start;margin-top:calc(var(--phw) * 1.0245)}
@media (max-width:760px){.relay-link{margin-top:0}}
/* poche : le bas du téléphone est rangé dans la poche (les coins ne dépassent plus de la pointe) */
.device-wrap[data-where="pocket"][data-step="3"] .device{clip-path:inset(-20px -20px 8.5% -20px)}

/* ===== v17 : application de l'audit UX (accessibilité, parcours, mobile) ===== */
html{scroll-padding-top:84px}
/* focus visible partout (barre du héros, pied de page sombre) */
.seg:focus-within{outline:3px solid var(--encre);outline-offset:3px;background:#fff}
.seg input:focus-visible,.seg select:focus-visible{outline:none}
.site-footer :focus-visible,.pills.dark .pill:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:none}
/* compteur du héros : points dédiés (plus de collision avec les points des démonstrations) */
.pulse-dots{display:inline-flex;gap:5px}
.pulse-dots i{width:9px;height:9px;border-radius:50%;background:var(--vert-vif);animation:pulse 1.8s var(--ease) 3}
.hero .horizon img:not(.spin){animation-iteration-count:3}
/* boutons des démonstrations : cibles de 44 px, points lisibles, sélecteur caché hors de son étape */
.cbtn{width:44px;height:44px}
.where{visibility:hidden;transition:opacity .5s var(--ease) .15s,transform .6s var(--ease) .15s,visibility 0s .65s}
.device-wrap[data-step="3"] .where{visibility:visible;transition-delay:.15s,.15s,0s}
.where .w-it{min-height:44px}
.dots li{background:rgba(0,0,0,.42)}
.dots li button::after{position:absolute}
.ctl .dots{gap:.55rem}
/* vraie pause : toutes les animations de la démonstration s'arrêtent */
.is-paused *,.is-paused *::before,.is-paused *::after{animation-play-state:paused!important}
/* textes jamais sous 12 px (hors maquettes de téléphone) */
.seg span,.tier .tag{font-size:.75rem}
.signal .tap-label span,.taps em{font-size:.75rem}
.demo-note{font-size:.78rem}
.cap{opacity:1}
.share-input{font-size:1rem}
.page,.noscript-note,.legal-mini{overflow-wrap:anywhere}
.btn{line-height:1.2}
/* formulaire collant : sous l'en-tête, jamais plus haut que l'écran */
.form{position:static;max-height:none;overflow:visible}
/* niveau rappelé, champs obligatoires, récapitulatif d'erreurs, écran de succès */
.picked{margin:.2rem 0 .5rem;font-weight:600}
.picked a{margin-left:.5rem;font-weight:700;color:var(--vert-profond);text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:.5rem 0}
.req-note{font-size:.8rem;opacity:.75;margin:0 0 .9rem}
.err-sum{border:1.5px solid #B3261E;background:#fff;border-radius:12px;padding:.7rem .9rem;margin:.4rem 0 1rem;font-size:.9rem;color:#B3261E;font-weight:600}
.err-sum a{color:#B3261E;text-decoration:underline;text-underline-offset:3px}
.sent-to{font-weight:700;overflow-wrap:anywhere}
#fix-mail{margin-top:.8rem}
.wall-empty{text-align:center;margin:.6rem auto 1rem;opacity:.8}
.skip-link.skip-2{left:15rem}
/* mobile : cartes de niveaux compactes (détails dépliés seulement pour le niveau choisi), barre d'appel collante */
@media (max-width:860px){
  .tier .ul,.tier .inc{display:none}
  .tier.is-on .ul,.tier.is-on .inc{display:block}
  .site-header .link{min-height:44px}
  .sticky-cta{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:30;display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:54px;border-radius:999px;background:var(--vert-tendre);color:var(--noir);font-weight:800;text-decoration:none;box-shadow:0 14px 30px -12px rgba(0,0,0,.5),inset 0 -3px 0 rgba(0,0,0,.12)}
  .sticky-cta[hidden]{display:none}
  .site-footer{padding-bottom:6rem}
}
@media (min-width:861px){.sticky-cta{display:none}}
@media (prefers-reduced-motion:reduce){.otp b{opacity:1}.pulse-dots i{animation:none}.sticky-cta{transition:none}}
#picked-name{white-space:nowrap}
/* mobile : marges verticales resserrées (page plus courte, même rythme) */
@media (max-width:860px){
  .day,.signal,.tiers,.free,.ambition{padding-top:2.75rem;padding-bottom:2.75rem}
  .night{padding-top:4.5rem;padding-bottom:2.75rem}
  .promise{padding-top:2.75rem;padding-bottom:1.5rem}
  .conv{padding-top:1rem;padding-bottom:2.25rem}
  .how,.free-app{padding-top:2.5rem;padding-bottom:2.5rem}
  .next,.faq{padding-top:2.25rem;padding-bottom:2.25rem}
}
/* « Une technologie présente… » : centrée, sur une seule ligne dès que l'écran le permet */
.signal p.big.small{max-width:none;margin-inline:auto;text-align:center;text-wrap:balance}
@media (min-width:1000px){.signal p.big.small{white-space:nowrap}}
@media (max-width:999px){.signal p.big.small .sent{display:block}.signal p.big.small .sent+.sent{margin-top:.4rem}}
/* v18 · mobile : le grand symbole décoratif sous le formulaire n'a pas sa place (il repousse la suite) ; la barre collante ne masque plus la fin de page */
@media (max-width:860px){
  .hero .horizon{display:none}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .sticky-cta{min-height:48px;font-size:1rem}
}
/* v19 · page interne de relecture du mur */
.review-name{font-size:clamp(1.6rem,5vw,2.2rem);font-weight:800;line-height:1.2;margin:.2rem 0 .3rem;overflow-wrap:anywhere}
.review-tier{margin:0 0 1.2rem;color:var(--gris,#555)}