/* ============================================================ PCS XPRESS — Stylesheet principal Brand: Rouge #A90707 + Or #C9A24E Typo: Montserrat Alternates (headings) + Roboto (body) ============================================================ */ /* --- 1. RESET --- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{font-family:var(--font-body);font-size:16px;line-height:1.6;color:var(--color-gray-900);background:var(--color-white);-webkit-font-smoothing:antialiased} img,svg{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;border:none;background:none} ul,ol{list-style:none} table{border-collapse:collapse;width:100%} /* --- 2. FONTS --- */ /* Montserrat Alternates & Roboto sont chargées via Google Fonts CDN dans le de chaque page. Voir : https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@400;500;600;700;800&family=Roboto:wght@300;400;500;700 Pour un hébergement self-hosted, placer les .woff2 dans assets/fonts/ et restaurer les @font-face ici. */ /* --- 3. DESIGN TOKENS --- */ :root{ /* Couleurs primaires */ --color-red:#A90707; --color-red-vivid:#CF2E2E; --color-red-coral:#FF5A5F; --color-gold:#C9A24E; --color-gold-light:#E8D4A2; --color-gold-cream:#FAF4E4; --color-gold-dark:#8B6E2E; --color-black:#0E0E0E; --color-white:#FFFFFF; /* Gris */ --color-gray-50:#FAFAFA; --color-gray-100:#F4F4F5; --color-gray-200:#E4E4E7; --color-gray-300:#D4D4D8; --color-gray-400:#A1A1AA; --color-gray-500:#71717A; --color-gray-600:#52525B; --color-gray-700:#3F3F46; --color-gray-800:#27272A; --color-gray-900:#18181B; /* Sémantique */ --color-success:#22C55E; --color-warning:#F59E0B; --color-error:#EF4444; /* Gradients signature */ --gradient-hero:linear-gradient(135deg,#FF5A5F 0%,#A90707 100%); --gradient-gold:linear-gradient(135deg,#E8D4A2 0%,#C9A24E 100%); --gradient-hero-soft:linear-gradient(135deg,#FFFFFF 0%,#FFE0D6 50%,#FF5A5F 100%); /* Typographie */ --font-display:'Montserrat Alternates',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --font-body:'Roboto','Helvetica Neue',Arial,sans-serif; --font-mono:'OCR-B','Courier New',monospace; /* Espacements */ --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem; --space-32:8rem; /* Rayons */ --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-xl:32px; --radius-pill:9999px; /* Ombres */ --shadow-sm:0 1px 2px rgba(14,14,14,0.05); --shadow-md:0 4px 12px rgba(14,14,14,0.08); --shadow-lg:0 12px 32px rgba(14,14,14,0.12); --shadow-xl:0 24px 60px rgba(14,14,14,0.16); --shadow-gold:0 8px 24px rgba(201,162,78,0.25); --shadow-red:0 8px 24px rgba(169,7,7,0.25); /* Conteneurs */ --container-max:1200px; /* Transitions */ --transition-fast:150ms ease; --transition-base:250ms ease; --transition-slow:400ms ease; /* Header height */ --header-height:80px; } /* --- 4. BASE TYPOGRAPHY --- */ h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;line-height:1.2;color:var(--color-black);letter-spacing:-0.01em} h1{font-size:clamp(2.25rem,5vw,4rem);font-weight:800;line-height:1.1;letter-spacing:-0.02em} h2{font-size:clamp(1.875rem,3.5vw,3rem)} h3{font-size:clamp(1.5rem,2.5vw,2rem)} h4{font-size:1.25rem;font-weight:600} h5{font-size:1.125rem;font-weight:600} p{margin-bottom:var(--space-4)} .lead{font-size:1.125rem;line-height:1.65;color:var(--color-gray-600)} .small{font-size:.875rem;color:var(--color-gray-600)} .text-center{text-align:center} .text-white{color:var(--color-white)} .text-red{color:var(--color-red)} .text-gold{color:var(--color-gold)} .text-gold-dark{color:var(--color-gold-dark)} /* --- 5. LAYOUT --- */ .container{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-4)} @media(min-width:768px){.container{padding:0 var(--space-8)}} section{padding:var(--space-12) 0} @media(min-width:768px){section{padding:var(--space-16) 0}} @media(min-width:1024px){section{padding:var(--space-20) 0}} .section-header{text-align:center;margin-bottom:var(--space-12);max-width:720px;margin-left:auto;margin-right:auto} .section-header p{color:var(--color-gray-600);font-size:1.125rem;margin-top:var(--space-3)} /* --- 6. BUTTONS --- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:14px 32px;font-family:var(--font-display);font-weight:600;font-size:1rem;line-height:1;border-radius:var(--radius-pill);transition:all var(--transition-base);cursor:pointer;white-space:nowrap;text-decoration:none;border:2px solid transparent} .btn-primary{background:var(--color-red);color:var(--color-white)} .btn-primary:hover{background:var(--color-red-vivid);transform:translateY(-2px);box-shadow:var(--shadow-red)} .btn-secondary{background:var(--color-white);color:var(--color-black);border-color:var(--color-black)} .btn-secondary:hover{background:var(--color-black);color:var(--color-white)} .btn-outline-red{background:transparent;color:var(--color-red);border-color:var(--color-red)} .btn-outline-red:hover{background:var(--color-red);color:var(--color-white)} .btn-gold{background:var(--color-gold);color:var(--color-black)} .btn-gold:hover{background:var(--color-gold-dark);color:var(--color-white);transform:translateY(-2px);box-shadow:var(--shadow-gold)} .btn-ghost{background:transparent;color:var(--color-black)} .btn-ghost:hover{background:var(--color-gray-100)} .btn-lg{padding:18px 40px;font-size:1.125rem} .btn-sm{padding:10px 20px;font-size:.875rem} /* --- 7. HEADER --- */ .site-header{position:sticky;top:0;z-index:100;background:var(--color-white);border-bottom:1px solid var(--color-gray-200);height:var(--header-height);display:flex;align-items:center} .site-header .container{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);width:100%} .site-header .logo img{height:48px;width:auto} .main-nav{display:none;gap:var(--space-6);align-items:center} @media(min-width:1024px){.main-nav{display:flex}} .main-nav a{font-family:var(--font-display);font-weight:500;font-size:.9375rem;color:var(--color-gray-800);transition:color var(--transition-fast);padding:8px 0;position:relative} .main-nav a:hover,.main-nav a.active{color:var(--color-red)} .main-nav a.active::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:3px;background:var(--color-red);border-radius:2px} .header-actions{display:flex;align-items:center;gap:var(--space-3)} .country-flag{display:none;align-items:center;gap:var(--space-1);font-size:.875rem;color:var(--color-gray-600)} @media(min-width:1024px){.country-flag{display:inline-flex}} .account-link{display:none;align-items:center;gap:var(--space-2);font-size:.875rem;color:var(--color-gray-700)} @media(min-width:1024px){.account-link{display:inline-flex}} .account-link .avatar{width:32px;height:32px;border-radius:50%;background:var(--color-gray-200);display:flex;align-items:center;justify-content:center;font-size:16px} /* Hamburger */ .nav-toggle{display:flex;flex-direction:column;gap:4px;padding:10px;cursor:pointer} .nav-toggle span{display:block;width:24px;height:2px;background:var(--color-black);border-radius:2px;transition:all var(--transition-base)} @media(min-width:1024px){.nav-toggle{display:none}} /* Mobile nav */ .main-nav.is-open{display:flex;flex-direction:column;position:fixed;top:var(--header-height);left:0;right:0;background:var(--color-white);padding:var(--space-6);box-shadow:var(--shadow-lg);gap:var(--space-4);max-height:calc(100vh - var(--header-height));overflow-y:auto} .main-nav.is-open a{padding:var(--space-3) 0;border-bottom:1px solid var(--color-gray-100);width:100%} /* --- 8. HERO --- */ .hero{position:relative;padding:var(--space-16) 0 var(--space-20);overflow:hidden;background:var(--color-white)} .hero-inner{display:grid;gap:var(--space-10);align-items:center} @media(min-width:1024px){.hero-inner{grid-template-columns:1fr 1fr}} .hero-text{position:relative;z-index:2} .hero-eyebrow{font-family:var(--font-body);font-size:1rem;color:var(--color-gray-700);margin-bottom:var(--space-3);font-weight:400} .hero h1{margin-bottom:var(--space-4)} .hero-hashtag{color:var(--color-red);font-weight:800} .hero-price{font-family:var(--font-display);font-weight:700;color:var(--color-gold-dark);font-size:1.25rem;margin-bottom:var(--space-6);letter-spacing:0.05em} .hero-ctas{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-6)} .hero-trust{display:flex;align-items:center;gap:var(--space-3);font-size:.875rem;color:var(--color-gray-600)} .hero-trust-stars{color:#00B67A;font-size:1.25rem;letter-spacing:2px} .hero-visual{position:relative;display:flex;justify-content:center;align-items:center} .hero-visual::before{content:'';position:absolute;inset:0;background:var(--gradient-hero);border-radius:var(--radius-xl);transform:rotate(-2deg);z-index:1;opacity:0.95} .hero-visual img{position:relative;z-index:2;max-width:90%;filter:drop-shadow(0 20px 40px rgba(0,0,0,.3))} /* Hero variant: gradient full */ .hero-gradient{background:var(--gradient-hero);color:var(--color-white)} .hero-gradient h1,.hero-gradient h2{color:var(--color-white)} .hero-gradient .hero-eyebrow{color:rgba(255,255,255,.9)} .hero-gradient .hero-price{color:var(--color-gold-light)} /* --- 9. TOUT SIMPLEMENT (Accueil section 2) --- */ .simple-promise{max-width:680px;margin:0 auto;padding:var(--space-12) 0} .simple-promise h2{text-align:center;margin-bottom:var(--space-10)} .simple-list{display:flex;flex-direction:column;gap:var(--space-8)} .simple-item{display:flex;gap:var(--space-4);align-items:flex-start} .simple-item .check{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--color-gold-light);color:var(--color-gold-dark);display:flex;align-items:center;justify-content:center;font-weight:700;margin-top:4px} .simple-item h4{margin-bottom:var(--space-1)} .simple-item p{color:var(--color-gray-600);margin:0} /* --- 10. UNIVERS CARD (section 3) --- */ .univers{background:var(--gradient-hero);color:var(--color-white);text-align:center} .univers h2{color:var(--color-white);margin-bottom:var(--space-2)} .univers .subtitle{font-size:1.125rem;color:rgba(255,255,255,.9);margin-bottom:var(--space-10)} .univers-card-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--space-6)} .univers-card-wrap img{max-width:400px;filter:drop-shadow(0 30px 50px rgba(0,0,0,.35))} .univers-meta{text-align:center} .univers-meta h3{color:var(--color-white);margin-bottom:var(--space-2);font-size:1.25rem;font-weight:600} .univers-meta .price{font-size:2rem;font-weight:800;color:var(--color-gold-light);margin:var(--space-3) 0} .univers-meta .muted{color:rgba(255,255,255,.85);font-size:.9375rem} /* --- 11. BÉNÉFICES GRID --- */ .benefits{background:var(--color-gold-cream)} .benefits h2{text-align:center} .benefits .subtitle{text-align:center;color:var(--color-gray-700);margin-bottom:var(--space-12);font-size:1.125rem} .benefits-grid{display:grid;grid-template-columns:1fr;gap:var(--space-8);max-width:960px;margin:0 auto} @media(min-width:640px){.benefits-grid{grid-template-columns:1fr 1fr}} @media(min-width:1024px){.benefits-grid{grid-template-columns:1fr 1fr 1fr}} .benefit{text-align:center;padding:var(--space-4)} .benefit-icon{width:72px;height:72px;border-radius:50%;background:var(--color-white);display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto var(--space-4);box-shadow:var(--shadow-md);color:var(--color-red)} .benefit h4{margin-bottom:var(--space-2);font-size:1.0625rem} .benefit p{font-size:.9375rem;color:var(--color-gray-700);margin:0} .benefits-cta{text-align:center;margin-top:var(--space-12)} /* --- 12. APP TEASER --- */ .app-teaser{background:var(--color-white);position:relative;overflow:hidden} .app-teaser::after{content:'';position:absolute;top:0;right:-20%;width:80%;height:100%;background:var(--gradient-hero);border-radius:0 0 0 50%;z-index:1} .app-teaser .container{position:relative;z-index:2} .app-teaser-inner{display:grid;gap:var(--space-10);align-items:center} @media(min-width:1024px){.app-teaser-inner{grid-template-columns:1.2fr 1fr}} .app-teaser-text p{font-size:1.25rem;line-height:1.5;color:var(--color-gray-800);margin-bottom:var(--space-6)} .app-badges{display:flex;flex-direction:column;gap:var(--space-6);margin-top:var(--space-6)} .app-features{display:flex;gap:var(--space-4);margin-bottom:var(--space-6);flex-wrap:wrap} .feature-pill{background:var(--color-white);border:2px solid var(--color-gray-200);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);text-align:center;min-width:140px;box-shadow:var(--shadow-sm)} .feature-pill strong{display:block;font-size:1.25rem;font-family:var(--font-display);color:var(--color-black)} .feature-pill span{font-size:.875rem;color:var(--color-gray-600)} .app-teaser-visual{position:relative;z-index:3;text-align:center;color:var(--color-white)} .app-teaser-visual h3{color:var(--color-white);font-size:1.25rem;font-weight:400;margin-bottom:var(--space-2)} .app-teaser-visual h3 strong{display:block;font-size:2rem;font-weight:800;margin-top:var(--space-2)} .store-badges{display:flex;flex-direction:column;gap:var(--space-3);align-items:center;margin-top:var(--space-6)} .store-badges img{max-height:56px;width:auto} /* --- 13. COMMENT ÇA MARCHE (timeline) --- */ .how-it-works{background:var(--color-white)} .how-it-works .section-header{margin-bottom:var(--space-16)} .timeline{max-width:640px;margin:0 auto;position:relative} .timeline::before{content:'';position:absolute;left:32px;top:20px;bottom:20px;width:2px;background:var(--color-gray-200)} .timeline-step{display:flex;gap:var(--space-6);margin-bottom:var(--space-10);position:relative} .timeline-step:last-child{margin-bottom:0} .timeline-step .dot{flex-shrink:0;width:64px;height:64px;border-radius:50%;background:var(--color-red);color:var(--color-white);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:1.5rem;position:relative;z-index:1;box-shadow:var(--shadow-red)} .timeline-step .content{padding-top:var(--space-3)} .timeline-step p{color:var(--color-gray-700);margin:0;font-size:1.0625rem} .how-cta{text-align:center;margin-top:var(--space-10)} /* --- 14. BENEFITS CARDS (grid with box) --- */ .features-box{background:var(--color-gold-cream)} .features-box h2{text-align:center;margin-bottom:var(--space-12)} .features-grid{display:grid;gap:var(--space-5);grid-template-columns:1fr;max-width:1040px;margin:0 auto} @media(min-width:640px){.features-grid{grid-template-columns:1fr 1fr}} @media(min-width:1024px){.features-grid{grid-template-columns:1fr 1fr 1fr 1fr}} .feature-card{background:var(--color-white);border:1px solid var(--color-gold-light);border-radius:var(--radius-lg);padding:var(--space-6);text-align:center;box-shadow:var(--shadow-sm);transition:all var(--transition-base)} .feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .feature-card strong{display:block;font-family:var(--font-display);font-weight:700;color:var(--color-black);line-height:1.3;font-size:.9375rem} .features-cta{text-align:center;margin-top:var(--space-10)} .features-cta a{color:var(--color-red);font-weight:700;font-family:var(--font-display);font-size:1.125rem;text-decoration:underline} /* --- 15. RETRAIT PITCH --- */ .retrait-pitch{background:var(--color-gold-light);text-align:center} .retrait-pitch h2{max-width:800px;margin:0 auto var(--space-6);color:var(--color-black)} .retrait-pitch .inner{max-width:640px;margin:0 auto;background:var(--color-white);border-radius:var(--radius-lg);padding:var(--space-8);box-shadow:var(--shadow-md)} .retrait-pitch p{color:var(--color-gray-700);font-size:1.0625rem;margin-bottom:var(--space-4)} .retrait-pitch .highlight{font-family:var(--font-display);font-weight:700;color:var(--color-red);font-size:1.125rem;margin-top:var(--space-4)} .retrait-pitch .hashtag{margin-top:var(--space-8);font-family:var(--font-display);font-weight:800;font-size:1.75rem;color:var(--color-black)} .retrait-pitch .hashtag span{color:var(--color-red)} /* --- 16. TESTIMONIALS --- */ .testimonials{background:var(--color-white)} .testimonials h2{text-align:center;margin-bottom:var(--space-12)} .testimonials h2 .heart{color:var(--color-red)} .testimonials-grid{display:grid;gap:var(--space-5);grid-template-columns:1fr} @media(min-width:640px){.testimonials-grid{grid-template-columns:1fr 1fr}} @media(min-width:1024px){.testimonials-grid{grid-template-columns:1fr 1fr 1fr 1fr}} .testimonial{background:var(--color-gold-cream);border:1px solid var(--color-gold-light);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-sm)} .testimonial .stars{color:#FCB900;font-size:1.25rem;letter-spacing:1px;margin-bottom:var(--space-3)} .testimonial h5{margin-bottom:var(--space-2);color:var(--color-black);font-size:.9375rem} .testimonial p{font-size:.875rem;color:var(--color-gray-700);line-height:1.55;margin-bottom:var(--space-4)} .testimonial .author{display:flex;flex-direction:column;font-size:.8125rem;color:var(--color-gray-600);border-top:1px solid var(--color-gold-light);padding-top:var(--space-3)} .testimonial .author strong{color:var(--color-black);font-family:var(--font-display);font-size:.875rem} /* --- 17. SOCIAL FEED --- */ .social-feed{background:var(--color-white);text-align:center;padding-top:0} .social-feed h2{margin-bottom:var(--space-2)} .social-feed .hashtag-text{color:var(--color-gray-600);margin-bottom:var(--space-6)} .social-icons{display:flex;justify-content:center;gap:var(--space-4);margin-bottom:var(--space-8);font-size:1.5rem} .social-icons a{width:44px;height:44px;border-radius:50%;background:var(--color-gray-100);display:inline-flex;align-items:center;justify-content:center;color:var(--color-gray-700);transition:all var(--transition-fast)} .social-icons a:hover{background:var(--color-red);color:var(--color-white)} .social-grid{display:grid;grid-template-columns:1fr;gap:var(--space-3);max-width:900px;margin:0 auto} @media(min-width:640px){.social-grid{grid-template-columns:1fr 1fr 1fr}} .social-grid .tile{aspect-ratio:1;background:var(--color-gray-100);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;color:var(--color-gray-400);font-size:3rem;overflow:hidden} .social-grid .tile img{width:100%;height:100%;object-fit:cover} /* --- 18. FAQ --- */ .faq{background:var(--color-gray-50)} .faq h2{text-align:center;margin-bottom:var(--space-10)} .faq-list{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-3)} .faq-item{background:var(--color-white);border:1px solid var(--color-gray-200);border-radius:var(--radius-md);overflow:hidden;transition:all var(--transition-base)} .faq-item[open]{box-shadow:var(--shadow-md);border-color:var(--color-gold-light)} .faq-item summary{list-style:none;padding:var(--space-5) var(--space-6);font-family:var(--font-display);font-weight:600;color:var(--color-black);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);font-size:1rem} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:'▼';color:var(--color-red);font-size:.75rem;transition:transform var(--transition-base);flex-shrink:0} .faq-item[open] summary::after{transform:rotate(180deg)} .faq-body{padding:0 var(--space-6) var(--space-5);color:var(--color-gray-700);line-height:1.65} .faq-body p{margin-bottom:var(--space-3)} .faq-body p:last-child{margin-bottom:0} .faq-body strong{color:var(--color-black)} /* --- 19. FOOTER --- */ .site-footer{background:var(--color-black);color:var(--color-gray-300);padding:var(--space-16) 0 var(--space-8)} .site-footer .container{display:grid;gap:var(--space-10)} .footer-top{display:grid;gap:var(--space-10)} @media(min-width:768px){.footer-top{grid-template-columns:1fr 1fr 1fr}} .footer-col h5{color:var(--color-white);margin-bottom:var(--space-4);font-size:.875rem;text-transform:uppercase;letter-spacing:.1em} .footer-col ul{display:flex;flex-direction:column;gap:var(--space-2)} .footer-col a{color:var(--color-gray-400);font-size:.9375rem;transition:color var(--transition-fast)} .footer-col a:hover{color:var(--color-white)} .footer-contact p{margin:0;font-size:.9375rem;color:var(--color-gray-400)} .footer-contact .phone{color:var(--color-red-coral);font-family:var(--font-display);font-weight:700;font-size:1.125rem;margin-bottom:var(--space-2)} .footer-contact .hours{font-size:.8125rem;color:var(--color-gray-500);margin-top:var(--space-3)} .footer-actions{display:flex;flex-direction:column;gap:var(--space-3);align-items:flex-start} .footer-social{display:flex;gap:var(--space-3);margin-bottom:var(--space-4);font-size:1.25rem} .footer-social a{width:40px;height:40px;border-radius:50%;background:var(--color-gray-800);display:inline-flex;align-items:center;justify-content:center;color:var(--color-white)} .footer-social a:hover{background:var(--color-red)} .footer-bottom{border-top:1px solid var(--color-gray-800);padding-top:var(--space-6);display:grid;gap:var(--space-4)} .footer-trust{display:flex;justify-content:center;align-items:center;gap:var(--space-3);color:var(--color-gray-500);font-size:.875rem} .footer-legal{display:flex;gap:var(--space-6);align-items:flex-start;flex-wrap:wrap} .footer-legal img{height:32px;flex-shrink:0} .footer-legal-text{font-size:.75rem;color:var(--color-gray-500);line-height:1.5;max-width:900px} .footer-legal-text a{color:var(--color-gray-400)} .footer-legal-text a:hover{color:var(--color-white)} .footer-legal-links{display:flex;gap:var(--space-4);flex-wrap:wrap;font-size:.75rem;color:var(--color-gray-500);margin-top:var(--space-2)} /* --- 20. BREADCRUMB --- */ .breadcrumb{padding:var(--space-4) 0;font-size:.875rem;color:var(--color-gray-600)} .breadcrumb a{color:var(--color-gray-600)} .breadcrumb a:hover{color:var(--color-red)} .breadcrumb .sep{margin:0 var(--space-2);color:var(--color-gray-400)} /* --- 21. CARD PRESENTATION (Cartes page) --- */ .card-showcase{background:var(--gradient-hero);color:var(--color-white);border-radius:var(--radius-xl);padding:var(--space-12) var(--space-8);margin-bottom:var(--space-12)} .card-showcase-inner{display:grid;gap:var(--space-8);align-items:center} @media(min-width:768px){.card-showcase-inner{grid-template-columns:1fr 1fr}} .card-showcase h2,.card-showcase h3{color:var(--color-white)} .card-showcase .muted{color:rgba(255,255,255,.9)} .card-showcase .price{font-size:2.5rem;font-weight:800;font-family:var(--font-display);margin:var(--space-4) 0} .card-showcase .price-muted{font-size:1.125rem;color:rgba(255,255,255,.85);text-decoration:underline} .card-showcase-visual{text-align:center} .card-showcase-visual img{max-width:90%;filter:drop-shadow(0 24px 48px rgba(0,0,0,.4))} /* --- 22. INFO CARD (detail carte) --- */ .card-detail{padding:var(--space-12) 0;text-align:center} .card-detail .rocket{font-size:3rem;margin-bottom:var(--space-4);display:block} .card-detail h2{color:var(--color-red);margin-bottom:var(--space-6)} .card-detail .nums{display:inline-flex;align-items:center;gap:var(--space-4);margin:var(--space-6) 0;font-family:var(--font-display)} .card-detail .nums .big{font-size:4rem;font-weight:800;color:var(--color-black);line-height:1} .card-detail .nums .list{text-align:left;font-size:1.25rem;font-weight:600;color:var(--color-gray-800);line-height:1.5} .card-cta-box{background:var(--gradient-hero);color:var(--color-white);border-radius:var(--radius-xl);padding:var(--space-12) var(--space-8);margin-top:var(--space-12)} .card-cta-box-inner{display:grid;gap:var(--space-8);align-items:center} @media(min-width:768px){.card-cta-box-inner{grid-template-columns:2fr 1fr}} .card-cta-box h3{color:var(--color-white);font-size:clamp(1.5rem,3vw,2.25rem)} .card-cta-box .stats{display:flex;gap:var(--space-4);flex-wrap:wrap;margin:var(--space-5) 0} .card-cta-box .stat{background:var(--color-white);color:var(--color-black);padding:var(--space-5);border-radius:var(--radius-md);min-width:160px;text-align:center} .card-cta-box .stat strong{display:block;font-size:1.5rem;font-weight:800;font-family:var(--font-display)} .card-cta-box .stat span{font-size:.875rem;color:var(--color-gray-600)} .card-cta-box .card-visual img{max-width:100%} /* --- 23. LONG TEXT ARTICLE (SEO) --- */ .article{max-width:800px;margin:0 auto;padding:var(--space-16) var(--space-4)} .article h2{margin-bottom:var(--space-6)} .article h3{margin-top:var(--space-10);margin-bottom:var(--space-4);color:var(--color-red)} .article p{color:var(--color-gray-700);line-height:1.75;margin-bottom:var(--space-4)} .article ul{padding-left:var(--space-6);margin-bottom:var(--space-4);list-style:disc;color:var(--color-gray-700)} .article ul li{margin-bottom:var(--space-2)} .article strong{color:var(--color-black)} /* --- 24. XEME DIMENSION (carte page) --- */ .xeme{background:var(--color-red);color:var(--color-white);padding:var(--space-16) 0} .xeme .container{display:grid;gap:var(--space-10);align-items:center} @media(min-width:768px){.xeme .container{grid-template-columns:1fr 2fr}} .xeme h2{color:var(--color-white);font-size:clamp(2rem,4vw,3.5rem);line-height:1.1} .xeme ul{margin-top:var(--space-4);padding-left:0;list-style:none} .xeme ul li{padding:var(--space-3) 0;border-bottom:1px solid rgba(255,255,255,.2);font-size:1rem} .xeme ul li::before{content:'›';color:var(--color-gold-light);font-weight:700;margin-right:var(--space-2);font-size:1.5rem;vertical-align:middle} .xeme .lead{color:rgba(255,255,255,.95);font-size:1.0625rem;margin-bottom:var(--space-4)} .xeme .btn{margin-top:var(--space-6)} /* --- 25. TARIFS TABLE --- */ .pricing-table{overflow-x:auto;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);margin-bottom:var(--space-8)} .pricing-table table{min-width:720px;background:var(--color-white)} .pricing-table th,.pricing-table td{padding:var(--space-4) var(--space-5);text-align:left;border-bottom:1px solid var(--color-gray-200);font-size:.9375rem} .pricing-table thead th{background:var(--color-red);color:var(--color-white);font-family:var(--font-display);font-weight:700;text-align:center} .pricing-table thead th:first-child{text-align:left} .pricing-table tbody td:not(:first-child){text-align:center;font-family:var(--font-display);font-weight:600} .pricing-table .row-section td{background:var(--color-gold-light);color:var(--color-gold-dark);font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:.8125rem;letter-spacing:.05em} .pricing-table .gratuit{color:var(--color-success);font-weight:700} .pricing-note{font-size:.8125rem;color:var(--color-gray-600);margin-top:var(--space-2)} /* --- 26. FORM --- */ .form-wrap{max-width:760px;margin:0 auto;background:var(--color-white);border-radius:var(--radius-xl);padding:var(--space-10);box-shadow:var(--shadow-md);border:1px solid var(--color-gray-200)} .form-wrap h2{text-align:center;margin-bottom:var(--space-10)} .form-grid{display:grid;gap:var(--space-5);grid-template-columns:1fr} @media(min-width:640px){.form-grid{grid-template-columns:1fr 1fr}} .form-group{display:flex;flex-direction:column} .form-group.full{grid-column:1 / -1} .form-group label{font-family:var(--font-display);font-weight:600;font-size:.875rem;margin-bottom:var(--space-2);color:var(--color-gray-700)} .form-group input,.form-group textarea,.form-group select{padding:var(--space-3) var(--space-4);border:2px solid var(--color-gray-200);border-radius:var(--radius-pill);font-family:var(--font-body);font-size:.9375rem;background:var(--color-gray-50);transition:all var(--transition-base);width:100%} .form-group textarea{border-radius:var(--radius-md);min-height:120px;resize:vertical} .form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--color-red);background:var(--color-white)} .form-submit{text-align:center;margin-top:var(--space-8)} /* --- 27. PARTNERS --- */ .partners{background:var(--color-gold-cream);text-align:center} .partners h2{margin-bottom:var(--space-10)} .partners-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6);max-width:900px;margin:0 auto var(--space-12);align-items:center} @media(min-width:640px){.partners-grid{grid-template-columns:repeat(4,1fr)}} .partner-card{background:var(--color-white);border-radius:var(--radius-md);padding:var(--space-6);height:100px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;color:var(--color-gray-700);box-shadow:var(--shadow-sm)} .partners h3{margin-bottom:var(--space-6);font-size:1.25rem} .trust-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6);max-width:500px;margin:0 auto} .trust-grid .partner-card{height:80px} /* --- 28. VALUES (A propos) --- */ .values{padding:var(--space-16) 0;background:var(--color-white)} .values-grid{display:grid;gap:var(--space-8);margin-bottom:var(--space-12)} @media(min-width:768px){.values-grid{grid-template-columns:1fr 1fr}} .value-box{background:var(--color-gold-cream);border:1px solid var(--color-gold-light);border-radius:var(--radius-lg);padding:var(--space-8)} .value-box h3{color:var(--color-red);margin-bottom:var(--space-3);font-size:1.25rem} .value-box p{color:var(--color-gray-700);margin:0;line-height:1.65} .values-main{background:var(--color-gold-cream);border:1px solid var(--color-gold-light);border-radius:var(--radius-lg);padding:var(--space-10)} .values-main h3{color:var(--color-red);text-align:center;margin-bottom:var(--space-6);font-size:1.5rem} .values-main .value-item{padding:var(--space-5) 0;border-bottom:1px solid var(--color-gold-light)} .values-main .value-item:last-child{border-bottom:none} .values-main .value-item h4{color:var(--color-black);margin-bottom:var(--space-2);display:flex;align-items:center;gap:var(--space-2)} .values-main .value-item h4::before{content:'❖';color:var(--color-gold)} .values-main .value-item p{color:var(--color-gray-700);font-size:.9375rem;line-height:1.65;margin:0} /* --- 29. POINTS DE VENTE --- */ .pdv-search{background:var(--color-white);padding:var(--space-12) 0} .pdv-search h1{text-align:center;margin-bottom:var(--space-4)} .pdv-search .lead{text-align:center;max-width:640px;margin:0 auto var(--space-10)} .pdv-search-form{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-4)} .pdv-select,.pdv-input{width:100%;padding:var(--space-4) var(--space-5);border:2px solid var(--color-gray-200);border-radius:var(--radius-pill);font-family:var(--font-body);font-size:1rem;background:var(--color-gray-50)} .pdv-input-wrap{position:relative} .pdv-input-wrap .icon{position:absolute;left:var(--space-5);top:50%;transform:translateY(-50%);color:var(--color-gray-500)} .pdv-input{padding-left:var(--space-12)} .pdv-input-wrap button{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:var(--color-red);color:var(--color-white);display:flex;align-items:center;justify-content:center;font-size:1.25rem} .pdv-map{background:var(--gradient-hero);padding:var(--space-16) 0;color:var(--color-white);text-align:center} .pdv-map .placeholder{background:rgba(255,255,255,.1);border:2px dashed rgba(255,255,255,.4);border-radius:var(--radius-lg);padding:var(--space-20);max-width:900px;margin:0 auto;color:var(--color-white)} .pdv-actions{background:var(--gradient-hero);color:var(--color-white);padding:var(--space-16) 0} .pdv-actions h2,.pdv-actions h3{color:var(--color-white);text-align:center} .pdv-actions-grid{display:grid;gap:var(--space-8);max-width:900px;margin:var(--space-10) auto 0} @media(min-width:768px){.pdv-actions-grid{grid-template-columns:1fr 1fr}} .pdv-action{text-align:center;padding:var(--space-6)} .pdv-action .icon{font-size:3rem;margin-bottom:var(--space-4)} .pdv-action h4{color:var(--color-white);font-size:1.375rem;margin-bottom:var(--space-3)} .pdv-action p{color:rgba(255,255,255,.9);font-size:.9375rem;line-height:1.65} .pdv-list{background:var(--color-gray-50);padding:var(--space-16) 0} .pdv-list details{background:var(--color-white);border-radius:var(--radius-lg);margin-bottom:var(--space-4);box-shadow:var(--shadow-sm);overflow:hidden} .pdv-list details summary{padding:var(--space-5) var(--space-6);cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:1.125rem;color:var(--color-red);list-style:none;display:flex;justify-content:space-between;align-items:center} .pdv-list details summary::-webkit-details-marker{display:none} .pdv-list details summary::after{content:'+';font-size:1.5rem;color:var(--color-red);transition:transform var(--transition-base)} .pdv-list details[open] summary::after{content:'−'} .pdv-list .commune{padding:var(--space-5) var(--space-6) var(--space-2);font-family:var(--font-display);font-weight:600;color:var(--color-black)} .pdv-list .pdv-items{list-style:none;padding:0 var(--space-6) var(--space-5)} .pdv-list .pdv-items li{padding:var(--space-2) 0;color:var(--color-gray-700);font-size:.9375rem;border-bottom:1px solid var(--color-gray-100)} .pdv-list .pdv-items li:last-child{border-bottom:none} /* --- 30. DISTRIBUTEUR HERO --- */ .distributor-hero{background:var(--color-gold-cream);padding:var(--space-20) 0;text-align:center} .distributor-hero h1{max-width:900px;margin:0 auto var(--space-6);text-transform:uppercase} .distributor-hero .lead{max-width:720px;margin:0 auto var(--space-8)} .distributor-hero h2{color:var(--color-red);margin-top:var(--space-8);font-size:1.25rem} .dist-advantages{padding:var(--space-16) 0} .dist-advantages h2{text-align:center;margin-bottom:var(--space-12)} .dist-advantages-grid{display:grid;gap:var(--space-6);grid-template-columns:1fr} @media(min-width:640px){.dist-advantages-grid{grid-template-columns:1fr 1fr 1fr}} .dist-advantage{text-align:center;padding:var(--space-6)} .dist-advantage .icon{font-size:2.5rem;margin-bottom:var(--space-3);display:block} .dist-advantage h4{margin-bottom:var(--space-2);color:var(--color-red)} .dist-advantage p{font-size:.9375rem;color:var(--color-gray-700);margin:0} /* --- 31. ABOUT INTRO --- */ .about-intro{background:var(--color-gold-cream);padding:var(--space-20) 0;text-align:center} .about-intro h1{max-width:900px;margin:0 auto var(--space-6);text-transform:uppercase;font-size:clamp(1.75rem,3.5vw,2.75rem)} .about-intro .lead{max-width:740px;margin:0 auto;font-size:1.0625rem;line-height:1.75} .solutions-grid{display:grid;gap:var(--space-6);max-width:900px;margin:var(--space-8) auto 0;padding:0 var(--space-4)} @media(min-width:768px){.solutions-grid{grid-template-columns:1fr 1fr}} .solution-box{background:var(--color-white);border:1px solid var(--color-gold-light);border-radius:var(--radius-lg);padding:var(--space-8);box-shadow:var(--shadow-sm)} .solution-box h3{color:var(--color-red);margin-bottom:var(--space-3)} .solution-box p{color:var(--color-gray-700);margin-bottom:var(--space-4)} .solution-box .tag{display:inline-block;background:var(--color-gold-light);color:var(--color-gold-dark);padding:4px 12px;border-radius:var(--radius-pill);font-size:.75rem;font-weight:700;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em} /* --- 32. UTILITY --- */ .mb-0{margin-bottom:0!important} .mt-0{margin-top:0!important} .bg-cream{background:var(--color-gold-cream)} .bg-red{background:var(--color-red);color:var(--color-white)} .hidden{display:none} @media(max-width:767px){.hidden-mobile{display:none}} @media(min-width:768px){.hidden-desktop{display:none}}