/* ============================================================
   LE PLAN D'IMPLANTATION — l'habillage, une seule fois
   2026-09-01

   Charge par studio.html ET par mon-studio.html, parce que le meme
   plan s'affiche aux deux endroits.
     .plan-editeur  → ce qu'Anna modifie, dans sa fiche comme dans
                      le Repaire de la cliente
     .mon-plan-*    → ce que la cliente lit

   ⛔ Tout est enferme sous ces deux prefixes. Les classes du chantier
   (.chantier-*, .etape-fiche) servent AUSSI a ce que les clientes
   voient : sans cette cloture, retoucher le plan repeindrait leur ecran.
   ⛔ Ne pas recopier ces regles dans studio.css ou cliente.css.
   ============================================================ */

/* ------------------------------------------------------------
   SON PLAN D'IMPLANTATION — 5e onglet de la fiche, 2026-09-01
   ⚠️ Tout est enfermé dans .plan-editeur. Les classes du chantier
   (.chantier-*, .etape-fiche) servent AUSSI à ce que les clientes
   voient : sans cette clôture, retoucher le plan repeindrait leur
   écran. Même précaution que le tableau des tâches.
   ------------------------------------------------------------ */
/* ⚡⚡ LA QUATRIEME COULEUR — 2026-09-22
   Les trois de la marque etaient prises : lilas = nous, turquoise = elle,
   peche = ce qui bloque la suite. Anna voulait « un encadre de couleur AUTRE »
   pour dire ou c'est rendu, alors le miel entre, et SEULEMENT pour ca.
   ⛔ Ne pas s'en servir ailleurs : une couleur qui veut dire deux choses ne
   veut plus rien dire. ⚠️ Le texte prend le miel FONCE, pas le miel : le doré
   sur fond clair ne se lit pas en petites capitales.
   ⚠️ Defini ici parce que plan.css est charge par les DEUX pages (studio et
   Repaire de la cliente) et qu'il ne doit rien demander a leur palette. */
:root{ --miel:#c9922b; --miel-clair:#eccf95; --miel-voile:#fdf4e3; --miel-fonce:#8f6712; }

.plan-editeur{ padding:22px 24px; }
.plan-editeur .plan-tete{ display:flex; align-items:baseline; gap:12px; }
.plan-editeur .plan-tete h2{ margin:0; flex:1; }
.plan-editeur .plan-etat{ font-size:.82rem; color:var(--encre-doux); }
.plan-editeur .plan-chapeau{
  margin:8px 0 0; color:var(--encre-doux); max-width:62ch; font-size:.95rem;
}

/* ---- ce qui se modifie sur place ---- */
.plan-editeur [data-plan-ed]{
  border-radius:7px; outline:none; transition:background .15s, box-shadow .15s;
}
.plan-editeur [data-plan-ed]:hover{ background:var(--lilas-voile); }
.plan-editeur [data-plan-ed]:focus{
  background:var(--blanc);
  box-shadow:0 0 0 2px var(--lilas-clair), 0 0 0 5px var(--lilas-voile);
}
.plan-editeur [data-plan-ed]:empty::before{
  content:attr(data-vide); color:var(--encre-doux); opacity:.6; font-style:italic;
}

/* ---- la jauge ---- */
.plan-editeur .plan-jauge{ margin:18px 0 6px; }
.plan-editeur .plan-jauge-ligne{
  display:flex; align-items:baseline; gap:10px; margin-bottom:7px;
}
.plan-editeur .plan-jauge-ligne b{
  font-size:1.2rem; font-variant-numeric:tabular-nums;
}
.plan-editeur .plan-jauge-ligne b span{ font-weight:400; color:var(--encre-doux); font-size:.9rem; }
.plan-editeur .plan-jauge-ligne .mot{ color:var(--encre-doux); font-size:.9rem; }

/* ---- UN SUJET = UN ENCADRE ----
   Anna, 2026-09-03 : « met ensemble dans UN encadre chaque sujet ».
   ⛔ L'etape n'a plus de carton a elle : c'est le sujet qui est la boite,
   les etapes sont des lignes dedans, separees par un filet. Quarante-six
   cartons empiles, on n'en venait pas a voir. */
.plan-editeur .plan-phase{
  margin-top:16px; background:var(--blanc); border:1px solid var(--bordure);
  border-radius:16px; padding:14px 17px; box-shadow:0 6px 18px rgba(157,123,245,.06);
}
.plan-editeur .plan-phase.finie{ background:var(--creme); }
.plan-editeur .plan-phase-tete{ display:flex; gap:12px; align-items:flex-start; }
.plan-editeur .plan-phase-mots{ flex:1; min-width:0; }
.plan-editeur .plan-rang{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; background:var(--lilas-voile);
  color:var(--lilas); border:1px solid var(--lilas-clair);
  font-weight:700; font-size:.85rem; font-variant-numeric:tabular-nums;
}
/* ⚡ 2026-09-22, Anna : « enleve ces petits mots-la » (Avant / Jour 1 /
   Ensuite / Plus tard). Le champ reste en base (phases.q), juste plus
   affiche : une phase deja creee garde son "quand" si on le remet un jour. */
.plan-editeur .plan-quand{ display:none; }
.plan-editeur .plan-phase h3{ margin:1px 0 0; font-size:1.08rem; line-height:1.25; }
/* Le compte du sujet : combien de faites sur combien, sans avoir a les compter. */
.plan-editeur .plan-phase-compte{
  flex:0 0 auto; font-size:.78rem; color:var(--encre-doux); background:var(--creme);
  border:1px solid var(--bordure); border-radius:var(--pilule); padding:3px 10px;
  white-space:nowrap; font-variant-numeric:tabular-nums; margin-top:3px;
}
.plan-editeur .plan-phase-compte i{ font-style:normal; opacity:.6; }
.plan-editeur .plan-sous{
  margin:7px 0 10px 42px; color:var(--encre-doux); font-size:.88rem; max-width:60ch;
}

/* ---- une etape : une ligne, plus un carton ---- */
.plan-editeur .plan-liste{ list-style:none; margin:0 0 0 42px; padding:0; }
.plan-editeur .plan-item{
  padding:8px 0; display:flex; gap:10px; align-items:flex-start;
  border-top:1px solid var(--bordure); transition:opacity .2s;
}
.plan-editeur .plan-item:first-child{ border-top:0; }
/* ⚡ Ce qui bloque la suite se repere au filet peche, comme avant. */
.plan-editeur .plan-item.cle{
  border-left:3px solid var(--peche); padding-left:10px; margin-left:-13px;
  border-radius:3px;
}
/* ⚡ Le flash quand on arrive depuis « À régler en premier », 2026-09-04. */
.plan-editeur .plan-item.plan-item-vise{
  animation:plan-vise 1.6s ease-out; border-radius:8px;
}
@keyframes plan-vise{
  0%, 35%{ background:var(--peche-voile); }
  100%{ background:transparent; }
}
.plan-editeur .plan-item.fini{ opacity:.5; }
.plan-editeur .plan-item.fini .plan-titre{ text-decoration:line-through; }
.plan-editeur .plan-coche{ flex:0 0 auto; margin-top:1px; cursor:pointer; }
.plan-editeur .plan-coche input{ position:absolute; opacity:0; width:0; height:0; }
.plan-editeur .plan-coche .rond{
  display:block; width:20px; height:20px; border-radius:7px;
  border:2px solid var(--lilas-clair); background:var(--blanc);
  position:relative; transition:background .15s, border-color .15s;
}
.plan-editeur .plan-coche input:checked + .rond{
  background:var(--turquoise); border-color:var(--turquoise);
}
.plan-editeur .plan-coche input:checked + .rond::after{
  content:""; position:absolute; left:6px; top:2px; width:4px; height:9px;
  border:solid var(--blanc); border-width:0 2.5px 2.5px 0; transform:rotate(42deg);
}
.plan-editeur .plan-coche input:focus-visible + .rond{
  outline:2px solid var(--lilas); outline-offset:2px;
}
.plan-editeur .plan-corps{ flex:1; min-width:0; }
.plan-editeur .plan-titre{ display:block; font-weight:600; font-size:1.05rem; }
.plan-editeur .plan-note{
  display:block; margin-top:2px; color:var(--encre-doux); font-size:.86rem;
}
.plan-editeur .plan-puces{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.plan-editeur .plan-puce{
  font:inherit; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  font-weight:700; padding:4px 10px; border-radius:999px; cursor:pointer;
  border:1px solid transparent; background:var(--lilas-voile); color:var(--lilas);
}
.plan-editeur .plan-puce.cliente{ background:var(--turquoise-voile); color:var(--turquoise-fonce); }
.plan-editeur .plan-puce.cle{ background:var(--peche-voile); color:var(--peche); }
.plan-editeur .plan-puce.eteinte{
  background:transparent; border-color:var(--bordure); color:var(--encre-doux); opacity:.55;
}
.plan-editeur .plan-puce.eteinte:hover{ opacity:1; }
.plan-editeur .plan-puce:focus-visible{ outline:2px solid var(--lilas); outline-offset:2px; }

/* ---- deplacer une etape dans un autre encadre ----
   ⚡ Discret tant qu'on ne survole pas la ligne : quarante-six menus visibles
   d'un coup, c'est le desordre qu'on vient justement d'enlever. */
.plan-editeur .plan-deplacer{
  flex:0 0 auto; font:inherit; font-size:.75rem; color:var(--encre-doux);
  border:1px solid var(--bordure); background:var(--blanc); border-radius:var(--pilule);
  padding:3px 8px; max-width:150px; margin-top:2px; cursor:pointer;
  opacity:0; transition:opacity .15s;
}
.plan-editeur .plan-item:hover .plan-deplacer,
.plan-editeur .plan-deplacer:focus{ opacity:1; }
@media (hover:none){ .plan-editeur .plan-deplacer{ opacity:1; } }

/* ---- A REGLER EN PREMIER ----
   Anna, 2026-09-03 : « met les priorites en haut aussi ».
   ⚠️ Cette liste ne se tient pas a la main : elle se refait a chaque dessin
   a partir des etapes marquees « bloque la suite ». */
.plan-editeur .plan-priorites{
  margin-top:16px; background:var(--peche-voile); border:1px solid #f6c9ae;
  border-radius:16px; padding:14px 17px;
}
.plan-editeur .plan-priorites-tete{ display:flex; align-items:center; gap:10px; }
.plan-editeur .plan-priorites-tete h3{ margin:0; flex:1; font-size:1.03rem; }
.plan-editeur .plan-priorites-compte{
  background:var(--peche); color:var(--blanc); font-size:.72rem; font-weight:700;
  padding:2px 9px; border-radius:var(--pilule); font-variant-numeric:tabular-nums;
}
.plan-editeur .plan-priorites-mot{
  margin:6px 0 10px; color:#a3552c; font-size:.87rem; max-width:62ch;
}
.plan-editeur .plan-priorites ul{ list-style:none; margin:0; padding:0; }
.plan-editeur .plan-priorites li{
  display:flex; gap:10px; align-items:flex-start; padding:8px 0;
  border-top:1px solid #f6d9c6;
}
.plan-editeur .plan-priorites li:first-child{ border-top:0; }
.plan-editeur .plan-prio-corps{
  flex:1; min-width:0; text-align:left; font:inherit; color:inherit;
  background:none; border:0; padding:0; cursor:pointer; border-radius:6px;
}
.plan-editeur .plan-prio-corps:hover .plan-prio-nom{ text-decoration:underline; }
.plan-editeur .plan-prio-corps:focus-visible{ outline:2px solid var(--peche); outline-offset:2px; }
.plan-editeur .plan-prio-nom{ display:block; font-weight:500; }
.plan-editeur .plan-prio-ou{ display:block; font-size:.79rem; color:#a3552c; }
.plan-editeur .plan-prio-retirer{
  flex:0 0 auto; font:inherit; font-size:.66rem; letter-spacing:.05em;
  text-transform:uppercase; font-weight:700; color:var(--peche);
  border:1px solid #f6c9ae; background:var(--blanc); padding:4px 9px;
  border-radius:var(--pilule); cursor:pointer; margin-top:2px;
}
.plan-editeur .plan-prio-retirer:hover{ background:var(--peche); color:var(--blanc); }
.plan-editeur .plan-prio-retirer:focus-visible{ outline:2px solid var(--peche); outline-offset:2px; }

/* ---- retirer, en deux clics ---- */
.plan-editeur .plan-retirer{
  flex:0 0 auto; border:0; background:none; color:var(--bordure);
  font:inherit; font-size:1.1rem; line-height:1; padding:3px 7px;
  border-radius:8px; cursor:pointer; transition:color .15s, background .15s;
}
.plan-editeur .plan-item:hover .plan-retirer,
.plan-editeur .plan-phase-tete:hover .plan-retirer,
.plan-editeur .plan-encadre:hover .plan-retirer,
.plan-editeur .plan-retirer:focus-visible{ color:var(--encre-doux); }
.plan-editeur .plan-retirer:hover{ color:var(--peche); background:var(--peche-voile); }
.plan-editeur .plan-retirer.arme{
  color:#fff; background:var(--peche); font-size:.7rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; padding:5px 10px;
}

/* ---- ajouter ---- */
.plan-editeur .plan-ajout{
  margin:10px 0 0 42px; display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}
.plan-editeur .plan-encadre .plan-ajout{ margin-left:0; }
.plan-editeur .plan-ajout input[type=text]{
  flex:1; min-width:190px; font:inherit; font-size:.9rem; padding:9px 12px;
  border:1px dashed var(--lilas-clair); border-radius:12px;
  background:transparent; color:var(--encre);
}
.plan-editeur .plan-ajout input:focus{ outline:2px solid var(--lilas); outline-offset:1px; }
.plan-editeur .plan-ajout select{
  font:inherit; font-size:.86rem; padding:8px 10px; border-radius:12px;
  border:1px solid var(--bordure); background:var(--blanc); color:var(--encre);
}
.plan-editeur .plan-grands{ margin-top:26px; display:flex; gap:9px; flex-wrap:wrap; }

/* ---- les encadrés ---- */
.plan-editeur .plan-encadre{
  margin-top:20px; background:var(--lilas-voile); border:1px solid var(--bordure);
  border-radius:14px; padding:13px 16px;
}
.plan-editeur .plan-encadre-tete{ display:flex; gap:10px; align-items:flex-start; }
.plan-editeur .plan-encadre h3{ margin:0 0 10px; flex:1; font-size:1.03rem; }
.plan-editeur .plan-encadre ul{
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;
}
.plan-editeur .plan-encadre li{ display:flex; gap:9px; align-items:flex-start; }
.plan-editeur .plan-ligne-corps{ flex:1; min-width:0; color:var(--encre-doux); font-size:.92rem; }
.plan-editeur .plan-ligne-corps b{ color:var(--encre); }

/* ---- départ et pied ---- */
.plan-editeur .plan-depart{ padding:10px 0; }
.plan-editeur .plan-depart h2{ margin:0 0 8px; }
.plan-editeur .plan-depart p{ color:var(--encre-doux); max-width:60ch; }
.plan-editeur .plan-alerte{ color:var(--peche); font-weight:500; }
.plan-editeur .plan-pied{
  margin-top:26px; font-size:.82rem; color:var(--encre-doux); max-width:70ch;
}
@media (max-width:700px){
  .plan-editeur{ padding:18px 15px; }
  .plan-editeur .plan-liste,
  .plan-editeur .plan-ajout,
  .plan-editeur .plan-sous{ margin-left:0; }
  /* ⚠️ Sur un telephone, le menu « deplacer vers » et le × ne tiennent plus
     sur la meme ligne que le titre : ils passent en dessous plutot que de
     serrer le texte a trois mots par ligne. */
  .plan-editeur .plan-phase{ padding:13px 14px; }
  /* ⚠️ La coche reste COLLEE a son etape : elle seule sur une ligne, on ne
     sait plus ce qu'on coche. C'est le menu « deplacer vers » qui descend. */
  .plan-editeur .plan-item{ flex-wrap:wrap; }
  .plan-editeur .plan-corps{ flex:1 1 60%; }
  .plan-editeur .plan-deplacer{ flex:1 1 100%; max-width:none; margin:7px 0 0 30px; }
  /* ⚠️ Le × tombait seul sur une troisieme ligne sous chaque etape. Il
     retourne en haut a droite de SA ligne, la ou on le cherche. */
  .plan-editeur .plan-item{ position:relative; padding-right:22px; }
  .plan-editeur .plan-item > .plan-retirer{ position:absolute; top:5px; right:-4px; }
  /* ⚠️ Et le titre du sujet garde sa largeur : entre la pastille du rang, le
     compte et le ×, il tombait a trois mots par ligne. Le compte descend. */
  .plan-editeur .plan-phase-tete{ flex-wrap:wrap; }
  .plan-editeur .plan-phase-mots{ flex:1 1 60%; }
  .plan-editeur .plan-phase-compte{ order:4; margin:7px 0 0 42px; }
  .plan-editeur .plan-item.cle{ margin-left:-10px; padding-left:7px; }
  .plan-editeur .plan-priorites{ padding:13px 14px; }
  .plan-editeur .plan-priorites li{ flex-wrap:wrap; }
  /* Meme regle qu'en bas : la coche ne se detache jamais de son etape. */
  .plan-editeur .plan-prio-corps{ flex:1 1 60%; }
  .plan-editeur .plan-prio-retirer{ flex:0 0 auto; margin:7px 0 0 30px; }
  .plan-editeur .plan-outils summary{ padding:11px 14px; flex-wrap:wrap; }
  .plan-editeur .plan-outils-apercu{ flex:1 1 100%; }
  .plan-editeur .plan-outils-dedans{ padding:0 14px 11px; }
}


/* ------------------------------------------------------------
   MON PLAN — l'écran de la cliente, 2026-09-01
   Elle le lit, elle ne l'écrit pas. Rien ici n'est cliquable, et
   ça doit se voir : pas de bouton, pas de case à cocher creuse.
   ⚠️ Tout est prefixe .mon-plan-. Les classes du chantier servent
   ailleurs dans son portail.
   ------------------------------------------------------------ */
.mon-plan-phase{ margin-bottom:16px; }
.mon-plan-phase.finie{ background:var(--creme); }
/* ⚡ Le rappel de ce qui bloque, en haut, chez elle aussi. ⛔ Rien de cliquable. */
.mon-plan-prio{ margin-bottom:16px; border-color:#f6c9ae; background:var(--peche-voile); }
.mon-plan-prio h2{ margin:0; }
.mon-plan-prio .mon-plan-sous{ margin-left:0; color:#a3552c; }
.mon-plan-prio .mon-plan-liste{ margin-left:0; }
.mon-plan-compte{
  flex:0 0 auto; font-size:.78rem; color:var(--encre-doux); background:var(--creme);
  border:1px solid var(--bordure); border-radius:var(--pilule); padding:3px 10px;
  white-space:nowrap; font-variant-numeric:tabular-nums; margin-top:3px;
}
.mon-plan-compte i{ font-style:normal; opacity:.6; }
.mon-plan-tete{ display:flex; gap:12px; align-items:flex-start; }
.mon-plan-tete h2{ margin:2px 0 0; }
.mon-plan-rang{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; background:var(--lilas-voile);
  color:var(--lilas); border:1px solid var(--lilas-clair);
  font-weight:700; font-size:.88rem; font-variant-numeric:tabular-nums;
}
.mon-plan-quand{ display:none; }
.mon-plan-sous{
  margin:6px 0 9px 44px; color:var(--encre-doux); font-size:.93rem; max-width:62ch;
}
/* ⛔ Chez elle non plus, une etape n'est plus un carton : la carte du sujet
   est deja la boite. Meme geste que dans l'ecran d'Anna, 2026-09-03. */
.mon-plan-liste{ list-style:none; margin:0 0 0 44px; padding:0; }
.mon-plan-item{
  display:flex; gap:9px; align-items:flex-start; padding:8px 0;
  border-top:1px solid var(--bordure);
}
.mon-plan-item:first-child{ border-top:0; }
.mon-plan-item.cle{ border-left:3px solid var(--peche); padding-left:10px;
  margin-left:-13px; border-radius:3px; }
.mon-plan-item.fini{ opacity:.55; }
.mon-plan-item.fini .nom{ text-decoration:line-through; }
.mon-plan-item .rond{
  flex:0 0 auto; width:19px; height:19px; border-radius:6px; margin-top:2px;
  border:2px solid var(--lilas-clair); background:var(--blanc); position:relative;
}
.mon-plan-item .rond.coche{ background:var(--turquoise); border-color:var(--turquoise); }
.mon-plan-item .rond.coche::after{
  content:""; position:absolute; left:5px; top:1px; width:4px; height:9px;
  border:solid var(--blanc); border-width:0 2.5px 2.5px 0; transform:rotate(42deg);
}
.mon-plan-corps{ flex:1; min-width:0; }
.mon-plan-corps .nom{ display:block; font-weight:500; }
.mon-plan-corps .mot{
  display:block; margin-top:2px; color:var(--encre-doux); font-size:.87rem;
}
.mon-plan-puces{ display:flex; gap:6px; flex-wrap:wrap; margin-top:7px; }
.mon-plan-puce{
  font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
  padding:4px 10px; border-radius:var(--pilule);
  background:var(--lilas-voile); color:var(--lilas);
}
.mon-plan-puce.toi{ background:var(--turquoise-voile); color:var(--turquoise-fonce); }
.mon-plan-puce.cle{ background:var(--peche-voile); color:var(--peche); }
.mon-plan-encadre ul{
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;
}
.mon-plan-encadre li{ color:var(--encre-doux); padding-left:20px; position:relative; }
.mon-plan-encadre li::before{
  content:"✦"; color:var(--lilas); position:absolute; left:0; top:0;
}
.mon-plan-encadre li b{ color:var(--encre); }
.mon-plan-pied{
  margin:22px 0 0; color:var(--encre-doux); font-size:.88rem; max-width:70ch;
}
@media (max-width:700px){
  .mon-plan-liste, .mon-plan-sous{ margin-left:0; }
}

/* ---- qui s'en occupe : un choix, plus une bascule (2026-09-01) ----
   ⚠️ C'est un <select> deguise en pastille. On enleve l'apparence du
   navigateur, sinon il arrive avec sa fleche grise et son cadre carre au
   milieu des pastilles rondes. */
.plan-editeur .plan-qui{
  appearance:none; -webkit-appearance:none;
  border:1px solid transparent; cursor:pointer;
  padding-right:24px;
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%),
                   linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:calc(100% - 13px) 52%, calc(100% - 9px) 52%;
  background-size:4px 4px, 4px 4px;
  background-repeat:no-repeat;
}
.plan-editeur .plan-qui.personne{ background-color:var(--lilas-voile); color:var(--lilas); }
.plan-editeur .plan-qui.nous{
  background-color:var(--voile, #f6f1fb); color:var(--encre-doux);
}
.plan-editeur .plan-qui.cliente{
  background-color:var(--turquoise-voile); color:var(--turquoise-fonce);
}
.plan-editeur .plan-qui option{
  font-size:.9rem; letter-spacing:normal; text-transform:none;
  color:var(--encre); background:var(--blanc);
}
.plan-editeur .plan-qui:focus-visible{ outline:2px solid var(--lilas); outline-offset:2px; }

/* ---- le fil de notes d'une etape (2026-09-01) ----
   Anna : « la note doit etre dans un petit encadre de couleur », et « ca peut
   allonger l'encadre je m'en fous ».
   ⛔ Rien n'est replie : une note qu'il faut deplier n'est pas lue.
   ⚡ La couleur dit QUI a ecrit. Lilas de notre cote, turquoise du sien : les
   memes deux couleurs que les pastilles « qui s'en occupe », pour qu'on n'ait
   pas deux codes de couleur a retenir. */
.plan-editeur .plan-notes{
  display:flex; flex-direction:column; gap:7px; margin-top:10px;
}
.plan-editeur .plan-note-bulle{
  border-radius:12px; padding:9px 12px; border-left:3px solid transparent;
}
.plan-editeur .plan-note-bulle.denous{
  background:var(--blanc); border-left-color:var(--lilas);
}
.plan-editeur .plan-note-bulle.delle{
  background:var(--blanc); border-left-color:var(--turquoise);
}
.plan-editeur .plan-note-tete{
  display:flex; align-items:center; gap:8px; margin-bottom:3px;
  font-size:.7rem; letter-spacing:.05em; text-transform:uppercase;
}
.plan-editeur .plan-note-bulle.denous .plan-note-tete b{ color:var(--lilas); }
.plan-editeur .plan-note-bulle.delle .plan-note-tete b{ color:var(--turquoise-fonce); }
.plan-editeur .plan-note-tete span{
  color:var(--encre-doux); text-transform:none; letter-spacing:normal;
  font-size:.74rem; font-weight:400;
}
.plan-editeur .plan-note-x{
  margin-left:auto; border:0; background:none; cursor:pointer;
  color:var(--encre-doux); font-size:1rem; line-height:1;
  padding:1px 5px; border-radius:6px; opacity:.45;
}
.plan-editeur .plan-note-bulle:hover .plan-note-x{ opacity:1; }
.plan-editeur .plan-note-x:hover{ color:var(--peche); background:var(--peche-voile); }
.plan-editeur .plan-note-x:focus-visible{ outline:2px solid var(--peche); outline-offset:1px; }
.plan-editeur .plan-note-mot{
  font-size:.9rem; color:var(--encre); white-space:pre-wrap; word-break:break-word;
}

/* ⚡ 2026-09-22 — cocher une note comme une liste de taches.
   Anna : « quand je met des notes, je veux pouvoir cocher ».
   ⛔ La case est PLUS PETITE que celle de l'etape (14px contre 20) : une note
   reglee n'est pas une etape finie, et l'oeil doit garder la hierarchie.
   ⚡ Cochee, la note ne disparait pas et ne se replie pas — elle palit et se
   barre. La regle d'Anna du 2026-09-03 tient : une note ecrite reste lisible. */
.plan-editeur .plan-note-coche{ flex:0 0 auto; display:flex; cursor:pointer; }
.plan-editeur .plan-note-coche input{ position:absolute; opacity:0; width:0; height:0; }
.plan-editeur .plan-note-coche .rond{
  display:block; width:14px; height:14px; border-radius:5px;
  border:2px solid var(--lilas-clair); background:var(--blanc);
  position:relative; transition:background .15s, border-color .15s;
}
.plan-editeur .plan-note-bulle.delle .plan-note-coche .rond{
  border-color:var(--turquoise);
}
.plan-editeur .plan-note-coche input:checked + .rond{
  background:var(--turquoise); border-color:var(--turquoise);
}
.plan-editeur .plan-note-coche input:checked + .rond::after{
  content:""; position:absolute; left:4px; top:1px; width:3px; height:6px;
  border:solid var(--blanc); border-width:0 2px 2px 0; transform:rotate(42deg);
}
.plan-editeur .plan-note-coche input:focus-visible + .rond{
  outline:2px solid var(--lilas); outline-offset:2px;
}
.plan-editeur .plan-note-bulle.faite{ opacity:.62; }
.plan-editeur .plan-note-bulle.faite .plan-note-mot{
  text-decoration:line-through; text-decoration-thickness:1px;
  color:var(--encre-doux);
}
/* ⚠️ Une note reglee reste lisible au survol : sinon on ne relit plus ce
   qu'on vient de cocher, et c'est souvent la qu'on verifie. */
.plan-editeur .plan-note-bulle.faite:hover,
.plan-editeur .plan-note-bulle.faite:focus-within{ opacity:1; }
.plan-editeur .plan-note-ajout{ margin-top:6px; }
.plan-editeur .plan-note-ajout summary{
  display:inline-block; list-style:none; cursor:pointer; font-size:.7rem;
  letter-spacing:.05em; text-transform:uppercase; font-weight:700;
  color:var(--encre-doux); border:1px dashed var(--bordure);
  border-radius:var(--pilule); padding:3px 10px;
}
.plan-editeur .plan-note-ajout summary::-webkit-details-marker{ display:none; }
.plan-editeur .plan-note-ajout summary:hover{ color:var(--lilas); border-color:var(--lilas-clair); }
.plan-editeur .plan-note-ajout summary:focus-visible{ outline:2px solid var(--lilas); outline-offset:2px; }
.plan-editeur .plan-note-ajout[open] summary{ margin-bottom:7px; }
.plan-editeur .plan-note-ajout-champs{
  display:flex; gap:7px; align-items:center; flex-wrap:wrap;
}
.plan-editeur .plan-note-ajout input{
  flex:1; min-width:0; font:inherit; font-size:.88rem; padding:7px 11px;
  border:1px dashed var(--bordure); border-radius:11px;
  background:transparent; color:var(--encre);
}
.plan-editeur .plan-note-ajout input:focus{
  outline:2px solid var(--lilas); outline-offset:1px; border-style:solid;
}

/* ---- OU C'EST RENDU (2026-09-22) ----
   Anna : « je veux un encadre de couleur AUTRE que j'ajoute [...] j'aimerais
   noter ou j'en suis rendue avec cette partie ».
   ⛔ UN SEUL par etape, et il se reecrit : c'est un etat, pas un fil. Il se
   place AU-DESSUS des notes — ou c'est rendu se lit avant ce qui s'est dit.
   ⚡ Ferme, il n'est qu'un petit bouton en pointille : sans etat ecrit, une
   etape ne doit pas etre plus haute qu'avant. */
.plan-editeur .plan-rendu{
  margin-top:10px; border-radius:9px; padding:9px 12px;
  background:var(--blanc); border-left:3px solid var(--miel);
}
/* ⚡⚡ 2026-09-22 — le titre grossit, le journal se regroupe.
   Anna : « j'ai de la misere a voir la tache principale, je cherche avec les
   yeux ». Le titre (ci-dessus) devient la chose la plus grosse de la ligne ;
   l'etat et les notes se retrouvent ENSEMBLE dans un tiroir a fond creme, en
   liseré plutot qu'en aplat plein — la couleur reste un repere, plus un mur.
   ⛔ Une etape sans etat ni note ne prend pas ce tiroir : elle reste une
   simple ligne, comme le veut la regle du 2026-09-03. */
.plan-editeur .plan-journal{
  margin-top:10px; background:var(--creme); border:1px solid var(--bordure);
  border-radius:12px; padding:7px; display:flex; flex-direction:column; gap:6px;
}
.plan-editeur .plan-journal .plan-rendu{ margin-top:0; }
.plan-editeur .plan-journal .plan-notes{ margin-top:0; }
.plan-editeur .plan-rendu-tete{
  display:flex; align-items:center; gap:8px; margin-bottom:3px;
  font-size:.7rem; letter-spacing:.05em; text-transform:uppercase;
}
.plan-editeur .plan-rendu-tete b{ color:var(--miel-fonce); }
.plan-editeur .plan-rendu-tete span{
  color:var(--encre-doux); text-transform:none; letter-spacing:normal;
  font-size:.74rem; font-weight:400;
}
.plan-editeur .plan-rendu-mot{
  font-size:.9rem; color:var(--encre); white-space:pre-wrap; word-break:break-word;
  min-height:1.1em;
}
.plan-editeur .plan-rendu-mot:hover{ background:#f8ead0; }
.plan-editeur .plan-rendu-mot:focus{
  background:var(--blanc);
  box-shadow:0 0 0 2px var(--miel-clair), 0 0 0 5px var(--miel-voile);
}
.plan-editeur .plan-rendu-vide{ margin-top:8px; }
.plan-editeur .plan-rendu-ouvrir{
  font:inherit; font-size:.7rem; letter-spacing:.05em; text-transform:uppercase;
  font-weight:700; color:var(--encre-doux); background:transparent;
  border:1px dashed var(--bordure); border-radius:var(--pilule);
  padding:3px 10px; cursor:pointer;
}
.plan-editeur .plan-rendu-ouvrir:hover{
  color:var(--miel-fonce); border-color:var(--miel-clair); background:var(--miel-voile);
}
.plan-editeur .plan-rendu-ouvrir:focus-visible{ outline:2px solid var(--miel); outline-offset:2px; }

/* Ce que la cliente LIT. ⛔ Rien de cliquable, comme tout le reste de sa vue. */
.mon-plan-rendu{
  display:block; margin-top:6px; border-radius:11px; padding:7px 11px;
  background:var(--miel-voile); border-left:3px solid var(--miel);
  font-size:.88rem; color:var(--encre); white-space:pre-wrap; word-break:break-word;
}
.mon-plan-rendu b{
  display:block; margin-bottom:2px; font-size:.68rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--miel-fonce);
}

/* ---- les outils qu'elle utilise (2026-09-01) ----
   ⛔ A ne pas confondre avec « Son systeme », qui liste ce qu'ON a monte chez
   elle et reste le journal d'Anna. Ici, ce sont les services QU'ELLE utilise,
   tenus a deux. Couleur neutre exprès, pour ne pas les melanger a l'oeil avec
   les pastilles « qui s'en occupe ». */
/* ---- LES OUTILS, REPLIES EN HAUT ----
   Anna, 2026-09-03 : « les outils, mais ca en liste deroulante, ca fait
   beaucoup comme ca », et « liste des outils en haut complet, ensuite priorite ».
   ⛔ Ferme au depart : vingt-trois outils poussaient le plan hors de l'ecran.
   ⚡ Les cinq premiers noms restent lisibles sur le bandeau ferme. */
.plan-editeur .plan-outils{
  margin-top:16px; background:var(--lilas-voile); border:1px solid var(--bordure);
  border-radius:16px; padding:0;
}
.plan-editeur .plan-outils summary{
  padding:12px 17px; cursor:pointer; display:flex; align-items:center; gap:10px;
  list-style:none; border-radius:16px;
}
.plan-editeur .plan-outils summary::-webkit-details-marker{ display:none; }
.plan-editeur .plan-outils summary::before{
  content:"\25B8"; color:var(--lilas); font-size:.9rem; flex:0 0 auto;
}
.plan-editeur .plan-outils[open] summary::before{ content:"\25BE"; }
.plan-editeur .plan-outils summary:focus-visible{ outline:2px solid var(--lilas); outline-offset:2px; }
.plan-editeur .plan-outils summary b{ font-size:1.02rem; flex:0 0 auto; }
.plan-editeur .plan-outils-compte{
  background:var(--lilas); color:var(--blanc); font-size:.72rem; font-weight:700;
  padding:2px 9px; border-radius:var(--pilule); flex:0 0 auto;
  font-variant-numeric:tabular-nums;
}
.plan-editeur .plan-outils-apercu{
  color:var(--encre-doux); font-size:.83rem; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.plan-editeur .plan-outils[open] .plan-outils-apercu{ display:none; }
.plan-editeur .plan-outils-dedans{ padding:0 17px 12px; }
.plan-editeur .plan-outils-tete{ margin-bottom:8px; }
.plan-editeur .plan-outils-vide{
  color:var(--encre-doux); font-size:.9rem; margin:0 0 8px; max-width:60ch;
}
/* ⚡ 2026-09-03. Le nom et sa precision se disputaient la meme ligne : la
   precision se retrouvait dans une colonne etroite, en escalier. Maintenant le
   nom est en GRAS sur sa ligne, la precision dessous, en gris.
   ⚡ Un flot en colonnes (`columns`) plutot qu'une grille : les outils n'ont
   pas du tout la meme hauteur — « Canva » fait un mot, le serveur OVH en fait
   quatre lignes — et une grille laisserait des trous partout. */
.plan-editeur .plan-outils-liste{
  columns:250px 3; column-gap:26px;
}
.plan-editeur .plan-outil{
  break-inside:avoid; -webkit-column-break-inside:avoid;
  display:block; position:relative; padding:8px 20px 9px 0;
  border-top:1px solid #e2d6f7; font-size:.92rem;
}
.plan-editeur .plan-outil-nom{
  display:block; font-weight:700; line-height:1.3;
}
.plan-editeur .plan-outil-mot{
  display:block; margin-top:1px; color:var(--encre-doux);
  font-size:.83rem; line-height:1.45;
}
/* Le × par-dessus le coin, pour ne pas pousser le texte. */
.plan-editeur .plan-outil > .plan-retirer{
  position:absolute; top:4px; right:-5px; opacity:0; transition:opacity .15s;
}
.plan-editeur .plan-outil:hover > .plan-retirer,
.plan-editeur .plan-outil > .plan-retirer:focus-visible{ opacity:1; }
@media (hover:none){ .plan-editeur .plan-outil > .plan-retirer{ opacity:.6; } }
/* ⚠️ Apres la regle du dessus, jamais avant : sinon la regle generale
   la recouvre et le telephone garde trois colonnes de 80 pixels. */
@media (max-width:700px){
  .plan-editeur .plan-outils-liste{ columns:1; }
}
.plan-editeur .plan-outil.dedemande{.plan-editeur .plan-outil.dedemande .plan-outil-nom{ color:var(--turquoise-fonce); }
.plan-editeur .plan-outil-nom{ font-weight:700; font-size:.94rem; }
.plan-editeur .plan-outil-mot{
  flex:1; min-width:120px; color:var(--encre-doux); font-size:.87rem;
}
.plan-editeur .plan-outil-src{
  font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
  padding:3px 9px; border-radius:999px;
  background:var(--turquoise-voile); color:var(--turquoise-fonce);
}
.plan-editeur .plan-outil:hover .plan-retirer{ color:var(--encre-doux); }
.plan-editeur .plan-outils-ajout{ margin:11px 0 0; }