/* ---------- PROJETS ---------- */
  .proj-search-row{display:flex; align-items:center; gap:9px; margin-bottom:10px;}
  /* Serré d'un cheveu : le champ et le bouton partagent une ligne de 375 px, et
     « Ajouter un nouveau projet » y tient de justesse. Mesuré plutôt que deviné. */
  .proj-search{flex:1; min-width:0; display:flex; align-items:center; gap:7px; background:var(--bg); border:1px solid var(--border); border-radius:999px; padding:9px 12px;}
  .proj-search svg{width:15px; height:15px; color:var(--ink-soft); flex-shrink:0;}
  .proj-search input{border:none; background:none; flex:1; min-width:0; font-size:13px; color:var(--ink);}
  .proj-search input::placeholder{color:var(--ink-soft);}
  .proj-search input:focus{outline:none;}
  /* À droite du champ, sur la même ligne : chercher un modèle et partir d'une
     page blanche sont les deux façons de commencer un projet, elles se
     présentent donc ensemble. Le trait pointillé dit « rien n'existe encore
     ici », et le libellé reste court pour laisser la place au champ. */
  /* Les deux outils, à droite du champ : composer, et ouvrir ce qu'on a déjà.
     Sans libellé — trois textes ne tiennent pas sur une ligne de téléphone, et
     ces deux gestes-là se reconnaissent à leur dessin. */
  .proj-outil{
    flex:0 0 auto; position:relative; width:40px; height:40px; padding:0;
    border:1px solid var(--border); border-radius:12px; background:var(--surface);
    color:var(--ink-soft); display:flex; align-items:center; justify-content:center;
  }
  .proj-outil:hover{border-color:var(--ink-soft); color:var(--ink);}
  .proj-outil svg{width:19px; height:19px;}

  .proj-search-results{display:none; flex-direction:column; gap:6px; margin-bottom:16px;}
  .proj-search-results.open{display:flex;}
  .search-result{display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:11px; padding:10px 14px; font-size:13.5px; font-weight:600; text-align:left; color:var(--ink);}
  .search-result .sr-tags{display:block; font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:500; color:var(--accent); margin-top:2px;}
  .search-result:hover{border-color:var(--ink-soft);}
  .search-result .sr-type{font-family:'IBM Plex Mono',monospace; font-size:9px; color:var(--ink-soft); text-transform:uppercase; font-weight:700; letter-spacing:.04em; flex-shrink:0;}
  .sr-empty{font-size:12.5px; color:var(--ink-soft); font-style:italic; padding:6px 4px;}

  .proj-panel{display:none;}
  .proj-panel.active{display:block;}
  .proj-empty{font-size:13px; color:var(--ink-soft); font-style:italic; text-align:center; padding:34px 20px; border:1.5px dashed var(--border-soft); border-radius:var(--radius); line-height:1.5;}

  /* ---------- LA BANDE DE FILTRE ----------
     Elle remplace les trois sous-onglets. La différence tient à une chose :
     elle démarre éteinte. Un onglet, on est toujours dedans, et l'état par
     défaut cache les deux tiers de la collection ; ici rien n'est choisi, donc
     tout s'affiche, et le filtre n'est qu'une sortie de secours.

     Sa forme est définie une fois pour toutes dans css/base.css ; il ne reste
     ici que ce qui appartient à cette page. */
  .screen[data-screen="projects"] .screen-title{margin-bottom:0;}
  .screen[data-screen="projects"] .proj-filtre{margin:0 calc(var(--pad-x) * -1) 16px;}
  #modelesFiltre{flex-shrink:0;}
  body.creation-ouverte .proj-filtre{display:none;}

  /* add-project bottom sheet */
  .sheet-overlay{position:fixed; inset:0; background:rgba(20,18,15,.42); z-index:48; opacity:0; pointer-events:none; transition:opacity .2s ease;}
  .sheet-overlay.open{opacity:1; pointer-events:auto;}
  .sheet{
    position:fixed; left:50%; bottom:0; transform:translate(-50%,105%); width:100%; max-width:430px;
    background:var(--bg); border-radius:20px 20px 0 0; z-index:49; padding:10px 18px calc(22px + env(safe-area-inset-bottom));
    max-height:82vh; overflow-y:auto; transition:transform .28s cubic-bezier(.22,.9,.32,1);
    box-shadow:0 -20px 50px -20px rgba(0,0,0,.35);
  }
  .sheet.open{transform:translate(-50%,0);}
  .sheet-handle{width:36px; height:4px; border-radius:2px; background:var(--border-soft); margin:4px auto 16px;}
  .sheet-head h3{font-size:18px; font-weight:600; margin:0; font-family:'Fraunces',serif;}
  .sheet-desc{font-size:12.5px; color:var(--ink-soft); margin:5px 0 0; line-height:1.4;}
  #sheetTitleInput{width:100%; border:1px solid var(--border); background:var(--surface); border-radius:10px; padding:11px 13px; font-size:15px; font-weight:600; font-family:'Fraunces',serif;}
  #sheetTitleInput:focus{outline:none; border-color:var(--ink-soft);}
  .sheet-tasks{margin-top:14px;}
  .sheet-task-row{display:flex; align-items:center; justify-content:space-between; padding:9px 2px; border-top:1px solid var(--border); position:relative;}
  .sheet-task-row:first-child{border-top:none;}
  .sheet-task-row .stt{font-size:13.5px; flex:1; padding-right:8px; min-width:0;}
  .stt-check{width:19px; height:19px; border:1.5px solid var(--border-soft); border-radius:6px; background:var(--surface); display:flex; align-items:center; justify-content:center; padding:0; flex-shrink:0;}
  .stt-check svg{width:11px; height:11px; opacity:0; stroke:#fff;}
  .sheet-task-row:not(.excluded) .stt-check{background:var(--action); border-color:var(--action);}
  .sheet-task-row:not(.excluded) .stt-check svg{opacity:1;}
  .sheet-task-row.excluded .stt{color:var(--ink-soft); text-decoration:line-through; opacity:.6;}
  .sheet-task-row.excluded .stt-actions{opacity:.4;}
  .sheet-excluded-note{font-size:11.5px; color:var(--ink-soft); margin:2px 2px 0; min-height:14px;}
  .sheet-excluded-note a{color:var(--ink); font-weight:600; text-decoration:underline;}
  .stt-actions{display:flex; align-items:center; gap:6px; flex-shrink:0;}
  .stt-when{font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--ink-soft); white-space:nowrap;}
  .sheet-field{margin-top:16px;}
  .sheet-field label{display:block; font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:6px;}
  .sheet-field input, .sheet-field select{width:100%; border:1px solid var(--border); background:var(--surface); border-radius:10px; padding:9px 12px; font-size:13.5px; color:var(--ink); font-family:'Inter',sans-serif;}
  .sheet-field input:focus{outline:none; border-color:var(--ink-soft);}
  /* Un champ dont l'usage n'est pas évident se l'explique lui-même. Le mono
     pâle est le même langage que les libellés au-dessus : ça se lit comme une
     note du formulaire, pas comme du contenu saisi. */
  .champ-dit{
    margin:6px 0 0; font-family:'IBM Plex Mono',monospace; font-size:10px;
    line-height:1.6; color:var(--ink-soft);
  }
  .sheet-actions{display:flex; gap:8px; margin-top:20px;}
  .sheet-cancel{flex:0 0 auto; background:none; border:1px solid var(--border-soft); border-radius:999px; padding:12px 18px; font-size:13px; font-weight:600; color:var(--ink); display:flex; align-items:center; justify-content:center; text-align:center;}
  .sheet-confirm{flex:1; background:var(--action); color:#fff; border:none; border-radius:999px; padding:12px 18px; font-size:13px; font-weight:600; display:flex; align-items:center; justify-content:center; text-align:center;}
  .sheet-confirm:hover{opacity:.9;}
  .sheet-helper{font-size:12.5px; color:var(--ink-soft); font-style:italic; margin:12px 2px 0;}

  .project-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); margin-bottom:14px; position:relative; overflow:hidden;}
  .proj-card-actions{display:flex; align-items:center; gap:1px; flex-shrink:0;}
  .proj-icon-btn{width:27px; height:27px; border-radius:50%; border:none; background:none; color:rgba(255,255,255,.7); display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s;}
  .proj-icon-btn:hover{background:rgba(255,255,255,.16); color:#fff;}
  .proj-icon-btn[title^="Supprimer"]:hover{background:rgba(214,54,44,.4); color:#fff;}
  .proj-icon-btn svg{width:13px; height:13px;}

  /* generic confirm dialog — doit rester au-dessus de TOUT (y compris .notif-page à
     z-index:60, ex. la page Profil), puisqu'il peut être déclenché depuis n'importe où */
  .confirm-overlay{position:fixed; inset:0; background:rgba(20,18,15,.42); z-index:78; opacity:0; pointer-events:none; transition:opacity .18s ease;}
  .confirm-overlay.open{opacity:1; pointer-events:auto;}
  .confirm-dialog{
    position:fixed; left:50%; top:50%; transform:translate(-50%,-46%) scale(.96); width:calc(100% - 56px); max-width:340px;
    background:var(--surface); border-radius:18px; padding:22px 20px 18px; z-index:79; opacity:0; pointer-events:none;
    box-shadow:0 24px 60px -20px rgba(0,0,0,.4); transition:opacity .18s ease, transform .18s ease;
  }
  .confirm-dialog.open{opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1);}
  .confirm-dialog p{font-size:14px; line-height:1.5; margin:0 0 12px; color:var(--ink);}
  .confirm-input{width:100%; box-sizing:border-box; border:1px solid var(--border); background:var(--bg); border-radius:10px; padding:10px 12px; font-size:14px; font-weight:600; font-family:'Fraunces',serif; color:var(--ink); margin-bottom:16px;}
  .confirm-input:focus{outline:none; border-color:var(--ink-soft);}

  .mini-toast{
    position:fixed; left:50%; top:70px; transform:translate(-50%,-14px); width:calc(100% - 56px); max-width:340px;
    background:var(--action); color:#fff; font-size:12.5px; font-weight:600; text-align:center; padding:11px 16px;
    border-radius:999px; z-index:65; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
    box-shadow:0 14px 34px -14px rgba(0,0,0,.4);
  }
  .mini-toast.show{opacity:1; transform:translate(-50%,0);}

  .my-template-row{display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px 12px; margin-bottom:8px;}
  .mt-info{flex:1; min-width:0; display:flex; flex-direction:column;}
  .mt-title{font-size:13px; font-weight:700; color:var(--ink);}
  .mt-type{font-family:'IBM Plex Mono',monospace; font-size:9.5px; text-transform:uppercase; color:var(--accent); margin-top:1px;}
  .mt-actions{display:flex; gap:5px; flex-shrink:0;}
  .mt-btn{width:26px; height:26px; border-radius:50%; border:1px solid var(--border-soft); background:var(--bg); color:var(--ink-soft); display:flex; align-items:center; justify-content:center;}
  .mt-btn:hover{background:var(--accent-bg); color:var(--accent); border-color:transparent;}
  .mt-btn svg{width:12px; height:12px;}
  .mt-btn.mt-delete:hover{background:#F3DAD7; color:#8B2E27;}
  .confirm-actions{display:flex; gap:8px;}
  .confirm-cancel{flex:1; background:none; border:1px solid var(--border-soft); border-radius:999px; padding:10px; font-size:13px; font-weight:600; color:var(--ink);}
  .confirm-danger{flex:1; background:#B8271F; border:none; border-radius:999px; padding:10px; font-size:13px; font-weight:600; color:#fff;}
  .confirm-positive{flex:1; background:var(--action); border:none; border-radius:999px; padding:10px; font-size:13px; font-weight:600; color:#fff;}
  /* Issue intermédiaire de la complétion : ni confirmation ni abandon du
     dialogue, donc ni plein noir ni rouge. */
  .confirm-alt{flex:1; background:none; border:1px solid var(--border-soft); border-radius:999px; padding:10px; font-size:13px; font-weight:600; color:var(--ink-soft); font-family:'Inter',sans-serif;}
  .confirm-alt:hover{color:var(--ink); border-color:var(--ink-soft);}
  /* Empilement à toutes les largeurs : trois libellés côte à côte se serrent
     même sur grand écran, la modale n'étant pas plus large pour autant.
     column-reverse : l'ordre du DOM est annuler / alternative / principal,
     donc l'inverser met l'action principale en haut et l'abandon en bas —
     l'ordre de lecture attendu sur une pile verticale. */
  .confirm-actions.three{flex-direction:column-reverse;}
  .confirm-actions.three button{width:100%; flex:none;}
  .confirm-danger:hover{opacity:.88;}
  /* La bande noire porte le titre ET l'etat du projet : repliee, c'est tout ce
     qui reste a l'ecran, et le compte est justement ce qu'on veut savoir de
     l'exterieur. Elle sert aussi de bouton — un projet long se replie d'un clic. */
  .project-card-head{display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--action); margin:-16px -16px 0; padding:11px 8px 11px 16px; cursor:pointer; user-select:none;}
  .project-card-head:hover{background:#2C2823;}
  .project-card-head h3{font-size:14.5px; font-weight:600; margin:0; color:#fff;}
  .proj-head-text{min-width:0; flex:1;}
  /* Meme langage que le sous-titre de la barre du jour : mono, majuscules, discret. */
  .proj-head-meta{font-family:'IBM Plex Mono',monospace; font-size:9px; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.55); margin-top:3px;}
  .proj-chevron{width:28px; height:28px; padding:0; border:none; background:none; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:rgba(255,255,255,.7); transition:transform .18s ease, background .15s ease; -webkit-tap-highlight-color:transparent;}
  .proj-chevron:hover{background:rgba(255,255,255,.16); color:#fff;}
  .proj-chevron svg{width:12px; height:12px;}
  .proj-chevron.open{transform:rotate(180deg);}
  .project-card-body{margin-top:12px;}
  /* Repliee, la carte n'est plus qu'une bande noire arrondie : le fond blanc
     sous elle n'aurait rien a montrer. */
  .project-card.collapsed{padding-bottom:0;}
  .cols{display:grid; grid-template-columns:1fr 76px 32px 54px 20px; gap:6px; padding:0 2px 6px; font-family:'IBM Plex Mono',monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft);}
  .prow{display:grid; grid-template-columns:1fr 76px 32px 54px 20px; align-items:center; gap:6px; padding:8px 2px; border-top:1px solid var(--border);}
  .prow:first-of-type{border-top:none;}
  .prow .check{width:19px; height:19px; border:1.5px solid var(--border-soft); border-radius:50%; background:var(--surface); display:flex; align-items:center; justify-content:center; padding:0; justify-self:end;}
  .prow .check svg{width:10px; height:10px; opacity:0;}
  .prow.done .check{background:var(--action); border-color:var(--action);}
  .prow.done .check svg{opacity:1; stroke:var(--on-action);}
  .prow .ptitle{font-size:13px; min-width:0;}
  .prow.done .ptitle{color:var(--ink-soft); text-decoration:line-through;}
  /* liste attachée à une tâche de projet (ex. « Faire la valise ») */
  .pchecklist-btn{border:none; background:none; padding:2px 4px; color:var(--ink-soft); display:inline-flex; align-items:center; gap:4px; vertical-align:middle;}
  .pchecklist-btn:hover{color:var(--ink);}
  .pchecklist-btn svg{width:11px; height:11px; transition:transform .15s;}
  .pchecklist-btn.flip svg{transform:rotate(180deg);}
  .mini-add-list{flex-shrink:0; border:1px solid var(--border-soft); background:var(--bg); border-radius:8px; padding:0 9px; color:var(--ink-soft); display:flex; align-items:center;}
  .mini-add-list:hover{color:var(--ink); border-color:var(--ink-soft);}
  .mini-add-list svg{width:14px; height:14px;}
  .pchecklist-count{font-family:'IBM Plex Mono',monospace; font-size:9.5px;}
  .prow-checklist{background:var(--bg); border-top:1px solid var(--border); border-radius:0 0 10px 10px; margin-bottom:2px;}
  .prow-checklist .list-item-row{padding:8px 12px;}
  .prow-checklist .list-item-add{padding:8px 12px;}
  .prow .pproduct{min-width:0; overflow:hidden;}
  .prow .pproduct .product-chip{margin-top:0; max-width:100%; padding:2px 6px 2px 2px;}
  .prow .pproduct .product-chip img{width:20px; height:20px; border-radius:6px;}
  .prow .pdate{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-soft); background:none; border:1px dashed transparent; border-radius:6px; padding:3px 4px; display:flex; align-items:center; gap:4px; justify-content:flex-end; cursor:pointer;}
  .prow .pdate:hover{border-color:var(--border-soft); color:var(--ink);}
  .annual-dot{color:var(--accent); font-size:11px; font-weight:700;}
  .prow .avatar-both .avatar{width:19px; height:19px; font-size:8.5px;}
  .prow .avatar-both .avatar:first-child{margin-right:-7px;}
  .mini-add{display:flex; gap:6px; margin-top:10px;}
  .mini-add input{flex:1; border:1px solid var(--border); background:var(--bg); border-radius:8px; padding:7px 10px; font-size:12.5px;}
  .mini-add input:focus{outline:none; border-color:var(--ink-soft);}
  .mini-add button{border:1px solid var(--border-soft); background:var(--bg); border-radius:8px; padding:0 12px; font-size:13px; font-weight:700; color:var(--ink);}
  .save-row{display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:12px;}
  .save-btn{background:var(--action); color:var(--on-action); border:none; border-radius:999px; padding:8px 18px; font-size:12.5px; font-weight:600;}
  .save-btn:hover{opacity:.85;}
  .saved-tag{font-size:11.5px; color:var(--sam); font-weight:600; opacity:0; transition:opacity .2s;}
  .saved-tag.show{opacity:1;}

  /* ---------- PROGRESSIF: une étape à la fois ---------- */
  .wave-past-toggle{display:flex; align-items:center; gap:6px; background:none; border:none; padding:8px 2px; font-size:12px; font-weight:600; color:var(--ink-soft); margin-top:8px;}
  .wave-past-toggle:hover{color:var(--ink);}
  .wave-past-toggle .wave-chev{width:12px; height:12px;}
  .wave-past-list{display:none; flex-direction:column; gap:4px; margin:2px 0 8px; padding-left:2px;}
  .wave-past-list.open{display:flex;}
  .wave-past-row{display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--ink-soft); padding:6px 10px; background:var(--bg); border-radius:8px;}
  .wave-past-row .wave-past-count{font-family:'IBM Plex Mono',monospace; font-size:10.5px;}

  /* L'étape ouverte : son nom, quand elle se situe, et ce qui la fermera. Le
     reste du corps est celui de toutes les cartes — mêmes colonnes, mêmes
     rangées, donc les mêmes possibilités sur chaque tâche. */
  .etape-entete{display:flex; align-items:baseline; gap:8px; margin:12px 0 2px; flex-wrap:wrap;}
  .etape-nom{font-size:14.5px; font-weight:700; color:var(--ink); font-family:'Fraunces',serif;}
  .etape-quand{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-soft);}
  .etape-regle{
    font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.04em;
    text-transform:uppercase; color:var(--ink-soft); line-height:1.5; margin-bottom:10px;
  }
  .wave-resource{font-size:10.5px; color:var(--ink-soft); font-style:italic; text-decoration:none; margin-top:2px; opacity:.85;}
  .wave-resource:hover{text-decoration:underline;}
  .wave-advance{width:100%; margin-top:12px; background:var(--action); color:#fff; border:none; border-radius:999px; padding:10px; font-size:12.5px; font-weight:600;}
  .wave-advance:hover{opacity:.88;}
  .wave-done-note{text-align:center; font-size:12.5px; color:var(--ink-soft); font-style:italic; margin-top:10px;}


  /* Bloque tant que l espace n est pas choisi : il faut que ca se voie, sinon
     le clic sans effet passe pour un bug. */
  .sheet-confirm:disabled{opacity:.4; cursor:default;}

  /* ---------- ARRANGER UN PROJET ----------
     Deux états, franchement distincts : on fait, ou on arrange. Le bouton
     allumé et le bandeau disent lequel — sans ça, une carte pleine de flèches
     ressemble à une carte cassée. */
  .proj-icon-btn.actif{background:#fff; color:#171512; border-color:#fff;}
  .project-card.en-edition .save-row{justify-content:flex-end;}

  /* ---------- LA RANGÉE D'ARRANGEMENT ----------
     Tâche, indication, image : la même rangée, aux mêmes endroits. La poignée
     toujours tout à gauche, les deux outils toujours tout à droite. Chercher le
     bouton selon la nature de l'élément serait une charge de plus. */
  .suite-edition{display:flex; flex-direction:column; gap:6px;}
  .suite-rangee{
    display:grid; grid-template-columns:24px 1fr auto; align-items:start; gap:9px;
    background:var(--bg); border:1px solid var(--border); border-radius:11px;
    padding:9px 10px;
    /* pan-y : le doigt fait défiler la page normalement. Le glissé est retenu
       par l'appui maintenu, puis par preventDefault (voir js/hints.js). */
    touch-action:pan-y; user-select:none;
  }
  .suite-poignee{display:flex; flex-direction:column; gap:1px; padding-top:1px;}
  .suite-contenu{min-width:0;}
  .suite-titre{font-size:13px; line-height:1.35; display:block; padding-top:2px; word-break:break-word;}
  .suite-marque{
    display:inline-block; margin-left:6px; padding:1px 6px; border-radius:999px;
    background:var(--surface); border:1px solid var(--border-soft);
    font-family:'IBM Plex Mono',monospace; font-size:8.5px; text-transform:uppercase;
    letter-spacing:.06em; color:var(--ink-soft); vertical-align:middle;
  }
  .suite-outils{display:flex; align-items:center; gap:2px; flex-shrink:0; padding-top:1px;}
  .suite-outils button{
    width:22px; height:22px; padding:0; border:none; background:none; color:var(--ink-soft);
    display:flex; align-items:center; justify-content:center; border-radius:6px; cursor:pointer;
  }
  .suite-outils button svg{width:12px; height:12px;}
  .suite-outils button:hover{color:var(--ink); background:var(--surface);}
  .suite-del:hover:not(.armed){color:#E5342A !important;}
  .suite-del.armed{
    width:auto !important; padding:3px 9px !important; border-radius:999px;
    background:#E5342A; color:#fff !important;
    font-family:'Inter',sans-serif; font-size:9.5px; font-weight:700; white-space:nowrap;
  }
  /* Dans la rangée, l'indication n'a plus besoin de son propre cadre. */
  .suite-contenu .hint-body{margin:0;}
  .suite-contenu .hint-img{max-height:220px;}
  .suite-contenu .hint-edit textarea{width:100%; box-sizing:border-box;}

  /* Ce qu'on a en main : légèrement soulevé, et le reste de la liste s'efface un
     peu pour qu'on suive la place où ça va tomber. */
  .suite-rangee.en-glisse{
    background:var(--surface); 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;
  }
  .suite-edition.glisse-en-cours .suite-rangee:not(.en-glisse){opacity:.55;}
  .suite-edition.glisse-en-cours{cursor:grabbing;}

  /* Le genre de l'élément, écrit dans la boîte : une fois dépouillée de sa date
     et de sa case, une tâche courte ressemble à s'y méprendre à une indication
     courte. Le mot lève le doute sans qu'on ait à réfléchir. */
  .suite-genre{
    display:block; margin-bottom:3px;
    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;
  }
  /* La main dit que ça se prend. */
  .suite-edition .suite-rangee{cursor:grab;}
  .suite-edition .suite-rangee.en-glisse{cursor:grabbing;}
  .suite-contenu img{-webkit-user-drag:none; user-drag:none;}

  /* Le pied de la session d'arrangement. « Sauvegarder » est plein, « Annuler »
     ne l'est pas : le geste courant se voit, celui qui jette du travail demande
     une seconde de plus. */
  .edition-actions{display:flex; gap:8px; margin-top:12px;}
  .edition-actions button{
    flex:1; border-radius:999px; padding:11px; font-size:13px; font-weight:600;
    font-family:'Inter',sans-serif;
  }
  .edition-annuler{background:none; border:1px solid var(--border-soft); color:var(--ink);}
  .edition-annuler:hover{border-color:#D6362C; color:#D6362C;}
  .edition-sauver{background:var(--action); border:none; color:#fff;}
  .edition-sauver:hover{opacity:.88;}

  /* La porte vers les modèles, sous la ligne de recherche : même langage que
     « Créer un projet », puisque c'est l'autre façon de commencer. */
  .proj-modeles{
    width:100%; box-sizing:border-box; margin-bottom:16px;
    display:flex; align-items:center; justify-content:center; gap:7px;
    border:1px dashed var(--border); border-radius:999px; background:none;
    padding:10px 14px; color:var(--ink-soft);
    font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600;
  }
  .proj-modeles:hover{border-color:var(--ink-soft); color:var(--ink);}
  .proj-modeles svg{width:13px; height:13px;}

  /* La page pleine. L'alphabet colle sous l'en-tête : il sert pendant qu'on
     défile, pas seulement en haut. */
  .modeles-alpha{
    position:sticky; top:0; z-index:2; display:flex; flex-wrap:wrap; gap:2px;
    padding:8px var(--pad-x); background:var(--bg); border-bottom:1px solid var(--border);
  }
  .modeles-liste{padding:6px var(--pad-x) 24px;}
  .modeles-vide{padding:26px 6px; font-size:13px; line-height:1.6; color:var(--ink-soft); text-align:center;}
  .modeles-lettre{
    padding:14px 2px 5px;
    font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:700;
    text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft);
  }
  .modele-ligne{
    display:flex; align-items:center; gap:8px;
    background:var(--surface); border:1px solid var(--border); border-radius:12px;
    padding:4px 8px 4px 4px; margin-bottom:6px;
  }
  .modele-prendre{
    flex:1; min-width:0; text-align:left; background:none; border:none;
    padding:9px 8px; display:flex; flex-direction:column; gap:2px;
  }
  .modele-titre{font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.3;}
  .modele-meta{
    font-family:'IBM Plex Mono',monospace; font-size:9px; text-transform:uppercase;
    letter-spacing:.06em; color:var(--ink-soft);
  }
  .modele-actions{display:flex; gap:2px; flex-shrink:0;}

  /* Les brouillons récents, en tête de la bibliothèque : on les reprend, on ne
     les cherche pas. Le liseré les distingue d'un modèle fini. */
  .modeles-recents{margin-bottom:6px;}
  .modele-ligne.epingle{border-color:var(--ink-soft); background:var(--bg);}

  /* Les options d'un projet : le corps d'une page, pas une feuille. Le nom du
     projet est dans l'en-tête, la flèche de retour aussi. */
  .proj-menu{padding:14px 16px calc(20px + env(safe-area-inset-bottom));}
  .proj-menu-mot{
    font-size:12.5px; line-height:1.5; color:var(--ink-soft); margin-bottom:12px;
  }
  .proj-menu-item{
    width:100%; display:flex; flex-direction:column; gap:2px; text-align:left;
    border:1px solid var(--border); background:var(--bg); border-radius:13px;
    padding:12px 14px; margin-bottom:7px; font-family:'Inter',sans-serif;
  }
  .proj-menu-item:hover{border-color:var(--ink-soft);}
  .proj-menu-item span{font-size:14px; font-weight:600; color:var(--ink);}
  .proj-menu-item small{font-size:11.5px; color:var(--ink-soft);}
  .proj-menu-note{
    font-size:12.5px; line-height:1.5; color:var(--ink-soft);
    background:var(--bg); border-radius:12px; padding:12px 14px; margin-bottom:7px;
  }

  /* ---------- CE QUE LA CARTE DIT D'ELLE-MÊME ----------
     Le genre était porté par l'onglet où la carte vivait ; il est maintenant
     écrit sur elle. Le compte à rebours ne paraît qu'à l'approche : une date
     dans huit mois n'a rien à dire, une date dans trois jours, si. */
  .proj-head-haut{display:flex; align-items:center; gap:6px; margin-bottom:4px; flex-wrap:wrap;}
  .proj-genre{
    font-family:'IBM Plex Mono',monospace; font-size:8.5px; font-weight:700;
    letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.62);
    border:1px solid rgba(255,255,255,.24); border-radius:5px; padding:2px 6px 1px;
  }
  .proj-urgence{
    font-family:'IBM Plex Mono',monospace; font-size:8.5px; font-weight:700;
    letter-spacing:.08em; text-transform:uppercase; color:#171512;
    background:var(--send); border-radius:5px; padding:2px 6px 1px;
  }
  .proj-urgence.demain{background:#E8B15E;}
  .proj-urgence.aujourdhui{background:#E8B15E;}
  .proj-urgence.passee{background:#D6362C; color:#fff;}

  /* L'espace où le projet vit déjà : présent dans la liste pour qu'on se
     repère, mais pas cliquable — s'y déplacer ne veut rien dire. */
  .proj-menu-item.actuel{opacity:.5;}
  .proj-menu-item:disabled{cursor:default;}
  .proj-menu-item:disabled:hover{border-color:var(--border);}

  .sheet-freq-dit{
    margin:7px 0 0; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
    line-height:1.5; color:var(--ink-soft);
  }

  /* Le rythme proposé par un modèle, dans la feuille : un bouton, pas une
     phrase morte. Celui qui prend le modèle paie ses taxes un autre jour que
     celui qui l'a monté — il doit pouvoir le dire avant de créer. */
  .sheet-freq-btn{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
    border:1px solid var(--border); background:var(--surface); border-radius:11px;
    padding:11px 13px; font-family:'IBM Plex Mono',monospace; font-size:12px;
    font-weight:600; color:var(--ink); text-align:left;
  }
  .sheet-freq-btn:hover{border-color:var(--ink-soft);}
  .sheet-freq-btn span{
    font-family:'Inter',sans-serif; font-size:11.5px; font-weight:600;
    color:var(--accent); flex-shrink:0;
  }
  .sheet-freq-note{
    display:block; margin-top:6px; font-family:'Inter',sans-serif; font-size:11.5px;
    line-height:1.5; color:var(--ink-soft);
  }

  /* Supprimer est la seule ligne du menu qui ne se rattrape pas : elle le dit. */
  .proj-menu-item.danger span{color:#D6362C;}
  .proj-menu-item.danger:hover{border-color:#D6362C;}