/*! * Uriki — feuille de style du nouveau parcours * OpterIA · générée depuis les maquettes validées (build-css.py) * * Ne pas éditer à la main : régénérer via integration/build-css.py. * L'accent de couleur se pilote avec une classe sur : * .v-lithiase .v-mrc .v-sport */ :root{ /* charte IKI */ --prune:#7C2051; --prune-d:#5E1740; --prune-l:#A23A6E; --fuchsia:#D20E55; --petrole:#003745; --vert:#3E8E54; --vert-l:#A8D3AF; --or:#D98E0A; /* neutres */ --ink:#1A1320; --muted:#6A6070; --line:#ECE6EB; --bg:#FBF8FA; --card-bg:#FFFFFF; /* sémantique */ --vert-ok:#2E7D46; /* rayons & ombres */ --r-xl:32px; --r-lg:24px; --r-md:16px; --shadow-s:0 2px 8px rgba(124,32,81,.06); --shadow-m:0 14px 40px -12px rgba(124,32,81,.16); --shadow-l:0 30px 70px -20px rgba(124,32,81,.28); /* accent courant — surchargé par verticale (voir .v-*) */ --ac:#7C2051; --cta-end:var(--petrole); } /* Accent par verticale : classe à poser sur dans Elementor. Tout le reste de la feuille s'y adapte via var(--ac). */ .v-home {--ac:#7C2051; --cta-end:var(--petrole)} .v-lithiase{--ac:#0E5B6E; --cta-end:color-mix(in srgb,#0E5B6E 80%,#000)} .v-mrc {--ac:#3E8E54; --cta-end:color-mix(in srgb,#3E8E54 80%,#000)} .v-sport {--ac:#C9820A; --cta-end:color-mix(in srgb,#C9820A 80%,#000)} /* ── Base & reset ──────────────────────────────────────────── */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:'Outfit',system-ui,sans-serif; color:var(--ink); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; padding-bottom:0 } img{max-width:100%} :focus-visible{outline:3px solid var(--ac);outline-offset:3px;border-radius:8px} /* ── Mise en page ──────────────────────────────────────────── */ .wrap{max-width:1180px;margin:0 auto;padding:0 24px} section{padding:80px 0} .center{margin-left:auto;margin-right:auto;text-align:center} .center .eyebrow{justify-content:center} /* ── Typographie ───────────────────────────────────────────── */ h1,h2,h3{ line-height:1.13; letter-spacing:-.02em; font-weight:700; text-wrap:balance } .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ac) } .eyebrow::before{ content:""; width:22px; height:2px; border-radius:2px; background:var(--ac) } .s-head{max-width:660px;margin-bottom:48px} .s-head h2{font-size:clamp(1.8rem,3.2vw,2.5rem);margin:14px 0 14px} .s-head p{font-size:1.08rem;color:var(--muted)} .muted{color:var(--muted)} /* ── Boutons ───────────────────────────────────────────────── */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:inherit; font-size:1rem; font-weight:600; padding:15px 28px; border-radius:999px; border:0; cursor:pointer; text-decoration:none; transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s } .btn .ic{transition:transform .3s} .btn svg{width:19px;height:19px;flex:0 0 19px} .btn-primary{color:#fff;background:linear-gradient(135deg,var(--prune),var(--prune-d));box-shadow:0 10px 26px -8px rgba(124,32,81,.55)} .btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 38px -10px rgba(124,32,81,.65)} .btn-primary:hover .ic{transform:translateX(4px)} .btn-glass{ color:var(--ac); background:rgba(255,255,255,.55); backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%); border:1px solid color-mix(in srgb,var(--ac) 25%,transparent); box-shadow:var(--shadow-s) } .btn-glass:hover{transform:translateY(-3px);background:rgba(255,255,255,.85);box-shadow:var(--shadow-m)} .add{ width:100%; font-size:1.02rem; padding:16px 26px; margin-bottom:4px } .add svg{width:20px;height:20px} .btn-light{background:#fff;color:var(--prune)} .btn-light:hover{transform:translateY(-3px);box-shadow:0 20px 40px -10px rgba(0,0,0,.4)} .validate{width:100%;font-size:1rem;padding:16px 24px} .validate:disabled{ opacity:.45; cursor:not-allowed; transform:none!important; box-shadow:none } .btn-glass:hover .ic{transform:translateX(4px)} /* ── En-tête & navigation ──────────────────────────────────── */ header{ position:sticky; top:0; z-index:100; background:rgba(251,248,250,.72); backdrop-filter:blur(18px) saturate(180%); -webkit-backdrop-filter:blur(18px) saturate(180%); border-bottom:1px solid rgba(124,32,81,.07) } .nav{ display:flex; align-items:center; justify-content:space-between; height:74px } .logo{ display:flex; align-items:center; gap:11px; font-weight:800; font-size:1.32rem; letter-spacing:-.03em; color:var(--ink); text-decoration:none } .logo .dot{ width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,var(--prune),var(--fuchsia)); display:grid; place-items:center; box-shadow:0 6px 16px -4px rgba(210,14,85,.5) } .logo .dot svg{width:17px;height:17px} .logo img{ height:34px; width:auto; display:block; transition:opacity .2s } .logo:hover img{opacity:.75} .menu{display:flex;align-items:center;gap:28px} .menu a{ color:var(--ink); text-decoration:none; font-size:.94rem; font-weight:500; opacity:.82; position:relative; transition:opacity .2s,color .2s } .menu a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; border-radius:2px; background:var(--ac); transition:width .25s } .menu a:hover,.menu a[aria-current]{opacity:1;color:var(--ac)} .menu a:hover::after,.menu a[aria-current]::after{width:100%} .nav-right{display:flex;align-items:center;gap:14px} .lang{font-size:.85rem;font-weight:600;color:var(--muted)} .lang b{color:var(--prune)} .cart{ position:relative; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.6); backdrop-filter:blur(12px); border:1px solid rgba(124,32,81,.14); color:var(--prune); cursor:pointer; transition:transform .25s,box-shadow .25s } .cart:hover{transform:translateY(-2px);box-shadow:var(--shadow-m)} .cart svg{width:19px;height:19px;flex:0 0 19px} .cart .cnt{ position:absolute; top:-3px; right:-3px; min-width:19px; height:19px; border-radius:999px; background:var(--fuchsia); color:#fff; font-size:.68rem; font-weight:700; display:grid; place-items:center; padding:0 5px } .burger{display:none} .menu a:hover{opacity:1;color:var(--prune)} .menu a:hover::after{width:100%} .logos{ display:flex; justify-content:center; align-items:center; gap:40px; flex-wrap:wrap; opacity:.65 } .logos .lg{ font-weight:700; color:var(--muted); font-size:1.05rem; letter-spacing:.02em; display:flex; align-items:center; gap:8px } .logos .lg svg{width:22px;height:22px;opacity:.7} /* ── Fil d'Ariane & étapes ─────────────────────────────────── */ .crumb{ display:flex; gap:9px; align-items:center; font-size:.85rem; color:var(--muted); padding:22px 0 0 } .crumb a{color:var(--muted);text-decoration:none} .crumb a:hover{color:var(--ac)} .crumb b{color:var(--ink);font-weight:600} .stepper{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:26px 0 8px } .stp{ display:flex; align-items:center; gap:10px; font-size:.9rem; font-weight:600; color:var(--muted) } .stp .n{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:.8rem; background:var(--line); color:var(--muted); flex:0 0 28px } .stp.done .n{background:var(--ac);color:#fff} .stp.done{color:var(--ink)} .stp.now .n{background:var(--ink);color:#fff} .stp.now{color:var(--ink)} .stepper .sep{ width:26px; height:1.5px; background:var(--line); border-radius:2px; margin:0 4px } /* ── Accueil — héros ───────────────────────────────────────── */ .hero{position:relative;padding:78px 0 90px;overflow:hidden} .hero::before{ content:""; position:absolute; inset:0; z-index:-2; background: radial-gradient(60% 55% at 82% 18%,rgba(210,14,85,.10),transparent 60%), radial-gradient(55% 50% at 12% 78%,rgba(0,55,69,.08),transparent 60%) } .hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center } .hero h1{font-size:clamp(2.4rem,4.6vw,3.7rem);font-weight:800;margin:20px 0 18px} .hero h1 .hl{ background:linear-gradient(120deg,var(--prune),var(--fuchsia)); -webkit-background-clip:text; background-clip:text; color:transparent } .hero p.lead{ font-size:1.16rem; color:var(--muted); max-width:33ch; margin-bottom:30px } .hero-cta{display:flex;gap:14px;flex-wrap:wrap} .trust-mini{ display:flex; gap:26px; margin-top:34px; flex-wrap:wrap } .trust-mini div{ display:flex; align-items:center; gap:9px; font-size:.86rem; font-weight:500; color:var(--ink) } .trust-mini .ico{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:rgba(124,32,81,.08); color:var(--prune) } .trust-mini svg{width:16px;height:16px} .device{ position:relative; aspect-ratio:4/4.4; border-radius:var(--r-xl); background:#fff; box-shadow:var(--shadow-l); border:1px solid rgba(255,255,255,.8); display:grid; place-items:center; overflow:hidden } .device::before{ content:""; position:absolute; inset:0; background:radial-gradient(58% 48% at 50% 42%,rgba(210,14,85,.07),transparent 70%) } .prodshot{ position:relative; z-index:2; width:88%; height:auto; object-fit:contain } .badge-float{ position:absolute; display:flex; align-items:center; gap:10px; padding:11px 16px; border-radius:16px; font-size:.82rem; font-weight:600; background:rgba(255,255,255,.65); backdrop-filter:blur(16px) saturate(180%); -webkit-backdrop-filter:blur(16px) saturate(180%); border:1px solid rgba(255,255,255,.8); box-shadow:var(--shadow-m); z-index:3 } .badge-float .p{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:#fff } .badge-float svg{width:16px;height:16px} .bf-1{top:7%;left:4%;animation:float 5s ease-in-out infinite} .bf-2{bottom:8%;right:4%;animation:float 5s ease-in-out infinite .8s} .bf-1 .p{background:linear-gradient(135deg,var(--vert),#2e7a42)} .bf-2 .p{background:linear-gradient(135deg,var(--prune),var(--fuchsia))} /* ── Accueil — pour qui ────────────────────────────────────── */ .cardrow{display:grid;grid-template-columns:1fr 110px 110px;gap:14px} .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .card{ position:relative; background:var(--card-bg); border-radius:var(--r-lg); padding:34px 30px 30px; border:1px solid var(--line); box-shadow:var(--shadow-s); overflow:hidden; text-decoration:none; color:inherit; transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s; display:flex; flex-direction:column } .card::before{ content:""; position:absolute; top:0; left:0; right:0; height:5px; background:var(--ac) } .card::after{ content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .35s; background:radial-gradient(120% 90% at 50% -10%,color-mix(in srgb,var(--ac) 14%,transparent),transparent 70%) } .card:hover{transform:translateY(-8px);box-shadow:var(--shadow-l);border-color:color-mix(in srgb,var(--ac) 35%,var(--line))} .card:hover::after{opacity:1} .card-ic{ width:62px; height:62px; border-radius:18px; display:grid; place-items:center; margin-bottom:22px; color:#fff; background:linear-gradient(135deg,var(--ac),color-mix(in srgb,var(--ac) 65%,#000)); box-shadow:0 12px 26px -8px color-mix(in srgb,var(--ac) 70%,transparent); transition:transform .35s } .card:hover .card-ic{transform:scale(1.08) rotate(-4deg)} .card-ic svg{width:30px;height:30px} .card h3{font-size:1.32rem;margin-bottom:10px} .card p{ color:var(--muted); font-size:.98rem; flex:1; margin-bottom:22px } .card-link{ display:inline-flex; align-items:center; gap:9px; font-weight:600; color:var(--ac); font-size:.97rem } .card-link .ic{transition:transform .3s} .card:hover .card-link .ic{transform:translateX(5px)} .tag{ position:absolute; top:22px; right:22px; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ac); background:color-mix(in srgb,var(--ac) 12%,#fff); padding:5px 11px; border-radius:999px } /* ── Accueil — dispositif ──────────────────────────────────── */ .disp{ display:grid; grid-template-columns:.92fr 1.08fr; gap:56px; align-items:center } .disp-visual{ position:relative; aspect-ratio:1/1; border-radius:var(--r-xl); background:#fff; display:grid; place-items:center; box-shadow:var(--shadow-m); border:1px solid var(--line); overflow:hidden } .disp-visual::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 50% at 46% 40%,rgba(124,32,81,.06),transparent 70%) } .disp-main{ position:relative; z-index:1; width:92%; height:auto; object-fit:contain } .disp-inset{ position:absolute; z-index:3; right:5%; bottom:5%; width:33%; height:auto; border-radius:16px; border:1px solid var(--line); box-shadow:var(--shadow-m); background:#fff } .feat{ display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line) } .feat:last-child{border-bottom:0} .feat-ic{ flex:0 0 46px; width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:rgba(124,32,81,.07); color:var(--prune); transition:transform .3s,background .3s } .feat:hover .feat-ic{transform:scale(1.06);background:rgba(124,32,81,.13)} .feat-ic svg{width:22px;height:22px} .feat h4{font-size:1.06rem;font-weight:600;margin-bottom:2px} .feat p{font-size:.94rem;color:var(--muted)} .feat-hl{ border-bottom:0; margin-top:6px; padding:20px; border-radius:var(--r-md); background:linear-gradient(120deg,rgba(124,32,81,.06),rgba(210,14,85,.04)); border:1px solid rgba(124,32,81,.14) } .feat-hl .feat-ic{background:linear-gradient(135deg,var(--prune),var(--fuchsia));color:#fff;box-shadow:0 10px 22px -8px rgba(210,14,85,.55)} .feat-hl:hover .feat-ic{background:linear-gradient(135deg,var(--prune),var(--fuchsia))} .feat-hl h4{color:var(--prune)} /* ── Accueil — étapes & vidéo ──────────────────────────────── */ .steps-sec{background:linear-gradient(180deg,#fff,#FBF3F7);border-radius:40px;margin:0 12px} .schemas{display:grid;grid-template-columns:1fr 1fr;gap:22px} .sch{ margin:0; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:14px; box-shadow:var(--shadow-s); transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s } .sch:hover{transform:translateY(-5px);box-shadow:var(--shadow-m)} .sch img{ display:block; width:100%; height:auto; border-radius:12px } .video-wrap{ position:relative; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:16/8.4; background:linear-gradient(150deg,var(--petrole),#012b36); display:grid; place-items:center; box-shadow:var(--shadow-l); border:1px solid rgba(255,255,255,.1) } .video-wrap .poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0 } .video-wrap::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(0,45,56,.30),rgba(0,45,56,.62)) } .video-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:5 } .video-wrap .play{ position:relative; width:88px; height:88px; border-radius:50%; display:grid; place-items:center; cursor:pointer; z-index:2; background:rgba(255,255,255,.18); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.35); transition:transform .3s,background .3s } .video-wrap .play:hover{transform:scale(1.08);background:rgba(255,255,255,.3)} .video-wrap .play svg{ width:32px; height:32px; color:#fff; margin-left:5px } .video-wrap .play::after{ content:""; position:absolute; inset:-14px; border-radius:50%; border:1px solid rgba(255,255,255,.25); animation:pulse 2.4s ease-out infinite } .video-cap{ position:absolute; bottom:24px; left:28px; color:#fff; z-index:2 } .video-cap span{ font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#7FE3C0 } .video-cap h4{font-size:1.3rem;font-weight:600;margin-top:4px} /* ── Accueil — confiance ───────────────────────────────────── */ .trust-band{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap } .pill{ display:flex; align-items:center; gap:10px; padding:12px 22px; border-radius:999px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-s); font-weight:600; font-size:.92rem } .pill .ico{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; color:#fff } .pill svg{width:15px;height:15px} /* ── Produit — galerie ─────────────────────────────────────── */ .phero{ display:grid; grid-template-columns:1.02fr .98fr; gap:52px; align-items:start; padding:30px 0 76px } .gal{position:sticky;top:100px} .gal-main{ position:relative; aspect-ratio:1/1; border-radius:var(--r-xl); overflow:hidden; display:grid; place-items:center; border:1px solid var(--line); box-shadow:var(--shadow-l); background:#fff } .gal-main::before{ content:""; position:absolute; inset:0; background:radial-gradient(58% 48% at 50% 44%,color-mix(in srgb,var(--ac) 8%,transparent),transparent 70%) } #shot{ position:relative; z-index:2; width:95%; height:auto; object-fit:contain; transition:opacity .25s } #shot.fade{opacity:0} .gal-badge{ position:absolute; top:20px; left:20px; z-index:3; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--ac); padding:7px 14px; border-radius:999px; box-shadow:var(--shadow-m) } .thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:14px } .thumb{ aspect-ratio:1/1; border-radius:var(--r-md); border:1px solid var(--line); background:#fff; display:grid; place-items:center; cursor:pointer; padding:4px; transition:border-color .25s,transform .25s } .thumb img{width:100%;height:100%;object-fit:contain} .thumb:hover,.thumb.on{border-color:var(--ac);transform:translateY(-2px)} .thumb.on{box-shadow:0 0 0 1px color-mix(in srgb,var(--ac) 35%,transparent)} /* ── Produit — bloc achat ──────────────────────────────────── */ .buy .cat{ color:var(--ac); font-weight:600; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase } .buy h1{font-size:clamp(2rem,3.4vw,2.8rem);margin:14px 0 16px} .stars{ display:flex; align-items:center; gap:10px; font-size:.9rem; color:var(--muted); margin-bottom:20px } .stars .s{color:#E8A33D;letter-spacing:2px} .pitch{font-size:1.08rem;color:var(--muted);margin-bottom:26px} .price{ display:flex; align-items:baseline; gap:12px; margin-bottom:6px } .price .from-lbl{font-size:.95rem;color:var(--muted);font-weight:500} .price .now{ font-size:2.6rem; font-weight:800; letter-spacing:-.03em; color:var(--ink) } .price .was{font-size:1.15rem;color:var(--muted);text-decoration:line-through} .price .save{ font-size:.78rem; font-weight:700; color:#fff; background:var(--fuchsia); padding:5px 11px; border-radius:999px } .vat{font-size:.85rem;color:var(--muted);margin-bottom:26px} .opt{margin-bottom:20px} .opt label{ display:block; font-weight:600; font-size:.95rem; margin-bottom:9px } .opt label .hint{font-weight:400;color:var(--muted);font-size:.85rem} .sel{ width:100%; font-family:inherit; font-size:1rem; font-weight:500; color:var(--ink); padding:15px 18px; border-radius:var(--r-md); border:1.5px solid var(--line); background:#fff url("data:image/svg+xml;utf8,") no-repeat right 16px center/18px; appearance:none; cursor:pointer; transition:border-color .2s } .sel:hover,.sel:focus{border-color:var(--ac)} .qty-row{ display:flex; gap:14px; align-items:stretch; margin-bottom:16px } .qty{ display:flex; align-items:center; border:1.5px solid var(--line); border-radius:var(--r-md); background:#fff; overflow:hidden; flex:0 0 132px } .qty button{ width:44px; height:100%; border:0; background:none; font-size:1.3rem; font-weight:600; color:var(--ac); cursor:pointer; transition:background .2s } .qty button:hover{background:color-mix(in srgb,var(--ac) 8%,transparent)} .qty input{ width:44px; border:0; text-align:center; font-family:inherit; font-size:1.05rem; font-weight:700; color:var(--ink); background:none; font-variant-numeric:tabular-nums } .qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .reassure{ display:grid; gap:12px; margin-top:26px; padding-top:26px; border-top:1px solid var(--line) } .reassure div{ display:flex; align-items:center; gap:12px; font-size:.93rem; font-weight:500 } .reassure .ico{ flex:0 0 34px; width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:color-mix(in srgb,var(--ac) 10%,transparent); color:var(--ac) } .reassure svg{width:17px;height:17px} .opts{display:grid;gap:11px} .opts-empty{ padding:26px; text-align:center; color:var(--muted); font-size:.95rem; border:1.5px dashed var(--line); border-radius:var(--r-md); background:#fff } /* ── Produit — contenu ─────────────────────────────────────── */ .incl-sec{ background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--ac) 7%,#fff)); border-radius:40px; margin:0 12px; padding:64px 40px } .incl{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .inc{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 24px; box-shadow:var(--shadow-s); transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s } .inc:hover{transform:translateY(-6px);box-shadow:var(--shadow-m)} .inc .ico{ width:54px; height:54px; border-radius:16px; display:grid; place-items:center; color:#fff; margin-bottom:18px; background:linear-gradient(135deg,var(--ac),color-mix(in srgb,var(--ac) 62%,#000)); box-shadow:0 10px 22px -8px color-mix(in srgb,var(--ac) 70%,transparent) } .inc .ico svg{width:26px;height:26px} .inc h4{font-size:1.06rem;margin-bottom:6px} .inc p{font-size:.93rem;color:var(--muted)} .promise{ display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:stretch } .pcol{ border-radius:var(--r-lg); padding:34px 32px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-s) } .pcol.sol{background:linear-gradient(150deg,color-mix(in srgb,var(--ac) 10%,#fff),#fff);border-color:color-mix(in srgb,var(--ac) 28%,var(--line))} .pcol h3{ font-size:1.28rem; margin-bottom:18px; display:flex; align-items:center; gap:12px } .pcol h3 .ico{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center; flex:0 0 38px } .pcol.prob h3 .ico{background:rgba(106,96,112,.12);color:var(--muted)} .pcol.sol h3 .ico{background:var(--ac);color:#fff} .pcol h3 svg{width:19px;height:19px} .pcol li{ list-style:none; display:flex; gap:12px; padding:9px 0; font-size:.99rem; color:var(--muted) } .pcol li::before{ content:""; flex:0 0 7px; width:7px; height:7px; border-radius:50%; margin-top:10px; background:var(--muted); opacity:.4 } .pcol.sol li{color:var(--ink);font-weight:500} .pcol.sol li::before{background:var(--ac);opacity:1} .bio{display:grid;grid-template-columns:repeat(5,1fr);gap:14px} .bm{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:20px 16px; text-align:center; box-shadow:var(--shadow-s); transition:transform .3s,border-color .3s } .bm:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--ac) 40%,var(--line))} .bm .n{font-size:.95rem;font-weight:600} .bm .w{font-size:.78rem;color:var(--muted);margin-top:3px} .bm .dotx{ width:9px; height:9px; border-radius:50%; background:var(--ac); margin:0 auto 12px; box-shadow:0 0 0 5px color-mix(in srgb,var(--ac) 15%,transparent) } .bio-note{ text-align:center; margin-top:26px; font-size:.9rem; color:var(--muted) } .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:s } .step{text-align:center} .step-num{ counter-increment:s; width:74px; height:74px; border-radius:22px; margin:0 auto 20px; display:grid; place-items:center; position:relative; background:#fff; box-shadow:var(--shadow-m); border:1px solid var(--line); color:var(--ac); transition:transform .35s,box-shadow .35s } .step:hover .step-num{transform:translateY(-6px);box-shadow:var(--shadow-l)} .step-num svg{width:31px;height:31px} .step-num::after{ content:counter(s); position:absolute; top:-9px; right:-9px; width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,var(--ac),color-mix(in srgb,var(--ac) 58%,#000)); color:#fff; font-size:.82rem; font-weight:700; display:grid; place-items:center; box-shadow:0 6px 14px -4px color-mix(in srgb,var(--ac) 70%,transparent) } .step h4{font-size:1.06rem;margin-bottom:7px} .step p{font-size:.92rem;color:var(--muted)} .coach{ display:grid; grid-template-columns:.85fr 1.15fr; gap:52px; align-items:center } .coach-v{ aspect-ratio:1/1.08; overflow:hidden; border-radius:var(--r-xl); background:linear-gradient(160deg,color-mix(in srgb,var(--ac) 14%,#fff),#FBF3F7); display:grid; place-items:center; box-shadow:var(--shadow-m); border:1px solid #fff } .coach-v .ph{ display:flex; flex-direction:column; align-items:center; gap:14px; color:var(--ac); opacity:.55 } .coach-v .ph svg{width:74px;height:74px} .coach-v .ph span{font-size:.82rem;font-weight:600} .coach h2{font-size:clamp(1.8rem,3vw,2.4rem);margin:14px 0 20px} .coach p{color:var(--muted);font-size:1.05rem;margin-bottom:24px} .coach li{ list-style:none; display:flex; gap:13px; padding:11px 0; border-bottom:1px solid var(--line); font-weight:500 } .coach li:last-child{border-bottom:0} .coach li .ico{ flex:0 0 30px; width:30px; height:30px; border-radius:10px; display:grid; place-items:center; background:color-mix(in srgb,var(--ac) 12%,transparent); color:var(--ac) } .coach li svg{width:16px;height:16px} .testi-sec{ background:linear-gradient(135deg,var(--ac),color-mix(in srgb,var(--ac) 55%,#000)); border-radius:40px; margin:0 12px; padding:76px 40px; position:relative; overflow:hidden } .testi-sec::before{ content:""; position:absolute; inset:0; opacity:.35; background:radial-gradient(50% 80% at 15% 10%,rgba(255,255,255,.35),transparent 60%) } .testi{ position:relative; z-index:2; max-width:780px; margin:0 auto; text-align:center; color:#fff } .testi .mark{ font-size:4rem; line-height:1; opacity:.35; font-weight:800 } .testi p{ font-size:clamp(1.2rem,2.2vw,1.55rem); font-weight:500; line-height:1.5; margin:6px 0 22px } .testi .who{opacity:.8;font-size:.95rem;font-weight:600} .coach-v img{ width:100%; height:100%; object-fit:cover; display:block } .testi p .q{color:var(--prune);font-weight:700} /* ── Produit — FAQ ─────────────────────────────────────────── */ .faq{max-width:820px;margin:0 auto} details{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:12px; box-shadow:var(--shadow-s); overflow:hidden; transition:border-color .25s } details[open]{border-color:color-mix(in srgb,var(--ac) 32%,var(--line))} summary{ cursor:pointer; list-style:none; padding:20px 24px; font-weight:600; font-size:1.02rem; display:flex; justify-content:space-between; align-items:center; gap:16px } summary::-webkit-details-marker{display:none} summary::after{ content:"+"; font-size:1.5rem; font-weight:400; color:var(--ac); transition:transform .3s; line-height:1 } details[open] summary::after{transform:rotate(45deg)} details p{padding:0 24px 22px;color:var(--muted);font-size:.98rem} /* ── Produit — barre collante ──────────────────────────────── */ .sticky{ position:fixed; left:0; right:0; bottom:0; z-index:150; transform:translateY(110%); transition:transform .4s cubic-bezier(.2,.8,.2,1); background:rgba(255,255,255,.82); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); border-top:1px solid var(--line); box-shadow:0 -10px 40px -18px rgba(124,32,81,.35) } .sticky.on{transform:none} .sticky .in{ max-width:1180px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px } .sticky .who{ display:flex; align-items:center; gap:14px; min-width:0 } .sticky .mini{ width:48px; height:48px; border-radius:14px; flex:0 0 48px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--ac),color-mix(in srgb,var(--ac) 60%,#000)) } .sticky .mini svg{width:22px;height:22px} .sticky .t{ font-weight:700; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .sticky .p{color:var(--muted);font-size:.9rem} .sticky .p b{color:var(--ink);font-size:1.05rem} .sticky .btn{padding:14px 26px;white-space:nowrap} .toast{ position:fixed; top:90px; right:24px; z-index:300; display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-left:4px solid var(--ac); border-radius:14px; padding:14px 20px; box-shadow:var(--shadow-l); font-weight:600; transform:translateX(130%); transition:transform .45s cubic-bezier(.2,.8,.2,1) } .toast.on{transform:none} .toast .ico{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--ac); color:#fff } .toast svg{width:16px;height:16px} /* ── Diététiciens ──────────────────────────────────────────── */ .dhead{ display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center; padding:20px 0 44px } .dphoto{ width:132px; height:132px; border-radius:28px; object-fit:cover; border:3px solid #fff; box-shadow:var(--shadow-m) } .dhead h1{font-size:clamp(1.8rem,3.2vw,2.6rem);margin-bottom:8px} .dhead .role{ color:var(--ac); font-weight:600; font-size:.95rem; letter-spacing:.02em } .dhead .from{margin-top:14px;font-size:.95rem;color:var(--muted)} .dhead .from b{ color:var(--ink); font-size:1.35rem; font-weight:800; letter-spacing:-.02em } .dswitch{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-size:.88rem; font-weight:600; color:var(--ac); text-decoration:none } .dswitch:hover{text-decoration:underline} .dgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .dcard{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; text-align:center; box-shadow:var(--shadow-s); text-decoration:none; color:inherit; transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s } .dcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-l);border-color:color-mix(in srgb,var(--ac) 35%,var(--line))} .dcard img{ width:96px; height:96px; border-radius:50%; object-fit:cover; margin:0 auto 16px; display:block; border:3px solid #fff; box-shadow:var(--shadow-s) } .dcard .nm{font-weight:700;font-size:1.02rem;line-height:1.25} .dcard .rl{font-size:.83rem;color:var(--muted);margin-top:3px} .dcard .go{ margin-top:16px; display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:.9rem; color:var(--ac) } .dcard:hover .go .ic{transform:translateX(4px)} .dcard .go .ic{transition:transform .3s} .dnote{ text-align:center; margin-top:26px; font-size:.88rem; color:var(--muted) } .dcard .spec{ display:flex; flex-wrap:wrap; gap:5px; justify-content:center; margin-top:9px } .dcard .sp{ font-size:.72rem; font-weight:600; color:var(--ac); background:color-mix(in srgb,var(--ac) 10%,#fff); border:1px solid color-mix(in srgb,var(--ac) 20%,transparent); padding:3px 9px; border-radius:999px; white-space:nowrap } .dcard .city{ display:flex; align-items:center; justify-content:center; gap:5px; font-size:.8rem; color:var(--muted); margin-top:9px } .dcard .city svg{width:12px;height:12px;flex:0 0 12px} .dhead .dloc{ display:flex; align-items:center; gap:6px; margin-top:8px; font-size:.92rem; color:var(--muted) } .dhead .dloc svg{width:14px;height:14px;flex:0 0 14px} /* ── Configurateur ─────────────────────────────────────────── */ .conf{ display:grid; grid-template-columns:1.35fr .65fr; gap:38px; align-items:start; padding-bottom:90px } .block{margin-bottom:40px} .block-h{ display:flex; align-items:center; gap:14px; margin-bottom:20px } .block-h .n{ width:34px; height:34px; border-radius:11px; display:grid; place-items:center; font-weight:700; font-size:.95rem; background:var(--ac); color:#fff; flex:0 0 34px } .block-h h2{font-size:1.35rem} .block-h .sub{ font-size:.9rem; color:var(--muted); font-weight:400; margin-top:2px } .prog{display:grid;gap:14px} .pcard{ position:relative; display:block; background:#fff; border:1.5px solid var(--line); border-radius:var(--r-lg); padding:22px 24px 22px 60px; cursor:pointer; box-shadow:var(--shadow-s); transition:border-color .25s,box-shadow .25s,transform .25s } .pcard:hover{border-color:color-mix(in srgb,var(--ac) 45%,var(--line));transform:translateY(-2px)} .pcard input{position:absolute;opacity:0;pointer-events:none} .pcard .rd{ position:absolute; left:22px; top:26px; width:22px; height:22px; border-radius:50%; border:2px solid var(--line); transition:border-color .2s,background .2s } .pcard .rd::after{ content:""; position:absolute; inset:5px; border-radius:50%; background:#fff; transform:scale(0); transition:transform .2s } .pcard input:checked ~ .rd{border-color:var(--ac);background:var(--ac)} .pcard input:checked ~ .rd::after{transform:scale(1)} .pcard:has(input:checked){border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 14%,transparent),var(--shadow-m)} .pcard input:focus-visible ~ .rd{outline:3px solid var(--ac);outline-offset:3px} .pcard .top{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap } .pcard .nm{font-weight:700;font-size:1.1rem} .pcard .pr{ font-weight:800; font-size:1.3rem; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap } .pcard ul{margin-top:12px;display:grid;gap:5px} .pcard li{ list-style:none; display:flex; gap:9px; font-size:.93rem; color:var(--muted) } .pcard li svg{ width:15px; height:15px; flex:0 0 15px; margin-top:5px; color:var(--ac) } .pcard .best{ position:absolute; top:-11px; right:22px; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--fuchsia); padding:5px 12px; border-radius:999px; box-shadow:var(--shadow-s) } .ocard{ display:flex; align-items:center; gap:16px; background:#fff; border:1.5px solid var(--line); border-radius:var(--r-md); padding:16px 20px; cursor:pointer; transition:border-color .22s,transform .22s } .ocard:hover{border-color:color-mix(in srgb,var(--ac) 40%,var(--line));transform:translateY(-1px)} .ocard input{position:absolute;opacity:0;pointer-events:none} .ocard .cb{ width:22px; height:22px; border-radius:7px; border:2px solid var(--line); flex:0 0 22px; display:grid; place-items:center; transition:all .2s } .ocard .cb svg{ width:13px; height:13px; color:#fff; transform:scale(0); transition:transform .2s } .ocard:has(input:checked){border-color:var(--ac);background:color-mix(in srgb,var(--ac) 5%,#fff)} .ocard input:checked ~ .cb{background:var(--ac);border-color:var(--ac)} .ocard input:checked ~ .cb svg{transform:scale(1)} .ocard .txt{ flex:1; font-weight:500; font-size:.97rem; line-height:1.35 } .ocard .txt small{ display:block; color:var(--muted); font-weight:400; font-size:.84rem; margin-top:2px } .ocard .pr{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap} .recap{ position:sticky; top:100px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-m); overflow:hidden } .recap .rh{ padding:22px 24px 16px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:13px } .recap .rh img{ width:44px; height:44px; border-radius:13px; object-fit:cover } .recap .rh .t{font-weight:700;font-size:1.02rem;line-height:1.2} .recap .rh .s{font-size:.82rem;color:var(--muted)} .recap .rb{padding:18px 24px} .line{ display:flex; justify-content:space-between; gap:14px; padding:9px 0; font-size:.94rem } .line .l{color:var(--muted)} .line.main .l{color:var(--ink);font-weight:600} .line .v{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap} .line.none{color:var(--muted);font-style:italic;justify-content:flex-start} .rsep{height:1px;background:var(--line);margin:10px 0} .total{ display:flex; justify-content:space-between; align-items:baseline; padding:14px 0 4px } .total .l{font-weight:700;font-size:1.05rem} .total .v{ font-weight:800; font-size:1.75rem; letter-spacing:-.03em; font-variant-numeric:tabular-nums } .recap .rf{padding:6px 24px 24px} .recap .rr{ display:grid; gap:9px; padding:18px 24px 22px; border-top:1px solid var(--line); background:#FCFAFB } .recap .rr div{ display:flex; align-items:center; gap:10px; font-size:.86rem; color:var(--muted); font-weight:500 } .recap .rr .ico{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:color-mix(in srgb,var(--ac) 10%,transparent); color:var(--ac); flex:0 0 26px } .recap .rr svg{width:14px;height:14px} /* ── Panier ────────────────────────────────────────────────── */ .cart-box{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-s); overflow:hidden } .ci{ display:flex; gap:20px; padding:24px; border-bottom:1px solid var(--line); align-items:flex-start } .ci:last-child{border-bottom:0} .ci img{ width:74px; height:74px; border-radius:18px; object-fit:cover; flex:0 0 74px } .ci .ic{ width:74px; height:74px; border-radius:18px; flex:0 0 74px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--ac),color-mix(in srgb,var(--ac) 60%,#000)) } .ci .ic svg{width:30px;height:30px} .ci .body{flex:1;min-width:0} .ci .nm{font-weight:700;font-size:1.08rem;line-height:1.25} .ci .sub{color:var(--muted);font-size:.9rem;margin-top:3px} .ci .tags{ display:flex; gap:7px; flex-wrap:wrap; margin-top:10px } .tg{ font-size:.76rem; font-weight:600; color:var(--ac); background:color-mix(in srgb,var(--ac) 10%,#fff); border:1px solid color-mix(in srgb,var(--ac) 22%,transparent); padding:4px 10px; border-radius:999px } .ci .right{ display:flex; flex-direction:column; align-items:flex-end; gap:12px } .ci .pr{ font-weight:800; font-size:1.15rem; font-variant-numeric:tabular-nums; white-space:nowrap } .rm{ background:none; border:0; color:var(--muted); font-family:inherit; font-size:.85rem; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:5px; padding:4px; border-radius:8px; transition:color .2s } .rm:hover{color:var(--fuchsia)} .rm svg{width:14px;height:14px} .qty2{ display:flex; align-items:center; border:1.5px solid var(--line); border-radius:12px; overflow:hidden } .qty2 button{ width:34px; height:34px; border:0; background:none; font-size:1.1rem; font-weight:600; color:var(--ac); cursor:pointer } .qty2 button:hover{background:color-mix(in srgb,var(--ac) 8%,transparent)} .qty2 span{ width:34px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums } .subline{ padding:20px 24px; background:#FCFAFB; border-top:1px solid var(--line); display:flex; gap:12px; align-items:center; flex-wrap:wrap } .promo{ display:flex; gap:10px; flex:1; min-width:260px; flex-wrap:wrap } .promo input{ flex:1; font-family:inherit; font-size:.95rem; padding:13px 16px; border-radius:12px; border:1.5px solid var(--line); background:#fff } .promo input:focus{outline:none;border-color:var(--ac)} .promo button{ font-family:inherit; font-weight:600; font-size:.95rem; padding:13px 20px; border-radius:12px; border:1.5px solid var(--ac); background:#fff; color:var(--ac); cursor:pointer; transition:background .2s } .promo button:hover{background:color-mix(in srgb,var(--ac) 8%,transparent)} .promo-msg{font-size:.88rem;font-weight:600;width:100%} .promo-msg.ok{color:var(--vert-ok)} .promo-msg.ko{color:var(--fuchsia)} .empty{ text-align:center; padding:80px 24px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg) } .empty .ic{ width:78px; height:78px; border-radius:24px; margin:0 auto 22px; display:grid; place-items:center; background:color-mix(in srgb,var(--ac) 10%,transparent); color:var(--ac) } .empty .ic svg{width:34px;height:34px} .empty h2{font-size:1.5rem;margin-bottom:10px} .empty p{color:var(--muted);margin-bottom:26px} /* ── Commande ──────────────────────────────────────────────── */ .pagehead{padding:34px 0 10px} .pagehead h1{font-size:clamp(1.9rem,3.4vw,2.7rem)} .pagehead p{color:var(--muted);margin-top:8px} .cols{ display:grid; grid-template-columns:1.4fr .6fr; gap:38px; align-items:start; padding:34px 0 90px } .fcard{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-s); padding:28px; margin-bottom:22px } .fcard > h2{ font-size:1.2rem; margin-bottom:6px; display:flex; align-items:center; gap:13px } .fcard > h2 .n{ width:32px; height:32px; border-radius:10px; display:grid; place-items:center; font-size:.9rem; font-weight:700; background:var(--ac); color:#fff; flex:0 0 32px } .fcard > h2 .n svg{width:16px;height:16px} .fcard > .cs{color:var(--muted);font-size:.9rem;margin:0 0 22px 45px} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .f{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px } .f label{font-size:.88rem;font-weight:600} .f input,.f select{ font-family:inherit; font-size:1rem; padding:14px 16px; border-radius:12px; border:1.5px solid var(--line); background:#fff; color:var(--ink) } .f input:focus,.f select:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 12%,transparent)} .f input::placeholder{color:#B9B2BE} .choice{display:grid;gap:12px;margin-bottom:6px} .ch{ display:flex; gap:15px; align-items:flex-start; border:1.5px solid var(--line); border-radius:var(--r-md); padding:18px 20px; cursor:pointer; transition:border-color .22s,background .22s; position:relative } .ch:hover{border-color:color-mix(in srgb,var(--ac) 40%,var(--line))} .ch input{position:absolute;opacity:0;pointer-events:none} .ch .rd{ width:21px; height:21px; border-radius:50%; border:2px solid var(--line); flex:0 0 21px; margin-top:2px; position:relative; transition:all .2s } .ch .rd::after{ content:""; position:absolute; inset:5px; border-radius:50%; background:#fff; transform:scale(0); transition:transform .2s } .ch input:checked ~ .rd{background:var(--ac);border-color:var(--ac)} .ch input:checked ~ .rd::after{transform:scale(1)} .ch:has(input:checked){border-color:var(--ac);background:color-mix(in srgb,var(--ac) 5%,#fff)} .ch .t{flex:1} .ch .t b{display:block;font-size:1rem} .ch .t small{ color:var(--muted); font-size:.88rem; display:block; margin-top:2px } .ch .pr{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums} .reco{ font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--vert-ok); padding:4px 10px; border-radius:999px; margin-left:9px; vertical-align:2px } .note{ display:flex; gap:13px; align-items:flex-start; background:color-mix(in srgb,var(--vert-ok) 8%,#fff); border:1px solid color-mix(in srgb,var(--vert-ok) 28%,transparent); border-radius:var(--r-md); padding:16px 18px; margin-top:18px; font-size:.9rem; line-height:1.5 } .note .ic{ width:28px; height:28px; border-radius:9px; flex:0 0 28px; display:grid; place-items:center; background:var(--vert-ok); color:#fff } .note svg{width:15px;height:15px} .note b{color:var(--vert-ok)} .paysecure{ display:flex; align-items:center; gap:10px; font-size:.82rem; color:var(--muted); margin-top:16px; justify-content:center } .paysecure svg{width:15px;height:15px} /* ── Confirmation ──────────────────────────────────────────── */ .conf-hero{text-align:center;padding:70px 20px 40px} .tick{ width:96px; height:96px; border-radius:50%; margin:0 auto 28px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--vert-ok),#1F6234); box-shadow:0 20px 50px -14px rgba(46,125,70,.6); animation:pop .5s cubic-bezier(.2,1.4,.4,1) both } .tick svg{width:44px;height:44px} .conf-hero h1{font-size:clamp(2rem,3.6vw,2.9rem);margin-bottom:14px} .conf-hero p{ color:var(--muted); font-size:1.1rem; max-width:52ch; margin:0 auto } .ordref{ display:inline-flex; align-items:center; gap:10px; margin-top:24px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:12px 22px; box-shadow:var(--shadow-s); font-weight:600 } .ordref b{font-variant-numeric:tabular-nums;letter-spacing:.04em} .next{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; padding:20px 0 40px } .nx{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 24px; box-shadow:var(--shadow-s); position:relative } .nx .n{ position:absolute; top:-13px; left:24px; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:.85rem; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--ac),color-mix(in srgb,var(--ac) 60%,#000)); box-shadow:var(--shadow-s) } .nx .ico{ width:48px; height:48px; border-radius:15px; display:grid; place-items:center; margin:10px 0 16px; background:color-mix(in srgb,var(--ac) 10%,transparent); color:var(--ac) } .nx .ico svg{width:23px;height:23px} .nx h3{font-size:1.08rem;margin-bottom:7px} .nx p{font-size:.93rem;color:var(--muted)} /* ── Appel à l'action ──────────────────────────────────────── */ .cta{ position:relative; border-radius:40px; overflow:hidden; text-align:center; padding:74px 30px; background:linear-gradient(135deg,var(--prune),var(--prune-d) 62%,var(--cta-end)); box-shadow:var(--shadow-l) } .cta::before{ content:""; position:absolute; inset:0; opacity:.4; background:radial-gradient(50% 80% at 18% 10%,rgba(210,14,85,.5),transparent 60%) } .cta>*{position:relative;z-index:2} .cta .eyebrow{color:#F4B8D3} .cta .eyebrow::before{background:#F4B8D3} .cta h2{ color:#fff; font-size:clamp(1.9rem,3.4vw,2.7rem); margin:16px auto 14px; max-width:20ch } .cta p{ color:rgba(255,255,255,.82); font-size:1.1rem; max-width:48ch; margin:0 auto 32px } .cta-sec{padding:40px 0 90px} .cta .btn-light{background:#fff;color:var(--prune)} .cta .btn-light:hover{transform:translateY(-3px);box-shadow:0 20px 40px -10px rgba(0,0,0,.4)} /* ── Pied de page ──────────────────────────────────────────── */ footer{ background:#fff; border-top:1px solid var(--line); padding:60px 0 30px; margin-top:20px } .foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px} .foot .logo{margin-bottom:16px} .foot p.fd{color:var(--muted);font-size:.92rem;max-width:30ch} .foot h5{ font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--prune); margin-bottom:16px; font-weight:700 } .foot a{ display:block; color:var(--muted); text-decoration:none; font-size:.93rem; padding:5px 0; transition:color .2s } .foot a:hover{color:var(--ac)} .foot-bottom{ display:flex; justify-content:space-between; align-items:center; margin-top:46px; padding-top:24px; border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; flex-wrap:wrap; gap:12px } /* ── Animations ────────────────────────────────────────────── */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)} .reveal.in{opacity:1;transform:none} /* ── Divers ──────────────────────────────────────────────── */ .plogos-sec{padding:28px 0 6px} .plogos-title{ text-align:center; font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 26px } .plogos{ display:flex; justify-content:center; align-items:center; gap:48px; flex-wrap:wrap } .plogos img{ height:44px; width:auto; max-width:150px; object-fit:contain; filter:grayscale(1); opacity:.6; transition:filter .3s,opacity .3s } .plogos img:hover{filter:grayscale(0);opacity:1} /* ── Accueil : écarts hérités de la maquette ─────────────────────── */ /* Le client a validé ces valeurs sur l'accueil ; les pages produit utilisent les leurs. Vider ce bloc pour unifier. */ :where(.v-home) h1, :where(.v-home) h2, :where(.v-home) h3{text-wrap:wrap;line-height:1.12} :where(.v-home) .eyebrow{color:var(--prune)} :where(.v-home) .eyebrow::before{background:var(--prune)} :where(.v-home) .btn{will-change:transform} :where(.v-home) .btn-glass{color:var(--prune);border:1px solid rgba(124,32,81,.18)} :where(.v-home) .menu{gap:30px} :where(.v-home) .menu a::after{background:var(--prune)} :where(.v-home) .lang{display:flex;gap:6px;align-items:center} :where(.v-home) section{padding:84px 0} :where(.v-home) .s-head{max-width:640px} :where(.v-home) .s-head h2{font-size:clamp(1.9rem,3.4vw,2.7rem)} :where(.v-home) .s-head p{font-size:1.1rem} :where(.v-home) .steps{position:relative} :where(.v-home) .step{position:relative;padding:8px} :where(.v-home) .step-num{color:var(--prune)} :where(.v-home) .step-num svg{width:32px;height:32px} :where(.v-home) .step-num::after{background:linear-gradient(135deg,var(--prune),var(--fuchsia));box-shadow:0 6px 14px -4px rgba(210,14,85,.6)} :where(.v-home) .step h4{font-size:1.08rem} :where(.v-home) .testi{color:inherit;max-width:760px;margin:50px auto 0} :where(.v-home) .testi p{margin:0;font-size:1.4rem;letter-spacing:-.01em} :where(.v-home) .testi .who{opacity:1;margin-top:18px;color:var(--muted)} :where(.v-home) .cta{background:linear-gradient(135deg,var(--prune),var(--prune-d) 60%,var(--petrole))} :where(.v-home) .cta::before{background:radial-gradient(50% 80% at 18% 10%,rgba(210,14,85,.5),transparent 60%), radial-gradient(40% 70% at 88% 90%,rgba(127,227,192,.25),transparent 60%)} :where(.v-home) .cta h2{font-size:clamp(2rem,3.6vw,2.9rem);max-width:18ch} :where(.v-home) .cta p{font-size:1.12rem;max-width:46ch} :where(.v-home) footer{margin-top:0} :where(.v-home) .foot a:hover{color:var(--prune)} /* ── Responsive ──────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} @media(max-width:1000px){ .menu,.lang{display:none} .burger{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--ac) 10%,transparent);color:var(--ac);border:0;cursor:pointer} .phero{grid-template-columns:1fr;gap:38px} .gal{position:static} .incl{grid-template-columns:1fr 1fr} .promise{grid-template-columns:1fr} .bio{grid-template-columns:repeat(3,1fr)} .steps{grid-template-columns:1fr 1fr;gap:30px 18px} .coach{grid-template-columns:1fr;gap:34px} .foot{grid-template-columns:1fr 1fr} } @media(max-width:600px){ .wrap{padding:0 18px} section{padding:58px 0} .incl-sec,.testi-sec{padding:48px 22px;margin:0 6px;border-radius:30px} .incl{grid-template-columns:1fr} .bio{grid-template-columns:1fr 1fr} .steps{grid-template-columns:1fr} .foot{grid-template-columns:1fr} .foot-bottom{flex-direction:column;text-align:center} .qty-row{flex-direction:column} .qty{flex:auto;width:100%;justify-content:space-between} .sticky .p,.sticky .t{display:none} .sticky .btn{flex:1} .sticky .in{padding:12px 16px} .toast{right:12px;left:12px;top:84px} } @media(max-width:1000px){ .conf{grid-template-columns:1fr;gap:28px} .recap{position:static} .dgrid{grid-template-columns:1fr 1fr} } @media(max-width:600px){ .dhead{grid-template-columns:1fr;text-align:center;justify-items:center;gap:18px} .dphoto{width:110px;height:110px} .stepper{font-size:.8rem} .stepper .sep{width:14px} .stp .n{width:24px;height:24px;flex:0 0 24px} .pcard{padding:20px 18px 20px 52px} .pcard .rd{left:18px} .dgrid{grid-template-columns:1fr 1fr;gap:12px} .dcard{padding:16px 12px} .dcard img{width:72px;height:72px} } @keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}} @media(max-width:1000px){ .cols{grid-template-columns:1fr;gap:26px} .next{grid-template-columns:1fr} } @media(max-width:600px){ .grid2,.cardrow{grid-template-columns:1fr} .ci{gap:14px;padding:18px} .ci img,.ci .ic{width:56px;height:56px;flex:0 0 56px;border-radius:14px} .card{padding:22px 18px} .card > .cs{margin-left:0} } @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} @media(max-width:700px){.schemas{grid-template-columns:1fr}} @keyframes pulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.5);opacity:0}} @media(max-width:640px){.plogos{gap:30px}.plogos img{height:34px}} @media(max-width:920px){ .menu,.lang{display:none} .burger{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(124,32,81,.08);color:var(--prune);border:0;cursor:pointer} .hero-grid{grid-template-columns:1fr;gap:40px} .hero p.lead{max-width:none} .device{max-width:380px;margin:0 auto;width:100%} .cards{grid-template-columns:1fr;gap:18px} .disp{grid-template-columns:1fr;gap:34px} .steps{grid-template-columns:1fr 1fr;gap:30px 18px} .foot{grid-template-columns:1fr 1fr;gap:30px} } @media(max-width:540px){ .wrap{padding:0 18px} section{padding:60px 0} .steps{grid-template-columns:1fr} .foot{grid-template-columns:1fr} .hero-cta{flex-direction:column;align-items:stretch} .btn{justify-content:center} .foot-bottom{flex-direction:column;text-align:center} } /* -- Amélioration progressive (contenu visible sans JS) -- */ .reveal{opacity:1;transform:none} html.uriki-anim .reveal{opacity:0;transform:translateY(26px)} html.uriki-anim .reveal.in{opacity:1;transform:none} /* ===== Compatibilité Elementor ===== */ .elementor-widget-heading h1.elementor-heading-title,.elementor-widget-heading h2.elementor-heading-title,.elementor-widget-heading h3.elementor-heading-title{color:var(--ink);font-weight:700;font-family:'Outfit',system-ui,sans-serif} .hero .elementor-widget-heading h1.elementor-heading-title{font-weight:800} .cta .elementor-widget-heading h2.elementor-heading-title,.testi-sec .elementor-widget-heading h2.elementor-heading-title{color:#fff} .elementor-widget-button.btn,.elementor-widget-button.btn-primary,.elementor-widget-button.btn-glass{background:none;box-shadow:none;padding:0;border:0;backdrop-filter:none;-webkit-backdrop-filter:none} .btn .elementor-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:'Outfit',system-ui,sans-serif;font-weight:600;font-size:1rem;line-height:1;padding:15px 28px;border-radius:999px;border:0;text-decoration:none;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s} .btn-primary .elementor-button{color:#fff;background:linear-gradient(135deg,var(--prune),var(--prune-d));box-shadow:0 10px 26px -8px rgba(124,32,81,.55)} .btn-primary .elementor-button:hover{transform:translateY(-3px);box-shadow:0 18px 38px -10px rgba(124,32,81,.65)} .btn-glass .elementor-button{color:var(--ac);background:rgba(255,255,255,.55);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border:1px solid color-mix(in srgb,var(--ac) 25%,transparent);box-shadow:var(--shadow-s)} .btn-glass .elementor-button:hover{transform:translateY(-3px);background:rgba(255,255,255,.9)} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center} body.uriki-page a.btn-primary,body.uriki-page a.btn-primary:hover,body.uriki-page a.btn-primary:focus{color:#fff} body.uriki-page a.btn-light,body.uriki-page a.btn-light:hover{color:var(--prune)} body.uriki-page a.btn-glass,body.uriki-page a.btn-glass:hover{color:var(--ac)} body.uriki-page button.thumb{background:#fff} body.uriki-page button.play{background:rgba(255,255,255,.18)} body.uriki-page button.play:hover{background:rgba(255,255,255,.3)} body.uriki-page button.burger{background:color-mix(in srgb,var(--ac) 10%,transparent)} body.uriki-page button.rm{background:none} body.uriki-page button.btn-primary{background:linear-gradient(135deg,var(--prune),var(--prune-d));color:#fff} body.uriki-page .e-con.e-flex{flex-direction:column !important} body.uriki-page .e-con.hero-cta,body.uriki-page .e-con.feat,body.uriki-page .e-con.feat-hl,body.uriki-page .e-con.trust-band,body.uriki-page .e-con.pill,body.uriki-page .e-con.logos,body.uriki-page .e-con.nav,body.uriki-page .e-con.menu,body.uriki-page .e-con.stepper,body.uriki-page .e-con.reassure,body.uriki-page .e-con.stars,body.uriki-page .e-con.price{flex-direction:row !important}