/* Atelier en ligne - interface claire et sobre (prototype solo).
   Palette alignée sur le site : blanc, encre, un accent orange. */
:root{
  --bg:#ffffff; --canvas:#f4f2ec; --ink:#1b1a17; --gris:#6b665e; --gris-clair:#9a948a;
  --ligne:#e6e2da; --accent:#E8811C; --accent-fort:#C4610A; --accent-txt:#B0560A; --accent-txt-fort:#8a4200; --accent-doux:#fbf1e4;
  --f-titre:"Saira Condensed","Arial Narrow",sans-serif;
  --f-ui:"Montserrat",system-ui,sans-serif;
  --f-texte:"Roboto Slab",Georgia,serif;
  --ombre:0 8px 24px rgba(27,26,23,.10);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-texte);overflow:hidden}
button{font-family:var(--f-ui);cursor:pointer}
a{color:var(--accent-txt);text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.app{display:flex;flex-direction:column;height:100vh}

/* Barre du haut */
.topbar{display:flex;align-items:center;gap:1rem;padding:.6rem 1.1rem;background:var(--bg);border-bottom:1px solid var(--ligne);flex:0 0 auto}
.topbar .marque{font-family:var(--f-titre);font-weight:700;font-size:1.05rem;color:var(--ink);display:flex;align-items:center;gap:.55rem}
.topbar .mk{width:1.6rem;height:1.6rem}
.topbar .spacer{flex:1}
.topbar .compte{font-family:var(--f-ui);font-size:.86rem;color:var(--gris)}
.topbar .compte b{color:var(--ink)}

.btn{background:#fff;color:var(--ink);border:1px solid var(--ligne);border-radius:8px;padding:.5rem .8rem;font-size:.86rem;font-weight:600;display:inline-flex;align-items:center;gap:.4rem}
.btn:hover{border-color:var(--ink)}
.btn.primaire{background:var(--accent-txt);color:#fff;border-color:transparent}
.btn.primaire:hover{background:var(--accent-txt-fort)}
.btn:disabled{opacity:.5;cursor:not-allowed;border-color:var(--ligne)}

/* Bandeau carte 0 */
.carte0{flex:0 0 auto;background:var(--accent-doux);border-bottom:1px solid var(--ligne);padding:.55rem 1.1rem;font-size:.88rem;line-height:1.4;color:#3a352c;max-height:6rem;overflow:auto}
.carte0 b{color:var(--accent-txt);font-family:var(--f-ui)}

/* Barre d'outils */
.toolbar{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.5rem 1.1rem;background:var(--bg);border-bottom:1px solid var(--ligne)}
.toolbar .groupe{display:flex;gap:.3rem;align-items:center;background:#faf8f4;border:1px solid var(--ligne);border-radius:9px;padding:.25rem}
.toolbar .sep{flex:1}
.tool{border:1px solid transparent;background:transparent}
.tool[aria-pressed="true"]{background:var(--accent);color:#fff}
.zoom-niv{font-family:var(--f-ui);font-size:.82rem;min-width:3rem;text-align:center;color:var(--gris)}

/* Scène (canvas clair) */
.scene{position:relative;flex:1 1 auto;overflow:hidden;background:var(--canvas);
  background-image:radial-gradient(circle, #e2ddd2 1px, transparent 1px);background-size:26px 26px;
  cursor:grab;touch-action:none}
.scene.grabbing{cursor:grabbing}
.scene.outil-fleche,.scene.outil-texte{cursor:crosshair}
#monde{position:absolute;top:0;left:0;width:3200px;height:2200px;transform-origin:0 0}
.plan-bord{position:absolute;inset:0;border:1px solid var(--ligne);border-radius:10px;background:#fbfaf7;pointer-events:none}

/* Cartes posées (tuiles blanches lisibles) */
.c-carte{position:absolute;width:150px;background:#fff;border:1px solid var(--ligne);border-radius:10px;box-shadow:var(--ombre);overflow:hidden;cursor:grab;user-select:none}
.c-carte.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-doux),var(--ombre)}
.c-carte .vis{position:relative;width:100%;aspect-ratio:1.6/1;background:#14110d}
.c-carte .vis img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.c-carte .num{position:absolute;top:5px;left:5px;width:21px;height:21px;border-radius:5px;background:var(--accent);color:#fff;display:grid;place-items:center;font-family:var(--f-titre);font-size:.85rem}
.c-carte .agr{position:absolute;top:5px;right:5px;width:21px;height:21px;border:0;border-radius:5px;background:rgba(255,255,255,.9);color:var(--ink);display:grid;place-items:center;font-size:.75rem}
.c-carte .agr:hover{background:var(--accent);color:#fff}
.c-carte .tit{font-family:var(--f-titre);font-weight:700;font-size:.82rem;line-height:1.05;color:var(--ink);padding:.4rem .5rem .5rem}
.c-carte.pose-anim{animation:pulse .7s ease}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(232,129,28,.5)}100%{box-shadow:0 0 0 18px rgba(232,129,28,0)}}
.c-carte.depart{outline:2px solid var(--accent);outline-offset:2px}

/* Flèches */
#fleches{position:absolute;top:0;left:0;width:3200px;height:2200px;overflow:visible;pointer-events:none}
#fleches .hit{stroke:transparent;stroke-width:18;fill:none;pointer-events:stroke;cursor:pointer}
#fleches .trait{stroke:#8a857b;stroke-width:2.2;fill:none}
#fleches .trait.sel{stroke:var(--accent);stroke-width:3}
#fleches .lib{font-family:var(--f-ui);font-size:14px;fill:var(--ink)}
.fleche-croix{position:absolute;width:22px;height:22px;background:#c1444e;color:#fff;border:0;border-radius:50%;display:grid;place-items:center;font-size:.8rem;transform:translate(-50%,-50%);z-index:5}

/* Notes texte */
.c-texte{position:absolute;font-family:var(--f-ui);font-size:15px;color:var(--ink);background:#fff7e6;border:1px solid #f0dfbc;border-radius:6px;min-width:60px;padding:6px 9px;cursor:grab;user-select:none;white-space:pre-wrap;max-width:280px;box-shadow:0 3px 10px rgba(27,26,23,.08)}
.c-texte.sel{outline:2px solid var(--accent)}
.c-texte[contenteditable="true"]{cursor:text;outline:2px solid var(--accent)}
.texte-croix{position:absolute;width:20px;height:20px;background:#c1444e;color:#fff;border:0;border-radius:50%;display:grid;place-items:center;font-size:.75rem;transform:translate(-50%,-50%);z-index:5}

/* Main / pioche (solo) */
.pioche{position:absolute;left:1rem;bottom:1rem;z-index:20;display:flex;gap:.5rem;align-items:flex-end}
.main-carte{width:150px;background:#fff;border:1px solid var(--ligne);border-radius:10px;box-shadow:var(--ombre);overflow:hidden}
.main-carte .vis{position:relative;width:100%;aspect-ratio:1.6/1;background:#14110d}
.main-carte .vis img{width:100%;height:100%;object-fit:cover}
.main-carte .num{position:absolute;top:5px;left:5px;width:20px;height:20px;border-radius:5px;background:var(--accent);color:#fff;display:grid;place-items:center;font-family:var(--f-titre);font-size:.8rem}
.main-carte .tit{font-family:var(--f-titre);font-weight:700;font-size:.8rem;color:var(--ink);padding:.35rem .45rem}
.main-carte .actions{display:flex;gap:.3rem;padding:0 .4rem .45rem}
.main-carte .actions button{flex:1;font-size:.74rem;padding:.32rem .2rem}

/* Aide / légende */
.legende{position:absolute;left:1rem;right:1rem;bottom:.7rem;z-index:15;background:rgba(255,255,255,.96);border:1px solid var(--ligne);border-radius:10px;font-size:.82rem;box-shadow:var(--ombre)}
.legende summary{cursor:pointer;padding:.5rem .85rem;font-family:var(--f-ui);font-weight:700;color:var(--ink);list-style:none}
.legende summary::-webkit-details-marker{display:none}
.legende summary::after{content:" ▾";color:var(--gris)}
.legende[open] summary::after{content:" ▴"}
.legende .corps{padding:0 .9rem .7rem;display:grid;grid-template-columns:1fr 1fr;gap:.35rem 1.4rem;line-height:1.4;color:#3a352c}
.legende b{color:var(--accent-txt);font-family:var(--f-ui)}
@media(max-width:800px){.legende .corps{grid-template-columns:1fr}}

.aide{position:absolute;top:.7rem;left:50%;transform:translateX(-50%);z-index:16;font-family:var(--f-ui);font-size:.82rem;color:#fff;background:var(--ink);padding:.35rem .8rem;border-radius:999px;transition:opacity .2s;pointer-events:none}
.aide:empty{display:none}
.aide:not(:empty){opacity:.92}

/* Modal carte */
.modal{position:fixed;inset:0;background:rgba(27,26,23,.55);display:none;place-items:center;z-index:100;padding:1rem}
.modal.on{display:grid}
.modal .carte-grande{width:min(90vw,400px);aspect-ratio:1/1.41;perspective:1400px}
.modal .faces{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .45s}
.modal .carte-grande.flip .faces{transform:rotateY(180deg)}
.modal .face{position:absolute;inset:0;backface-visibility:hidden;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.4);display:flex;flex-direction:column;border:1px solid var(--ligne)}
.modal .recto{background:#14110d}
.modal .recto .vg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.modal .recto .num{position:absolute;top:12px;left:12px;width:34px;height:34px;border-radius:8px;background:var(--accent);color:#fff;display:grid;place-items:center;font-family:var(--f-titre);font-size:1.3rem;z-index:2}
.modal .recto .tit{margin-top:auto;position:relative;z-index:1;font-family:var(--f-titre);font-size:1.4rem;color:#fff;padding:1.2rem .9rem .8rem;background:linear-gradient(0deg,rgba(0,0,0,.9),transparent)}
.modal .verso{transform:rotateY(180deg);padding:1.6rem}
.modal .verso h2{font-family:var(--f-titre);color:var(--accent-txt);margin:.2rem 0 .8rem}
.modal .verso p{font-size:.95rem;line-height:1.5;color:#35322c}
.modal .barre{position:absolute;top:-3.2rem;right:0;display:flex;gap:.5rem}
.modal .barre .btn{background:#fff}

/* Message mobile (l'outil vise l'ordinateur, A17.2) */
.mobile-avis{display:none}
@media(max-width:760px){
  .app{display:none}
  .mobile-avis{display:grid;place-items:center;position:fixed;inset:0;background:var(--bg);padding:2rem;text-align:center;z-index:200}
  .mobile-avis h1{font-family:var(--f-titre);font-size:1.8rem;margin:0 0 .6rem}
  .mobile-avis p{font-family:var(--f-texte);color:var(--gris);max-width:22rem;margin:0 auto}
}