/* ========================================= Palette pastel (Bénin) + Design tokens ========================================= */ :root{ /* Couleurs de marque */ --green:#A7E3C3; --yellow:#FDE68A; --red:#FCA5A5; /* Neutres */ --dark:#0f172a; /* texte principal */ --dark-2:#1f2937; /* titres/contraste */ --muted:#6b7280; /* texte secondaire */ --line:#e6e6e6; /* bordures */ --bg:#fffdf6; /* fond global */ --surface:#ffffff; /* surfaces (cards, inputs, nav bg) */ /* Élévation / ombres */ --shadow-sm:0 1px 2px rgba(0,0,0,.06); --shadow-md:0 4px 16px rgba(0,0,0,.08); /* Rayons & espacements */ --r-xs:10px; --r-md:16px; --r-lg:20px; --space-1:6px; --space-2:10px; --space-3:16px; --space-4:24px; --space-5:32px; --space-6:48px; /* Typo */ --font-sans:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; --fs-1:clamp(28px,6vw,44px); /* h1 hero */ --fs-2:clamp(22px,3.5vw,28px); /* h2 */ --fs-lead:1.125rem; /* 18px */ } /* Dark mode (optionnel) — activer sur */ html[data-theme="dark"]{ --bg:#0b1020; --surface:#0f172a; --dark:#f7f7fb; --dark-2:#ffffff; --muted:#c7c9d1; --line:#1f2840; } /* ========================================= Reset & base ========================================= */ *{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family:var(--font-sans); background:var(--bg); color:var(--dark); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} a:focus-visible,button:focus-visible,input:focus-visible{ outline:3px solid #2563eb55; outline-offset:3px; border-radius:8px; } /* Moins d’animations pour les personnes sensibles */ @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;} } /* ========================================= Layout helpers ========================================= */ .container{max-width:1120px;margin:0 auto;padding:0 var(--space-3)} .center{text-align:center} .lead{font-size:var(--fs-lead);color:var(--dark-2)} .section{padding:var(--space-6) 0} /* ========================================= Navbar ========================================= */ .navbar{ position:sticky;top:0;z-index:40; backdrop-filter:saturate(180%) blur(8px); background:color-mix(in srgb,var(--surface) 85%, transparent); border-bottom:1px solid var(--line); box-shadow:var(--shadow-sm); } .nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px} .brand{display:flex;align-items:center;gap:var(--space-2)} .logo{ height:36px;width:36px;border-radius:12px; display:grid;place-items:center;font-weight:800; background:var(--red);color:var(--dark); } .brand-name{font-weight:700;letter-spacing:-.2px} .navbar.is-scrolled{box-shadow:0 8px 24px rgba(0,0,0,.06)} /* ========================================= Boutons ========================================= */ .btn{ display:inline-block; padding:12px 18px; border-radius:var(--r-md); text-decoration:none; border:1px solid #0001; transition:transform .08s ease, box-shadow .2s ease, background .2s ease; font-weight:600; } .btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)} .btn:active{transform:translateY(0)} .btn:disabled{opacity:.5;pointer-events:none} .btn-green{background:var(--green);color:var(--dark)} .btn-green:hover{background:color-mix(in srgb,var(--green) 88%, #000 12%)} .btn-red{background:var(--red);color:var(--dark)} .btn-red:hover{background:color-mix(in srgb,var(--red) 88%, #000 12%)} .btn-outline{background:transparent;border:1px solid var(--dark)} .btn-outline:hover{background:#00000008} /* ========================================= Hero ========================================= */ .hero{ position:relative; padding:var(--space-6) 0; color:var(--dark); background:linear-gradient(90deg,var(--green) 0%,var(--yellow) 50%,var(--red) 100%); } .hero::after{ content:"";position:absolute;inset:0; background:#ffffffaa; } .hero > .container{position:relative;z-index:1} .hero h1{font-size:var(--fs-1);line-height:1.1;margin:0} .hero p{margin:12px 0 0;font-size:18px;max-width:640px} /* Recherche */ .search{display:flex;gap:8px;margin-top:16px} .search input{ flex:1;padding:12px 14px;border-radius:var(--r-md); border:1px solid #0002;background:var(--surface);color:var(--dark); } .search input::placeholder{color:var(--muted)} .soon-badge{ margin-top:10px;display:inline-block;font-size:12px; background:#ffffffaa;padding:6px 10px;border-radius:999px } /* ========================================= Grids & sections colorées ========================================= */ .grid2{display:grid;grid-template-columns:1fr;gap:var(--space-4)} @media(min-width:960px){.grid2{grid-template-columns:1fr 1fr}} .section-green{background:var(--green)} .section-yellow{background:var(--yellow)} .section-red{background:var(--red)} /* ========================================= Cards ========================================= */ .cards{display:grid;grid-template-columns:1fr;gap:16px} @media(min-width:768px){.cards{grid-template-columns:repeat(3,1fr)}} @media(min-width:992px){.cards{grid-template-columns:repeat(4,1fr)}} .card{ background:var(--surface); border:1px solid #0002; border-radius:var(--r-md); padding:16px; box-shadow:var(--shadow-sm); } .card:hover{box-shadow:var(--shadow-md)} .card-yellow{background:var(--yellow)} .card-title{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--dark-2)} .i{height:22px;width:22px} /* ========================================= Témoignages ========================================= */ .testimonials .card{display:flex;flex-direction:column;gap:8px} .stars{color:#eab308;font-weight:700;letter-spacing:2px} .quote{font-style:italic;color:var(--dark)} cite{font-weight:600;color:var(--dark-2)} /* ========================================= FAQ ========================================= */ .faq .card h3{margin:6px 0 4px;font-size:var(--fs-2);color:var(--dark-2)} /* ========================================= Subscribe ========================================= */ .subscribe{ display:flex;gap:8px;justify-content:center;margin:12px 0;flex-wrap:wrap } .subscribe input{ padding:12px 14px;border:1px solid #0002;border-radius:var(--r-md);min-width:260px; background:var(--surface);color:var(--dark) } .msg{margin-top:6px;font-size:14px} .msg.is-error{color:#8b0000} .msg.is-success{color:#064e3b} /* ========================================= Footer ========================================= */ .footer{background:#111;color:#fff;padding:28px 0} .footer a{color:#fff;text-decoration:underline} .footer .container{display:grid;gap:var(--space-3)} /* ========================================= Utilitaires ========================================= */ .hidden{display:none !important} .visually-hidden{ position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } .max-w-sm{max-width:640px} .mt-2{margin-top:var(--space-2)} .mt-3{margin-top:var(--space-3)} .mt-4{margin-top:var(--space-4)} .p-0{padding:0} .p-3{padding:var(--space-3)} .p-4{padding:var(--space-4)} .rounded{border-radius:var(--r-md)} .rounded-lg{border-radius:var(--r-lg)}