/* =========================================================
   AIKLORE - sections.css
   Sections heritage Revolut : trust, marquee, features, carrousel, split, pockets, steps, salary, plans, footer.
   Ordre de chargement : apres layout.css (NE PAS reordonner : cascade CSS).
   ========================================================= */
/* ---------- trust strip (stats / réassurance) ---------- */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;align-items:start;
  background:var(--dark);color:#fff;padding:clamp(46px,7.5vh,76px) var(--pad);position:relative;overflow:hidden;}
.trust::before{content:"";position:absolute;width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle,rgba(73,79,223,.12),transparent 70%);bottom:-20%;left:-10%;pointer-events:none;}
.stat{position:relative;z-index:1;}
.stat::before{content:"";display:block;width:40px;height:3px;background:var(--teal);border-radius:2px;margin-bottom:16px;}
.stat__num{font-family:var(--display);font-weight:500;font-size:clamp(34px,4.2vw,52px);line-height:1;
  letter-spacing:-2px;display:flex;align-items:baseline;}
.stat__suffix{font-size:.46em;color:var(--teal);margin-left:2px;}
.stat__label{margin-top:13px;font-size:15px;color:rgba(255,255,255,.72);max-width:320px;line-height:1.5;}
.stat__label strong{color:#fff;font-weight:600;}

/* ---------- bandeau réassurance : marquee léger (transition hero → contenu) ---------- */
.marquee{position:relative;overflow:hidden;padding:18px 0;background:transparent;
  background-image:linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(188,204,255,.09) 24%, rgba(255,198,234,.08) 44%, rgba(198,255,231,.08) 64%, rgba(255,235,188,.07) 82%, rgba(255,255,255,0) 100%);
  background-size:230% 100%;background-position:0% 0;
  animation:marqueeNacre 16s ease-in-out infinite alternate;}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;}
.marquee::before{left:0;background:linear-gradient(90deg,#ffffff,rgba(255,255,255,0));}
.marquee::after{right:0;background:linear-gradient(270deg,#ffffff,rgba(255,255,255,0));}
.marquee__track{display:flex;align-items:center;width:max-content;animation:marqueeScroll 40s linear infinite;}
.marquee:hover .marquee__track{animation-play-state:paused;}
.marquee__item{font-family:var(--display);font-size:13.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;
  color:#787f87;white-space:nowrap;}
.marquee__sep{flex:none;width:4px;height:4px;border-radius:50%;background:rgba(16,24,32,.2);margin:0 32px;}
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marqueeNacre{from{background-position:0% 0;}to{background-position:100% 0;}}
@media (prefers-reduced-motion: reduce){
  .marquee{animation:none;}
  .marquee__track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;padding:0 var(--pad);row-gap:8px;}
  .marquee::before,.marquee::after{display:none;}
}

/* ---------- features grid ---------- */
.features h2{font-size:clamp(32px,4vw,48px);letter-spacing:-0.48px;margin-bottom:48px;max-width:760px;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #e6e6e8;border-left:1px solid #e6e6e8;}
.grid3 .cell{padding:40px 40px 48px;border-right:1px solid #e6e6e8;border-bottom:1px solid #e6e6e8;
  transition:background .35s var(--ease), transform .35s var(--ease);}
.grid3 .cell:hover{background:#fafafa;transform:translateY(-3px);}
.grid3 .cell svg{width:30px;height:30px;color:var(--dark);margin-bottom:20px;transition:transform .35s var(--ease),color .35s ease;}
.grid3 .cell:hover svg{transform:scale(1.12);color:var(--teal);}
.grid3 .cell h3{font-size:20px;line-height:1.25;letter-spacing:-0.2px;margin-bottom:12px;}
.grid3 .cell p{font-size:15px;color:var(--slate);line-height:1.5;}

/* ===== Carrousel d'automatisations : 9 cartes defilables, coins arrondis facon .mcard ===== */
/* la section Pockets « contient » le carrousel : pas de plein-écran ni de marge basse */
.section--with-carousel{min-height:auto;padding-bottom:0;}
.carousel{position:relative;padding:clamp(44px,6vh,76px) 0 var(--vpad);}
.carousel__viewport{overflow:hidden;}
.carousel__rail{display:flex;gap:22px;padding:8px var(--pad) 26px;will-change:transform;}
.ccard{flex:0 0 min(340px,78vw);background:var(--white);border:1px solid #e6e6e8;
  border-radius:22px;padding:34px 30px 36px;display:flex;flex-direction:column;
  transition:transform .35s var(--ease),border-color .35s ease,box-shadow .35s var(--ease);}
.ccard:hover{transform:translateY(-6px);border-color:rgba(0,168,126,.45);box-shadow:0 18px 40px rgba(16,24,32,.08);}
.ccard svg{width:30px;height:30px;color:var(--dark);margin-bottom:20px;transition:transform .35s var(--ease),color .35s ease;}
.ccard:hover svg{transform:scale(1.12);color:var(--teal);}
.ccard h3{font-size:20px;line-height:1.25;letter-spacing:-0.2px;margin-bottom:12px;}
.ccard p{font-size:15px;color:var(--slate);line-height:1.5;}
.carousel__nav{display:flex;gap:14px;justify-content:flex-end;margin:6px var(--pad) 0;}
.carousel__btn{width:56px;height:56px;border-radius:9999px;border:none;background:var(--dark);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:transform .2s var(--ease),opacity .2s ease,background .25s ease;}
.carousel__btn:hover{transform:translateY(-2px);background:#000;}
.carousel__btn:disabled{opacity:.32;cursor:default;transform:none;}
.carousel__btn svg{width:22px;height:22px;}

/* ---------- generic dark feature (split) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.split h2{font-size:clamp(32px,4vw,48px);letter-spacing:-0.48px;margin-bottom:20px;}
.split p{font-size:17px;line-height:1.56;color:rgba(255,255,255,.75);margin-bottom:28px;max-width:460px;}
.split .visual{border-radius:20px;overflow:hidden;transition:transform .6s var(--ease);}
.split .visual:hover{transform:translateY(-6px) scale(1.01);}

/* ---------- pockets / split clair ---------- */
.pockets{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.pockets h2{font-size:clamp(32px,4vw,48px);letter-spacing:-0.48px;margin:6px 0 20px;}
.pockets p{font-size:16px;color:var(--slate);line-height:1.56;margin-bottom:28px;max-width:430px;}
.pockets .pill{gap:8px;}
.pockets .pill svg{width:18px;height:18px;transition:transform .3s var(--ease);}
.pockets .pill:hover svg{transform:translateY(3px);}
.phones{display:flex;justify-content:center;align-items:flex-end;gap:18px;width:100%;}
.phones img{border-radius:24px;transition:transform .5s var(--ease);}
.phones .p1{width:52%;max-width:300px;}
.phones .p2{width:47%;max-width:270px;margin-bottom:30px;}
.phones:hover .p1{transform:translateY(-10px) rotate(-1deg);}
.phones:hover .p2{transform:translateY(-4px) rotate(1.5deg);}
.dots{display:flex;gap:8px;justify-content:center;margin-top:28px;}
.dots i{width:8px;height:8px;border-radius:50%;background:#cfcfd4;display:block;}
.dots i.on{width:22px;border-radius:9999px;background:var(--dark);}

/* ---------- steps ---------- */
.steps h2{font-size:clamp(32px,4vw,48px);letter-spacing:-0.48px;margin-bottom:8px;}
.steps .top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:56px;flex-wrap:wrap;}
.steps-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.step .num{width:44px;height:44px;border-radius:9999px;border:2px solid var(--teal);color:var(--teal);
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:18px;margin-bottom:24px;
  transition:background .35s var(--ease),color .35s ease;}
.step:hover .num{background:var(--teal);color:#001a13;}
.step h3{font-size:24px;letter-spacing:-0.24px;margin-bottom:12px;}
.step p{font-size:16px;color:rgba(255,255,255,.7);line-height:1.56;max-width:460px;}

/* ---------- salary (climax CTA, bande claire) ---------- */
.salary{background:var(--white);color:var(--dark);text-align:center;padding:var(--vpad) var(--pad);
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;}
.salary h2{font-size:clamp(36px,5vw,64px);letter-spacing:-0.6px;margin-bottom:24px;max-width:14ch;}
.salary p{font-size:17px;color:var(--slate);max-width:680px;margin:0 auto 36px;line-height:1.5;}

/* ---------- plans / cartes sombres ---------- */
.plans .eyebrow{margin-bottom:40px;display:block;}
.plans-row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.plan{background:#202427;border-radius:20px;padding:24px;display:flex;flex-direction:column;min-height:300px;
  cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease);}
.plan:hover{transform:translateY(-8px);box-shadow:0 24px 48px rgba(0,0,0,.35);}
.plan .art{height:120px;border-radius:14px;margin-bottom:20px;}
.plan h2{font-size:22px;letter-spacing:-0.2px;}
.plan h3{font-family:var(--body);font-weight:600;font-size:15px;color:var(--muted);margin:4px 0 12px;}
.plan p{font-size:13px;color:rgba(255,255,255,.62);line-height:1.5;margin-bottom:18px;flex:1;}
.plan .arrow{width:36px;height:36px;border-radius:9999px;background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;transition:background .3s ease,transform .3s var(--ease);}
.plan:hover .arrow{background:var(--teal);transform:translateX(4px);}
.plan .arrow svg{width:18px;height:18px;}

/* ---------- footer ---------- */
footer{background:var(--dark);color:#fff;padding:80px var(--pad) 48px;position:relative;z-index:2;}
/* mascotte facon "coucou" : moitie basse cachee DERRIERE le footer, haut du corps qui depasse */
.foot-perso{position:absolute;left:clamp(30px,6vw,120px);--perso-h:clamp(420px,42vw,600px);height:var(--perso-h);width:auto;top:calc(var(--perso-h) * -0.5);clip-path:inset(0 0 50% 0);z-index:4;pointer-events:none;user-select:none;}
@media(max-width:1100px){ .foot-perso{display:none;} }
.foot-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:32px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.12);}
.foot-cols h4{font-family:var(--display);font-weight:500;font-size:16px;margin-bottom:18px;}
.foot-cols a{display:block;font-size:14px;color:rgba(255,255,255,.65);padding:6px 0;transition:color .2s,transform .2s var(--ease);}
.foot-cols a:hover{color:#fff;transform:translateX(3px);}
.socials{display:flex;gap:14px;margin-top:40px;}
.socials a{width:36px;height:36px;border-radius:9999px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:background .25s,transform .25s var(--ease);}
.socials a:hover{background:var(--teal);transform:translateY(-3px);}
.socials svg{width:18px;height:18px;}
.foot-legal{margin-top:32px;font-size:12px;color:rgba(255,255,255,.45);line-height:1.6;max-width:1000px;}
.foot-legal p{margin-bottom:12px;}
.copyright{margin-top:32px;font-size:13px;color:rgba(255,255,255,.55);text-align:center;}