/* =====================================================================
   MesRègles — additions à la charte « Affiche ».
   Modulation : SOCLE SEUL. Pas d'accueil en aplats (quatre grands aplats
   vifs écrasaient l'écran et sortaient du style affiche), pas de modulation
   « lecture » (tous les textes de l'app sont courts). La couleur de chaque
   règle s'affiche donc de façon DISCRÈTE : filet de 4 px et petit libellé,
   sauf en tête de la fiche d'une règle, seul endroit où elle est en aplat.
   Catégories (mêmes couleurs que les pages Notion) :
     1 Oser maintenant  → cat-7  orange
     2 Décider par moi-même → cat-6 vert
     3 M'engager        → cat-8  outremer
     4 Me dévoiler      → cat-2  violet
   Aucune couleur écrite en dur ici : tout passe par charte.css.
   ===================================================================== */

/* Le mot-symbole ne passe pas en capitales (règle de Hugues) */
.wordmark{text-transform:none;letter-spacing:.01em}

/* Le bandeau de confirmation remonte franchement au-dessus de la barre
   d'onglets : son bouton « Annuler » tombait à 42 px de l'onglet « Noter »,
   dans le même axe, et un appui un peu haut effaçait la note précédente. */
/* Invisible, le bandeau ne doit plus rien intercepter : il avalait les appuis
   destinés au bouton situé dessous. */
.toast{bottom:calc(152px + env(safe-area-inset-bottom));width:max-content;max-width:min(92vw,480px);pointer-events:none}
.toast.on{pointer-events:auto}
.toast button{padding:0 12px;min-height:44px;flex:none}
@media (min-width:960px){.toast{bottom:24px}}

/* La barre du haut est hors de .app : elle porte donc sa propre gouttière,
   sans les marges négatives de la charte (qui débordaient de 16 px à droite). */
.topbar{margin:0;
  padding:calc(8px + env(safe-area-inset-top)) max(var(--gutter),env(safe-area-inset-right)) 8px max(var(--gutter),env(safe-area-inset-left))}

/* ---------- Écran de verrou ---------- */
.lock{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;align-items:center;justify-content:center;
  padding:24px max(var(--gutter),env(safe-area-inset-left)) calc(24px + env(safe-area-inset-bottom));overflow:auto}
.lock-inner{width:100%;max-width:340px;text-align:center}
.lock-mark{display:flex;justify-content:center;margin-bottom:14px}
.lock-title{font-size:clamp(28px,7vw,40px);text-align:center}
.lock-hint{font-size:14px;color:var(--muted);margin:6px 0 0}
.lock-error{font:600 14px var(--body);color:var(--bad);margin:10px 0 0}
.lock-foot{font-size:13px;color:var(--muted);margin:18px 0 0}
.lock-foot button{background:none;border:0;color:var(--action);font:600 13px var(--body);text-decoration:underline;min-height:var(--tap);padding:0 4px}
.dots{display:flex;justify-content:center;gap:10px;margin:20px 0 4px;min-height:16px;flex-wrap:wrap}
.dot{width:14px;height:14px;border:1.5px solid var(--line-strong);background:transparent}
.dot.on{background:var(--slate);border-color:var(--slate)}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:18px}
.key{min-height:62px;border:0;background:var(--paper);color:var(--slate);
  font:400 30px/1 var(--display);letter-spacing:.02em;display:grid;place-items:center}
.key.ghostkey{font:600 14px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.key#keyok:not([disabled]){background:var(--action);color:var(--on-action)}
.key[disabled]{opacity:.45}
@media (hover:hover){.key:hover{background:var(--soft)}.key#keyok:not([disabled]):hover{background:var(--action-hover)}}
.key:active{transform:translateY(1px)}
.bio{margin-top:18px}

/* ---------- Pictogrammes des règles ----------
   Traits droits, angles vifs, aucun arrondi : la couleur vient de la
   catégorie de la règle, sauf sur un aplat où elle passe en --c-on. */
.ico{width:24px;height:24px;flex:none;fill:none;stroke:var(--c-text,currentColor);
  stroke-width:1.8;stroke-linecap:square;stroke-linejoin:miter;color:var(--c-text,currentColor)}
.ico.big{width:34px;height:34px;stroke-width:1.6}
.ico.head{width:40px;height:40px;stroke:var(--c-on);color:var(--c-on);stroke-width:1.6}
.ico.inline{width:16px;height:16px;vertical-align:-3px;margin-right:7px;stroke-width:2}
.chip[aria-pressed="true"] .ico{stroke:var(--on-slate);color:var(--on-slate)}

/* ---------- Les quatre règles sur l'accueil ---------- */
.four{border-top:1px solid var(--line)}
.four a{display:flex;gap:14px;align-items:flex-start;text-decoration:none;color:inherit;padding:16px 14px;
  border-bottom:1px solid var(--line);border-left:4px solid var(--c)}
.four .txt{min-width:0}
@media (hover:hover){.four a:hover{background:var(--soft)}}
.four .need{display:block;font:600 11px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--c-text)}
.four .nom{display:block;font:400 30px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--slate);margin:5px 0 7px}
.four .al{display:flex;gap:8px;align-items:flex-start;font:italic 15px/1.4 var(--body);color:var(--muted)}
.ico.alerte{width:17px;height:17px;margin-top:2px;stroke:var(--c-text);color:var(--c-text);stroke-width:1.9}
.alarme-panel p{display:flex;gap:9px;align-items:flex-start}
.alarme-panel .ico.alerte{width:19px;height:19px;margin-top:3px}
.tag-alerte{display:inline-flex;align-items:center;gap:5px}
.tag-alerte .ico.alerte{width:14px;height:14px;margin:0;stroke:currentColor;color:currentColor;stroke-width:2}

/* ---------- Bande de la boucle ---------- */
.loop{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);margin-top:28px}
.loop span{flex:1 1 auto;text-align:center;padding:12px 8px;background:var(--paper);
  font:400 20px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--slate);border-right:1px solid var(--line)}
.loop span:last-child{border-right:0}

/* ---------- Fiche d'une règle ---------- */
.rule-head{margin:0 calc(-1 * var(--gutter));padding:22px var(--gutter);background:var(--c);color:var(--c-on);
  display:flex;gap:16px;align-items:center}
.rule-head h1{color:var(--c-on)}
.rule-head .need{font:600 11px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;opacity:.9;margin-bottom:6px}
.quote{margin:18px 0 0;padding:0 0 0 14px;border-left:4px solid var(--c);font:italic 17px/1.5 var(--body);color:var(--muted)}
.quote cite{display:block;font-style:normal;font-size:13px;margin-top:4px}
.block{margin-top:26px}
.block .eyebrow{display:block;margin-bottom:8px}
.list{list-style:none;margin:0;padding:0}
.list li{padding:9px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.4}
.list li:first-child{border-top:1px solid var(--line)}
.list li b{display:block;font:600 16px var(--body);color:var(--ink)}
.list li i{font-style:italic;color:var(--muted);font-size:15px}
.panel{border-left:4px solid var(--c);background:var(--paper);padding:14px 16px}
.panel .eyebrow{display:block;margin-bottom:6px}
.panel p{margin:0;font-size:16px;line-height:1.45}
.back{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);background:none;border:0;padding:0;
  color:var(--muted);font:600 13px var(--body);letter-spacing:.08em;text-transform:uppercase}

/* ---------- Formulaire « Noter » ---------- */
/* L'alarme : un seul picto à toucher, qui s'allume. Pas de Oui/Non, l'absence
   d'appui vaut « non ». */
.toggle-alarme{display:flex;align-items:center;gap:12px;width:100%;max-width:420px;
  min-height:var(--tap);padding:12px 14px;background:none;color:var(--muted);
  border:1px solid var(--line-strong);border-left:4px solid var(--line-strong);
  font:600 16px var(--body);text-align:left}
.toggle-alarme .ico.alerte{width:24px;height:24px;margin:0;stroke:var(--muted);color:var(--muted);stroke-width:1.8}
.toggle-alarme[aria-pressed="true"]{background:var(--bad-bg);color:var(--bad);border-color:var(--bad);border-left-color:var(--bad)}
.toggle-alarme[aria-pressed="true"] .ico.alerte{stroke:var(--bad);color:var(--bad);stroke-width:2.2}
@media (hover:hover){.toggle-alarme:hover{background:var(--soft)}}

/* Les quatre étapes de la boucle : des pictos à allumer, un seul à la fois. */
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:480px}
.etape{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:var(--tap);
  padding:10px 4px;background:none;color:var(--muted);border:1px solid var(--line-strong);
  font:600 13px/1.2 var(--body)}
.etape .ico{width:24px;height:24px;stroke:var(--muted);color:var(--muted)}
.etape[aria-pressed="true"]{background:var(--slate);border-color:var(--slate);color:var(--on-slate)}
.etape[aria-pressed="true"] .ico{stroke:var(--on-slate);color:var(--on-slate);stroke-width:2.1}
@media (hover:hover){.etape:hover{background:var(--soft)}.etape[aria-pressed="true"]:hover{background:var(--slate)}}
.etape-bar .fill{background:var(--slate)}
.etape-bar .ico{stroke:var(--slate);color:var(--slate)}
.tag-etape{display:inline-flex;align-items:center;gap:5px}
.tag-etape .ico{width:14px;height:14px;margin:0;stroke:currentColor;color:currentColor;stroke-width:2}

.chips{display:flex;flex-wrap:wrap;gap:8px}
/* Les quatre règles : une grille à deux colonnes égales, jamais des
   largeurs qui dépendent de la longueur du nom. */
.chips.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:620px}
.chips.grid2 .chip{width:100%;justify-content:flex-start;text-align:left;min-height:var(--tap);padding:8px 10px;display:flex;align-items:center}
.chips.grid2 .chip .ico{margin-right:8px}
.chips .chip{border-left-width:4px;border-left-color:var(--c,var(--line-strong))}
.chips .chip[aria-pressed="true"]{background:var(--slate);border-color:var(--slate);border-left-color:var(--c,var(--slate));color:var(--on-slate)}
textarea.input{min-height:96px;resize:vertical;line-height:1.45}

/* ---------- Relire ---------- */
.note{border-bottom:1px solid var(--line);border-left:4px solid var(--c,var(--line));padding:12px 12px 14px}
.note .when{font:600 11px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.note .what{margin:6px 0 0;font-size:16px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.note .meta{margin-top:8px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.note .meta .cat-label{color:var(--c-text)}
.note .del{margin-left:auto;background:none;border:0;color:var(--muted);font:600 12px var(--body);text-transform:uppercase;letter-spacing:.08em;min-height:36px}
.bars{border-top:1px solid var(--line)}
.bar{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.bar .lbl{font:600 13px var(--body)}
.bar .track{display:block;grid-column:1 / -1;height:10px;background:var(--soft)}
.bar .fill{display:block;height:100%;background:var(--c)}
.bar .n{font-family:var(--display);font-size:22px;color:var(--slate);font-variant-numeric:tabular-nums}

/* ---------- La matrice des deux axes ---------- */
.matrix{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);max-width:760px}
.matrix .colhead,.matrix .band{background:var(--bg);padding:8px 10px;
  font:600 11px/1.3 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
.matrix .band{grid-column:1 / -1;background:var(--soft)}
.matrix em{display:block;font:400 11px/1.3 var(--body);letter-spacing:0;text-transform:none;color:var(--muted);margin-top:2px}
.matrix a{background:var(--paper);padding:14px 12px;border-left:4px solid var(--c);
  text-decoration:none;color:inherit;display:block;min-width:0}
@media (hover:hover){.matrix a:hover{background:var(--soft)}}
.matrix .need{display:block;font:600 11px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--c-text);margin-top:8px}
.matrix .nom{display:block;font:400 23px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--slate);margin-top:4px;overflow-wrap:anywhere}

.axes>div{min-width:0}
.axes .title{font:400 21px/1.05 var(--display);text-transform:uppercase;color:var(--slate);margin-top:5px;overflow-wrap:anywhere}
.bar .lbl{display:flex;align-items:center}
.note .meta .cat-label{display:inline-flex;align-items:center}

.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.danger-zone{margin-top:36px;border-top:1px solid var(--line);padding-top:18px}
pre.copyable{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.5 var(--body);background:var(--soft);padding:14px;margin:0;max-height:46vh;overflow:auto}

/* ---------- PC ---------- */
@media (min-width:960px){
  .rule-head{margin:0;padding:28px 32px}
  .lock-inner{max-width:380px}
  .four{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);max-width:860px}
  .four a{border-bottom:0;background:var(--paper)}
  .actions .btn.wide{width:auto;min-width:300px}
  .app h1, .app > p, .block, .loop, .rows, .stats, .danger-zone{max-width:860px}
}

/* Synchro : le code à recopier, lisible d'un coup d'œil */
.sync-code{font:400 34px/1.1 var(--display);letter-spacing:.06em;color:var(--slate);text-align:center;
  padding:14px 8px;margin:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);user-select:all;word-break:break-all}

/* Logo : nom puis icône, collés */
.wm{gap:0!important;align-items:baseline!important}.wm-ico{display:inline-block;width:.75em;height:.75em;flex:none;margin:0 0 0 .04em;vertical-align:baseline}