/* ============================================================
   TNI — design.css
   Habillage graphique optionnel des MENUS (barre d'outils, panneaux,
   boutons, champs, modales). Sélectionné par body[data-design="…"].

   Principe : style.css pilote l'interface via des variables CSS
   (--panel, --panel2, --border, --accent, --shadow, --radius, --text,
   --muted). Chaque style ci-dessous redéfinit surtout ces variables —
   donc l'essentiel de l'UI se ré-habille tout seul — puis ajoute
   quelques règles « signature » (dégradés, biseaux, verre dépoli).

   « classique » = AUCUNE règle ici = apparence d'origine du logiciel.
   Le fond du tableau n'est PAS touché (la fonction « fond de page »
   reste intacte). En revanche, chaque style habille AUSSI les objets
   posés (étiquettes-mots, textes, tableaux) et leurs poignées (barre
   de déplacement, croix de suppression, coin de redimension), comme
   dans les maquettes DESIGN-TESTS/tni-*.html.

   Pour tout retirer : enlever le <link> de design.css dans tni.html
   (et l'attribut data-design). Aucune autre dépendance.
   ============================================================ */

/* ============================================================
   CLASSE · LISIBLE — pensé pour la projection : textes et icônes
   agrandis (lecture depuis le fond de la classe), interface épurée
   et très contrastée, espacements resserrés pour afficher un maximum
   sans « trous ». Les tailles sont FIXÉES ici : profile.js les pose en
   style inline, donc on les force avec !important (le choix Confort/
   Compact/Mini n'a plus d'effet tant que ce style est actif — voulu).
   ============================================================ */
body[data-design="classe"]{
  /* tailles agrandies (priment le style inline du profil) */
  --ui-font:17px !important;
  --ui-titre:9px !important;
  --ui-btn:46px !important;
  --ui-left-w:266px !important;
  --ui-right-w:236px !important;
  --ui-radius:10px !important;
  --ui-opacity:1 !important;            /* panneaux 100 % opaques : contraste max */
  /* palette épurée, haut contraste (forcée pour un rendu garanti) */
  --panel:#ffffff !important; --panel2:#eef3fa !important; --border:#c6d2e2 !important;
  --text:#10202f !important; --muted:#51627a !important;
  --accent:#1461d2 !important; --accent-text:#ffffff !important;
  --shadow:0 2px 10px rgba(16,40,80,.12);
}
/* surfaces nettes : bord franc, ombre discrète (pas de dégradé) */
body[data-design="classe"] .panel-box,
body[data-design="classe"] #objbar .sub,
body[data-design="classe"] .modal,
body[data-design="classe"] .seat-wrap{
  box-shadow:0 1px 4px rgba(16,40,80,.10); border:1px solid var(--border);
}
body[data-design="classe"] #topbar{ box-shadow:0 2px 10px rgba(16,40,80,.12); }
/* titres de panneaux : grands, gras, lisibles */
body[data-design="classe"] .panel-box h3{
  font-size:15px; font-weight:800; letter-spacing:.2px; color:#0f2740;
  text-transform:none; background:var(--panel2);
}
/* titres de sous-menus : nets, contrastés, liseré d'accent (repère clair) */
body[data-design="classe"] .sub{ border-color:var(--border); }
body[data-design="classe"] .sub>h4{
  font-size:13px; font-weight:800; letter-spacing:.3px; color:#26527f;
  border-left:3px solid var(--accent); padding-left:8px;
}
/* densité : on resserre les écarts pour afficher plus d'entrées */
body[data-design="classe"] .box-body{ gap:4px; padding:6px 7px; }
body[data-design="classe"] .sub>.sub-body{ gap:4px; padding:5px 6px; }
body[data-design="classe"] .row{ gap:6px; }
/* boutons d'activités et d'outils (label = emoji + texte) : gros et gras */
body[data-design="classe"] .btn.wide{
  font-size:18px; font-weight:650; line-height:1.15; text-align:left;
  padding:8px 11px; letter-spacing:.1px;
}
/* autres boutons : lisibles, plats, sans à-coups */
body[data-design="classe"] .btn{ font-weight:600; }
body[data-design="classe"] .btn:hover{ filter:none; background:#e3edfb; }
body[data-design="classe"] .btn:active,
body[data-design="classe"] .tool-btn:active{ transform:none; }
body[data-design="classe"] .btn.primary,
body[data-design="classe"] .btn.active,
body[data-design="classe"] .tool-btn.active{
  background:var(--accent); color:var(--accent-text); border-color:transparent; font-weight:700;
}
/* barre d'outils du haut : boutons nets, cerclés */
body[data-design="classe"] .tool-btn{ border:1px solid var(--border); }
body[data-design="classe"] .tool-btn:hover{ filter:none; background:#e3edfb; }
/* champs de saisie confortables */
body[data-design="classe"] select,
body[data-design="classe"] input[type="text"],
body[data-design="classe"] input[type="number"],
body[data-design="classe"] textarea{ font-size:16px; }
/* aide/légendes un cran plus grandes que par défaut */
body[data-design="classe"] .hint{ font-size:13px; color:var(--muted); }

/* ============================================================
   FLAT DESIGN — aplats, pas d'ombre, accent franc
   ============================================================ */
body[data-design="flat"]{
  --panel:#ffffff; --panel2:#eef2f6; --border:#e1e7ee;
  --text:#243140; --muted:#7b8794;
  --accent:#ff5252; --accent-text:#ffffff;
  --radius:8px; --shadow:none;
}
body[data-design="flat"] .panel-box,
body[data-design="flat"] #topbar,
body[data-design="flat"] .modal{ box-shadow:none; }
body[data-design="flat"] .btn:active,
body[data-design="flat"] .tool-btn:active{ transform:none; }
body[data-design="flat"] .btn:hover,
body[data-design="flat"] .tool-btn:hover{ filter:none; background:#e6ecf3; }
/* objets posés : aplats nets, sans ombre (DESIGN-TESTS/tni-flat.html) */
body[data-design="flat"] .item.i-text{ box-shadow:none; border:2px solid var(--border); }
body[data-design="flat"] .item.i-word{ box-shadow:none; border-width:0; font-weight:700; }
body[data-design="flat"] .item.i-table .tbl{ box-shadow:none; }
body[data-design="flat"] .tbl .cell{ border-color:#c6cfd9; }
/* poignées : formes franches, sans relief */
body[data-design="flat"] .item .grip{ border-radius:0; opacity:1; }
body[data-design="flat"] .item .item-del{ border-radius:6px; background:var(--accent); color:var(--accent-text); }
body[data-design="flat"] .item .item-resize{ border-radius:0; }

/* ============================================================
   MATERIAL DESIGN — surfaces élevées, barre d'app colorée
   ============================================================ */
body[data-design="material"]{
  --panel:#ffffff; --panel2:#fafafa; --border:#e0e0e0;
  --text:#212121; --muted:#757575;
  --accent:#3f51b5; --accent-text:#ffffff;
  --radius:4px;
  --shadow:0 1px 2px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.10);
}
body[data-design="material"] #topbar{ background:var(--accent); border:none; }
body[data-design="material"] #topbar .tool-btn{ background:transparent; border:none; color:#fff; border-radius:50%; }
body[data-design="material"] #topbar .tool-btn:hover{ background:rgba(255,255,255,.18); filter:none; }
body[data-design="material"] #topbar .tool-btn.active{ background:rgba(255,255,255,.28); color:#fff; }
body[data-design="material"] #topbar .sep{ background:rgba(255,255,255,.3); }
body[data-design="material"] #topbar .size-lab{ color:#fff; }
body[data-design="material"] .panel-box h3{ color:#5c6bc0; font-weight:700; }
body[data-design="material"] .btn{ text-transform:uppercase; font-weight:700; letter-spacing:.4px; border:none; }
body[data-design="material"] .btn:not(.primary){ color:var(--accent); }
/* bouton ACTIF (Confort/Compact/Mon profil, etc.) : fond accent => texte lisible */
body[data-design="material"] .btn.active{ color:var(--accent-text); }
body[data-design="material"] .btn:active,
body[data-design="material"] .tool-btn:active{ transform:none; }
/* objets posés : surfaces élevées, sans bordure (DESIGN-TESTS/tni-material.html) */
body[data-design="material"] .item.i-text{ border:none; border-radius:4px; box-shadow:var(--shadow); }
body[data-design="material"] .item.i-word{ border:none; box-shadow:var(--shadow); }
body[data-design="material"] .item.i-table .tbl{ box-shadow:var(--shadow); }
body[data-design="material"] .tbl .cell{ border-color:#cfd4da; }
/* poignées : pastilles élevées */
body[data-design="material"] .item .grip{ border-radius:4px 4px 0 0; opacity:1; box-shadow:0 1px 3px rgba(0,0,0,.25); }
body[data-design="material"] .item .item-del{ box-shadow:0 2px 5px rgba(0,0,0,.3); }
body[data-design="material"] .item .item-resize{ border-radius:2px; box-shadow:0 2px 5px rgba(0,0,0,.3); }

/* ============================================================
   SKEUOMORPHISME — matière, biseaux, boutons bombés et vernis
   --skeuo-mat : teinte de la matière (réglable dans « Mon profil »)
   ============================================================ */
body[data-design="skeuomorphisme"]{
  --skeuo-mat:#454b54;
  --panel:#3f444c; --panel2:#4a5059; --border:#23262b;
  --text:#f4efe6; --muted:#cdbf9e;
  --accent:#c9982f; --accent-text:#2a1e00;
  --radius:12px;
  --shadow:0 8px 18px rgba(0,0,0,.5);
}
body[data-design="skeuomorphisme"] .panel-box,
body[data-design="skeuomorphisme"] #topbar,
body[data-design="skeuomorphisme"] #objbar .sub,
body[data-design="skeuomorphisme"] .modal,
body[data-design="skeuomorphisme"] .seat-wrap{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.22)), var(--skeuo-mat);
  box-shadow:0 4px 9px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.14);  /* ombre fenêtres ÷2 */
}
/* la barre d'outils garde une ombre marquée */
body[data-design="skeuomorphisme"] #topbar{
  box-shadow:0 8px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14);
}
body[data-design="skeuomorphisme"] .panel-box h3,
body[data-design="skeuomorphisme"] .seat-bar{
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.10)), var(--skeuo-mat);
  color:#f6e6bf; text-shadow:0 -1px 0 rgba(0,0,0,.6);
}
body[data-design="skeuomorphisme"] .sub{
  background:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.28)), var(--skeuo-mat);
}
body[data-design="skeuomorphisme"] .sub>h4{ color:#cdbf9e; text-shadow:0 -1px 0 rgba(0,0,0,.5); }
body[data-design="skeuomorphisme"] .btn,
body[data-design="skeuomorphisme"] .tool-btn{
  background:linear-gradient(180deg, rgba(255,255,255,.30), rgba(0,0,0,.28)), var(--skeuo-mat);
  border:1px solid #20242a; color:#f3eee2; text-shadow:0 -1px 0 rgba(0,0,0,.5);
  box-shadow:0 2px 3px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35);
}
body[data-design="skeuomorphisme"] .btn:hover,
body[data-design="skeuomorphisme"] .tool-btn:hover{ filter:brightness(1.08); }
body[data-design="skeuomorphisme"] .btn:active,
body[data-design="skeuomorphisme"] .tool-btn:active{
  transform:none; box-shadow:inset 0 2px 5px rgba(0,0,0,.55);
}
body[data-design="skeuomorphisme"] .btn.primary,
body[data-design="skeuomorphisme"] .tool-btn.active{
  background:linear-gradient(180deg, rgba(255,255,255,.45), rgba(0,0,0,.12)), var(--accent);
  border-color:#7a560f; color:var(--accent-text); text-shadow:0 1px 0 rgba(255,255,255,.3);
  box-shadow:0 2px 4px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.5);
}
body[data-design="skeuomorphisme"] select,
body[data-design="skeuomorphisme"] input[type="text"],
body[data-design="skeuomorphisme"] input[type="number"],
body[data-design="skeuomorphisme"] textarea{
  background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.08)), var(--skeuo-mat);
  color:#f4efe6; border:1px solid #1b1e23; box-shadow:inset 0 2px 4px rgba(0,0,0,.5);
}
body[data-design="skeuomorphisme"] .sep{ background:#20242a; }
/* objets posés : étiquettes vernies, tableau « plaque »
   (DESIGN-TESTS/tni-skeuomorphisme.html) */
body[data-design="skeuomorphisme"] .item.i-text{
  background:linear-gradient(180deg,#fffef8,#efe6cf);
  border:1px solid #b9a87f; border-radius:10px; color:#3a2f18;
  box-shadow:0 6px 12px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.8);
}
body[data-design="skeuomorphisme"] .item.i-word{
  border-width:1px; text-shadow:0 1px 0 rgba(255,255,255,.45);
  box-shadow:0 4px 7px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.6);
}
body[data-design="skeuomorphisme"] .item.i-table .tbl{
  border:2px solid #8a7a55; box-shadow:0 6px 14px rgba(0,0,0,.4);
}
/* poignées : biseaux assortis à la matière */
body[data-design="skeuomorphisme"] .item .grip{
  background:linear-gradient(180deg, rgba(255,255,255,.30), rgba(0,0,0,.28)), var(--accent);
  border:1px solid #20242a; border-bottom:none; opacity:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
body[data-design="skeuomorphisme"] .item .item-del{
  background:linear-gradient(180deg, rgba(255,255,255,.30), rgba(0,0,0,.28)), #b03430;
  border:1px solid #38100e; text-shadow:0 -1px 0 rgba(0,0,0,.4);
  box-shadow:0 2px 3px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35);
}
body[data-design="skeuomorphisme"] .item .item-resize{
  background:linear-gradient(180deg, rgba(255,255,255,.30), rgba(0,0,0,.28)), var(--accent);
  border:1px solid #20242a;
  box-shadow:0 2px 3px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35);
}

/* ============================================================
   GLASS (verre) — verre CLAIR et lumineux, flou d'arrière-plan
   --glass-tint : "r,g,b" de la teinte · --glass-blur : intensité
   Base blanche très translucide + voile de teinte (fini le gris) ;
   l'accent reprend la teinte choisie dans « Mon profil ».
   Repris de DESIGN-TESTS/tni-glassmorphisme(-teinte).html.
   ============================================================ */
body[data-design="glass"]{
  --glass-tint:64,145,108; --glass-blur:12px;    /* #40916c : vert du logo (ancien défaut : bleu #3a6ff0) */
  --panel:rgba(255,255,255,.42); --panel2:rgba(255,255,255,.30);
  --border:rgba(var(--glass-tint),.35);
  --text:#1b2738; --muted:#56657d;
  --accent:rgb(var(--glass-tint)); --accent-text:#ffffff;
  --radius:10px;
  --shadow:0 10px 28px rgba(30,55,100,.16);
}
body[data-design="glass"] .panel-box,
body[data-design="glass"] #topbar,
body[data-design="glass"] #objbar .sub,
body[data-design="glass"] .modal,
body[data-design="glass"] .seat-wrap{
  background:linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.20)),
             linear-gradient(135deg, rgba(var(--glass-tint),.20), rgba(var(--glass-tint),.06));
  -webkit-backdrop-filter:saturate(160%) blur(var(--glass-blur));
  backdrop-filter:saturate(160%) blur(var(--glass-blur));
  border:1px solid var(--border);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.7);
}
/* arrondi des fenêtres : plafonné à 10px (l'arrondi profil reste
   pris en compte s'il est plus petit) */
body[data-design="glass"] .panel-box,
body[data-design="glass"] #topbar{ border-radius:min(var(--ui-radius), 10px); }
body[data-design="glass"] .modal,
body[data-design="glass"] .seat-wrap{ border-radius:10px; }
/* panneaux latéraux (gauche/droite) : ombre ÷2.
   Modales (fenêtres qui s'ouvrent), barre d'outils et objbar gardent var(--shadow). */
body[data-design="glass"] .panel-box{
  box-shadow:0 5px 14px rgba(30,55,100,.08), inset 0 1px 0 rgba(255,255,255,.7);
}
body[data-design="glass"] .panel-box h3,
body[data-design="glass"] .seat-bar{ background:rgba(255,255,255,.34); color:#1d2440; }
body[data-design="glass"] .sub{ background:rgba(255,255,255,.30); border:1px solid rgba(var(--glass-tint),.28); }
body[data-design="glass"] .sub>h4{ color:var(--muted); }
body[data-design="glass"] .btn,
body[data-design="glass"] .tool-btn{
  background:linear-gradient(135deg, rgba(255,255,255,.60), rgba(255,255,255,.28)),
             linear-gradient(135deg, rgba(var(--glass-tint),.16), rgba(var(--glass-tint),.05));
  border:1px solid var(--border); color:#1b2738;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
body[data-design="glass"] .btn:hover,
body[data-design="glass"] .tool-btn:hover{ filter:none; background:rgba(255,255,255,.85); }
body[data-design="glass"] .btn.primary,
body[data-design="glass"] .tool-btn.active{ background:var(--accent); color:var(--accent-text); border-color:transparent; }
body[data-design="glass"] select,
body[data-design="glass"] input[type="text"],
body[data-design="glass"] input[type="number"],
body[data-design="glass"] textarea{
  background:rgba(255,255,255,.60); border:1px solid var(--border); color:#1b2738;
}
body[data-design="glass"] .sep{ background:var(--border); }
/* objets posés : verre eux aussi (DESIGN-TESTS/tni-glassmorphisme.html) */
body[data-design="glass"] .item.i-text{
  background:rgba(255,255,255,.50); border:1px solid var(--border); color:#1b2738;
  -webkit-backdrop-filter:saturate(150%) blur(var(--glass-blur));
  backdrop-filter:saturate(150%) blur(var(--glass-blur));
  box-shadow:0 10px 28px rgba(30,55,100,.14), inset 0 1px 0 rgba(255,255,255,.7);
}
/* étiquettes-mots : pastilles de verre coloré, liseré blanc */
body[data-design="glass"] .item.i-word{
  background:rgba(255,220,110,.46); border:1px solid rgba(255,255,255,.85); font-weight:700;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 6px 16px rgba(30,55,100,.18), inset 0 1px 0 rgba(255,255,255,.7);
}
body[data-design="glass"] .item.i-word.w-pronom{ background:rgba(80,160,255,.42); border-color:rgba(255,255,255,.85); }
body[data-design="glass"] .item.i-word.w-verbe { background:rgba(255,90,120,.42); border-color:rgba(255,255,255,.85); }
body[data-design="glass"] .item.i-word.w-vert  { background:rgba(110,210,140,.46); border-color:rgba(255,255,255,.85); }
body[data-design="glass"] .item.i-table .tbl{
  background:rgba(255,255,255,.50);
  -webkit-backdrop-filter:saturate(150%) blur(var(--glass-blur));
  backdrop-filter:saturate(150%) blur(var(--glass-blur));
  box-shadow:0 10px 28px rgba(30,55,100,.14);
}
body[data-design="glass"] .tbl .cell{ border-color:rgba(90,110,150,.55); }
/* poignées : barre de déplacement, croix et redimension en verre */
body[data-design="glass"] .item .grip{
  background:rgba(var(--glass-tint),.55); opacity:1;
  border:1px solid rgba(255,255,255,.75); border-bottom:none; border-radius:8px 8px 0 0;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
body[data-design="glass"] .item .item-del{
  background:rgba(229,57,53,.72); border:1px solid rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 4px 10px rgba(30,55,100,.25), inset 0 1px 0 rgba(255,255,255,.5);
}
body[data-design="glass"] .item .item-resize{
  background:rgba(var(--glass-tint),.60); border:1px solid rgba(255,255,255,.8); border-radius:6px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 4px 10px rgba(30,55,100,.25), inset 0 1px 0 rgba(255,255,255,.5);
}

/* ============================================================
   RÉALISME — cadres en bois, tons chauds (habillage des menus)
   --real-wood : teinte du bois (réglable dans « Mon profil »)
   ============================================================ */
body[data-design="realisme"]{
  --real-wood:#7a5230;
  --panel:#7a5230; --panel2:#8a5f38; --border:#4a3015;
  --text:#fdf6e3; --muted:#e8d8b0;
  --accent:#d98a2b; --accent-text:#2a1800;
  --radius:8px;
  --shadow:0 8px 16px rgba(0,0,0,.45);
}
body[data-design="realisme"] .panel-box,
body[data-design="realisme"] #topbar,
body[data-design="realisme"] #objbar .sub,
body[data-design="realisme"] .modal,
body[data-design="realisme"] .seat-wrap{
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 3px, transparent 3px 7px),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.20)), var(--real-wood);
  box-shadow:0 4px 8px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.16);  /* ombre fenêtres ÷2 */
}
/* la barre d'outils garde une ombre marquée */
body[data-design="realisme"] #topbar{
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.16);
}
body[data-design="realisme"] .panel-box h3,
body[data-design="realisme"] .seat-bar{
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.12)), var(--real-wood);
  color:#fff4dd; text-shadow:0 -1px 0 rgba(0,0,0,.5);
}
body[data-design="realisme"] .sub{ background:rgba(0,0,0,.22); }
body[data-design="realisme"] .sub>h4{ color:#f0dcb4; }
body[data-design="realisme"] .btn,
body[data-design="realisme"] .tool-btn{
  background:linear-gradient(180deg, rgba(255,255,255,.40), rgba(0,0,0,.18)), #b98a55;
  border:1px solid #5a3c1c; color:#3a2407; text-shadow:0 1px 0 rgba(255,255,255,.25);
  box-shadow:0 2px 3px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.4);
}
body[data-design="realisme"] .btn:hover,
body[data-design="realisme"] .tool-btn:hover{ filter:brightness(1.06); }
body[data-design="realisme"] .btn:active,
body[data-design="realisme"] .tool-btn:active{ transform:translateY(1px); box-shadow:0 1px 2px rgba(0,0,0,.4); }
body[data-design="realisme"] .btn.primary,
body[data-design="realisme"] .tool-btn.active{
  background:linear-gradient(180deg, rgba(255,255,255,.40), rgba(0,0,0,.12)), var(--accent);
  border-color:#7a4a10; color:var(--accent-text);
}
body[data-design="realisme"] select,
body[data-design="realisme"] input[type="text"],
body[data-design="realisme"] input[type="number"],
body[data-design="realisme"] textarea{
  background:#f3e7c9; color:#3a2407; border:1px solid #6e4824;
}
body[data-design="realisme"] .sep{ background:#4a3015; }
/* objets posés : papiers scotchés et post-it inclinés
   (DESIGN-TESTS/tni-realisme.html) */
body[data-design="realisme"] .item.i-text{
  background:#fffdf3; color:#2c2a22; border:1px solid #e3dcc4; border-radius:2px;
  box-shadow:0 8px 16px rgba(0,0,0,.4);
}
body[data-design="realisme"] .item.i-text::before{
  content:""; position:absolute; left:50%; top:-9px; transform:translateX(-50%) rotate(-3deg);
  width:60px; height:18px; background:rgba(225,210,140,.65); border:1px solid rgba(180,160,90,.6);
}
body[data-design="realisme"] .item.i-word{
  background:#fff59d; color:#5a4500; border:none; border-radius:2px; font-weight:700;
  box-shadow:0 6px 12px rgba(0,0,0,.4); transform:rotate(2deg);
}
body[data-design="realisme"] .item.i-word.w-verbe { background:#ff8a80; color:#5a0d06; transform:rotate(-2deg); }
body[data-design="realisme"] .item.i-word.w-pronom{ background:#90caf9; color:#0d3a66; transform:rotate(1.5deg); }
body[data-design="realisme"] .item.i-word.w-vert  { background:#a5d6a7; color:#1b4d27; transform:rotate(-1.5deg); }
/* tableau « à la craie » (pensé pour le fond vert posé par ce style) */
body[data-design="realisme"] .item.i-table .tbl{ background:transparent; box-shadow:none; }
body[data-design="realisme"] .tbl .cell{
  border-color:rgba(255,255,255,.65); color:#fdfdf5;
  font-family:"Comic Sans MS","Segoe Print",cursive;
}
/* poignées : plaquettes de bois, croix vernie */
body[data-design="realisme"] .item .grip{
  background:linear-gradient(180deg,#caa06a,#a9824e); border:1px solid #5a3c1c;
  border-bottom:none; opacity:1; box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
body[data-design="realisme"] .item .item-del{
  background:linear-gradient(180deg,#e57368,#c0392b); border:1px solid #7a1d12;
  box-shadow:0 2px 3px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.35);
}
body[data-design="realisme"] .item .item-resize{
  background:linear-gradient(180deg,#eaa64a,#cf7f1f); border:1px solid #7a4a10;
  box-shadow:0 2px 3px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.35);
}