/* ============================================================================================
   LES MODULES ÉCRITS SOUS FILIGRANE — 19/09/2026 (R24 : une image, la tuile et ses vignettes).
   Projets, Pense-bête, KB, Commandes, Idées, Parrainages : une seule feuille, sur la palette de la
   maison (7K-REF-INT-020 v2), chaque appel de variable avec son repli. Bureau et téléphone dans la même
   feuille : les tuiles sombres, les vignettes claires, la couleur dit l'état, la palette dit la nature.
   Préfixe `mx-` (module) ; rien n'est écrit en ligne.
   ============================================================================================ */

/* ── Le filigrane « en cours d'écriture » ─────────────────────────────────────────────────── */
/* 22/09 (Miguël : gagner la hauteur en tête de page) — une ligne fine, pas un bandeau */
.ecriture{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:6px 0 0;padding:4px 12px;border-radius:10px;
  background:repeating-linear-gradient(135deg,var(--tk-prevoir-f,#fde1c4) 0 14px,#fff3e4 14px 28px);border:2px dashed var(--tk-prevoir-b,#ea7f1b);color:var(--tk-prevoir,#9a3f06)}
.ecriture-lab{font:800 10.5px var(--font,system-ui,sans-serif);letter-spacing:.1em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:var(--tk-prevoir,#9a3f06);color:#fff}
.ecriture-txt{font:600 12px var(--font,system-ui,sans-serif)}
.m-body .ecriture{margin:0 0 10px;border-radius:12px}

/* ── La page : tête, compteurs, filtres ──────────────────────────────────────────────────── */
.mx{display:flex;flex-direction:column;gap:14px}
.mx-tete{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.mx-tete .zone-lab{margin:0;font-size:15px}
.mx-titre{display:block;margin-top:8px}
/* 22/09 — le titre et ses compteurs sur la même ligne quand la place le permet */
.mx-tete>div:first-child{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;min-width:0}
.mx-sous{margin:0;font:500 14px var(--font,system-ui,sans-serif);color:var(--tx-dark-2,#3d4352)}
.mx-sous b{color:var(--z,#055a52)}
.mx-filtres{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.mx-f{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;text-decoration:none;cursor:pointer;
  border:2px solid var(--z-b,#0BAE9F);background:#fff;color:var(--z,#055a52);font:800 13px var(--font,system-ui,sans-serif)}
.mx-f .n{font:700 11px var(--mono,ui-monospace,monospace);opacity:.75}
.mx-f.on{background:var(--z,#055a52);border-color:var(--z,#055a52);color:#fff}
.mx-feux{display:flex;gap:6px}
.mx-feu{min-width:34px;padding:5px 10px;border-radius:999px;text-align:center;color:#fff;font:800 13px var(--mono,ui-monospace,monospace)}
.mx-feu.f-rouge{background:#dc2626}.mx-feu.f-orange{background:var(--tk-prevoir-b,#ea7f1b);color:#3a2a05}.mx-feu.f-vert{background:var(--tk-fait-b,#2e8b57)}.mx-feu.f-bleu{background:var(--tk-lire-b,#2f6fd6)}.mx-feu.f-gris{background:#6b7280}

/* ── Les tuiles : sombres, le liseré du haut dit l'état ──────────────────────────────────── */
/* 21/09 (contrôle visuel) : chaque tuile à la hauteur de son contenu */
.mx-tuiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px;align-content:start;align-items:start}
/* 21/09 : une zone repliée s'annonce d'un « + » (« − » ouverte), sinon elle ressemble à une bande vide */
details.zone>summary.zone-lab{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;margin:0}
details.zone>summary.zone-lab::-webkit-details-marker{display:none}
details.zone>summary.zone-lab::before{content:'＋';display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--z,#055a52);color:#fff;font:800 15px/1 var(--font,system-ui,sans-serif);letter-spacing:0}
details.zone[open]>summary.zone-lab{margin-bottom:10px}
details.zone[open]>summary.zone-lab::before{content:'－'}
.mx-vide{grid-column:1/-1;margin:0;padding:18px;border-radius:14px;background:#fff;color:var(--tx-dark-2,#3d4352);font:600 15px var(--font,system-ui,sans-serif)}
.tu{position:relative;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#3a4756,#2b3644);border:2px solid #4a5768;border-top:6px solid #7b8798; /* 21/09 : ardoise, plus noir */
  box-shadow:0 4px 14px rgba(20,30,50,.18);color:#e8edf3;transition:transform .14s,box-shadow .14s}
a.tu{text-decoration:none;color:#e8edf3}
.tu:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,30,50,.28)}
.tu-rouge{border-top-color:var(--red,#ef4444)}.tu-orange{border-top-color:var(--tk-prevoir-b,#ea7f1b)}.tu-vert{border-top-color:var(--tk-fait-b,#2e8b57)}.tu-bleu{border-top-color:var(--tk-lire-b,#2f6fd6)}.tu-gris{border-top-color:#6b7280;opacity:.8}.tu-or{border-top-color:var(--or-1,#f5d370)}
.tu-tete{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"av nom etat" "av sous etat";gap:1px 10px;align-items:center;padding:10px 14px 8px}
.tu-av{grid-area:av;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--tk-faire-b,#0BAE9F);color:#04322e;font:800 13px var(--mono,ui-monospace,monospace)}
.tu-av.a-temps{background:var(--tk-temps-b,#7c3aed);color:#fff}.tu-av.a-argent{background:var(--tk-argent-b,#d4a72c);color:#3a2a05}.tu-av.a-qui{background:var(--tk-qui-b,#db2777);color:#fff}.tu-av.a-lire{background:var(--tk-lire-b,#2f6fd6);color:#fff}.tu-av.a-prevoir{background:var(--tk-prevoir-b,#ea7f1b);color:#fff}
/* 21/09 (contrôle visuel) : le titre en entier, deux lignes au plus */
.tu-nom{grid-area:nom;font:800 16px/1.2 var(--font,system-ui,sans-serif);color:#fff;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 21/09 (contrôle visuel) : le sous-titre en entier, jamais coupé */
.tu-sous{grid-area:sous;font:600 11.5px/1.35 var(--mono,ui-monospace,monospace);color:#aeb9c7;overflow-wrap:anywhere}
.tu-etat{grid-area:etat;align-self:start;padding:4px 10px;border-radius:999px;background:#6b7280;color:#fff;font:800 12px var(--mono,ui-monospace,monospace);white-space:nowrap}
.tu-rouge .tu-etat{background:#dc2626}.tu-orange .tu-etat{background:var(--tk-prevoir-b,#ea7f1b);color:#3a2a05}.tu-vert .tu-etat{background:var(--tk-fait-b,#2e8b57)}.tu-bleu .tu-etat{background:var(--tk-lire-b,#2f6fd6)}.tu-or .tu-etat{background:var(--or-1,#f5d370);color:#3a2a05}
.tu-chiffres{display:flex;flex-wrap:wrap;gap:6px 14px;padding:0 14px 8px;font:700 12px var(--mono,ui-monospace,monospace);color:#c9d3df}
.tu-chiffres b{color:#fff}
.tu-chiffres .or{color:var(--or-1,#f5d370)}

/* ── Les vignettes : claires, le liseré gauche dit l'état ─────────────────────────────────── */
.tu-vis{display:flex;flex-wrap:wrap;gap:7px;padding:0 12px 12px}
.vi{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ic nom" "ic v";column-gap:8px;align-items:center;
  min-width:140px;max-width:100%;padding:6px 10px 6px 8px;border-radius:10px;text-decoration:none;
  background:#fff;border:1.5px solid #b3bdca;border-left:5px solid #6b7280;color:var(--tx-dark,#1a1f2e)}
a.vi:hover{border-color:var(--tk-faire-b,#0BAE9F)}
.vi-rouge{border-left-color:var(--red,#ef4444);background:#fde3e0}.vi-orange{border-left-color:var(--tk-prevoir-b,#ea7f1b);background:var(--tk-prevoir-f,#fde1c4)}.vi-vert{border-left-color:var(--tk-fait-b,#2e8b57);background:var(--tk-fait-f,#d6eedd)}.vi-bleu{border-left-color:var(--tk-lire-b,#2f6fd6);background:var(--tk-lire-f,#d9e5fb)}.vi-or{border-left-color:var(--tk-argent-b,#d4a72c);background:var(--tk-argent-f,#fbeec4)}.vi-violet{border-left-color:var(--tk-temps-b,#7c3aed);background:var(--tk-temps-f,#e9e0fb)}.vi-gris{border-left-color:#9aa5b1;background:#f3f4f6}
.vi .ic{grid-area:ic;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--tx-dark,#1a1f2e);color:#fff;font:800 11px var(--mono,ui-monospace,monospace)}
/* 21/09 (contrôle visuel) : le nom en entier, deux lignes au plus */
.vi .nom{grid-area:nom;font:800 12.5px/1.2 var(--font,system-ui,sans-serif);max-width:320px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vi .v{grid-area:v;font:600 10.5px var(--mono,ui-monospace,monospace);color:var(--tx-dark-2,#3d4352);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}
.tu-vis-vide{font:600 12.5px var(--font,system-ui,sans-serif);color:#aeb9c7;padding:4px 2px}
/* Le bouton dans la pastille d'une vignette (pense-bête : « fait ») : la même pastille, cliquable. */
.vi .ic-form{grid-area:ic;display:contents}
.vi button.ic{border:0;cursor:pointer;font-size:12px}
.vi-vert button.ic{background:var(--tk-fait,#166534)}.vi-rouge button.ic{background:var(--red,#ef4444)}.vi-orange button.ic{background:var(--tk-prevoir,#9a3f06)}.vi-bleu button.ic{background:var(--tk-lire,#1e40af)}
.vi button.ic:hover{outline:2px solid var(--or-1,#f5d370)}
.vi .nom.long{white-space:normal;max-width:none}

/* ── La fiche d'un objet (projet, mémo, article) : zones ─────────────────────────────────── */
.mx-fiche{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,36%);gap:14px;align-items:start}
.mx-fiche>.large{grid-column:1/-1}
.mx-bloc{display:flex;flex-direction:column;gap:10px}
.mx-lignes{display:flex;flex-direction:column;gap:6px}
.mx-ligne{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:8px 12px;border-radius:10px;background:#fff;border:1.5px solid var(--z-b,#0BAE9F)}
.mx-ligne b{font:800 13.5px var(--font,system-ui,sans-serif)}
.mx-ligne small{display:block;font:600 11px var(--mono,ui-monospace,monospace);color:var(--tx-dark-2,#3d4352)}
.mx-ligne .val{font:800 14px var(--mono,ui-monospace,monospace);color:var(--z,#055a52);white-space:nowrap}
.mx-chiffre{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:12px;background:#fff;border:2px solid var(--z-b,#0BAE9F)}
.mx-chiffre small{font:700 11px var(--font,system-ui,sans-serif);letter-spacing:.08em;text-transform:uppercase;color:var(--z,#055a52)}
.mx-chiffre b{font:800 24px var(--font,system-ui,sans-serif);color:var(--tx-dark,#1a1f2e)}
.mx-chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.mx-texte{white-space:pre-wrap;font:500 14px/1.5 var(--font,system-ui,sans-serif);color:var(--tx-dark,#1a1f2e);background:#fff;border-radius:12px;padding:12px 14px;border:1.5px solid var(--z-b,#0BAE9F)}

/* ── L'assistant à objets (Projets, P9) : la palette en chips par famille ─────────────────── */
.mx-palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;align-items:start}
.mx-fam{padding:8px 10px 9px;border-radius:12px;background:var(--z-f,#c9e9e4);border:2px solid var(--z-b,#0BAE9F);border-left:6px solid var(--z,#055a52)}
.mx-fam>b{display:block;margin:0 0 6px;font:800 12.5px var(--font,system-ui,sans-serif);letter-spacing:.04em;text-transform:uppercase;color:var(--z,#055a52)}
.mx-chips{display:flex;flex-wrap:wrap;gap:5px}
.mx-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 9px 4px 7px;border-radius:10px;cursor:pointer;border:1.5px solid var(--z-b,#0BAE9F);background:#fff;font:700 12px var(--font,system-ui,sans-serif);color:var(--tx-dark,#1a1f2e)}
.mx-chip small{font:700 10px var(--mono,ui-monospace,monospace);color:var(--tx-dark-2,#3d4352)}
.mx-chip:hover{background:var(--z,#055a52);border-color:var(--z,#055a52);color:#fff}
.mx-chip:hover small{color:#fff}

/* ── Une carte de KB : listes et champ de recherche ──────────────────────────────────────── */
.mx-liste{margin:0;padding-left:22px;font:500 14px/1.6 var(--font,system-ui,sans-serif);color:var(--tx-dark,#1a1f2e)}
.mx-liste li{margin:2px 0}
.mx-liste a{color:var(--tk-lire,#1e40af);font-weight:700}
.mx-champ{padding:7px 12px;border-radius:999px;border:2px solid var(--z-b,#0BAE9F);background:#fff;color:var(--tx-dark,#1a1f2e);font:600 14px var(--font,system-ui,sans-serif);min-width:220px}

/* ── Les formulaires courts ───────────────────────────────────────────────────────────────── */
.mx-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;align-items:end}
.mx-form .full{grid-column:1/-1}
.mx-form label{display:block;font:700 11px var(--font,system-ui,sans-serif);letter-spacing:.08em;text-transform:uppercase;color:var(--z,#055a52);margin-bottom:4px}
.mx-form input,.mx-form select,.mx-form textarea{width:100%;box-sizing:border-box;padding:9px 12px;border-radius:10px;border:2px solid var(--z-b,#0BAE9F);background:#fff;color:var(--tx-dark,#1a1f2e);font:600 16px var(--font,system-ui,sans-serif)}
.mx-form textarea{min-height:88px;resize:vertical}
.mx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:12px;border:0;cursor:pointer;text-decoration:none;
  background:var(--z,#055a52);color:#fff;font:800 14px var(--font,system-ui,sans-serif)}
.mx-btn.secondaire{background:#fff;color:var(--z,#055a52);border:2px solid var(--z-b,#0BAE9F)}
.mx-btn.petit{padding:6px 12px;font-size:12px;border-radius:9px}
.mx-ok{padding:10px 14px;border-radius:12px;background:var(--tk-fait-f,#d6eedd);border-left:6px solid var(--tk-fait-b,#2e8b57);color:var(--tk-fait,#166534);font:700 14px var(--font,system-ui,sans-serif)}
.mx-err{padding:10px 14px;border-radius:12px;background:#fde3e0;border-left:6px solid var(--red,#ef4444);color:#9a2a1e;font:700 14px var(--font,system-ui,sans-serif)}
.mx-note{font:600 12px var(--font,system-ui,sans-serif);color:var(--tx-dark-2,#3d4352)}

/* ── Le téléphone : une colonne, tout en pile ────────────────────────────────────────────── */
@media (max-width:700px){
  .mx-tuiles{grid-template-columns:1fr}
  .mx-fiche{grid-template-columns:1fr}
  .mx-filtres{margin-left:0}
  .vi .nom,.vi .v{max-width:70vw}
  .mx-palette{grid-template-columns:1fr 1fr}
}
/* Dans la coquille du téléphone, la page a déjà sa marge ; les zones se serrent un peu. */
.m-body .mx{gap:10px}
.m-body .mx .zone{padding:12px 14px 14px;border-radius:14px}
.m-body .mx-tete .zone-lab{font-size:13px}

/* 06/10/2026 (Miguël : « la version en pied de page ») — la version de l'intranet, en bas de chaque page.
   Texte à 4,5:1 au moins sur la page claire (--tx-dark-2), jamais un gris pâle. */
.pied-version{display:block; text-align:right; padding:6px 16px 10px; font:600 11px var(--mono,ui-monospace,monospace);
  color:var(--tx-dark-2,#3d4352); opacity:1}

/* 06/10/2026 (Projets, P5) — les gestes d'état du devis, sur une ligne, boutons ≥ 44 px au toucher. */
.pj-etats{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:8px}
.pj-etat{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:0}
.pj-etat label{display:flex;flex-direction:column;gap:3px;font:600 12.5px var(--font,system-ui,sans-serif);color:var(--tx-dark-2,#3d4352)}
.pj-etat input{min-height:40px;padding:0 10px;border-radius:10px;border:1.5px solid #cfd8e3;background:#fff;color:var(--tx-dark,#1a1f2e);font:600 14px var(--font,system-ui,sans-serif)}
/* 06/10/2026 (Commandes, 7K-CAH-INT-017 §9 septies) — les fiches fournisseurs : une ligne de formulaire par fiche. */
.cm-fourn{padding:10px 0;border-top:1px solid #e6ebf1}
.cm-fourn-neuf{border-top:2px dashed #cfd8e3}
.cm-fourn-actif{display:flex;align-items:center;gap:8px;min-height:44px}
/* 06/10/2026 (Réglages › Courriers) — l'aperçu du courriel, tel qu'il partira. */
.tr-apercu{margin:6px 0 0;padding:12px 14px;border-radius:12px;background:#fff;border:1.5px solid #cfd8e3;white-space:pre-wrap;font:500 13.5px/1.55 var(--font,system-ui,sans-serif);color:var(--tx-dark,#1a1f2e)}