/* ---------- INDICATIONS D'UN PROJET ----------
     À côté des tâches à cocher : la façon de faire, en texte et en images.
     Volontairement plus calme que les lignes de tâches — on lit ces blocs, on
     ne les traite pas. */

  /* ---------- les flèches de la suite ----------
     Les mêmes pour une tâche et pour une indication : elles se déplacent dans
     la même suite, il serait trompeur de les dessiner différemment. */
  .suite-fleche{
    width:21px; height:21px; padding:0; border:none; background:none; color:var(--ink-soft);
    display:flex; align-items:center; justify-content:center; border-radius:6px;
    flex-shrink:0; cursor:pointer;
  }
  .suite-fleche svg{width:12px; height:12px;}
  .suite-fleche:hover:not(:disabled){color:var(--ink); background:var(--surface);}
  .suite-fleche:disabled{opacity:.25; cursor:default;}
  .admin-task-arrows{display:flex; align-items:center; gap:2px; flex-shrink:0;}

  /* ---------- un bloc ---------- */
  .hint{
    position:relative; background:var(--bg); border:1px solid var(--border);
    border-radius:11px; padding:9px 11px; margin-bottom:7px;
  }
  .hint-text{display:flow-root;}   /* contient la barre flottante */
  .hint-image{padding:7px;}
  .hint-body{margin:0; font-size:12.5px; line-height:1.5; color:var(--ink); white-space:pre-wrap; word-break:break-word;}
  /* contain, pas cover : une image d instruction rognee perd justement ce
     qu elle montrait. Elle est cadree en entier, quitte a laisser des marges. */
  .hint-img{
    display:block; width:100%; height:auto; max-height:300px; object-fit:contain;
    border-radius:8px; background:var(--surface-soft); cursor:zoom-in;
  }
  .hint-caption{margin:6px 2px 0; font-size:11.5px; line-height:1.4; color:var(--ink-soft); white-space:pre-wrap;}

  /* La barre d'outils reste discrète : elle ne doit pas concurrencer le texte.
     Flottante plutôt qu'absolue — le paragraphe la contourne sur sa première
     ligne puis reprend toute la largeur. Sur une image, elle se pose par-dessus,
     en bas à droite. */
  .hint-tools{display:flex; align-items:center; gap:2px; float:right; margin:-2px -3px 2px 8px;}
  /* Sur l image, en haut a droite : en bas elle recouvrirait la legende. */
  .hint-image .hint-tools{
    float:none; margin:0; position:absolute; top:13px; right:13px; background:rgba(255,255,255,.92);
    border-radius:999px; padding:2px 3px; box-shadow:0 2px 8px -3px rgba(0,0,0,.4);
  }
  .hint-tools button{
    width:21px; height:21px; padding:0; border:none; background:none; color:var(--ink-soft);
    display:flex; align-items:center; justify-content:center; border-radius:6px; cursor:pointer;
  }
  .hint-tools button svg{width:12px; height:12px;}
  .hint-tools button:hover:not(:disabled){color:var(--ink); background:var(--surface);}
  .hint-tools button:disabled{opacity:.25; cursor:default;}
  .hint-del:hover:not(.armed){color:#E5342A !important;}
  /* Effacer se confirme sur place, comme partout ailleurs dans l'app. */
  .hint-del.armed{
    width:auto !important; padding:2px 8px !important; border-radius:999px;
    background:#E5342A; color:#fff !important;
    font-family:'Inter',sans-serif; font-size:9.5px; font-weight:700;
  }
  .hint-del.armed:hover{background:#C42A21;}

  /* ---------- écrire ou modifier ---------- */
  .hint-edit{margin-top:6px;}
  .hint-edit textarea{
    width:100%; border:1px solid var(--border-soft); border-radius:9px; background:var(--surface);
    padding:8px 9px; font-family:'Inter',sans-serif; font-size:12.5px; line-height:1.5;
    color:var(--ink); resize:vertical; min-height:64px;
  }
  .hint-edit textarea:focus{outline:none; border-color:var(--accent);}
  .hint-edit-actions{display:flex; justify-content:flex-end; gap:7px; margin-top:6px;}
  .hint-cancel, .hint-save{
    border:none; border-radius:9px; font-family:'Inter',sans-serif; font-size:11.5px;
    font-weight:600; padding:7px 12px; cursor:pointer;
  }
  .hint-cancel{background:none; color:var(--ink-soft); text-decoration:underline;}
  .hint-cancel:hover{color:var(--ink);}
  .hint-save{background:var(--action); color:#fff;}

  /* ---------- ajouter à la suite ----------
     Une seule rangée sous le champ « Ajouter une tâche » : tout ce qu'on peut
     poser dans la suite est au même endroit. */
  .suite-add{margin-top:7px;}
  .suite-add-row{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
  .suite-add-row button{
    display:flex; align-items:center; gap:5px;
    border:1px dashed var(--border-soft); border-radius:9px; background:none;
    color:var(--ink-soft); font-family:'Inter',sans-serif; font-size:11.5px; font-weight:600;
    padding:6px 10px; cursor:pointer; transition:color .15s ease, border-color .15s ease;
  }
  .suite-add-row button svg{width:13px; height:13px;}
  .suite-add-row button:hover{color:var(--ink); border-color:var(--ink-soft);}
  .hint-upload-note{font-size:10.5px; color:var(--ink-soft); font-style:italic;}

  /* ---------- la feuille de création ---------- */
  #sheetHintList{margin-top:10px;}
  #sheetHintList .hint-img{max-height:180px;}

  /* ---------- voir une image en grand ---------- */
  .hint-lightbox{
    position:fixed; inset:0; z-index:95; background:rgba(20,18,15,.88);
    display:flex; align-items:center; justify-content:center; padding:20px;
    opacity:0; pointer-events:none; transition:opacity .18s ease; cursor:zoom-out;
  }
  .hint-lightbox.open{opacity:1; pointer-events:auto;}
  .hint-lightbox img{max-width:100%; max-height:100%; border-radius:10px;}

  /* ---------- l'éditeur de modèles du back office ----------
     Même bloc que dans un projet : ce qui est écrit ici est recopié tel quel
     dans le projet de l'espace qui part de ce modèle. */
  #adminHintList{margin-top:8px;}
  #adminHintList .hint-img{max-height:220px;}
  /* Dans la fiche du back office, une indication se pose sur le même fond que
     les lignes de tâche : c'est une suite, pas deux listes. */
  #adminTaskList .hint{margin-bottom:8px;}

  /* Une ligne d'explication sous un libellé de la fiche du back office : elle
     dit ce que la zone attend, pour ne pas avoir à le deviner. */
  .admin-field-hint{
    margin:-2px 0 7px; font-size:11px; line-height:1.4; color:var(--ink-soft); font-style:italic;
  }

  /* Le titre d'une indication : court, il sert de repère dans une longue suite.
     Facultatif — beaucoup d'indications sont une phrase et n'en ont pas besoin. */
  .hint-titre{
    font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:3px; line-height:1.35;
  }