/* Identité Solaris commune, norme v2 (grammaire d'IK / stokk) — Espace Solaris, docs/identite-solaris.md :
   fond clair, cartes à contour fin SANS ombre, boutons pleins pétrole, boutons secondaires et champs à contour,
   police du système, aucune couleur vive. Seuls les repères FONCTIONNELS gardent des couleurs
   (zone à remplir orange, validé vert, erreur rouge, teinte par signataire dans l'éditeur). */
:root {
  --petrole: #16394a; --petrole-fonce: #0f2a38; --survol: #dde6eb; --choisi: #cfe6f2;
  --orange: #e8833a; --orange-i: #8a4b00; --orange-fond: #ffddb3;
  --zone-fond: #fff1e0; --zone-contour: #d66819; /* zone à remplir : contour 3,2:1 sur papier blanc (décision de la direction artistique) */
  --vert: #1b6b2f; --vert-i: #1b6b2f; --vert-fond: #c8f0cf;
  --rouge: #b3261e; --rouge-fond: #ffdad6;
  --fond: #f9fbfc; --carte: #f1f6f8; --contour: #c3d2da; --contour-fort: #5e7480;
  --encre: #10212a; --encre-2: #2b3d47; --doux: #3f535e;
  --encre-signature: #0f2a38; /* même encre dans le PDF final (src/pdf.js) */
  --r: 22px; --r-m: 16px; --r-s: 12px; --r-b: 14px;
  --police: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fond); color: var(--encre); font: 400 16px/1.5 var(--police); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: 30px; line-height: 1.15; } h2 { font-size: 20px; } h3 { font-size: 16px; }
a { color: var(--petrole); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.barre { display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: #f9fbfc; border-bottom: 1px solid var(--contour); position: sticky; top: 0; z-index: 20; }
.barre img { height: 34px; }
.barre .titre { font-weight: 700; font-size: 17px; color: var(--petrole); }
.barre nav { display: flex; gap: 2px; margin-left: auto; }
.barre nav a { color: var(--doux); text-decoration: none; padding: 9px 13px; border-radius: var(--r-s); font-weight: 600; font-size: 15px; }
.barre nav a.actif { background: var(--choisi); color: var(--petrole); }
.barre nav a:hover { color: var(--petrole); }

main { max-width: 1100px; margin: 0 auto; padding: 28px 20px 100px; }
.entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.carte { background: var(--carte); border: 1px solid var(--contour); border-radius: var(--r); padding: 20px; }
.carte + .carte { margin-top: 14px; }
.doux { color: var(--doux); }
.petit { font-size: 13px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid var(--contour-fort); background: transparent; color: var(--petrole); padding: 10px 20px; border-radius: var(--r-b); font-weight: 600; cursor: pointer; text-decoration: none; min-height: 48px; }
.btn:hover { background: var(--survol); }
.btn.primaire { background: var(--petrole); border-color: var(--petrole); color: #fff; }
.btn.primaire:hover { background: var(--petrole-fonce); }
.btn.danger { color: var(--rouge); border-color: var(--rouge); }
.btn.danger:hover { background: var(--rouge-fond); }
.btn.mini { padding: 6px 14px; min-height: 38px; font-size: 14px; border-radius: 14px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn:focus-visible, .outil:focus-visible { outline: 2.5px solid var(--petrole); outline-offset: 2px; }

label.champ { display: block; margin-bottom: 12px; font-weight: 600; font-size: 14px; color: var(--doux); }
input[type=text], input[type=email], input[type=number], input[type=password], select, textarea { width: 100%; margin-top: 6px; background: var(--fond); border: 1.5px solid var(--contour-fort); border-radius: var(--r-s); padding: 12px 14px; min-height: 48px; }
input[type=text]:focus, input[type=email]:focus, input[type=number]:focus, input[type=password]:focus, select:focus, textarea:focus { outline: 2.5px solid var(--petrole); outline-offset: 2px; border-color: var(--petrole); }
.a-remplir input[type=text]:focus:not(:focus-visible) { outline: 0; }
textarea { resize: vertical; min-height: 80px; }
input[type=checkbox] { accent-color: var(--petrole); }

.badge { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--survol); color: var(--doux); border: 1px solid var(--contour); white-space: nowrap; }
.badge.envoye { background: var(--choisi); color: var(--petrole); border-color: var(--contour-fort); }
.badge.signe { background: var(--vert-fond); color: var(--vert-i); border-color: transparent; }
.badge.refuse, .badge.annule, .badge.expire { background: var(--rouge-fond); color: var(--rouge); border-color: transparent; }
.badge.brouillon { background: var(--orange-fond); color: var(--orange-i); border-color: transparent; }

.liste-doc { display: grid; gap: 10px; }
.ligne-doc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 16px 18px; background: var(--carte); border: 1px solid var(--contour); border-radius: var(--r-m); text-decoration: none; color: inherit; }
a.ligne-doc:hover { border-color: var(--contour-fort); }
.ligne-doc strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.vide { text-align: center; padding: 56px 20px; color: var(--doux); }
.vide img { width: 64px; margin-bottom: 12px; }

.depot { border: 2px dashed var(--contour-fort); border-radius: var(--r); padding: 40px 20px; text-align: center; cursor: pointer; background: var(--carte); }
.depot:hover, .depot.survol { background: var(--survol); border-color: var(--petrole); }
.depot strong { font-size: 18px; }

.grille2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ligne-sig { display: grid; grid-template-columns: 14px 1fr auto; gap: 0 10px; align-items: start; margin-bottom: 12px; }
.ligne-sig .pastille { margin-top: 16px; }
.ligne-sig .email { grid-column: 2 / 3; margin-bottom: 0; }
.pastille { width: 14px; height: 14px; border-radius: 50%; margin-bottom: 14px; background: var(--c, var(--zone-contour)); }
.statut-ligne { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* éditeur */
.editeur { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 20px; align-items: start; }
.panneau { position: sticky; top: 74px; display: grid; gap: 12px; max-height: calc(100vh - 100px); overflow: auto; }
.outils { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.outil { display: flex; align-items: center; gap: 8px; padding: 10px 12px; min-height: 48px; background: var(--fond); border: 1.5px solid var(--contour-fort); border-radius: var(--r-b); cursor: pointer; font-weight: 600; font-size: 14px; text-align: left; color: var(--petrole); }
.outil:hover { background: var(--survol); }
.outil.actif { border: 1.5px solid var(--petrole); background: var(--choisi); }
.zone-pages { display: grid; gap: 18px; justify-items: center; min-width: 0; }
.page-pdf { position: relative; background: #fff; border: 1px solid var(--contour-fort); max-width: 100%; container-type: inline-size; }
.page-pdf canvas { display: block; }
.couche { position: absolute; inset: 0; }
.mode-pose .couche { cursor: crosshair; }
/* champs posés par l'administrateur : une teinte sobre par signataire (repère fonctionnel, pas de l'identité) */
.champ-doc { position: absolute; border: 2px solid var(--c, var(--zone-contour)); background: color-mix(in srgb, var(--c, var(--zone-contour)) 18%, transparent); border-radius: 12px; display: flex; align-items: center; justify-content: center; font: 600 max(13px, 1.6cqw)/1.1 var(--police); color: var(--encre); cursor: move; touch-action: none; user-select: none; overflow: hidden; }
.champ-doc.sel { outline: 2.5px solid var(--c); outline-offset: 2px; z-index: 5; }
.champ-doc .poignee { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; background: var(--c); cursor: nwse-resize; border-top-left-radius: 12px; }
.champ-doc .etiq { padding: 0 4px; text-align: center; pointer-events: none; }
.barre-bas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: rgba(241, 246, 248, .92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--contour); padding: 10px 20px calc(10px + env(safe-area-inset-bottom)); display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }

.liens .lien { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 12px 0; border-top: 1px solid var(--contour); }
.liens .lien:first-of-type { border-top: 0; }
.lien-url { font-family: Consolas, 'SF Mono', monospace; font-size: 13px; word-break: break-all; color: var(--doux); }
.journal { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.journal li { font-size: 14px; padding-left: 16px; position: relative; color: var(--encre-2); }
.journal li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--petrole); }

.toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); background: var(--petrole); color: #fff; padding: 12px 20px; border-radius: var(--r-b); z-index: 60; max-width: 92vw; font-weight: 600; }
.toast.erreur { background: var(--rouge-fond); color: var(--rouge); border: 1.5px solid var(--rouge); }

.fenetre-fond { position: fixed; inset: 0; background: rgba(16, 33, 42, .4); z-index: 50; display: grid; place-items: center; padding: 14px; }
.fenetre { background: var(--carte); border: 1px solid var(--contour); border-radius: var(--r); width: min(560px, 100%); max-height: 94vh; overflow: auto; padding: 24px; }
.onglets { display: flex; gap: 8px; margin: 14px 0; }
.onglet { flex: 1; padding: 11px; min-height: 48px; border-radius: var(--r-b); border: 1.5px solid var(--contour-fort); background: transparent; cursor: pointer; font-weight: 600; text-align: center; color: var(--petrole); }
.onglet.actif { background: var(--petrole); border-color: var(--petrole); color: #fff; }
.pad { background: #fff; border: 1.5px solid var(--contour-fort); border-radius: var(--r-s); touch-action: none; width: 100%; height: 190px; display: block; cursor: crosshair; }
.saisie-signature { width: 100%; font: 400 44px/1.2 'Segoe Script', 'Brush Script MT', 'Lucida Handwriting', cursive; background: #fff; color: var(--encre-signature); border: 1.5px solid var(--contour-fort); border-radius: var(--r-s); padding: 14px; }
.saisie-code { font-size: 34px; letter-spacing: .35em; text-align: center; font-weight: 700; }
.apercu-signature { background: #fff; border: 1.5px solid var(--contour); border-radius: var(--r-s); height: 110px; display: grid; place-items: center; overflow: hidden; margin-top: 8px; }
.apercu-signature img { max-width: 100%; max-height: 100%; }
.actions-fenetre { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }

/* page du signataire */
.signer main { padding-top: 18px; }
.signer .btn.mini { min-height: 48px; }
.encart { text-align: center; padding: 44px 20px; }
/* repères fonctionnels : à remplir = orange pointillé (très visible sur papier blanc) ; rempli = vert ; autre signataire = gris */
.a-remplir { position: absolute; border: 2px dashed var(--zone-contour); background: rgba(255, 241, 224, .9); border-radius: 12px; display: flex; align-items: center; justify-content: center; font: 700 max(13px, 1.7cqw)/1.1 var(--police); white-space: nowrap; color: var(--orange-i); cursor: pointer; overflow: hidden; animation: pulse 2s ease-in-out infinite; padding: 0; }
.a-remplir input[type=text] { font-size: max(13px, 1.9cqw); }
.a-remplir.fait { border: 2px solid var(--vert-i); background: rgba(200, 240, 207, .6); animation: none; }
.a-remplir.fait img { max-width: 100%; max-height: 100%; }
.a-remplir.fait .coche { color: var(--vert-i); font-size: 22px; font-weight: 800; }
.a-remplir.autre { border: 1px dashed #5e7480; background: rgba(94, 116, 128, .15); color: var(--doux); cursor: default; animation: none; }
.a-remplir input[type=text] { width: 100%; height: 100%; min-height: 0; margin: 0; border: 0; background: transparent; color: var(--encre-signature); padding: 0 4px; font-weight: 600; border-radius: 0; box-shadow: none; }
@keyframes pulse { 50% { background: rgba(255, 241, 224, .6); } }
@media (prefers-reduced-motion: reduce) { .a-remplir { animation: none; } }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--encre-2); }
.consent input { width: 24px; height: 24px; margin-top: 1px; flex: none; }

/* sélecteur de fichier au style de la charte */
input[type=file] { font-size: 15px; color: var(--doux); }
input[type=file]::file-selector-button { border: 1.5px solid var(--contour-fort); background: transparent; color: var(--petrole); font: 600 16px var(--police); padding: 12px 20px; min-height: 48px; border-radius: var(--r-b); margin-right: 14px; cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--survol); }
/* pastilles d'état (écrans de fin, vérification) : remplacent les emojis */
.rond { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 14px; font-size: 36px; font-weight: 700; line-height: 1; }
.rond.ok { background: var(--vert-fond); color: var(--vert-i); }
.rond.attente { background: var(--orange-fond); color: var(--orange-i); }
.rond.ko { background: var(--rouge-fond); color: var(--rouge); }
.verdict { display: flex; align-items: center; gap: 12px; }
.verdict .rond { width: 40px; height: 40px; font-size: 22px; margin: 0; }

@media (max-width: 900px) {
  .editeur { grid-template-columns: 1fr; }
  .panneau { position: static; max-height: none; }
  .grille2 { grid-template-columns: 1fr; }
  .barre nav a { padding: 9px 8px; font-size: 14px; }
  h1 { font-size: 26px; }
  main { padding: 18px 12px 110px; }
}

/* pas de vide sous le dernier élément d'une carte (la marge du paragraphe s'ajoutait au padding) */
.carte > :last-child, .fenetre > :last-child { margin-bottom: 0; }
.carte > p, .carte > h1, .carte > h2 { margin-top: 0; }
.carte > h1 + p, .carte > h2 + p { margin-top: 8px; }
.carte > p { margin-bottom: 10px; }
.carte > p:last-child { margin-bottom: 0; }
.alerte-panne { background: var(--rouge-fond); color: var(--rouge); border: 1.5px solid var(--rouge); border-radius: var(--r-b); margin: 12px 16px 0; padding: 12px 16px; line-height: 1.4; }
.alerte-panne a { color: inherit; font-weight: 700; }

/* ---- page du signataire sur téléphone (campagne de tests du 4 nov.) ----
   Les zones suivent la taille du document : sur un écran de 360 px, une case de 18 pt n'a que 10 px de côté et le texte 6 px.
   On garde l'aspect visuel, mais : texte lisible (11 px minimum) et zone de toucher agrandie autour (≈ 44 px). */
@media (max-width: 700px) {
  .signer .a-remplir:not(.autre) { overflow: visible; }
  .signer .a-remplir:not(.autre)::after { content: ''; position: absolute; inset: calc(var(--it, 18px) * -1) calc(var(--ir, 18px) * -1) calc(var(--ib, 18px) * -1) calc(var(--il, 18px) * -1); }
  .signer .a-remplir input[type=text] { pointer-events: none; }
}
.signer .a-remplir input[type=text]:focus-visible, .signer .a-remplir:focus-visible { outline: 2.5px solid var(--petrole); outline-offset: 2px; }
.signer .a-remplir input[type=text]:focus { box-shadow: none; }
.signer h1 { overflow-wrap: anywhere; }
@media (forced-colors: active) { .a-remplir { border-color: CanvasText; } .a-remplir.fait { border-style: solid; } }

.sous-section { margin-top: 18px; }

/* ---- administrateur sur téléphone : la page ne défile jamais de côté (barre du haut qui passe à la ligne, barre du bas qui s'empile) ---- */
@media (max-width: 700px) {
  .barre { flex-wrap: wrap; gap: 4px 10px; padding: 8px 12px; }
  .barre nav { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .barre nav a { flex: 1 1 auto; text-align: center; padding: 11px 8px; min-height: 44px; box-sizing: border-box; }
  .barre-bas { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .barre-bas .statut-ligne { width: 100%; }
  .barre-bas .statut-ligne > .btn, .barre-bas .statut-ligne > button { flex: 1 1 auto; }
  .btn.mini { min-height: 44px; }
  .champ-doc .etiq { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
}