/* ============================================================
   PPC ADULTE — Home / Landing page CSS
   ============================================================ */

/* ── HERO ─────────────────────────────────────────────────── */
.hero { min-height:100vh; display:flex; align-items:center; padding:110px 28px 70px; position:relative; overflow:hidden; }
.hero__bg { position:absolute; inset:0; z-index:0; }
.hero__orb { position:absolute; border-radius:50%; filter:blur(100px); pointer-events:none; animation:orbFloat 10s ease-in-out infinite; }
.hero__orb--1 { width:700px; height:700px; top:-200px; right:-150px; background:radial-gradient(circle, rgba(201,150,90,.18), transparent 70%); animation-duration:12s; }
.hero__orb--2 { width:600px; height:600px; bottom:-150px; left:-100px; background:radial-gradient(circle, rgba(232,82,122,.12), transparent 70%); animation-delay:-4s; animation-duration:9s; }
.hero__orb--3 { width:400px; height:400px; top:45%; left:40%; background:radial-gradient(circle, rgba(155,127,212,.08), transparent 70%); animation-delay:-7s; animation-duration:14s; }
@keyframes orbFloat { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(25px,-30px) scale(1.06)} 66%{transform:translate(-15px,20px) scale(.94)} }
.hero__grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:80px 80px; mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black,transparent); }

.hero__content { position:relative; z-index:1; max-width:1160px; margin:0 auto; width:100%; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.hero__left { display:flex; flex-direction:column; gap:24px; }
.hero__badge { display:inline-flex; align-items:center; gap:8px; padding:7px 18px; border-radius:50px; background:rgba(201,150,90,.1); border:1px solid rgba(201,150,90,.3); color:var(--or-light); font-size:.78rem; font-weight:700; width:fit-content; animation:fadeInDown .5s ease-out; }
.hero__title { font-size:clamp(2.8rem,6vw,5.2rem); font-weight:900; color:var(--blanc); line-height:1.08; animation:fadeInDown .5s ease-out .1s both; }
.hero__title em { display:block; font-style:normal; background:var(--grad-hero); background-size:200% auto; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:shimmerBtn 5s linear infinite; }
.hero__sub { font-size:1.05rem; color:var(--texte-dim); line-height:1.75; max-width:460px; font-weight:300; animation:fadeInDown .5s ease-out .2s both; }
.hero__actions { display:flex; gap:10px; flex-wrap:wrap; animation:fadeInDown .5s ease-out .3s both; }
.hero__trust  { display:flex; gap:18px; flex-wrap:wrap; animation:fadeInDown .5s ease-out .4s both; }
.hero__trust-item { display:flex; align-items:center; gap:6px; font-size:.8rem; color:var(--texte-mute); font-weight:600; }
.hero__trust-item::before { content:'✓'; color:var(--vert); font-weight:800; }
@keyframes fadeInDown { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:translateY(0)} }

/* Cartes droite */
.hero__right { position:relative; height:500px; }
.hero__card { position:absolute; background:var(--surface); border:1px solid var(--bordure); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg); text-decoration:none; color:inherit; width:240px; }
.hero__card--a { top:0; left:10px; animation:cardFloat1 5s ease-in-out infinite; }
.hero__card--b { bottom:0; right:10px; animation:cardFloat2 5s ease-in-out infinite; animation-delay:-2.5s; }
@keyframes cardFloat1 { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-12px) rotate(-2deg)} }
@keyframes cardFloat2 { 0%,100%{transform:translateY(0) rotate(2deg)}  50%{transform:translateY(12px) rotate(2deg)} }

.hero-card__photo { height:160px; display:flex; align-items:center; justify-content:center; font-size:4rem; }
.hero-card__photo--a { background:linear-gradient(135deg,#1A0928,#2A1045); }
.hero-card__photo--b { background:linear-gradient(135deg,#0F0A1E,#1E0820); }
.hero-card__body { padding:14px; }
.hero-card__chip { display:inline-block; padding:2px 9px; border-radius:50px; font-size:.65rem; font-weight:700; letter-spacing:.06em; margin-bottom:8px; }
.hero-card__chip--or    { background:rgba(201,150,90,.15); color:var(--or-light); }
.hero-card__chip--rose  { background:rgba(232,82,122,.15); color:var(--rose-light); }
.hero-card__body h4 { font-family:var(--font-display); font-size:1.1rem; color:var(--texte); margin-bottom:5px; }
.hero-card__body p  { font-size:.75rem; color:var(--texte-dim); margin-bottom:12px; line-height:1.4; }
.hero-card__age  { font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--texte-mute); border-top:1px solid var(--bordure); padding-top:9px; }
.hero__connector { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:72px; height:72px; border-radius:50%; background:var(--surface); border:1px solid var(--bordure); display:flex; align-items:center; justify-content:center; font-size:1.5rem; z-index:10; box-shadow:var(--shadow-or); animation:connPulse 3s ease-in-out infinite; }
@keyframes connPulse { 0%,100%{box-shadow:0 0 30px var(--or-glow)} 50%{box-shadow:0 0 60px rgba(201,150,90,.5)} }

/* ── SECTIONS ─────────────────────────────────────────────── */
.section { padding:100px 0; position:relative; }
.section--alt { background:var(--nuit); }
.section-head { text-align:center; margin-bottom:60px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.section-head h2 { font-size:clamp(2rem,4vw,3.4rem); color:var(--blanc); }
.section-head p  { font-size:1rem; color:var(--texte-dim); max-width:500px; font-weight:300; }

/* ── COMMENT ÇA MARCHE ────────────────────────────────────── */
.steps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--bordure); }
.step-card { padding:36px 28px; background:var(--surface); display:flex; flex-direction:column; gap:14px; position:relative; }
.step-card__num { font-family:var(--font-display); font-size:3rem; font-weight:900; color:var(--surface3); line-height:1; }
.step-card__icon { font-size:2rem; }
.step-card h3 { font-size:1rem; }
.step-card p  { font-size:.85rem; color:var(--texte-dim); line-height:1.65; }
.step-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--grad-or); transform:scaleX(0); transform-origin:left; transition:transform .4s; }
.step-card:hover::after { transform:scaleX(1); }

/* ── FEATURES BENTO ───────────────────────────────────────── */
.features-bento { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.feat-card { background:var(--surface); border:1px solid var(--bordure); border-radius:var(--radius); padding:28px; display:flex; flex-direction:column; gap:12px; transition:border-color .3s, transform .3s; position:relative; overflow:hidden; }
.feat-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(201,150,90,.06),transparent); opacity:0; transition:opacity .4s; }
.feat-card:hover { border-color:rgba(201,150,90,.3); transform:translateY(-4px); }
.feat-card:hover::before { opacity:1; }
.feat-card--wide { grid-column:span 2; }
.feat-card__icon { font-size:2.2rem; }
.feat-card h3    { font-size:1rem; color:var(--texte); }
.feat-card p     { font-size:.85rem; color:var(--texte-dim); line-height:1.65; }
.feat-card__big-num { font-family:var(--font-display); font-size:4rem; font-weight:900; color:var(--or-light); line-height:1; }
.feat-card__premium-tag { display:inline-flex; align-items:center; gap:4px; font-size:.68rem; font-weight:700; color:var(--or); background:rgba(201,150,90,.1); padding:2px 8px; border-radius:20px; width:fit-content; margin-top:4px; }

/* ── SÉCURITÉ ─────────────────────────────────────────────── */
.security-layout { display:grid; grid-template-columns:1fr 1.1fr; gap:60px; align-items:center; }
.security-left h2 { font-size:clamp(1.8rem,3.5vw,3rem); color:var(--blanc); margin:14px 0 16px; }
.security-left p  { font-size:.95rem; color:var(--texte-dim); line-height:1.8; margin-bottom:24px; font-weight:300; }
.security-badge { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:var(--radius-sm); background:rgba(52,211,153,.08); border:1px solid rgba(52,211,153,.2); color:var(--vert); font-size:.85rem; font-weight:700; }
.security-items { display:flex; flex-direction:column; gap:3px; }
.security-item { display:flex; gap:16px; padding:18px 20px; background:var(--surface); border:1px solid var(--bordure); border-radius:var(--radius-sm); transition:border-color .3s, transform .3s; }
.security-item:hover { border-color:rgba(201,150,90,.22); transform:translateX(4px); }
.security-item__icon { width:40px; height:40px; border-radius:12px; flex-shrink:0; background:rgba(201,150,90,.08); border:1px solid rgba(201,150,90,.12); display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.security-item__text h4 { font-size:.88rem; margin-bottom:4px; }
.security-item__text p  { font-size:.8rem; color:var(--texte-dim); line-height:1.6; }

/* ── PREMIUM SECTION ──────────────────────────────────────── */
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--bordure); }
.pricing-card { padding:44px 32px; background:var(--surface); display:flex; flex-direction:column; gap:20px; position:relative; }
.pricing-card--featured { background:linear-gradient(160deg,#1A1020,#150E20); border-left:1px solid rgba(201,150,90,.15); border-right:1px solid rgba(201,150,90,.15); }
.pricing-card__badge { position:absolute; top:0; left:50%; transform:translate(-50%,-50%); padding:4px 18px; border-radius:50px; background:var(--grad-or); color:var(--noir); font-size:.65rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; box-shadow:var(--shadow-or); }
.pricing-card__name   { font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--texte-mute); }
.pricing-card--featured .pricing-card__name { color:var(--or); }
.pricing-card__price  { font-family:var(--font-display); font-size:3.6rem; font-weight:900; color:var(--blanc); line-height:1; }
.pricing-card__price sup  { font-size:1.4rem; vertical-align:super; }
.pricing-card__price span { font-size:1.2rem; font-weight:400; color:var(--texte-dim); }
.pricing-card__period { font-size:.8rem; color:var(--texte-mute); margin-top:-12px; }
.pricing-card--featured .pricing-card__period { color:var(--or-light); font-weight:600; }
.pricing-card__features { list-style:none; display:flex; flex-direction:column; gap:9px; flex:1; }
.pricing-card__features li { display:flex; align-items:center; gap:9px; font-size:.85rem; color:var(--texte-dim); }
.check     { width:16px; height:16px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:.6rem; }
.check--ok { background:rgba(201,150,90,.15); color:var(--or); }
.check--no { background:rgba(255,255,255,.05); color:var(--texte-mute); }
.pricing-card .btn { width:100%; }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq-list { display:flex; flex-direction:column; gap:3px; max-width:760px; margin:0 auto; }
.faq-item { background:var(--surface); border:1px solid var(--bordure); border-radius:var(--radius-sm); overflow:hidden; transition:border-color .3s; }
.faq-item:hover { border-color:rgba(201,150,90,.22); }
.faq-item summary { padding:18px 22px; cursor:pointer; font-weight:700; font-size:.9rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'+'; font-size:1.3rem; color:var(--or); flex-shrink:0; transition:transform .3s; }
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-item[open] summary { color:var(--or-light); }
.faq-item p { padding:0 22px 18px; font-size:.875rem; color:var(--texte-dim); line-height:1.75; }
.faq-item p a { color:var(--or-light); }

/* ── CTA FINAL ────────────────────────────────────────────── */
.cta-section { text-align:center; padding:100px 0 80px; position:relative; overflow:hidden; }
.cta-section__bg { position:absolute; inset:0; background:radial-gradient(ellipse 60% 70% at 50% 50%,rgba(201,150,90,.07),transparent 70%); }
.cta-section__content { position:relative; z-index:1; }
.cta-section__title { font-size:clamp(2.4rem,5vw,4.2rem); color:var(--blanc); margin-bottom:16px; line-height:1.1; }
.cta-section__sub   { font-size:1rem; color:var(--texte-dim); margin-bottom:36px; font-weight:300; }
.cta-section__actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.cta-section__note  { margin-top:16px; font-size:.78rem; color:var(--texte-mute); }

@media (max-width:1000px) {
  .hero__content { grid-template-columns:1fr; }
  .hero__right   { display:none; }
  .steps-grid    { grid-template-columns:repeat(2,1fr); }
  .features-bento{ grid-template-columns:1fr 1fr; }
  .feat-card--wide { grid-column:span 1; }
  .security-layout { grid-template-columns:1fr; gap:40px; }
  .pricing-grid  { grid-template-columns:1fr; max-width:420px; margin:0 auto; }
}
@media (max-width:640px) {
  .section { padding:72px 0; }
  .steps-grid    { grid-template-columns:1fr; }
  .features-bento{ grid-template-columns:1fr; }
  .cta-section__actions { flex-direction:column; align-items:center; }
}