html { background:#e9ecf2; }
body { margin:0; padding:22px 14px 40px; font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif; color:#e4e4e7; display:flex; justify-content:center; }
.fen { width:min(860px,100%); background:#0b0b0f; border-radius:16px; overflow:clip; box-shadow:0 18px 50px rgba(15,23,42,.35); }
.barre { display:flex; align-items:center; gap:8px; padding:10px 16px; background:#18181b; border-bottom:1px solid #27272a; }
.barre i { width:11px; height:11px; border-radius:50%; background:#3f3f46; }
.barre b { margin-left:8px; color:#fff; font-size:14px; }
.barre a { margin-left:auto; color:#a1a1aa; font-size:13px; text-decoration:none; }
.corps { padding:20px 22px 24px; display:grid; gap:16px; font-size:17px; line-height:1.5; }
.corps > * { min-width:0; }
h1 { margin:0; font:800 clamp(22px,3.4vw,30px)/1.2 'Outfit',system-ui,sans-serif; color:#fff; }
.question { margin:0; font-size:19px; font-weight:800; color:#fde68a; }
b.cle { color:#fde68a; }
.tuiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.tuile { all:unset; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:150px; padding:16px 10px; border-radius:16px; text-align:center; font-weight:800; font-size:17px; color:#fff; background:#18181b; border:2px solid #3f3f46; }
.tuile img { width:56px; height:56px; object-fit:contain; }
.tuile em { font-style:normal; font-weight:600; font-size:13px; color:#a1a1aa; }
a.tuile, button.tuile:not([disabled]) { cursor:pointer; border-color:#f59e0b; background:#1f1a10; box-shadow:0 0 0 4px rgba(245,158,11,.18); }
a.tuile:hover, button.tuile:not([disabled]):hover { background:#2a2110; transform:translateY(-2px); }
.tuile[aria-disabled="true"], .tuile[disabled] { opacity:.45; cursor:not-allowed; filter:grayscale(.6); }
.tuile .ico { font-size:44px; line-height:1; }
ol.etapes { list-style:none; margin:0; padding:0; display:grid; gap:14px; counter-reset:n; }
ol.etapes > li { min-width:0; counter-increment:n; border:2px solid #f59e0b; background:#1f1a10; border-radius:14px; padding:14px 16px 14px 60px; position:relative; }
ol.etapes > li::before { content:counter(n); position:absolute; left:14px; top:14px; width:32px; height:32px; border-radius:50%; background:#f59e0b; color:#1f1300; font-weight:800; display:grid; place-items:center; }
.phrase { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px; }
.phrase code { flex:1; min-width:240px; background:#0b0b0f; border:1px dashed #f59e0b; border-radius:10px; padding:12px 14px; font-family:Menlo,Consolas,monospace; font-size:15px; color:#fff; white-space:pre-wrap; }
.copier { all:unset; cursor:pointer; background:#16a34a; color:#fff; font-weight:800; border-radius:10px; padding:10px 16px; }
.note { margin:8px 0 0; color:#a1a1aa; font-size:15px; }
.tuile[aria-pressed="true"] { background:#3a2a08; box-shadow:0 0 0 5px rgba(245,158,11,.4); }
a.copier { text-decoration:none; }
.tuiles.quatre { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
button.tuile { cursor:pointer; }
.tuile:not(.vedette):not([aria-pressed="true"]) { border-color:#3f3f46; background:#18181b; box-shadow:none; }
.tuile .clic { color:#fde68a; font-size:14px; animation:clic 1.4s ease-in-out infinite; }
@keyframes clic { 50% { transform:translateY(-3px); } }
.info { border:2px solid #f59e0b; background:#1f1a10; border-radius:14px; padding:14px 18px; }
.info h2 { margin:0 0 6px; font:800 20px 'Outfit',system-ui,sans-serif; color:#fff; }
.info p, .info ul { margin:6px 0; }
.suite { display:flex; justify-content:flex-end; margin-top:10px; }
.suivant { background:#f59e0b; color:#1f1300; font-weight:800; font-size:17px; text-decoration:none; border-radius:10px; padding:10px 20px; }
.suivant:hover { background:#fbbf24; }

/* Les cartes de choix (page Antigravity) */
.choix { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.carte { all:unset; box-sizing:border-box; position:relative; display:flex; align-items:center; gap:14px; padding:16px 16px 16px 18px; border-radius:16px; background:linear-gradient(180deg,#1c1c22,#141418); border:1px solid #3f3f46; cursor:pointer; transition:transform .15s, border-color .15s, box-shadow .15s; }
.carte:hover:not([disabled]) { transform:translateY(-2px); border-color:#f59e0b; box-shadow:0 8px 24px rgba(0,0,0,.4); }
.carte[aria-pressed="true"] { border:2px solid #f59e0b; background:linear-gradient(180deg,#2a2110,#1a150b); box-shadow:0 0 0 4px rgba(245,158,11,.18); }
.carte[disabled] { cursor:not-allowed; opacity:.45; }
.carte .num { position:absolute; top:8px; right:12px; font:800 13px 'Outfit',system-ui,sans-serif; color:#71717a; }
.carte .rond { flex:none; width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:rgba(245,158,11,.14); color:#fbbf24; }
.carte[aria-pressed="true"] .rond { background:#f59e0b; color:#1f1300; }
.carte .rond svg { width:26px; height:26px; }
.carte .txt { display:grid; gap:2px; }
.carte .txt b { color:#fff; font-size:17px; font-weight:800; line-height:1.25; }
.carte .txt small { color:#a1a1aa; font-size:13.5px; line-height:1.3; }

/* Le texte selon l'ordinateur (Mac, Windows, Linux) */
.os { display:none; }
body[data-os="mac"] .os-mac, body[data-os="win"] .os-win, body[data-os="linux"] .os-linux { display:inline; }
.lien-os { all:unset; cursor:pointer; color:#a1a1aa; text-decoration:underline; text-underline-offset:3px; }
.lien-os[aria-pressed="true"] { color:#fde68a; font-weight:800; text-decoration:none; }

/* Fil d'Ariane */
.ariane { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px 22px; background:#111114; border-bottom:1px solid #27272a; font-size:14px; color:#71717a; }
.ariane a { color:#a1a1aa; text-decoration:none; } .ariane a:hover { color:#fde68a; text-decoration:underline; }
.ariane span[aria-current] { color:#fde68a; font-weight:800; }
.ariane i.sep { font-style:normal; color:#52525b; }
.note a.mail { color:#fde68a; font-weight:800; }

/* Le haut de chaque fenêtre (titre + fil d'Ariane) reste visible en défilant */
.haut { position:sticky; top:0; z-index:50; }
.titre-haut { background:#0b0b0f; padding:12px 22px; border-bottom:1px solid #27272a; }
.titre-haut h1 { margin:0; }

/* Deux captures côte à côte */
.deux-images { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-top:10px; align-items:start; }
.deux-images figure { margin:0; display:grid; gap:6px; }
.deux-images img { width:100%; height:300px; object-fit:contain; border-radius:12px; border:1px solid #3f3f46; background:#000; }
.deux-images figcaption { font-size:14.5px; color:#d4d4d8; text-align:center; }

/* Les longs messages à copier : hauteur limitée, on fait défiler dedans */
.phrase code { max-height:190px; overflow-y:auto; overscroll-behavior:contain; scrollbar-color:#f59e0b #1f1a10; }
.phrase code::-webkit-scrollbar { width:10px; }
.phrase code::-webkit-scrollbar-thumb { background:#f59e0b; border-radius:6px; }
.phrase code::-webkit-scrollbar-track { background:#1f1a10; border-radius:6px; }
.phrase .copier { white-space:nowrap; }
.phrase code { overflow-wrap:anywhere; }
.phrase:has([data-ouvrir]) code { flex-basis:100%; }

/* Les simulations (page Ateliers) */
.sims { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.sim { all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:18px 12px; border-radius:16px; background:linear-gradient(180deg,#1c1c22,#141418); border:1px solid #3f3f46; transition:transform .15s, border-color .15s; }
.sim:hover { transform:translateY(-2px); border-color:#f59e0b; }
.sim[aria-pressed="true"] { border:2px solid #f59e0b; background:linear-gradient(180deg,#2a2110,#1a150b); box-shadow:0 0 0 4px rgba(245,158,11,.18); }
.sim .ico { font-size:40px; line-height:1; }
.sim b { color:#fff; font-size:17px; line-height:1.25; }
.sim .domaine { font-size:13px; font-weight:800; color:#1f1300; background:#fbbf24; border-radius:999px; padding:2px 12px; }
#page { display:grid; gap:12px; }
#page[hidden] { display:none; }

/* Page d'une simulation */
.but { margin:0; padding:12px 16px; border-radius:14px; background:#111114; border:1px solid #3f3f46; }
.domaine-titre { font:800 14px 'Nunito',system-ui,sans-serif; color:#1f1300; background:#fbbf24; border-radius:999px; padding:3px 12px; vertical-align:middle; }
.etiquette-prompt { margin:14px 0 0; font-weight:800; color:#fde68a; }
.idees { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:8px; }
.idees code { max-height:none; }
.verifier { margin-top:10px; border:2px solid #f59e0b; background:#2a1d08; border-radius:12px; padding:10px 16px; }
.verifier p { margin:4px 0; } .verifier ul { margin:6px 0; padding-left:20px; } .verifier li { margin:4px 0; }
.sim .bientot { color:#a1a1aa; font-size:12.5px; } a.sim { text-decoration:none; }
a.carte { text-decoration:none; color:inherit; }

/* Le bandeau jaune en bas : où coller le message (la page est ouverte à droite, dans Antigravity) */
.bande { position:fixed; left:0; right:0; bottom:24px; z-index:60; display:flex; align-items:center; gap:12px; background:#f59e0b; color:#1f1300; padding:10px 16px; box-shadow:0 -6px 24px rgba(15,23,42,.25); font-size:16px; line-height:1.35; }
.bande[hidden] { display:none; }
.bande .bfleche { font-size:34px; font-weight:800; animation:bfleche 1.1s ease-in-out infinite; }
@keyframes bfleche { 50% { transform:translateX(-8px); } }
.bande > span:nth-child(2) { flex:1; }
.bande b { font-size:19px; }
.bande em { font-style:normal; font-size:15px; }
.bande .quoi { display:block; margin-top:3px; font-size:17px; font-weight:800; }
.bande .os { display:none; }
body[data-os="mac"] .bande .os-mac, body[data-os="win"] .bande .os-win, body[data-os="linux"] .bande .os-linux { display:inline; }
.bande-x { all:unset; cursor:pointer; font-size:24px; font-weight:800; padding:0 8px; }
body:has(.bande:not([hidden])) { padding-bottom:120px; }
.bande .allow { display:block; margin-top:6px; padding-top:6px; border-top:1px solid rgba(31,19,0,.25); font-size:16px; } .bande .allow b { font-size:16px; }

/* Onglets (page d'une simulation) */
.onglets { display:flex; flex-wrap:wrap; gap:6px; border-bottom:2px solid #3f3f46; }
.onglets button { all:unset; cursor:pointer; padding:10px 16px; border-radius:12px 12px 0 0; font-weight:800; font-size:16px; color:#a1a1aa; background:#18181b; border:1px solid #3f3f46; border-bottom:none; margin-bottom:-2px; }
.onglets button:hover { color:#fde68a; }
.onglets button[aria-selected="true"] { color:#1f1300; background:#f59e0b; border-color:#f59e0b; }
.panneau { display:grid; gap:10px; }
.panneau[hidden] { display:none; }
.panneau > p { margin:0; }

/* Animation « Allow write access » : choix 2, puis Submit (8 s, en boucle) */
.allow-zone { margin-top:6px; }
.allow-titre { margin:4px 0 8px; }
.cadre-allow { position:relative; overflow:hidden; width:100%; }
.scene-allow { position:absolute; left:0; top:0; width:720px; height:330px; background:#0b0b0f; border:1px solid #27272a; border-radius:12px; transform-origin:0 0; }
.scene-allow .dlg { position:absolute; left:20px; top:20px; width:680px; height:280px; box-sizing:border-box; background:#16161b; border:1px solid #3f3f46; border-radius:18px; padding:14px 16px; font-size:15px; color:#e4e4e7; animation:al-dlg 8s infinite; }
.scene-allow .t { font-weight:800; color:#fff; font-size:16px; }
.scene-allow .cmd { margin:10px 0 8px; background:#0b0b0f; border-radius:8px; padding:6px 10px; font:13px Menlo,Consolas,monospace; color:#fff; }
.scene-allow .opt { display:flex; align-items:center; gap:10px; height:34px; padding:0 10px; border-radius:10px; border:1px solid transparent; white-space:nowrap; }
.scene-allow .opt i { font-style:normal; display:inline-grid; place-items:center; width:20px; height:20px; border-radius:5px; background:#27272a; color:#a1a1aa; font-size:12px; }
.scene-allow .o1 { animation:al-o1 8s infinite; }
.scene-allow .o3 { animation:al-o2 8s infinite; }
.scene-allow .o4 em { color:#71717a; font-style:normal; }
.scene-allow .sub { position:absolute; right:16px; bottom:14px; background:#3b82f6; color:#fff; font-weight:800; border-radius:12px; padding:6px 14px; animation:al-sub 8s infinite; }
.scene-allow .skip { position:absolute; right:120px; bottom:20px; color:#a1a1aa; }
.scene-allow .ok { position:absolute; left:0; right:0; top:140px; text-align:center; font:800 22px 'Outfit',system-ui,sans-serif; color:#86efac; opacity:0; animation:al-ok 8s infinite; }
.scene-allow .souris { position:absolute; z-index:5; filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)); left:60px; top:330px; animation:al-souris 8s infinite; }
.scene-allow .bulle { position:absolute; z-index:6; background:#f59e0b; color:#1f1300; font-weight:800; font-size:14px; border-radius:8px; padding:3px 10px; opacity:0; animation:al-bulle 8s infinite; left:430px; top:150px; }
@keyframes al-souris { 0%, 8% { left:60px; top:330px; transform:scale(1); } 30% { left:220px; top:196px; transform:scale(1); } 33% { left:220px; top:196px; transform:scale(.8); } 36%, 42% { left:220px; top:196px; transform:scale(1); } 62% { left:640px; top:262px; transform:scale(1); } 65% { left:640px; top:262px; transform:scale(.8); } 68%, 100% { left:640px; top:262px; transform:scale(1); } }
@keyframes al-o1 { 0%, 32% { background:#27272a; border-color:#3f3f46; } 34%, 100% { background:transparent; border-color:transparent; } }
@keyframes al-o2 { 0%, 32% { background:transparent; border-color:transparent; box-shadow:none; } 34%, 70% { background:#3a2a08; border-color:#f59e0b; box-shadow:0 0 0 4px rgba(245,158,11,.3); } 72%, 100% { background:#27272a; border-color:#3f3f46; box-shadow:none; } }
@keyframes al-sub { 0%, 63% { box-shadow:none; transform:none; } 64%, 67% { box-shadow:0 0 0 5px rgba(59,130,246,.45); transform:scale(.95); } 69%, 100% { box-shadow:none; transform:none; } }
@keyframes al-dlg { 0%, 70% { opacity:1; } 74%, 96% { opacity:0; } 100% { opacity:1; } }
@keyframes al-ok { 0%, 72% { opacity:0; } 76%, 94% { opacity:1; } 98%, 100% { opacity:0; } }
@keyframes al-bulle { 0%, 34% { opacity:0; } 37%, 58% { opacity:1; } 61%, 100% { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .scene-allow * { animation:none !important; } .scene-allow .o3 { background:#3a2a08; border-color:#f59e0b; } }
.partie { margin:8px 0 0; font:800 19px 'Outfit',system-ui,sans-serif; color:#fff; padding-top:8px; border-top:1px solid #27272a; }
.panneau > .partie:first-child { border-top:none; padding-top:0; }
.voir { margin:0; padding-left:22px; display:grid; gap:6px; }
.allow-anim[hidden] { display:none; }
.allow-rejouer { all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:8px; background:#16161b; color:#fde68a; border:2px solid #f59e0b; border-radius:12px; padding:10px 16px; font-weight:800; font-size:15px; }
.allow-rejouer:hover { background:#2a2110; }
.allow-rejouer[hidden] { display:none; }

/* Les deux parties d'un prompt : ① créer (orange) et ② voir (bleu) */
.bloc-partie { display:grid; gap:10px; border-radius:16px; padding:14px 16px; }
.bloc-partie > p { margin:0; }
.bloc-partie .partie { border-top:none; padding-top:0; margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; }
.bloc-partie .partie small { font:700 14px 'Nunito',system-ui,sans-serif; }
.bloc-partie.creer { background:#1f1a10; border:2px solid #f59e0b; }
.bloc-partie.creer .partie { color:#fde68a; } .bloc-partie.creer .partie small { color:#d6b768; }
.bloc-partie.voir { background:#0e1a2f; border:2px solid #3b82f6; }
.bloc-partie.voir .partie { color:#93c5fd; } .bloc-partie.voir .partie small { color:#7aa7e0; }
.bloc-partie.voir b.cle { color:#bfdbfe; }

/* Petits boutons d'aide (configurer, découvrir Antigravity) */
.aides { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.aide-bouton { display:inline-flex; align-items:center; gap:6px; color:#d4d4d8; background:#18181b; border:1px solid #3f3f46; border-radius:999px; padding:6px 14px; font-size:14px; font-weight:800; text-decoration:none; }
.aide-bouton:hover { color:#1f1300; background:#f59e0b; border-color:#f59e0b; }
.bloc-partie.attendre { background:#1a1626; border:2px solid #8b5cf6; }
.bloc-partie.attendre .partie { color:#c4b5fd; } .bloc-partie.attendre .partie small { color:#a78bfa; }
.bloc-partie.attendre b.cle { color:#ddd6fe; }

/* Étiquettes de prix, à cheval sur la bordure des tuiles (accueil) */
.tuile { position:relative; }
.tuiles:has(.etiquette-prix) { padding-top:12px; }
.etiquette-prix { position:absolute; top:-12px; left:50%; transform:translateX(-50%); white-space:nowrap; font:800 12.5px 'Nunito',system-ui,sans-serif; letter-spacing:.02em; border-radius:999px; padding:3px 12px; border:2px solid #0b0b0f; }
.etiquette-prix.gratuit { background:#22c55e; color:#052e14; }
.etiquette-prix.payant { background:#ef4444; color:#fff; }
.etiquette-prix.educ { background:#3b82f6; color:#fff; }
.bloc-partie[hidden] { display:none; }
.pret { all:unset; cursor:pointer; background:#22c55e; color:#052e14; font-weight:800; font-size:16px; border-radius:12px; padding:10px 18px; box-shadow:0 0 0 4px rgba(34,197,94,.25); }
.pret:hover { background:#4ade80; }
.aller-onglet { all:unset; cursor:pointer; background:#60a5fa; color:#04122b; font-weight:800; font-size:16px; border-radius:12px; padding:10px 18px; box-shadow:0 0 0 4px rgba(96,165,250,.25); }
.aller-onglet:hover { background:#93c5fd; }
.copier.coche { background:#14532d; color:#bbf7d0; box-shadow:0 0 0 2px #22c55e inset; }