/* Flixy — grande page d'accueil (sous la bannière) */

/* Menu du haut centré (ordinateur) ; menu déroulant (mobile) */
.land-burger{display:none}
@media (max-width:900px){
  .hero-nav .land-burger{display:grid;place-items:center;width:40px;height:40px;border:0;background:none;color:var(--text);border-radius:50%;margin-left:auto;margin-right:6px;cursor:pointer}
  .land-burger svg{width:22px;height:22px}
  .hero-nav{flex-wrap:wrap}
  .hero-nav.open .land-links{display:flex;flex-direction:column;order:5;flex:1 1 100%;margin:8px 0 4px;gap:2px}
  .hero-nav.open .land-links a{padding:12px 10px;font-size:16px;border-radius:12px}
}
@media (min-width:901px){
  .hero-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
  .hero-nav > .logo{justify-self:start}
  .hero-nav > :last-child{grid-column:3;justify-self:end}
  .hero-nav .land-links{margin:0;justify-self:center}
}

.landing-x{width:100%;text-align:left}
.landing-x h2{font-size:clamp(26px,3.4vw,42px);line-height:1.1;letter-spacing:-.03em;margin:0 0 12px;text-wrap:balance}
.landing-x h3{letter-spacing:-.01em}
.lx-sec{padding-top:72px;padding-bottom:72px}
.lx-sec.alt{background:linear-gradient(180deg,#FFF5FA,#F8F2FF);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lx-head{text-align:center;max-width:760px;margin:0 auto 40px}
.lx-head .sub,.landing-x .sub{color:var(--muted);font-size:clamp(15px,1.3vw,18px);margin:0 auto;max-width:60ch}
.landing-x .eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--accent-text);background:var(--accent-soft);border-radius:999px;padding:5px 13px;margin-bottom:14px}
.landing-x .eyebrow.light{background:rgba(255,255,255,.14);color:#fff}
.lx-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.lx-cta.left{justify-content:flex-start;margin-top:26px}
.art{display:block;width:100%;height:auto;border-radius:20px}

/* Boutons supplémentaires */
.landing-x .btn{padding:12px 22px;font-size:15px}
.landing-x .btn.btn-sm{padding:8px 14px;font-size:13px}
.btn-white{background:#fff;color:var(--accent-text);border:0;box-shadow:0 10px 24px -14px rgba(0,0,0,.45)}
.btn-white:hover{background:#FFF0F7}
.btn-outline-white{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.7)}
.btn-outline-white:hover{background:rgba(255,255,255,.12)}
.landing-x .btn svg{width:18px;height:18px}
button.try{background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:14px;font-weight:500;color:var(--accent-text)}
button.try:hover{text-decoration:underline}
.link{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}

/* Réassurance + bandeau défilant */
.trust{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;padding:22px 0 0;color:var(--muted);font-size:14px}
.trust span{display:inline-flex;align-items:center;gap:7px}
.trust svg{width:17px;height:17px;color:#1FA463}
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;padding:14px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;gap:12px;width:max-content;animation:mq 60s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-track span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:15px;font-weight:500;color:var(--text);padding:8px 16px;border-radius:999px;background:var(--ink-3)}
.mq-track svg{width:14px;height:14px;color:var(--amber)}
@keyframes mq{to{transform:translateX(-50%)}}

/* Trois façons de créer */
.modes3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mcard{background:#fff;border:1px solid var(--line);border-radius:26px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.mcard:hover{transform:translateY(-4px);box-shadow:0 30px 60px -36px rgba(120,40,90,.45)}
.mcard .art{border-radius:0}
.mc-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.mc-body h3{display:flex;align-items:center;gap:9px;font-size:20px;margin:0}
.mc-body h3 svg{width:22px;height:22px;color:var(--accent-text)}
.mc-body p{color:var(--muted);margin:0 0 6px;flex:1}
.mc-body .btn{align-self:flex-start}

/* Étapes */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.st{background:#fff;border:1px solid var(--line);border-radius:24px;padding:16px 20px 24px;position:relative}
.st-art{margin:0 -4px 6px}
.st > b{position:absolute;top:16px;left:18px;width:30px;height:30px;border-radius:50%;background:var(--amber);color:#fff;display:grid;place-items:center;font-size:14px}
.st h3{font-size:18px;margin:4px 0 6px}
.st p{color:var(--muted);margin:0;font-size:14.5px}

/* Fonctionnalités détaillées */
.fx{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;padding:34px 0}
.fx.rev .fx-art{order:2}
.fx-art{border-radius:28px;box-shadow:0 40px 80px -50px rgba(120,40,90,.55);overflow:hidden;border:1px solid var(--line)}
.fx-art .art{border-radius:0}
.fx-txt h3{font-size:clamp(22px,2.4vw,30px);line-height:1.15;margin:12px 0 10px;letter-spacing:-.02em}
.fx-txt > p{color:var(--muted);font-size:16px;margin:0 0 16px}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;padding:5px 12px;border-radius:999px;background:var(--ink-3);color:var(--text)}
.tag svg{width:15px;height:15px;color:var(--accent-text)}
.tag.hot{background:linear-gradient(90deg,#FF80BF,#B98BFF);color:#fff}
.tag.hot svg{color:#fff}
.ticks{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:9px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.ticks svg{flex:none;width:20px;height:20px;padding:3px;border-radius:50%;background:var(--accent-soft);color:var(--accent-text);margin-top:1px}
.fx-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}

/* Chiffres */
.lx-stats{background:#1E1A24;color:#fff;padding:44px 0}
.stats-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;text-align:center}
.stat b{display:block;font-size:clamp(30px,3.4vw,44px);letter-spacing:-.03em;background:linear-gradient(90deg,#FF9ACB,#C9A6FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{color:#CFC6D8;font-size:14px}

/* Réseaux sociaux */
.lx-social{background:radial-gradient(120% 90% at 0% 0%,#5B2A86 0%,transparent 55%),radial-gradient(120% 90% at 100% 100%,#C2457A 0%,transparent 55%),#2A1838;color:#fff;padding:80px 0 40px;overflow:hidden}
.social-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.social-txt h2{color:#fff}
.social-txt > p{color:#E6DCEF;font-size:16.5px;margin:0 0 22px;max-width:52ch}
.fmt-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fmt-list button,.fmt-list a{text-decoration:none;display:flex;align-items:center;gap:6px;text-align:left;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:10px 12px;color:#fff;cursor:pointer;font:inherit;transition:background .2s,transform .2s}
.fmt-list button:hover,.fmt-list a:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
.fmt-list button > span:last-child,.fmt-list a > span:last-child{display:flex;flex-direction:column;margin-left:6px;min-width:0}
.fmt-list b{font-size:14px;font-weight:500}
.fmt-list em{font-style:normal;font-size:12.5px;color:#D9CDE5}
.brand-ic{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;box-shadow:0 4px 12px -4px rgba(0,0,0,.4)}
.brand-ic svg{width:17px;height:17px}
.brand-ic.big{width:56px;height:56px;border-radius:17px}
.brand-ic.big svg{width:30px;height:30px}
.orbit{position:relative;aspect-ratio:1;width:min(460px,100%);justify-self:center}
.orbit::before,.orbit::after{content:"";position:absolute;inset:6%;border-radius:50%;border:1.5px dashed rgba(255,255,255,.18)}
.orbit::after{inset:24%;border-style:solid;border-color:rgba(255,255,255,.08)}
.orbit-core{position:absolute;inset:27%;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 0 0 10px rgba(255,255,255,.06),0 30px 60px -20px rgba(0,0,0,.6);display:grid;place-items:center}
.orbit-core img{width:150%;max-width:none}
.orb{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px;
  transform:rotate(calc(var(--i) / var(--n) * 360deg)) translateX(calc(min(460px,100vw - 64px) * .44)) rotate(calc(var(--i) / var(--n) * -360deg));
  animation:orbit 40s linear infinite}
.orb .brand-ic{animation:floaty 3s ease-in-out infinite;animation-delay:calc(var(--i) * -.3s)}
@keyframes orbit{from{transform:rotate(calc(var(--i) / var(--n) * 360deg)) translateX(calc(min(460px,100vw - 64px) * .44)) rotate(calc(var(--i) / var(--n) * -360deg))}
  to{transform:rotate(calc(var(--i) / var(--n) * 360deg + 360deg)) translateX(calc(min(460px,100vw - 64px) * .44)) rotate(calc(var(--i) / var(--n) * -360deg - 360deg))}}
@keyframes floaty{50%{transform:translateY(-6px) scale(1.06)}}
.net-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:46px}
.net-chip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:5px 14px 5px 5px;font-size:13.5px}
.net-chip .brand-ic{width:26px;height:26px;border-radius:50%}
.net-chip .brand-ic svg{width:14px;height:14px}
.tm-note{color:#B9A9C9;font-size:11.5px;text-align:center;margin-top:22px}

/* Styles */
.styles-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.styles-art{border-radius:28px;overflow:hidden;border:1px solid var(--line);box-shadow:0 40px 80px -50px rgba(120,40,90,.55)}
.styles-art .art{border-radius:0}
.style-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:22px}
.style-tile{display:flex;flex-direction:column;gap:7px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px 6px 10px;cursor:pointer;font:inherit;font-size:12.5px;color:var(--text);transition:transform .2s,border-color .2s}
.style-tile:hover{transform:translateY(-3px);border-color:var(--amber)}
.style-tile i{display:block;width:100%;aspect-ratio:1;border-radius:11px;background-size:200% 200%;animation:sw 8s ease-in-out infinite alternate}
@keyframes sw{to{background-position:100% 100%}}

/* Formats / qualité, trio */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.dcard,.tcard{background:#fff;border:1px solid var(--line);border-radius:26px;padding:12px 12px 26px;display:flex;flex-direction:column;gap:8px}
.dcard h3,.tcard h3{font-size:20px;margin:10px 12px 0}
.dcard p,.tcard p{color:var(--muted);margin:0 12px 10px}
.dcard .btn{align-self:flex-start;margin-left:12px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tcard{background:linear-gradient(180deg,#fff,#FFF8FC)}

/* Inscription */
.join{margin:20px 0;border-radius:30px;padding:40px 44px;background:linear-gradient(120deg,#FF8CC5,#E0559B 55%,#9B5CF0);color:#fff;display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:center;position:relative;overflow:hidden}
.join::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.12)}
.join h2{color:#fff;font-size:clamp(24px,2.8vw,34px)}
.join .ticks li{font-size:15.5px}
.join .ticks svg{background:rgba(255,255,255,.25);color:#fff}
.join-cta{display:flex;flex-direction:column;gap:10px;align-items:stretch;position:relative;z-index:1}
.join-cta .btn{justify-content:center}

/* Pour qui */
.uses{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.use{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:8px;transition:transform .2s,box-shadow .2s}
.use:hover{transform:translateY(-3px);box-shadow:0 24px 50px -36px rgba(120,40,90,.5)}
.u-ic{width:46px;height:46px;border-radius:14px;background:var(--accent-soft);color:var(--accent-text);display:grid;place-items:center}
.u-ic svg{width:23px;height:23px}
.use h3{font-size:17px;margin:6px 0 0}
.use p{color:var(--muted);font-size:14.5px;margin:0}
.use blockquote{margin:4px 0;padding:10px 12px;border-radius:12px;background:var(--ink-3);font-size:13.5px;color:var(--text);flex:1}
.use .try{align-self:flex-start}

/* Idées */
.ideas{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.idea{display:flex;gap:10px;align-items:flex-start;text-align:left;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;cursor:pointer;font:inherit;font-size:14px;color:var(--text);transition:border-color .2s,transform .2s}
.idea:hover{border-color:var(--amber);transform:translateY(-2px)}
.idea svg{flex:none;width:20px;height:20px;color:var(--accent-text);margin-top:1px}

/* Téléphone */
.phone-wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.phone-art{border-radius:28px;overflow:hidden;border:1px solid var(--line)}
.phone-art .art{border-radius:0}
.howto{display:grid;gap:10px;margin-top:22px}
.howto div{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 16px;font-size:14px}
.howto b{min-width:64px}
.howto span{color:var(--muted)}

/* Avant / après */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px;margin:0 auto}
.vs-col{border-radius:24px;padding:24px 26px;border:1px solid var(--line);background:#fff}
.vs-col h3{margin:0 0 14px;font-size:19px}
.vs-col p{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;font-size:15px}
.vs-col svg{flex:none;width:20px;height:20px;padding:3px;border-radius:50%}
.vs-col.old{color:var(--muted)}
.vs-col.old svg{background:#F3EEF5;color:#9C94A6}
.vs-col.new{border:2px solid var(--amber);box-shadow:0 30px 60px -40px rgba(199,46,120,.5)}
.vs-col.new svg{background:var(--accent-soft);color:var(--accent-text)}

/* Tarifs (complément) */
.landing-x .price{position:relative}
.ribbon{position:absolute;top:-12px;right:20px;background:var(--amber);color:#fff;font-size:12px;font-weight:500;padding:4px 12px;border-radius:999px}
.landing-x .faq details{text-align:left}

/* Appel final */
.final{margin:56px 0 70px;border-radius:34px;padding:56px 24px;text-align:center;background:linear-gradient(135deg,#FF9ACB,#FF5FA8 50%,#9B5CF0);color:#fff;position:relative;overflow:hidden}
.final h2{color:#fff;max-width:20ch;margin:0 auto 10px}
.final p{opacity:.95;margin:0 0 26px;font-size:16px}
.final-art{width:min(260px,60%);margin:-10px auto 14px;display:block;border-radius:22px;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.final-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.final-sub{margin:20px 0 0 !important;font-size:14px !important}

/* Mise en avant du champ quand on arrive d'un bouton */
#heroForm.flash .screen{animation:flash 1.2s ease-out}
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(255,128,191,.7)}100%{box-shadow:0 0 0 18px rgba(255,128,191,0)}}

/* Apparition au défilement */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.modes3 .rv:nth-child(2),.steps3 .rv:nth-child(2),.trio .rv:nth-child(2),.duo .rv:nth-child(2){transition-delay:.1s}
.modes3 .rv:nth-child(3),.steps3 .rv:nth-child(3),.trio .rv:nth-child(3){transition-delay:.2s}
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none;transition:none}
  .mq-track,.orb,.orb .brand-ic,.style-tile i{animation:none}
}

@media (max-width:1000px){
  .stats-grid{grid-template-columns:repeat(3,1fr);row-gap:26px}
  .style-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:900px){
  .lx-sec{padding-top:48px;padding-bottom:48px}
  .lx-head{margin-bottom:26px}
  .modes3,.steps3,.trio,.duo,.uses,.ideas{grid-template-columns:1fr}
  .fx,.styles-wrap,.phone-wrap,.social-grid{grid-template-columns:1fr;gap:24px}
  .fx.rev .fx-art{order:0}
  .fx{padding:22px 0}
  .fmt-list{grid-template-columns:1fr}
  .orbit{width:min(340px,100%)}
  .orb,.orb .brand-ic.big{width:44px;height:44px}
  .orb{margin:-22px;transform:rotate(calc(var(--i) / var(--n) * 360deg)) translateX(min(150px,38vw)) rotate(calc(var(--i) / var(--n) * -360deg));animation-name:orbitm}
  .brand-ic.big{border-radius:13px}
  .brand-ic.big svg{width:24px;height:24px}
  @keyframes orbitm{from{transform:rotate(calc(var(--i) / var(--n) * 360deg)) translateX(min(150px,38vw)) rotate(calc(var(--i) / var(--n) * -360deg))}
    to{transform:rotate(calc(var(--i) / var(--n) * 360deg + 360deg)) translateX(min(150px,38vw)) rotate(calc(var(--i) / var(--n) * -360deg - 360deg))}}
  .lx-social{padding:56px 0 30px}
  .style-grid{grid-template-columns:repeat(3,1fr)}
  .join{grid-template-columns:1fr;padding:30px 22px}
  .vs{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .final{padding:40px 18px;margin:36px 0 50px}
  .final-cta .btn{flex:1 1 100%;justify-content:center}
  .lx-cta .btn{flex:1 1 auto;justify-content:center}
  .trust{font-size:13px;gap:6px 14px}
}
body.kb .hero .trust{display:none}

/* Pages publiques : sommaire, styles en liens */
.jump{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:26px}
.jump a{font-size:13px;text-decoration:none;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 13px}
.jump a:hover{color:var(--accent-text);border-color:var(--amber)}
a.style-tile{text-decoration:none}
[id]{scroll-margin-top:80px}

/* Bandeau réseaux en bas des pages publiques */
.promo-band{background:radial-gradient(100% 120% at 0% 0%,#5B2A86 0%,transparent 60%),radial-gradient(100% 120% at 100% 100%,#C2457A 0%,transparent 60%),#2A1838;color:#fff;padding:48px 0;margin-top:30px}
.promo-in{display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:center}
.promo-nets{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.promo-nets .brand-ic{animation:floaty 3s ease-in-out infinite}
.promo-nets .brand-ic:nth-child(2n){animation-delay:-1s}.promo-nets .brand-ic:nth-child(3n){animation-delay:-2s}
.promo-band h2{color:#fff;font-size:clamp(22px,2.6vw,32px);margin:0 0 8px;letter-spacing:-.02em}
.promo-band p{color:#E6DCEF;margin:0}
.promo-cta{display:flex;flex-direction:column;gap:10px}
.promo-cta .btn{justify-content:center;padding:12px 20px}
@media (max-width:900px){ .promo-in{grid-template-columns:1fr} }
@media (prefers-reduced-motion: reduce){ .promo-nets .brand-ic{animation:none} }