/* Console Autotask : disposition et couleurs relevées sur les captures de l'outil réel, vue d'un utilisateur VAR
   (interfaces/autotask/dashboard layout.png). Le logo et la tuile du lanceur sont recadrés de la capture (img/). */

.at {
  --at-bleu: #376a94;
  --at-bleu-fonce: #1f5ea8;
  --at-lien: #1565c0;
  --at-fond: #f6f7f8;
  --at-carte: #ffffff;
  --at-bordure: #e1e4e8;
  --at-texte: #222831;
  --at-doux: #5f6b78;
  --at-chiffre: #95aedd;
  --at-rouge: #e0312b;
  --at-vert: #3aa655;
  font-family: Roboto, "Segoe UI", system-ui, Arial, sans-serif;
  font-size: 14px;
  color: var(--at-texte);
  background: var(--at-fond);
  min-height: calc(100vh - 32px);
}
.at a { color: var(--at-lien); }
.at button { font-family: inherit; font-size: inherit; } /* Pas « font: inherit » : il écraserait le gras des boutons. */
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* --- La barre du haut --- */
.at-top { display: flex; align-items: center; gap: 18px; height: 68px; padding: 0 12px 0 16px; background: var(--at-bleu); color: #fff; }
.at-produit { display: flex; align-items: center; min-width: 150px; }
.at-produit img { display: block; }
.at-menus { display: flex; gap: 26px; margin-left: 124px; }
.at-menus a { color: #fff !important; font-size: 16px; display: flex; align-items: center; gap: 4px; text-decoration: none !important; }
.at-menus .ico { width: 16px; height: 16px; }
.at-recherche { display: flex; gap: 8px; margin-left: auto; }
.at-recherche-type { display: flex; align-items: center; justify-content: space-between; gap: 30px; width: 198px; height: 40px; padding: 0 10px; background: #214059; color: #dfe6ee; border: 1px solid #2c5272; border-radius: 3px; }
.at-recherche-champ { display: flex; align-items: center; width: 320px; height: 40px; padding: 0 10px; background: #214059; border: 1px solid #2c5272; border-radius: 3px; color: #dfe6ee; }
.at-icone.avec-point { position: relative; }
.at-icone.avec-point::after { content: ""; position: absolute; top: 5px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: #e5484d; }
.at-avatar.rond { position: relative; width: 26px; height: 26px; border-radius: 50%; font-size: 11px; background: #2bb3a0; color: #fff; }
.at-presence { position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%; background: #3ac25b; border: 2px solid var(--at-bleu); }
.at-lanceur { background: none; border: 0; padding: 0; margin-left: 10px; cursor: pointer; display: flex; }
.at-recherche-champ input { flex: 1; background: none; border: 0; color: #fff; font: inherit; outline: none; }
.at-recherche-champ input::placeholder { color: #a9bbd0; }
.at-icones { display: flex; align-items: center; gap: 4px; }
.at-icone, .at-moi { display: flex; align-items: center; gap: 6px; background: none; border: 0; color: #fff; padding: 6px; cursor: pointer; border-radius: 4px; }
.at-icone:hover, .at-moi:hover { background: rgba(255,255,255,.12); }
.at-icone .ico { width: 24px; height: 24px; }
.at-moi { font-size: 14px; color: #dfe6ee; }
.at-icone-gris { background: none; border: 0; color: #4a5562; padding: 2px; cursor: pointer; display: inline-flex; }
.at-icone-gris .ico { width: 18px; height: 18px; }

/* --- Les rails --- */
.at-corps { display: flex; min-height: calc(100vh - 96px); }
.at-rail { width: 66px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0; background: #fff; border-right: 1px solid var(--at-bordure); }
.at-rail-bouton { position: relative; background: none; border: 0; color: #3c4652; padding: 6px; cursor: pointer; border-radius: 4px; display: flex; justify-content: center; }
.at-rail-bouton.rond { border: 1px solid #c9ced5; border-radius: 50%; padding: 4px; margin-bottom: 10px; }
.at-rail-bouton.actif { align-self: stretch; border-radius: 0; background: #e1e9ef; color: #285063; box-shadow: inset 3px 0 0 var(--at-bleu); padding: 10px 0; }
.at-rail-bouton:hover { background: #eef2f6; }
.at-rail-espace { flex: 1; }
.at-rail-droit { width: 48px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 0; background: #fff; border-left: 1px solid var(--at-bordure); }
.at-compteur { display: block; font-size: 13px; color: #3c4652; margin-top: 4px; }

/* --- Les onglets et l'en-tête du tableau de bord --- */
.at-principal { flex: 1; min-width: 0; padding: 0 20px 30px; }
.at-onglets { display: flex; align-items: center; gap: 2px; height: 42px; border-bottom: 1px solid var(--at-bordure); margin: 0 -20px; padding: 0 20px; background: var(--at-fond); }
.at-onglets a { height: 100%; display: flex; align-items: center; gap: 6px; padding: 0 20px; color: #4a5562 !important; font-size: 16px; font-weight: 500; text-decoration: none !important; border-bottom: 2px solid transparent; }
.at-onglets a.actif { color: #1d2733 !important; border-bottom-color: var(--at-lien); }
.at-onglets a .ico { width: 16px; height: 16px; }
.at-onglet-plus { background: none; border: 0; color: #4a5562; cursor: pointer; padding: 6px; }
.at-onglet-plus .ico { width: 16px; height: 16px; }
.at-onglets-espace { flex: 1; }
.at-onglets-groupe { display: flex; align-items: center; gap: 4px; background: none; border: 0; font-weight: 500; color: #1d2733; cursor: pointer; }
.at-onglets-groupe .ico { width: 16px; height: 16px; }
.at-tdb-entete { display: flex; align-items: center; gap: 12px; padding: 20px 10px; }
.at-tdb-entete h1 { display: flex; align-items: center; gap: 8px; font-size: 28px; font-weight: 500; margin: 0; flex: 1; }
.at-tdb-entete h1 .ico { width: 22px; height: 22px; }
.at-select { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; min-width: 260px; height: 38px; padding: 0 10px; background: #fff; border: 1px solid #c9ced5; border-radius: 3px; color: var(--at-texte); cursor: pointer; }
.at-select .ico { width: 16px; height: 16px; }
.at-compte { color: var(--at-doux); font-size: 13px; font-weight: 400; }

/* --- Les widgets --- */
/* Grille mesurée sur la capture (1918 px de large) : 5 colonnes égales de 336 px, écarts de 21 px ; les grandes
   cartes couvrent 2 colonnes (693 px) ; toutes font 324 px de haut. Les rapports largeur/hauteur sont gardés à
   toute largeur d'écran (ex. 1680 x 1050) ; le contenu qui dépasse défile dans la carte, comme dans l'outil. */
/* Les petites cartes fixent la hauteur de la rangée (rapport 336/324) ; les grandes la suivent (contain: size les
   empêche d'agrandir la rangée avec leur contenu), pour que les bas des cartes restent alignés. */
/* Écarts proportionnels : 21 px sur 1765 px de grille, et 22 px sur 1918 px d'écran, dans la capture. */
.at-widgets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 1.19%; row-gap: 1.15vw; align-items: stretch; }
.at-widget { background: var(--at-carte); border: 1px solid var(--at-bordure); box-shadow: 0 1px 2px rgba(0,0,0,.06); display: flex; flex-direction: column; aspect-ratio: 336 / 324; min-height: 0; overflow: hidden; }
.at-widget.large { grid-column: span 2; aspect-ratio: auto; contain: size; }
.at-mt-defile { flex: 1; min-height: 0; overflow-y: auto; }
.at-widget-entete { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 18px 6px; }
.at-widget-entete h2 { margin: 0; font-size: 18px; font-weight: 500; text-transform: uppercase; display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.at-widget-entete h2 .ico { vertical-align: -2px; margin-left: 6px; }
.at-avert { width: 16px !important; height: 16px !important; color: #3d7bd9; }
.at-widget-corps { flex: 1; display: flex; flex-direction: column; padding: 0 18px 12px; min-height: 0; }
.at-widget-pied { display: flex; gap: 120px; align-items: center; padding-top: 10px; color: var(--at-doux); }
.at-widget-pied a { font-weight: 500; }

.at-mt { width: 100%; border-collapse: collapse; }
.at-mt th { text-align: left; font-size: 14px; font-weight: 600; padding: 8px; border-bottom: 1px solid var(--at-bordure); white-space: nowrap; }
.at-mt td { padding: 6px 8px; border-bottom: 1px solid #e6e8eb; vertical-align: top; background: #fff; }
.at-mt tbody tr:first-child td { background: var(--at-fond); }
.at-mt tbody tr { cursor: pointer; }
.at-mt tbody tr:hover td { background: #eaf1fa; }
.at-mt-titre a { color: #1d2733 !important; font-weight: 600; font-size: 14px; line-height: 1.35; }
.at-mt-contact { display: block; color: var(--at-doux); font-size: 12px; margin-top: 2px; }
.at-mt-date { color: #4a5562; font-size: 13px; white-space: nowrap; }
.at-mt-date.en-retard { color: #a8313a; }
.at-tri { display: inline-flex; flex-direction: column; vertical-align: middle; color: #9aa3ad; }
.at-tri .ico { width: 12px; height: 8px; stroke-width: 2.5; }

.at-vide { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #2b3440; }
.at-vide p { margin: 8px 0 0; font-size: 16px; }
.at-vide-dessin { width: 160px; height: 100px; }
.at-vide-dessin rect { fill: #eceef1; }
.at-vide-dessin .cercle { fill: #fff; stroke: #9aa3ad; stroke-width: 2; }
.at-vide-dessin .trait { fill: none; stroke: #9aa3ad; stroke-width: 1.6; stroke-linecap: round; }
.at-vide-dessin text { fill: #9aa3ad; font-size: 11px; }

.at-compteurs { flex: 1; display: flex; flex-direction: column; justify-content: space-around; padding: 8px 0; }
.at-compteurs-ligne { display: flex; align-items: center; gap: 20px; }
.at-nombre { font-size: 40px; font-weight: 500; color: var(--at-chiffre); min-width: 90px; text-align: center; }
.at-nombre.rouge { color: var(--at-rouge); }
.at-nombre-libelle { font-size: 18px; font-style: italic; flex: 1; text-align: center; }
.at-nombre-libelle.droit { font-style: normal; font-weight: 500; }
.at-nombre-libelle.normal { font-style: normal; }
.at-suivis { flex: 1; display: flex; justify-content: space-around; align-items: center; }
.at-suivis > div { display: flex; flex-direction: column; align-items: center; gap: 16px; font-size: 17px; }
.at-suivis .at-nombre { font-size: 48px; }

/* --- Les pastilles --- */
.at-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 14px; font-size: 13px; font-weight: 500; white-space: nowrap; color: #fff; }
.at-pill .ico { width: 16px; height: 16px; }
.at-pill-rang { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: #fff; font-size: 11px; font-weight: 700; }
.p1 { background: #d62f2f; }
.p1 .at-pill-rang { color: #d62f2f; }
.p2 { background: #f6845f; color: #2b1a12; }
.p2 .at-pill-rang { color: #c4532f; }
.p3 { background: #0cc433; color: #001d30; }
.p3 .at-pill-rang { color: #1f8a33; }
.p4 { background: #6b7785; }
.p4 .at-pill-rang { color: #6b7785; }
.s-new { background: #2297ed; }
.s-progress { background: #2d9cdb; }
.s-waiting { background: #9b59c9; }
.s-escalate { background: #c2185b; }
.s-scheduled { background: #e2457a; }
.s-complete { background: #6b7785; }

/* --- La liste complète --- */
.at-grille-conteneur { background: #fff; border: 1px solid var(--at-bordure); }
.at-grille { width: 100%; border-collapse: collapse; }
.at-grille th { text-align: left; font-weight: 600; font-size: 13px; background: #f7f8fa; padding: 10px; border-bottom: 1px solid var(--at-bordure); white-space: nowrap; }
.at-grille td { padding: 9px 10px; border-bottom: 1px solid #eef0f3; }
.at-grille tbody tr { cursor: pointer; }
.at-grille tbody tr:hover { background: #eaf1fa; }
.at-num { white-space: nowrap; color: var(--at-doux); font-variant-numeric: tabular-nums; }

/* --- La page d'un ticket --- */
.at-ticket-entete { display: flex; align-items: center; gap: 14px; height: 58px; padding: 0 18px; background: var(--at-bleu-fonce); color: #fff; }
.at-ticket-entete > a { color: #fff !important; display: flex; }
.at-ticket-entete h1 { flex: 1; margin: 0; font-size: 26px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-ticket-nav { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.at-ticket-nav a, .at-ticket-nav button { color: #fff !important; background: none; border: 0; display: flex; cursor: pointer; padding: 0; }
.at-ticket-nav .inactif { opacity: .45; display: flex; }
.at-ticket-nav .ico { width: 24px; height: 24px; }
.at-barre-outils { display: flex; gap: 6px; align-items: center; padding: 12px; background: #f7f8fa; border-bottom: 3px solid var(--at-bleu-fonce); }
.at-bouton { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; background: #fff; border: 1px solid #d3d8de; border-radius: 3px; color: #1d2733; font-weight: 700; cursor: pointer; }
.at-bouton:hover { border-color: #9fb3c8; }
.at-bouton.desactive { color: #8a939d; }
.at-bouton .ico { width: 18px; height: 18px; }
.at-ticket-corps { display: flex; gap: 0; align-items: flex-start; }
.at-ticket-corps > .at-rail { width: 52px; min-height: calc(100vh - 160px); gap: 14px; padding-top: 16px; background: #f7f8fa; }
.at-col-gauche { width: 360px; flex: none; padding: 12px 10px; display: flex; flex-direction: column; gap: 14px; }
.at-col-centre { flex: 1; min-width: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 14px; }
.at-col-droite { width: 360px; flex: none; padding: 12px 10px; display: flex; flex-direction: column; gap: 14px; }

.at-carte { background: #fff; border: 1px solid var(--at-bordure); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.at-carte-entete { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 4px; cursor: pointer; }
.at-carte-entete h2 { margin: 0; font-size: 19px; font-weight: 500; }
.at-carte-corps { padding: 8px 20px 16px; }
.at-carte.replie .at-carte-corps, .at-section.replie .at-section-corps { display: none; }
.at-carte.replie .at-carte-entete .ico, .at-section.replie .at-section-entete .ico { transform: rotate(180deg); }
.at-champ { padding: 6px 0 8px; }
.at-champ-libelle { font-size: 14px; font-weight: 500; color: #2b3440; margin-bottom: 4px; }
.at-champ-valeur { min-height: 18px; color: #2b3440; }
.at-champ-valeur.gras { font-weight: 600; }
.at-champ-valeur.rouge { color: var(--at-rouge); font-weight: 600; }
.at-queue { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 8px; border-radius: 14px; background: #5a5f66; color: #fff; font-weight: 500; }
.at-queue .ico { width: 18px; height: 18px; }
.at-ressource { display: flex; gap: 10px; align-items: center; }
.at-role { color: #2b3440; }
.at-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px; border-radius: 4px; background: var(--at-vert); color: #fff; font-weight: 600; font-size: 17px; }
.at-avatar.petit { width: 30px; height: 30px; border-radius: 50%; font-size: 12px; background: #8fb7e6; color: #1d3d63; }
.at-avatar.grand { width: 56px; height: 56px; font-size: 22px; }

/* Alignements relevés sur la capture annotée (bord gauche des sections = B) :
   ligne jaune à B + 9 px : icône du document, titre, ligne « Created », début de la chronologie ;
   ligne bleue à B + 25 px : pointe des chevrons et contenu des sections. */
.at-ticket-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 10px 9px; }
.at-ticket-ident { display: flex; flex-direction: column; }
.at-ident-haut { display: flex; align-items: center; gap: 14px; }
.at-doc { width: 46px !important; height: 56px !important; color: #3d8ee6; stroke-width: 1.4; }
.at-ligne-type { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.at-pill-compte { background: #2ec44f; color: #fff; padding: 4px 12px; font-weight: 600; border-radius: 2px; }
.at-numero, .at-titre { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.at-numero { font-size: 16px; }
.at-titre { font-size: 22px; font-weight: 500; margin-top: 12px; }
.at-numero .ico, .at-titre .ico { width: 18px; height: 18px; }
.at-cree { margin-top: 12px; font-size: 15px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.at-cree .ico { width: 16px; height: 16px; color: var(--at-doux); }
.at-chrono { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid #c9ced5; border-radius: 3px; background: #fff; }
.at-chrono span#at-chrono { font-size: 24px; font-variant-numeric: tabular-nums; margin-right: 6px; }
.at-chrono-bouton { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #c9ced5; background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #3c4652; }
.at-chrono-bouton.pause { background: #a9b6cc; color: #fff; border-color: #a9b6cc; }
.at-chrono-bouton .point { width: 10px; height: 10px; border-radius: 50%; background: #2d7ae0; }
.at-chrono-bouton.annuler { color: var(--at-rouge); }

.at-section { background: #fff; border: 1px solid var(--at-bordure); }
.at-section-entete { display: flex; align-items: center; gap: 11px; padding: 18px 16px; cursor: pointer; color: #5f6b78; }
.at-section-entete > .ico { width: 18px; height: 18px; }
.at-section-entete h2 { margin: 0; font-size: 18px; font-weight: 400; display: flex; align-items: center; gap: 10px; }
.at-section-corps { padding: 0 24px 20px 25px; }
.at-section.chronologie .at-section-corps { padding-left: 9px; }
.at-section-corps p { margin: 0; line-height: 1.5; }
.at-detail-alerte { margin-top: 12px; border-collapse: collapse; font-size: 13px; }
.at-detail-alerte th { text-align: left; color: var(--at-doux); font-weight: 500; padding: 3px 18px 3px 0; white-space: nowrap; }
.at-checklist { list-style: none; margin: 0; padding: 0; }
.at-checklist li { padding: 5px 0; }
.at-checklist input { margin-right: 8px; }
.at-chronologie { display: flex; align-items: center; gap: 4px; color: #4a5562; }
.at-chronologie-barre { flex: 1; height: 10px; background: #e7eaee; border-radius: 5px; overflow: hidden; }
.at-chronologie-barre span { display: block; height: 100%; background: #b8c9e0; }
.at-chronologie .fin { color: #2d7ae0; }
.at-chronologie-cible { color: #4a5562; margin-top: 4px; }
.at-ci { display: flex; align-items: center; gap: 10px; }
.at-ci-aucun { color: #9aa3ad; text-transform: none; }
.at-gris { color: var(--at-doux); font-size: 13px; }

.at-onglets-ticket { display: flex; border-bottom: 1px solid var(--at-bordure); margin-top: 10px; }
.at-onglets-ticket a { flex: 1; text-align: center; padding: 14px 0; color: #4a5562 !important; text-decoration: none !important; border-bottom: 3px solid transparent; }
.at-onglets-ticket a.actif { color: #1d2733 !important; border-bottom-color: var(--at-lien); }
.at-activite-outils { display: flex; gap: 6px; align-items: center; padding: 14px 10px 6px; }
.at-note-rapide { display: flex; gap: 12px; padding: 8px 10px; }
.at-note-rapide textarea { flex: 1; height: 56px; resize: none; border: 1px solid #d3d8de; border-radius: 3px; padding: 8px 12px; font: inherit; }
.at-note-rapide input { width: 130px; border: 1px solid #d3d8de; border-radius: 3px; text-align: center; font: inherit; }
.at-case { display: flex; align-items: center; gap: 8px; padding: 4px 10px; }
.at-filtre { display: flex; gap: 10px; padding: 10px; }
.at-filtre input { flex: 1; height: 38px; border: 1px solid #d3d8de; border-radius: 3px; padding: 0 10px; font: inherit; }
.at-filtre .at-select { min-width: 240px; }
.at-activite { list-style: none; margin: 0; padding: 0 10px; }
.at-activite li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--at-bordure); }
.at-activite li.at-activite-vide { color: var(--at-doux); }
.at-activite-texte { flex: 1; min-width: 0; }
.at-activite-auteur { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.at-activite-auteur .ico { width: 16px; height: 16px; color: var(--at-doux); }
.at-activite-plage { font-weight: 700; margin-top: 4px; }
.at-activite-texte p { margin: 6px 0; line-height: 1.45; }
.at-activite-date { color: var(--at-doux); font-size: 13px; }
.at-activite-liens { display: flex; gap: 14px; margin-top: 4px; font-size: 14px; color: #9aa3ad; }

.at-contact-nom { display: flex; align-items: center; gap: 6px; }
.at-contact-nom .ico { width: 16px; height: 16px; color: var(--at-doux); }
.at-contact-titre { font-weight: 600; margin-top: 14px; }
.at-contact-liens { margin-top: 10px; }
.at-derniers { list-style: none; margin: 0; padding: 0; }
.at-derniers li { padding: 10px 0; border-bottom: 1px solid var(--at-bordure); font-size: 13px; }
.at-derniers li a { font-weight: 600; }
.at-temps { display: flex; text-align: center; }
.at-temps > div { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.at-temps > div + div { border-left: 1px solid var(--at-bordure); }

/* --- La fenêtre « New Time Entry » (interfaces/autotask/entree temps.png) --- */
.at-modal-racine { position: fixed; inset: 0; z-index: 20; min-height: 0; background: transparent; }
.at-modal-fond { position: absolute; inset: 0; background: rgba(33, 41, 52, .55); }
.at-modal { position: absolute; top: 9%; left: 50%; transform: translateX(-50%); width: min(1085px, 92vw); max-height: 86vh; display: flex; flex-direction: column; background: #f6f7f8; border-radius: 3px; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.at-modal-entete { display: flex; align-items: center; justify-content: space-between; padding: 22px 28px 10px; }
.at-modal-entete h2 { margin: 0; font-size: 22px; font-weight: 600; }
.at-modal-icones { display: flex; gap: 10px; align-items: center; }
.at-modal-icones button { background: none; border: 0; color: #1d2733; cursor: pointer; display: flex; padding: 2px; }
.at-modal-icones .ico { width: 24px; height: 24px; }
.at-trait { display: block; width: 18px; height: 2px; background: currentColor; margin-top: 12px; }
.at-modal-outils { display: flex; gap: 10px; align-items: center; padding: 6px 28px 14px; }
.at-modal-outils .at-bouton { height: 38px; }
.at-modele { min-width: 360px; }
.at-modal-defile { flex: 1; min-height: 0; overflow-y: auto; padding: 0 28px 70px; }
.at-modal-ticket { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0 20px; }
.at-doc.petit { width: 40px !important; height: 50px !important; }
.at-modal-titre { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 16px; color: #3c4652; }
.at-modal-titre .ico { width: 18px; height: 18px; }
.at-modal-section { background: #fff; margin-bottom: 14px; }
.at-modal-section-entete { display: flex; align-items: center; gap: 12px; padding: 18px 20px 8px; cursor: pointer; }
.at-modal-section-entete h3 { margin: 0; font-size: 21px; font-weight: 500; }
.at-modal-section.replie .at-modal-section-corps { display: none; }
.at-modal-section.replie .at-modal-section-entete .ico { transform: rotate(180deg); }
.at-modal-section-corps { padding: 10px 34px 24px; }
.at-modal-rangee { display: flex; align-items: flex-end; gap: 80px; }
.at-modal-etat { margin: 0 0 12px; color: #2b3440; }
.at-modal-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 20px; margin-bottom: 18px; }
.at-modal-champ { display: flex; flex-direction: column; gap: 6px; font-weight: 500; color: #2b3440; }
.at-modal-champ em { color: #d62f2f; font-style: normal; margin-left: 2px; }
.at-modal-champ.large { margin-bottom: 16px; }
.at-modal-champ input, .at-modal-select, .at-modal-interne { height: 38px; padding: 0 10px; border: 1px solid #c9ced5; border-radius: 3px; background: #fff; font: inherit; font-weight: 400; color: #1d2733; }
.at-modal-champ input[readonly] { background: #f0f2f4; }
.at-modal-select { min-width: 380px; }
.at-modal-grille .at-modal-select { min-width: 0; }
.at-modal-interne { height: 70px; padding: 8px 10px; resize: vertical; }
.at-editeur { border: 1px solid #c9ced5; border-radius: 3px; background: #fff; }
.at-editeur.en-erreur { border-color: #d62f2f; box-shadow: 0 0 0 1px #d62f2f; }
.at-editeur-outils { display: flex; align-items: center; gap: 2px; padding: 6px 8px; }
.at-editeur-bouton { background: none; border: 0; padding: 2px 6px; font-size: 17px; color: #3c4652; cursor: default; display: flex; }
.at-editeur-bouton.b { font-weight: 700; }
.at-editeur-bouton.i { font-style: italic; font-family: Georgia, serif; }
.at-editeur-bouton.u { text-decoration: underline; }
.at-editeur-bouton .ico { width: 18px; height: 18px; }
.at-editeur-sep { width: 1px; height: 18px; background: #d3d8de; margin: 0 4px; }
.at-editeur textarea { display: block; width: 100%; min-height: 200px; border: 0; padding: 10px; font: inherit; font-weight: 400; resize: vertical; outline: none; }
.at-modal-compteur { font-size: 13px; color: #5f6b78; font-weight: 400; }
.at-modal-erreur { color: #d62f2f; font-weight: 400; min-height: 0; }
.at-modal-notification { position: absolute; bottom: 0; left: 44%; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #fff; border: 1px solid #d3d8de; border-bottom: 0; border-radius: 3px 3px 0 0; font: inherit; font-size: 16px; color: #1d2733; cursor: pointer; }
.at-compte-pastille { display: inline-block; min-width: 32px; padding: 0 8px; border-radius: 10px; background: #a9b6cc; color: #fff; font-size: 12px; text-align: center; }
.at-activite-interne { color: #5f6b78; font-size: 13px; }

/* --- Les champs modifiables en ligne (interfaces/autotask/select *.png) --- */
.pf { background: #5a5f66; }
.pc { background: #b7bec7; color: #2b3440; }
.s-progress { background: #3aa655; }
.s-parts { background: #4a7fc1; }
.s-info { background: #d62f2f; }
.at-champ-modifiable { cursor: pointer; border-radius: 3px; margin: 0 -6px; padding-left: 6px; padding-right: 6px; }
.at-champ-modifiable:hover { background: #f1f5f9; }
.at-champ-ouvert { position: relative; }
.at-requis { color: #d62f2f; font-style: normal; margin-left: 2px; }
.at-combo { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 10px; background: #fff; border: 1px solid #3d7bd9; border-radius: 4px; cursor: pointer; }
.at-combo-valeur { color: #8a939d; }
.at-combo .ico { width: 18px; height: 18px; color: #3c4652; }
.at-liste-choix { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 2px); list-style: none; margin: 0; padding: 4px 0; background: #fff; border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.at-liste-choix li { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 4px 10px; cursor: pointer; color: #1d2733; }
.at-liste-choix li:hover { background: #eef3f8; }
.at-liste-choix li.choisi { background: #dbe5f0; font-weight: 700; }
.at-ico-choix { width: 22px; height: 22px; stroke-width: 1.4; }
.at-ico-chiffre { font: 600 12px Roboto, "Segoe UI", sans-serif; stroke: none; }
.at-lien-rapport { margin-top: 10px !important; font-size: 13px; word-break: break-all; }