/* @file        web/app.css
   @project     KiltWork
   @layer       Application web
   @version     202610131420
   @author      Robert Vandenbegine
   @description Styles de l'application Kilt. Couleurs par variables ; clair et sombre selon l'appareil.
                Aucun style dans le HTML ni dans le JavaScript (politique de sécurité du contenu). */

:root {
  --fond: #F4F5F7; --carte: #FFFFFF; --texte: #1B2433; --doux: #6B7380; --trait: #E3E6EB; --accent: #1B2433;
  --rouge: #D64545; --gris: #8A93A0; --orange: #E8913A; --bleu: #3B7DD8; --vert: #3BA55C;
}
@media (prefers-color-scheme: dark) {
  :root { --fond: #12161C; --carte: #1B212A; --texte: #E8ECF1; --doux: #9AA3AF; --trait: #2A323D; --accent: #E8ECF1; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 15px/1.45 -apple-system, "Segoe UI", system-ui, sans-serif; }
main { max-width: 480px; margin: 28px auto; padding: 0 16px; padding-bottom: env(safe-area-inset-bottom); }
@media (min-width: 900px) { main { max-width: 720px; } }
body.plein main { max-width: none; margin: 0; padding: 16px; min-height: 100vh; }
body.plein .cadre { min-height: calc(100vh - 32px); }
@media (min-width: 1100px) {
  body.plein .corps { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
  body.plein .cote { position: sticky; top: 16px; }
  body.plein .detail { margin-top: 0; border-top: 0; padding-top: 0; }
  body.plein.epure .corps:not(:has(.detail:not([hidden]))) { display: block; }
}
.cadre { background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; padding: 20px; }
h1 { font-size: 17px; margin: 0; }
.tete { display: flex; align-items: center; gap: 10px; }
.tete h1 { margin-right: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.sous { font-weight: 400; color: var(--doux); font-size: 14px; }
select, input { font: inherit; font-size: 13px; color: var(--texte); background: var(--carte); border: 1px solid var(--trait); border-radius: 7px; padding: 4px 6px; max-width: 100%; }
.tete select { font-weight: 600; }
.sous-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-top: 10px; }
.total { color: var(--doux); font-size: 12px; }
.lien { all: unset; cursor: pointer; font-size: 12px; color: var(--doux); text-decoration: underline; }
.lien:hover { color: var(--texte); }
.icone { all: unset; cursor: pointer; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; color: var(--doux); font-size: 16px; line-height: 1; }
.icone:hover, .icone[aria-pressed="true"] { background: var(--fond); color: var(--texte); }
/* Icônes Lucide : tracé de la couleur du texte */
.ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -3px; }
.icone .ic { width: 18px; height: 18px; vertical-align: 0; }
.actions button .ic { margin-right: 6px; }

/* Affichage épuré : menus repliés */
body.epure #projet, body.epure .vues, body.epure .onglets, body.epure .filtres { display: none; }
body.epure .corps { margin-top: 14px; }

.vues { display: flex; border: 1px solid var(--trait); border-radius: 7px; overflow: hidden; }
.vues button { all: unset; cursor: pointer; font-size: 12px; padding: 4px 9px; color: var(--doux); white-space: nowrap; }
.vues button[aria-pressed="true"] { background: var(--accent); color: var(--carte); }
.onglets { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 16px; border-bottom: 1px solid var(--trait); }
.onglets button { all: unset; cursor: pointer; padding: 6px 10px; font-size: 13px; color: var(--doux); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.onglets button[aria-selected="true"] { color: var(--texte); font-weight: 600; border-bottom-color: var(--accent); }
.nb { font-size: 11px; color: var(--doux); margin-left: 4px; }
.proj { font-size: 11px; font-weight: 400; color: var(--doux); margin-right: 4px; }
.recherche, .ajout { margin: 12px 0; }
.recherche input, .ajout input { width: 100%; padding: 8px 10px; font-size: 15px; }
.ajout { margin-bottom: 0; }
.ajout input { border-style: dashed; }
.ajout input:focus { border-style: solid; outline: none; border-color: var(--accent); }

.damier { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; }
body.plein .damier { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
.case { aspect-ratio: 1; border: 0; border-radius: 6px; cursor: pointer; color: #fff; font-size: 11px; font-weight: 600; opacity: .92; transition: transform .1s, opacity .1s; }
.case:hover, .case.active { transform: scale(1.08); opacity: 1; outline: 2px solid var(--texte); outline-offset: 1px; }
.case.neuve { animation: neuve 1.6s ease-out 2; }
.case.rangee { opacity: .45; }
@keyframes neuve { 50% { transform: scale(1.18); } }
.e-rouge { background: var(--rouge); } .e-gris { background: var(--gris); } .e-orange { background: var(--orange); }
.e-bleu { background: var(--bleu); } .e-vert { background: var(--vert); }
.groupe + .groupe { margin-top: 14px; }
.groupe h3 { font-size: 12px; font-weight: 600; margin: 0 0 6px; display: flex; justify-content: space-between; }
.groupe h3 span { color: var(--doux); font-weight: 400; }
.inter .extrait { display: block; font-size: 12px; font-style: italic; color: var(--doux); margin: 2px 0 6px; }
.vide { color: var(--doux); font-size: 13px; }

.detail, .filtres { margin-top: 16px; border-top: 1px solid var(--trait); padding-top: 14px; }
.detail .entete { display: flex; align-items: flex-start; gap: 8px; }
.detail h2 { font-size: 15px; margin: 0 0 6px; flex: 1; }
.desc { font-size: 13px; margin: 0 0 10px; }
dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 13px; }
dt { color: var(--doux); } dd { margin: 0; overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.actions button { all: unset; cursor: pointer; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 7px; background: var(--accent); color: var(--carte); }
.actions button.second { background: none; color: var(--texte); box-shadow: inset 0 0 0 1px var(--trait); font-weight: 400; }
.note { font-size: 12px; color: var(--doux); }
.histoire { margin: 12px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--doux); border-top: 1px dashed var(--trait); padding-top: 10px; }
.histoire li + li { margin-top: 4px; }
.histoire b { color: var(--texte); font-weight: 600; }

.themes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.themes button::before { content: "#"; opacity: .6; }
.themes button { all: unset; cursor: pointer; font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--trait); color: var(--doux); }
.themes button[aria-pressed="true"] { background: var(--accent); color: var(--carte); border-color: var(--accent); }
.themes button:disabled { opacity: .35; cursor: default; }
.bascule { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--doux); margin-bottom: 14px; }
.legende { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.legende button { all: unset; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 6px; border-radius: 6px; }
.legende button[aria-pressed="true"] { background: var(--fond); font-weight: 600; }
.pastille { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.legende .nb { margin-left: auto; font-variant-numeric: tabular-nums; }

.reglages { margin: 14px 0 4px; padding: 12px; border: 1px solid var(--trait); border-radius: 10px; background: var(--fond); }
.reglages h2 { font-size: 13px; margin: 0 0 8px; }
.reglages h2 + * { margin-top: 0; } .reglages section + section { margin-top: 14px; }
.reglages label, .ligne { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; padding: 5px 0; }
.reglages small { display: block; color: var(--doux); font-size: 11px; }
.compte { margin-left: auto; color: var(--doux); font-size: 12px; white-space: nowrap; }

#connexion, #inscription { display: grid; gap: 14px; }
#connexion label, #inscription label { display: grid; gap: 4px; font-size: 13px; color: var(--doux); }
#connexion input, #inscription input { font-size: 16px; padding: 9px 10px; }
#secours, #retablir { display: grid; gap: 14px; }
#secours p, #retablir p { margin: 0; font-size: 14px; }
#retablir label { display: grid; gap: 4px; font-size: 13px; color: var(--doux); }
#retablir input { font-size: 16px; padding: 9px 10px; }
.bilan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bilan div { background: var(--carte); border: 1px solid var(--trait); border-radius: 8px; padding: 8px 10px; }
.bilan b { display: block; font-size: 20px; line-height: 1.2; }
.bilan span { font-size: 11px; color: var(--doux); }
#secours textarea, #retablir textarea { font: 15px/1.5 ui-monospace, Menlo, monospace; padding: 10px; border: 1px solid var(--trait); border-radius: 7px; background: var(--fond); color: var(--texte); resize: none; width: 100%; }
.coche { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.admin input, .connecteurs input[type=text] { width: 100%; }
.admin table { width: 100%; border-collapse: collapse; font-size: 12px; }
.admin th { text-align: left; font-weight: 400; color: var(--doux); padding: 4px 6px 4px 0; }
.admin td { padding: 4px 6px 4px 0; border-top: 1px solid var(--trait); vertical-align: top; }
.admin td small { display: block; }
.defile { overflow-x: auto; }
.erreur { color: var(--rouge); font-size: 13px; margin: 0; min-height: 1em; }
.pied { margin-top: 14px; font-size: 11px; color: var(--doux); display: flex; justify-content: space-between; gap: 10px; }
/* 202610131420 */