/* ============================================================ CORE — design system du site public (accueil + concept). Habillage PROVISOIRE neutre, facon Maison Epigenetic : sombre, epure, tres typographique. Les couleurs de marque et le logo CORE ne sont pas encore figes (pas d'accent colore pour l'instant). Police : Hanken Grotesk. Sans emoji, sans longs tirets. ============================================================ */ :root{ /* DA CORE. Vert lime = couleur signature, sur fonds sombres olive / near-black. Le lime est un signal de vitalité (pas un effet néon), le vert foncé ancre le bien-être. Blanc cassé pour le texte. Premium sobre. */ --noir:#12140c; --graphite:#1e2417; --graphite2:#161a11; --panel:#1e2416; --orange:#c4f04a; --orange2:#d4f56e; --copper:#c4f04a; --copper2:#d4f56e; /* accent de marque = vert lime */ --olive:#3a4023; --olive2:#2a2f1a; /* vert foncé, ancrage bien-être */ --sand:#eef0e4; --cyan:#f2f4ea; --mineral:#f2f4ea; /* blancs cassés */ --ink:#14180a; /* texte sombre sur fond lime */ --muted:#9aa08c; --line:rgba(238,240,228,.10); --line2:rgba(238,240,228,.18); --maxw:1120px; --e-out:cubic-bezier(.16,1,.3,1); /* easing premium (Expo-like) */ --e-io:cubic-bezier(.65,0,.35,1); --sh-1:0 2px 8px rgba(0,0,0,.28); --sh-2:0 18px 46px -18px rgba(0,0,0,.6); --sh-glow:0 14px 40px -12px rgba(196,240,74,.5); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--noir);color:var(--mineral);font-family:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;line-height:1.62;-webkit-font-smoothing:antialiased} .disp{font-family:"Hanken Grotesk","Inter",sans-serif} .mono{font-family:"Hanken Grotesk",sans-serif} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} a{color:inherit} img{max-width:100%} /* Header */ header.nav{position:sticky;top:0;z-index:50;background:rgba(14,17,22,.78);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px} .logo{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px;font-family:"Hanken Grotesk",sans-serif;font-weight:800;font-size:21px;letter-spacing:.18em;text-decoration:none;color:var(--copper);line-height:1} .logo::after{content:"Plus solide. Plus libre. Plus vivant.";font-weight:600;font-size:8px;letter-spacing:.11em;text-transform:uppercase;color:var(--copper);line-height:1} .logo svg{width:20px;height:20px} @media(max-width:380px){.logo::after{font-size:7px;letter-spacing:.06em}} .nav nav{display:flex;gap:24px;align-items:center} .nav nav a{font-size:13px;text-decoration:none;color:var(--muted);letter-spacing:.02em;transition:color .15s} .nav nav a:hover,.nav nav a.on{color:var(--mineral)} .btn{display:inline-block;background:var(--cyan);color:#111;text-decoration:none;font-family:"Hanken Grotesk",sans-serif;font-size:13px;font-weight:600;letter-spacing:.02em;padding:11px 18px;border-radius:6px;transition:transform .15s,box-shadow .15s,background .15s} .btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(244,244,242,.14)} .btn.big{padding:15px 28px;font-size:15px} .btn.copper{background:var(--cyan);color:#111} .btn.copper:hover{background:var(--copper2);box-shadow:0 8px 24px rgba(244,244,242,.14)} .btn.ghost{background:transparent;color:var(--mineral);border:1px solid var(--line2)} .btn.ghost:hover{border-color:var(--cyan);box-shadow:none} @media(max-width:680px){.nav nav a.hide-s{display:none}} /* Eyebrow / tags */ .eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:"Hanken Grotesk",sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--copper);margin-bottom:20px} .eyebrow::before{content:"";width:26px;height:1px;background:var(--copper)} .tag{font-family:"Hanken Grotesk",sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--copper);margin-bottom:16px;display:block} /* Sections + type */ section{padding:104px 0;position:relative} h1{font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:clamp(40px,6.4vw,72px);line-height:1.02;letter-spacing:-.01em;margin:0 0 22px;color:var(--mineral)} h2{font-family:"Hanken Grotesk",sans-serif;font-weight:500;font-size:clamp(28px,4vw,44px);line-height:1.08;letter-spacing:-.01em;margin:0 0 18px;color:var(--mineral)} h1 em,h2 em{font-style:normal;color:var(--copper)} .lead{font-size:18px;color:#c3c8d0;max-width:60ch} p{color:#c3c8d0} .reveal{opacity:0;transform:translateY(30px);transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1s cubic-bezier(.22,.61,.36,1)} .reveal.in{opacity:1;transform:none} /* Révélation étagée des enfants (motion.js pose le transition-delay) */ .stagger-item{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)} .reveal.in .stagger-item,.stagger-item.in{opacity:1;transform:none} .divider{height:1px;background:var(--line);border:0;margin:0} /* Hero */ .hero{overflow:hidden;padding:128px 0 104px} .hero .glow{position:absolute;inset:-30% -10% auto -10%;height:90%;z-index:0;pointer-events:none; background:radial-gradient(45% 55% at 25% 25%,rgba(244,244,242,.06),transparent 70%),radial-gradient(45% 50% at 80% 15%,rgba(244,244,242,.045),transparent 70%)} .hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.12fr .88fr;gap:48px;align-items:center} .hero p.lede{font-size:19px;color:#c3c8d0;max-width:46ch;margin:0 0 30px} .hero-promise{font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:clamp(18px,2.3vw,23px);color:var(--mineral);margin:0 0 20px;max-width:34ch;line-height:1.25} .hero .cta{display:flex;gap:12px;flex-wrap:wrap} .hero.home .wrap{grid-template-columns:1fr;max-width:900px} .hero.home h1{font-size:clamp(46px,8vw,86px)} @media(max-width:860px){.hero .wrap{grid-template-columns:1fr;gap:32px}.hero .art{order:-1;max-width:320px}} /* Hero en fond photo (voile sombre pour la lisibilité du texte) */ .hero.photo{position:relative;padding:0;min-height:84vh;display:flex;align-items:center;background:#0a0a0b} .hero.photo .bg{position:absolute;inset:0;background:url('hero-core.jpg') center/cover no-repeat;animation:heroZoom 16s cubic-bezier(.22,.61,.36,1) both;transform-origin:center} @keyframes heroZoom{from{transform:scale(1.14)}to{transform:scale(1)}} .hero.photo .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,11,.95) 0%,rgba(10,10,11,.72) 44%,rgba(10,10,11,.28) 100%),linear-gradient(0deg,rgba(10,10,11,.55),transparent 42%)} .hero.photo .wrap{position:relative;z-index:2;display:block} .hero.photo .hcopy{max-width:600px} @media(max-width:640px){.hero.photo{min-height:76vh}.hero.photo .scrim{background:linear-gradient(0deg,rgba(10,10,11,.9),rgba(10,10,11,.5))}} /* Atom / triangle art */ .art{position:relative} .art svg{width:100%;height:auto;overflow:visible} .tri-line{fill:none;stroke:var(--copper);stroke-width:1.5;stroke-dasharray:1500;stroke-dashoffset:1500;animation:draw 2.4s .3s ease forwards} @keyframes draw{to{stroke-dashoffset:0}} .node-c{fill:var(--panel);stroke:var(--cyan);stroke-width:1.5} .node-dot{fill:var(--cyan);opacity:0;animation:pop .5s ease forwards} .node-dot.d1{animation-delay:1.5s}.node-dot.d2{animation-delay:1.9s}.node-dot.d3{animation-delay:2.3s} @keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}} .art .lbl{font-family:"Hanken Grotesk",sans-serif;font-size:14px;fill:var(--mineral)} .atomspin{transform-origin:center;animation:spin 26s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* Cards / panels */ .panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px 28px} .panel ul{list-style:none;margin:0;padding:0} .panel li{padding:13px 0;border-bottom:1px solid var(--line);font-size:15px} .panel li:last-child{border-bottom:none} .panel li b{font-family:"Hanken Grotesk",sans-serif;color:var(--mineral);font-weight:600;display:block;font-size:16px;margin-bottom:2px} /* Split */ .split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center} @media(max-width:820px){.split{grid-template-columns:1fr;gap:26px}} .about{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center} @media(max-width:820px){.about{grid-template-columns:1fr;gap:28px}} .quote{font-family:"Hanken Grotesk",sans-serif;font-weight:400;font-size:clamp(24px,3.4vw,36px);line-height:1.24;color:var(--mineral)} .quote em{color:var(--copper);font-style:normal} /* Chiffres */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px} @media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr)}} .stat{border-top:1px solid var(--copper);padding-top:16px} .stat .fig{font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:42px;line-height:1;color:var(--cyan)} .stat .cap{font-size:13px;color:var(--muted);margin-top:8px} /* Valeurs */ .values{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:40px} @media(max-width:760px){.values{grid-template-columns:1fr}} .value{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px;transition:transform .2s,border-color .2s} .value:hover{transform:translateY(-3px);border-color:var(--copper)} .value .vn{font-family:"Hanken Grotesk",sans-serif;font-size:12px;color:var(--copper);letter-spacing:.1em} .value h3{font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:21px;margin:8px 0 8px;color:var(--mineral)} .value p{font-size:14.5px;color:#adb4bf;margin:0} /* Piliers (triangle) */ .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px} @media(max-width:820px){.pillars{grid-template-columns:1fr}} .pillar{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px 24px;text-decoration:none;color:inherit;display:block;transition:transform .2s,border-color .2s} .pillar:hover{transform:translateY(-4px);border-color:var(--cyan)} .pillar .num{font-family:"Hanken Grotesk",sans-serif;font-size:13px;color:var(--copper)} .pillar h3{font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:22px;margin:8px 0 4px;color:var(--mineral)} .pillar .who{font-family:"Hanken Grotesk",sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--cyan);margin-bottom:10px} .pillar p{font-size:14.5px;color:#adb4bf;margin:0} /* Offres écosystème */ .offers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px} @media(max-width:820px){.offers{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.offers{grid-template-columns:1fr}} .offer{display:block;text-decoration:none;color:inherit;background:linear-gradient(160deg,var(--graphite),var(--graphite2));border:1px solid var(--line);border-radius:14px;padding:22px;transition:transform .2s,border-color .2s} a.offer .arr{font-size:12px;color:var(--muted);margin-top:8px;display:inline-block} a.offer:hover .arr{color:var(--mineral)} .offer:hover{transform:translateY(-3px);border-color:var(--copper)} .offer h4{font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:18px;margin:0 0 4px;color:var(--mineral)} .offer h4 span{color:var(--copper)} .offer p{font-size:13.5px;color:#adb4bf;margin:0} .offer .oimg{display:block;width:calc(100% + 44px);height:clamp(150px,17vw,190px);margin:-22px -22px 18px;object-fit:cover;border-radius:14px 14px 0 0} /* Méthode 3 temps */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px;border-top:1px solid var(--line)} @media(max-width:760px){.steps{grid-template-columns:1fr}} .step{padding:28px 24px 28px 0;border-right:1px solid var(--line)} .steps .step:last-child{border-right:none} @media(max-width:760px){.step{border-right:none;border-bottom:1px solid var(--line);padding-right:0}} .step .n{font-family:"Hanken Grotesk",sans-serif;font-size:44px;font-weight:600;color:var(--copper);line-height:1} .step h4{font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:20px;margin:12px 0 6px;color:var(--mineral)} .step p{font-size:14.5px;color:#adb4bf;margin:0} /* Mesures */ .measures{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px} @media(max-width:820px){.measures{grid-template-columns:repeat(2,1fr)}} .m{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px} .m .mh{font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:15px;margin-bottom:3px;color:var(--mineral)} .m .md{font-size:12.5px;color:var(--muted)} .chip{display:inline-block;font-family:"Hanken Grotesk",sans-serif;font-size:11px;color:var(--cyan);border:1px solid var(--line2);border-radius:100px;padding:4px 11px;margin:4px 5px 0 0} /* Rec card (récupération) */ .rec-split{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center} @media(max-width:820px){.rec-split{grid-template-columns:1fr;gap:26px}} .rec-card{background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:28px} .rec-card h3{font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:20px;color:var(--mineral);margin:0 0 12px} .checks{list-style:none;margin:0;padding:0} .checks li{position:relative;padding:12px 0 12px 34px;border-bottom:1px solid var(--line);font-size:15px;color:#d4d8de} .checks li:last-child{border-bottom:none} .checks li::before{content:"";position:absolute;left:0;top:14px;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--cyan)} .checks li::after{content:"";position:absolute;left:5px;top:16px;width:7px;height:4px;border-left:1.6px solid var(--cyan);border-bottom:1.6px solid var(--cyan);transform:rotate(-45deg)} /* Roles */ .roles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px} @media(max-width:820px){.roles{grid-template-columns:1fr}} .role{border-left:2px solid var(--copper);padding:6px 0 6px 18px} .role h4{font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:18px;margin:0 0 4px;color:var(--mineral)} .role p{font-size:14px;color:#adb4bf;margin:0} /* Bande accent */ .band{background:linear-gradient(150deg,var(--graphite),var(--graphite2));border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .vision{text-align:center} .vision .quote{max-width:26ch;margin:0 auto} /* CTA */ .cta-band{position:relative;overflow:hidden;background:linear-gradient(140deg,#17181b,#0d0d10);border:1px solid var(--line2);border-radius:22px;padding:56px 40px;text-align:center} .cta-band::after{content:"";position:absolute;inset:auto -10% -60% -10%;height:120%;background:radial-gradient(50% 60% at 50% 0,rgba(244,244,242,.08),transparent 70%);pointer-events:none} .cta-band h2{position:relative} .cta-band p{color:#cfe6ea;max-width:54ch;margin:0 auto 28px;position:relative} .cta-band .btn{position:relative} /* Piliers "ce que tu peux transformer" */ .improve{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px} @media(max-width:860px){.improve{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.improve{grid-template-columns:1fr}} .imp{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px 22px;transition:transform .2s,border-color .2s} .imp:hover{transform:translateY(-4px);border-color:var(--cyan)} .imp .ic{width:32px;height:32px;stroke:var(--copper);fill:none;margin-bottom:16px} .imp h3{font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:19px;margin:0 0 6px;color:var(--mineral)} .imp p{font-size:14px;color:#adb4bf;margin:0} /* Comment commencer (2 options) */ .start{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:42px} @media(max-width:760px){.start{grid-template-columns:1fr}} .opt{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:32px 28px;position:relative;display:flex;flex-direction:column} .opt.reco{border-color:var(--cyan);box-shadow:0 0 0 1px rgba(244,244,242,.14)} .opt .badge{position:absolute;top:22px;right:24px;font-family:"Hanken Grotesk",sans-serif;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#111;background:var(--cyan);padding:4px 10px;border-radius:100px} .opt .kick{font-family:"Hanken Grotesk",sans-serif;font-size:12px;color:var(--copper);letter-spacing:.06em} .opt h3{font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:24px;margin:10px 0 4px;color:var(--mineral)} .opt .osub{color:var(--muted);font-size:13.5px;margin-bottom:12px} .opt p{font-size:14.5px;color:#adb4bf;margin:0 0 22px;flex:1} /* Pourquoi CORE (4 différenciateurs) */ .why{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:42px} @media(max-width:820px){.why{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.why{grid-template-columns:1fr}} .wy{border-top:1px solid var(--copper);padding-top:18px} .wy h4{font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:17px;margin:0 0 6px;color:var(--mineral)} .wy p{font-size:13.5px;color:#adb4bf;margin:0} /* Valeurs compactes (strip) */ .vstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:36px} @media(max-width:820px){.vstrip{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.vstrip{grid-template-columns:1fr}} .vs .vsn{font-family:"Hanken Grotesk",sans-serif;font-size:12px;color:var(--copper)} .vs h4{font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:18px;margin:6px 0 4px;color:var(--mineral)} .vs p{font-size:13.5px;color:#adb4bf;margin:0} /* Figures photo (blocs .about / preuves) */ .shot{margin:0;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:var(--panel)} .shot img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform 1.2s cubic-bezier(.22,.61,.36,1)} .shot:hover img{transform:scale(1.05)} @media(max-width:820px){.shot img{aspect-ratio:16/10}} /* Bandes photo éditoriales (façon studio), coins arrondis + parallaxe + scrim */ .pbwrap{padding:14px 0} .photoband{position:relative;border-radius:26px;overflow:hidden;min-height:clamp(360px,54vh,560px);display:flex;align-items:flex-end;border:1px solid var(--line)} .photoband .pb-bg{position:absolute;inset:-14% 0;background-size:cover;background-position:center;will-change:transform} .photoband .pb-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,11,.92),rgba(10,10,11,.15) 58%,rgba(10,10,11,.45))} .photoband .pb-copy{position:relative;z-index:2;padding:clamp(28px,5vw,54px);max-width:640px} .photoband .pb-copy h2{margin-bottom:10px} .photoband .pb-copy p{color:#e7e9ee;font-size:17px;max-width:46ch} .photoband .pb-copy .btn{margin-top:22px} @media(max-width:640px){.photoband{min-height:auto;padding-top:46vh}} /* Accessibilité : couper les mouvements si l'utilisateur le demande */ @media (prefers-reduced-motion: reduce){ .reveal,.stagger-item{transition:none!important;opacity:1!important;transform:none!important} .hero.photo .bg{animation:none!important;transform:none!important} .shot img{transition:none!important} .photoband .pb-bg{transform:none!important} html{scroll-behavior:auto} } /* FAQ (accordéon natif details/summary) */ .faq{border-top:1px solid var(--line)} .faq-item{border-bottom:1px solid var(--line)} .faq-item summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:18px;color:var(--mineral)} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:26px;font-weight:400;line-height:1;color:var(--copper)} .faq-item[open] summary::after{content:"\2013"} .faq-a{padding:0 0 22px} .faq-a p{font-size:15.5px;color:#c3c8d0;margin:0} .faq-a a{color:var(--cyan)} /* Formulaire de contact */ .form .field{margin-bottom:16px} .form label{display:block;font-family:"Hanken Grotesk",sans-serif;font-size:13px;color:var(--muted);margin-bottom:6px;letter-spacing:.02em} .form input,.form select,.form textarea{width:100%;background:var(--panel);border:1px solid var(--line2);border-radius:8px;color:var(--mineral);font-family:inherit;font-size:15px;padding:12px 14px;transition:border-color .15s} .form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--cyan)} .form textarea{resize:vertical} .form .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden} .form button{margin-top:4px;border:0;cursor:pointer} .form-note{font-size:12.5px;color:var(--muted);margin:14px 0 0;max-width:46ch} .contact-card li b{color:var(--mineral)} /* Visite 360 */ .pano-stage{margin-top:32px} .pano-view{position:relative;height:min(64vh,560px);border-radius:16px;overflow:hidden;border:1px solid var(--line2);background:radial-gradient(120% 120% at 50% 30%,#141518,#0a0a0b);cursor:grab;touch-action:pan-y;user-select:none} .pano-view.dragging{cursor:grabbing} .pano-img{position:absolute;top:0;left:0;height:100%;width:auto;max-width:none;-webkit-user-drag:none;user-select:none;will-change:transform} .pano-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:3;font-family:"Hanken Grotesk",sans-serif;font-size:12px;letter-spacing:.05em;color:var(--mineral);background:rgba(10,10,11,.62);border:1px solid var(--line2);border-radius:100px;padding:7px 15px;pointer-events:none;backdrop-filter:blur(6px)} .pano-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;z-index:2} .pano-ph .ph-eyebrow{font-family:"Hanken Grotesk",sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--copper);margin-bottom:14px} .pano-ph h3{font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:clamp(22px,3vw,28px);color:var(--mineral);margin:0 0 10px} .pano-ph p{font-size:14px;color:var(--muted);max-width:42ch;margin:0} .pano-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .pano-tab{font-family:"Hanken Grotesk",sans-serif;font-size:13px;color:var(--muted);background:var(--panel);border:1px solid var(--line2);border-radius:100px;padding:8px 16px;cursor:pointer;transition:color .15s,border-color .15s,background .15s} .pano-tab:hover{color:var(--mineral)} .pano-tab.on{color:#111;background:var(--cyan);border-color:var(--cyan)} /* Bannière cookies */ .cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:200;background:rgba(14,17,22,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line2);transform:translateY(115%);transition:transform .35s ease} .cookie-banner.show{transform:none} .cookie-inner{max-width:var(--maxw);margin:0 auto;padding:18px 24px;display:flex;align-items:center;gap:24px;flex-wrap:wrap} .cookie-text{flex:1;min-width:260px;font-size:13.5px;color:#c3c8d0;line-height:1.55} .cookie-text strong{color:var(--mineral);font-weight:600} .cookie-text a{color:var(--cyan);text-decoration:underline} .cookie-actions{display:flex;gap:10px;flex-wrap:wrap} .cookie-btn{font-family:"Hanken Grotesk",sans-serif;font-size:13px;font-weight:600;letter-spacing:.02em;padding:11px 20px;border-radius:6px;cursor:pointer;border:1px solid var(--line2);transition:transform .15s,border-color .15s,background .15s} .cookie-btn.ghost{background:transparent;color:var(--mineral)} .cookie-btn.ghost:hover{border-color:var(--cyan)} .cookie-btn.primary{background:var(--cyan);color:#111;border-color:var(--cyan)} .cookie-btn.primary:hover{transform:translateY(-1px)} @media(max-width:640px){.cookie-inner{padding:16px 18px;gap:14px}.cookie-actions{width:100%}.cookie-btn{flex:1}} /* Footer */ footer{background:#0a0d11;color:var(--muted);padding:52px 0 40px;font-size:13px;border-top:1px solid var(--line)} footer .cols{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap} footer .logo{color:var(--mineral);margin-bottom:10px} footer .fcol h5{font-family:"Hanken Grotesk",sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--copper);margin:0 0 8px} footer a{color:#c3c8d0;text-decoration:none;display:block;margin:5px 0} footer a:hover{color:var(--cyan)} footer .legal{margin-top:32px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)} /* ============================================================ ÉLÉVATION CORE — DA orange, dégradés, reflets, animations, finitions pro. Additif : mêmes sélecteurs que la base, élève les 14 pages d'un coup. ============================================================ */ /* Motion global : easing premium */ .reveal{transition:opacity 1.05s var(--e-out),transform 1.05s var(--e-out)} .stagger-item{transition:opacity .85s var(--e-out),transform .85s var(--e-out)} /* Signature : le carré orange qui pulse (logo + labels de section) */ @keyframes pulseSq{0%{box-shadow:0 0 0 0 rgba(196,240,74,.5)}70%{box-shadow:0 0 0 7px rgba(196,240,74,0)}100%{box-shadow:0 0 0 0 rgba(196,240,74,0)}} .logo{position:relative} /* Logo = wordmark officiel CORE + baseline (PNG officiel de Patrick, fond détouré en transparent) */ .logo{font-size:0} .logo::before{content:"";display:block;width:184px;height:46px;background:url('/img/logo-core-official.png') left center/contain no-repeat;position:static;transform:none;border-radius:0;box-shadow:none;animation:none} .logo::after{content:none} @media(max-width:420px){.logo::before{width:150px;height:38px}} .eyebrow::before{width:9px;height:9px;background:var(--orange);border-radius:2px;animation:pulseSq 2.8s var(--e-io) infinite} .tag{position:relative;padding-left:18px} .tag::before{content:"";position:absolute;left:0;top:.35em;width:9px;height:9px;background:var(--orange);border-radius:2px;animation:pulseSq 2.8s var(--e-io) infinite} /* Boutons : orange de marque, gloss discret, halo au survol */ .btn{background:var(--orange);color:var(--ink);border-radius:8px;box-shadow:var(--sh-1),inset 0 1px 0 rgba(255,255,255,.24);transition:transform .18s var(--e-out),box-shadow .28s var(--e-out),background .22s} .btn:hover{transform:translateY(-2px);background:linear-gradient(180deg,var(--orange2),var(--orange));box-shadow:var(--sh-glow),inset 0 1px 0 rgba(255,255,255,.32)} .btn.copper{background:var(--orange);color:var(--ink)} .btn.copper:hover{background:linear-gradient(180deg,var(--orange2),var(--orange));box-shadow:var(--sh-glow),inset 0 1px 0 rgba(255,255,255,.32)} .btn.ghost{background:transparent;color:var(--mineral);border:1px solid var(--line2);box-shadow:none} .btn.ghost:hover{border-color:var(--orange);background:rgba(196,240,74,.09);color:var(--mineral);box-shadow:none;transform:translateY(-2px)} /* Accessibilité : focus clairement visible (clavier) */ a:focus-visible,button:focus-visible,summary:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px} /* Titres d'affichage : léger dégradé blanc → sable (l'accent orange reste sur em) */ .hero h1,.hero.photo h1{background:linear-gradient(176deg,#fff 0%,var(--sand) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .hero h1 em,.hero.photo h1 em{-webkit-text-fill-color:var(--orange);color:var(--orange);background:none} /* Hero : halo orange chaud au lieu du gris neutre */ .hero .glow{background:radial-gradient(45% 55% at 22% 28%,rgba(196,240,74,.14),transparent 70%),radial-gradient(42% 48% at 82% 12%,rgba(196,240,74,.08),transparent 72%)} .hero.photo .scrim{background:linear-gradient(90deg,rgba(12,10,9,.95) 0%,rgba(12,10,9,.7) 44%,rgba(12,10,9,.25) 100%),linear-gradient(0deg,rgba(12,10,9,.6),transparent 42%)} .hero.photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(0deg,var(--noir),transparent);z-index:1;pointer-events:none} /* Reflet balayant sur les cartes au survol (gloss vitré) + relief */ .imp,.value,.pillar,.offer,.opt,.m,.rec-card{position:relative;overflow:hidden} .imp,.value,.pillar,.offer{transition:transform .28s var(--e-out),border-color .28s var(--e-out),box-shadow .3s var(--e-out),background .3s} .imp:hover,.value:hover,.pillar:hover,.offer:hover{transform:translateY(-5px);border-color:rgba(196,240,74,.55);box-shadow:var(--sh-2)} .imp::before,.value::before,.pillar::before,.offer::before,.opt::before{content:"";position:absolute;top:0;left:-60%;width:55%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.10),transparent);transform:skewX(-16deg);transition:left .7s var(--e-out);pointer-events:none;z-index:1} .imp:hover::before,.value:hover::before,.pillar:hover::before,.offer:hover::before,.opt:hover::before{left:130%} .offer h4 span,.imp .ic{color:var(--orange);stroke:var(--orange)} /* Carte recommandée : liseré orange lumineux */ .opt.reco{border-color:rgba(196,240,74,.6);box-shadow:0 0 0 1px rgba(196,240,74,.25),0 24px 60px -26px rgba(196,240,74,.4);background:linear-gradient(180deg,rgba(196,240,74,.06),transparent 60%),var(--panel)} .opt .badge{background:var(--orange);color:var(--ink)} /* Méthode : numéros en dégradé orange */ .step .n{background:linear-gradient(180deg,var(--orange2),var(--orange));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} /* Bandes accent : filet orange lumineux en haut */ .band{background:linear-gradient(150deg,var(--graphite),var(--graphite2));position:relative} .band::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(196,240,74,.5),transparent)} /* CTA : dégradé chaud + halo orange + reflet */ .cta-band{background:linear-gradient(140deg,#1e2417,#12140c);border-color:rgba(196,240,74,.30);box-shadow:0 40px 90px -40px rgba(196,240,74,.30)} .cta-band::after{background:radial-gradient(52% 62% at 50% 0,rgba(196,240,74,.16),transparent 70%)} /* Visuels photo : reflet gloss + zoom doux */ .shot{position:relative} .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.09),transparent 40%);mix-blend-mode:soft-light;pointer-events:none} .shot img{transition:transform 1.3s var(--e-out)} .shot:hover img{transform:scale(1.06)} .photoband{box-shadow:var(--sh-2)} .photoband::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.08),transparent 38%);mix-blend-mode:soft-light;pointer-events:none;z-index:1} /* Statistiques et chiffres en orange + figures tabulaires */ .stat .fig,.pillar .num,.faq-item summary::after{color:var(--orange)} .stat .fig,.m .mh,.hero-promise{font-variant-numeric:tabular-nums} /* Séparateur : dégradé au lieu d'un trait plat */ .divider{background:linear-gradient(90deg,transparent,var(--line2),transparent)} /* Header : liseré bas légèrement chaud + fond encre */ header.nav{background:rgba(15,15,16,.82)} header.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(196,240,74,.35),transparent)} @media (prefers-reduced-motion: reduce){ .nav .logo::before,.eyebrow::before,.tag::before{animation:none!important} .imp::before,.value::before,.pillar::before,.offer::before,.opt::before{display:none!important} .shot:hover img,.imp:hover,.value:hover,.pillar:hover,.offer:hover{transform:none!important} } /* ============================================================ ÉLÉVATION 2 — Retenue façon Animo (Exaggerated Minimalism). Leçon de la référence : la sophistication vient de la typo, du vide et des filets fins, pas du clinquant. On garde l'orange comme signature, on calme les effets, on hausse la lecture. ============================================================ */ /* Typo d'affichage : tracking plus serré, plus premium */ h1,.hero.photo h1{letter-spacing:-.025em} h2{letter-spacing:-.018em} .hero.photo .hcopy{max-width:640px} .hero p.lede{max-width:48ch} /* Survols plus calmes (moins de saut, halo plus discret) */ .imp:hover,.value:hover,.pillar:hover,.offer:hover{transform:translateY(-4px);border-color:rgba(196,240,74,.42);box-shadow:0 16px 40px -22px rgba(0,0,0,.6)} /* Reflet balayant plus léger */ .imp::before,.value::before,.pillar::before,.offer::before,.opt::before{background:linear-gradient(105deg,transparent,rgba(255,255,255,.06),transparent)} /* --- Pitch chiffré : bande sobre, filets fins, chiffres tabulaires --- */ .pitchbar{background:#0d0f0a;padding:clamp(36px,5vw,66px) 0} .pitchbar .pitch{display:grid;grid-template-columns:repeat(4,1fr);gap:0} .pitch .pt{padding:clamp(18px,2.2vw,26px) clamp(20px,2.6vw,34px);border-right:1px solid rgba(196,240,74,.15);display:flex;flex-direction:column;gap:11px} .pitch .pt:last-child{border-right:none} .pitch .pt::before{content:"";width:32px;height:3px;background:var(--copper);border-radius:2px} .pitch .pf{font-family:"Hanken Grotesk",sans-serif;font-weight:800;font-size:clamp(46px,6.2vw,86px);line-height:.84;letter-spacing:-.045em;color:var(--copper);font-variant-numeric:tabular-nums} .pitch .pl{font-size:14.5px;color:#d6dac8;line-height:1.45;max-width:22ch} @media(max-width:760px){ .pitchbar .pitch{grid-template-columns:1fr 1fr} .pitch .pt{border-bottom:1px solid rgba(196,240,74,.15)} .pitch .pt:nth-child(2n){border-right:none} .pitch .pt:nth-last-child(-n+2){border-bottom:none} } @media(max-width:420px){ .pitchbar .pitch{grid-template-columns:1fr} .pitch .pt{border-right:none} .pitch .pt:nth-child(-n+3){border-bottom:1px solid rgba(196,240,74,.15)} } /* --- Modèle : socle + à la carte, deux colonnes à filet --- */ .model{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,4vw,44px);margin-top:42px} @media(max-width:720px){.model{grid-template-columns:1fr;gap:26px}} .mo{border-top:1px solid var(--line2);padding-top:24px} .mo .mk{font-family:"Hanken Grotesk",sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--copper);margin-bottom:12px} .mo h4{font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:clamp(20px,2.4vw,24px);margin:0 0 10px;color:var(--mineral);letter-spacing:-.01em} .mo p{font-size:15px;color:#adb4bf;margin:0;max-width:44ch} /* --- Membres fondateurs : carte chaude, sobre, sans fausse urgence --- */ .founder{padding-top:clamp(72px,9vw,104px)} .founder-card{position:relative;overflow:hidden;display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(28px,4vw,56px);align-items:center; background:linear-gradient(150deg,#20241a,#12140c);border:1px solid rgba(196,240,74,.30);border-radius:26px;padding:clamp(30px,5vw,58px);box-shadow:0 40px 90px -46px rgba(196,240,74,.30)} .founder-card::before{content:"";position:absolute;inset:-30% auto auto -10%;width:60%;height:120%;background:radial-gradient(50% 50% at 30% 30%,rgba(196,240,74,.14),transparent 70%);pointer-events:none} .founder-copy{position:relative;z-index:1} .founder-card h2{margin-bottom:14px} .founder-list{position:relative;z-index:1;list-style:none;margin:0;padding:0} .founder-list li{position:relative;padding:15px 0 15px 30px;border-bottom:1px solid var(--line);font-size:15px;color:#d9dce1;line-height:1.5} .founder-list li:last-child{border-bottom:none} .founder-list li::before{content:"";position:absolute;left:0;top:21px;width:8px;height:8px;background:var(--orange);border-radius:2px;box-shadow:0 0 10px rgba(196,240,74,.5)} @media(max-width:820px){.founder-card{grid-template-columns:1fr;gap:22px}} /* --- Infos pratiques : grille à filets, sobre --- */ .infos{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:42px;border-top:1px solid var(--line)} .info{padding:26px clamp(18px,2vw,26px) 8px 0;border-right:1px solid var(--line)} .infos .info:last-child{border-right:none;padding-right:0} .info h4{font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--copper);margin:0 0 12px} .info p{font-size:15px;color:#c3c8d0;margin:0 0 12px;line-height:1.55} .info .ilink{display:inline-block;font-size:14px;color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(243,239,231,.25);padding-bottom:1px;transition:border-color .15s} .info .ilink:hover{border-color:var(--cyan)} @media(max-width:820px){ .infos{grid-template-columns:1fr 1fr} .info{border-right:none;border-bottom:1px solid var(--line);padding-right:0} .infos .info:nth-child(odd){border-right:1px solid var(--line);padding-right:clamp(18px,2vw,26px)} .infos .info:nth-last-child(-n+2){border-bottom:none} } @media(max-width:520px){ .infos{grid-template-columns:1fr} .info,.infos .info:nth-child(odd){border-right:none;padding-right:0} .info:not(:last-child){border-bottom:1px solid var(--line)} .infos .info:nth-last-child(2){border-bottom:1px solid var(--line)} } /* --- Carte + infos pratiques (carte à gauche, colonne infos à droite) --- */ .mapinfo-grid{display:grid;grid-template-columns:1.25fr .9fr;gap:clamp(28px,4vw,56px);align-items:center;margin-top:40px} .map-frame{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line2);min-height:clamp(360px,52vh,520px);background:#0e0f11;box-shadow:var(--sh-2)} .map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.18) contrast(1.04) brightness(.98)} .map-open{position:absolute;left:14px;bottom:14px;z-index:2;font-family:"Hanken Grotesk",sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:#111;background:var(--cyan);border-radius:6px;padding:9px 14px;text-decoration:none;box-shadow:var(--sh-1);transition:transform .15s var(--e-out)} .map-open:hover{transform:translateY(-1px)} .mapinfo-copy .mi{margin-bottom:26px} .mapinfo-copy .mi h4{font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:18px;letter-spacing:-.01em;color:var(--mineral);margin:0 0 8px} .mapinfo-copy .mi p{font-size:16px;color:#c3c8d0;line-height:1.62;margin:0} .mapinfo-copy .btn{margin-top:8px} @media(max-width:820px){ .mapinfo-grid{grid-template-columns:1fr;gap:26px} .map-frame{min-height:320px} } /* ============================================================ PHOTOS — traitement chaud et brut (façon DA : grain, chaleur, corps réels). S'applique partout (accueil clair + pages sombres). ============================================================ */ .hero.photo .bg,.photoband .pb-bg,.shot img{filter:saturate(1.05) contrast(1.07) brightness(.97) sepia(.10)} /* ============================================================ THÈME CLAIR (accueil sobre façon Animo) — scopé à body.lp. Fond crème, texte sombre, lime en accent ponctuel. Les blocs à fond sombre (hero photo, bandes photo, CTA, fondateurs) gardent un texte clair. ============================================================ */ body.lp{background:#f4f2ea;color:#1a1c12; --graphite:#ffffff;--graphite2:#f7f5ee;--panel:#ffffff; --line:rgba(22,24,14,.11);--line2:rgba(22,24,14,.17);--muted:#6c7060} /* Texte de base sombre sur crème */ body.lp p,body.lp .lead{color:#43483a} body.lp h1,body.lp h2,body.lp h3,body.lp h4,body.lp .quote,body.lp .disp{color:#181a10} body.lp .quote em{color:#5c6b2b} body.lp .lead{color:#42473a} /* Kickers : olive lisible sur crème (le carré reste lime) */ body.lp .tag,body.lp .eyebrow{color:#3a4023} body.lp h1 em,body.lp h2 em{color:#586a26} /* Sous-titres / labels discrets */ body.lp .osub,body.lp .pitch .pl,body.lp .mapinfo-copy .mi p,body.lp .m .md,body.lp .stat .cap,body.lp .step p,body.lp .imp p,body.lp .offer p,body.lp .pillar p,body.lp .value p,body.lp .mo p,body.lp .opt p,body.lp .wy p,body.lp .why p{color:#4b5041} body.lp .pitch .pf{color:#181a10} /* La barre de chiffres reste sombre meme en thème clair : gros chiffres lime, libellés clairs */ body.lp .pitchbar .pitch .pf{color:var(--copper)} body.lp .pitchbar .pitch .pl{color:#d6dac8} /* Cartes claires : ombre douce + filet sombre */ body.lp .imp,body.lp .value,body.lp .pillar,body.lp .opt,body.lp .panel,body.lp .m{box-shadow:0 1px 2px rgba(22,24,14,.05),0 12px 30px -20px rgba(22,24,14,.25)} body.lp .offer{background:#fff} body.lp .opt.reco{box-shadow:0 0 0 1px rgba(88,106,38,.4),0 24px 60px -30px rgba(88,106,38,.35)} body.lp .opt .badge{background:var(--olive);color:#eef0e4} /* Bandes claires : quasi crème + filet lime discret conservé */ body.lp .band{background:linear-gradient(150deg,#fbfaf4,#f1efe6)} /* Boutons ghost lisibles sur clair */ body.lp .btn.ghost{color:#1a1c12;border-color:rgba(22,24,14,.28)} body.lp .btn.ghost:hover{background:rgba(88,106,38,.08);border-color:#586a26;color:#1a1c12} /* Exception : ghost posé sur la photo du hero -> version claire, lisible sur l'image sombre */ body.lp .hero.photo .btn.ghost,.hero.photo .btn.ghost{color:#fff;border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.06);backdrop-filter:blur(2px)} body.lp .hero.photo .btn.ghost:hover,.hero.photo .btn.ghost:hover{color:var(--ink);background:var(--copper);border-color:var(--copper)} /* Liens accent en olive lisible */ body.lp .info .ilink,body.lp .faq-a a{color:#586a26} /* Header : garde un bandeau sombre (contraste net au-dessus du hero photo) */ body.lp header.nav{background:rgba(18,20,12,.86)} /* Nav links lisibles sur bandeau sombre */ body.lp .nav nav a{color:#c9ccbe} body.lp .nav nav a:hover,body.lp .nav nav a.on{color:#fff} /* Séparateur clair */ body.lp .divider{background:linear-gradient(90deg,transparent,rgba(22,24,14,.16),transparent)} body.lp .steps{border-top-color:rgba(22,24,14,.14)} body.lp .step{border-right-color:rgba(22,24,14,.12)} body.lp .founder-list li{color:#e8ebe0} /* Re-clarté des BLOCS À FOND SOMBRE dans le thème clair (texte reste clair) */ body.lp .hero.photo .hero-promise{color:#fff} body.lp .hero.photo p.lede{color:#e9e9e1} body.lp .hero.photo .eyebrow{color:#c4f04a} body.lp .photoband .pb-copy h2,body.lp .cta-band h2,body.lp .founder-card h2{color:#fff} body.lp .photoband .pb-copy p{color:#eef0e4} body.lp .photoband .tag,body.lp .cta-band .tag,body.lp .founder-card .tag{color:#c4f04a} body.lp .cta-band p,body.lp .founder-card .lead{color:#e7e9e0} body.lp .founder-card h2 em{color:#c4f04a} /* --- Cartes tarifaires (paiements ponctuels), façon Animo --- */ .pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px} @media(max-width:900px){.pcards{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.pcards{grid-template-columns:1fr}} .pcard{position:relative;overflow:hidden;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px 24px;transition:transform .25s var(--e-out),border-color .25s var(--e-out),box-shadow .3s var(--e-out)} .pcard::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.06),transparent 42%);pointer-events:none} .pcard:hover{transform:translateY(-4px);border-color:rgba(196,240,74,.5)} .pc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .pc-top h4{font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:21px;color:var(--mineral);margin:0;letter-spacing:-.01em} .pc-badge{flex:none;font-family:"Hanken Grotesk",sans-serif;font-size:11px;letter-spacing:.04em;color:var(--muted);background:rgba(233,225,210,.08);border:1px solid var(--line);border-radius:100px;padding:4px 11px;white-space:nowrap} .pc-sub{font-size:13px;color:var(--copper);letter-spacing:.02em;margin:8px 0 12px} .pc-detail{font-size:14px;color:#adb4bf;line-height:1.55;margin:0;flex:1} .pc-price{font-family:"Hanken Grotesk",sans-serif;font-weight:700;font-size:34px;line-height:1;color:var(--mineral);font-variant-numeric:tabular-nums;text-align:right;margin:24px 0 0} .pc-unit{font-family:"Hanken Grotesk",sans-serif;font-size:13px;color:var(--muted);text-align:right;margin:4px 0 0;letter-spacing:.01em} .pcard .btn{align-self:stretch;text-align:center;border-radius:100px;margin-top:16px} /* Filigrane diagonal discret façon Animo */ .pcard::after{content:"";position:absolute;right:-40px;top:-30px;width:180px;height:180px;background:linear-gradient(135deg,transparent 46%,rgba(196,240,74,.10) 46% 54%,transparent 54%);pointer-events:none;z-index:0} .pcard>*{position:relative;z-index:1} /* Version claire (page offres) */ body.lp .pcard{background:#f2f2ec;box-shadow:none;border-color:rgba(22,24,14,.09)} body.lp .pcard::after{background:linear-gradient(135deg,transparent 46%,rgba(22,24,14,.05) 46% 54%,transparent 54%)} body.lp .pc-top h4{color:#181a10} body.lp .pc-badge{color:#5a5f4d;background:rgba(22,24,14,.05);border-color:rgba(22,24,14,.12)} body.lp .pc-sub{color:#586a26} body.lp .pc-detail{color:#575c4c} body.lp .pc-price{color:#181a10} body.lp .pc-unit{color:#6c7060} /* Petits labels/numéros lime dans les cartes claires -> olive lisible */ body.lp .opt .kick,body.lp .value .vn,body.lp .vs .vsn,body.lp .pillar .num,body.lp .pillar .who,body.lp .offer h4 span,body.lp .role h4,body.lp .chip{color:#586a26} body.lp .step .n{background:none;-webkit-text-fill-color:#586a26;color:#586a26} body.lp .stat .fig{color:#181a10} body.lp .chip{border-color:rgba(88,106,38,.4)} /* Cartes offer/pillar claires (elles ont un fond dégradé sombre par défaut) */ body.lp .offer,body.lp .pillar{background:#fff} /* Bandes photo / cartes recovery gardent leur fond sombre : textes clairs */ body.lp .rec-card{background:#20241a;border-color:rgba(196,240,74,.28)} body.lp .rec-card h3{color:#fff} body.lp .checks li{color:#e7e9e0} /* ============================================================ HERO FUSIONNÉ (façon Animo) — nav transparente par-dessus une photo plein cadre, qui devient opaque au scroll. Scopé aux pages avec .hero.photo (classe body.has-hero posée par motion.js). Les liens restent cliquables. ============================================================ */ header.nav,header.nav::after{transition:background .35s var(--e-out),backdrop-filter .35s var(--e-out),border-color .35s var(--e-out),opacity .35s var(--e-out)} body.has-hero header.nav{position:fixed;left:0;right:0;top:0;background:transparent;backdrop-filter:none;border-bottom-color:transparent} body.has-hero header.nav::after{opacity:0} body.has-hero header.nav.scrolled{background:rgba(15,15,16,.9);backdrop-filter:blur(12px);border-bottom-color:var(--line)} body.has-hero header.nav.scrolled::after{opacity:1} body.lp.has-hero header.nav.scrolled{background:rgba(18,20,12,.92)} /* La photo passe sous la nav et remplit le cadre */ .hero.photo{min-height:100vh;min-height:100svh} @media(max-width:640px){.hero.photo{min-height:92svh}} /* Réseaux sociaux (footer) — injectés par motion.js, liens à raccorder */ footer .social{display:flex;gap:12px;margin-top:18px} footer .social a{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;color:#c3c8d0;border:1px solid var(--line);border-radius:9px;transition:color .2s var(--e-out),background .2s var(--e-out),border-color .2s var(--e-out),transform .2s var(--e-out)} footer .social a:hover{color:var(--ink);background:var(--orange);border-color:var(--orange);transform:translateY(-2px)} footer .social svg{width:18px;height:18px;display:block} /* Correctifs lisibilité thème clair : titres en gras des panneaux + texte du bouton nav */ body.lp .panel li b{color:#181a10} body.lp .contact-card li b{color:#181a10} body.lp .nav nav a.btn.copper{color:var(--ink)} body.lp .m .mh,body.lp .rec-card h3{color:#181a10} /* ============================================================ PAGE SERVICES — grille de cartes avec image (façon Animo) ============================================================ */ .svcgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px} @media(max-width:860px){.svcgrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.svcgrid{grid-template-columns:1fr}} .svc{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .25s var(--e-out),border-color .25s var(--e-out),box-shadow .3s var(--e-out)} .svc:hover{transform:translateY(-5px);border-color:rgba(196,240,74,.5);box-shadow:var(--sh-2)} .svc-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0e0f11} .svc-img img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.06) brightness(.97) sepia(.08);transition:transform 1s var(--e-out)} .svc:hover .svc-img img{transform:scale(1.05)} .svc-badge{position:absolute;top:12px;left:12px;z-index:2;font-family:"Hanken Grotesk",sans-serif;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--orange);border-radius:100px;padding:5px 11px} .svc-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1} .svc-body h3{font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:19px;color:var(--mineral);margin:0 0 6px;letter-spacing:-.01em} .svc-body p{font-size:14px;color:#adb4bf;margin:0 0 16px;flex:1;line-height:1.55} .svc-arr{font-family:"Hanken Grotesk",sans-serif;font-size:12.5px;color:var(--copper);letter-spacing:.03em} .svc.soon{cursor:default} .svc.soon .svc-img img{filter:grayscale(.35) brightness(.86) contrast(1.02)} .svc.soon .svc-badge{color:var(--mineral);background:rgba(238,240,228,.14);backdrop-filter:blur(4px)} /* Bloc service détaillé (façon Hijama) : image + texte + bénéfices */ .svc-feature{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,4vw,52px);align-items:center;margin-top:8px} @media(max-width:820px){.svc-feature{grid-template-columns:1fr;gap:26px}} .svc-feature .shot{margin:0} .svc-points{list-style:none;margin:22px 0 0;padding:0} .svc-points li{border-left:2px solid var(--orange);padding:2px 0 2px 16px;margin-bottom:18px} .svc-points b{display:block;font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:16px;color:var(--mineral);margin-bottom:3px} .svc-points span{font-size:14.5px;color:#adb4bf} /* Thème clair */ body.lp .svc{background:#fff;box-shadow:0 1px 2px rgba(22,24,14,.05),0 14px 32px -22px rgba(22,24,14,.25)} body.lp .svc-body h3{color:#181a10} body.lp .svc-body p,body.lp .svc-points span{color:#575c4c} body.lp .svc-points b{color:#181a10} body.lp .svc.soon .svc-badge{color:#181a10;background:rgba(22,24,14,.08)} /* Hero centré façon Animo (accueil) : image mise en avant, texte centré, plus petit, lisible */ .hero.photo.centered .hcopy{max-width:900px;margin:0 auto;text-align:center} .hero.photo.centered h1{font-size:clamp(30px,4.4vw,54px);-webkit-text-fill-color:#fff;color:#fff;background:none;text-shadow:0 2px 22px rgba(0,0,0,.55)} .hero.photo.centered h1 em{-webkit-text-fill-color:var(--copper);color:var(--copper)} .hero.photo.centered .cta{justify-content:center} /* Image affichée en entier (visage complet + baseline incrustée), pas de rognage */ .hero.photo.centered{background:#0d0f0a} .hero.photo.centered .bg{background-size:cover!important;background-position:center 32%!important;background-repeat:no-repeat!important;animation:none;transform:none} .hero.photo.centered .scrim{background:linear-gradient(180deg,rgba(10,11,8,.5) 0%,rgba(10,11,8,.26) 30%,rgba(10,11,8,.26) 66%,rgba(10,11,8,.55) 100%)} /* ============================================================ MENU MOBILE (hamburger) — bouton injecté par motion.js, overlay plein écran ============================================================ */ .burger{display:none} @media(max-width:820px){ .burger{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:transparent;border:0;cursor:pointer;position:relative;z-index:120} .burger span{display:block;width:24px;height:2px;background:var(--mineral);border-radius:2px;transition:transform .3s var(--e-out),opacity .2s} body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} body.menu-open .burger span:nth-child(2){opacity:0} body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* le