/* ---------- CRÉER UN PROJET ----------
     La page prend tout l'espace sous la bande « Projets ». Tant qu'elle est
     ouverte, le reste de l'onglet s'efface : on compose une chose à la fois. */
  .creation-page{display:none;}
  .screen.en-creation .creation-page{display:block;}
  .screen.en-creation .proj-search-row,
  .screen.en-creation .proj-search-results,
  .screen.en-creation #myTemplatesSection,
  .screen.en-creation .proj-panel{display:none !important;}

  /* Composer, c'est ne faire que ça : l'en-tête de l'application et la barre de
     navigation s'effacent, et chaque ligne d'écran gagnée est une ligne de
     projet visible. */
  body.creation-ouverte .header-bar,
  body.creation-ouverte .bottom-nav{display:none !important;}
  body.creation-ouverte .screen.en-creation .screen-title{display:none;}

  /* La bande de l'atelier prend la place de celle de l'écran : le nom du projet
     y est, et il se renomme d'un clic. */
  .creation-bande{
    display:flex; align-items:center;
    margin:0 calc(var(--pad-x) * -1) 14px; padding:11px 12px;
    background:linear-gradient(135deg,#2B2824 0%,#171512 100%);
  }
  .creation-nom{
    flex:1; min-width:0; display:flex; align-items:center; gap:7px;
    background:none; border:none; padding:4px 2px; color:#fff; text-align:left;
    font-family:'Fraunces',serif; font-size:16px; font-weight:600;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  /* Le mot porte la coupure ; le crayon garde sa place quoi qu'il arrive. */
  .creation-nom-mot{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .creation-nom svg{width:12px; height:12px; flex-shrink:0; opacity:.5;}
  .creation-nom:hover svg{opacity:1;}
  /* Tant qu'il s'appelle « Nouveau projet », il n'a pas de nom : on le dit. */
  .creation-nom.a-nommer{color:rgba(255,255,255,.6); font-style:italic;}
  .creation-nom-input{
    flex:1; min-width:0; border:1px solid rgba(255,255,255,.45); border-radius:9px;
    background:rgba(255,255,255,.12); padding:7px 11px; color:#fff;
    font-family:'Fraunces',serif; font-size:16px; font-weight:600;
  }
  .creation-nom-input:focus{outline:none; border-color:#fff;}
  .creation-nom-input::placeholder{color:rgba(255,255,255,.45); font-style:italic;}

  .creation-label{
    display:block; margin-bottom:6px;
    font-family:'IBM Plex Mono',monospace; font-size:9.5px; text-transform:uppercase;
    letter-spacing:.07em; color:var(--ink-soft);
  }
  .creation-champ{
    width:100%; box-sizing:border-box; margin-bottom:14px;
    border:1px solid var(--border); background:var(--surface); border-radius:12px;
    padding:12px 14px; font-size:14.5px; color:var(--ink); font-family:'Inter',sans-serif;
  }
  .creation-champ:focus{outline:none; border-color:var(--ink-soft);}

  /* ---------- la pile ----------
     Les blocs se suivent sans séparateur ni encadré supplémentaire : c'est la
     suite du projet telle qu'elle sera, dans l'ordre où on l'a écrite. */
  .creation-pile{display:flex; flex-direction:column; gap:7px; padding-bottom:8px;}
  .creation-vide{
    border:1px dashed var(--border); border-radius:12px; padding:18px 16px;
    font-size:12.5px; line-height:1.55; color:var(--ink-soft); text-align:center;
  }
  .creation-bloc{
    background:var(--surface); border:1px solid var(--border); border-radius:12px;
    padding:9px 12px 11px;
  }
  .bloc-entete{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px;}
  .bloc-genre{
    font-family:'IBM Plex Mono',monospace; font-size:8.5px; font-weight:700;
    text-transform:uppercase; letter-spacing:.09em; color:var(--ink-soft); opacity:.75;
  }
  .bloc-retirer{
    width:20px; height:20px; padding:0; border:none; background:none; border-radius:5px;
    color:var(--ink-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .bloc-retirer:hover{color:#E5342A; background:var(--bg);}
  .bloc-retirer svg{width:11px; height:11px;}
  .bloc-titre{font-size:13.5px; font-weight:600; line-height:1.35; color:var(--ink); word-break:break-word;}
  .bloc-texte{margin:3px 0 0; font-size:12.5px; line-height:1.55; color:var(--ink-soft); white-space:pre-wrap; word-break:break-word;}
  .bloc-items{margin:5px 0 0; padding-left:16px; font-size:12.5px; line-height:1.7; color:var(--ink-soft);}
  .bloc-image{display:block; width:100%; height:auto; max-height:220px; object-fit:contain; border-radius:8px; background:var(--bg);}
  .bloc-legende{margin:5px 2px 0; font-size:11.5px; line-height:1.4; color:var(--ink-soft);}

  /* ---------- la barre de composition ----------
     Noire, à la place des sous-onglets. Elle a deux visages — choisir, puis
     écrire — jamais les deux en même temps : un téléphone n'a pas la place, et
     on ne fait qu'une chose à la fois de toute façon. */
  .creation-barre{display:none;}
  body.creation-ouverte .creation-barre{
    display:block; background:linear-gradient(135deg,#2B2824 0%,#171512 100%); color:#fff;
  }
  /* la bande de filtre se cache dans css/projects.css */
  /* Sur la page « terminer » ou celle des espaces, il n'y a plus rien à
     ajouter : la barre s'en va, les choix sont dans la page. */
  body.creation-ouverte .screen.sans-barre ~ * .creation-barre,
  .screen.sans-barre .creation-barre{display:none;}

  .cbarre-boutons{display:flex;}
  .cbarre-btn{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:5px;
    padding:11px 2px 10px; border:none; background:none; color:rgba(255,255,255,.72);
  }
  .cbarre-btn svg{width:19px; height:19px;}
  .cbarre-btn span{
    font-family:'IBM Plex Mono',monospace; font-size:8.5px; font-weight:600;
    text-transform:uppercase; letter-spacing:.06em;
  }
  .cbarre-btn:hover{color:#fff;}
  /* « Terminer » se distingue : c'est le seul qui ferme, les quatre autres ajoutent. */
  .cbarre-btn.fin{color:#fff;}
  .cbarre-btn.fin svg{
    background:rgba(255,255,255,.14); border-radius:50%; padding:3px;
    width:22px; height:22px; box-sizing:border-box;
  }

  /* ---------- écrire un élément ---------- */
  /* Plus spécifique que la règle « display:block » ci-dessus, sinon la grille
     ne s applique jamais et la flèche tombe sous les champs. */
  body.creation-ouverte .creation-barre.en-saisie{
    padding:11px 12px 13px; display:grid; grid-template-columns:1fr auto; gap:9px; align-items:end;
  }
  .csaisie-entete{
    grid-column:1 / -1; display:flex; align-items:center; gap:8px;
    font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:700;
    text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.62);
  }
  .csaisie-entete button{
    width:24px; height:24px; padding:0; border-radius:7px; flex-shrink:0;
    border:1px solid rgba(255,255,255,.28); background:none; color:#fff;
    display:flex; align-items:center; justify-content:center;
  }
  .csaisie-entete button:hover{background:rgba(255,255,255,.14);}
  .csaisie-entete button svg{width:11px; height:11px;}
  .csaisie-corps{display:flex; flex-direction:column; gap:7px; min-width:0;}
  .csaisie{
    width:100%; box-sizing:border-box; border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.08); border-radius:11px; padding:11px 13px;
    font-size:14px; color:#fff; font-family:'Inter',sans-serif; resize:vertical;
  }
  .csaisie::placeholder{color:rgba(255,255,255,.42);}
  .csaisie:focus{outline:none; border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.12);}
  .csaisie-titre{font-size:12.5px; padding:9px 13px;}
  .csaisie-apercu{display:block; width:100%; max-height:120px; object-fit:contain; border-radius:9px; background:rgba(255,255,255,.06);}
  .csaisie-fichier{display:flex; align-items:center; gap:9px;}
  .csaisie-fichier button{
    border:1px dashed rgba(255,255,255,.35); background:none; border-radius:999px;
    padding:8px 14px; font-size:12px; font-weight:600; color:#fff; font-family:'Inter',sans-serif;
  }
  .csaisie-fichier button:hover{border-color:#fff;}
  .csaisie-note{font-family:'IBM Plex Mono',monospace; font-size:9px; color:rgba(255,255,255,.62);}
  /* La flèche d'envoi : le même geste que dans la barre d'écriture des tâches. */
  .csaisie-envoi{
    width:40px; height:40px; flex-shrink:0; padding:0; border:none; border-radius:50%;
    background:var(--send, #B5473F); color:#fff;
    display:flex; align-items:center; justify-content:center;
  }
  .csaisie-envoi:hover{opacity:.88;}
  .csaisie-envoi svg{width:16px; height:16px;}

  /* Le bloc devient une rangée : poignée à gauche, contenu au milieu — la même
     disposition que dans la suite d'un projet, pour le même geste. */
  .creation-bloc{display:grid; grid-template-columns:24px 1fr; gap:8px; align-items:start;
    touch-action:pan-y; user-select:none; cursor:grab;}
  .creation-bloc.en-glisse{
    border-color:var(--ink-soft); box-shadow:0 12px 26px -12px rgba(0,0,0,.45);
    transform:scale(1.015); position:relative; z-index:2; cursor:grabbing;
  }
  .creation-pile.glisse-en-cours .creation-bloc:not(.en-glisse){opacity:.55;}
  .bloc-fleches{display:flex; flex-direction:column; gap:1px; padding-top:5px;}
  .bloc-corps{min-width:0;}

  /* ---------- terminer, et choisir l'espace ----------
     Des pages, pas des fenêtres : une décision occupe l'écran, on la prend, on
     avance. Une fenêtre qui flotte par-dessus le travail invite à hésiter. */
  .creation-fin{padding:4px 0 18px;}
  .cfin-entete{
    font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:700;
    text-transform:uppercase; letter-spacing:.09em; color:var(--ink-soft); margin-bottom:14px;
  }
  .creation-champ.a-remplir{border-color:#D6362C; background:#FDF3F2;}
  .cfin-manque{
    margin:-8px 0 14px; font-size:11.5px; line-height:1.5; color:#D6362C;
  }
  .cfin-choix{display:flex; flex-direction:column; gap:8px; margin-top:6px;}
  /* Deux boutons portaient le mot « Enregistrer » sans dire où ça tombait.
     Chaque choix explique maintenant sa conséquence sous son nom — d'où la
     colonne, et le texte à gauche : une phrase centrée se lit mal. */
  .cfin-btn{
    width:100%; display:flex; flex-direction:column; gap:3px; text-align:left;
    border:1px solid var(--border); background:var(--surface); border-radius:14px;
    padding:13px 14px; font-size:14px; font-weight:600; color:var(--ink); font-family:'Inter',sans-serif;
  }
  .cfin-btn span{font-size:14px; font-weight:600;}
  .cfin-btn small{font-size:11.5px; font-weight:400; line-height:1.45; color:var(--ink-soft);}
  .cfin-btn.principal small{color:rgba(255,255,255,.72);}
  /* Le dernier n'a pas de sous-titre : sans cette ligne il se retrouverait
     collé à gauche pendant que les autres tiennent la colonne. */
  .cfin-btn.danger{align-items:center; padding:14px;}
  .cfin-btn:hover:not(:disabled){border-color:var(--ink-soft);}
  .cfin-btn:disabled{opacity:.4;}
  .cfin-btn.principal{background:var(--action); color:#fff; border-color:var(--action);}
  .cfin-btn.principal:hover:not(:disabled){opacity:.9;}
  .cfin-btn.danger{color:#D6362C; border-color:rgba(214,54,44,.35);}
  .cfin-btn.danger:hover{border-color:#D6362C;}
  .cfin-revenir{
    width:100%; margin-top:14px; border:none; background:none; color:var(--ink-soft);
    font-size:12.5px; font-family:'Inter',sans-serif; padding:6px;
  }
  .cfin-revenir:hover{color:var(--ink);}

  .cespace-liste{display:flex; flex-direction:column; gap:8px;}
  .cespace-btn{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    border:1px solid var(--border); background:var(--surface); border-radius:14px;
    padding:15px 16px; font-size:14px; font-weight:600; color:var(--ink);
    font-family:'Inter',sans-serif; text-align:left;
  }
  .cespace-btn:hover{border-color:var(--ink-soft);}
  .cespace-btn.on{border-color:var(--ink);}
  .cespace-btn svg{width:14px; height:14px; color:var(--ink-soft); flex-shrink:0;}

  /* Les quatre genres restent sous la main pendant qu'on écrit : reculer d'un
     menu pour changer d'idée, c'était deux gestes de trop à chaque fois. La
     flèche reste — elle sert à revoir la pile, pas à changer de genre. */
  .csaisie-mot{
    flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .csaisie-sep{
    flex:0 0 auto; width:1px; height:15px; background:rgba(255,255,255,.28); margin:0 2px;
  }
  .csaisie-onglets{display:flex; gap:2px; flex:0 0 auto; margin-left:auto;}
  .csaisie-onglet{
    width:26px; height:26px; padding:0; border:none; border-radius:7px; background:none;
    color:rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center;
  }
  .csaisie-onglet svg{width:14px; height:14px;}
  .csaisie-onglet:hover{color:#fff; background:rgba(255,255,255,.1);}
  .csaisie-onglet.on{color:#171512; background:#fff;}

  /* La montre, à droite du nom : elle ne paraît que dans un projet récurrent.
     Pleine quand un rythme est posé — on voit d'un coup d'œil si la question a
     été réglée. */
  .creation-montre{
    width:30px; height:30px; flex-shrink:0; padding:0; border-radius:9px;
    border:1px solid rgba(255,255,255,.5); background:none; color:#fff;
    display:flex; align-items:center; justify-content:center;
  }
  .creation-montre:hover{background:rgba(255,255,255,.14); border-color:#fff;}
  .creation-montre.posee{background:#fff; color:#171512; border-color:#fff;}
  .creation-montre svg{width:15px; height:15px;}

  /* La page de relance. Une phrase avant les réglages : les deux niveaux — le
     projet qui recommence, les tâches qui gardent leurs dates — sont ce qu'il y
     a de moins évident, et une phrase coûte moins qu'un malentendu. */
  .crelance-mot{
    margin:-6px 0 16px; font-size:12.5px; line-height:1.55; color:var(--ink-soft);
  }
  .crelance-genres{display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:16px;}
  .crelance-genre{
    border:1px solid var(--border); background:var(--surface); border-radius:12px;
    padding:13px 10px; font-size:13.5px; font-weight:600; color:var(--ink);
    font-family:'Inter',sans-serif;
  }
  .crelance-genre:hover{border-color:var(--ink-soft);}
  .crelance-genre.on{background:var(--action); color:#fff; border-color:var(--action);}
  .creation-fin .creation-label{margin-top:14px;}
  .creation-fin .ryt-choix, .creation-fin .ryt-jours, .creation-fin .ryt-dates{margin-bottom:4px;}
  .crelance-apercu{
    display:flex; flex-direction:column; gap:4px; margin:16px 0 18px;
    background:var(--bg); border:1px solid var(--border-soft); border-radius:12px; padding:12px 13px;
  }
  .crelance-apercu-titre{
    font-family:'IBM Plex Mono',monospace; font-size:9.5px; text-transform:uppercase;
    letter-spacing:.07em; color:var(--ink);
  }
  .crelance-apercu-dates{font-size:12.5px; line-height:1.5; color:var(--ink-soft);}

  /* Accepter à droite, plein : c'est la réponse courante. Annuler à gauche,
     contour — le même ordre que partout ailleurs dans l'app. */
  .crelance-actions{display:flex; gap:8px; margin-top:18px;}
  .crelance-actions button{flex:1;}
  .crelance-sans{margin:14px 0 0; text-align:center;}

  /* La flèche, à gauche du nom. Elle ne quitte pas l'atelier : elle recule d'un
     cran, et depuis le projet elle mène à la page qui demande quoi enregistrer. */
  .creation-retour{
    width:30px; height:30px; flex-shrink:0; padding:0; border-radius:9px; margin-right:8px;
    border:1px solid rgba(255,255,255,.5); background:none; color:#fff;
    display:flex; align-items:center; justify-content:center;
  }
  .creation-retour:hover{background:rgba(255,255,255,.14); border-color:#fff;}
  .creation-retour svg{width:14px; height:14px;}

  /* La navigation entre étapes, dans la bande : les flèches, le rang, et le
     « + ». Elle ne paraît que dans un projet progressif. */
  .creation-fiches{display:flex; align-items:center; gap:2px; flex-shrink:0; margin-left:6px;}
  .creation-fiches button{
    width:26px; height:26px; padding:0; border-radius:7px; border:none; background:none;
    color:rgba(255,255,255,.72); display:flex; align-items:center; justify-content:center;
  }
  .creation-fiches button:hover:not(:disabled){background:rgba(255,255,255,.14); color:#fff;}
  .creation-fiches button:disabled{opacity:.28;}
  .creation-fiches button svg{width:13px; height:13px;}
  .creation-fiches-rang{
    font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:700;
    color:rgba(255,255,255,.72); padding:0 3px; white-space:nowrap;
  }

  /* L'en-tête de la fiche : son rang, son nom, et ce qui la termine. */
  .fiche-entete{margin-bottom:12px;}
  .fiche-rang{
    font-family:'IBM Plex Mono',monospace; font-size:9px; text-transform:uppercase;
    letter-spacing:.09em; color:var(--ink-soft); margin-bottom:5px;
  }
  .fiche-nom{
    width:100%; box-sizing:border-box; border:1px solid var(--border); background:var(--surface);
    border-radius:11px; padding:10px 13px; font-size:14.5px; font-weight:600; color:var(--ink);
    font-family:'Inter',sans-serif;
  }
  .fiche-nom:focus{outline:none; border-color:var(--ink-soft);}
  .fiche-avance{
    display:flex; align-items:center; gap:6px; margin-top:7px;
    border:1px dashed var(--border); background:none; border-radius:999px;
    padding:7px 12px; font-family:'IBM Plex Mono',monospace; font-size:9.5px;
    letter-spacing:.03em; color:var(--ink-soft);
  }
  .fiche-avance:hover{border-color:var(--ink-soft); color:var(--ink);}
  .fiche-avance svg{width:12px; height:12px; flex-shrink:0;}

  /* Le délai : un nombre et son unité, côte à côte. On l'écrit comme on le dit. */
  .avance-delai{display:flex; gap:8px;}
  .avance-nombre{
    width:92px; flex:0 0 auto; box-sizing:border-box;
    border:1px solid var(--border); background:var(--surface); border-radius:12px;
    padding:12px 14px; font-size:14.5px; color:var(--ink);
    font-family:'IBM Plex Mono',monospace;
  }
  .avance-unite{
    flex:1; min-width:0; box-sizing:border-box;
    border:1px solid var(--border); background:var(--surface); border-radius:12px;
    padding:12px 14px; font-size:14.5px; color:var(--ink); font-family:'Inter',sans-serif;
  }
  .avance-nombre:focus, .avance-unite:focus{outline:none; border-color:var(--ink-soft);}

  /* Les trois genres : le mot, puis ce qu'il veut dire. Sans la phrase, il faut
     déjà savoir ce que « progressif » signifie dans cette application pour
     choisir — ce qui est exactement la question qu'on pose. */
  .cgenre-btn{align-items:flex-start; padding:13px 14px;}
  .cgenre-texte{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1;}
  .cgenre-mot{font-size:14.5px; font-weight:600;}
  .cgenre-aide{font-size:12px; line-height:1.4; color:var(--ink-soft); font-weight:400;}
  .cgenre-btn svg{margin-top:4px;}

  /* ---------- L'ATELIER D'UNE NOTE ----------
     Le même que celui d'un projet : une page entière sous la bande noire, la
     barre du bas comme outil. On ne réécrit pas les règles — on dit seulement
     à qui elles s'appliquent aussi. */
  body.carnet-ouvert .header-bar,
  body.carnet-ouvert .bottom-nav,
  body.carnet-ouvert .proj-search-row,
  body.carnet-ouvert #carnetsListe{display:none !important;}
  body.carnet-ouvert .screen.en-creation .screen-title{display:none;}
  #carnetPage{display:none;}
  body.carnet-ouvert #carnetPage{display:flex; flex-direction:column;}
  #carnetBarre{display:none;}
  body.carnet-ouvert #carnetBarre{
    display:block; background:linear-gradient(135deg,#2B2824 0%,#171512 100%); color:#fff;
  }
  body.carnet-ouvert .screen.sans-barre ~ * #carnetBarre,
  .screen.sans-barre #carnetBarre{display:none;}
  /* Plus spécifique que la règle ci-dessus, comme pour l'atelier d'un projet :
     sinon la flèche d'envoi retombe sous les champs. */
  body.carnet-ouvert #carnetBarre.en-saisie{
    padding:11px 12px 13px; display:grid; grid-template-columns:1fr auto; gap:9px; align-items:end;
  }

  /* Ce qu'une note contient, en lecture comme en composition. */
  .carnet-bloc .bloc-corps{min-width:0;}
  .carnet-soustitre{
    font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:700;
    text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft); margin-bottom:4px;
  }
  .carnet-texte{font-size:13.5px; line-height:1.55; color:var(--ink); white-space:pre-wrap;}
  .carnet-image{
    width:100%; max-height:280px; object-fit:cover; border-radius:11px; display:block; cursor:zoom-in;
  }
  .carnet-legende{font-size:11.5px; color:var(--ink-soft); margin-top:5px; font-style:italic;}
  .carnet-lien{
    display:flex; align-items:center; gap:8px; text-decoration:none;
    border:1px solid var(--border); background:var(--bg); border-radius:11px;
    padding:10px 12px; font-size:13px; font-weight:600; color:var(--ink); word-break:break-word;
  }
  .carnet-lien:hover{border-color:var(--ink-soft);}
  .carnet-lien svg{width:15px; height:15px; flex-shrink:0; color:var(--accent);}
  .carnet-corps{padding-top:12px;}
  .carnet-lecture-bloc{padding:10px 0; border-top:1px solid var(--border);}
  .carnet-lecture-bloc:first-child{border-top:none; padding-top:0;}
  .carnet-vide{font-size:12.5px; color:var(--ink-soft); font-style:italic; padding:6px 0;}

  /* Deux actions au lieu d'une dans l'en-tête d'un bloc de note : modifier et
     retirer. Le crayon a sa place ici — une note se relit et se corrige, alors
     qu'une tâche de projet se refait. */
  .bloc-actions{display:flex; align-items:center; gap:1px; flex-shrink:0;}

  /* ---------- ÉCRIRE DANS LE BLOC ----------
     Un champ qui ne se donne pas l'air d'un champ : il ressemble au texte
     qu'il porte, et ne se souligne qu'au moment où on écrit dedans. Une note
     doit se lire comme du texte, pas comme un formulaire. */
  .carnet-champ{
    width:100%; box-sizing:border-box; border:1px solid transparent; background:none;
    border-radius:8px; padding:6px 8px; margin-left:-8px; color:var(--ink);
    font-family:'Inter',sans-serif; font-size:13.5px; line-height:1.55;
  }
  .carnet-champ::placeholder{color:var(--ink-soft); opacity:.7;}
  .carnet-champ:hover{border-color:var(--border);}
  .carnet-champ:focus{outline:none; border-color:var(--ink-soft); background:var(--bg);}
  .carnet-champ-titre, .carnet-champ-legende{
    font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:700;
    text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft);
  }
  .carnet-champ-legende{text-transform:none; letter-spacing:0; font-style:italic; font-weight:500;}
  .carnet-champ-texte{resize:none; overflow:hidden; display:block; white-space:pre-wrap;}
  .carnet-champ-lien{display:flex; align-items:center; gap:6px;}
  .carnet-champ-lien svg{width:14px; height:14px; flex-shrink:0; color:var(--accent);}
  .carnet-champ-lien a{
    flex-shrink:0; width:26px; height:26px; border-radius:7px; color:var(--ink-soft);
    display:flex; align-items:center; justify-content:center;
  }
  .carnet-champ-lien a:hover{background:var(--bg); color:var(--ink);}
  .carnet-champ-lien a svg{width:13px; height:13px; color:currentColor;}
  .carnet-image-outils{margin:7px 0 2px;}
  .carnet-image-outils button{
    border:1px dashed var(--border-soft); background:none; border-radius:999px;
    padding:6px 12px; font-size:11.5px; font-weight:600; color:var(--ink-soft);
    font-family:'Inter',sans-serif;
  }
  .carnet-image-outils button:hover{border-color:var(--ink-soft); color:var(--ink);}

  /* La flèche posée sur l'icône Image : le bouton ouvre l'appareil, elle
     ouvre le champ où coller une adresse. Petite, dans le coin — c'est le
     second chemin, pas le premier. */
  .cbarre-btn{position:relative;}
  .cbarre-fleche{
    position:absolute; top:6px; right:calc(50% - 21px);
    width:15px; height:15px; border-radius:50%;
    background:rgba(255,255,255,.16); color:#fff;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .cbarre-fleche svg{width:9px; height:9px;}
  .cbarre-fleche:hover{background:#fff; color:#171512;}
  /* Une adresse qui ne mène à rien : l'image ne s'affiche pas, on ne laisse pas
     un cadre vide faire croire qu'elle est là. */
  .carnet-image.cassee{display:none;}

  /* Les deux gestes qu'on cherche en écrivant, dans la bande : où la note se
     range, et l'enregistrer. Au bout d'un menu, on ne les trouvait pas. */
  .carnet-outils{display:flex; align-items:center; gap:4px; flex-shrink:0; margin-left:auto;}
  .carnet-espace{
    display:flex; align-items:center; gap:5px; max-width:112px;
    border:1px solid rgba(255,255,255,.26); background:none; color:rgba(255,255,255,.82);
    border-radius:999px; padding:5px 10px 5px 8px;
    font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:700;
    text-transform:uppercase; letter-spacing:.05em;
  }
  .carnet-espace span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .carnet-espace svg{width:13px; height:13px; flex-shrink:0;}
  .carnet-espace:hover{border-color:#fff; color:#fff;}
  .carnet-disquette{
    width:32px; height:32px; flex-shrink:0; padding:0; border:none; border-radius:9px;
    background:rgba(255,255,255,.16); color:#fff;
    display:flex; align-items:center; justify-content:center;
  }
  .carnet-disquette svg{width:16px; height:16px;}
  .carnet-disquette:hover{background:#fff; color:#171512;}

  /* Supprimer, au pied de la note : loin de la disquette, pour qu'on ne
     l'atteigne pas en visant « enregistrer ». */
  .carnet-supprimer{
    display:block; width:100%; margin:18px 0 6px; border:1px solid rgba(214,54,44,.3);
    background:none; border-radius:12px; padding:12px;
    font-family:'Inter',sans-serif; font-size:13px; font-weight:600; color:#D6362C;
  }
  .carnet-supprimer:hover{border-color:#D6362C; background:#FDF3F2;}

  /* Le tri, au bout de la bande « Notes » : mono et majuscules comme le titre
     qu'il accompagne, en plus discret — c'est un réglage, pas un titre. */
  .carnet-tri{
    margin-left:auto; flex-shrink:0;
    border:1px solid rgba(255,255,255,.28); background:none; color:rgba(255,255,255,.75);
    border-radius:999px; padding:4px 11px 3px;
    font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:700;
    letter-spacing:.07em; text-transform:uppercase; white-space:nowrap;
  }
  .carnet-tri:hover{border-color:#fff; color:#fff;}