/* =========================================================
   BOARD — Étape 1 : le canvas
   ========================================================= */

/* Remise à zéro : on enlève les marges que le navigateur met par défaut. */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* overflow: hidden = pas de barres de défilement.
     On ne "scrolle" pas la page : on déplace la caméra nous-mêmes. */
  overflow: hidden;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* user-select: none = le texte ne se surligne pas en bleu quand on glisse. */
  user-select: none;
}


/* =========================================================
   LA VITRE — la fenêtre fixe. Elle ne bouge jamais.
   ========================================================= */

#vitre {
  position: fixed;
  inset: 0;                 /* raccourci pour top/right/bottom/left = 0 */
  background-color: #f7f7f7;
  cursor: grab;             /* la petite main ouverte */

  /* LE QUADRILLAGE
     Deux grilles superposées, comme dans Miro :
       - une fine tous les 20 px  (les petits carreaux)
       - une plus marquée tous les 100 px (les gros carreaux)

     Chaque grille = 2 dégradés : un pour les lignes horizontales,
     un pour les lignes verticales. Un dégradé qui passe d'une couleur
     à "transparent" en 1 px, ça dessine juste... une ligne de 1 px.

     C'est JavaScript qui ajustera background-size (le zoom) et
     background-position (le déplacement). */
  background-image:
    linear-gradient(rgba(0, 0, 0, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, .16) 1px, transparent 1px),
    linear-gradient(rgba(0, 0, 0, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, .05) 1px, transparent 1px);
}

/* Quand on est en train de glisser : la main se ferme. */
#vitre.en-deplacement {
  cursor: grabbing;
}


/* =========================================================
   LE MONDE — l'espace infini. C'est lui qu'on bouge.
   ========================================================= */

#monde {
  position: absolute;
  top: 0;
  left: 0;

  /* transform-origin: 0 0 = le point (0,0) du monde est le coin haut-gauche.
     C'EST IMPORTANT : sans ça, le zoom partirait du centre et tous nos
     calculs de position seraient faux. */
  transform-origin: 0 0;

  /* JavaScript écrira ici quelque chose comme :
     transform: translate(120px, -40px) scale(1.5) */
}


/* =========================================================
   LES POST-ITS
   Ils vivent DANS le monde : leurs position: absolute sont
   des coordonnées du monde, pas de l'écran. Ils zooment et
   se déplacent tout seuls avec la caméra.
   ========================================================= */

.postit {
  position: absolute;
  /* La taille est fixée par JavaScript : chaque post-it a la sienne
     depuis la 0.11.00 (voir appliquerGeometriePostit). */
  background: #fff9b1;              /* le jaune, par défaut */
  border-radius: 2px;
  box-shadow: 3px 4px 10px rgba(0, 0, 0, .18);
  font-size: 15px;
  line-height: 1.4;
  color: #1a1a1a;
  cursor: grab;
  word-break: break-word;
  /* Sans ça, le navigateur essaierait de faire son propre glisser-déposer. */
  -webkit-user-drag: none;
}

/* La zone de texte, à l'intérieur du post-it. On la sépare du post-it
   lui-même pour pouvoir y ajouter la palette sans écraser le texte. */
.postit .texte {
  width: 100%;
  height: 100%;
  padding: 14px;
  overflow: hidden;
  outline: none;              /* pas de contour bleu du navigateur */
}

/* =========================================================
   LES FORMES
   ---------------------------------------------------------
   Une forme n'est pas un nouveau type d'objet : c'est le même
   post-it, habillé différemment. Tout le comportement
   (déplacement, liens, couleurs…) reste identique.
   ========================================================= */

/* Le post-it classique : coins carrés, ombre portée — c'est le
   style défini plus haut, rien à ajouter. */

.postit.forme-rectangle {
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
}

.postit.forme-rond {
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
}

/* Le losange : on découpe un carré en reliant les 4 milieux. */
.postit.forme-losange {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  box-shadow: none;
}

/* Rond et losange rognent les coins : le texte doit rester au milieu
   et laisser de la marge, sinon il déborderait hors de la forme. */
.postit.forme-rond .texte,
.postit.forme-losange .texte {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 22%;
}

/* Les étiquettes n'ont pas leur place dans un losange. */
.postit.forme-losange .tags { display: none; }


/* ---------- Les couleurs (celles de Miro) ----------
   Elles servent aux post-its ET aux colonnes. */
.couleur-jaune  { background: #fff9b1; }
.couleur-vert   { background: #d5f692; }
.couleur-bleu   { background: #a6ccf5; }
.couleur-rose   { background: #ffcee0; }
.couleur-orange { background: #ffd599; }
.couleur-violet { background: #d0c4f7; }
.couleur-gris   { background: #e2e2e2; }

/* Pendant qu'on le déplace */
.postit.en-deplacement {
  cursor: grabbing;
  box-shadow: 6px 10px 22px rgba(0, 0, 0, .28);
  /* Il passe au-dessus des autres */
  z-index: 10;
}

/* Le post-it sélectionné (cliqué une fois) */
.postit.selectionne {
  outline: 3px solid #4a7ddb;
  outline-offset: 2px;
}

/* =========================================================
   LES LIENS (flèches)
   ---------------------------------------------------------
   Le calque SVG est dans le monde : il zoome et se déplace
   avec lui. overflow: visible pour que les traits puissent
   sortir de sa boîte de 1×1 pixel.
   ========================================================= */

#liens {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  z-index: 95;            /* devant les colonnes, derrière les post-its */
  pointer-events: none;   /* on ne bloque pas les clics… */
}

.lien {
  stroke: #444;
  stroke-width: 2.5;
  pointer-events: stroke; /* …sauf sur le trait lui-même */
  cursor: pointer;
}

.lien:hover { stroke: #4a7ddb; }

.lien.actif {
  stroke: #4a7ddb;
  stroke-width: 4;
}

.lien-provisoire {
  stroke: #4a7ddb;
  stroke-width: 2.5;
  stroke-dasharray: 7 5;
  pointer-events: none;
}


/* ---------- Les points d'accroche ---------- */

.accroche {
  position: absolute;
  width: 13px;
  height: 13px;
  background: #4a7ddb;
  border: 2px solid #fff;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .15s ease, transform .12s ease;
  cursor: crosshair;
  z-index: 5;
}

.postit:hover .accroche { opacity: 1; }
.accroche:hover { transform: scale(1.4); }

.accroche-haut   { top: -7px;  left: 50%; margin-left: -6.5px; }
.accroche-bas    { bottom: -7px; left: 50%; margin-left: -6.5px; }
.accroche-gauche { left: -7px;  top: 50%; margin-top: -6.5px; }
.accroche-droite { right: -7px; top: 50%; margin-top: -6.5px; }

/* Le post-it visé pendant qu'on tire une flèche */
.postit.cible-lien {
  outline: 3px dashed #4a7ddb;
  outline-offset: 3px;
}


/* La poignée pour redimensionner un post-it, en bas à droite.
   Elle n'apparaît qu'au survol, pour ne pas encombrer. */
.poignee-postit {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  opacity: 0;
  transition: opacity .15s ease;
  background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, .28) 50%);
}

.postit:hover .poignee-postit,
.postit.selectionne .poignee-postit {
  opacity: 1;
}

/* La colonne sélectionnée */
.frame.selectionne {
  box-shadow: 0 0 0 3px #4a7ddb;
}

/* Ses boutons restent visibles tant qu'elle est sélectionnée. */
.frame.selectionne .actions-frame {
  opacity: 1;
}

/* Le rectangle de sélection (Maj + glisser sur le fond).
   Il est en position fixe : ce sont des coordonnées d'écran,
   pas des coordonnées du monde. */
#rectangle-selection {
  position: fixed;
  border: 2px dashed #4a7ddb;
  background: rgba(74, 125, 219, .1);
  border-radius: 3px;
  pointer-events: none;
  z-index: 50;
}

/* Quand on écrit dedans */
.postit.en-edition {
  cursor: text;
  /* On réactive la sélection du texte, coupée sur le body */
  user-select: text;
}

/* Le texte gris affiché tant que le post-it est vide */
.postit .texte:empty::before {
  content: "Double-clic pour écrire";
  color: rgba(0, 0, 0, .3);
  font-style: italic;
}


/* =========================================================
   LA PALETTE DE COULEURS
   Elle est rangée DANS le post-it, juste au-dessus : elle le
   suit donc toute seule au déplacement et au zoom.
   ========================================================= */

.palette {
  position: absolute;
  top: -46px;
  left: 0;
  display: none;              /* cachée par défaut */
  gap: 5px;
  padding: 6px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .22);
}

/* Elle n'apparaît que sur le post-it sélectionné. */
.postit.selectionne .palette {
  display: flex;
}

.pastille {
  width: 26px;
  height: 26px;
  border: 2px solid rgba(0, 0, 0, .12);
  border-radius: 5px;
  cursor: pointer;
  padding: 0;
}

.pastille:hover {
  transform: scale(1.14);
  border-color: rgba(0, 0, 0, .4);
}

/* Le trait entre les couleurs et les formes, dans la palette */
.separateur-palette {
  width: 1px;
  background: #ddd;
  margin: 2px 3px;
}

.bouton-forme {
  width: 26px;
  height: 26px;
  border: 2px solid transparent;
  border-radius: 5px;
  background: #f2f2f2;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}

.bouton-forme:hover {
  background: #e2e2e2;
  border-color: rgba(0, 0, 0, .25);
}


/* =========================================================
   LES COLONNES (frames)
   ---------------------------------------------------------
   ⚠️ Les deux lignes les plus importantes du fichier :

   Une frame est un très grand rectangle. Si elle capturait
   les clics, on ne pourrait plus se déplacer sur le canvas
   ni poser de post-it par-dessus.
   → pointer-events: none    = les clics la traversent
   → pointer-events: auto    = sauf sur l'en-tête et la poignée
   ========================================================= */

.frame {
  position: absolute;
  border-radius: 10px;
  background: #e2e2e2;
  z-index: 0;                 /* derrière les post-its */
  pointer-events: none;       /* ← les clics passent au travers */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07);
}

.frame.en-deplacement {
  box-shadow: 0 8px 26px rgba(0, 0, 0, .22);
}

/* Les post-its passent devant TOUTES les colonnes.
   Les colonnes vont de 1 à 90 (voir rangerLesFrames). */
.postit {
  z-index: 100;
}

/* ---------- L'en-tête de la colonne ---------- */
.frame .entete {
  pointer-events: auto;       /* ← elle, en revanche, réagit */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  cursor: grab;
}

.frame.en-deplacement .entete {
  cursor: grabbing;
}

.titre-frame {
  font-size: 26px;
  font-weight: 800;
  font-style: italic;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  color: #1a1a1a;
  outline: none;
  flex: 1;
  text-align: center;
}

.titre-frame[contenteditable="true"] {
  background: rgba(255, 255, 255, .75);
  border-radius: 5px;
  text-decoration: none;
  cursor: text;
  user-select: text;
}

/* Les boutons 🎨 et ✕ : discrets, ils apparaissent au survol. */
.actions-frame {
  display: flex;
  gap: 3px;
  opacity: 0;
  transition: opacity .16s ease;
}

.frame:hover .actions-frame {
  opacity: 1;
}

.actions-frame button {
  border: none;
  background: rgba(255, 255, 255, .8);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
}

.actions-frame button:hover {
  background: #fff;
}

/* ---------- La poignée de redimensionnement ---------- */
.frame .poignee {
  pointer-events: auto;       /* ← elle aussi */
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24px;
  height: 24px;
  cursor: nwse-resize;
  border-radius: 0 0 10px 0;
  background:
    linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, .22) 50%);
}


/* =========================================================
   L'INTERFACE — par-dessus, toujours fixe
   ========================================================= */

#barre {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 4px;
  padding: 5px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .16);
}

#barre button {
  border: none;
  background: transparent;
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  font-family: inherit;
}

#barre button:hover {
  background: #eee;
}

#btn-zoom {
  min-width: 62px;
  font-variant-numeric: tabular-nums;  /* les chiffres ne "sautent" pas */
}

#aide {
  position: fixed;
  top: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px 9px 16px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .16);
  font-size: 12.5px;
  color: #555;
}

#aide b {
  color: #111;
  font-size: 15px;
}

/* Le numéro de version, à côté du titre.
   Règle : majeure.mineure.correctif — voir 02_VERSIONS.md */
#aide .version {
  display: inline-block;
  padding: 1px 7px;
  background: #e8e8e8;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 700;
  color: #777;
}


/* =========================================================
   LE SÉLECTEUR DE TABLEAU
   ========================================================= */

#tableau-courant {
  border: none;
  background: #171717;
  color: #fff;
  padding: 5px 12px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#tableau-courant:hover { background: #3b3b3b; }

#menu-tableaux {
  position: fixed;
  top: 62px;
  left: 20px;
  min-width: 230px;
  max-height: 62vh;
  overflow-y: auto;
  padding: 6px;
  background: #fff;
  border-radius: 11px;
  box-shadow: 0 5px 24px rgba(0, 0, 0, .22);
  z-index: 200;
}

.ligne-tableau {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  color: #333;
  cursor: pointer;
}

.ligne-tableau:hover { background: #f0f0f0; }

.ligne-tableau.actif {
  background: #eef3fd;
  color: #1d4ed8;
  font-weight: 700;
}

.ligne-tableau.action {
  font-size: 12px;
  color: #666;
  font-weight: 600;
}

.ligne-tableau.danger { color: #dc2626; }

#menu-tableaux .separateur {
  height: 1px;
  background: #eee;
  margin: 6px 4px;
}

/* Le voyant « ✓ Enregistré » : invisible par défaut, il apparaît
   une seconde et demie à chaque sauvegarde. */
#voyant {
  position: fixed;
  bottom: 26px;
  left: 20px;
  padding: 7px 14px;
  background: #1f9d55;
  color: #fff;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}

#voyant.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Les trois couleurs du voyant :
   vert = enregistré sur le serveur · orange = hors ligne · rouge = mot de passe */
#voyant.vert   { background: #1f9d55; }
#voyant.orange { background: #d97706; }
#voyant.rouge  { background: #dc2626; }


/* =========================================================
   LA PILE DE POST-ITS
   ========================================================= */

#pile {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border-radius: 12px;
  padding: 14px 14px 11px;
  box-shadow: 0 3px 16px rgba(0, 0, 0, .16);
}

/* La feuille du dessus — celle qu'on attrape.
   Les ::before et ::after dessinent les feuilles en dessous,
   ce qui donne l'illusion d'une pile. */
#pile-feuille {
  position: relative;
  width: 108px;
  height: 108px;
  border-radius: 3px;
  box-shadow: 2px 3px 8px rgba(0, 0, 0, .2);
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(0, 0, 0, .42);
  transition: transform .13s ease;
}

#pile-feuille::before,
#pile-feuille::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  border-radius: 3px;
  z-index: -1;
  box-shadow: 1px 2px 5px rgba(0, 0, 0, .16);
}

#pile-feuille::before { transform: translate(4px, 4px)  rotate(1.4deg); }
#pile-feuille::after  { transform: translate(8px, 8px)  rotate(2.6deg); }

#pile-feuille:hover  { transform: translateY(-3px) rotate(-1.2deg); }
#pile-feuille:active { cursor: grabbing; }

#pile-feuille span { pointer-events: none; }

/* Les pastilles pour choisir la couleur des notes */
#pile-couleurs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 11px;
}

.pastille-pile {
  height: 18px;
  border: 2px solid rgba(0, 0, 0, .1);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
}

.pastille-pile:hover { border-color: rgba(0, 0, 0, .35); }
.pastille-pile.active { border-color: #1a1a1a; }


/* =========================================================
   LES ÉTIQUETTES
   ========================================================= */

/* Elles s'empilent en bas du post-it. */
.postit .tags {
  position: absolute;
  left: 10px;
  bottom: 9px;
  right: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.postit .tag {
  background: #4a7ddb;
  color: #fff;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .4px;
  cursor: pointer;
}

.postit .tag:hover {
  background: #dc2626;        /* rouge = clic pour retirer */
}

/* Le texte laisse la place aux étiquettes. */
.postit .texte {
  padding-bottom: 34px;
}

/* Un post-it masqué par le filtre ou la recherche : estompé, pas
   effacé. On garde ainsi le contexte du tableau. */
.postit.estompe {
  opacity: .16;
  pointer-events: none;
}

/* Un post-it qui correspond à la recherche */
.postit.trouve {
  box-shadow: 0 0 0 3px #f59e0b, 3px 4px 10px rgba(0, 0, 0, .18);
}


/* =========================================================
   LA BARRE DE RECHERCHE
   ========================================================= */

#recherche {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-14px);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px 9px 15px;
  background: #fff;
  border-radius: 11px;
  box-shadow: 0 3px 18px rgba(0, 0, 0, .2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 150;
}

#recherche.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

#recherche .loupe { font-size: 14px; }

#champ-recherche {
  border: none;
  outline: none;
  font-size: 14px;
  font-family: inherit;
  width: 260px;
  color: #1a1a1a;
}

#compteur-recherche {
  font-size: 11.5px;
  font-weight: 700;
  color: #999;
  min-width: 62px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#btn-fermer-recherche {
  border: none;
  background: #f0f0f0;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 12px;
  color: #666;
}

#btn-fermer-recherche:hover { background: #e0e0e0; }


/* =========================================================
   LE MENU AU CLIC DROIT
   ========================================================= */

.menu-contextuel {
  position: fixed;
  min-width: 226px;
  max-height: 84vh;
  overflow-y: auto;
  padding: 5px;
  background: #fff;
  border-radius: 11px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, .26);
  z-index: 300;
  font-size: 13px;
}

.menu-titre {
  padding: 8px 11px 5px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: #aaa;
}

.menu-separateur {
  height: 1px;
  background: #eee;
  margin: 4px 6px;
}

.menu-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  padding: 7px 11px;
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  color: #262626;
  cursor: pointer;
}

.menu-ligne:hover { background: #f0f4fc; }

.menu-ligne.danger { color: #dc2626; }
.menu-ligne.danger:hover { background: #fef2f2; }

/* Le rappel du raccourci clavier, à droite */
.menu-ligne em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  color: #bbb;
  white-space: nowrap;
}

/* La pastille de couleur dans le menu d'une colonne */
.pastille-menu {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, .16);
  vertical-align: -2px;
  margin-right: 5px;
}


/* ---------- La barre de filtre ---------- */

#filtres {
  position: fixed;
  top: 20px;
  right: 20px;
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 46vw;
  padding: 9px 12px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .16);
}

#filtres.visible { display: flex; }

.filtres-titre {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #999;
  margin-right: 3px;
}

.filtre {
  border: none;
  background: #eee;
  color: #444;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.filtre:hover { background: #ddd; }

.filtre.actif {
  background: #4a7ddb;
  color: #fff;
}

.filtre.effacer {
  background: transparent;
  color: #999;
}