/*
 * La coque : split view à trois colonnes (rail des modules · liste · fil),
 * toute la hauteur, aucune barre de défilement de page. Sous 900 px la liste
 * et le fil se relaient (une seule colonne visible, `.app.conv-ouverte`).
 *
 * Règle de dessin (passe DA du 2026-09-06) : les deux en-têtes partagent la
 * MÊME hauteur (`--tb-tete`), donc les filets se rejoignent d'une colonne à
 * l'autre ; les surfaces se distinguent par un filet, jamais par une ombre.
 */
.page-app { height: 100dvh; overflow: hidden; }
/* Le fil est une CARTE posée sur le fond, pas une colonne collée : c'est ce qui donne son style à
   l'application (arbitrage DA du 2026-09-06). Le rail et la liste forment le châssis, la carte porte
   la conversation. Sous 900 px la carte reprend toute la place. */
.app { display: grid; grid-template-columns: var(--tb-rail) var(--tb-liste) minmax(0, 1fr); height: 100dvh; background: var(--tb-fond); }

/* Rail des modules */
.rail { display: flex; flex-direction: column; align-items: stretch; gap: var(--tb-sp-1); padding: var(--tb-sp-3) var(--tb-sp-2); background: var(--tb-surface); border-right: 1px solid var(--tb-bordure); }
.rail-logo { display: grid; place-items: center; height: 36px; margin-bottom: var(--tb-sp-3); }
.rail-logo img { width: 26px; height: 26px; border-radius: 7px; }
.rail-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 2px; border-radius: var(--tb-rayon); color: var(--tb-texte-2); font-size: 9.5px; font-weight: 500; line-height: 1; transition: background var(--tb-duree), color var(--tb-duree); }
.rail-btn:hover { background: var(--tb-surface-2); color: var(--tb-texte); text-decoration: none; }
.rail-btn.est-actif { background: var(--tb-surface-3); color: var(--tb-texte); }
.rail-lib { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-badge { position: absolute; top: 5px; right: 9px; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--tb-danger); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; }
.rail-fin { margin-top: auto; display: flex; flex-direction: column; gap: var(--tb-sp-1); }
/* Le profil se lit à son avatar : un nom tronqué en « Comp… » sous une pastille n'apprend rien. */
.rail-moi .rail-lib { display: none; }
.rail-moi { padding: 10px 2px; }

/* Liste */
.liste { display: flex; flex-direction: column; min-height: 0; background: var(--tb-fond); }
.liste-tete { display: flex; align-items: center; gap: var(--tb-sp-1); height: var(--tb-tete); flex: none; padding: 0 var(--tb-sp-3) 0 18px; }
.liste-titre { flex: 1; font-size: var(--tb-t-xl); font-weight: 700; letter-spacing: -.02em; }
.liste-corps { flex: 1; min-height: 0; overflow-y: auto; padding: var(--tb-sp-1) var(--tb-sp-2) var(--tb-sp-3); }

/* Fil */
.fil { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; margin: 10px 10px 10px 0; background: var(--tb-surface); border: 1px solid var(--tb-bordure); border-radius: 16px; box-shadow: var(--tb-ombre-carte); overflow: hidden; }
.fil-vide { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--tb-sp-3); color: var(--tb-texte-2); text-align: center; padding: var(--tb-sp-5); }
.fil-vide-logo { border-radius: 14px; opacity: .9; }
.fil-conv { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.fil-tete { display: flex; align-items: center; gap: var(--tb-sp-3); height: var(--tb-tete); flex: none; padding: 0 var(--tb-sp-3) 0 18px; background: var(--tb-surface); border-bottom: 1px solid var(--tb-bordure); }
.liste-tete { border-bottom: 1px solid transparent; }   /* la liste n'a plus de filet à couper : la carte porte le sien */
.fil-messages { flex: 1; min-height: 0; overflow-y: auto; padding: var(--tb-sp-4) 46px var(--tb-sp-2); overscroll-behavior: contain; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .fil-messages { scroll-behavior: auto; } }
.fil-tape { min-height: 18px; padding: 0 24px; font-size: var(--tb-t-s); color: var(--tb-texte-3); }

/* Étroit : une colonne à la fois */
.btn-retour { display: none; }
@media (max-width: 900px) {
  .app { grid-template-columns: var(--tb-rail) minmax(0, 1fr); }
  .liste { grid-column: 2; }
  .fil { grid-column: 2; grid-row: 1; display: none; }
  .app.conv-ouverte .liste { display: none; }
  .app.conv-ouverte .fil { display: flex; }
  .fil { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .btn-retour { display: inline-flex; }
}
@media (max-width: 560px) {
  :root { --tb-rail: 56px; }
  .rail-lib { display: none; }
  .rail-btn { padding: 11px 0; }
  .fil-messages { padding-left: 34px; padding-right: 34px; }
}

/* Porte (connexion, 404) */
.page-porte { display: grid; place-items: center; min-height: 100dvh; padding: var(--tb-sp-5); background: var(--tb-fond); background-image: radial-gradient(60% 55% at 50% 32%, color-mix(in srgb, var(--tb-accent) 9%, transparent), transparent 70%); }
.porte-carte { width: min(400px, 100%); display: flex; flex-direction: column; gap: var(--tb-sp-3); padding: 38px 34px 28px; background: var(--tb-surface); border: 1px solid var(--tb-bordure); border-radius: 18px; box-shadow: var(--tb-ombre); }
.porte-logo { border-radius: 11px; }
.porte-titre { font-size: 22px; letter-spacing: -.02em; }
.porte-intro { color: var(--tb-texte-2); margin-bottom: var(--tb-sp-1); }
.porte-pied { margin-top: var(--tb-sp-2); font-size: var(--tb-t-xs); color: var(--tb-texte-3); text-align: center; }

/* Un module « création » : le rail, puis l'application du groupe dans la même carte que le fil. */
.app-module { grid-template-columns: var(--tb-rail) minmax(0, 1fr); }
.module { display: flex; flex-direction: column; min-width: 0; min-height: 0; margin: 10px 10px 10px 0; background: var(--tb-surface); border: 1px solid var(--tb-bordure); border-radius: 16px; box-shadow: var(--tb-ombre-carte); overflow: hidden; }
.module-tete { display: flex; align-items: center; gap: var(--tb-sp-2); height: var(--tb-tete); flex: none; padding: 0 var(--tb-sp-3) 0 18px; border-bottom: 1px solid var(--tb-bordure); }
.module-pastille { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--tb-accent)); flex: none; }
.module-titre { font-size: var(--tb-t-l); font-weight: 600; letter-spacing: -.01em; }
.module-hote { flex: 1; min-width: 0; font-size: var(--tb-t-s); color: var(--tb-texte-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.module-indice { padding: var(--tb-sp-2) 18px 0; font-size: var(--tb-t-s); color: var(--tb-texte-3); }
.module-cadre { flex: 1; min-height: 0; margin: var(--tb-sp-2); border-radius: var(--tb-rayon); overflow: hidden; background: var(--tb-surface-2); }
.module-cadre iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--tb-surface); }
@media (max-width: 900px) { .module { margin: 0; border: 0; border-radius: 0; box-shadow: none; } }

/* Les chiffres d'une création : des tuiles sobres au-dessus de son écran. */
.module-chiffres { padding: var(--tb-sp-3) 18px 0; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--tb-sp-2); }
.tuile { display: flex; flex-direction: column; gap: 2px; padding: 10px 13px; border: 1px solid var(--tb-bordure); border-radius: var(--tb-rayon); background: var(--tb-surface); }
.tuile-valeur { font-size: 19px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tuile-libelle { font-size: var(--tb-t-xs); color: var(--tb-texte-3); }
.module-pied, .module-vide { margin-top: var(--tb-sp-2); font-size: var(--tb-t-s); color: var(--tb-texte-3); }
.module-alerte { display: inline-block; margin-top: var(--tb-sp-2); padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--tb-alerte) 12%, transparent); color: var(--tb-alerte); font-size: var(--tb-t-s); font-weight: 500; }

/* Les deux vues de l'espace : une seule est visible, l'autre attend sans rien coûter. */
.app { grid-template-columns: var(--tb-rail) minmax(0, 1fr); }
.vue { display: grid; grid-template-columns: var(--tb-liste) minmax(0, 1fr); min-width: 0; min-height: 0; }
.vue-module { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .vue { grid-template-columns: minmax(0, 1fr); } }

/* Le module d'une création : son plan à gauche, la section choisie à droite.
   Le panneau des sections reprend EXACTEMENT la densité et les états des rangées de
   discussion : deux panneaux côte à côte qui ne se ressemblent pas donnent l'impression
   de deux applications collées (remarque du proprio, 2026-09-07). */
.vue-module { grid-template-columns: var(--tb-liste) minmax(0, 1fr); }
.liste-module .liste-tete { gap: var(--tb-sp-2); }
.liste-module .module-pastille { width: 10px; height: 10px; }
.sect { display: flex; align-items: center; gap: var(--tb-sp-3); width: 100%; padding: 10px; border-radius: var(--tb-rayon); text-align: left; transition: background var(--tb-duree); }
.sect + .sect, .sect-pli + .sect, .sect + .sect-pli, .sect-pli + .sect-pli { margin-top: 2px; }
.sect:hover { background: var(--tb-surface-3); }
/* L'entrée choisie se marque par un APLAT seul : ni filet, ni ombre (demande du 2026-09-07).
   La rangée de discussion suit la même règle, sinon les deux panneaux divergeraient. */
.sect.est-active { background: var(--tb-surface); }
.sect-icone { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--tb-surface-3); color: var(--tb-texte-2); }
.sect.est-active .sect-icone { background: color-mix(in srgb, var(--tb-accent) 14%, transparent); color: var(--tb-accent); }
.sect-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sect-nom { font-size: var(--tb-t-m); font-weight: 600; letter-spacing: -.01em; color: var(--tb-texte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sect-chapo { font-size: var(--tb-t-s); color: var(--tb-texte-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.module-corps { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.module-hors-cadre { margin: auto; max-width: 46ch; padding: var(--tb-sp-5); text-align: center; color: var(--tb-texte-2); font-size: var(--tb-t-m); line-height: 1.6; }
@media (max-width: 900px) { .vue-module { grid-template-columns: minmax(0, 1fr); } .liste-module { display: none; } }
.sect-tete { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.sect-chevron { flex: none; color: var(--tb-texte-3); transition: transform var(--tb-duree); }
.sect-pli.est-deplie .sect-chevron { transform: rotate(90deg); }
.sect-enfants { padding-left: 10px; margin: 2px 0 4px; border-left: 1px solid var(--tb-bordure); margin-left: 12px; }
.sect-enfant .sect-nom { font-weight: 400; color: var(--tb-texte-2); }
.sect-enfant.est-active .sect-nom { font-weight: 500; color: var(--tb-texte); }
.module-liens { display: flex; flex-wrap: wrap; gap: var(--tb-sp-2); justify-content: center; margin-top: var(--tb-sp-3); }
/* Une tête de section dépliable : la même rangée, plus un chevron. */
.sect-tete .sect-chevron { flex: none; color: var(--tb-texte-3); transition: transform var(--tb-duree); }
.sect-pli.est-deplie .sect-chevron { transform: rotate(90deg); }
.sect-enfants { margin: 2px 0 4px 28px; padding-left: 10px; border-left: 1px solid var(--tb-bordure); }
.sect-enfant { padding: 7px 10px; }
.sect-enfant .sect-nom { font-size: var(--tb-t-s); font-weight: 400; color: var(--tb-texte-2); }
.sect-enfant.est-active .sect-nom { font-weight: 500; color: var(--tb-texte); }
.module-liens { display: flex; flex-wrap: wrap; gap: var(--tb-sp-2); justify-content: center; margin-top: var(--tb-sp-3); }

/* ── La vue d'ensemble d'une création (R23) ──────────────────────────────────
   Deux niveaux de lecture : les grands nombres par sujet, puis le sommaire du module.
   Aucune couleur décorative : le vert et l'ambre ne servent qu'à dire un état. */
.module-chiffres { padding: var(--tb-sp-4) 18px 0; overflow-y: auto; }

.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--tb-sp-3); margin-top: var(--tb-sp-3); }
.carte { display: flex; flex-direction: column; align-items: stretch; width: 100%; padding: 14px 16px; border: 1px solid var(--tb-bordure); border-radius: 14px; background: var(--tb-surface); text-align: left; transition: border-color var(--tb-duree), background var(--tb-duree); }
.carte:hover { border-color: var(--tb-bordure-2); background: var(--tb-surface-2); }
.carte-titre { font-size: var(--tb-t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--tb-texte-3); }
.carte-valeur, .carte-libelle, .carte-detail { display: block; }
.carte-valeur { margin-top: 6px; font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.carte-libelle { font-size: var(--tb-t-s); color: var(--tb-texte-2); }
.carte-detail { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--tb-bordure); }
.carte-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tb-sp-2); font-size: var(--tb-t-s); color: var(--tb-texte-2); }
.carte-ligne + .carte-ligne { margin-top: 5px; }
.carte-nombre { font-size: var(--tb-t-m); font-weight: 600; color: var(--tb-texte); font-variant-numeric: tabular-nums; }
.carte-ligne.est-alerte, .carte-ligne.est-alerte .carte-nombre { color: var(--tb-alerte); }

/* Chiffres et site forment une seule page qui défile ; la tête, elle, reste. */
.module-defile { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.module-chiffres { overflow: visible; }
.module-corps { flex: none; padding: 0 18px; }


/* ── La vue d'ensemble en deux colonnes ──────────────────────────────────────
   À gauche les chiffres, qui se lisent ; à droite le site, qui se regarde. */
.apercu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: var(--tb-sp-3); align-items: start; padding: var(--tb-sp-4) 18px var(--tb-sp-4); }
.apercu > .cartes { grid-column: 1; margin-top: 0; }
.apercu > .fenetre { grid-column: 2; position: sticky; top: 0; }
.cartes { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
@media (max-width: 1240px) {
  .apercu { grid-template-columns: minmax(0, 1fr); }
  .apercu > .cartes, .apercu > .fenetre { grid-column: 1; }
  .apercu > .fenetre { position: static; }
}

/* Le châssis de fenêtre : trois pastilles, une adresse, un écran. */
.fenetre { border: 1px solid var(--tb-bordure); border-radius: 12px; overflow: hidden; background: var(--tb-surface); box-shadow: 0 1px 2px rgba(15, 20, 25, .04), 0 18px 40px rgba(15, 20, 25, .09); }
.fenetre-barre { display: flex; align-items: center; gap: var(--tb-sp-2); height: 34px; padding: 0 12px; background: var(--tb-surface-2); border-bottom: 1px solid var(--tb-bordure); }
.fenetre-pastilles { display: flex; gap: 6px; flex: none; }
.fenetre-pastilles i { width: 10px; height: 10px; border-radius: 50%; background: var(--tb-bordure-2); }
.fenetre-pastilles i:nth-child(1) { background: #ff5f57; }
.fenetre-pastilles i:nth-child(2) { background: #febc2e; }
.fenetre-pastilles i:nth-child(3) { background: #28c840; }
.fenetre-adresse { display: block; flex: 1; text-decoration: none; transition: color var(--tb-duree); text-align: center; font-size: var(--tb-t-xs); color: var(--tb-texte-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 42px; }
/* Le site est rendu en 1280 px puis réduit : une page vue de loin, pas une page à l'étroit. */
.fenetre-adresse:hover { color: var(--tb-texte); text-decoration: underline; }
.fenetre-ecran { position: relative; height: 460px; overflow: hidden; background: var(--tb-surface); }
.fenetre-ecran iframe { position: absolute; top: 0; left: 0; width: 1280px; height: 1610px; border: 0; transform: scale(.285); transform-origin: 0 0; }
@media (min-width: 1500px) { .fenetre-ecran { height: 520px; } .fenetre-ecran iframe { transform: scale(.32); } }
/* Un écran blanc ne s'explique pas tout seul : la note dit quoi en penser. */
.fenetre-pied { padding: 8px 12px; border-top: 1px solid var(--tb-bordure); background: var(--tb-surface-2); font-size: var(--tb-t-xs); color: var(--tb-texte-3); line-height: 1.45; }

/* ── Module « Utilisateurs » : les comptes d'une création ─────────────────────
   Une liste dense qu'on parcourt, une fiche qu'on lit, des gestes qui se
   voient. Pas une couleur décorative : le vert, l'ambre et le rouge ne servent
   qu'à dire une situation, et se lisent donc là où il y en a une. */
.cpt { padding: var(--tb-sp-4) 0 var(--tb-sp-5); }
.cpt-attente, .cpt-vide { padding: var(--tb-sp-5) 0; color: var(--tb-texte-3); font-size: var(--tb-t-m); text-align: center; }

.cpt-barre { display: flex; align-items: center; flex-wrap: wrap; gap: var(--tb-sp-3); margin-bottom: var(--tb-sp-3); }
.cpt-q { flex: 1; min-width: 210px; height: 34px; padding: 0 12px; border: 1px solid var(--tb-bordure-2); border-radius: var(--tb-rayon-s); background: var(--tb-surface); font: inherit; font-size: var(--tb-t-m); color: var(--tb-texte); }
.cpt-q:focus { outline: none; border-color: var(--tb-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tb-accent) 14%, transparent); }
.cpt-etats { display: flex; flex-wrap: wrap; gap: 6px; }
.cpt-etat { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid transparent; background: var(--tb-surface-2); font-size: var(--tb-t-s); color: var(--tb-texte-2); transition: background var(--tb-duree), color var(--tb-duree); }
.cpt-etat:hover { background: var(--tb-surface-3); }
.cpt-etat span { font-size: var(--tb-t-xs); color: var(--tb-texte-3); font-variant-numeric: tabular-nums; }
.cpt-etat.est-actif { background: var(--tb-accent); color: var(--tb-accent-encre); }
.cpt-etat.est-actif span { color: inherit; opacity: .75; }

/* Un tableau large ne pousse jamais la page : il défile dans son propre cadre. */
.cpt-cadre { border: 1px solid var(--tb-bordure); border-radius: var(--tb-rayon); background: var(--tb-surface); overflow-x: auto; }
.cpt-table { width: 100%; border-collapse: collapse; font-size: var(--tb-t-m); }
.cpt-table th { padding: 9px 12px; border-bottom: 1px solid var(--tb-bordure); text-align: left; font-size: var(--tb-t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--tb-texte-3); white-space: nowrap; }
.cpt-table td { padding: 10px 12px; border-bottom: 1px solid var(--tb-bordure); vertical-align: top; color: var(--tb-texte-2); }
.cpt-table tr:last-child td { border-bottom: 0; }
.cpt-table .cpt-nb { text-align: right; font-variant-numeric: tabular-nums; }
.cpt-table .cpt-date { white-space: nowrap; color: var(--tb-texte-3); }
.cpt-table tr.est-alerte td { background: color-mix(in srgb, var(--tb-danger) 5%, transparent); }
.cpt-ligne { cursor: pointer; transition: background var(--tb-duree); }
.cpt-ligne:hover, .cpt-ligne:focus-visible { background: var(--tb-surface-2); outline: none; }
.cpt-nom { display: block; font-weight: 600; color: var(--tb-texte); }
.cpt-mail, .cpt-mono { display: block; font-size: var(--tb-t-s); color: var(--tb-texte-3); }
.cpt-mono { font-family: var(--tb-mono); }

.cpt-pastille { display: inline-block; margin-right: 5px; padding: 2px 8px; border-radius: 999px; background: var(--tb-surface-3); font-size: var(--tb-t-xs); font-weight: 500; color: var(--tb-texte-2); white-space: nowrap; }
.cpt-pastille.est-vert { background: color-mix(in srgb, var(--tb-ok) 12%, transparent); color: var(--tb-ok); }
.cpt-pastille.est-ambre { background: color-mix(in srgb, var(--tb-alerte) 13%, transparent); color: var(--tb-alerte); }
.cpt-pastille.est-rouge { background: color-mix(in srgb, var(--tb-danger) 11%, transparent); color: var(--tb-danger); }

.cpt-pages { display: flex; align-items: center; gap: var(--tb-sp-2); margin-top: var(--tb-sp-3); font-size: var(--tb-t-s); color: var(--tb-texte-3); }
.cpt-pages span { margin-right: auto; }

/* La fiche : ce qui se lit à gauche, ce qui s'engage à droite. */
.cpt-retour { display: inline-flex; align-items: center; height: 28px; padding: 0 10px 0 6px; margin-bottom: var(--tb-sp-3); border-radius: var(--tb-rayon-s); font-size: var(--tb-t-s); color: var(--tb-texte-2); }
.cpt-retour:hover { background: var(--tb-surface-2); color: var(--tb-texte); }
.cpt-tete h3 { margin: 0; font-size: var(--tb-t-xl); letter-spacing: -.02em; }
.cpt-tete p { margin: 4px 0 0; font-size: var(--tb-t-m); color: var(--tb-texte-2); }
.cpt-deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: var(--tb-sp-5); margin-top: var(--tb-sp-4); align-items: start; }
.cpt-droite { position: sticky; top: 0; }
@media (max-width: 1100px) { .cpt-deux { grid-template-columns: minmax(0, 1fr); } .cpt-droite { position: static; } }
.cpt h4 { margin: var(--tb-sp-5) 0 var(--tb-sp-2); font-size: var(--tb-t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--tb-texte-3); }
.cpt-gauche > h4:first-child, .cpt-droite > h4:first-child { margin-top: 0; }
.cpt-defs { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: 2px var(--tb-sp-3); margin: 0; font-size: var(--tb-t-m); }
.cpt-defs dt { padding: 5px 0; color: var(--tb-texte-3); }
.cpt-defs dd { margin: 0; padding: 5px 0; color: var(--tb-texte); }
.cpt-aide { margin: 4px 0 0; font-size: var(--tb-t-xs); line-height: 1.5; color: var(--tb-texte-3); }

.cpt-geste { display: flex; flex-direction: column; gap: 8px; padding: 12px; margin-bottom: var(--tb-sp-3); border: 1px solid var(--tb-bordure); border-radius: var(--tb-rayon); background: var(--tb-surface); }
.cpt-geste.est-danger { border-color: color-mix(in srgb, var(--tb-danger) 24%, var(--tb-bordure)); }
.cpt-geste label { display: flex; flex-direction: column; gap: 4px; font-size: var(--tb-t-xs); color: var(--tb-texte-3); }
.cpt-geste input, .cpt-geste select { height: 32px; padding: 0 9px; border: 1px solid var(--tb-bordure-2); border-radius: var(--tb-rayon-s); background: var(--tb-surface); font: inherit; font-size: var(--tb-t-m); color: var(--tb-texte); }
.cpt-geste input:focus, .cpt-geste select:focus { outline: none; border-color: var(--tb-accent); }
.cpt-geste .btn { width: 100%; justify-content: center; }
.cpt-journal { margin-top: var(--tb-sp-4); }