/* =========================================================
   css/sacs.css — SACS
   Objectifs :
   - Canvas “sacs” (nœud + col + sac) lisible et joli
   - Mots en 2 colonnes dans le sac (1er à gauche, 2e à droite, etc.)
   - Aside EXACTEMENT dans le style des autres corpus (type grille)
   - Compatible avec tes classes existantes + nouveaux helpers
   ========================================================= */


/* =========================
   0) Canvas racine
   ========================= */

#sacs-canvas{
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 0.75rem;
}

/* Titre du corpus (haut du canvas) */
.sacs-corpus-title{
  text-align: center;
  font-weight: 800;
  font-size: 1.2rem;
  cursor: pointer;
  user-select: none;
}

.sacs-empty-message{
  text-align: center;
  opacity: 0.75;
  padding: 0.8rem;
}


/* =========================
   1) Layout comme les autres corpus (grille)
   ========================= */

.sacs-wrapper{
  padding-bottom: 1rem;
}

/* Même logique que .grille-layout */
.sacs-layout{
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr);
  gap: 1rem;
  margin-top: 0.5rem;
  align-items: start;
}

/* Colonne gauche */
.sacs-canvas-container{
  width: 100%;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

/* Canvas “cadre blanc” */
.sacs-canvas{
  position: relative;
  width: 100%;
  min-height: 300px;
  max-height: 580px;

  background: #ffffff;
  border-radius: 14px;
  border: 1px dashed #e5e7f0;

  overflow: auto;
  padding: 0.75rem;
  box-sizing: border-box;
}

/* Responsive */
@media (max-width: 900px){
  .sacs-layout{ grid-template-columns: minmax(0, 1fr); }
  .sacs-canvas{ max-height: none; }
}


/* =========================
   2) Sidebar (aside) identique aux autres corpus
   ========================= */

.sacs-sidebar{
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Même look que .grille-panel */
.sacs-panel{
  border-radius: 14px;
  border: 1px solid #e5e7f0;
  background: #f9fafb;
  padding: 0.75rem 0.85rem;
}

.sacs-panel h3{
  font-size: 1rem;
  margin-bottom: 0.4rem;
}

/* Inputs/textarea : même style “éditeur” */
.sacs-panel input[type="text"],
.sacs-panel textarea{
  width: 100%;
  box-sizing: border-box;
}

.sacs-panel textarea{
  min-height: 70px;
  resize: vertical;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  padding: 0.4rem 0.5rem;
  font-size: 0.85rem;
  font-family: inherit;
  outline: none;
  background: #ffffff;
}

.sacs-panel input[type="text"]{
  border-radius: 999px;
  border: 1px solid #d1d5db;
  padding: 0.55rem 0.85rem;
  font-size: 0.95rem;
  outline: none;
  background: #f9fafb;
}

.sacs-panel input[type="text"]:focus,
.sacs-panel textarea:focus{
  border-color: #4f46e5;
  box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.15);
  background: #ffffff;
}

/* Liste interconnexions (même esprit que grille-links-panel) */
.sacs-links-panel{
  min-height: 80px;
  max-height: 200px;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #e5e7f0;
  padding: 0.5rem 0.6rem;
}


/* =========================
   3) Editeurs sacs (dans aside) — mini blocs internes
   ========================= */

.sacs-bag-editor{
  border: 1px solid #e5e7f0;
  border-radius: 12px;
  padding: 0.6rem;
  background: #ffffff;

  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sacs-bag-editor-header{
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.sacs-bag-editor-header input{
  flex: 1;
}

/* bouton X (réutilise ton style .remove-class global si présent) */
.sacs-bag-editor .remove-class{
  border-radius: 999px;
  border: none;
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  cursor: pointer;
  background: transparent;
  color: #9ca3af;
}

.sacs-bag-editor .remove-class:hover{
  color: #ef4444;
}


/* =========================
   4) “Sacs” visuels : nœud + sac
   ========================= */

.sacs-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  align-items: start;
}

.sacs-bag-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

/* --- Nœud (forme du haut) --- */
.sacs-bag-knot{
  width: 56px;
  height: 18px;
  border-radius: 999px;
  background: #d6a85b;
  position: relative;
  box-shadow: 0 2px 0 rgba(0,0,0,.12);
}

.sacs-bag-knot::before,
.sacs-bag-knot::after{
  content: "";
  position: absolute;
  top: 3px;
  width: 18px;
  height: 12px;
  border-radius: 6px;
  background: #c89445;
}

.sacs-bag-knot::before{
  left: -10px;
  transform: rotate(-18deg);
}

.sacs-bag-knot::after{
  right: -10px;
  transform: rotate(18deg);
}

/* --- Sac (forme principale) --- */
.sacs-bag{
  width: 100%;
  /* max-width: 320px;  <-- enlève ce verrou */
  max-width: min(520px, 100%); /* ou 560px si tu veux plus large */
  min-height: 190px;

  border-radius: 18px 18px 26px 26px;
  border: 2px solid rgba(0,0,0,.12);
  background: #f2d39a;

  position: relative;
  padding: 1.15rem 0.75rem 0.95rem; /* plus haut : on réserve l’espace pour le col */
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
}

/* “col” du sac (forme du milieu, juste au-dessus des mots) */
.sacs-bag-collar{
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);

  width: 60%;
  height: 28px;

  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.12);
  background: #e8c27e;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.4rem;
  box-sizing: border-box;
}

/* texte du titre DANS le col */
.sacs-bag-collar-label{
  max-width: 95%;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;

  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.1;
  text-align: center;

  color: #111827;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(229,231,240,.9);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  cursor: pointer;
  user-select: none;
}

/* message “Ajoutez des mots” */
.sacs-bag-empty{
  text-align: center;
  opacity: 0.7;
  margin-top: 2.2rem;
}


/* =========================
   5) Mots : disposition en 2 colonnes dans le sac
   Règle : 1 gauche, 2 droite, 3 sous 1, 4 sous 2, etc.
   ========================= */

.sacs-bag-words{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 0.6rem;

  justify-items: stretch; /* au lieu de center */
  align-items: start;

  margin-top: 0.9rem;
  padding-top: 0.2rem;
}

.sacs-word-chip{
  width: 100%;
  max-width: none; /* au lieu de 140px */
}


/* option : si tu veux que ça respire un peu plus sur mobile */
@media (max-width: 420px){
  .sacs-bag-words{
    grid-template-columns: 1fr; /* en 1 colonne sur très petit écran */
  }
}

@media (min-width: 1100px){
  .sacs-bag{
    max-width: 640px;
    min-height: 240px;
  }

  .sacs-bag-collar-label{
    font-size: 1rem;
  }
}


/* =========================
   6) Impression : cacher l’aside (comme les autres)
   ========================= */

@media print{
  header, footer,
  .app-header, .app-footer,
  .breadcrumb,
  .sacs-sidebar{
    display: none !important;
  }

  body{ background: #ffffff !important; }

  .app-main{
    margin: 0;
    padding: 0;
    max-width: 100%;
  }

  #view-corpus-sacs{
    display: block !important;
  }

  .card, .sacs-wrapper, .sacs-canvas-container{
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .sacs-layout{
    grid-template-columns: minmax(0, 1fr);
  }

  .sacs-canvas{
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    border: none !important;
    padding: 0.4cm !important;
  }
}