/* SankiPDF : feuille de style */
:root {
  --encre: #0f1b2d;
  --encre-2: #3b4658;
  --gris: #6b7585;
  --gris-2: #9aa3b1;
  --trait: #e6e8ec;
  --trait-2: #f0f1f4;
  --fond: #f5f6f8;
  --blanc: #fff;
  --marque: #e4572e;
  --marque-fonce: #c7401b;
  --marque-pale: #fdeee9;
  --vert: #15803d;
  --rouge: #b91c1c;
  --rayon: 14px;
  --ombre: 0 1px 2px rgba(15, 27, 45, .05), 0 4px 16px rgba(15, 27, 45, .06);
  --lat: 264px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--encre); background: var(--fond); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; font-weight: 800; }
h2 { font-size: 1.25rem; font-weight: 700; }
h3 { font-size: 1rem; font-weight: 700; }
.ic { flex: none; display: block; }
[hidden] { display: none !important; }
.discret { color: var(--gris); font-size: .9em; }
.petit { font-size: .8rem; }

/* ---------- Structure ---------- */
.app { display: flex; min-height: 100vh; }
.lateral { position: fixed; inset: 12px auto 12px 12px; width: var(--lat); background: var(--blanc); border: 1px solid var(--trait); border-radius: 18px; display: flex; flex-direction: column; padding: 18px 14px 14px; z-index: 40; overflow-y: auto; }
.principal { flex: 1; margin-left: calc(var(--lat) + 24px); min-width: 0; padding: 12px 20px 40px 0; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; padding: 0 6px 16px; }
.logo b { color: var(--marque); font-weight: 800; }
#nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.nav-titre { font-size: .78rem; color: var(--gris); margin: 16px 8px 6px; font-weight: 600; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 11px; text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left; width: 100%; font-weight: 500; color: var(--encre-2); }
.nav-item:hover, .nav-item.ouvert { background: var(--trait-2); color: var(--encre); }
.nav-item.actif { background: var(--marque-pale); color: var(--marque-fonce); font-weight: 600; }
.nav-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--trait-2); display: grid; place-items: center; flex: none; }
.nav-item.actif .nav-ic { background: #fbd9ce; }
.nav-chevron { margin-left: auto; color: var(--gris-2); }
#nav-bas { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.carte-pro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 16px 12px; border-radius: 14px; background: var(--encre); color: #fff; text-decoration: none; }
.carte-pro span:last-child { font-size: .8rem; opacity: .75; }
.carte-pro-ic { color: #ffb59c; }
.carte-compte { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; border: 1px solid var(--trait); text-decoration: none; }
.carte-compte:hover { background: var(--trait-2); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--marque-pale); color: var(--marque-fonce); display: grid; place-items: center; font-weight: 700; flex: none; }
.carte-compte-txt { display: flex; flex-direction: column; min-width: 0; }
.carte-compte-txt b, .carte-compte-txt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte-compte-txt small { color: var(--gris); font-size: .78rem; }

/* Volet des catégories */
.volet { position: fixed; top: 12px; bottom: 12px; left: calc(var(--lat) + 12px); width: 320px; background: var(--blanc); border: 1px solid var(--trait); border-left: 0; border-radius: 0 18px 18px 0; z-index: 39; padding: 22px 18px; overflow-y: auto; box-shadow: 12px 0 30px rgba(15, 27, 45, .08); animation: glisse .16s ease-out; }
@keyframes glisse { from { opacity: 0; transform: translateX(-8px); } }
.volet-tete { display: flex; align-items: center; gap: 10px; }
.volet-tete h2 { margin: 0; font-size: 1.3rem; }
.volet-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--marque-pale); color: var(--marque); display: grid; place-items: center; }
.volet-fermer { margin-left: auto; }
.volet-desc { color: var(--encre-2); margin: 10px 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--trait); }
.volet-liste { display: flex; flex-direction: column; gap: 2px; }
.volet-outil { display: flex; gap: 12px; padding: 10px; border-radius: 11px; text-decoration: none; align-items: flex-start; }
.volet-outil:hover { background: var(--trait-2); }
.volet-outil-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--trait-2); display: grid; place-items: center; flex: none; color: var(--encre-2); }
.volet-outil b { display: block; font-weight: 600; }
.volet-outil small { color: var(--gris); font-size: .84rem; }
#voile { display: none; }

/* En-tête */
.entete { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.icone-btn.burger, .logo-mobile { display: none; }
.logo-mobile { font-weight: 800; font-size: 1.2rem; text-decoration: none; letter-spacing: -.02em; }
.logo-mobile b { color: var(--marque); }
.recherche { position: relative; flex: 1; max-width: 420px; display: flex; align-items: center; background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; padding: 0 12px; }
.recherche > span { color: var(--gris-2); }
.recherche input { border: 0; outline: 0; background: none; padding: 11px 10px; width: 100%; }
.recherche-res { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; box-shadow: var(--ombre); padding: 6px; z-index: 50; }
.rech-item { display: flex; gap: 10px; padding: 8px; border-radius: 9px; text-decoration: none; align-items: center; }
.rech-item:hover { background: var(--trait-2); }
.rech-item b { display: block; font-weight: 600; font-size: .92rem; }
.rech-item small { color: var(--gris); font-size: .8rem; }
.rech-vide { padding: 10px; color: var(--gris); }
.entete-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.btn-entete { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--blanc); border: 1px solid var(--trait); text-decoration: none; font-weight: 500; }
.btn-entete:hover { background: var(--trait-2); }
.btn-pro { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; background: var(--encre); color: #fff; text-decoration: none; font-weight: 700; }
.btn-pro:hover { background: #1c2c45; }

/* ---------- Composants ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 11px; border: 1px solid transparent; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .12s; }
.btn.primaire { background: var(--marque); color: #fff; }
.btn.primaire:hover { background: var(--marque-fonce); }
.btn.secondaire { background: var(--blanc); border-color: var(--trait); }
.btn.secondaire:hover { background: var(--trait-2); }
.btn.lien { background: none; color: var(--encre-2); text-decoration: underline; text-underline-offset: 3px; padding: 8px 6px; }
.btn.danger, .danger { color: var(--rouge) !important; }
.btn.grand { padding: 13px 22px; font-size: 1.02rem; }
.btn.large { width: 100%; }
.btn.desactive { opacity: .7; cursor: default; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.icone-btn { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 9px; background: none; border: 0; cursor: pointer; color: var(--encre-2); }
.icone-btn:hover { background: var(--trait-2); }
.icone-btn:disabled { opacity: .35; }
.pastille { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; flex: none; }
.pastille.grande { width: 46px; height: 46px; border-radius: 14px; }
.saisie { width: 100%; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 10px; background: var(--blanc); outline: none; }
.saisie:focus { border-color: var(--marque); box-shadow: 0 0 0 3px var(--marque-pale); }
.saisie.court { width: 86px; }
.saisie.grande { font-size: 1.1rem; padding: 12px 14px; }
textarea.saisie { resize: vertical; }
.champ { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.champ-lib { font-size: .84rem; font-weight: 600; color: var(--encre-2); }
.champ small { color: var(--gris); font-size: .8rem; }
.ligne { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.ligne > .saisie { flex: 1; min-width: 120px; }
.ligne.centre { justify-content: center; align-items: center; }
.ligne.entre { justify-content: space-between; align-items: center; }
.pile { display: flex; flex-direction: column; gap: 12px; }
.case-lib { display: flex; gap: 8px; align-items: center; font-size: .9rem; cursor: pointer; }
.case-lib input { width: 17px; height: 17px; accent-color: var(--marque); }
.alerte { background: #fff4ed; border: 1px solid #fed7c3; color: #7c2d12; padding: 12px 14px; border-radius: 12px; font-size: .9rem; }
.alerte.douce { background: #f3f6fb; border-color: #dfe6f1; color: var(--encre-2); }
.carte { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 18px; margin-bottom: 14px; }
.carte-vide { background: var(--blanc); border: 1px dashed var(--trait); border-radius: var(--rayon); padding: 34px 20px; text-align: center; }
.vide { color: var(--gris); text-align: center; padding: 18px; }
.choix { display: flex; flex-direction: column; gap: 6px; }
.choix-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 11px; cursor: pointer; }
.choix-opt:has(input:checked) { border-color: var(--marque); background: var(--marque-pale); }
.choix-opt input { margin-top: 3px; accent-color: var(--marque); }
.choix-opt b { display: block; font-weight: 600; font-size: .92rem; }
.choix-opt small { color: var(--gris); font-size: .8rem; }
.statut { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: .78rem; font-weight: 600; background: var(--trait-2); }
.s-en_attente { background: #fef3c7; color: #92400e; }
.s-signe { background: #dcfce7; color: #166534; }
.s-refuse, .s-annule { background: #fee2e2; color: #991b1b; }

/* Toasts, sablier, modales */
#toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(92vw, 520px); }
.toast { background: var(--encre); color: #fff; padding: 11px 16px; border-radius: 12px; box-shadow: var(--ombre); font-size: .92rem; transition: opacity .4s, transform .4s; text-align: center; }
.toast.erreur { background: #9f1d1d; }
.toast.ok { background: #14532d; }
.toast.sort { opacity: 0; transform: translateY(6px); }
#occupe { position: fixed; inset: 0; background: rgba(245, 246, 248, .78); backdrop-filter: blur(3px); z-index: 150; display: grid; place-items: center; }
.occupe-boite { background: var(--blanc); border: 1px solid var(--trait); border-radius: 18px; padding: 26px 30px; box-shadow: var(--ombre); text-align: center; width: min(90vw, 360px); }
.roue { width: 38px; height: 38px; border-radius: 50%; border: 4px solid var(--marque-pale); border-top-color: var(--marque); margin: 0 auto 12px; animation: tourne .8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.occupe-msg { margin: 0 0 10px; font-weight: 600; }
.barre-prog { height: 6px; background: var(--trait-2); border-radius: 9px; overflow: hidden; }
.barre-prog span { display: block; height: 100%; background: var(--marque); width: 0; transition: width .2s; }
.modale-fond { position: fixed; inset: 0; background: rgba(15, 27, 45, .45); z-index: 120; display: grid; place-items: center; padding: 16px; }
.modale { background: var(--blanc); border-radius: 18px; padding: 20px; width: min(100%, 640px); max-height: 92vh; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.modale.petite { width: min(100%, 420px); }
.modale-tete { display: flex; align-items: center; justify-content: space-between; }
.modale-tete h3 { margin: 0; font-size: 1.15rem; }
.modale-pied { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.menu-flottant { position: absolute; z-index: 90; background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; box-shadow: var(--ombre); padding: 6px; width: 220px; display: flex; flex-direction: column; }
.menu-flottant button { text-align: left; background: none; border: 0; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.menu-flottant button:hover { background: var(--trait-2); }
.onglets { display: flex; gap: 4px; background: var(--trait-2); padding: 4px; border-radius: 11px; }
.onglets button { border: 0; background: none; padding: 7px 14px; border-radius: 8px; cursor: pointer; font-weight: 600; color: var(--gris); }
.onglets button.actif { background: var(--blanc); color: var(--encre); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }

/* ---------- Accueil ---------- */
.rapides { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.rapide { display: flex; align-items: center; gap: 12px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; padding: 14px 16px; text-decoration: none; font-weight: 600; transition: transform .12s, box-shadow .12s; }
.rapide:hover { transform: translateY(-1px); box-shadow: var(--ombre); }
.panneau-fichiers { background: var(--blanc); border: 1px solid var(--trait); border-radius: 18px; padding: 18px; }
.fichiers-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.onglets-fichiers { display: flex; gap: 2px; background: var(--trait-2); padding: 4px; border-radius: 12px; overflow-x: auto; max-width: 100%; }
.onglet { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 9px; text-decoration: none; color: var(--gris); font-weight: 600; white-space: nowrap; font-size: .92rem; }
.onglet.actif { background: var(--blanc); color: var(--encre); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.table-fichiers { margin-bottom: 14px; }
.tf-tete, .tf-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 110px 210px 40px; gap: 12px; align-items: center; padding: 10px 8px; }
.tf-tete { color: var(--gris); font-size: .84rem; font-weight: 600; border-bottom: 1px solid var(--trait); }
.tf-ligne { border-bottom: 1px solid var(--trait-2); text-decoration: none; }
.tf-ligne:hover { background: #fafbfc; }
.tf-nom { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tf-titre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.tf-ic { color: var(--marque); }
.tf-taille, .tf-date { color: var(--encre-2); font-size: .9rem; }
.etoile { background: none; border: 0; cursor: pointer; color: var(--gris-2); padding: 2px; display: grid; }
.etoile.active { color: #eab308; }
.etoile.active svg { fill: #eab308; }
.depot { border: 2px dashed #d5d9e0; border-radius: 16px; padding: 44px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; cursor: pointer; background: #fcfcfd; transition: border-color .12s, background .12s; outline: none; }
.depot:hover, .depot:focus-visible, .depot.survol { border-color: var(--marque); background: var(--marque-pale); }
.depot b { font-size: 1.12rem; font-weight: 600; }
.depot small { color: var(--gris); }
.depot-ic { width: 56px; height: 56px; border-radius: 14px; border: 1px solid var(--trait); background: var(--blanc); display: grid; place-items: center; margin-bottom: 6px; }
.tous-outils { margin-top: 28px; }
.cat-bloc { margin-bottom: 22px; }
.cat-bloc h3 { display: flex; gap: 8px; align-items: center; color: var(--encre-2); }
.grille-outils { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.carte-outil { display: flex; flex-direction: column; gap: 6px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; padding: 16px; text-decoration: none; transition: transform .12s, box-shadow .12s; }
.carte-outil:hover { transform: translateY(-2px); box-shadow: var(--ombre); }
.carte-outil b { font-weight: 700; }
.carte-outil small { color: var(--gris); font-size: .84rem; }
.mention { display: flex; gap: 6px; align-items: center; justify-content: center; color: var(--gris); font-size: .84rem; margin-top: 10px; text-align: center; }
.grille-choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.choix-outil { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--trait); border-radius: 11px; background: var(--blanc); cursor: pointer; text-align: left; font-weight: 500; }
.choix-outil:hover { border-color: var(--marque); background: var(--marque-pale); }

/* ---------- Page outil ---------- */
.page-outil { background: var(--blanc); border: 1px solid var(--trait); border-radius: 18px; padding: 22px; }
.outil-tete { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.outil-tete h1 { margin: 0; font-size: 1.45rem; }
.outil-tete p { margin: 2px 0 0; color: var(--gris); }
.recents { margin-top: 18px; }
.recents h3 { font-size: .9rem; color: var(--encre-2); }
.recent { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 11px; background: var(--blanc); cursor: pointer; margin-bottom: 6px; text-align: left; }
.recent:hover { background: var(--trait-2); }
.recent-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outil-grille { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.outil-principal { min-width: 0; }
.outil-panneau { position: sticky; top: 12px; background: #fafbfc; border: 1px solid var(--trait); border-radius: 16px; padding: 16px; max-height: calc(100vh - 24px); overflow-y: auto; }
.panneau-corps { display: flex; flex-direction: column; gap: 12px; }
.panneau-corps h3 { margin: 6px 0 0; }
.panneau-action { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--trait); }
.panneau-action .btn.primaire { padding: 13px; font-size: 1.02rem; }
.apercu { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px; background: var(--trait-2); border-radius: 16px; }
.apercu-img canvas { max-width: 100%; height: auto; box-shadow: 0 2px 14px rgba(15, 27, 45, .15); border-radius: 4px; background: #fff; }
.apercu-info { display: flex; flex-direction: column; align-items: center; text-align: center; word-break: break-word; }
.liste-fichiers { display: flex; flex-direction: column; gap: 6px; }
.fichier-ligne { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 12px; background: var(--blanc); }
.fichier-ligne.survol { border-color: var(--marque); }
.fichier-ligne[draggable] { cursor: grab; }
.fichier-rang { width: 26px; height: 26px; border-radius: 50%; background: var(--marque-pale); color: var(--marque-fonce); display: grid; place-items: center; font-weight: 700; font-size: .82rem; flex: none; }
.fichier-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.fichier-actions { display: flex; }
.minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; padding: 4px; }
.mini { background: var(--trait-2); border: 2px solid transparent; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; user-select: none; }
.mini-img { width: 100%; aspect-ratio: 3 / 4; display: grid; place-items: center; transition: transform .2s; }
.mini-img canvas, .mini-img img { max-width: 100%; max-height: 100%; box-shadow: 0 1px 6px rgba(15, 27, 45, .18); background: #fff; }
.mini-num { font-size: .8rem; font-weight: 600; color: var(--encre-2); }
.mini-outils { display: flex; gap: 2px; background: var(--blanc); border-radius: 9px; }
.selectionnables .mini { cursor: pointer; }
.mini.choisie { border-color: var(--marque); background: var(--marque-pale); }
.mini.a-supprimer { border-color: var(--rouge); background: #fee2e2; }
.mini.a-supprimer .mini-img { opacity: .35; }
.mini.a-supprimer::after { content: '×'; position: absolute; top: 6px; right: 10px; color: var(--rouge); font-weight: 800; font-size: 1.3rem; }
.deplacables .mini { cursor: grab; }
.mini.glisse { opacity: .4; }
.tampons { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tampon-choix { border: 2px solid; border-radius: 8px; background: var(--blanc); padding: 7px 4px; font-weight: 800; letter-spacing: .04em; cursor: pointer; font-size: .8rem; }
.tampon-choix.actif { box-shadow: 0 0 0 3px var(--marque-pale); background: #fffaf7; }
.texte-sortie { width: 100%; min-height: 340px; border: 1px solid var(--trait); border-radius: 12px; padding: 14px; font-family: ui-monospace, Consolas, monospace; font-size: .88rem; resize: vertical; background: var(--blanc); }
.carte-resultat { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 20px 10px; max-width: 560px; margin: 0 auto; }
.carte-resultat .saisie { max-width: 420px; }
.resultat-ok { width: 58px; height: 58px; border-radius: 50%; background: #dcfce7; color: var(--vert); display: grid; place-items: center; }
.resultat-apercu { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.resultat-apercu canvas, .resultat-apercu img { max-width: 260px; max-height: 340px; box-shadow: 0 2px 14px rgba(15, 27, 45, .15); border-radius: 4px; }
.resultat-nom { margin: 0; word-break: break-word; }
.gain { color: var(--vert); font-weight: 600; }
.fichier-zip { color: var(--marque); }
.texte-ocr { width: 100%; text-align: left; }
.texte-ocr summary { cursor: pointer; font-weight: 600; }
.message-demande { margin: 0 0 16px; padding: 12px 16px; border-left: 4px solid var(--marque); background: var(--trait-2); border-radius: 0 10px 10px 0; }

/* Signature */
.sig-corps { display: flex; flex-direction: column; gap: 10px; }
.sig-canvas { width: 100%; aspect-ratio: 3 / 1; border: 1px dashed #c9ced6; border-radius: 12px; background: #fff; touch-action: none; cursor: crosshair; }
.sig-bas { display: flex; justify-content: space-between; align-items: center; }
.sig-polices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sig-police { border: 1px solid var(--trait); background: #fff; border-radius: 12px; padding: 14px 8px; font-size: 1.9rem; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sig-police.actif { border-color: var(--marque); box-shadow: 0 0 0 3px var(--marque-pale); }
.sig-import { min-height: 90px; border: 1px dashed var(--trait); border-radius: 12px; display: grid; place-items: center; color: var(--gris); padding: 8px; }
.sig-import img { max-width: 100%; max-height: 140px; }
.sigs { display: flex; flex-direction: column; gap: 6px; }
.sig-item { display: flex; align-items: center; gap: 6px; }
.sig-img { flex: 1; background: #fff; border: 1px solid var(--trait); border-radius: 10px; padding: 6px; cursor: pointer; height: 64px; display: grid; place-items: center; }
.sig-img:hover { border-color: var(--marque); }
.sig-img img { max-height: 52px; max-width: 100%; }

/* ---------- Éditeur ---------- */
.ed { display: flex; flex-direction: column; border: 1px solid var(--trait); border-radius: 16px; overflow: hidden; background: #e9ebef; }
.ed-barre { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px; background: var(--blanc); border-bottom: 1px solid var(--trait); position: sticky; top: 0; z-index: 5; }
.ed-modes { display: flex; gap: 2px; flex-wrap: wrap; background: var(--trait-2); border-radius: 10px; padding: 3px; }
.ed-mode { display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: .84rem; font-weight: 600; color: var(--encre-2); }
.ed-mode:hover { background: #e4e6ea; }
.ed-mode.actif { background: var(--blanc); color: var(--marque-fonce); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.ed-props { display: flex; gap: 6px; align-items: center; }
.ed-champ { padding: 6px 8px; border: 1px solid var(--trait); border-radius: 8px; background: #fff; }
.ed-champ.court { width: 64px; }
.ed-bouton { border: 1px solid var(--trait); background: #fff; border-radius: 8px; min-width: 32px; height: 32px; display: inline-grid; place-items: center; cursor: pointer; }
.ed-bouton.actif { background: var(--encre); color: #fff; }
.ed-couleur { width: 34px; height: 32px; padding: 2px; border: 1px solid var(--trait); border-radius: 8px; background: #fff; cursor: pointer; }
.ed-droite { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.ed-zoom { font-size: .82rem; font-weight: 600; min-width: 44px; text-align: center; color: var(--encre-2); }
.ed-aide { flex-basis: 100%; font-size: .82rem; color: var(--gris); padding: 0 4px; }
.ed-pages { height: calc(100vh - 250px); min-height: 460px; overflow: auto; padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ed-page-bloc { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 14px; }
.ed-page { position: relative; background: #fff; box-shadow: 0 2px 12px rgba(15, 27, 45, .15); flex: none; overflow: hidden; }
.ed-page canvas { position: absolute; inset: 0; }
.ed-calque, .ed-calque-texte { position: absolute; inset: 0; }
.ed-calque-texte { z-index: 2; }
.ed-calque { z-index: 3; }
.ed[data-mode="texte-existant"] .ed-calque { pointer-events: none; }
.ed[data-mode="texte-existant"] .ed-calque .obj { pointer-events: auto; }
.ed:not([data-mode="selection"]):not([data-mode="texte-existant"]) .ed-calque { cursor: crosshair; }
.ed[data-mode="texte"] .ed-calque, .ed[data-mode="note"] .ed-calque { cursor: text; }
.ed-num { font-size: .78rem; color: var(--gris); }
.ed-bloc-texte { position: absolute; border: 1px dashed rgba(37, 99, 235, .55); background: rgba(37, 99, 235, .06); cursor: text; border-radius: 2px; }
.ed-bloc-texte:hover { background: rgba(37, 99, 235, .16); border-style: solid; }
.ed-vide-texte { position: absolute; top: 12px; left: 12px; right: 12px; background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12; font-size: 13px; padding: 10px; border-radius: 8px; }
.ed-cadre-temp { position: absolute; border: 1.5px dashed var(--marque); background: rgba(228, 87, 46, .08); pointer-events: none; }
.ed-trace { position: absolute; inset: 0; pointer-events: none; }
.obj { position: absolute; cursor: move; touch-action: none; }
.obj.choisi { outline: 1.5px solid var(--marque); outline-offset: 2px; }
.obj-suppr { display: none; position: absolute; top: -12px; right: -12px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--encre); color: #fff; place-items: center; cursor: pointer; z-index: 2; padding: 0; }
.obj-poignee { display: none; position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; background: #fff; border: 2px solid var(--marque); border-radius: 3px; cursor: nwse-resize; z-index: 2; }
.obj.choisi .obj-suppr { display: grid; }
.obj.choisi .obj-poignee { display: block; }
.o-edit { outline: none; white-space: pre; min-width: 8px; cursor: text; padding: 0; }
.o-texte .o-edit:empty::before { content: 'Tapez votre texte'; color: #9aa3b1; }
.o-remplacer { background: #fff; }
.o-remplacer .o-edit { white-space: pre; }
.o-blanc { background: #fff; box-shadow: inset 0 0 0 1px #e1e4e9; }
.o-surligner { background: rgba(250, 204, 21, .42); mix-blend-mode: multiply; }
.o-caviarder { background: #000; }
.o-note { background: #fff7a8; border: 1px solid #d8b61a; padding: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.o-edit.note { white-space: pre-wrap; width: 100%; height: 100%; overflow: hidden; color: #3f3a1c; font-family: Helvetica, Arial, sans-serif; line-height: 1.2; }
.o-note .o-edit.note:empty::before { content: 'Votre note'; color: #a39a57; }
.o-image img, .o-signature img { width: 100%; height: 100%; display: block; pointer-events: none; }
.o-dessin svg { display: block; overflow: visible; }
.o-tampon { border: 2.5px solid; border-radius: 6px; display: grid; place-items: center; font-weight: 800; font-family: Helvetica, Arial, sans-serif; letter-spacing: .03em; white-space: nowrap; opacity: .9; }
.o-lien { border: 1.5px dashed #0284c7; background: rgba(2, 132, 199, .08); }
.o-champ-texte { border: 1.5px dashed #7c3aed; background: rgba(124, 58, 237, .07); }
.o-case { border: 1.5px dashed #7c3aed; background: rgba(124, 58, 237, .1); border-radius: 2px; }
.o-recadrer { border: 2px dashed var(--marque); box-shadow: 0 0 0 9999px rgba(15, 27, 45, .45); }
.o-etiq { position: absolute; left: 0; top: -18px; font-size: 11px; background: rgba(15, 27, 45, .8); color: #fff; padding: 1px 6px; border-radius: 4px; white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.o-recadrer .o-etiq { top: 4px; left: 4px; }

/* ---------- Compte, tarifs, admin ---------- */
.page-etroite { max-width: 520px; margin: 0 auto; }
.carte-auth { background: var(--blanc); border: 1px solid var(--trait); border-radius: 18px; padding: 26px; }
.page-tarifs { text-align: center; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 24px 0; text-align: left; }
.plan { background: var(--blanc); border: 1px solid var(--trait); border-radius: 18px; padding: 24px; position: relative; display: flex; flex-direction: column; gap: 10px; }
.plan.vedette { border: 2px solid var(--marque); box-shadow: 0 10px 30px rgba(228, 87, 46, .12); }
.plan.courant { background: #fafbfc; }
.plan-badge { position: absolute; top: -12px; left: 20px; background: var(--marque); color: #fff; font-size: .75rem; font-weight: 700; padding: 3px 10px; border-radius: 99px; }
.plan h2 { margin: 0; }
.plan-prix { font-size: 1.5rem; font-weight: 800; margin: 0; }
.plan-prix small { font-size: .9rem; color: var(--gris); font-weight: 500; }
.plan ul { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.plan li { display: flex; gap: 8px; align-items: flex-start; font-size: .92rem; }
.plan li svg { color: var(--vert); margin-top: 2px; }
.paiement { text-align: left; max-width: 640px; margin: 0 auto; }
.page-large { max-width: 1100px; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 24px; }
.stat { background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; }
.stat b { font-size: 1.7rem; font-weight: 800; }
.stat span { color: var(--gris); font-size: .86rem; }
.stat.large { grid-column: 1 / -1; }
.stat ol { margin: 6px 0 0; padding-left: 20px; }
.table-admin { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.ta-ligne { display: grid; grid-template-columns: minmax(0, 1.6fr) 100px 150px 160px auto; gap: 10px; align-items: center; background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; padding: 10px 12px; }
.ta-ligne > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.ta-ligne small { color: var(--gris); overflow: hidden; text-overflow: ellipsis; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .rapides { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .outil-grille { grid-template-columns: minmax(0, 1fr) 280px; }
}
@media (max-width: 900px) {
  :root { --lat: 280px; }
  .lateral { inset: 0 auto 0 0; border-radius: 0 18px 18px 0; transform: translateX(-105%); transition: transform .2s; box-shadow: 0 0 40px rgba(0, 0, 0, .2); }
  .nav-ouverte .lateral { transform: none; }
  .nav-ouverte #voile { display: block; position: fixed; inset: 0; background: rgba(15, 27, 45, .4); z-index: 38; }
  .volet { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 80vh; border-radius: 18px 18px 0 0; border: 1px solid var(--trait); z-index: 60; }
  .principal { margin-left: 0; padding: 10px 16px 40px; }
  .icone-btn.burger { display: inline-grid; background: var(--blanc); border: 1px solid var(--trait); width: 42px; height: 42px; border-radius: 12px; }
  .entete { flex-wrap: wrap; }
  .logo-mobile { display: block; }
  .recherche { order: 3; max-width: none; flex-basis: 100%; }
  .btn-entete span, .btn-pro span { display: none; }
  .rapides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .outil-grille { grid-template-columns: 1fr; }
  .outil-panneau { position: static; max-height: none; }
  .page-outil { padding: 14px; }
  .tf-tete { display: none; }
  .tf-ligne { grid-template-columns: minmax(0, 1fr) 36px; }
  .tf-taille, .tf-date { display: none; }
  .ed-pages { height: 70vh; padding: 10px; }
  .ed-mode span { display: none; }
  .ta-ligne { grid-template-columns: 1fr 1fr; }
  .ta-ligne > span:first-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .rapides { grid-template-columns: 1fr; }
  .minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sig-polices { grid-template-columns: 1fr; }
}