/* SentryReply · /sites (Creator Site). Chargé APRÈS home.css : réutilise ses
   jetons, sa nav, ses boutons, ses titres et son pied de page. Ici seulement
   ce qui est propre à la page : maquettes téléphone (liste de liens vs site),
   tuiles de l'offre, bandeau "owned vs rented", preuve.                     */

/* ─── hero ─────────────────────────────────────────────────────────────── */
.s-hero{padding:132px 0 clamp(64px,9vw,120px);position:relative}
.s-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,80px);align-items:center}
.s-hero .hero-copy{gap:24px}
.s-hero .lead{max-width:31em}
.s-note{font-size:.72rem;letter-spacing:.06em;color:var(--muted)}
@media (max-width:900px){
  .s-hero{padding-top:108px}
  .s-hero-grid{grid-template-columns:1fr}
}

/* ─── scène de morphing ────────────────────────────────────────────────── */
.morph{display:grid;justify-items:center;gap:18px}
.seg{display:inline-flex;padding:4px;border:1px solid var(--hair);border-radius:999px;background:rgba(255,255,255,.03);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.seg button{min-height:44px;padding:8px 16px;border-radius:999px;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);transition:background .3s,color .3s}
.seg button[aria-pressed="true"]{background:var(--cobalt-button);color:#fff;box-shadow:0 6px 24px -8px rgba(75,107,255,.9)}
.seg button:hover{color:var(--text)}

.phone{position:relative;width:min(330px,82vw);aspect-ratio:9/17.5;border-radius:44px;padding:11px;background:linear-gradient(160deg,#1A1E2A,#0B0D13);box-shadow:0 0 0 1px rgba(255,255,255,.12),0 60px 120px -40px rgba(0,0,0,.95),0 0 120px -40px rgba(75,107,255,.55)}
.phone::before{content:"";position:absolute;top:20px;left:50%;width:84px;height:22px;margin-left:-42px;border-radius:999px;background:#05060A;z-index:5}
.screen{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:#0E1017;isolation:isolate}
.layer{position:absolute;inset:0;transition:clip-path 1s var(--ease-out),opacity .8s var(--ease-out),transform 1s var(--ease-out)}

/* état A : la liste de boutons */
.lst{display:flex;flex-direction:column;align-items:center;gap:10px;padding:64px 20px 20px;background:#15171D}
.lst .av{width:64px;height:64px;border-radius:50%;background:#2A2D36;margin-bottom:4px}
.lst .hd{font-size:.86rem;font-weight:700;color:#C9CDD6}
.lst .bio{font-size:.7rem;color:#7E8696;margin-bottom:10px}
.lst span.b{display:block;width:100%;padding:12px 10px;border-radius:12px;background:#22252E;border:1px solid #2E323C;font-size:.76rem;color:#C9CDD6;text-align:center}

/* état B : le vrai site */
.site{display:flex;flex-direction:column;background:radial-gradient(ellipse 90% 50% at 10% 0%,rgba(75,107,255,.42),transparent 70%),radial-gradient(ellipse 70% 40% at 100% 40%,rgba(255,154,90,.16),transparent 70%),#0B0D14;color:var(--text);padding:52px 16px 16px;gap:12px}
.m-nav{display:flex;justify-content:space-between;align-items:center;font-size:.7rem;font-weight:700}
.m-nav i{display:flex;gap:3px;flex-direction:column}
.m-nav i::before,.m-nav i::after{content:"";width:14px;height:1.5px;background:var(--text-2)}
.m-h{font-size:1.36rem;font-weight:700;line-height:1;letter-spacing:-.035em;margin-top:6px}
.m-h em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.1em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.m-p{font-size:.68rem;color:var(--text-2);line-height:1.4}
.m-card{display:grid;grid-template-columns:62px 1fr;gap:10px;align-items:center;padding:10px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--hair)}
.m-cover{aspect-ratio:3/4;border-radius:5px;background:linear-gradient(160deg,#8FA2FF,#4B6BFF 45%,#1B2350);position:relative;box-shadow:0 10px 20px -10px #000}
.m-cover::after{content:"";position:absolute;left:8px;right:8px;bottom:10px;height:3px;border-radius:2px;background:rgba(255,255,255,.7);box-shadow:0 -6px 0 rgba(255,255,255,.35)}
.m-card b{display:block;font-size:.74rem;margin-bottom:3px}
.m-card small{display:block;font-size:.62rem;color:var(--muted);margin-bottom:7px}
.m-pill{display:inline-block;padding:5px 10px;border-radius:999px;background:var(--cobalt);font-size:.62rem;font-weight:700;color:#fff}
.m-mail{padding:12px;border-radius:14px;border:1px solid rgba(124,147,255,.35);background:linear-gradient(160deg,rgba(75,107,255,.2),rgba(75,107,255,.04))}
.m-mail b{display:block;font-size:.72rem;margin-bottom:8px}
.m-in{display:flex;gap:6px}
.m-in span{flex:1;padding:7px 9px;border-radius:999px;background:rgba(7,8,12,.6);border:1px solid var(--hair-2);font-size:.6rem;color:var(--muted)}
.m-in span.go{flex:none;background:var(--text);color:var(--bg);font-weight:700;border:0}
.m-latest b{display:block;font-size:.66rem;color:var(--text-2);margin-bottom:6px;font-weight:500}
.m-th{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.m-th span{aspect-ratio:16/10;border-radius:9px;background:linear-gradient(150deg,rgba(143,162,255,.35),rgba(255,154,90,.18));border:1px solid var(--hair)}
.m-th span+span{background:linear-gradient(150deg,rgba(197,139,255,.3),rgba(75,107,255,.2))}
.m-links{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.m-links span{padding:5px 9px;border-radius:999px;border:1px solid var(--hair-2);font-size:.58rem;color:var(--text-2)}

.morph[data-state="list"] .site{clip-path:inset(0 0 0 100%)}
.morph[data-state="site"] .site{clip-path:inset(0 0 0 0)}
.morph[data-state="site"] .lst{transform:scale(.94);opacity:.2}
.morph .cap{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center;min-height:1.2em}

/* ─── contraste côte à côte ────────────────────────────────────────────── */
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(20px,3vw,40px);align-items:stretch}
.vs-col{padding:clamp(24px,3vw,40px);border-radius:calc(var(--r) + 6px);border:1px solid var(--hair);background:var(--panel);display:grid;gap:20px;align-content:start}
.vs-col.real{background:linear-gradient(160deg,rgba(75,107,255,.18),rgba(75,107,255,.03));border-color:rgba(124,147,255,.35);box-shadow:0 0 80px -30px rgba(75,107,255,.6)}
.vs-h{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.vs-col.real .vs-h{color:var(--cobalt-2)}
.vs-col h3{font-size:clamp(1.4rem,2vw,1.8rem);letter-spacing:-.025em;line-height:1.1}
.vs-col ul{list-style:none;display:grid}
.vs-col li{padding:13px 0 13px 28px;border-top:1px solid var(--hair);position:relative;color:var(--text-2)}
.vs-col li::before{content:"";position:absolute;left:2px;top:22px;width:12px;height:1.5px;background:var(--muted)}
.vs-col.real li{color:var(--text)}
.vs-col.real li::before{width:11px;height:6px;top:18px;background:none;border-left:2px solid var(--cobalt-2);border-bottom:2px solid var(--cobalt-2);transform:rotate(-45deg)}
.vs-arrow{display:grid;place-items:center;color:var(--cobalt-2)}
.vs-arrow svg{width:40px;height:40px}
@media (max-width:900px){
  .vs{grid-template-columns:1fr}
  .vs-arrow svg{transform:rotate(90deg)}
}

/* ─── ce qui est construit ─────────────────────────────────────────────── */
.parts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.part{position:relative;padding:clamp(24px,2.6vw,34px);border-radius:calc(var(--r) + 4px);border:1px solid var(--hair);background:linear-gradient(170deg,rgba(255,255,255,.055),rgba(255,255,255,.015));display:grid;gap:12px;align-content:start;min-height:240px;overflow:hidden;isolation:isolate;transition:border-color .3s,transform .5s var(--ease-out)}
.part:hover{border-color:rgba(124,147,255,.4);transform:translateY(-4px)}
.part::after{content:"";position:absolute;width:60%;aspect-ratio:1;right:-20%;top:-30%;border-radius:50%;background:radial-gradient(circle,rgba(75,107,255,.35),transparent 65%);filter:blur(30px);opacity:0;transition:opacity .5s;z-index:-1}
.part:hover::after{opacity:1}
.part .n{font-size:.78rem;color:var(--cobalt-2);letter-spacing:.08em}
.part h3{font-size:clamp(1.3rem,1.8vw,1.6rem);letter-spacing:-.02em;line-height:1.1}
.part p{color:var(--text-2);font-size:.98rem}
.part-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(75,107,255,.14);border:1px solid rgba(124,147,255,.3);color:var(--cobalt-2)}
.part-ic svg{width:22px;height:22px}
@media (max-width:900px){.parts{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.parts{grid-template-columns:1fr}.part{min-height:0}}

/* ─── owned vs rented ──────────────────────────────────────────────────── */
.own{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.own>div:first-child{display:grid;gap:24px;justify-items:start}
.ledger{list-style:none;display:grid;gap:14px}
.ledger li{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;padding:20px 22px;border-radius:var(--r);border:1px solid var(--hair);background:var(--panel)}
.ledger li.on{border-color:rgba(124,147,255,.35);background:rgba(75,107,255,.08)}
.ledger .k{grid-row:span 2;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:4px;min-width:6.5em}
.ledger li.on .k{color:var(--cobalt-2)}
.ledger b{font-size:1.1rem;font-weight:500;letter-spacing:-.01em}
.ledger span{color:var(--text-2);font-size:.94rem}
@media (max-width:900px){.own{grid-template-columns:1fr}}

/* ─── preuve ───────────────────────────────────────────────────────────── */
.proof{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:center;padding:clamp(28px,4vw,56px);border-radius:calc(var(--r) + 8px);border:1px solid var(--hair);background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));position:relative;overflow:hidden;isolation:isolate}
.proof::before{content:"";position:absolute;width:60%;aspect-ratio:1;left:-12%;top:-40%;border-radius:50%;background:radial-gradient(circle,var(--cobalt),transparent 65%);opacity:.2;filter:blur(40px);z-index:-1}
.proof>div{display:grid;gap:18px;align-content:center}
.proof .facts{margin-top:2px}
.browser{border-radius:14px;overflow:hidden;border:1px solid var(--hair-2);background:#0B0D14;box-shadow:0 40px 80px -30px rgba(0,0,0,.95)}
.browser-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--hair);background:rgba(255,255,255,.03)}
.browser-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14)}
.browser-bar span{margin-left:10px;flex:1;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.05);font-size:.66rem;color:var(--muted)}
.browser-body{padding:22px 20px 26px;display:grid;gap:12px;background:radial-gradient(ellipse 80% 60% at 0% 0%,rgba(39,66,217,.5),transparent 70%),radial-gradient(ellipse 60% 50% at 100% 60%,rgba(194,86,42,.22),transparent 70%)}
.browser-body .bb-h{font-size:clamp(1.3rem,2.2vw,1.8rem);font-weight:700;line-height:.98;letter-spacing:-.04em}
.browser-body .bb-h em{font-family:var(--serif);font-style:italic;font-weight:400;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.browser-body .bb-l{height:6px;border-radius:3px;background:rgba(255,255,255,.12);width:80%}
.browser-body .bb-l.s{width:56%}
.browser-body .bb-b{width:max-content;padding:7px 14px;border-radius:999px;background:var(--cobalt);font-size:.7rem;font-weight:700;margin-top:6px}
.bb-covers{display:flex;gap:8px;margin-top:8px;padding-top:12px;border-top:1px solid var(--hair)}
.bb-covers i{width:22%;aspect-ratio:900/1275;border-radius:3px;background:linear-gradient(160deg,rgba(124,147,255,.55),rgba(75,107,255,.12));box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.bb-covers i:nth-child(2){background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.04))}
.bb-covers i:nth-child(4){background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(75,107,255,.2))}
@media (max-width:900px){.proof{grid-template-columns:1fr}}

/* ─── étapes : 4 colonnes ──────────────────────────────────────────────── */
.steps.s4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.steps.s4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps.s4{grid-template-columns:1fr}}

/* ─── mouvement réduit et téléphone ────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .layer{transition:none}
  .part:hover{transform:none}
}
@media (max-width:600px){
  .s-hero{padding-top:100px}
  .phone{width:min(300px,78vw);border-radius:40px}
  .seg button{padding:8px 12px;font-size:.68rem}
  .ledger li{grid-template-columns:1fr;padding:18px}
  .ledger .k{grid-row:auto;padding:0}
  .proof{padding:22px}
}

/* Lien secondaire vers le rendez-vous Calendly (03/10) */
.talk{margin-top:8px}
.book-link{display:inline-flex;align-items:center;min-height:44px;font-weight:500;color:var(--text-2);text-decoration:underline;text-decoration-color:var(--hair-2);text-underline-offset:4px}
.book-link:hover{color:var(--text)}