/* ==========================================================================
   Keep DraftC — feuille de style
   Meme langage que draftc.com : creme, citron, sauge, rose ; Anton pour les
   titres (toujours en majuscules), Hanken Grotesk pour le texte ; verre
   depoli sur un fond flou.
   ========================================================================== */
:root{
  --lime:#EEFC86; --sage:#7CAEA9; --pink:#E1C8CC; --cream:#F4F3E9;
  --sand:#E3D9A7; --steel:#ABB8B7; --mint:#C9DFDB;
  --sage-deep:#2F5C55; --ink:#000;
  --fg:#000; --fg-2:rgba(0,0,0,.72); --fg-3:rgba(0,0,0,.52);
  --rule:rgba(0,0,0,.12); --rule-2:rgba(0,0,0,.28);
  --hi:var(--sage-deep);
  --verre:rgba(255,255,255,.55); --verre-2:rgba(255,255,255,.78);
  --verre-ligne:rgba(255,255,255,.7);
  --flou:blur(18px) saturate(170%);
  --r:18px; --r-petit:12px;
  --ombre:0 1px 2px rgba(0,0,0,.06), 0 8px 24px -12px rgba(0,0,0,.28);
  --ombre-forte:0 2px 6px rgba(0,0,0,.08), 0 24px 48px -18px rgba(0,0,0,.45);
  --ease:cubic-bezier(.22,1,.36,1);
  --entete:68px;
  --menu-l:260px;
  --carte-l:240px;
  font-family:"Hanken Grotesk", system-ui, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0; min-height:100%}
body{
  background:var(--cream); color:var(--fg);
  font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
[hidden]{display:none !important}
button,input,textarea{font:inherit; color:inherit}
button{cursor:pointer}
img{display:block}

/* ---------------------------------------------------------------- fond -- */
.fond{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
.fond span{position:absolute; border-radius:50%; filter:blur(90px); opacity:.55}
.fond span:nth-child(1){width:52vw; height:52vw; left:-12vw; top:-14vw; background:var(--lime)}
.fond span:nth-child(2){width:46vw; height:46vw; right:-14vw; top:18vh; background:var(--sage); opacity:.42}
.fond span:nth-child(3){width:40vw; height:40vw; left:22vw; bottom:-22vw; background:var(--pink)}

/* -------------------------------------------------------------- icones -- */
.icone{
  display:inline-grid; place-items:center; flex:none;
  width:44px; height:44px; padding:0; border:0; border-radius:50%;
  background:transparent; color:var(--fg-2);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.icone:hover{background:rgba(0,0,0,.07); color:var(--fg)}
.icone:focus-visible,.bouton:focus-visible,.compte:focus-visible{outline:2px solid var(--fg); outline-offset:2px}
.icone svg{width:22px; height:22px}
.icone--petite{width:34px; height:34px}
.icone--petite svg{width:18px; height:18px}
.icone[aria-pressed="true"]{color:var(--fg)}

.bouton{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:40px; padding:0 18px; border-radius:999px;
  border:1px solid var(--rule-2); background:transparent;
  font-weight:600; font-size:.88rem; letter-spacing:.02em;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.bouton:hover{background:rgba(0,0,0,.06)}
.bouton--plein{background:var(--ink); color:#fff; border-color:var(--ink)}
.bouton--plein:hover{background:#222}
.bouton--discret{border-color:transparent}

/* ----------------------------------------------------------- connexion -- */
.connexion{min-height:100vh; min-height:100svh; display:grid; place-items:center; padding:24px}
.connexion__carte{
  width:min(400px,100%); padding:40px 32px 32px;
  background:var(--verre); backdrop-filter:var(--flou); -webkit-backdrop-filter:var(--flou);
  border:1px solid var(--verre-ligne); border-radius:28px; box-shadow:var(--ombre-forte);
  display:flex; flex-direction:column; gap:16px; text-align:center;
}
.connexion__logo{width:150px; margin:0 auto}
.connexion__titre{
  margin:0 0 2px; font-family:Anton, sans-serif; font-weight:400;
  font-size:3.4rem; line-height:1; text-transform:uppercase; letter-spacing:.01em;
}
.connexion__erreur{margin:0; min-height:1.2em; color:#8a1f2b; font-size:.88rem}
.connexion__carte[hidden],.connexion .champ[hidden]{display:none}
.connexion__texte{margin:0; font-size:.92rem; line-height:1.45}
.champ{display:flex; flex-direction:column; gap:6px; text-align:left}
.champ span{font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--hi)}
.champ input{
  height:48px; padding:0 16px; border-radius:999px;
  border:1px solid var(--rule-2); background:rgba(255,255,255,.7);
}
.champ input:focus{outline:2px solid var(--fg); outline-offset:1px}

/* -------------------------------------------------------------- entete -- */
.entete{
  position:sticky; top:0; z-index:20; height:var(--entete);
  display:flex; align-items:center; gap:8px; padding:0 12px;
  background:rgba(244,243,233,.72); backdrop-filter:var(--flou); -webkit-backdrop-filter:var(--flou);
  border-bottom:1px solid var(--rule);
}
.entete__marque{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; margin-right:12px; flex:none}
.entete__marque img{height:22px; width:auto}
.entete__marque span{font-family:Anton, sans-serif; font-size:1.55rem; line-height:1; text-transform:uppercase; padding-top:2px}
.recherche{
  flex:1; min-width:0; max-width:720px; height:48px; display:flex; align-items:center; gap:4px;
  padding:0 6px 0 14px; border-radius:999px;
  background:rgba(255,255,255,.6); border:1px solid var(--verre-ligne);
  transition:background .2s var(--ease), box-shadow .2s var(--ease);
}
.recherche:focus-within{background:#fff; box-shadow:var(--ombre)}
.recherche__loupe{display:grid; color:var(--fg-3)}
.recherche__loupe svg{width:20px; height:20px}
.recherche input{flex:1; min-width:0; height:100%; border:0; background:transparent; outline:none; padding:0 6px}
.recherche input::-webkit-search-cancel-button{display:none}
.entete__actions{display:flex; align-items:center; gap:2px; margin-left:auto}
.etat{font-size:.78rem; color:var(--fg-3); margin-right:6px; white-space:nowrap}
.etat.is-hors-ligne{color:#8a1f2b}
.compte{
  width:38px; height:38px; margin-left:6px; border-radius:50%; border:0;
  background:var(--sage-deep); color:#fff; font-weight:700; font-size:.95rem;
}

/* ---------------------------------------------------------------- menu -- */
.menu{
  position:fixed; top:var(--entete); left:0; bottom:0; z-index:15; width:var(--menu-l);
  display:flex; flex-direction:column; padding-top:8px; transition:width .25s var(--ease);
}
.menu__liste{list-style:none; margin:0; padding:0 0 12px; flex:1; overflow-y:auto; overscroll-behavior:contain}
.menu__item{
  display:flex; align-items:center; gap:14px; width:calc(100% - 12px);
  height:38px; padding:0 0 0 22px; border:0; border-radius:0 999px 999px 0;
  background:transparent; text-align:left; font-weight:500; font-size:.92rem; color:var(--fg-2);
  white-space:nowrap; overflow:hidden;
}
.menu__icone{display:grid; place-items:center; flex:none; width:22px}
.menu__icone svg{width:20px; height:20px}
.menu__texte{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis}
.menu__compte{font-size:.78rem; color:var(--fg-3); margin-right:16px; font-variant-numeric:tabular-nums}
.menu__badge{
  display:grid; place-items:center; min-width:20px; height:20px; padding:0 6px; margin-right:6px;
  border-radius:999px; font-size:.7rem; font-weight:700; background:#A3253A; color:#fff;
}
.menu__badge + .menu__compte{margin-left:-2px}
.menu__item:hover{background:rgba(0,0,0,.06); color:var(--fg)}
.menu__item[aria-current="page"]{background:var(--lime); color:#000; font-weight:700}
.menu__item[aria-current="page"] .menu__compte{color:rgba(0,0,0,.6)}
.menu__item:focus-visible{outline:2px solid var(--fg); outline-offset:-2px}
.menu__item.is-cible{background:var(--mint); color:#000; box-shadow:inset 0 0 0 2px var(--sage-deep)}
.menu__item--espace{font-weight:700; color:var(--fg); margin-top:4px}
.menu__item--projet,.menu__item--label{height:34px; padding-left:40px; font-size:.88rem}
.menu__item--projet.menu__item--sans-espace{padding-left:22px}
.menu__item--inbox .menu__icone,.menu__item--logbook .menu__icone,.menu__item--espace .menu__icone,.menu__item--projet .menu__icone{color:var(--sage-deep)}
.menu__item--upcoming .menu__icone{color:#A3253A}
.menu__item--anytime .menu__icone{color:#4E8C85}
.menu__item--someday .menu__icone{color:#97803A}
.menu__sep{height:1px; margin:8px 12px 8px 22px; background:var(--rule)}
.menu__pied{display:flex; align-items:center; gap:4px; padding:8px 10px 12px 12px; border-top:1px solid var(--rule)}
.menu__nouveau{
  flex:1; display:flex; align-items:center; gap:12px; height:40px; padding:0 10px;
  border:0; border-radius:999px; background:transparent; font-weight:600; font-size:.9rem; color:var(--fg-2); white-space:nowrap; overflow:hidden;
}
.menu__nouveau svg{width:20px; height:20px; flex:none}
.menu__nouveau:hover{background:rgba(0,0,0,.06); color:var(--fg)}
/* menu replie : on ne garde que les icones */
body.menu-replie .menu{width:76px}
body.menu-replie .menu__item{width:52px; margin-left:12px; padding-left:15px; border-radius:999px}
body.menu-replie :is(.menu__texte,.menu__compte,.menu__badge,.menu__nouveau span,#btn-libelles){display:none}
body.menu-replie .menu__pied{padding-left:12px}

/* ------------------------------------------------------------- contenu -- */
.contenu{
  margin-left:var(--menu-l); padding:28px 24px 120px;
  transition:margin .25s var(--ease);
}
body.menu-replie .contenu{margin-left:76px}

.bandeau{
  max-width:760px; margin:0 auto 24px; padding:10px 16px; text-align:center;
  font-size:.9rem; color:var(--fg-2); display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap;
}
.vide{
  max-width:520px; margin:12vh auto 0; text-align:center; color:var(--fg-3);
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.vide svg{width:110px; height:110px; color:rgba(0,0,0,.14)}
.vide p{margin:0; font-size:1.25rem}

.section__titre{
  margin:28px 8px 10px; font-size:.7rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--hi);
}
.section__titre:first-child{margin-top:4px}
.grille{display:flex; gap:16px; align-items:flex-start; margin:0 auto}
.grille__col{flex:1; min-width:0; display:flex; flex-direction:column; gap:16px}
body.vue-liste .grille{max-width:600px}

/* ------------------------------------------------------------- couleurs -- */
[data-couleur]{--n-bg:var(--verre-2); --n-fg:var(--fg); --n-ligne:var(--rule)}
[data-couleur="citron"]{--n-bg:var(--lime)}
[data-couleur="sauge"] {--n-bg:var(--sage)}
[data-couleur="menthe"]{--n-bg:var(--mint)}
[data-couleur="rose"]  {--n-bg:var(--pink)}
[data-couleur="sable"] {--n-bg:var(--sand)}
[data-couleur="acier"] {--n-bg:var(--steel)}
[data-couleur="nuit"]  {--n-bg:var(--sage-deep); --n-fg:#F4F3E9; --n-ligne:rgba(255,255,255,.25)}

/* --------------------------------------------------------------- carte -- */
.carte{
  position:relative; border-radius:var(--r); padding:14px 16px 8px;
  background:var(--n-bg); color:var(--n-fg);
  border:1px solid var(--n-ligne); box-shadow:var(--ombre);
  cursor:default; outline:none;
  transition:box-shadow .2s var(--ease), transform .2s var(--ease);
}
.carte[data-couleur="defaut"]{backdrop-filter:var(--flou); -webkit-backdrop-filter:var(--flou)}
.carte:hover,.carte:focus-visible{box-shadow:var(--ombre-forte)}
.carte:focus-visible{outline:2px solid var(--fg); outline-offset:2px}
.carte.is-selection{outline:2px solid var(--fg)}
.carte__titre{margin:0 34px 6px 0; font-weight:700; font-size:1.02rem; line-height:1.3; word-wrap:break-word}
.carte__texte{
  margin:0 0 6px; white-space:pre-wrap; word-wrap:break-word; color:inherit; opacity:.9;
  display:-webkit-box; -webkit-line-clamp:14; -webkit-box-orient:vertical; overflow:hidden;
}
.carte__texte--court{font-size:1.25rem; line-height:1.35}
.carte__liste{list-style:none; margin:0 0 6px; padding:0}
.carte__liste li{display:flex; gap:8px; align-items:flex-start; padding:2px 0; word-break:break-word}
.carte__liste li::before{
  content:""; flex:none; width:14px; height:14px; margin-top:3px; border-radius:4px;
  border:1.6px solid currentColor; opacity:.55;
}
.carte__liste li.is-fait{text-decoration:line-through; opacity:.55}
.carte__liste li.is-fait::before{background:currentColor}
.carte__plus{font-size:.82rem; opacity:.7; margin:0 0 6px}
.carte__vide{opacity:.5; font-size:1.2rem; margin:4px 0 8px}
.carte__epingle{position:absolute; top:6px; right:6px; opacity:0; color:inherit}
/* sans titre, le texte commence a cote de l'epingle : on lui laisse sa place */
.carte__epingle + :is(.carte__texte,.carte__liste,.carte__vide,.carte__riche){margin-right:30px}
.carte__epingle[aria-pressed="true"]{opacity:1}
.carte:hover .carte__epingle,.carte:focus-within .carte__epingle{opacity:1}
.carte__barre{
  display:flex; gap:2px; margin:2px -10px 0; opacity:0; transition:opacity .2s var(--ease);
}
.carte:hover .carte__barre,.carte:focus-within .carte__barre{opacity:1}
.carte .icone{color:inherit; opacity:.8}
.carte .icone:hover{opacity:1; background:rgba(0,0,0,.08)}
[data-couleur="nuit"] .icone:hover{background:rgba(255,255,255,.14)}
@media (hover:none){
  .carte__barre,.carte__epingle{opacity:1}
  .carte__epingle[aria-pressed="false"]{opacity:.45}
}

.puces{display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 8px}
.puce{
  display:inline-flex; align-items:center; gap:2px; max-width:100%;
  height:26px; padding:0 10px; border-radius:999px;
  background:rgba(0,0,0,.08); font-size:.78rem; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
[data-couleur="nuit"] .puce{background:rgba(255,255,255,.16)}
.puce button{border:0; background:transparent; padding:0 0 0 4px; display:grid; opacity:.6}
.puce button:hover{opacity:1}
.puce button svg{width:14px; height:14px}

/* ------------------------------------------- editeur (composer + fenetre) -- */
.composer{max-width:600px; margin:0 auto 36px}
.composer__ferme{
  display:flex; align-items:center; gap:4px; height:52px; padding:0 8px 0 18px;
  border-radius:var(--r); background:var(--verre-2); border:1px solid var(--rule);
  box-shadow:var(--ombre); backdrop-filter:var(--flou); -webkit-backdrop-filter:var(--flou);
}
.composer__ferme button.composer__invite{
  flex:1; height:100%; border:0; background:transparent; text-align:left;
  font-weight:500; color:var(--fg-3); padding:0;
}
.editeur{
  position:relative; border-radius:var(--r); background:var(--n-bg); color:var(--n-fg);
  border:1px solid var(--n-ligne); box-shadow:var(--ombre-forte);
  padding:14px 16px 8px; display:flex; flex-direction:column;
}
.editeur[data-couleur="defaut"]{background:rgba(255,255,255,.92)}
.editeur textarea{
  display:block; width:100%; border:0; background:transparent; resize:none; outline:none;
  padding:0; margin:0; overflow:hidden; color:inherit;
}
.editeur textarea::placeholder{color:inherit; opacity:.5}
.editeur__titre{font-weight:700; font-size:1.15rem; line-height:1.3; margin:0 40px 10px 0 !important}
.editeur__texte{min-height:24px; line-height:1.5}
.editeur__epingle{position:absolute; top:6px; right:6px; color:inherit}
.editeur__corps{flex:1; overflow:auto}
.editeur__pied{display:flex; align-items:center; gap:2px; margin:8px -10px 0; flex-wrap:wrap}
.editeur__pied .icone{color:inherit; opacity:.8}
.editeur__pied .icone:hover{opacity:1; background:rgba(0,0,0,.08)}
.editeur__date{font-size:.75rem; opacity:.6; margin:6px 0 0; text-align:right}
.editeur__pied .bouton{margin-left:auto; border-color:transparent; color:inherit}
.editeur__pied .bouton:hover{background:rgba(0,0,0,.08)}

/* liste a cocher dans l'editeur */
.cases{list-style:none; margin:0; padding:0}
.case{display:flex; align-items:flex-start; gap:8px; padding:2px 0; border-radius:8px}
.case:hover .case__suppr{opacity:.7}
.case input[type=checkbox]{
  appearance:none; -webkit-appearance:none; flex:none;
  width:18px; height:18px; margin:3px 0 0; border:1.8px solid currentColor; border-radius:5px; opacity:.7; cursor:pointer;
  display:grid; place-items:center;
}
.case input[type=checkbox]:checked{background:currentColor; opacity:.55}
.case input[type=checkbox]:checked::after{
  content:""; width:5px; height:9px; margin-top:-2px; border:solid var(--n-bg); border-width:0 2px 2px 0; transform:rotate(45deg);
}
.case input[type=checkbox]:focus-visible{outline:2px solid currentColor; outline-offset:2px}
.case textarea{flex:1; line-height:1.45}
.case.is-fait textarea{text-decoration:line-through; opacity:.55}
.case__suppr{opacity:0; width:26px !important; height:26px !important}
.case__suppr svg{width:16px !important; height:16px !important}
.case--ajout{opacity:.6; cursor:text}
.case--ajout span{flex:none; width:18px; text-align:center; font-size:1.2rem; line-height:1}
.cases__sep{
  display:flex; align-items:center; gap:6px; margin:10px 0 4px; padding:6px 0 0;
  border-top:1px solid var(--n-ligne); font-size:.85rem; opacity:.75;
  background:none; border-left:0; border-right:0; border-bottom:0; width:100%; text-align:left;
}
.cases__sep svg{width:18px; height:18px; transition:transform .2s var(--ease)}
.cases__sep[aria-expanded="false"] svg{transform:rotate(-90deg)}

/* --------------------------------------------------------------- fenetre -- */
.voile{
  position:fixed; inset:0; z-index:40; display:grid; place-items:center; padding:24px;
  background:rgba(20,30,28,.42); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  animation:apparait .18s var(--ease);
}
.fenetre{width:min(620px,100%); max-height:calc(100vh - 48px); display:flex; flex-direction:column}
.fenetre .editeur{max-height:calc(100vh - 48px); animation:monte .22s var(--ease)}
.fenetre--simple{
  background:rgba(255,255,255,.94); border-radius:24px; box-shadow:var(--ombre-forte);
  padding:24px; gap:14px; animation:monte .22s var(--ease); overflow:auto;
}
.fenetre--simple h2{margin:0; font-family:Anton, sans-serif; font-weight:400; text-transform:uppercase; font-size:1.7rem; line-height:1.05}
.fenetre--simple p{margin:0; color:var(--fg-2)}
.fenetre__actions{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; margin-top:6px}
.fenetre ol{margin:0; padding-left:20px; color:var(--fg-2)}
.fenetre ol li{margin:4px 0}
@keyframes apparait{from{opacity:0}}
@keyframes monte{from{opacity:0; transform:translateY(12px) scale(.98)}}

/* libelles : liste editable */
.libelles{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px}
.libelles li{display:flex; align-items:center; gap:6px}
.libelles input{
  flex:1; height:40px; padding:0 12px; border:1px solid transparent; border-radius:10px; background:transparent;
}
.libelles input:hover{border-color:var(--rule)}
.libelles input:focus{outline:none; border-color:var(--fg); background:#fff}

/* --------------------------------------------------------------- popover -- */
.popover{
  position:fixed; z-index:60; min-width:180px; max-width:300px; padding:8px;
  background:rgba(255,255,255,.96); border-radius:16px; box-shadow:var(--ombre-forte);
  border:1px solid var(--rule); animation:apparait .12s var(--ease);
}
.popover__item{
  display:flex; align-items:center; gap:12px; width:100%; min-height:40px; padding:0 12px;
  border:0; border-radius:10px; background:transparent; text-align:left; font-size:.92rem;
}
.popover__item:hover,.popover__item:focus-visible{background:rgba(0,0,0,.06); outline:none}
.popover__item svg{width:18px; height:18px; flex:none; color:var(--fg-2)}
.popover__info{padding:8px 12px 10px; font-size:.82rem; color:var(--fg-3); border-bottom:1px solid var(--rule); margin-bottom:6px}
.popover__info strong{display:block; color:var(--fg); font-size:.95rem}
.popover__titre{padding:6px 12px; font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--hi)}
.popover input[type=text]{
  width:100%; height:38px; margin:0 0 6px; padding:0 12px; border-radius:10px; border:1px solid var(--rule-2); background:#fff;
}
.popover input[type=text]:focus{outline:2px solid var(--fg); outline-offset:0}
.popover label.popover__item{cursor:pointer}
.popover label.popover__item input{width:16px; height:16px; accent-color:var(--sage-deep)}
.popover__defile{max-height:240px; overflow:auto}
.pastilles{display:grid; grid-template-columns:repeat(4,36px); gap:8px; padding:4px}
.pastille{
  width:36px; height:36px; border-radius:50%; padding:0;
  background:var(--n-bg); border:2px solid rgba(0,0,0,.12); display:grid; place-items:center;
}
.pastille[data-couleur="defaut"]{background:#fff}
.pastille:hover{border-color:rgba(0,0,0,.5)}
.pastille[aria-pressed="true"]{border-color:var(--fg)}
.pastille svg{width:18px; height:18px; color:var(--n-fg)}

/* ----------------------------------------------------------------- toast -- */
.toast{
  position:fixed; left:24px; bottom:24px; z-index:70;
  display:flex; align-items:center; gap:16px; padding:12px 12px 12px 20px;
  background:#1d1d1c; color:#F4F3E9; border-radius:14px; box-shadow:var(--ombre-forte);
  font-size:.92rem; animation:monte .2s var(--ease); max-width:calc(100vw - 48px);
}
.toast button{border:0; background:transparent; color:var(--lime); font-weight:700; padding:6px 10px; border-radius:8px}
.toast button:hover{background:rgba(255,255,255,.08)}

/* ------------------------------------------------------------- telephone -- */
@media (max-width:760px){
  :root{--entete:60px}
  .entete{padding:0 6px; gap:2px}
  .entete__marque{margin-right:4px}
  .entete__marque img{display:none}
  .entete__marque span{font-size:1.35rem}
  .recherche{height:42px}
  .etat{display:none}
  /* telephone : le bouton Actualiser reste visible ; « Annuler » ne prend de place que s'il sert */
  #btn-annuler:disabled{display:none}
  .menu{
    width:min(300px,84vw); background:rgba(244,243,233,.97); box-shadow:var(--ombre-forte);
    transform:translateX(-102%); transition:transform .25s var(--ease);
  }
  body.menu-ouvert .menu{transform:none}
  body.menu-replie .menu{width:min(300px,84vw)}
  body.menu-replie .menu__item{width:calc(100% - 12px); margin-left:0; padding-left:22px; border-radius:0 999px 999px 0}
  body.menu-replie :is(.menu__texte,.menu__compte,.menu__badge,.menu__nouveau span,#btn-libelles){display:revert}
  body.menu-replie .menu__texte{display:block}
  .contenu,body.menu-replie .contenu{margin-left:0; padding:18px 10px 120px}
  .grille,.grille__col{gap:10px}
  .carte{padding:12px 12px 6px}
  /* deux colonnes etroites : les quatre boutons de la carte doivent tenir */
  .carte__barre{justify-content:space-between; margin:2px -6px 0}
  .carte__barre .icone{width:36px; height:36px}
  .carte__barre .icone svg{width:20px; height:20px}
  .voile{padding:0; place-items:stretch}
  .fenetre{width:100%; max-height:none}
  .fenetre .editeur{border-radius:0; max-height:none; height:100vh; height:100dvh; padding-top:calc(14px + env(safe-area-inset-top))}
  .fenetre--simple{border-radius:0; min-height:100dvh}
  .toast{left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom))}
}


/* ==========================================================================
   v2 — TACHES (facon Things), EDITEUR DE TEXTE, THEME SOMBRE
   ========================================================================== */
:root{--rouge:#A3253A; --olive:#6B7A1A; --largeur:760px}
.plein-lime{fill:var(--lime); stroke:var(--olive)}

/* ------------------------------------------------------- en-tete de vue -- */
.vue__tete{display:flex; align-items:center; gap:14px; max-width:var(--largeur); margin:4px auto 18px; padding:0 12px}
body.vue-notes .vue__tete{max-width:none; padding:0 8px}
.vue__icone{display:grid; place-items:center; flex:none; color:var(--sage-deep)}
.vue__icone svg{width:34px; height:34px}
.vue__tete--upcoming .vue__icone{color:var(--rouge)}
.vue__tete--anytime .vue__icone{color:#4E8C85}
.vue__tete--someday .vue__icone{color:#97803A}
.vue__titre,.vue__titre-champ{
  margin:0; font-family:Anton, sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(1.9rem,4vw,2.7rem); line-height:1.05; letter-spacing:.01em; color:var(--fg);
}
.vue__titre-champ{flex:1; min-width:0; padding:0; border:0; background:transparent; outline:none}
.vue__titre-champ::placeholder{color:var(--fg-3)}
.vue__menu{flex:none}
.vue__infos{display:flex; flex-wrap:wrap; align-items:center; gap:14px; max-width:var(--largeur); margin:-10px auto 12px; padding:0 12px 0 60px; font-size:.85rem}
.vue__notes{max-width:var(--largeur); margin:0 auto 18px; padding:0 12px 0 60px; color:var(--fg-2)}
.lien-discret{display:inline-flex; align-items:center; gap:6px; padding:0; border:0; background:none; color:var(--fg-3); font-size:.85rem; font-weight:600}
.lien-discret svg{width:16px; height:16px}
.lien-discret:hover{color:var(--fg)}
.lien-faits{display:block; max-width:var(--largeur); margin:18px auto 6px; padding:0 12px; width:100%; text-align:left}
.pastille-etat{font-size:.78rem; font-weight:600; padding:2px 10px; border-radius:999px; background:var(--mint); color:var(--sage-deep)}
.aide{max-width:var(--largeur); margin:10px auto; padding:0 12px; color:var(--fg-3)}

/* -------------------------------------------------------- filtres libelles -- */
.filtres{display:flex; flex-wrap:wrap; gap:6px; max-width:var(--largeur); margin:0 auto 14px; padding:0 12px 0 60px}
.filtre{height:28px; padding:0 12px; border:0; border-radius:999px; background:transparent; color:var(--fg-2); font-weight:600; font-size:.8rem}
.filtre:hover{background:rgba(0,0,0,.06)}
.filtre[aria-pressed="true"]{background:var(--sage-deep); color:#fff}

/* --------------------------------------------------------------- sections -- */
.section{
  display:flex; align-items:center; gap:10px; max-width:var(--largeur); margin:28px auto 4px;
  padding:0 12px 8px; border-bottom:1px solid var(--rule); font-size:.95rem; font-weight:700; color:var(--hi);
}
.section__icone{display:grid; place-items:center}
.section__icone:empty{display:none}
.section__icone svg{width:18px; height:18px}
.section--lien{cursor:pointer}
.section--lien:hover .section__texte{text-decoration:underline; text-underline-offset:3px}
.section--soir{color:#4A5A8C}
.section--date{color:var(--fg-2)}
.jour{display:flex; align-items:baseline; gap:12px; max-width:var(--largeur); margin:30px auto 4px; padding:0 12px 6px; border-bottom:1px solid var(--rule)}
.jour__num{font-family:Anton, sans-serif; font-size:2rem; line-height:1}
.jour__nom{font-weight:700; color:var(--fg-2)}

/* ----------------------------------------------------------------- taches -- */
.taches{list-style:none; max-width:var(--largeur); margin:0 auto; padding:0}
.taches--vide{min-height:10px}
.tache{
  position:relative; display:flex; align-items:flex-start; gap:12px; padding:9px 12px;
  border-radius:12px; outline:none; cursor:default; transition:background .15s var(--ease), opacity .3s var(--ease);
}
.tache:hover{background:rgba(255,255,255,.6)}
.tache:focus-visible{box-shadow:0 0 0 2px var(--fg)}
.tache__case{
  flex:none; display:grid; place-items:center; width:20px; height:20px; margin-top:1px; padding:0;
  border:1.7px solid var(--fg-3); border-radius:6px; background:transparent; color:transparent;
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.tache__case svg{width:14px; height:14px; stroke-width:2.8}
.tache__case:hover{border-color:var(--sage-deep); color:rgba(47,92,85,.35)}
.tache__case[aria-checked="true"],.tache.is-fait .tache__case{background:var(--sage-deep); border-color:var(--sage-deep); color:#fff}
.tache.is-fait .tache__titre{color:var(--fg-3); text-decoration:line-through}
.tache__corps{flex:1; min-width:0}
.tache__l1{display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-height:22px}
.tache__titre{font-size:.98rem; line-height:1.35; word-break:break-word}
.tache__titre.is-vide{color:var(--fg-3)}
.tache__ind,.tache__marque{display:inline-grid; place-items:center; color:var(--fg-3)}
.tache__ind svg{width:15px; height:15px}
.tache__marque svg{width:17px; height:17px}
.tache__sous{margin-top:1px; font-size:.8rem; color:var(--fg-3)}
.tache .icone--petite{margin:-6px -6px -6px 0}
.tache.drop-avant{box-shadow:inset 0 2px 0 var(--sage-deep)}
.tache.drop-apres{box-shadow:inset 0 -2px 0 var(--sage-deep)}
.tache.is-glisse{opacity:.35}
.taches.is-cible,.rubrique.is-cible{box-shadow:inset 0 0 0 2px var(--sage-deep); border-radius:12px}
.etiquette{display:inline-flex; align-items:center; gap:2px; padding:0 8px; border:1px solid var(--rule-2); border-radius:999px; font-size:.72rem; line-height:1.55; color:var(--fg-2)}
.etiquette--pleine{border-color:transparent; background:var(--mint); color:var(--sage-deep); font-weight:600}
.etiquette button{display:grid; padding:0; border:0; background:none; color:inherit; opacity:.6}
.etiquette button svg{width:12px; height:12px}
.pastille-date{padding:1px 7px; border-radius:6px; background:rgba(0,0,0,.07); font-size:.72rem; font-weight:700; color:var(--fg-2)}
.echeance{display:inline-flex; align-items:center; gap:4px; margin-top:2px; font-size:.78rem; color:var(--fg-3); white-space:nowrap}
.echeance svg{width:14px; height:14px}
.echeance.is-proche{color:#8A6300}
.echeance.is-urgent{color:var(--rouge); font-weight:700}

/* tache ouverte : une carte dans la liste, comme dans Things */
.tache--ouverte{
  flex-direction:column; align-items:stretch; gap:8px; margin:10px -6px; padding:14px 16px 10px;
  background:rgba(255,255,255,.92); border:1px solid var(--rule); border-radius:16px; box-shadow:var(--ombre-forte);
  animation:monte .18s var(--ease);
}
.tache--ouverte:hover{background:rgba(255,255,255,.92)}
.tache__haut{display:flex; align-items:center; gap:12px}
.tache__champ{flex:1; min-width:0; padding:2px 0; border:0; background:transparent; outline:none; font-size:1.05rem; font-weight:600}
.tache__notes,.tache__cases,.tache__pied{margin-left:32px}
.tache__notes{--n-ligne:var(--rule); font-size:.95rem; color:var(--fg-2)}
.tache__cases:empty{display:none}
.tache__pied{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:4px}
.tache__pied .puces{flex:1; margin:0}
.tache__outils{display:flex; align-items:center; gap:2px; margin-left:auto}
.tache__outils .icone{width:36px; height:36px}
.tache__outils .icone svg{width:19px; height:19px}
.puce-action{
  display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 9px; border:0; border-radius:999px;
  background:transparent; color:var(--fg-2); font-size:.82rem; font-weight:600;
}
.puce-action svg{width:19px; height:19px}
.puce-action:hover{background:rgba(0,0,0,.07); color:var(--fg)}
.puce-action.is-pose{background:rgba(0,0,0,.06); color:var(--fg)}
.puce-action.is-echeance{color:var(--rouge)}
.cases--ronds input[type=checkbox]{border-radius:50%; border-color:var(--sage-deep); opacity:.9}
.cases--ronds input[type=checkbox]:checked{background:var(--sage-deep)}
.tache--corbeille .tache__marque{color:var(--sage-deep)}

/* ------------------------------------------------------- projets, rubriques -- */
.projets-lignes{list-style:none; max-width:var(--largeur); margin:0 auto 12px; padding:0}
.projet-ligne{display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:12px; cursor:pointer; outline:none}
.projet-ligne:hover{background:rgba(255,255,255,.6)}
.projet-ligne:focus-visible{box-shadow:0 0 0 2px var(--fg)}
.projet-ligne__pie{display:grid; color:var(--sage-deep)}
.projet-ligne__pie svg{width:20px; height:20px}
.projet-ligne__titre{flex:1; min-width:0; font-weight:600}
.projet-ligne__nb{font-size:.8rem; color:var(--fg-3)}
.projet-ligne.is-fait .projet-ligne__titre{color:var(--fg-3)}
.rubrique{display:flex; align-items:center; gap:2px; max-width:var(--largeur); margin:26px auto 4px; padding:0 4px 4px 12px; border-bottom:1px solid var(--rule)}
.rubrique__titre{flex:1; min-width:0; padding:4px 0; border:0; background:transparent; outline:none; font-size:1rem; font-weight:700; color:var(--hi)}
.rubrique .icone{opacity:0}
.rubrique:hover .icone,.rubrique:focus-within .icone{opacity:1}
@media (hover:none){ .rubrique .icone{opacity:.7} }

/* -------------------------------------------------------------- barre du bas -- */
.barre-bas{
  position:sticky; bottom:18px; z-index:10; display:flex; gap:2px; width:max-content; margin:44px auto 0; padding:5px;
  border-radius:999px; background:var(--verre-2); border:1px solid var(--verre-ligne); box-shadow:var(--ombre);
  backdrop-filter:var(--flou); -webkit-backdrop-filter:var(--flou);
}
.barre-bas__b{display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--fg-2)}
.barre-bas__b svg{width:22px; height:22px}
.barre-bas__b:hover:not(:disabled){background:rgba(0,0,0,.07); color:var(--fg)}
.barre-bas__b:disabled{opacity:.3; cursor:default}
.barre-bas__b:first-child{color:var(--sage-deep)}
.barre-bas__b:focus-visible{outline:2px solid var(--fg); outline-offset:1px}

/* ---------------------------------------------------------------- calendrier -- */
.popover--date{width:296px; max-width:calc(100vw - 16px)}
.cal{padding:4px 2px 6px}
.cal__tete{display:flex; align-items:center; justify-content:space-between; padding:0 2px; font-size:.88rem; font-weight:700; text-transform:capitalize}
.cal__grille{display:grid; grid-template-columns:repeat(7,36px); justify-content:center; gap:2px}
.cal__jour{padding:4px 0; text-align:center; font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-3)}
.cal__d{display:grid; place-items:center; width:36px; height:32px; padding:0; border:0; border-radius:8px; background:transparent; font-size:.86rem}
.cal__d:hover:not(:disabled){background:rgba(0,0,0,.07)}
.cal__d:disabled{opacity:.3; cursor:default}
.cal__d svg{width:17px; height:17px}
.cal__d.is-choisi{background:var(--sage-deep); color:#fff}
.cal__d:focus-visible{outline:2px solid var(--fg)}
.popover{max-width:320px}
.popover__item small{margin-left:auto; padding-left:10px; font-size:.76rem; color:var(--fg-3); white-space:nowrap}
.popover__item.is-actif{background:rgba(0,0,0,.06); font-weight:700}
.popover__item--retrait{padding-left:32px}
.popover__item svg .plein-lime{fill:var(--lime)}
.popover__sep{height:1px; margin:6px 4px; background:var(--rule)}
.popover__actions{display:flex; justify-content:flex-end; gap:6px; margin-top:4px}
.popover__vide{margin:0; padding:6px 12px; font-size:.82rem; color:var(--fg-3)}
.pastilles--texte{grid-template-columns:repeat(5,36px)}
.pastille--aucune{background:transparent !important; color:var(--fg-3)}
.pastille--encre{font-weight:800; font-size:1rem}

/* ------------------------------------------------------------ editeur riche -- */
.riche{display:flex; flex-direction:column; min-width:0}
.riche__barre{
  display:flex; flex-wrap:wrap; gap:2px 4px; margin:0 0 8px; padding:0 0 6px;
  border-bottom:1px solid var(--n-ligne, var(--rule));
}
.riche--compact .riche__barre{display:none}
.riche--compact:focus-within .riche__barre,.riche--compact.is-actif .riche__barre{display:flex}
.riche__groupe{display:flex; gap:1px; padding-right:4px; border-right:1px solid var(--n-ligne, var(--rule))}
.riche__groupe:last-child{border-right:0}
.riche__b{
  display:grid; place-items:center; min-width:30px; height:30px; padding:0 5px; border:0; border-radius:8px;
  background:transparent; color:inherit; opacity:.72; font-size:.74rem; font-weight:800; letter-spacing:.02em;
}
.riche__b svg{width:17px; height:17px}
.riche__b:hover{opacity:1; background:rgba(0,0,0,.08)}
.riche__b[aria-pressed="true"]{opacity:1; background:rgba(0,0,0,.12)}
.riche__zone{position:relative; min-height:24px; outline:none; line-height:1.55; word-wrap:break-word}
.riche__zone.is-vide::before{content:attr(data-placeholder); position:absolute; left:0; top:0; opacity:.5; pointer-events:none}

/* le texte mis en forme, partout ou il s'affiche */
.riche-contenu > :first-child{margin-top:0}
.riche-contenu > :last-child{margin-bottom:0}
.riche-contenu p{margin:0 0 .35em}
.riche-contenu h1{margin:.45em 0 .25em; font-family:Anton, sans-serif; font-weight:400; text-transform:uppercase; font-size:1.55em; line-height:1.1; letter-spacing:.01em}
.riche-contenu h2{margin:.5em 0 .2em; font-size:1.22em; font-weight:700; line-height:1.25}
.riche-contenu h3{margin:.6em 0 .2em; font-size:.8em; font-weight:800; text-transform:uppercase; letter-spacing:.12em; opacity:.85}
.riche-contenu ul,.riche-contenu ol{margin:.2em 0 .45em; padding-left:1.4em}
.riche-contenu li{margin:.1em 0}
.riche-contenu blockquote{margin:.45em 0; padding:.05em 0 .05em .9em; border-left:3px solid currentColor; font-style:italic; opacity:.85}
.riche-contenu pre{margin:.45em 0; padding:.6em .8em; border-radius:8px; background:rgba(0,0,0,.07); font-family:ui-monospace, Menlo, monospace; font-size:.84em; white-space:pre-wrap}
.riche-contenu code{padding:.05em .35em; border-radius:5px; background:rgba(0,0,0,.08); font-family:ui-monospace, Menlo, monospace; font-size:.86em}
.riche-contenu pre code{padding:0; background:none}
.riche-contenu a{color:inherit; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px}
.riche-contenu hr{margin:.8em 0; border:0; border-top:1px solid currentColor; opacity:.25}
.riche-contenu mark{background:var(--lime); color:#111; padding:0 .1em; border-radius:3px}
.riche-contenu span[style*="background-color"]{color:#111; padding:0 .1em; border-radius:3px}
.carte__riche{margin:0 0 6px; max-height:24em; overflow:hidden; word-wrap:break-word}
.carte__riche--court{font-size:1.25rem; line-height:1.35}

/* ------------------------------------------------------------------ divers -- */
.formulaire{display:flex; flex-direction:column; gap:14px}
.raccourcis{width:100%; border-collapse:collapse; font-size:.9rem}
.raccourcis td{padding:6px 4px; border-bottom:1px solid var(--rule); vertical-align:top}
.raccourcis td:first-child{white-space:nowrap; width:1%; padding-right:14px}
kbd{display:inline-block; padding:1px 7px; border:1px solid var(--rule-2); border-bottom-width:2px; border-radius:6px; font-family:inherit; font-size:.8rem; font-weight:700; background:rgba(255,255,255,.6)}
.libelles__nb{min-width:24px; text-align:right; color:var(--fg-3)}

/* ---------------------------------------------------------------- telephone -- */
@media (max-width:760px){
  .vue__tete{margin-bottom:12px}
  .vue__icone svg{width:28px; height:28px}
  .vue__infos,.vue__notes,.filtres{padding-left:12px}
  .tache__notes,.tache__cases,.tache__pied{margin-left:0}
  .tache__outils{margin-left:0; width:100%; justify-content:space-between}
  .tache--ouverte{margin:8px -4px}
  .riche__barre{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none}
  .riche__barre::-webkit-scrollbar{display:none}
  .barre-bas{bottom:calc(12px + env(safe-area-inset-bottom))}
  .cal__grille{grid-template-columns:repeat(7,34px)}
}

/* ================================================================ SOMBRE == */
:root[data-theme="sombre"]{
  --cream:#141B1A; --fg:#ECEBE3; --fg-2:rgba(236,235,227,.76); --fg-3:rgba(236,235,227,.5);
  --rule:rgba(255,255,255,.1); --rule-2:rgba(255,255,255,.24); --hi:#9FD0C9;
  --verre:rgba(30,40,38,.6); --verre-2:rgba(30,40,38,.82); --verre-ligne:rgba(255,255,255,.08);
  --ombre:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.7);
  --ombre-forte:0 2px 6px rgba(0,0,0,.35), 0 24px 48px -18px rgba(0,0,0,.85);
  --mint:#2C4542; color-scheme:dark;
}
[data-theme="sombre"] body{background:var(--cream)}
[data-theme="sombre"] .fond span{opacity:.14}
[data-theme="sombre"] .fond span:nth-child(2){opacity:.2}
[data-theme="sombre"] .entete{background:rgba(20,27,26,.78)}
[data-theme="sombre"] .entete__marque img,[data-theme="sombre"] .connexion__logo{filter:invert(1)}
[data-theme="sombre"] .recherche{background:rgba(255,255,255,.06)}
[data-theme="sombre"] .recherche:focus-within{background:#1F2826}
[data-theme="sombre"] :is(.icone,.menu__item,.menu__nouveau,.filtre,.puce-action,.barre-bas__b,.cal__d,.popover__item,.riche__b,.bouton):hover:not(:disabled):not([aria-current]):not([aria-pressed="true"]):not(.is-choisi):not(.bouton--plein){background:rgba(255,255,255,.08)}
[data-theme="sombre"] :is(.tache,.projet-ligne):hover{background:rgba(255,255,255,.05)}
[data-theme="sombre"] .tache--ouverte,[data-theme="sombre"] .tache--ouverte:hover{background:#1F2826}
[data-theme="sombre"] :is(.popover,.fenetre--simple){background:#1F2826; border-color:var(--rule)}
[data-theme="sombre"] .popover input[type=text],[data-theme="sombre"] .champ input,[data-theme="sombre"] .libelles input:focus{background:#141B1A; color:var(--fg)}
[data-theme="sombre"] .bouton--plein{background:var(--lime); color:#000; border-color:var(--lime)}
[data-theme="sombre"] .toast{background:#2A3634}
[data-theme="sombre"] .connexion__carte{background:rgba(30,40,38,.7)}
[data-theme="sombre"] .pastille-date,[data-theme="sombre"] .popover__item.is-actif,[data-theme="sombre"] .puce-action.is-pose{background:rgba(255,255,255,.1)}
[data-theme="sombre"] .tache__case[aria-checked="true"],[data-theme="sombre"] .tache.is-fait .tache__case,[data-theme="sombre"] .cal__d.is-choisi,[data-theme="sombre"] .filtre[aria-pressed="true"]{background:#4E8C85; border-color:#4E8C85}
[data-theme="sombre"] :is(.vue__icone,.menu__item--inbox .menu__icone,.menu__item--logbook .menu__icone,.menu__item--espace .menu__icone,.menu__item--projet .menu__icone,.projet-ligne__pie){color:#7CC0B6}
[data-theme="sombre"] .etiquette--pleine{color:#BFE3DD}
[data-theme="sombre"] .echeance.is-urgent,[data-theme="sombre"] .puce-action.is-echeance{color:#FF8A9A}
[data-theme="sombre"] .echeance.is-proche{color:#E7C46A}
[data-theme="sombre"] .section--soir{color:#9DB0EA}
[data-theme="sombre"] .menu__item--upcoming .menu__icone,[data-theme="sombre"] .vue__tete--upcoming .vue__icone{color:#FF8A9A}
[data-theme="sombre"] kbd{background:rgba(255,255,255,.06)}
[data-theme="sombre"] .composer__ferme{background:rgba(30,40,38,.82)}
/* menu du telephone en sombre : fond fonce, sinon le texte clair disparait sur le creme */
@media (max-width:760px){ [data-theme="sombre"] .menu{background:#141B1A} }
[data-theme="sombre"] .editeur[data-couleur="defaut"]{background:#1F2826}
[data-theme="sombre"] .riche-contenu :is(pre,code){background:rgba(255,255,255,.08)}
/* les couleurs des notes, assombries pour garder un texte clair lisible */
[data-theme="sombre"] [data-couleur]{--n-fg:#ECEBE3; --n-ligne:rgba(255,255,255,.12)}
[data-theme="sombre"] [data-couleur="defaut"]{--n-bg:rgba(30,40,38,.82)}
[data-theme="sombre"] [data-couleur="citron"]{--n-bg:#4A5221}
[data-theme="sombre"] [data-couleur="sauge"]{--n-bg:#355B57}
[data-theme="sombre"] [data-couleur="menthe"]{--n-bg:#2E4441}
[data-theme="sombre"] [data-couleur="rose"]{--n-bg:#55393E}
[data-theme="sombre"] [data-couleur="sable"]{--n-bg:#4D4630}
[data-theme="sombre"] [data-couleur="acier"]{--n-bg:#3B4544}
[data-theme="sombre"] [data-couleur="nuit"]{--n-bg:#1B3631}
[data-theme="sombre"] .pastille[data-couleur="defaut"]{background:#2A3634}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}
/* hors des notes, les titres de section suivent la colonne des taches */
body:not(.vue-notes) .section__titre{max-width:var(--largeur); margin-left:auto; margin-right:auto; padding:0 12px}

/* ------------------------------------------------- editeur : options v3 -- */
.riche__b--menu{display:inline-flex; gap:2px; min-width:auto; padding:0 6px 0 8px; font-size:.78rem; font-weight:700; letter-spacing:0}
.riche__b--menu svg{width:14px; height:14px}
.riche__b-texte{min-width:3.6em; text-align:left; white-space:nowrap}
.apercu-style--h1 span{font-family:Anton, sans-serif; text-transform:uppercase; font-size:1.25em}
.apercu-style--h2 span{font-weight:700; font-size:1.12em}
.apercu-style--h3 span{font-weight:800; font-size:.78em; text-transform:uppercase; letter-spacing:.12em}
.apercu-style--blockquote span{font-style:italic; border-left:3px solid currentColor; padding-left:8px}
.apercu-style--pre span{font-family:ui-monospace, Menlo, monospace; font-size:.88em}
.pastilles--texte{grid-template-columns:repeat(6,36px)}
/* tailles : des mots-cles CSS absolus, ramenes a des tailles relatives au texte */
.riche-contenu [style*="font-size: small"]{font-size:.85em !important}
.riche-contenu [style*="font-size: medium"]{font-size:1em !important}
.riche-contenu [style*="font-size: large"]{font-size:1.2em !important}
.riche-contenu [style*="font-size: x-large"]{font-size:1.45em !important}
.riche-contenu [style*="font-size: xx-large"]{font-size:1.8em !important; line-height:1.2}
.riche-contenu [style*="Caveat"]{font-size:1.25em}
.riche-contenu sup,.riche-contenu sub{font-size:.72em; line-height:0}
.riche-contenu s{text-decoration-thickness:1.5px}
/* en sombre, les encres foncees sont eclaircies pour rester lisibles */
[data-theme="sombre"] .riche-contenu span[style^="color"]{filter:brightness(1.9) saturate(.85)}

/* ------------------------------------------------ titres + « T » flottant -- */
/* titres modifiables : la zone prend directement la place de l'ancien champ */
.riche--ligne{display:contents}
.riche__zone--ligne{min-height:1.3em; line-height:1.3; cursor:text}
.riche__zone--ligne.tache__champ{line-height:1.45}
.riche__zone--ligne.vue__titre-champ{line-height:1.05}
.riche__zone--ligne.vue__titre-champ.is-vide::before{color:var(--fg-3); opacity:1}
/* le T : apparait a cote du texte selectionne */
.riche-t{
  position:fixed; z-index:56; display:grid; place-items:center; width:32px; height:32px; padding:0 0 1px;
  border:0; border-radius:10px; background:var(--sage-deep); color:#fff; box-shadow:var(--ombre-forte);
  font-family:Anton, sans-serif; font-size:1.15rem; line-height:1; animation:apparait .12s var(--ease);
}
.riche-t:hover{background:#000}
/* la barre de mise en forme, posee au-dessus de la selection */
.riche-flot{
  position:fixed; z-index:55; max-width:min(760px, calc(100vw - 16px)); padding:6px;
  background:rgba(255,255,255,.97); border:1px solid var(--rule); border-radius:14px; box-shadow:var(--ombre-forte);
  color:var(--fg); animation:apparait .12s var(--ease);
}
.riche-flot .riche__barre{display:flex; margin:0; padding:0; border:0}
.riche-flot .riche__groupe{border-right-color:var(--rule)}
[data-theme="sombre"] .riche-flot{background:#1F2826; border-color:var(--rule)}
[data-theme="sombre"] .riche-t{background:var(--lime); color:#111}

/* --------------------------------------- listes : deplacer + urgent ------ */
.case__poignee{
  flex:none; display:grid; place-items:center; width:16px; height:26px; margin-right:-4px;
  color:inherit; opacity:0; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none;
}
.case__poignee svg{width:16px; height:16px}
.case:hover .case__poignee{opacity:.45}
.case__poignee:hover{opacity:.9 !important}
.case.is-tire{position:relative; z-index:3; background:linear-gradient(var(--n-bg, #fff), var(--n-bg, #fff)), #fff; box-shadow:0 10px 28px -10px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.08); cursor:grabbing; will-change:transform}
.case.is-tire .case__poignee{opacity:.9; cursor:grabbing}
.case--ajout{padding-left:20px}
.case__urgent{opacity:0; width:26px !important; height:26px !important}
.case__urgent svg{width:15px !important; height:15px !important}
.case:hover .case__urgent{opacity:.6}
.case.is-urgent .case__urgent{opacity:1; color:var(--rouge)}
.case.is-urgent textarea{color:var(--rouge); font-weight:600}
.carte__liste li.is-urgent{color:var(--rouge); font-weight:600}
@media (hover:none){
  .case__poignee{opacity:.35}
  .case__urgent{opacity:.35}
}
[data-theme="sombre"] .case.is-urgent textarea,[data-theme="sombre"] .carte__liste li.is-urgent{color:#F08A9B}
[data-theme="sombre"] .case.is-urgent .case__urgent{color:#F08A9B}

/* ---------------------------------------------------------------- partage -- */
.avatar{
  flex:none; display:grid; place-items:center; width:24px; height:24px; border-radius:50%;
  background:var(--sage-deep); color:#fff; font-size:.6rem; font-weight:800; letter-spacing:.03em;
  box-shadow:0 0 0 2px rgba(255,255,255,.7);
}
.carte__gens{display:flex; flex-wrap:wrap; gap:4px; margin:6px 0 2px}   /* beaucoup de monde : sur deux lignes */
.editeur__gens{display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin:10px 0 0; font-size:.78rem; opacity:.75}
.editeur__gens span:last-child:not(.avatar){margin-left:6px}
.popover--partage{min-width:min(330px, calc(100vw - 16px)); max-width:min(360px, calc(100vw - 16px))}
.partage__ligne{display:flex; align-items:center; gap:10px; padding:6px 4px}
.partage__ligne .avatar{width:32px; height:32px; font-size:.72rem}
.partage__qui{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25}
.partage__qui strong{font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.partage__qui small{font-size:.75rem; color:var(--fg-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.partage__role{font-size:.72rem; color:var(--fg-3); white-space:nowrap}
.partage__ajout{display:flex; gap:6px; margin-top:8px}
.partage__ajout input{flex:1; min-width:0}
.partage__ajout .bouton{flex:none}
.partage__erreur{margin:6px 4px 0; color:var(--rouge); font-size:.8rem}
.partage__erreur:empty{display:none}
.partage__aide{margin:8px 4px 2px; font-size:.75rem; color:var(--fg-3); line-height:1.4}
.partage__droit{flex:none; font:inherit; font-size:.75rem; padding:4px 6px; border-radius:8px; border:1px solid var(--verre-ligne); background:transparent; color:inherit; max-width:118px}
.partage__nouveau{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:8px 4px 0; font-size:.78rem; color:var(--fg-3)}
.editeur__equipe{font:inherit; font-size:.8rem; font-weight:600; padding:5px 12px; border-radius:999px; border:1.5px solid var(--verre-ligne); background:transparent; color:inherit; cursor:pointer; white-space:nowrap}
.editeur__equipe[aria-pressed="true"]{background:var(--fg, #000); border-color:var(--fg, #000); color:var(--bg, #F4F3E9)}
.partage__equipe{padding-top:8px; border-top:1px solid var(--verre-ligne); color:inherit}
.editeur__lecture{margin-right:auto; padding:4px 10px; border-radius:999px; font-size:.75rem; font-weight:600; background:rgba(0,0,0,.07)}
[data-theme="sombre"] .avatar{box-shadow:0 0 0 2px rgba(0,0,0,.4)}
/* un element de liste peut tenir sur plusieurs lignes (Entree) */
.carte__liste li{white-space:pre-line}
/* elements de liste mis en forme (zone modifiable a la place du textarea) */
.case .case__texte{flex:1; min-width:0; line-height:1.45; min-height:1.45em; padding:0; word-break:break-word}
.case.is-fait .case__texte{text-decoration:line-through; opacity:.55}
.case.is-urgent .case__texte{color:var(--rouge); font-weight:600}
[data-theme="sombre"] .case.is-urgent .case__texte{color:#F08A9B}
[data-theme="sombre"] .case.is-tire{background:linear-gradient(var(--n-bg), var(--n-bg)), #1F2826}

/* ------------------------------------------- palette complete des couleurs -- */
.popover--palette{max-width:min(320px, calc(100vw - 16px))}
.palette__titre{margin-top:6px}
.palette{display:grid; grid-template-columns:repeat(10, 1fr); gap:4px; padding:2px 4px 6px}
.palette__c{
  aspect-ratio:1; min-width:0; padding:0; border:1px solid rgba(0,0,0,.08); border-radius:50%; cursor:pointer;
  transition:transform .12s var(--ease);
}
.palette__c:hover{transform:scale(1.25); border-color:rgba(0,0,0,.4); position:relative; z-index:1}
.palette__autre{display:flex; align-items:center; gap:10px; margin:2px 4px 4px; padding:6px 8px; border-radius:10px; cursor:pointer; font-size:.88rem}
.palette__autre:hover{background:rgba(0,0,0,.06)}
.palette__autre input{width:28px; height:28px; padding:0; border:0; border-radius:50%; background:none; cursor:pointer}
.palette__autre input::-webkit-color-swatch-wrapper{padding:0}
.palette__autre input::-webkit-color-swatch{border:1px solid rgba(0,0,0,.15); border-radius:50%}
[data-theme="sombre"] .palette__autre:hover{background:rgba(255,255,255,.08)}
.btn-annuler:disabled,#btn-annuler:disabled{opacity:.3; cursor:default}

/* ---------------------------------------------------------- photos de profil -- */
.avatar{position:relative; overflow:hidden}
.avatar img,.compte img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; display:block}
.compte{position:relative; overflow:hidden; padding:0}
.avatar--grand{width:44px; height:44px; font-size:.9rem}
.popover__info--photo{display:flex; align-items:center; gap:12px}

/* ------------------------------------------------- ajuster la photo de profil -- */
.recadre{position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:16px; background:rgba(20,28,27,.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:apparait .15s var(--ease)}
.recadre__boite{display:flex; flex-direction:column; align-items:center; gap:14px; width:min(340px, 100%); padding:22px 20px 18px; border-radius:22px; background:#fff; color:var(--fg); box-shadow:var(--ombre-forte)}
.recadre__titre{margin:0; font-family:Anton, sans-serif; font-weight:400; text-transform:uppercase; font-size:1.6rem; line-height:1}
.recadre__aide{margin:-6px 0 0; font-size:.82rem; color:var(--fg-3); text-align:center}
.recadre__scene{position:relative; overflow:hidden; max-width:100%; border-radius:18px; background:#ddd; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none}
.recadre__scene.is-tire{cursor:grabbing}
.recadre__img{position:absolute; left:0; top:0; max-width:none; transform-origin:0 0; pointer-events:none}
/* le rond : tout ce qui est hors du cercle est assombri */
.recadre__masque{position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 200px rgba(0,0,0,.45); outline:2px solid rgba(255,255,255,.9); outline-offset:-2px; pointer-events:none}
.recadre__zoom{display:flex; align-items:center; gap:10px; width:100%}
.recadre__zoom input{flex:1; accent-color:var(--sage-deep)}
.recadre__loupe{width:24px; text-align:center; font-size:1.2rem; font-weight:700; color:var(--fg-2); cursor:pointer; user-select:none}
.recadre__actions{display:flex; justify-content:flex-end; gap:8px; width:100%}
[data-theme="sombre"] .recadre__boite{background:#1F2826}
#photo-apercu{cursor:pointer}

/* Actualiser : l'icone tourne pendant la synchronisation */
#btn-sync.is-tourne svg{animation:tourne .8s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}

/* ---- telephone : moins d'effets couteux pour la carte graphique ----
   le flou derriere chaque carte (verre depoli) ralentit le defilement ;
   on garde le meme rendu avec un fond un peu plus opaque, sans flou. */
@media (max-width:760px), (hover:none){
  .carte[data-couleur="defaut"],.composer__ferme{backdrop-filter:none; -webkit-backdrop-filter:none}
  .carte[data-couleur="defaut"]{background:rgba(255,255,255,.82)}
  [data-theme="sombre"] .carte[data-couleur="defaut"]{background:#1F2826}
  .fond span{filter:blur(60px)}
}