/* Pages EzQuiel — même univers que velvetshow.app (fond sombre, Oswald / Inter),
   avec les couleurs de l'app (cyan → indigo → violet). Fichier indépendant :
   rien dans styles.css ni dans les autres pages n'en dépend. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0d0e12;--panel:#15171d;--line:#262a33;--text:#eceef3;--mut:#9aa1b0;--dim:#565c6e;
  --gold:#f0bd57;--red:#e5484d;
  --cyan:#22d3ee;--indigo:#6366f1;--violet:#a855f7;
  --grad:linear-gradient(120deg,var(--cyan),var(--indigo) 55%,var(--violet));
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:Inter,sans-serif;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

/* En-tête identique au reste du site */
header{position:sticky;top:0;background:rgba(13,14,18,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);z-index:100}
.nav{max-width:1080px;margin:0 auto;padding:0 20px;height:56px;display:flex;align-items:center;justify-content:space-between}
.brand{font-family:Oswald,sans-serif;font-size:18px;font-weight:700;letter-spacing:.1em;display:flex;align-items:center;gap:8px}
.brand i{width:9px;height:9px;border-radius:50%;background:var(--red);display:inline-block}
nav a{margin-left:18px;color:var(--mut);font-size:14px;transition:color .2s}
nav a:hover,nav a[aria-current]{color:var(--text)}

.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px;margin:0 auto;padding:0 20px}

/* Haut de page */
.ez-hero{position:relative;padding:72px 0 56px;overflow:hidden}
.ez-hero::before{content:"";position:absolute;inset:-40% -10% auto;height:120%;background:radial-gradient(closest-side,rgba(99,102,241,.28),transparent),radial-gradient(closest-side at 80% 40%,rgba(34,211,238,.18),transparent);pointer-events:none}
.ez-hero__grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.ez-badge-row{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.ez-icon{width:72px;height:72px;border-radius:18px;box-shadow:0 10px 30px rgba(99,102,241,.35)}
.ez-kicker{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.ez-hero h1{font-family:Oswald,sans-serif;font-size:clamp(34px,5vw,54px);line-height:1.08;font-weight:700;letter-spacing:.01em;margin-bottom:18px}
.ez-hero h1 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ez-lead{font-size:18px;color:var(--mut);max-width:560px;margin-bottom:28px}
.ez-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.ez-cta img{height:48px;width:auto}
.ez-note{font-size:13px;color:var(--dim);margin-top:14px}
.phone img{width:100%;height:auto;aspect-ratio:414/900;object-fit:cover}
.phone{border-radius:34px;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 6px #111318;overflow:hidden;background:#000}
.ez-hero .phone{max-width:300px;margin:0 auto}

/* Sections */
.ez-section{padding:64px 0;border-top:1px solid var(--line)}
.ez-section h2{font-family:Oswald,sans-serif;font-size:clamp(26px,3.4vw,36px);font-weight:600;letter-spacing:.02em;margin-bottom:12px}
.ez-section .sub{color:var(--mut);max-width:620px;margin-bottom:36px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px}
.step b{display:inline-flex;width:30px;height:30px;border-radius:50%;align-items:center;justify-content:center;background:var(--grad);font-size:14px;margin-bottom:12px}
.step h3{font-size:17px;margin-bottom:6px}
.step p{color:var(--mut);font-size:15px}

.feature{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:28px 0}
.feature.rev .feature__media{order:2}
.feature .phone{max-width:280px;margin:0 auto}
.feature h3{font-family:Oswald,sans-serif;font-size:26px;font-weight:600;margin-bottom:10px}
.feature p{color:var(--mut);margin-bottom:12px}
.feature ul{list-style:none;color:var(--mut)}
.feature li{padding-left:22px;position:relative;margin:6px 0}
.feature li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;border-radius:50%;background:var(--grad)}

.fit{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fit div{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px}
.fit h3{font-size:16px;margin-bottom:10px}
.fit ul{padding-left:18px;color:var(--mut)}
.fit li{margin:6px 0}

.price{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.price div{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;text-align:center}
.price strong{display:block;font-family:Oswald,sans-serif;font-size:24px;margin-bottom:4px}
.price span{color:var(--mut);font-size:14px}

.final{text-align:center;padding:72px 0}
.final h2{margin-bottom:16px}
.final .ez-cta{justify-content:center}

/* Pages texte (aide, confidentialité) */
.doc{padding:64px 0 88px}
.doc h1{font-family:Oswald,sans-serif;font-size:clamp(30px,4vw,42px);font-weight:700;margin-bottom:8px}
.doc .updated{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:36px}
.doc h2{font-family:Oswald,sans-serif;font-size:21px;font-weight:600;letter-spacing:.03em;color:var(--cyan);margin:40px 0 10px}
.doc p,.doc li{color:var(--mut);font-size:16px;line-height:1.7}
.doc p+p{margin-top:10px}
.doc ul{padding-left:20px;margin:8px 0}
.doc a{color:var(--cyan)}
.doc a:hover{text-decoration:underline}
.doc .box{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin:20px 0;color:var(--text)}
.doc details{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:10px 0}
.doc summary{cursor:pointer;color:var(--text);font-weight:600}
.doc details p{margin-top:8px}
.mail{display:inline-block;margin-top:6px;padding:10px 18px;border-radius:10px;background:var(--grad);color:#fff!important;font-weight:600}

footer{border-top:1px solid var(--line);padding:28px 0;color:var(--mut);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;align-items:center}
footer a{color:var(--mut)}
footer a:hover{color:var(--text)}
footer .links{display:flex;flex-wrap:wrap;gap:8px 16px}

@media(max-width:820px){
  .ez-hero{padding:44px 0 36px}
  .ez-hero__grid,.feature{grid-template-columns:1fr;gap:28px}
  .feature.rev .feature__media{order:0}
  .steps,.fit,.price{grid-template-columns:1fr}
  .ez-hero .phone{max-width:240px}
  .feature .phone{max-width:240px}
  nav a{margin-left:10px;font-size:12px}
  nav a.hide-sm{display:none}
}


/* ---------------------------------------------------------------- Mouvement */

/* Dégradé du titre qui glisse doucement */
.ez-hero h1 span{background-size:200% 100%;animation:ez-shift 8s ease-in-out infinite alternate}
@keyframes ez-shift{from{background-position:0% 50%}to{background-position:100% 50%}}

/* Halos qui dérivent derrière le haut de page */
.ez-hero::before{animation:ez-drift 14s ease-in-out infinite alternate}
@keyframes ez-drift{from{transform:translate3d(-3%,0,0) scale(1)}to{transform:translate3d(4%,3%,0) scale(1.08)}}

/* Téléphone qui flotte, avec un halo qui respire */
.ez-float{position:relative;animation:ez-float 6s ease-in-out infinite}
.ez-float::before{content:"";position:absolute;inset:8% -12%;background:radial-gradient(closest-side,rgba(34,211,238,.35),rgba(99,102,241,.18) 55%,transparent);filter:blur(30px);z-index:-1;animation:ez-glow 4s ease-in-out infinite alternate}
@keyframes ez-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes ez-glow{from{opacity:.55;transform:scale(.95)}to{opacity:1;transform:scale(1.05)}}
.ez-hero .ez-float .phone{transform:none}

/* Courbe d'égaliseur qui se dessine + barres de spectre */
.ez-eq{position:absolute;left:0;right:0;bottom:0;height:200px;pointer-events:none;z-index:0;opacity:.9}
.ez-eq svg{width:100%;height:100%}
.ez-eq path{fill:none;stroke:url(#ez-g);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1600;stroke-dashoffset:1600;animation:ez-draw 3.2s .4s cubic-bezier(.6,0,.2,1) forwards;filter:drop-shadow(0 0 6px rgba(34,211,238,.6))}
@keyframes ez-draw{to{stroke-dashoffset:0}}
.ez-bars{position:absolute;left:0;right:0;bottom:0;height:120px;display:flex;align-items:flex-end;gap:5px;padding:0 20px;opacity:.22;-webkit-mask-image:linear-gradient(to top,#000,transparent);mask-image:linear-gradient(to top,#000,transparent)}
.ez-bars i{flex:1;border-radius:3px 3px 0 0;background:var(--grad);height:30%;transform-origin:bottom;animation:ez-bar 1.6s ease-in-out infinite alternate}
@keyframes ez-bar{from{transform:scaleY(.35)}to{transform:scaleY(1.6)}}
.ez-hero__grid{z-index:1}

/* Apparition au défilement */
.ez-reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.ez-reveal.is-in{opacity:1;transform:none}
.steps .step:nth-child(2),.price div:nth-child(2),.fit div:nth-child(2){transition-delay:.12s}
.steps .step:nth-child(3),.price div:nth-child(3){transition-delay:.24s}

/* Les écrans des fonctions glissent légèrement selon le défilement (piloté en JS) */
.feature .phone{transition:transform .2s linear;will-change:transform}

/* Petits retours au survol */
.step,.price div,.fit div{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.step:hover,.price div:hover,.fit div:hover{transform:translateY(-4px);border-color:rgba(99,102,241,.55);box-shadow:0 14px 40px rgba(99,102,241,.18)}
.ez-cta a{transition:transform .25s ease}
.ez-cta a:hover{transform:translateY(-2px) scale(1.03)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .ez-reveal{opacity:1;transform:none}
  .ez-eq path{stroke-dashoffset:0}
}