/* dpdmb Création — feuille de style du site (pastel, calme, formes) */
:root{
  --cream:#FBF7F0; --ink:#2B2A33; --muted:#4A4853; --soft:#5B5966;
  --red:#F08C80; --blue:#8FB8E8; --yellow:#F3D468;
  --pad:clamp(20px,5vw,72px);
  --head:ui-rounded,"SF Pro Rounded","Avenir Next","Nunito","Segoe UI",system-ui,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5;overflow-x:hidden}
h1,h2,h3{font-family:var(--head);letter-spacing:-.01em;margin:0}
p{margin:0}
a{color:var(--ink)}
a:hover{color:#8A3F33}
img{max-width:100%}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--cream);padding:10px 16px;border-radius:8px;z-index:10}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* En-tête */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:28px var(--pad);position:relative;z-index:3}
.brand{font-family:var(--head);font-weight:700;font-size:22px;text-decoration:none}
.brand span{font-weight:500;color:var(--soft)}
.nav{display:flex;flex-wrap:wrap;gap:28px;font-weight:500}
.nav a{text-decoration:none}
.nav a:hover{text-decoration:underline}

/* Boutons */
.btn{display:inline-block;padding:16px 28px;border-radius:999px;font-weight:700;text-decoration:none;transition:transform .25s ease}
.btn:hover{transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:var(--cream)}
.btn-dark:hover{color:var(--cream)}
.btn-light{background:rgba(255,255,255,.7);border:2px solid var(--ink)}
.badge{display:inline-block;background:#fff;color:var(--muted);font-size:13px;font-weight:700;padding:5px 12px;border-radius:999px}

/* Accueil : bandeau */
.hero{position:relative;padding:56px var(--pad) 110px;min-height:520px}
.hero-shapes{position:absolute;inset:0;z-index:1;pointer-events:none}
.orb{position:absolute;width:min(320px,55vw);height:min(320px,55vw);border-radius:50%;mix-blend-mode:multiply}
.orb-red{top:30px;right:14%;background:#F4A8A0}
.orb-blue{top:150px;right:26%;background:#A9CBEF}
.orb-yellow{top:170px;right:4%;background:#F6DE8D}
.hero-line-h{position:absolute;bottom:70px;left:0;width:62%;height:2px;background:var(--ink);opacity:.55}
.hero-line-v{position:absolute;top:0;right:36%;width:2px;height:70%;background:var(--ink);opacity:.35}
.hero-oval{position:absolute;bottom:30px;right:10%;width:170px;height:90px;border:2px solid var(--ink);border-radius:50%;opacity:.5}
.hero-text{position:relative;z-index:2;max-width:600px;display:flex;flex-direction:column;gap:22px}
.eyebrow{font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8A3F33}
.hero h1{font-weight:700;font-size:clamp(40px,6.2vw,76px);line-height:1.04;letter-spacing:-.02em}
.lead{font-size:20px;color:var(--muted);max-width:480px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}

/* Blocs */
.block{padding:40px var(--pad) 80px;display:flex;flex-direction:column;gap:36px}
.block h2{font-weight:700;font-size:clamp(30px,4vw,44px)}
.narrow{max-width:640px}

/* Mélange de couleurs */
.mix-block{flex-direction:row;flex-wrap:wrap;align-items:center;gap:40px 72px;padding-top:10px}
.mix-text{flex:1 1 320px;max-width:480px;display:flex;flex-direction:column;gap:14px}
.mix-text p{font-size:18px;color:var(--muted)}
.mix-play{flex:1 1 380px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:28px}
.mix-buttons{display:flex;align-items:center;gap:22px;padding:10px}
.mix{width:88px;height:88px;border-radius:50%;border:none;padding:0;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease}
.mix:hover{transform:scale(1.06)}
.mix[aria-pressed="true"]{transform:scale(1.14);box-shadow:0 0 0 4px var(--cream),0 0 0 7px var(--ink)}
.mix-eq{font-family:var(--head);font-size:40px;font-weight:600;color:var(--soft)}
.mix-result{width:150px;height:150px;border-radius:50%;border:3px solid var(--ink);background:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--head);font-weight:700;font-size:24px;transition:background .4s ease}

/* Cartes des jeux */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:28px}
.card{background:var(--card-bg,#eee);border-radius:32px;padding:32px;display:flex;flex-direction:column;gap:18px;text-decoration:none;color:var(--ink);min-height:360px;transition:transform .35s ease,box-shadow .35s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(43,42,51,.12);color:var(--ink)}
.card-art{position:relative;height:150px;overflow:hidden}
.card-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.card-icon{width:56px;height:56px;border-radius:14px;object-fit:cover;box-shadow:0 4px 12px rgba(43,42,51,.15)}
.card h3{font-size:30px;font-weight:700}
.card p{font-size:18px;color:var(--muted)}
.card-more{margin-top:auto;font-weight:700}

/* Décors des cartes */
.art-color,.art-form,.art-falling{position:relative;height:150px}
.dot{position:absolute;width:104px;height:104px;border-radius:50%;mix-blend-mode:multiply}
.dot-red{left:4%;top:6px;background:#F08C80}
.dot-blue{left:22%;top:36px;background:#8FB8E8}
.dot-yellow{left:40%;top:4px;background:#F3D468}
.line-h{position:absolute;left:0;top:70px;width:70%;height:3px;background:#6B4A3A}
.line-v{position:absolute;left:36%;top:0;width:3px;height:150px;background:#6B4A3A}
.ring{position:absolute;left:12%;top:18px;width:70px;height:70px;border:3px solid #C0705F;border-radius:50%}
.oval{position:absolute;left:52%;top:82px;width:100px;height:52px;border:3px solid #6B4A3A;border-radius:50%}
.ball{position:absolute;top:0;width:44px;height:44px;border-radius:50%}
.ball-red{left:14%;background:#F08C80}.ball-blue{left:34%;background:#8FB8E8}.ball-yellow{left:54%;background:#F3D468}
.floor{position:absolute;left:0;bottom:0;width:80%;height:3px;background:var(--ink);opacity:.5}
.art-daily{display:flex;flex-wrap:wrap;align-content:center;gap:14px;max-width:280px;height:150px}
.day{width:30px;height:30px;border-radius:50%;border:3px solid var(--ink)}
.day.done{background:var(--ink)}
.day.today{background:#F08C80;border-color:#F08C80}

/* Points de la gamme */
.points{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:28px}
.point{display:flex;flex-direction:column;gap:10px;border-top:3px solid var(--c,#ccc);padding-top:18px}
.point h3{font-size:22px;font-weight:600}
.point p{color:var(--muted)}

/* Page d'un jeu */
.game-hero{background:var(--card-bg,#eee);margin:0 var(--pad);border-radius:36px;padding:36px clamp(24px,5vw,64px) 48px}
.game-hero-in{display:flex;flex-direction:column;gap:28px}
.back{font-weight:500;text-decoration:none}
.back:hover{text-decoration:underline}
.game-id{display:flex;flex-wrap:wrap;align-items:center;gap:32px}
.game-icon{width:140px;height:140px;border-radius:32px;object-fit:cover;box-shadow:0 10px 30px rgba(43,42,51,.15)}
.game-hero h1{font-size:clamp(38px,5.5vw,64px);font-weight:700;margin:6px 0 8px}
.game-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:20px}
.game-text{max-width:760px;margin:0 auto;padding:64px var(--pad) 40px;display:flex;flex-direction:column;gap:22px}
.game-text .headline{font-size:clamp(26px,3.2vw,36px);line-height:1.2;font-weight:700;border-left:6px solid var(--accent,#ccc);padding-left:20px}
.game-text p{font-size:19px;color:var(--muted)}
.shots{padding:20px 0 90px}
.shots-row{list-style:none;margin:0;padding:0 var(--pad);display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory}
.shots-row li{flex:0 0 auto;scroll-snap-align:center}
.shots-row img{height:min(520px,70vh);width:auto;border-radius:20px;box-shadow:0 8px 24px rgba(43,42,51,.12);display:block}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Pages de texte */
.doc{max-width:720px;margin:0 auto;padding:40px var(--pad) 90px}
.doc h1{font-size:clamp(30px,4vw,44px);margin-bottom:28px}
.doc h2{font-size:22px;margin:32px 0 10px}
.doc p,.doc li{color:var(--muted)}
.doc ul{padding-left:22px}

/* Pied de page */
.foot{background:var(--ink);color:var(--cream);padding:56px var(--pad);display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px}
.foot a{color:var(--cream)}
.foot-brand{font-family:var(--head);font-weight:700;font-size:24px;margin-bottom:10px}
.foot-links{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.foot-copy{width:100%;font-size:14px;color:#BDB9C3}

/* Mouvements doux */
.float1{animation:float 9s ease-in-out infinite}
.float2{animation:float 11s ease-in-out infinite reverse}
.float3{animation:float 13s ease-in-out infinite}
.drop1{animation:drop 3.6s ease-in infinite}
.drop2{animation:drop 3.6s ease-in infinite .9s}
.drop3{animation:drop 3.6s ease-in infinite 1.8s}
.pulse{animation:pulse 4s ease-in-out infinite}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(14px,-20px)}}
@keyframes drop{0%{transform:translateY(-30px);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(100px);opacity:0}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes reveal{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:translateY(0)}}
@supports (animation-timeline:view()){.reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 45%}}
@media (prefers-reduced-motion:reduce){
  .float1,.float2,.float3,.drop1,.drop2,.drop3,.pulse,.reveal{animation:none}
  .card,.btn,.mix,.mix-result{transition:none}
  html{scroll-behavior:auto}
}