.pedpicks-home{ –max:1200px; –gap:18px; –card-r:20px; –chip-r:9999px; –stroke:#e7e7ea; –muted:#6b7280; –chip:#f7f8fb; –primary:#2563eb; –primary-2:#7c3aed; –accent:#10b981; –ink:#0f172a; –ink-2:#334155; –bg:#ffffff; –ring: 0 0 0 3px rgba(37,99,235,.25); –shadow-s: 0 2px 8px rgba(15,23,42,.06); –shadow-m: 0 10px 30px rgba(15,23,42,.10); color: var(–ink); background: var(–bg); font-family: -apple-system, BlinkMacSystemFont, « Segoe UI », Roboto, Helvetica, Arial; } .pedpicks-home *{box-sizing:border-box} .pedpicks-home a{color:inherit;text-decoration:none;transition:color .2s ease, transform .2s ease} .pedpicks-home a:focus{outline:none;box-shadow:var(–ring);border-radius:10px} .pedpicks-home .px{padding-left:16px;padding-right:16px} .pedpicks-home .container{max-width:var(–max);margin:0 auto} /* Header */ .pedpicks-home .px-header{border-bottom:1px solid #eff3f8;background:linear-gradient(180deg,#ffffff,#fbfdff);position:sticky;top:0;z-index:5} .pedpicks-home .px-header .wrap{display:flex;align-items:center;justify-content:space-between;height:96px} .pedpicks-home .brand{display:flex;align-items:center;gap:14px;font-weight:900;letter-spacing:.2px} .pedpicks-home .brand img.logo{height:84px;width:auto;display:block;background:transparent;mix-blend-mode:multiply;filter:drop-shadow(0 4px 10px rgba(2,6,23,.08))} .pedpicks-home .brand span{font-size:20px} .pedpicks-home .nav{display:flex;gap:16px;font-weight:700} .pedpicks-home .nav a{padding:10px 12px;border-radius:12px} .pedpicks-home .nav a:hover{background:#f4f7ff;color:var(–primary)} /* Hero */ .pedpicks-home .hero{ background: radial-gradient(120% 140% at 20% 0%, rgba(124,58,237,.08), rgba(59,130,246,.06) 40%, rgba(16,185,129,.05) 70%), linear-gradient(180deg,#ffffff,#f9fbff 60%,#ffffff); border-bottom:1px solid #eff3f8; } .pedpicks-home .hero .box{padding:56px 0 28px;display:grid;place-items:center;text-align:center;gap:16px} .pedpicks-home .hero h1{margin:0;font-size:44px;line-height:1.12;letter-spacing:-.2px} .pedpicks-home .hero .lead{margin:0;color:var(–ink-2)} .pedpicks-home .search-wrap{width:min(820px,100%);display:flex;gap:10px;align-items:center;justify-content:center;margin-top:10px} .pedpicks-home .search-wrap input{flex:1;min-width:0;padding:14px 16px;border:1px solid #dfe3ea;border-radius:14px;box-shadow:var(–shadow-s);transition:border-color .2s ease, box-shadow .2s ease} .pedpicks-home .search-wrap input:focus{border-color:var(–primary);box-shadow:var(–ring)} .pedpicks-home .search-wrap button{padding:14px 18px;border:0;border-radius:14px;background:linear-gradient(135deg,var(–primary),var(–primary-2));color:#fff;cursor:pointer;font-weight:800;box-shadow:var(–shadow-m);transform:translateY(0);transition:transform .15s ease, filter .2s ease} .pedpicks-home .search-wrap button:hover{transform:translateY(-1px);filter:saturate(1.1)} /* Sections */ .pedpicks-home .section{padding:26px 0} .pedpicks-home .section h2{margin:0 0 8px;text-align:center;font-size:26px} .pedpicks-home .section .sub{margin:0 0 14px;text-align:center;color:var(–muted);font-size:14px} .pedpicks-home .section h2::after{content: » »;display:block;width:64px;height:4px;border-radius:9999px;margin:8px auto 0;background:linear-gradient(90deg,var(–primary),var(–primary-2))} /* Age grid */ .pedpicks-home .age-grid{display:grid;gap:var(–gap);grid-template-columns:repeat(7,1fr)} .pedpicks-home .chip{display:flex;align-items:center;justify-content:center;height:58px;padding:0 22px;border-radius:var(–chip-r);background:var(–chip);border:1px solid #e6ebf3;font-weight:900;letter-spacing:.2px;box-shadow:var(–shadow-s);transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease} .pedpicks-home .chip:hover{transform:translateY(-2px);box-shadow:var(–shadow-m);border-color:#d7dff0} /* Tuiles thématiques */ .pedpicks-home .tiles{display:grid;gap:var(–gap);grid-template-columns:repeat(3,1fr)} .pedpicks-home .tile{display:block;position:relative;isolation:isolate;border-radius:var(–card-r);overflow:hidden;aspect-ratio:16/9;min-height:220px;background-size:cover;background-position:center;box-shadow:var(–shadow-m);transition:transform .15s ease} .pedpicks-home .tile::after{content: » »;position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,6,23,0) 45%,rgba(2,6,23,.55) 100%)} .pedpicks-home .tile .label{position:absolute;left:16px;right:16px;bottom:14px;color:#fff;font-weight:900;z-index:1;text-shadow:0 2px 8px rgba(0,0,0,.35);letter-spacing:.2px} .pedpicks-home .tile:hover{transform:translateY(-3px) scale(1.01)} /* Cards */ .pedpicks-home .cards{display:grid;gap:var(–gap);grid-template-columns:repeat(3,1fr)} .pedpicks-home .card{border:1px solid #eef2f7;border-radius:18px;background:#fff;overflow:hidden;box-shadow:var(–shadow-s);transition:transform .15s ease, box-shadow .2s ease} .pedpicks-home .card:hover{transform:translateY(-3px);box-shadow:var(–shadow-m)} .pedpicks-home .card .thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#f8fafc,#eef2ff)} .pedpicks-home .card .body{padding:14px 16px} .pedpicks-home .card .kicker{font-size:12px;color:var(–primary-2);text-transform:uppercase;letter-spacing:.08em;font-weight:900} .pedpicks-home .card .title{font-weight:900;margin:4px 0 4px;letter-spacing:.15px} /* Footer + liens sociaux (texte) */ .pedpicks-home .footer{border-top:1px solid #eff3f8;padding:22px 0 34px;color:#444;background:linear-gradient(180deg,#ffffff,#fafcff)} .pedpicks-home .foot-links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center} .pedpicks-home .alert{font-size:13px;color:#555;text-align:center;margin:8px 0 12px} .pedpicks-home .foot-group{display:inline-flex;gap:10px;align-items:center;padding:8px 14px;border:1px solid #e9edf5;border-radius:9999px;background:#f8faff} /* Barre sociale en pastilles texte (compatible partout) */ .pedpicks-home .socials{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center} .pedpicks-home .socials a{ display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:9999px; border:1px solid #e6ebf3;background:#f8faff;font-weight:700;font-size:14px; box-shadow:var(–shadow-s);transition:transform .15s ease } .pedpicks-home .socials a:hover{transform:translateY(-1px)} .pedpicks-home .socials a .tag{font-size:12px;color:var(–muted);font-weight:600} /* Responsive */ @media (max-width:1023.98px){ .pedpicks-home .tiles{grid-template-columns:repeat(2,1fr)} .pedpicks-home .cards{grid-template-columns:repeat(2,1fr)} .pedpicks-home .age-grid{grid-template-columns:repeat(4,1fr)} .pedpicks-home .px-header .wrap{height:88px} .pedpicks-home .brand img.logo{height:72px} .pedpicks-home .hero h1{font-size:40px} } @media (max-width:639.98px){ .pedpicks-home .tiles,.pedpicks-home .cards{grid-template-columns:1fr} .pedpicks-home .age-grid{grid-template-columns:repeat(2,1fr)} .pedpicks-home .chip{height:54px} .pedpicks-home .hero h1{font-size:32px} .pedpicks-home .px-header .wrap{height:76px} .pedpicks-home .brand img.logo{height:56px} }