/* ============ Mode édition — commun aux 3 pages du cockpit ============ */
:root{
  --ck-navy:#1E3A5F; --ck-green:#0E7C7B; --ck-line:#e2e7e3; --ck-card:#fff;
  --ck-ink:#2C3E50; --ck-mut:#7b8a80; --ck-red:#c0392b; --ck-amber:#d68910;
}

/* --- bouton global --- */
.edit-toggle{
  position:fixed; right:16px; bottom:16px; z-index:90;
  background:var(--ck-navy); color:#fff; border:none; border-radius:24px;
  padding:11px 18px; font:700 .82rem/1 inherit; cursor:pointer;
  box-shadow:0 6px 20px rgba(30,58,95,.28); transition:transform .15s, background .2s;
}
.edit-toggle:hover{transform:translateY(-2px)}
.edit-toggle.on{background:var(--ck-green); box-shadow:0 6px 20px rgba(36,84,48,.35)}

/* le même bouton, dans la barre du haut */
.edit-toggle-top{
  position:static; margin-left:10px; padding:7px 14px; border-radius:20px;
  background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.32);
  box-shadow:none; font-size:.74rem; font-weight:800; cursor:pointer; white-space:nowrap;
}
.edit-toggle-top:hover{background:rgba(255,255,255,.28); transform:none}
.edit-toggle-top.on{background:var(--ck-green); border-color:var(--ck-green); box-shadow:none}

/* bandeau d'explication, visible seulement en mode édition */
.ck-aide-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  background:var(--ck-green); color:#fff; font-size:.78rem; line-height:1.5;
  padding:10px 190px 10px 18px; text-align:center;
  box-shadow:0 -4px 18px rgba(20,42,71,.18);
}
@media(max-width:700px){ .ck-aide-bar{padding:9px 14px 58px; font-size:.72rem} }

/* --- barre d'outils d'un élément --- */
/* Les outils sortent du contenu (au-dessus, coin droit) pour ne jamais
   masquer le texte de l'élément qu'ils servent à modifier. */
.ck-tools{display:none; gap:3px; position:absolute; top:-11px; right:-2px; z-index:6; opacity:.72; transition:opacity .15s}
body.editing .ck-tools{display:flex}
.ck-item:hover > .ck-tools{opacity:1}
.ck-t{
  width:21px; height:21px; border-radius:6px; border:1px solid var(--ck-line);
  background:#fff; color:var(--ck-navy); cursor:pointer;
  font-size:.66rem; line-height:1; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(30,58,95,.16); padding:0;
}
.ck-t:hover{background:var(--ck-navy); color:#fff; border-color:var(--ck-navy)}
.ck-t.del:hover{background:var(--ck-red); border-color:var(--ck-red)}

/* l'élément éditable doit pouvoir porter la barre */
body.editing .ck-item{position:relative}
body.editing .ck-item::after{
  content:""; position:absolute; inset:-3px; border:1px dashed rgba(30,58,95,.28);
  border-radius:12px; pointer-events:none;
}
/* les conteneurs qui rognent doivent laisser dépasser les outils en édition */
body.editing .hero,body.editing .stats,body.editing .tags,body.editing .gal,
body.editing .idgrid,body.editing .ideas,body.editing .atouts,body.editing .road,
body.editing .ia-grid,body.editing .soc-grid,body.editing .dec,body.editing .grid3{overflow:visible}
body.editing .tags .ck-item,body.editing .stats .ck-item{margin-top:9px}

/* --- bouton d'ajout --- */
.ck-add{display:none}
body.editing .ck-add{
  display:inline-flex; align-items:center; gap:6px; margin:10px 0 0;
  background:var(--ck-green); color:#fff; border:none; border-radius:9px;
  padding:8px 14px; font:700 .78rem/1 inherit; cursor:pointer;
}
body.editing .ck-add:hover{filter:brightness(1.08)}
.ck-only{display:none}
body.editing .ck-only{display:block}
body.editing .ck-hide{display:none}

/* --- modal --- */
.ck-modal{
  border:none; border-radius:16px; padding:0; width:min(560px,94vw);
  box-shadow:0 24px 60px rgba(20,42,71,.28); color:var(--ck-ink); font-family:inherit;
}
.ck-modal.small{width:min(400px,94vw)}
.ck-modal::backdrop{background:rgba(20,42,71,.45)}
.ck-h{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--ck-line);
  font-weight:800; color:var(--ck-navy); font-size:.95rem;
}
.ck-x{background:none;border:none;font-size:1.1rem;cursor:pointer;color:var(--ck-mut);line-height:1}
.ck-b{padding:16px 18px; max-height:66vh; overflow:auto; display:grid; gap:13px}
.ck-b label{display:block; font-size:.76rem; font-weight:700; color:var(--ck-navy)}
.ck-b input[type=text], .ck-b input[type=number], .ck-b textarea, .ck-b select{
  width:100%; margin-top:5px; font-family:inherit; font-size:.86rem; color:var(--ck-ink);
  border:1px solid var(--ck-line); border-radius:9px; padding:9px 11px; background:#fbfcfa;
  font-weight:400; box-sizing:border-box;
}
.ck-b textarea{resize:vertical; line-height:1.5}
.ck-b input:focus, .ck-b textarea:focus, .ck-b select:focus{outline:2px solid var(--ck-green); border-color:var(--ck-green)}
.ck-aide{display:block; margin-top:4px; font-size:.68rem; font-weight:400; color:var(--ck-mut); line-height:1.45}
.ck-col{display:flex; gap:8px; align-items:center; margin-top:5px}
.ck-col input[type=color]{width:44px; height:36px; padding:2px; border:1px solid var(--ck-line); border-radius:8px; background:#fff}
.ck-col input[type=text]{margin-top:0}
.ck-conf{margin:0; font-size:.88rem; line-height:1.5}
.ck-f{display:flex; justify-content:flex-end; gap:9px; padding:13px 18px; border-top:1px solid var(--ck-line); background:#fafbf9; border-radius:0 0 16px 16px}
.ck-btn{border:1px solid var(--ck-line); background:#fff; color:var(--ck-ink); border-radius:9px; padding:9px 15px; font:700 .8rem/1 inherit; cursor:pointer}
.ck-btn.ok{background:var(--ck-green); border-color:var(--ck-green); color:#fff}
.ck-btn.danger{background:var(--ck-red); border-color:var(--ck-red); color:#fff}
.ck-btn:hover{filter:brightness(1.05)}

/* --- toasts --- */
.ck-toasts{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:200; display:grid; gap:8px}
.ck-toast{
  background:var(--ck-navy); color:#fff; border-radius:10px; padding:10px 16px;
  font-size:.8rem; box-shadow:0 8px 24px rgba(20,42,71,.3); transition:opacity .3s, transform .3s;
}
.ck-toast.err{background:var(--ck-red)}
.ck-toast.ok{background:var(--ck-green)}
.ck-toast.out{opacity:0; transform:translateY(8px)}

@media print{ .edit-toggle,.ck-tools,.ck-add{display:none !important} }