/* Brokelyn, palier 0 : une fausse fenêtre de Paint (Windows 7), mobile d'abord.
   Moche exprès, mais moche AU PIXEL près : angles droits, polices sans lissage,
   palette d'origine de Paint, aucune animation fluide. */

@font-face {
  font-family: "Paint Sans";
  src: url(fonts/paint-sans-regular.woff2) format("woff2");
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: "Paint Sans";
  src: url(fonts/paint-sans-bold.woff2) format("woff2");
  font-weight: 700;
  font-display: block;
}

:root {
  /* Jetons nommés, relevés sur Paint de Windows 7 */
  --verre-haut: #e4edf8;
  --verre-bas: #c2d3e8;
  --verre-bord: #7f97b6;
  --ruban: #f5f7fa;
  --ruban-bord: #b9c9dd;
  --atelier: #c5d1e2;
  --atelier-ombre: rgba(44, 62, 92, 0.35);
  --papier: #ffffff;
  --encre: #000000;
  --encre-douce: #3c3c3c;
  --etat-fond: #f0f0f0;
  --etat-bord: #d7d7d7;
  --fermer-haut: #e9a99d;
  --fermer-bas: #c6402b;
  --fermer-bord: #8c2a1c;
  --bouton-haut: #f6f6f6;
  --bouton-bas: #dadada;
  --bouton-bord: #707070;
  --bouton-presse: #c4d9f0;
  --outil-actif: #fde9a8;
  --outil-actif-bord: #d6a73a;
  --pointilles: #3a6ea5;
  --rouge-paint: #ed1c24;
  --vert-paint: #22b14c;
  --jaune-paint: #fff200;
  --gris-paint: #7f7f7f;
  --o: 22px;            /* taille d'une icône d'outil */
  --case: 15px;         /* case de palette */
  --pixel: "Paint Sans", "Liberation Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 12px/1.3 var(--pixel);
  color: var(--encre);
  background-color: var(--atelier);
  overflow: hidden;
  -webkit-font-smoothing: none;
  font-smooth: never;
  -webkit-tap-highlight-color: transparent;
}
img { image-rendering: pixelated; image-rendering: crisp-edges; }
button { font: inherit; color: inherit; }

.lecteur {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- la fenêtre ---------- */
.fenetre {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  height: 100vh;
  height: 100dvh;
  border: 1px solid var(--verre-bord);
  background-color: var(--ruban);
}
.fenetre.occupe, .fenetre.occupe * { cursor: wait; }

.titre {
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
  height: 30px; padding: 0 0 0 7px;
  background: linear-gradient(var(--verre-haut), var(--verre-bas));
  border-bottom: 1px solid var(--verre-bord);
}
.titre-icone { width: 16px; height: 16px; flex: none; }
.titre-texte {
  flex: 1; min-width: 0; margin: 0;
  font: 400 12px/30px var(--pixel);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
}
.titre-boutons { display: flex; align-self: flex-start; }
.tb {
  display: grid; place-items: center;
  width: 27px; height: 19px;
  border: 1px solid var(--verre-bord); border-top: 0; margin-left: -1px;
  background: linear-gradient(#f2f6fb, #d3e0ef);
  font: 700 11px/1 var(--pixel); color: var(--encre-douce);
}
.tb-max i { width: 9px; height: 7px; border: 1px solid var(--encre-douce); border-top-width: 2px; }
.tb-x {
  width: 44px;
  background: linear-gradient(var(--fermer-haut), var(--fermer-bas));
  border-color: var(--fermer-bord);
  color: var(--papier); font-size: 13px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

.menus {
  display: flex; gap: 2px;
  padding: 2px 4px;
  background-color: var(--ruban);
  border-bottom: 1px solid var(--ruban-bord);
}
.menus span { padding: 2px 6px; }

/* ---------- la jauge ---------- */
.jauge {
  padding: 5px 8px 6px;
  background: linear-gradient(var(--ruban), #e9eef5);
  border-bottom: 1px solid var(--ruban-bord);
}
.jauge-titre { margin: 0 0 4px; font: 700 13px/1.2 var(--pixel); letter-spacing: 0.02em; }
.jauge-montant { color: var(--rouge-paint); white-space: nowrap; }
.jauge-ligne { display: flex; align-items: center; gap: 8px; }
.jauge-barre {
  position: relative; flex: 1; min-width: 0;
  height: 22px;
  background-color: var(--papier);
  border: 1px solid var(--encre);
}
/* 0,03 sur 500, c'est 0,006 % : un seul pixel vert, et encore, par charité */
.jauge-remplie { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background-color: var(--vert-paint); }
.jauge-fleche { position: absolute; left: 3px; top: -1px; width: 46px; height: 22px; }
.jauge-note {
  position: absolute; left: 52px; top: 3px;
  font: 700 12px/14px var(--pixel); color: var(--rouge-paint);
  white-space: nowrap;
}
.paliers { margin: 5px 0 0; font-size: 11px; line-height: 1.3; color: var(--encre-douce); }

/* ---------- boutons façon Windows ---------- */
.bouton-win {
  flex: none;
  min-height: 24px; padding: 2px 10px;
  background: linear-gradient(var(--bouton-haut) 45%, var(--bouton-bas) 55%);
  border: 1px solid var(--bouton-bord);
  box-shadow: inset 1px 1px 0 var(--papier);
  font-size: 12px;
  cursor: pointer;
}
.bouton-win:hover { background: linear-gradient(#eaf6fd 45%, #bee6fd 55%); border-color: #3c7fb1; }
.bouton-win:active { background: linear-gradient(#e5f4fc 45%, #98d1ef 55%); box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.3); }
.bouton-win:focus-visible { outline: 1px dotted var(--encre); outline-offset: -4px; }
.bouton-mains { font-weight: 700; }

/* ---------- l'atelier : outils + espace de travail ---------- */
.atelier { display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 0; }
.outils {
  display: grid; grid-template-columns: var(--o); grid-auto-rows: calc(var(--o) + 4px);
  align-content: start; gap: 1px;
  padding: 4px 3px;
  background-color: var(--ruban);
  border-right: 1px solid var(--ruban-bord);
  overflow: hidden;
}
.outil {
  display: grid; place-items: center; padding: 0;
  width: calc(var(--o) + 2px); height: calc(var(--o) + 4px); margin-left: -1px;
  background: none; border: 1px solid transparent;
  cursor: pointer;
}
.outil:hover { border-color: var(--outil-actif-bord); background-color: #fff6d6; }
.outil.actif { border-color: var(--outil-actif-bord); background-color: var(--outil-actif); box-shadow: inset 1px 1px 2px rgba(120, 80, 0, 0.35); }
.outil:focus-visible { outline: 1px dotted var(--encre); outline-offset: -3px; }
.o {
  display: block; width: var(--o); height: var(--o);
  background-image: url(img/outils.png);
  background-repeat: no-repeat;
  background-size: calc(var(--o) * 16) var(--o);
  image-rendering: pixelated;
}
.o0 { background-position: 0 0; }
.o1 { background-position: calc(var(--o) * -1) 0; }
.o2 { background-position: calc(var(--o) * -2) 0; }
.o3 { background-position: calc(var(--o) * -3) 0; }
.o4 { background-position: calc(var(--o) * -4) 0; }
.o5 { background-position: calc(var(--o) * -5) 0; }
.o6 { background-position: calc(var(--o) * -6) 0; }
.o7 { background-position: calc(var(--o) * -7) 0; }
.o8 { background-position: calc(var(--o) * -8) 0; }
.o9 { background-position: calc(var(--o) * -9) 0; }
.o10 { background-position: calc(var(--o) * -10) 0; }
.o11 { background-position: calc(var(--o) * -11) 0; }
.o12 { background-position: calc(var(--o) * -12) 0; }
.o13 { background-position: calc(var(--o) * -13) 0; }
.o14 { background-position: calc(var(--o) * -14) 0; }
.o15 { background-position: calc(var(--o) * -15) 0; }

.espace {
  min-height: 0; overflow: hidden;
  padding: 6px 9px 9px 6px;
  background-color: var(--atelier);
}

/* la toile : blanche, avec ses poignées de redimensionnement */
.toile {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(118px, 27%) minmax(0, 1fr) auto;
  background-color: var(--papier);
  box-shadow: 2px 2px 4px var(--atelier-ombre);
}
.toile::after {
  content: ""; position: absolute; right: -6px; bottom: -6px;
  width: 5px; height: 5px;
  background-color: var(--papier); border: 1px solid var(--gris-paint);
}
.fenetre.occupe .toile::before {
  /* l'application ne répond plus : Windows blanchit la fenêtre */
  content: ""; position: absolute; inset: 0; z-index: 5;
  background-color: rgba(255, 255, 255, 0.42);
}

.zone-bulle { grid-row: 1; grid-column: 1; min-height: 0; }
.fille {
  grid-row: 2; grid-column: 1;
  justify-self: center; align-self: end;
  width: auto; height: 100%; max-width: 100%; min-height: 0;
  object-fit: contain; object-position: center bottom;
  z-index: 1;
  user-select: none; -webkit-user-drag: none;
}
.bulle {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  pointer-events: none;
  image-rendering: pixelated;
}

/* l'outil texte de Paint : cadre pointillé, poignées, barre de polices */
.outil-texte {
  grid-row: 3; grid-column: 1;
  position: relative; z-index: 3;
  margin: 0 10px 10px;
}
.barre-police {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 0 0 6px; padding: 2px 4px;
  background: linear-gradient(var(--ruban), #e4eaf2);
  border: 1px solid var(--ruban-bord);
  font-size: 11px;
}
.barre-police b, .barre-police i, .barre-police u {
  display: inline-grid; place-items: center; width: 18px; height: 18px;
  border: 1px solid transparent;
}
.barre-police b { border-color: var(--outil-actif-bord); background-color: var(--outil-actif); }
.champ { padding: 1px 4px; background-color: var(--papier); border: 1px solid #a5acb5; }
.champ-police { width: 92px; }
.champ-taille { width: 30px; }

.cadre-texte {
  position: relative;
  border: 1px dashed var(--pointilles);
  background-color: var(--papier);
}
.cadre-texte:focus-within { border-style: dashed; border-color: var(--encre); }
.cadre-texte textarea {
  display: block; width: 100%;
  min-height: 52px; max-height: 120px;
  padding: 6px 8px;
  border: 0; outline: 0; resize: none;
  background-color: transparent;
  font: 16px/1.25 var(--pixel);
  color: var(--encre);
  caret-color: var(--encre);
}
.cadre-texte textarea::placeholder { color: var(--gris-paint); }
.poignee {
  position: absolute; width: 5px; height: 5px;
  background-color: var(--papier); border: 1px solid var(--encre);
}
.p-hg { left: -3px; top: -3px; } .p-h { left: calc(50% - 3px); top: -3px; } .p-hd { right: -3px; top: -3px; }
.p-g { left: -3px; top: calc(50% - 3px); } .p-d { right: -3px; top: calc(50% - 3px); }
.p-bg { left: -3px; bottom: -3px; } .p-b { left: calc(50% - 3px); bottom: -3px; } .p-bd { right: -3px; bottom: -3px; }

.envoi { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.compteur { font-size: 11px; color: var(--encre-douce); }
.compteur.plein { color: var(--rouge-paint); font-weight: 700; }

/* ---------- palette et barre d'état ---------- */
.bas { border-top: 1px solid var(--ruban-bord); background-color: var(--ruban); }
.couleurs { display: flex; align-items: center; gap: 8px; padding: 4px 6px; }
.couleur-active {
  position: relative; flex: none;
  width: 34px; height: 33px;
  background-color: var(--papier); border: 1px solid var(--gris-paint);
}
.couleur-active .c1, .couleur-active .c2 { position: absolute; width: 16px; height: 16px; border: 1px solid var(--gris-paint); }
.couleur-active .c1 { left: 4px; top: 4px; z-index: 1; background-color: var(--encre); }
.couleur-active .c2 { right: 4px; bottom: 4px; background-color: var(--papier); }
.palette { display: grid; grid-template-columns: repeat(10, var(--case)); gap: 2px; }
.case {
  width: var(--case); height: var(--case); padding: 0;
  border: 1px solid var(--gris-paint);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.5);
  cursor: pointer;
}
.case:focus-visible { outline: 1px dotted var(--encre); outline-offset: 1px; }
.k-black { background-color: #000000; } .k-gray { background-color: #7f7f7f; } .k-darkred { background-color: #880015; }
.k-red { background-color: #ed1c24; } .k-orange { background-color: #ff7f27; } .k-yellow { background-color: #fff200; }
.k-green { background-color: #22b14c; } .k-turquoise { background-color: #00a2e8; } .k-indigo { background-color: #3f48cc; }
.k-purple { background-color: #a349a4; } .k-white { background-color: #ffffff; } .k-silver { background-color: #c3c3c3; }
.k-brown { background-color: #b97a57; } .k-rose { background-color: #ffaec9; } .k-gold { background-color: #ffc90e; }
.k-cream { background-color: #efe4b0; } .k-lime { background-color: #b5e61d; } .k-sky { background-color: #99d9ea; }
.k-bluegray { background-color: #7092be; } .k-lavender { background-color: #c8bfe7; }

.etat {
  display: flex; height: 22px;
  background-color: var(--etat-fond);
  border-top: 1px solid var(--etat-bord);
  font-size: 11px; line-height: 21px;
}
.etat-case { padding: 0 8px; border-right: 1px solid var(--etat-bord); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etat-msg { flex: 1; min-width: 0; }
#coords, .etat-zoom { display: none; }

/* ---------- la boîte d'erreur ---------- */
.dialogue-fond {
  position: fixed; inset: 0; z-index: 20;
  display: grid; place-items: center;
  padding: 16px;
  background-color: rgba(255, 255, 255, 0.04);
}
.dialogue-fond[hidden] { display: none; }
.dialogue {
  width: min(330px, 100%);
  background-color: var(--ruban);
  border: 1px solid var(--verre-bord);
  box-shadow: 3px 4px 14px rgba(20, 30, 50, 0.45);
}
.titre-dialogue { height: 28px; }
.titre-dialogue .titre-texte { line-height: 28px; }
.tb-fermer { height: 19px; cursor: pointer; padding: 0; }
.tb-fermer:focus-visible { outline: 1px dotted var(--papier); outline-offset: -3px; }
.dialogue-corps {
  display: flex; align-items: center; gap: 14px;
  padding: 22px 18px;
  background-color: var(--papier);
}
.dialogue-corps img { width: 32px; height: 32px; flex: none; }
.dialogue-corps p { margin: 0; font-size: 13px; }
.dialogue-pied { display: flex; justify-content: flex-end; padding: 10px 12px; border-top: 1px solid #dfdfdf; }
.dialogue-pied .bouton-win { min-width: 76px; }

/* ---------- grand écran : elle à gauche, la bulle et l'outil texte à droite ---------- */
@media (min-width: 760px) {
  :root { --o: 26px; --case: 17px; }
  .outils { grid-template-columns: repeat(2, var(--o)); column-gap: 3px; padding: 6px 5px; }
  .jauge { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 6px 10px; }
  .jauge-titre { margin: 0; font-size: 14px; }
  .jauge-ligne { max-width: 720px; }
  .paliers { grid-column: 1 / -1; font-size: 12px; }
  #coords, .etat-zoom { display: block; }
  .etat-case { padding: 0 14px; }
  #coords { width: 130px; }
}
@media (min-width: 760px) and (min-aspect-ratio: 6/5) {
  .espace { padding: 10px 14px 14px 10px; }
  .toile {
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .fille { grid-column: 1; grid-row: 1 / span 2; justify-self: end; align-self: center; height: 94%; }
  .zone-bulle { grid-column: 2; grid-row: 1; }
  .outil-texte { grid-column: 2; grid-row: 2; width: min(560px, 100% - 40px); margin: 0 0 28px 30px; }
}