/* Créarouselle — feuille de style unique.
   La palette est celle de la maquette : tout est sombre sauf la slide. */

:root {
  --app: #131519;
  --panneau: #1a1d23;
  --eleve: #21252c;
  --bord: #2c313a;
  --bord-fort: #343a45;
  --t1: #edeff3;
  --t2: #99a1ae;
  --t3: #656d7a;
  --accent: #2fd4c6;
  --accent-sombre: #0e3a37;
  --accent-texte: #0b2b28;
  --rose: #f57ab6;
  --orange: #f0a35e;
  --rouge: #f0736e;
  --vert: #4ade80;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--app); color: var(--t1);
  font: 400 13px/1.45 Archivo, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
input { border: none; outline: none; background: none; }
b { font-weight: 600; }
.cache { display: none !important; }
.pousse { flex: 1; }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic-s { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.ecran { position: fixed; inset: 0; display: flex; flex-direction: column; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2f353f; border-radius: 6px; border: 3px solid var(--panneau); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------- barre du haut ---------------- */

.barre {
  height: 56px; flex: none; display: flex; align-items: center; gap: 14px;
  padding: 0 16px; background: var(--panneau); border-bottom: 1px solid var(--bord);
}
.logo { width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: var(--accent-texte); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.titre-app { font-weight: 700; font-size: 15px; }
.sep { width: 1px; height: 24px; background: var(--bord); }

.compte-bouton { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 9px 0 5px; background: var(--eleve); border: 1px solid var(--bord-fort); border-radius: 8px; font: 600 13px Archivo, sans-serif; }
.compte-bouton:hover { border-color: var(--accent); }
.pastille { width: 24px; height: 24px; border-radius: 50%; background: var(--rose); color: #2a0d1c; display: flex; align-items: center; justify-content: center; font: 700 11px Archivo, sans-serif; }

.titre-doc { display: flex; flex-direction: column; gap: 1px; margin-left: 4px; min-width: 0; }
.titre-doc input { font: 600 14px Archivo, sans-serif; width: 260px; padding: 2px 4px; border-radius: 5px; }
.titre-doc input:hover { background: var(--eleve); }
.titre-doc input:focus { background: var(--eleve); box-shadow: inset 0 0 0 1px var(--accent); }
.titre-doc span, .titre-doc b + span { font-size: 11px; color: var(--t3); }
.titre-doc b { font-size: 14px; }

.etat { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t3); }
.etat i { width: 6px; height: 6px; border-radius: 50%; background: var(--vert); }
.etat.modifie i { background: var(--orange); }

.bouton-fin { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border: 1px solid var(--bord-fort); border-radius: 8px; color: #c8cdd6; font: 500 13px Archivo, sans-serif; }
.bouton-fin:hover { border-color: var(--t2); color: var(--t1); }
.bouton-plein { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 15px; background: var(--accent); border-radius: 8px; color: var(--accent-texte); font: 600 13px Archivo, sans-serif; }
.bouton-plein:hover { filter: brightness(1.08); }
.bouton-plein:disabled, .bouton-fin:disabled { opacity: .45; cursor: default; }

/* ---------------- écran d'ouverture ---------------- */

.accueil-corps { flex: 1; display: flex; min-height: 0; }
.accueil-nav { width: 244px; flex: none; display: flex; flex-direction: column; gap: 4px; padding: 18px 14px; background: var(--panneau); border-right: 1px solid var(--bord); }
.nav-item { display: flex; align-items: center; gap: 11px; height: 42px; padding: 0 12px; border-radius: 10px; color: var(--t2); font: 500 13px Archivo, sans-serif; cursor: pointer; }
.nav-item b { font-weight: 400; font-size: 12px; color: var(--t3); }
.nav-item:hover { background: var(--eleve); }
.nav-item.actif { background: var(--accent-sombre); color: var(--accent); font-weight: 600; }
.nav-cadre { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding: 13px; background: var(--eleve); border-radius: 11px; }
.nav-cadre b { font-size: 12px; }
.nav-cadre span { font-size: 11px; line-height: 1.5; color: var(--t2); }

.accueil-main { flex: 1; display: flex; flex-direction: column; gap: 36px; padding: 32px 40px; overflow-y: auto; }
.section-titre { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.section-titre h2 { margin: 0; font: 700 20px Archivo, sans-serif; }
.section-titre span { font-size: 13px; color: var(--t3); }

.grille-modeles { display: flex; flex-wrap: wrap; gap: 20px; }
.modele { display: flex; flex-direction: column; gap: 10px; cursor: pointer; }
.modele canvas, .modele .vierge { width: 165px; height: 293px; border-radius: 12px; border: 1.5px solid var(--bord); display: block; }
.modele:hover canvas, .modele:hover .vierge { border-color: var(--accent); }
.modele .vierge { border-style: dashed; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; color: var(--t2); font-size: 12px; }
.modele-nom { font: 600 13px Archivo, sans-serif; }
.modele-info { font-size: 11px; color: var(--t3); }

.grille-recents { display: flex; flex-wrap: wrap; gap: 16px; }
.recent { display: flex; align-items: center; gap: 13px; width: 268px; padding: 12px; background: var(--panneau); border: 1px solid var(--bord); border-radius: 12px; cursor: pointer; }
.recent:hover { border-color: var(--accent); }
.recent canvas { width: 62px; height: 110px; flex: none; border-radius: 7px; display: block; }
.recent .txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.recent .txt b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent .txt span { font-size: 11px; color: var(--t3); }
.vide { color: var(--t3); font-size: 13px; padding: 8px 0; }

/* ---------------- corps de l'éditeur ---------------- */

.corps { flex: 1; display: flex; min-height: 0; }

.outils { width: 60px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; background: var(--panneau); border-right: 1px solid var(--bord); }
.outil { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 50px; padding: 7px 0 5px; border-radius: 9px; color: var(--t2); cursor: pointer; }
.outil span { font: 500 9px Archivo, sans-serif; }
.outil:hover { background: var(--eleve); color: var(--t1); }
.outil.actif { background: var(--accent-sombre); color: var(--accent); }
.trait { width: 30px; height: 1px; background: var(--bord); margin: 6px 0; }

/* bibliothèque */
.biblio { width: 264px; flex: none; display: flex; flex-direction: column; background: var(--panneau); border-right: 1px solid var(--bord); }
.biblio-tete { display: flex; flex-direction: column; gap: 9px; padding: 12px; border-bottom: 1px solid #23272e; }
.biblio-tete .ligne { display: flex; align-items: baseline; gap: 6px; }
.biblio-tete .ligne b { font-size: 13px; }
.biblio-tete .ligne span { font-size: 11px; color: var(--t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.champ-recherche { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; background: var(--eleve); border: 1px solid var(--bord); border-radius: 7px; color: var(--t3); }
.champ-recherche input { flex: 1; font-size: 12px; min-width: 0; }
.champ-recherche:focus-within { border-color: var(--accent); }

.biblio-cases { flex: 1; overflow-y: auto; padding: 10px 12px; container-type: inline-size; }
.case-tete { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 4px; border-radius: 6px; cursor: pointer; }
.case-tete:hover { background: var(--eleve); }
.case-tete .fleche { transition: transform .12s; }
.case-tete.ferme .fleche { transform: rotate(-90deg); }
.case-tete .puce { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.case-tete .nom { flex: 1; font: 600 12px Archivo, sans-serif; color: #c8cdd6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-tete .nb { font-size: 11px; color: var(--t3); }
.case-tete .sup { opacity: 0; color: var(--t3); display: flex; }
.case-tete:hover .sup { opacity: 1; }
.case-tete .sup:hover { color: var(--rouge); }

/* Trois colonnes, pas plus : en élargissant le panneau ce sont les images
   qui grossissent, pas leur nombre. */
.grille-docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 2px 4px 10px; }
@container (min-width: 520px) { .grille-docs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (min-width: 760px) { .grille-docs { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.doc { position: relative; aspect-ratio: 3 / 4; border-radius: 7px; background: #0d0f12; overflow: hidden; cursor: grab; border: 1px solid transparent; }
.doc img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.doc.transparent { background-image: linear-gradient(45deg, #262b33 25%, transparent 25%), linear-gradient(-45deg, #262b33 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #262b33 75%), linear-gradient(-45deg, transparent 75%, #262b33 75%); background-size: 10px 10px; background-position: 0 0, 0 5px, 5px -5px, -5px 0; }
.doc:hover { border-color: var(--accent); }
.doc .actions { position: absolute; inset: auto 0 0 0; display: none; gap: 2px; padding: 3px; background: rgba(15,17,21,.86); }
.doc:hover .actions { display: flex; }
.doc .actions button { flex: 1; display: flex; align-items: center; justify-content: center; height: 22px; border-radius: 5px; color: var(--t2); }
.doc .actions button:hover { background: var(--eleve); color: var(--t1); }
.doc .actions button.sup:hover { color: var(--rouge); }
.doc .marque { position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.doc-vide { grid-column: 1 / -1; padding: 6px 2px 10px; font-size: 11px; color: var(--t3); }

.bouton-case { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 34px; margin-top: 6px; border: 1px dashed var(--bord-fort); border-radius: 7px; color: var(--t2); font: 500 12px Archivo, sans-serif; }
.bouton-case:hover { border-color: var(--accent); color: var(--accent); }

.depot { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 88px; margin: 0 12px 12px; border: 1px dashed var(--bord-fort); border-radius: 9px; color: var(--t3); cursor: pointer; text-align: center; }
.depot b { font-size: 11px; font-weight: 500; }
.depot span { font-size: 10px; }
.depot:hover, .depot.survol { border-color: var(--accent); color: var(--accent); background: var(--accent-sombre); }

/* plan de travail */
.plan { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #0f1115; min-width: 0; min-height: 0; overflow: hidden; position: relative; }
.plan-zone { position: relative; }
#toile { border-radius: 4px; display: block; box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.plan-pied { display: flex; align-items: center; gap: 14px; font-size: 11px; color: var(--t3); }
.plan-pied .point { width: 1px; height: 12px; background: var(--bord); }
.case-a-cocher { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.case-a-cocher input { display: none; }
.carre-securite { width: 9px; height: 9px; border: 1px dashed var(--orange); border-radius: 2px; }
.case-a-cocher input:checked + .carre-securite { background: rgba(240,163,94,.25); }
.case-a-cocher.grande { font-size: 13px; color: #c8cdd6; }
.carre { width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--bord-fort); }
.case-a-cocher input:checked + .carre { background: var(--accent); border-color: var(--accent); }

.saisie-texte { position: absolute; resize: none; border: 1.5px solid var(--accent); border-radius: 3px; background: rgba(19,21,25,.92); color: #fff; padding: 4px; outline: none; overflow: hidden; }

/* propriétés */
.props { width: 288px; flex: none; display: flex; flex-direction: column; background: var(--panneau); border-left: 1px solid var(--bord); overflow-y: auto; overflow-x: hidden; }
.props-onglets { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid #23272e; position: sticky; top: 0; background: var(--panneau); z-index: 2; }
.props-onglets button { flex: 1; height: 30px; border-radius: 7px; color: var(--t3); font: 500 12px Archivo, sans-serif; }
.props-onglets button.actif { background: var(--eleve); color: var(--t1); font-weight: 600; }
.props-corps { display: flex; flex-direction: column; gap: 16px; padding: 14px 14px 20px; }
.etiquette { font: 600 10px Archivo, sans-serif; color: var(--t3); letter-spacing: .7px; text-transform: uppercase; }
.bloc { display: flex; flex-direction: column; gap: 8px; }
.bloc .ligne { display: flex; align-items: center; justify-content: space-between; }
.bloc .ligne span { font-size: 12px; color: #c8cdd6; }
.bloc .ligne b { font-size: 12px; color: var(--t3); font-weight: 500; }
.aide { font-size: 11px; line-height: 1.5; color: var(--t3); }

.grille3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.style-texte { height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 7px; background: var(--eleve); border: 1px solid var(--bord); color: #c8cdd6; font-size: 13px; }
.style-texte:hover { border-color: var(--t2); }
.style-texte.actif { background: var(--accent-sombre); border-color: var(--accent); color: var(--t1); }

.segment { display: flex; gap: 4px; padding: 3px; background: var(--eleve); border-radius: 8px; }
.segment button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 28px; border-radius: 6px; color: var(--t2); font: 500 12px Archivo, sans-serif; }
.segment button.actif { background: var(--bord-fort); color: var(--t1); font-weight: 600; }

.couleurs { display: flex; flex-wrap: wrap; gap: 7px; }
.couleurs span { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 1px solid rgba(255,255,255,.12); }
.couleurs span.actif { box-shadow: 0 0 0 2px var(--panneau), 0 0 0 3.5px var(--accent); }
.couleurs .perso { border: 1px dashed #4a5260; display: flex; align-items: center; justify-content: center; color: var(--t2); font-size: 13px; position: relative; overflow: hidden; }
.couleurs .perso input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

input[type=range] { -webkit-appearance: none; width: 100%; height: 4px; border-radius: 2px; background: var(--bord); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--t1); cursor: pointer; }

.bouton-large { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 38px; background: var(--accent); border-radius: 9px; color: var(--accent-texte); font: 600 12px Archivo, sans-serif; }
.bouton-large.secondaire { background: var(--eleve); border: 1px solid var(--bord-fort); color: var(--t1); }
.bouton-large:hover { filter: brightness(1.08); }
.bouton-large.danger:hover { border-color: var(--rouge); color: var(--rouge); }
.deux { display: flex; gap: 6px; }
.deux .bouton-large { font-size: 12px; }

.props-pied { margin-top: auto; padding: 12px 14px 14px; border-top: 1px solid #23272e; position: sticky; bottom: 0; background: var(--panneau); }
.rien { padding: 40px 20px; text-align: center; color: var(--t3); font-size: 12px; line-height: 1.6; }

/* pellicule */
.pellicule { height: 124px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 16px; background: var(--panneau); border-top: 1px solid var(--bord); }
.pellicule-titre { display: flex; flex-direction: column; gap: 2px; width: 78px; flex: none; }
.pellicule-titre b { font-size: 12px; }
.pellicule-titre span { font-size: 10px; color: var(--t3); line-height: 1.3; }
.pellicule-liste { flex: 1; display: flex; align-items: center; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 4px 0; min-width: 0; }
.vignette { position: relative; width: 51px; height: 90px; flex: none; border-radius: 5px; border: 1px solid var(--bord-fort); overflow: hidden; cursor: pointer; background: #0d0f12; }
.vignette canvas { width: 100%; height: 100%; display: block; }
.vignette.actif { border: 2px solid var(--accent); }
.vignette .num { position: absolute; left: 3px; bottom: 3px; padding: 1px 4px; border-radius: 4px; background: rgba(15,17,21,.72); font: 600 9px Archivo, sans-serif; color: #fff; }
.vignette .actions { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: rgba(15,17,21,.72); }
.vignette:hover .actions { display: flex; }
.vignette .actions button { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--eleve); color: #c8cdd6; }
.vignette .actions button.sup:hover { color: var(--rouge); }
.vignette.glisse { opacity: .35; }
.vignette.cible { box-shadow: -3px 0 0 var(--accent); }
.ajouter-slide { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 51px; height: 90px; flex: none; border-radius: 5px; border: 1px dashed var(--bord-fort); color: var(--t2); }
.ajouter-slide span { font: 500 9px Archivo, sans-serif; }
.ajouter-slide:hover { border-color: var(--accent); color: var(--accent); }
.pellicule-compteur { flex: none; font-size: 11px; color: var(--t3); }

/* ---------------- détourage ---------------- */

.detourage-corps { flex: 1; display: flex; min-height: 0; }
.detourage-outils { width: 268px; flex: none; display: flex; flex-direction: column; gap: 18px; padding: 16px; background: var(--panneau); border-right: 1px solid var(--bord); overflow-y: auto; }
.detourage-outils .bloc { gap: 9px; }
.detourage-outils .segment button { flex-direction: row; height: 32px; }
.reglage { display: flex; flex-direction: column; gap: 7px; }
.reglage .ligne { display: flex; justify-content: space-between; font-size: 12px; color: #c8cdd6; }
.reglage .ligne b { color: var(--t3); font-weight: 500; }
.detourage-plan { flex: 1; display: flex; align-items: center; justify-content: center; background: #0f1115; min-width: 0; overflow: hidden; }
#det-toile {
  border-radius: 6px; cursor: crosshair; display: block;
  background-image: linear-gradient(45deg, #23272e 25%, transparent 25%), linear-gradient(-45deg, #23272e 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #23272e 75%), linear-gradient(-45deg, transparent 75%, #23272e 75%);
  background-size: 22px 22px; background-position: 0 0, 0 11px, 11px -11px, -11px 0;
  background-color: #171a1f;
}
.progres { display: flex; align-items: center; gap: 9px; padding: 11px; background: var(--accent-sombre); border-radius: 9px; font-size: 11px; color: var(--accent); }
.progres i { width: 14px; height: 14px; border: 2px solid rgba(47,212,198,.3); border-top-color: var(--accent); border-radius: 50%; animation: tourne .7s linear infinite; flex: none; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* ---------------- fenêtres ---------------- */

.voile { position: fixed; inset: 0; background: rgba(9,10,13,.74); z-index: 40; }
.fenetre {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 41;
  display: flex; flex-direction: column; gap: 14px; padding: 20px;
  background: var(--panneau); border: 1px solid var(--bord-fort); border-radius: 16px;
  box-shadow: 0 32px 80px rgba(0,0,0,.7); max-height: 88vh; overflow-y: auto;
}
.fenetre-tete { display: flex; align-items: flex-start; gap: 12px; }
.fenetre-tete > div { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.fenetre-tete b { font-size: 17px; font-weight: 700; }
.fenetre-tete span { font-size: 12px; color: var(--t3); }
.croix { margin-left: auto; width: 30px; height: 30px; border-radius: 8px; color: var(--t2); font-size: 20px; line-height: 1; }
.croix:hover { background: var(--eleve); color: var(--t1); }
.fenetre-pied { display: flex; align-items: center; gap: 10px; }
.fenetre input[type=text], .fenetre input:not([type]) { height: 40px; padding: 0 13px; background: var(--eleve); border: 1px solid var(--bord); border-radius: 9px; font-size: 13px; }
.fenetre input:focus { border-color: var(--accent); }
.champ { display: flex; flex-direction: column; gap: 8px; }
.note-fenetre { font-size: 11px; line-height: 1.5; color: var(--t3); border-left: 3px solid var(--accent); padding-left: 10px; }
.trait-h { height: 1px; background: #23272e; }

.liste-comptes { display: flex; flex-direction: column; gap: 2px; }
.compte-ligne { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; cursor: pointer; }
.compte-ligne:hover { background: var(--eleve); }
.compte-ligne.actif { background: var(--accent-sombre); }
.compte-ligne .pastille { width: 32px; height: 32px; font-size: 13px; }
.compte-ligne .txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.compte-ligne .txt b { font-size: 13px; }
.compte-ligne .txt span { font-size: 11px; color: var(--t3); }
.compte-ligne.actif .txt span { color: #7ecfc7; }
.ajout-compte { display: flex; gap: 8px; }
.ajout-compte input { flex: 1; }

.export-apercus { display: flex; gap: 8px; flex-wrap: wrap; }
.export-apercus canvas { width: 54px; height: 96px; border-radius: 6px; display: block; }
.export-apercus .plus { display: flex; align-items: center; justify-content: center; width: 54px; height: 96px; border-radius: 6px; background: var(--eleve); border: 1px dashed var(--bord-fort); color: var(--t3); font-size: 12px; }

.apercu-zone { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
#apercu-toile { border-radius: 8px; display: block; }
.apercu-nav { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--t2); }
.apercu-nav button { width: 34px; height: 34px; border-radius: 8px; background: var(--eleve); font-size: 20px; color: var(--t1); }
.apercu-nav button:hover { background: var(--bord-fort); }

.bulle {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 9px; max-width: 560px;
  padding: 12px 18px; background: var(--eleve); border: 1px solid var(--bord-fort);
  border-radius: 11px; box-shadow: 0 18px 40px rgba(0,0,0,.6); font-size: 13px;
}
.bulle.erreur { border-color: var(--rouge); color: #ffc9c7; }
.bulle.succes { border-color: var(--accent); }

/* ---------------- formes et emojis ---------------- */

.grille-formes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.grille-formes.large { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.forme { height: 40px; border-radius: 8px; background: var(--eleve); border: 1px solid var(--bord); display: flex; align-items: center; justify-content: center; padding: 0; }
.forme:hover { border-color: var(--t2); }
.forme.actif { background: var(--accent-sombre); border-color: var(--accent); }
.forme canvas { width: 100%; height: 100%; display: block; }
.grille-formes.large .forme { height: 54px; }

.style-texte.perso { border-style: dashed; }

.apercu-emoji { display: flex; align-items: center; justify-content: center; height: 92px; border-radius: 11px; background: var(--eleve); border: 1px solid var(--bord); }
.apercu-emoji span { font-size: 58px; line-height: 1; font-family: 'Noto Color Emoji', Archivo, sans-serif; }
.apercu-emoji img { width: 62px; height: 62px; display: block; }

.emojis-categories { display: flex; gap: 4px; flex-wrap: wrap; }
.emojis-categories button { height: 28px; padding: 0 11px; border-radius: 7px; background: var(--eleve); color: var(--t2); font: 500 12px Archivo, sans-serif; }
.emojis-categories button.actif { background: var(--accent-sombre); color: var(--accent); font-weight: 600; }
.emojis-grille { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; max-height: 340px; overflow-y: auto; padding-right: 4px; }
.emojis-grille button { aspect-ratio: 1; border-radius: 8px; font-size: 26px; line-height: 1; font-family: 'Noto Color Emoji', Archivo, sans-serif; display: flex; align-items: center; justify-content: center; }
.emojis-grille button:hover { background: var(--eleve); }
.emojis-grille img { width: 28px; height: 28px; display: block; }
.emojis-vide { grid-column: 1 / -1; padding: 20px 4px; text-align: center; color: var(--t3); font-size: 12px; }

/* ---------------- poignées de largeur ---------------- */

.poignee {
  width: 6px; flex: none; cursor: col-resize; position: relative;
  background: transparent; z-index: 3;
}
.poignee::after {
  content: ""; position: absolute; inset: 0 2px; border-radius: 2px;
  background: transparent; transition: background .12s;
}
.poignee:hover::after, .poignee.tire::after { background: var(--accent); }
body.redimensionne { cursor: col-resize; user-select: none; }
body.redimensionne * { cursor: col-resize !important; }

/* ---------------- classement après import ---------------- */

.classer-corps { flex: 1; display: flex; min-height: 0; }
.classer-image { flex: 1; display: flex; align-items: center; justify-content: center; padding: 28px; background: #0f1115; min-width: 0; }
.classer-image img {
  max-width: 100%; max-height: 100%; border-radius: 10px; display: block;
  background-image: linear-gradient(45deg, #23272e 25%, transparent 25%), linear-gradient(-45deg, #23272e 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #23272e 75%), linear-gradient(-45deg, transparent 75%, #23272e 75%);
  background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}
.classer-cases { width: 320px; flex: none; display: flex; flex-direction: column; gap: 10px; padding: 18px; background: var(--panneau); border-left: 1px solid var(--bord); overflow-y: auto; }
.classer-liste { display: flex; flex-direction: column; gap: 6px; }
.classer-case { display: flex; align-items: center; gap: 11px; height: 46px; padding: 0 12px; border-radius: 10px; background: var(--eleve); border: 1px solid var(--bord); color: var(--t1); font: 600 13px Archivo, sans-serif; width: 100%; }
.classer-case:hover { border-color: var(--accent); }
.classer-case .puce { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.classer-case .nom { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.classer-case .touche { width: 20px; height: 20px; border-radius: 5px; background: var(--bord-fort); color: var(--t2); font: 600 11px Archivo, sans-serif; display: flex; align-items: center; justify-content: center; }
.classer-reste { display: flex; flex-wrap: wrap; gap: 5px; }
.classer-reste img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; opacity: .5; }
.bouton-large.secondaire.actif { background: var(--accent-sombre); border-color: var(--accent); color: var(--accent); }

/* ---------------- menu du clic droit ---------------- */

.menu-contextuel {
  position: fixed; z-index: 50; min-width: 190px;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--eleve); border: 1px solid var(--bord-fort); border-radius: 11px;
  box-shadow: 0 18px 44px rgba(0,0,0,.6);
}
.menu-contextuel button {
  display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px;
  border-radius: 7px; color: #c8cdd6; font: 500 13px Archivo, sans-serif; text-align: left;
}
.menu-contextuel button:hover { background: var(--bord-fort); color: var(--t1); }
.menu-contextuel button.danger:hover { color: var(--rouge); }
.menu-contextuel .trait-h { margin: 4px 2px; }
.menu-contextuel .vide { padding: 8px 10px; font-size: 12px; color: var(--t3); }

/* ---------------- blocs enregistrés ---------------- */

.doc.bloc-garde { border: 1px solid #4a5260; background: #171a1f; }
.doc.bloc-garde:hover { border-color: var(--accent); }
.doc.bloc-garde img { object-fit: contain; }
.marque-bloc {
  position: absolute; top: 3px; left: 3px; min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 5px; background: rgba(15,17,21,.8); color: var(--accent);
  font: 600 9px Archivo, sans-serif; display: flex; align-items: center; justify-content: center;
}
.bloc-apercu { width: 100%; height: 150px; border-radius: 10px; background: #0f1115; display: block; }
.bloc-cases { display: flex; flex-wrap: wrap; gap: 6px; }
.bloc-cases button {
  display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px;
  border-radius: 8px; background: var(--eleve); border: 1px solid var(--bord);
  color: #c8cdd6; font: 500 12px Archivo, sans-serif;
}
.bloc-cases button .puce { width: 7px; height: 7px; border-radius: 2px; }
.bloc-cases button.actif { background: var(--accent-sombre); border-color: var(--accent); color: var(--accent); }

/* ---------------- la bibliothèque en grand ---------------- */

.biblio-grand-corps { flex: 1; display: flex; min-height: 0; }
.biblio-grand-cases { width: 244px; flex: none; display: flex; flex-direction: column; gap: 3px; padding: 16px 12px; background: var(--panneau); border-right: 1px solid var(--bord); overflow-y: auto; }
.biblio-grand-cases .entree { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 11px; border-radius: 9px; color: var(--t2); font: 500 13px Archivo, sans-serif; cursor: pointer; }
.biblio-grand-cases .entree:hover { background: var(--eleve); }
.biblio-grand-cases .entree.actif { background: var(--accent-sombre); color: var(--accent); font-weight: 600; }
.biblio-grand-cases .entree .puce { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.biblio-grand-cases .entree .nom { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.biblio-grand-cases .entree .nb { font-size: 12px; color: var(--t3); }
.biblio-grand-cases .entree .sup { opacity: 0; display: flex; color: var(--t3); }
.biblio-grand-cases .entree:hover .sup { opacity: 1; }
.biblio-grand-cases .entree .sup:hover { color: var(--rouge); }

.biblio-grand-grille { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; align-content: start; padding: 20px 24px 90px; overflow-y: auto; background: #0f1115; }
.carte-doc { position: relative; display: flex; flex-direction: column; gap: 7px; cursor: pointer; }
.carte-doc .cadre { position: relative; aspect-ratio: 3 / 4; border-radius: 11px; background: #171a1f; border: 2px solid transparent; overflow: hidden; }
.carte-doc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carte-doc.bloc img { object-fit: contain; }
.carte-doc:hover .cadre { border-color: var(--bord-fort); }
.carte-doc.pris .cadre { border-color: var(--accent); }
.carte-doc .coche { position: absolute; top: 7px; left: 7px; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid rgba(255,255,255,.55); background: rgba(15,17,21,.55); display: flex; align-items: center; justify-content: center; }
.carte-doc.pris .coche { background: var(--accent); border-color: var(--accent); color: var(--accent-texte); }
.carte-doc .coche svg { opacity: 0; }
.carte-doc.pris .coche svg { opacity: 1; }
.carte-doc .nom { font-size: 12px; color: #c8cdd6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte-doc .nom input { width: 100%; font-size: 12px; }
.carte-doc .outils { position: absolute; top: 7px; right: 7px; display: none; gap: 4px; }
.carte-doc:hover .outils { display: flex; }
.carte-doc .outils button { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 7px; background: rgba(15,17,21,.8); color: #c8cdd6; }
.carte-doc .outils button:hover { background: var(--eleve); color: var(--t1); }
.carte-doc .marque-bloc { top: auto; bottom: 7px; left: 7px; }
.biblio-vide { grid-column: 1 / -1; padding: 60px 0; text-align: center; color: var(--t3); font-size: 13px; }

.barre-selection {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 20;
  display: flex; align-items: center; gap: 10px; min-width: 520px;
  padding: 12px 16px; background: var(--eleve); border: 1px solid var(--bord-fort);
  border-radius: 13px; box-shadow: 0 18px 44px rgba(0,0,0,.6);
}
.barre-selection b { font-size: 13px; }
.bouton-fin.danger:hover { border-color: var(--rouge); color: var(--rouge); }

/* ---------------- la case où atterrissent les imports ---------------- */

.depot-bloc { flex: none; display: flex; flex-direction: column; gap: 6px; margin: 0 12px 12px; }
.depot-case {
  display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px;
  background: var(--eleve); border: 1px solid var(--bord); border-radius: 8px;
  font: 500 11px Archivo, sans-serif; color: var(--t3);
}
.depot-case b { flex: 1; text-align: left; font-size: 12px; color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.depot-case:hover { border-color: var(--accent); }
.depot-bloc .depot { margin: 0; height: 82px; }

/* ---------------- connexion ---------------- */

#ecran-connexion { align-items: center; justify-content: center; background: var(--app); }
.connexion-cadre { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 340px; padding: 34px 30px; background: var(--panneau); border: 1px solid var(--bord); border-radius: 18px; }
.logo.grand { width: 46px; height: 46px; border-radius: 13px; font-size: 22px; }
.connexion-cadre h1 { margin: 0; font: 700 21px Archivo, sans-serif; }
.connexion-cadre p { margin: 0 0 6px; font-size: 13px; color: var(--t3); text-align: center; line-height: 1.5; }
.connexion-cadre form { display: flex; flex-direction: column; gap: 9px; width: 100%; }
.connexion-cadre input { height: 42px; padding: 0 13px; background: var(--eleve); border: 1px solid var(--bord); border-radius: 10px; font-size: 14px; }
.connexion-cadre input:focus { border-color: var(--accent); }
.connexion-cadre .bouton-plein { height: 42px; justify-content: center; margin-top: 4px; }
.connexion-erreur { font-size: 12px; color: var(--rouge); text-align: center; }
#btn-sortir { padding: 0 10px; }

.carte-doc .outils button.envoyer:hover { color: var(--accent); }