/* La Serre : carnet papier, encre, ombres franches */
:root {
  --papier: #f4efe3;
  --papier2: #fbf8f0;
  --encre: #2b2118;
  --gris: #7a6e60;
  --sapin: #3f6b4a;
  --brique: #b5523b;
  --bleu: #2e4a7a;
  --miel: #e0b04a;
  --ombre: 3px 3px 0 var(--encre);
  --titre: "Patrick Hand", "Comic Neue", "Segoe Print", "Bradley Hand", "Chalkboard SE", cursive;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--papier);
  background-image: repeating-linear-gradient(transparent 0 27px, #e4dccb 27px 28px);
  color: var(--encre);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--bleu); }
h1, h2, h3, .logo { font-family: var(--titre); font-weight: 700; letter-spacing: .5px; }
h1 { font-size: 2rem; margin: .2em 0 .5em; }
h2 { font-size: 1.4rem; margin: 1.2em 0 .4em; }
main { max-width: 880px; margin: 0 auto; padding: 16px; }
footer { text-align: center; color: var(--gris); font-size: .85rem; padding: 24px 16px; }

/* Bandeau */
.bandeau {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  padding: 10px 16px; background: var(--sapin); color: var(--papier2);
  border-bottom: 3px solid var(--encre);
}
.logo { color: var(--papier2); text-decoration: none; font-size: 1.7rem; transform: rotate(-2deg); }
.bandeau nav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.bandeau nav a { color: var(--papier2); text-decoration: none; padding: 3px 9px; border-radius: 4px 9px 5px 8px; }
.bandeau nav a:hover, .bandeau nav a.ici { background: var(--papier2); color: var(--encre); }
.moi { display: flex; align-items: center; gap: 8px; color: var(--papier2); text-decoration: none; }
.moi span { display: grid; line-height: 1.15; }
.moi small { opacity: .85; }
.jauge { display: block; height: 7px; width: 110px; margin-top: 3px; background: #24432d; border: 1px solid var(--encre); border-radius: 3px; overflow: hidden; }
.jauge i { display: block; height: 100%; background: var(--miel); }

/* Avatar : calques superposés, pixels nets */
.avatar {
  position: relative; display: inline-block; flex: none;
  width: var(--t); height: var(--t);
  border: 2px solid var(--encre); border-radius: 6px 10px 7px 9px;
  background: var(--papier2); overflow: hidden;
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }

/* Cartes et blocs */
.carte {
  background: var(--papier2); border: 2px solid var(--encre); border-radius: 8px 14px 9px 12px;
  box-shadow: var(--ombre); padding: 14px 16px; margin: 0 0 18px;
}
.carte:nth-child(even) { border-radius: 13px 8px 12px 9px; }
.annonce { border: 2px solid var(--encre); padding: 8px 12px; border-radius: 6px; background: #dfead6; box-shadow: var(--ombre); }
.annonce.fete { background: #f6e2a8; }
.annonce.erreur { background: #f1c9bd; }
.discret { color: var(--gris); font-size: .9rem; }
.grille { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pousse { flex: 1; }

/* Formulaires */
input[type=text], input[type=password], input[type=number], textarea, select {
  font: inherit; width: 100%; padding: 8px 10px; background: #fff;
  border: 2px solid var(--encre); border-radius: 5px 8px 6px 7px;
}
textarea { min-height: 80px; resize: vertical; }
label { display: block; margin: 10px 0 4px; font-weight: 600; }
button, .bouton {
  font: inherit; font-weight: 600; cursor: pointer; display: inline-block; text-decoration: none;
  padding: 7px 14px; color: var(--encre); background: var(--miel);
  border: 2px solid var(--encre); border-radius: 6px 10px 7px 9px; box-shadow: 2px 2px 0 var(--encre);
}
button:active, .bouton:active { transform: translate(2px, 2px); box-shadow: none; }
button.second { background: var(--papier2); }
button.danger { background: var(--brique); color: #fff; }
button:disabled { opacity: .5; cursor: default; }
button.lien { background: none; border: 0; box-shadow: none; padding: 0; color: var(--bleu); text-decoration: underline; font-weight: 400; }
form.enligne { display: inline; }

/* Fil */
.post header { display: flex; align-items: center; gap: 10px; }
.post .texte { white-space: pre-wrap; overflow-wrap: anywhere; margin: 10px 0; }
.reactions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.reactions button { padding: 2px 10px; font-weight: 400; background: var(--papier); box-shadow: 1px 1px 0 var(--encre); }
.reactions button.oui { background: #dfead6; font-weight: 700; }
.commentaires { border-left: 3px dotted var(--gris); margin: 10px 0 0 6px; padding-left: 12px; }
.commentaire { margin: 8px 0; overflow-wrap: anywhere; }
.pseudo { font-weight: 700; color: var(--encre); }

/* Jeu */
.quete { display: flex; align-items: center; gap: 12px; }
.barre { height: 12px; background: var(--papier); border: 2px solid var(--encre); border-radius: 4px; overflow: hidden; }
.barre i { display: block; height: 100%; background: var(--sapin); }
.tampon {
  display: inline-block; padding: 4px 10px; margin: 3px; font-family: var(--titre); font-size: 1.05rem;
  border: 2px dashed var(--brique); color: var(--brique); border-radius: 50% 45% 50% 40% / 40% 50% 45% 50%;
  transform: rotate(-3deg);
}
.tampon.eteint { border-color: #bbb; color: #aaa; }
.tampon:nth-child(odd) { transform: rotate(2deg); }

/* Vestiaire / boutique */
.objet { text-align: center; }
.objet img.vignette { width: 96px; height: 96px; image-rendering: pixelated; border: 2px solid var(--encre); border-radius: 6px; background: var(--papier); }
.objet.porte img.vignette { outline: 4px solid var(--miel); }

/* Atelier */
.atelier { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
#toile { image-rendering: pixelated; cursor: crosshair; touch-action: none; }
.palette { display: grid; grid-template-columns: repeat(8, 30px); gap: 4px; }
.palette button { width: 30px; height: 30px; padding: 0; border-radius: 5px; box-shadow: none; }
.palette button.choisi { outline: 3px solid var(--encre); outline-offset: 2px; }

/* Page perso */
.perso { border-top: 10px solid var(--c, var(--sapin)); }

table { border-collapse: collapse; width: 100%; }
td, th { text-align: left; padding: 6px; border-bottom: 1px solid #d8cfbc; }

.bouton.second { background: var(--papier2); }

/* Herbier : fiches façon planche d'herbier */
.album { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.fiche {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--encre);
  background: var(--papier2); border: 3px solid var(--encre); border-radius: 10px 14px 9px 12px;
  box-shadow: var(--ombre); padding: 8px; position: relative;
  border-top: 12px solid var(--c);
}
.fiche:hover { transform: translateY(-3px) rotate(-.5deg); }
.fiche-haut { display: flex; justify-content: space-between; gap: 6px; font-family: var(--titre); font-size: 1.15rem; line-height: 1.1; }
.fiche-haut i { font-style: normal; font-size: .9rem; background: var(--encre); color: var(--papier2); border-radius: 9px; padding: 0 6px; height: fit-content; }
.fiche-image { display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 2px solid var(--encre); border-radius: 4px; background: var(--papier); }
.fiche-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sans-image { display: grid; place-items: center; height: 100%; font-family: var(--titre); font-size: 3rem; color: var(--c); }
.fiche-theme { font-size: .8rem; font-weight: 700; color: var(--c); text-transform: uppercase; letter-spacing: .5px; }
.fiche-texte { font-size: .85rem; line-height: 1.3; flex: 1; }
.fiche-stats { display: flex; justify-content: space-between; font-size: .8rem; font-weight: 700; border-top: 2px dotted var(--gris); padding-top: 4px; }
/* La rareté se voit au cadre */
.fiche.peu { border-color: #4f7fb8; border-top-color: var(--c); }
.fiche.rare { outline: 3px solid var(--miel); outline-offset: 2px; }
.fiche.epique { outline: 3px dashed var(--brique); outline-offset: 3px; background: #fbf1e6; }
.fiche.legendaire {
  outline: 4px double var(--miel); outline-offset: 3px;
  background: repeating-linear-gradient(45deg, #fff8e1 0 10px, #fbf0cc 10px 20px);
}

/* Ouverture du sachet */
.sachet { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.retourne { position: relative; cursor: pointer; perspective: 900px; animation: tombe .4s calc(var(--i) * .15s) both; }
.retourne .dos, .retourne .face { transition: transform .5s; backface-visibility: hidden; }
.retourne .dos {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 1;
  font-family: var(--titre); font-size: 4rem; color: var(--papier2);
  background: repeating-linear-gradient(-45deg, var(--sapin) 0 12px, #36603f 12px 24px);
  border: 3px solid var(--encre); border-radius: 10px 14px 9px 12px; box-shadow: var(--ombre);
}
.retourne .face { transform: rotateY(180deg); }
.retourne.vu .dos { transform: rotateY(-180deg); }
.retourne.vu .face { transform: rotateY(0); }
.nouvelle { position: absolute; top: -10px; right: -6px; z-index: 2; background: var(--brique); color: #fff; font-weight: 700; padding: 2px 8px; border: 2px solid var(--encre); border-radius: 6px; transform: rotate(6deg); }
@keyframes tombe { from { opacity: 0; transform: translateY(-20px); } }

/* Lecteur */
.chemin { overflow-wrap: anywhere; }
button.cueillir { background: #9fd18b; animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { transform: scale(1.06); } }
.article { overflow-wrap: anywhere; }
.article img { max-width: 100%; height: auto; }
.article table { width: auto; max-width: 100%; display: block; overflow-x: auto; }
.article .infobox_v3, .article .infobox, .article .thumb, .article figure { float: right; clear: right; max-width: 45%; margin: 0 0 10px 14px; font-size: .9rem; }
.article figure img { border: 2px solid var(--encre); border-radius: 4px; }
.article figcaption { font-size: .85rem; color: var(--gris); }
.article a { font-weight: 600; text-decoration-thickness: 2px; text-decoration-color: var(--miel); }
@media (max-width: 600px) { .article .infobox_v3, .article .infobox, .article .thumb, .article figure { float: none; max-width: 100%; margin: 10px 0; } }
.source { margin-top: 2em; border-top: 2px dotted var(--gris); padding-top: 8px; }

/* Ensembles de l'herbier */
.ensembles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-bottom: 10px; }
.ensembles .carte { margin: 0; }
.ensembles .complet { background: #eef5e6; }
.titres { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0; }
.titres a { font-size: .85rem; padding: 1px 7px; border-radius: 9px; text-decoration: none; border: 1.5px solid var(--encre); }
.titres a.eu { background: var(--sapin); color: var(--papier2); }
.titres a.manque { border-style: dashed; color: var(--gris); }

/* Échanges */
.deux-colonnes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.choix-liste { display: grid; gap: 6px; max-height: 360px; overflow-y: auto; padding: 4px; }
.choix-fiche { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; cursor: pointer;
  border: 2px solid var(--encre); border-left: 8px solid var(--c); border-radius: 6px; padding: 5px 8px; background: #fff; }
.choix-fiche span { display: grid; line-height: 1.2; }
.choix-fiche small { color: var(--gris); }
.choix-fiche:has(input:checked) { background: #f6e2a8; }

/* Jeux */
.plateau { display: grid; justify-items: center; gap: 10px; }
.quatre { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; width: min(460px, 100%);
  background: var(--bleu); padding: 10px; border: 3px solid var(--encre); border-radius: 10px; box-shadow: var(--ombre); }
.quatre .trou { aspect-ratio: 1; border-radius: 50%; padding: 0; background: var(--papier2); box-shadow: inset 2px 2px 0 #0003; }
.quatre .trou:not(:disabled):hover { background: #fff3c9; }
.quatre .trou:disabled { opacity: 1; cursor: default; }
.quatre .j1 { background: var(--brique); }
.quatre .j2 { background: var(--miel); }
.quatre .dernier { outline: 3px solid var(--papier2); outline-offset: -6px; }

.damier { display: grid; grid-template-columns: repeat(8, 1fr); width: min(480px, 100%); aspect-ratio: 1;
  border: 4px solid var(--encre); box-shadow: var(--ombre); }
.damier .case { border: 0; border-radius: 0; padding: 0; box-shadow: none; display: grid; place-items: center; aspect-ratio: 1; }
.damier .case:disabled { opacity: 1; cursor: default; }
.damier .claire { background: #efe2c4; }
.damier .sombre { background: #8a6a4a; }
.damier .dernier { background: #c9b46a; }
.damier .choisi { background: #e0b04a; }
.damier .cible { box-shadow: inset 0 0 0 4px #3f6b4a; }
.damier .cible::after { content: ""; width: 26%; height: 26%; border-radius: 50%; background: #3f6b4a99; }
.damier .echec { background: #d9634e; }
.pion { width: 78%; height: 78%; border-radius: 50%; border: 3px solid var(--encre); box-shadow: 0 3px 0 var(--encre); display: grid; place-items: center; }
.pion.j1 { background: #f4ecdb; }
.pion.j2 { background: #3a2a1e; }
.pion.dame::after { content: "♛"; font-size: 1.3rem; color: var(--miel); }
.pion.pris { opacity: .35; }
.piece { font-size: clamp(1.6rem, 7vw, 2.6rem); line-height: 1; }
.piece.w { color: #fbf8f0; text-shadow: 0 0 2px #2b2118, 1px 1px 0 #2b2118, -1px -1px 0 #2b2118, 1px -1px 0 #2b2118, -1px 1px 0 #2b2118; }
.piece.b { color: #2b2118; }
.echecs .cible:has(.piece)::after { display: none; }

svg.billes { width: min(480px, 100%); }
.fond-hex { fill: #8a6a4a; stroke: var(--encre); stroke-width: .25; }
.trou-bille { fill: #6e5236; stroke: #2b2118; stroke-width: .08; }
.trou-bille.j1 { fill: #f4ecdb; stroke-width: .18; }
.trou-bille.j2 { fill: #2b2118; stroke: #000; }
.trou-bille.dernier { stroke: var(--miel); stroke-width: .22; }
.trou-bille.choisie { fill: var(--miel); stroke-width: .25; }
.fleches { display: grid; grid-template-columns: repeat(2, 56px); gap: 6px; justify-content: center; }
.fleches button { font-size: 1.4rem; padding: 4px; }

/* Studio */
.studio { display: grid; gap: 16px; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); align-items: start; }
@media (max-width: 860px) { .studio { grid-template-columns: minmax(0, 1fr); } }
.studio > *, .fabrique > *, .atelier > * { min-width: 0; }
#toile-studio { width: 100%; height: auto; display: block; border: 3px solid var(--encre); border-radius: 6px; touch-action: none; cursor: grab; image-rendering: pixelated; }
.studio-toile #outils-element { margin-top: 10px; }
#texte-bulle { margin-top: 8px; min-height: 60px; }
.studio-panneau h3 { margin: .8em 0 .3em; }
.studio-panneau h3:first-child { margin-top: 0; }
.vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; }
.vignettes button { padding: 3px; background: var(--papier2); font-weight: 400; font-size: .8rem; display: grid; gap: 2px; box-shadow: 1px 1px 0 var(--encre); }
.vignettes img { width: 100%; image-rendering: pixelated; display: block; }
.vignettes.stickers { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
.mes-images { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.mes-images img, .image-post { width: 100%; height: auto; display: block; border: 2px solid var(--encre); border-radius: 4px; margin-bottom: 6px; }
.image-post { margin-top: 10px; }

/* Notifications : pastilles du menu et bandeau « Ça t'attend » */
.pastille {
  display: inline-block; min-width: 1.3em; padding: 0 5px; margin-left: 2px;
  background: var(--brique); color: #fff; border-radius: 9px 7px 10px 8px;
  font-size: .8em; line-height: 1.4; text-align: center; font-weight: bold;
}
.attente {
  background: #fdf1d6; border-bottom: 2px dashed var(--miel);
  padding: 8px 16px; text-align: center;
}
.attente a { color: var(--encre); }
.carte.a-moi { border-left: 8px solid var(--brique); background: #fff7ec; }

/* Herbier : onglets et filtres en étiquettes */
.onglets { display: flex; gap: 6px; border-bottom: 3px solid var(--encre); margin: 18px 0 12px; flex-wrap: wrap; }
.onglets a {
  padding: 6px 14px; text-decoration: none; color: var(--encre); background: var(--papier2);
  border: 3px solid var(--encre); border-bottom: none; border-radius: 10px 14px 0 0; margin-bottom: -3px;
}
.onglets a.ici { background: var(--papier); font-weight: bold; padding-bottom: 9px; }
.filtres { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.filtres input[type=search] { flex: 1 1 200px; width: auto; margin: 0; }
.etiquette {
  padding: 2px 10px; text-decoration: none; color: var(--encre); background: var(--papier2);
  border: 2px solid var(--encre); border-left: 7px solid var(--c, var(--gris)); border-radius: 6px 10px 7px 9px;
  white-space: nowrap;
}
.etiquette small { color: var(--gris); }
.etiquette.ici { background: var(--encre); color: var(--papier2); }
.etiquette.ici small { color: var(--papier); }
.fiche[hidden] { display: none; }

/* ================================================================
   Habillage « cahier de la serre » : couleurs crayon, ruban adhésif,
   onglets intercalaires, feutre surligneur. Rien de brillant ni de flou.
   ================================================================ */
@font-face { font-family: "Patrick Hand"; src: url(../polices/patrick-hand.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Andika"; src: url(../polices/andika.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Andika"; src: url(../polices/andika-gras.woff2) format("woff2"); font-weight: 700; font-display: swap; }
:root {
  --menthe: #cfe3c9; --peche: #f6d3bf; --ciel: #cfe0ef; --beurre: #f6e7b0; --lilas: #e1d7ea;
  --marge: #e7a29a;
}
body {
  font: 17px/1.5 "Andika", system-ui, sans-serif;
  background-color: var(--papier);
  background-image:
    linear-gradient(90deg, transparent 0 46px, var(--marge) 46px 47px, transparent 47px 50px, var(--marge) 50px 51px, transparent 51px),
    repeating-linear-gradient(transparent 0 29px, #dcd3bf 29px 30px);
  background-attachment: fixed;
}
@media (max-width: 700px) { body { background-image: repeating-linear-gradient(transparent 0 29px, #dcd3bf 29px 30px); } }
button, .bouton, input, select, textarea { font-family: inherit; }

/* Bandeau : bord découpé aux ciseaux */
.bandeau {
  position: relative; background: #355c40; border-bottom: 0; padding-bottom: 16px;
  background-image: radial-gradient(#ffffff14 1.5px, transparent 1.5px); background-size: 14px 14px;
}
.bandeau::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px;
  background: radial-gradient(circle at 8px 0, #355c40 7px, transparent 7.5px) 0 0 / 16px 10px repeat-x;
}
.logo { font-size: 2rem; display: flex; align-items: center; gap: 8px; }
.logo::before {
  content: ""; width: 30px; height: 30px; image-rendering: pixelated;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Crect x='4' y='4' width='1' height='4' fill='%239fd18b'/%3E%3Crect x='1' y='2' width='3' height='2' fill='%239fd18b'/%3E%3Crect x='5' y='1' width='3' height='3' fill='%23cfe3c9'/%3E%3Crect x='2' y='8' width='6' height='2' fill='%23b5523b'/%3E%3Crect x='3' y='7' width='4' height='1' fill='%23d9634e'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bandeau nav { gap: 6px; }
.bandeau nav a {
  --t: var(--beurre);
  background: var(--t); color: var(--encre); font-weight: 700; font-size: .95rem;
  border: 2px solid var(--encre); border-radius: 8px 12px 4px 4px; padding: 3px 10px;
  box-shadow: 2px 2px 0 #00000040; transition: transform .1s;
}
.bandeau nav a:nth-child(5n+2) { --t: var(--menthe); }
.bandeau nav a:nth-child(5n+3) { --t: var(--peche); }
.bandeau nav a:nth-child(5n+4) { --t: var(--ciel); }
.bandeau nav a:nth-child(5n+5) { --t: var(--lilas); }
.bandeau nav a:hover { background: var(--t); transform: translateY(-2px) rotate(-1.5deg); }
.bandeau nav a.ici { background: var(--papier2); transform: translateY(-3px) rotate(-2deg); box-shadow: 3px 3px 0 var(--encre); }
.jauge { background: #24432d; border-radius: 6px; height: 9px; }
.jauge i { background: repeating-linear-gradient(-45deg, var(--miel) 0 6px, #edc66a 6px 12px); }

/* Titres : feutre surligneur et trait ondulé */
h1 {
  display: inline-block; font-size: 2.3rem; padding: 0 8px; transform: rotate(-1deg);
  background: linear-gradient(transparent 55%, #f2cf6e 55% 88%, transparent 88%);
}
h1 + * { clear: both; }
h2 {
  color: var(--sapin); padding-bottom: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='8'%3E%3Cpath d='M0 4 Q10 0 20 4 T40 4' fill='none' stroke='%23b5523b' stroke-width='2'/%3E%3C/svg%3E") left bottom / 40px 8px repeat-x;
  background-size: 40px 8px; width: fit-content; max-width: 100%;
}
h3 { color: var(--brique); }

/* Cartes : un bout de ruban adhésif de temps en temps */
.carte { position: relative; border-width: 2.5px; }
.carte:nth-of-type(3n+1)::before, .carte.ruban::before {
  content: ""; position: absolute; top: -11px; left: calc(50% - 45px); width: 90px; height: 22px;
  background: repeating-linear-gradient(90deg, #f2cf6ecc 0 8px, #f6dc8fcc 8px 16px);
  border-left: 2px dotted #0000001f; border-right: 2px dotted #0000001f;
  transform: rotate(-3deg); pointer-events: none;
}
.carte:nth-of-type(6n+4)::before { background: repeating-linear-gradient(90deg, #9fd18bbb 0 8px, #b9dfa8bb 8px 16px); transform: rotate(2.5deg); left: 18px; }
.carte.ligne::before, .ensembles .carte::before, .mes-images .carte::before { display: none; }

/* Messages : post-it */
.annonce {
  background: var(--menthe); border-radius: 2px 2px 14px 2px; transform: rotate(-.6deg);
  box-shadow: 3px 4px 0 #2b211833; border-width: 2px; font-weight: 700;
}
.annonce.fete { background: var(--beurre); transform: rotate(.6deg); }
.annonce.erreur { background: var(--peche); }

/* Boutons : un peu plus ronds, ils se soulèvent au survol */
button, .bouton { border-radius: 10px 14px 9px 13px; padding: 7px 16px; transition: transform .1s, box-shadow .1s; }
button:not(:disabled):hover, .bouton:hover { transform: translate(-1px, -2px); box-shadow: 3px 4px 0 var(--encre); }
.damier .case:hover, .palette button:hover { transform: none; box-shadow: none; }
.quatre .trou:hover { transform: none; box-shadow: inset 2px 2px 0 #0003; }
button.second:not(:disabled):hover, .bouton.second:hover { background: #fff; }
button.lien:hover { transform: none; box-shadow: none; }
input[type=text], input[type=password], input[type=number], input[type=search], textarea, select {
  border-radius: 8px 11px 9px 10px; background: #fffef9;
}
input[type=search] { font: inherit; padding: 8px 10px; border: 2px solid var(--encre); }
input:focus, textarea:focus, select:focus { outline: 3px solid var(--miel); outline-offset: 1px; }

/* Petites touches */
.avatar { box-shadow: 2px 2px 0 #2b211840; }
.post header .pseudo { font-family: var(--titre); font-size: 1.2rem; }
.reactions button { border-radius: 14px; }
.reactions button.oui { background: var(--beurre); }
.tampon { background: #fff8; }
.pastille { border: 2px solid var(--encre); border-radius: 50%; min-width: 1.6em; line-height: 1.3; }
.attente { background: var(--beurre); border-bottom: 0; padding-top: 14px; font-size: .95rem; }
.objet { background: linear-gradient(var(--papier2), var(--papier2)); }
.grille > .carte:nth-child(4n+1) { background: #fbfdf7; }
.grille > .carte:nth-child(4n+3) { background: #fdf8f3; }
footer { padding-bottom: 60px; position: relative; }
footer::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; opacity: .8;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' shape-rendering='crispEdges'%3E%3Crect x='6' y='4' width='1' height='6' fill='%233f6b4a'/%3E%3Crect x='3' y='3' width='3' height='2' fill='%239fd18b'/%3E%3Crect x='7' y='2' width='3' height='2' fill='%239fd18b'/%3E%3Crect x='24' y='6' width='1' height='4' fill='%233f6b4a'/%3E%3Crect x='25' y='5' width='2' height='2' fill='%239fd18b'/%3E%3Crect x='33' y='3' width='1' height='7' fill='%233f6b4a'/%3E%3Crect x='31' y='1' width='5' height='3' fill='%23e7a29a'/%3E%3Crect x='32' y='2' width='3' height='1' fill='%23e0b04a'/%3E%3C/svg%3E") bottom / 160px 40px repeat-x;
  image-rendering: pixelated;
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Échanges : de vraies petites fiches */
.fiche.mini { padding: 5px; gap: 4px; border-width: 2px; border-top-width: 8px; box-shadow: 2px 2px 0 var(--encre); }
.fiche.mini .fiche-haut { font-size: .95rem; }
.fiche.mini .fiche-haut b { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fiche.mini .fiche-theme { font-size: .7rem; }
.fiche.mini .sans-image { font-size: 2rem; }
.fiche.mini.rare, .fiche.mini.epique, .fiche.mini.legendaire { outline-width: 2px; outline-offset: 2px; }
.choix-liste { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; max-height: 440px; padding: 8px 6px; }
.colonne-troc input[type=search] { width: 100%; margin-bottom: 4px; }
.colonne-troc h3 small { color: var(--gris); font-family: "Andika", sans-serif; font-size: .85rem; }
.choix-carte { position: relative; margin: 0; font-weight: 400; cursor: pointer; display: block; }
.choix-carte[hidden] { display: none; }
.choix-carte input { position: absolute; opacity: 0; pointer-events: none; }
.choix-carte .fiche { height: 100%; transition: transform .12s; }
.choix-carte:hover .fiche { transform: translateY(-3px) rotate(-1deg); }
.choix-carte input:checked + .fiche { transform: translateY(-4px) rotate(-2deg); background: #fff6d8; box-shadow: 4px 5px 0 var(--sapin); }
.choix-carte input:checked + .fiche::after {
  content: "✓"; position: absolute; top: -12px; right: -8px; width: 28px; height: 28px; display: grid; place-items: center;
  background: var(--sapin); color: #fff; font-weight: 700; border: 2px solid var(--encre); border-radius: 50%;
}
.choix-carte input:disabled + .fiche { opacity: .45; cursor: not-allowed; }
.choix-carte input:focus-visible + .fiche { outline: 3px solid var(--bleu); outline-offset: 3px; }
.troc { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin: 6px 0 12px; }
.troc h3 { margin: 0 0 6px; }
.fleche-troc { font-size: 2.2rem; color: var(--brique); font-family: var(--titre); }
.main-fiches { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.rien-du-tout { color: var(--gris); font-style: italic; border: 2px dashed #c9bfa9; border-radius: 10px; padding: 18px; text-align: center; margin: 0; }
.mot { font-family: var(--titre); font-size: 1.2rem; background: var(--beurre); display: inline-block; padding: 2px 10px; transform: rotate(-1deg); }
@media (max-width: 600px) { .troc { grid-template-columns: 1fr; } .fleche-troc { text-align: center; transform: rotate(90deg); } }
button.petit { padding: 2px 10px; font-size: .85rem; margin-top: 4px; }
.modif-objet { display: grid; gap: 4px; margin: 6px 0; }
.modif-objet input, .modif-objet select { padding: 4px 6px; font-size: .9rem; }

/* Fin de partie : grand tampon par-dessus le plateau */
.zone-plateau { position: relative; }
.resultat {
  position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; gap: 14px;
  background: #f4efe3e6; border-radius: inherit; padding: 16px;
}
.resultat[hidden] { display: none; }
.resultat-tampon {
  --c: var(--gris);
  display: grid; justify-items: center; gap: 4px; text-align: center;
  padding: 18px 34px; border: 6px double var(--c); color: var(--c); background: var(--papier2);
  border-radius: 14px 22px 12px 20px; transform: rotate(-6deg);
  box-shadow: 4px 5px 0 #2b211833;
  animation: tamponne .45s cubic-bezier(.2, 1.6, .4, 1) both;
}
.resultat-tampon b { font-family: var(--titre); font-size: clamp(2.6rem, 9vw, 4.2rem); line-height: 1; text-transform: uppercase; letter-spacing: 2px; }
.resultat-tampon span { font-weight: 700; color: var(--encre); }
.resultat.gagne .resultat-tampon { --c: var(--sapin); background: #eef5e6; }
.resultat.perdu .resultat-tampon { --c: var(--brique); background: #fbeee8; transform: rotate(4deg); }
.resultat.gagne .resultat-tampon::before, .resultat.gagne .resultat-tampon::after {
  content: ""; position: absolute; width: 46px; height: 46px; top: -26px; image-rendering: pixelated;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h1v2h2v1h1v1H5v2H4V5H3v1H2V4H0V3h2V2h1z' fill='%23e0b04a' stroke='%232b2118' stroke-width='.3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.resultat.gagne .resultat-tampon { position: relative; }
.resultat.gagne .resultat-tampon::before { left: -22px; transform: rotate(-15deg); }
.resultat.gagne .resultat-tampon::after { right: -22px; transform: rotate(20deg); }
@keyframes tamponne { from { opacity: 0; transform: scale(2.2) rotate(-14deg); } }
.titre-rubrique { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.bouton.petit { padding: 2px 10px; font-size: .85rem; }

/* Fabrique de jeux et arcade */
.fabrique { display: grid; gap: 16px; grid-template-columns: minmax(0, 2.2fr) minmax(250px, 1fr); align-items: start; }
@media (max-width: 900px) { .fabrique { grid-template-columns: 1fr; } }
#toile-niveau { width: 100%; height: auto; display: block; border: 3px solid var(--encre); border-radius: 6px; image-rendering: pixelated; touch-action: none; cursor: crosshair; outline: none; }
.fabrique-panneau h3 { margin: .6em 0 .3em; }
.fabrique-panneau h3:first-child { margin-top: 0; }
.fabrique-panneau fieldset { border: 0; padding: 0; margin: 0; }
.encres { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; }
.encres button { display: flex; align-items: center; gap: 6px; padding: 5px 8px; }
.pastel { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--encre); border-radius: 4px 6px 5px 6px; flex: none; }
.pastel.gomme { background: repeating-linear-gradient(45deg, #fff 0 4px, #e6ddcb 4px 8px); }
.pastel.bouger { background: #fbf8f0 linear-gradient(#b5523b, #b5523b) 2px 50% / 9px 2px no-repeat; position: relative; }
.pastel.bouger::after { content: ""; position: absolute; right: 1px; top: 3px; border: 4px solid transparent; border-left-color: #b5523b; border-right: 0; }
#panneau-bouger { margin-top: 8px; }
.encre-mur { color: #5a4636; } .encre-danger { color: #c4544a; } .encre-bonus { color: #2e4a7a; } .encre-depart { color: var(--sapin); }
.case-a-cocher { display: flex; gap: 8px; align-items: center; font-weight: 400; margin-top: 12px; }
.case-a-cocher input { width: auto; }
.commandes { display: flex; gap: 10px; margin-top: 10px; user-select: none; -webkit-user-select: none; }
.commandes[hidden] { display: none; }
.commandes button[data-commande] { min-width: 64px; min-height: 52px; font-size: 1.4rem; touch-action: none; }
.commandes button[data-commande="saut"] { min-width: 110px; font-size: 1.1rem; }
.liste-niveaux { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.niveau-carte { display: grid; gap: 4px; align-content: start; text-decoration: none; color: var(--encre); margin: 0; }
a.niveau-carte:hover { transform: translateY(-3px) rotate(-.5deg); }
.niveau-carte .tampon { justify-self: start; }
.niveau-carte .ligne { margin: 4px 0 0; }
.mini-niveau { width: 100%; height: auto; display: block; border: 2px solid var(--encre); border-radius: 4px; image-rendering: pixelated; }
.niveau-annonce { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 10px 0; text-decoration: none; color: var(--encre);
  background: var(--papier); border: 2px dashed var(--sapin); border-radius: 10px; padding: 8px; }
.niveau-annonce .mini-niveau.grand { width: min(320px, 100%); }
.niveau-annonce .bouton { margin-top: 6px; }
.records { padding-left: 1.4em; margin: 0; }
.records li { margin: 3px 0; }
.records li.moi { background: var(--beurre); border-radius: 6px; padding: 0 6px; }

/* Menu en groupes : onglets du cahier qui déplient une fiche */
.bandeau nav.menu { align-items: flex-start; }
.bandeau nav.menu > a, .menu-groupe > summary {
  --t: var(--beurre);
  display: inline-block; list-style: none; cursor: pointer; user-select: none;
  background: var(--t); color: var(--encre); font-weight: 700; font-size: .95rem; text-decoration: none;
  border: 2px solid var(--encre); border-radius: 8px 12px 4px 4px; padding: 3px 10px;
  box-shadow: 2px 2px 0 #00000040; transition: transform .1s;
}
.menu-groupe > summary::-webkit-details-marker { display: none; }
.menu-groupe > summary::after { content: " ▾"; font-size: .8em; }
.menu-groupe[open] > summary::after { content: " ▴"; }
.bandeau nav.menu > :nth-child(2) > summary { --t: var(--menthe); }
.bandeau nav.menu > :nth-child(3) > summary { --t: var(--peche); }
.bandeau nav.menu > :nth-child(4) > summary { --t: var(--ciel); }
.bandeau nav.menu > :nth-child(5) { --t: var(--lilas); }
.bandeau nav.menu > :nth-child(6) { --t: var(--papier2); }
.bandeau nav.menu > a:hover, .menu-groupe > summary:hover { transform: translateY(-2px) rotate(-1.5deg); }
.bandeau nav.menu > a.ici, .menu-groupe > summary.ici { background: var(--papier2); transform: translateY(-3px) rotate(-2deg); box-shadow: 3px 3px 0 var(--encre); }
.menu-groupe { position: relative; }
.sous-menu {
  position: absolute; z-index: 20; top: calc(100% + 8px); left: -6px; width: 290px;
  display: grid; gap: 2px; padding: 8px;
  background: var(--papier2); border: 2.5px solid var(--encre); border-radius: 6px 12px 8px 10px;
  box-shadow: 4px 5px 0 #2b211855;
  background-image: repeating-linear-gradient(transparent 0 25px, #e4dccb 25px 26px);
}
.bandeau nav.menu .sous-menu a {
  all: unset; display: grid; cursor: pointer; padding: 6px 10px; border-radius: 6px; color: var(--encre);
}
.bandeau nav.menu .sous-menu a b { font-family: var(--titre); font-size: 1.2rem; font-weight: 700; }
.bandeau nav.menu .sous-menu a small { color: var(--gris); font-size: .85rem; line-height: 1.25; }
.bandeau nav.menu .sous-menu a:hover, .bandeau nav.menu .sous-menu a:focus-visible { background: var(--beurre); }
.bandeau nav.menu .sous-menu a.ici { background: var(--menthe); }
@media (max-width: 640px) {
  .menu-groupe[open] { flex-basis: 100%; }
  .sous-menu { position: static; width: auto; margin-top: 8px; }
}

/* Parties : les deux joueurs au-dessus du plateau */
.duel { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 12px; }
.duel-contre { font-family: var(--titre); font-size: 1.2rem; color: var(--gris); }
.joueur-carte { display: flex; align-items: center; gap: 10px; flex: 1 1 0; max-width: 300px; min-width: 0;
  padding: 8px 12px; background: var(--papier2); border: 3px solid #2b211833; border-radius: 12px 16px 10px 14px;
  transition: transform .2s, border-color .2s; }
#joueur-2 { flex-direction: row-reverse; text-align: right; }
.joueur-carte .avatar { flex: none; }
.joueur-nom { display: grid; gap: 2px; min-width: 0; line-height: 1.2; }
.joueur-nom b { font-family: var(--titre); font-size: 1.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.joueur-pieces { display: flex; align-items: center; gap: 6px; min-height: 22px; }
#joueur-2 .joueur-pieces { flex-direction: row-reverse; }
.joueur-tour { font-weight: 700; font-size: .9rem; }
.joueur-carte.son-tour { border-color: var(--encre); background: var(--beurre); transform: rotate(-1deg) scale(1.03); box-shadow: var(--ombre); }
.joueur-carte.son-tour .avatar { animation: sautille 1.2s ease-in-out infinite; }
.joueur-carte.gagnant { border-color: var(--sapin); background: #eef5e6; }
@keyframes sautille { 50% { transform: translateY(-5px); } }
/* Pastille de la couleur des pièces de chaque joueur, selon le jeu */
.marque-pieces { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--encre); flex: none; }
.jeu-quatre .marque-pieces.j1 { background: var(--brique); }
.jeu-quatre .marque-pieces.j2 { background: var(--miel); }
.marque-pieces.j1 { background: #f4ecdb; }
.marque-pieces.j2 { background: #3a2a1e; }
@media (max-width: 560px) {
  .duel { gap: 6px; }
  .duel-contre { display: none; }
  .joueur-carte { padding: 6px; gap: 6px; }
  .joueur-carte .avatar { --t: 44px !important; }
  .joueur-nom b { font-size: 1.05rem; }
}

/* Atelier : toile + outils + palette ensemble, réglages à côté (dessous sur téléphone) */
.atelier-dessin { flex: 1 1 300px; max-width: 480px; }
.atelier-options { flex: 1 1 260px; }
.barre-outils { margin: 10px 0 8px; gap: 6px; }
.barre-outils button { padding: 6px 10px; }
@media (max-width: 600px) {
  .atelier { gap: 10px; }
  .atelier-dessin { padding: 8px; max-width: none; }
  .barre-outils button { flex: 1 1 auto; padding: 8px 4px; font-size: .9rem; }
  /* Toute la palette visible d'un coup : 2 rangées de 12 */
  .palette { grid-template-columns: repeat(12, 1fr); gap: 3px; }
  .palette button { width: auto; height: auto; aspect-ratio: 1; }
}

/* Studio sur téléphone : onglets sous l'image, vignettes sur une rangée qui défile */
.onglets-studio { display: none; }
@media (max-width: 860px) {
  .studio { gap: 10px; }
  .studio-toile, .studio-panneau { padding: 8px; }
  .onglets-studio { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 8px; }
  .onglets-studio button { padding: 6px 2px; font-size: .9rem; }
  .studio-section:not(.ouvert) { display: none; }
  .studio-section h3 { display: none; }
  .studio-panneau .vignettes { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 104px;
    overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 6px; scroll-snap-type: x proximity; }
  .studio-panneau .vignettes > * { scroll-snap-align: start; }
  .studio-panneau .vignettes.stickers { grid-auto-columns: 56px; }
  #outils-element { gap: 4px; }
  #outils-element button { padding: 6px 8px; font-size: .9rem; }
}

/* Fabrique : loupe, outils sous la toile */
.fenetre-niveau { overflow: hidden; border-radius: 6px; }
.fenetre-niveau.zoomee { overflow: auto; max-height: 70vh; border: 3px solid var(--encre); overscroll-behavior: contain; }
.fenetre-niveau.zoomee #toile-niveau { border: 0; border-radius: 0; max-width: none; }
.pastel.main { background: #fbf8f0 radial-gradient(circle at 50% 55%, var(--encre) 0 3px, transparent 4px); }
.tester-ligne { margin: 10px 0 0; }
.barre-fabrique { margin: 8px 0 0; gap: 6px; }
.barre-fabrique [data-zoom] { padding: 4px 10px; }
@media (max-width: 700px) {
  .fabrique { gap: 10px; }
  .fabrique-toile { padding: 8px; }
  .encres { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .encres button { padding: 6px 4px; font-size: .85rem; gap: 4px; justify-content: center; }
  .encres .pastel { width: 14px; height: 14px; }
  .tester-ligne button { flex: 1; }
  /* Pendant le jeu : gros boutons, gauche/droite à gauche, saut à droite */
  .commandes button[data-commande] { min-height: 64px; min-width: 72px; }
  .commandes button[data-commande="saut"] { min-width: 120px; }
}
@media (max-width: 600px) {
  .atelier-options .ligne button { padding: 6px 12px; }
  .atelier-options [data-decaler] { padding: 6px 14px; font-size: 1rem; }
}