/* ============================================================
   LUSIQUE — CHROME WEB (vitrine) — charte graphique v1 « SORBET »
   SOURCE UNIQUE du chrome des sites vitrine :
     · site.lusique.fr : index.html, tous-les-jeux.html, contact.html,
       mentions-legales.html, privacyPolicy.html
     · lusique.fr/prof/ : index.html  (via URL absolue)
   Palette alignée sur lib/lusique-chrome.css (tokens applis --lu-*).
   NE PAS reteinter page par page : tout part d'ici.
   Réf : journal « CHARTE GRAPHIQUE LUSIQUE (v1) ».
   v: 20260731b (badge « La Forge des communs » sur les cartes de jeux ; order:2)
============================================================ */

:root {
  --ink:    #55506e;                 /* encre douce (§2) */
  --ink2:   rgba(85,80,110,.78);
  --ink3:   rgba(85,80,110,.52);
  --surface:#fbf4ec;                 /* crème */
  --glass:  rgba(255,255,255,.62);
  --b:      1px solid rgba(85,80,110,.14);
  --accent: #ffd278;                 /* brand ambre */
  --accent-ink:#8a5a12;              /* ambre lisible sur clair */
  --primary:#5db4ea;                 /* bleu sorbet lisible */
  --neon:   #5db4ea;
  --radius: 20px;                    /* rondeurs, zéro angle pointu (§4) */
  --shadow-soft:0 10px 26px rgba(150,110,130,.14), 0 4px 10px rgba(150,110,130,.08);
  --shadow-lift:0 18px 40px rgba(150,110,130,.20), 0 6px 14px rgba(150,110,130,.12);
  --gloss:inset 0 2px 4px rgba(255,255,255,.9), inset 0 -6px 12px rgba(180,140,160,.10);
  --rose:  linear-gradient(135deg,#ffb6a8,#ff8fa0);
  --teal:  linear-gradient(135deg,#9bd8ff,#5db4ea);
  --sage:  linear-gradient(135deg,#aee6cb,#66cf9e);
  --slate: linear-gradient(135deg,#c3c9ff,#8f9bec);
  --amber: linear-gradient(135deg,#ffe0a3,#ffc266);
  --mauve: linear-gradient(135deg,#e3c0ff,#c19bf0);
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:'Fredoka', system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink); min-height:100vh; overflow-x:hidden;
  background:
    radial-gradient(1100px 720px at 12% 8%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(160deg,#d9f0ff 0%,#ffe7d6 54%,#f6ddff 100%);
  background-size:180% 180%; animation:bgDrift 20s ease-in-out infinite;
}
body::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(1000px 700px at 88% 12%, rgba(255,255,255,.5), transparent 60%),
    linear-gradient(160deg,#f6ddff 0%,#d9f0ff 55%,#ffe7d6 100%);
  background-size:180% 180%; animation:bgDrift 24s ease-in-out infinite reverse; opacity:.45; }
@keyframes bgDrift { 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }
@keyframes titleWiggle { 0%,100%{transform:rotate(-1deg) translateY(0);} 50%{transform:rotate(1deg) translateY(-2px);} }

nav { background:rgba(255,255,255,0.68); backdrop-filter:blur(12px); border-bottom:var(--b); padding:0 40px; height:56px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; }
.nav-logo { font-family:'Fredoka',sans-serif; font-size:20px; font-weight:700; color:var(--ink); text-decoration:none; letter-spacing:-0.3px; }
.nav-logo span { color:var(--primary); }
/* Liens de nav secondaires (hub : .nav-prof ; prof : .nav-back) */
.nav-prof, .nav-back { font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--ink3); text-decoration:none; transition:color 0.2s; }
.nav-prof:hover, .nav-back:hover { color:var(--primary); }

.hero { background:linear-gradient(160deg, rgba(255,255,255,.5), rgba(255,255,255,.18)); padding:84px 40px 72px; text-align:center; border-bottom:var(--b); position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; top:-100px; right:-100px; width:450px; height:450px; background:radial-gradient(circle, rgba(255,190,140,0.34) 0%, transparent 70%); pointer-events:none; }
.hero::after { content:''; position:absolute; bottom:-120px; left:-100px; width:420px; height:420px; background:radial-gradient(circle, rgba(120,190,255,0.30) 0%, transparent 70%); pointer-events:none; }
/* Pastille eyebrow (hub : .hero-eyebrow ; prof : .eyebrow) */
.hero-eyebrow, .eyebrow { position:relative; z-index:1; font-size:11px; font-weight:600; letter-spacing:4px; text-transform:uppercase; color:var(--ink2); margin-bottom:22px; display:inline-block; padding:6px 16px; border:var(--b); border-radius:999px; background:rgba(255,255,255,0.55); backdrop-filter:blur(8px); }
.hero h1 { position:relative; z-index:1; font-family:'Fredoka',sans-serif; font-size:clamp(44px,8.5vw,84px); font-weight:700; line-height:1.02; letter-spacing:-1px; color:var(--ink); margin-bottom:16px; display:inline-block; animation:titleWiggle 3.8s ease-in-out infinite; text-shadow:0 4px 18px rgba(150,110,130,.14); }
.hero h1 em { font-style:normal; background:linear-gradient(135deg,#5db4ea 0%,#ffb07a 50%,#c19bf0 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-sub { position:relative; z-index:1; font-size:15px; color:var(--ink2); line-height:1.7; max-width:520px; margin:0 auto 36px; }
.pills { position:relative; z-index:1; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:36px; }
.pill { font-size:13px; font-weight:500; color:var(--ink2); padding:7px 18px; border-radius:999px; border:var(--b); background:rgba(255,255,255,0.55); backdrop-filter:blur(6px); }
.cta { position:relative; z-index:1; display:inline-block; text-decoration:none; font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent-ink); background:linear-gradient(135deg,#ffe0a3,#ffc266); padding:14px 40px; border:1px solid rgba(255,180,90,.5); border-radius:999px; box-shadow:var(--shadow-soft), var(--gloss); transition:transform 0.18s, box-shadow 0.18s, filter 0.18s; }
.cta:hover { transform:translateY(-2px); filter:brightness(1.04); box-shadow:var(--shadow-lift), var(--gloss); }

.prof-banner { background:linear-gradient(135deg, rgba(255,210,120,.16), rgba(120,190,255,.12)); border-top:var(--b); border-bottom:var(--b); }
.prof-banner-inner { max-width:1140px; margin:0 auto; padding:26px 24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.prof-eyebrow { font-size:11px; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:var(--ink3); margin-bottom:6px; }
.prof-title { font-family:'Fredoka',sans-serif; font-size:20px; font-weight:700; color:var(--ink); margin-bottom:4px; }
.prof-desc { font-size:13px; color:var(--ink2); line-height:1.5; }
.prof-cta { display:inline-block; text-decoration:none; font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent-ink); background:linear-gradient(135deg,#ffe0a3,#ffc266); padding:13px 32px; border:1px solid rgba(255,180,90,.5); border-radius:999px; box-shadow:var(--shadow-soft), var(--gloss); white-space:nowrap; transition:transform 0.18s, box-shadow 0.18s, filter 0.18s; }
.prof-cta:hover { transform:translateY(-2px); filter:brightness(1.04); box-shadow:var(--shadow-lift), var(--gloss); }

.sec-wrap { max-width:1140px; margin:0 auto; padding:60px 24px; }
.sec-header { margin-bottom:32px; display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; border-bottom:var(--b); padding-bottom:18px; }
.sec-header h2 { font-family:'Fredoka',sans-serif; font-size:28px; font-weight:700; color:var(--ink); }
.sec-header .sec-count { font-size:12px; font-weight:500; letter-spacing:2px; text-transform:uppercase; color:var(--ink3); }

.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:14px; }
.card { position:relative; text-decoration:none; color:var(--ink); display:flex; align-items:center; gap:14px; background:var(--glass); border:var(--b); border-radius:var(--radius); padding:14px 16px; backdrop-filter:blur(10px); box-shadow:var(--shadow-soft); transition:transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; overflow:hidden; }
.card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; }
.card:nth-child(6n+1)::before { background:var(--rose); }
.card:nth-child(6n+2)::before { background:var(--teal); }
.card:nth-child(6n+3)::before { background:var(--sage); }
.card:nth-child(6n+4)::before { background:var(--slate); }
.card:nth-child(6n+5)::before { background:var(--amber); }
.card:nth-child(6n+6)::before { background:var(--mauve); }
.card:hover { transform:translateY(-3px); border-color:rgba(93,180,234,0.35); box-shadow:var(--shadow-lift); }
.card-icon { flex:0 0 auto; width:46px; height:46px; border-radius:14px; object-fit:cover; background:rgba(255,255,255,.6); box-shadow:0 2px 8px rgba(150,110,130,.18); }
.card-icon-ph { display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--primary); background:linear-gradient(135deg, rgba(255,210,120,.30), rgba(120,190,255,.22)); }
.card-body { min-width:0; }
.card-name { font-size:15px; font-weight:600; line-height:1.3; margin-bottom:8px; color:var(--ink); }
.badges { display:flex; gap:5px; flex-wrap:wrap; }
.badge { font-size:10px; font-weight:600; letter-spacing:0.4px; padding:2px 8px; border-radius:999px; background:rgba(85,80,110,.06); color:var(--ink2); border:var(--b); }
.badge.ev { background:linear-gradient(135deg,#ffc266,#ff9d52); color:#5a3a0f; border-color:transparent; }
.badge.mu { background:linear-gradient(135deg,#bfe0f5,#9bd0ef); color:#2f4f6b; border-color:transparent; }
.badge.mi { background:linear-gradient(135deg,#ffe0a3,#ffcf82); color:#7a4f12; border-color:transparent; }

/* Cartes des jeux publiés sur les stores : carte en colonne, lien web + rangée de badges stores */
.card.card-pub { flex-direction:column; align-items:stretch; }
.card-main { display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit; min-width:0; }
.store-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; padding-top:11px; border-top:1px solid rgba(85,80,110,.12); }
.store-badge { flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; gap:7px; text-decoration:none; color:var(--ink); padding:6px 8px; border-radius:14px; border:1px solid rgba(85,80,110,.16); background:rgba(255,255,255,.72); box-shadow:var(--gloss); transition:transform .15s ease, border-color .15s ease, background .15s ease; }
.store-badge:hover { transform:translateY(-1px); border-color:rgba(93,180,234,.45); background:rgba(255,255,255,.92); }
.store-badge .si { width:17px; height:17px; flex:0 0 auto; fill:var(--ink); }
.store-badge .si.gp { fill:#3ea875; }
.store-badge .bt { display:flex; flex-direction:column; line-height:1.05; align-items:flex-start; }
.store-badge .bt small { font-size:7.5px; font-weight:500; letter-spacing:.5px; text-transform:uppercase; color:var(--ink3); }
.store-badge .bt b { font-size:12px; font-weight:600; letter-spacing:.2px; }

.midi-section { background:linear-gradient(160deg, rgba(255,255,255,.4), rgba(255,255,255,.15)); border-top:var(--b); border-bottom:var(--b); }

footer { background:rgba(255,255,255,0.6); backdrop-filter:blur(12px); color:var(--ink3); text-align:center; padding:32px; font-size:12px; letter-spacing:0.5px; line-height:1.8; border-top:var(--b); }
footer strong { font-family:'Fredoka',sans-serif; font-size:18px; color:var(--primary); display:block; margin-bottom:6px; font-weight:700; }
footer a { color:var(--primary); }
@media (max-width:540px) { nav { padding:0 20px; } .hero { padding:56px 24px 50px; } .sec-wrap { padding:44px 16px; } }

/* Placeholder grisé "Bientôt" (n'imite PAS un vrai badge store) + CTA catalogue (page Applications) */
.store-badge.soon { cursor:default; color:var(--ink3); background:rgba(255,255,255,.35); border:1px dashed rgba(85,80,110,.2); box-shadow:none; }
.store-badge.soon:hover { transform:none; border-color:rgba(85,80,110,.2); background:rgba(255,255,255,.35); }
.store-badge.soon .si, .store-badge.soon .si.gp { fill:var(--ink3); opacity:.55; }
.store-badge.soon .bt small, .store-badge.soon .bt b { color:var(--ink3); }

/* Badge « La Forge des communs numériques éducatifs » (code source libre du jeu).
   Passe seul sur sa ligne, sous les badges stores : le libellé est plus long
   et ce n'est pas une boutique — la distinction doit rester lisible. */
/* `order:2` = le badge Forge reste visuellement EN DERNIER même si un badge store
   est inséré après lui dans le HTML (la routine quotidienne « badges Play » ajoute
   son lien en fin de store-row). */
.store-badge.forge { order:2; flex:1 0 100%; justify-content:flex-start; gap:9px; padding:7px 12px; background:linear-gradient(135deg, rgba(195,201,255,.20), rgba(255,255,255,.72)); border-color:rgba(143,155,236,.32); }
.store-badge.forge:hover { border-color:rgba(143,155,236,.62); background:linear-gradient(135deg, rgba(195,201,255,.30), rgba(255,255,255,.94)); }
.store-badge .si.forge { fill:#8f9bec; }
.catalogue-cta { max-width:1140px; margin:0 auto; padding:0 24px 64px; text-align:center; }
.catalogue-cta a { display:inline-block; text-decoration:none; font-size:13px; font-weight:600; letter-spacing:.5px; color:#2f4f6b; background:linear-gradient(135deg, rgba(120,190,255,.22), rgba(255,210,120,.16)); padding:16px 34px; border:1px solid rgba(93,180,234,.4); border-radius:999px; box-shadow:var(--shadow-soft); transition:transform .18s, box-shadow .18s, filter .18s; }
.catalogue-cta a:hover { transform:translateY(-2px); filter:brightness(1.04); box-shadow:var(--shadow-lift); }
.catalogue-cta p { font-size:13px; color:var(--ink3); margin-bottom:16px; }

/* --- PAGES ÉDITEUR STORES (« toutes nos applis ») --- */
.dev-cta { max-width:1140px; margin:0 auto; padding:0 24px 46px; text-align:center; }
.dev-cta p { font-size:13px; color:var(--ink3); margin-bottom:16px; }
.dev-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.dev-row .store-badge { flex:0 1 250px; justify-content:flex-start; gap:11px; padding:13px 22px; border-radius:16px; }
.dev-row .store-badge .si { width:22px; height:22px; }
.dev-row .store-badge .bt small { font-size:8.5px; }
.dev-row .store-badge .bt b { font-size:14px; }

/* Variante mise en avant, placée juste sous le hero */
.dev-cta.dev-top { padding:34px 24px 40px; }
.dev-cta.dev-top .dev-inner { max-width:760px; margin:0 auto; padding:30px 28px 28px; border:1px solid rgba(93,180,234,.34); border-radius:26px; background:linear-gradient(135deg, rgba(120,190,255,.16), rgba(255,210,120,.13)); box-shadow:var(--shadow-soft); }
.dev-cta.dev-top .dev-title { font-family:'Fredoka',sans-serif; font-size:clamp(19px,3.4vw,25px); font-weight:600; color:var(--ink); margin-bottom:8px; }
.dev-cta.dev-top p { font-size:14px; color:var(--ink2); margin-bottom:22px; }
.dev-cta.dev-top .dev-row .store-badge { flex:0 1 268px; padding:16px 26px; border-radius:18px; background:rgba(255,255,255,.9); border-color:rgba(85,80,110,.2); }
.dev-cta.dev-top .dev-row .store-badge:hover { transform:translateY(-2px); box-shadow:var(--shadow-lift); }
.dev-cta.dev-top .dev-row .store-badge .si { width:26px; height:26px; }
.dev-cta.dev-top .dev-row .store-badge .bt small { font-size:9px; }
.dev-cta.dev-top .dev-row .store-badge .bt b { font-size:16px; }
@media (max-width:540px) { .dev-cta.dev-top { padding:24px 16px 30px; } .dev-cta.dev-top .dev-inner { padding:24px 18px 22px; border-radius:22px; } }