/*
 * InTraTool - couche de theme.
 *
 * Chargee en dernier, elle reprend l'habillage par-dessus milligram et cake.css
 * sans toucher aux templates : le markup existant (table, .top-nav, .index
 * .content, .paginator, .buttonITT...) est deja semantique.
 *
 * Pour revenir a l'ancien rendu, retirer 'theme' de la liste Html->css() dans
 * templates/layout/default.php. Aucun autre fichier n'en depend.
 */

:root {
  /* Neutres : une seule echelle, du fond au texte le plus appuye. */
  --itt-bg: #f4f6f8;
  --itt-surface: #ffffff;
  --itt-surface-alt: #fafbfc;
  --itt-border: #e3e8ee;
  --itt-border-strong: #cbd4de;
  --itt-text: #1f2933;
  --itt-text-muted: #6b7785;
  --itt-text-faint: #98a3b0;

  /* Accent : reprend le bleu deja present dans color.css. */
  --itt-accent: #3d7fc1;
  --itt-accent-dark: #2f6aa6;
  --itt-accent-soft: #eaf2fb;

  --itt-radius: 8px;
  --itt-radius-sm: 5px;
  --itt-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --itt-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --itt-shadow-lg: 0 4px 12px rgba(16, 24, 40, .08);
  --itt-focus: 0 0 0 3px rgba(61, 127, 193, .25);

  --itt-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Couleurs d'action.
     Une seule famille harmonisee : meme saturation, meme clarte, du fond au
     texte. Le codage par action est conserve, mais en teinte douce a texte
     fonce plutot qu'en aplat sature a texte blanc. On y gagne le contraste
     (le jaune de la scorecard etait illisible en blanc) et la hierarchie :
     seules les actions principales restent pleines. */
  --itt-btn-primary: #2f6aa6;
  --itt-btn-primary-hover: #275a8e;

  --itt-btn-success: #1f7a47;
  --itt-btn-success-hover: #1a6a3d;

  --itt-soft-neutral-bg: #ffffff;
  --itt-soft-neutral-fg: #46525f;
  --itt-soft-neutral-br: #cbd4de;

  --itt-soft-danger-bg: #fdecee;
  --itt-soft-danger-fg: #a32436;
  --itt-soft-danger-br: #f3c3cb;

  --itt-soft-warning-bg: #fdf3e3;
  --itt-soft-warning-fg: #8a5a08;
  --itt-soft-warning-br: #f0dab0;

  --itt-soft-info-bg: #f0ecfd;
  --itt-soft-info-fg: #5b3fb0;
  --itt-soft-info-br: #d7ccf8;

  --itt-soft-success-bg: #e8f6ed;
  --itt-soft-success-fg: #1c6b40;
  --itt-soft-success-br: #bde0cb;
}

/* ---------------------------------------------------------------- Base --- */

html {
  /* Milligram pose 62.5% : on garde la base pour ne pas casser les rem
     existants, mais on redescend la taille du corps a une valeur lisible. */
  font-size: 62.5%;
}

body {
  background: var(--itt-bg);
  color: var(--itt-text);
  font-family: var(--itt-font);
  font-size: 1.4rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--itt-text);
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.25;
  margin-bottom: 1.2rem;
}

h1 { font-size: 2.4rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.7rem; }
h4 { font-size: 1.5rem; }
h5, h6 { font-size: 1.35rem; }

a {
  color: var(--itt-accent);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--itt-accent-dark);
  text-decoration: underline;
}

:focus-visible {
  border-radius: var(--itt-radius-sm);
  box-shadow: var(--itt-focus);
  outline: none;
}

/* ------------------------------------------------------------ Barre haute --- */

.top-nav {
  align-items: center;
  background: var(--itt-surface);
  border-bottom: 1px solid var(--itt-border);
  box-shadow: var(--itt-shadow-sm);
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  justify-content: space-between;
  padding: .8rem 2rem;
  position: sticky;
  top: 0;
  z-index: 50;
}

.top-nav-title {
  gap: 1.2rem;
}

/* Le logo client occupait 8rem de haut : la barre en devenait enorme. */
.top-nav .customer_logo {
  border: 1px solid var(--itt-border);
  height: 4rem;
  width: 4rem;
}

.customer_name {
  padding-left: 0;
}

.customer_name > a {
  color: var(--itt-text-muted) !important;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.app_title {
  border-left: 1px solid var(--itt-border);
  font-size: 1.6rem;
  font-weight: 650;
  margin-left: .4rem;
  padding-left: 1.6rem;
}

/* Le trait de gauche separe le titre du logo client. Sur la page de connexion
   il n'y a pas de logo : le titre ouvre la barre, et le trait n'aurait rien a
   separer. */
.top-nav-title > .app_title:first-child {
  border-left: none;
  margin-left: 0;
  padding-left: 0;
}

.app_title a { color: var(--itt-text); }
.app_title a:hover { text-decoration: none; }
.app_title span { color: var(--itt-accent); }

.top-nav-links {
  gap: 1.2rem;
}

.top-nav-links a {
  color: var(--itt-text-muted);
  font-weight: 600;
}

.logout {
  height: 2rem;
  opacity: .55;
  padding: 0 .6rem;
  transition: opacity .15s ease;
}

.logout:hover { opacity: 1; }

/* --------------------------------------------------------------- Layout --- */

.main {
  padding: 2.4rem 0 4rem;
}

.main > .container {
  margin: 0 auto;
  max-width: 1500px;
  padding: 0 2rem;
  width: 100%;
}

/* ----------------------------------------------------------- Breadcrumb --- */

/* Rendu par BreadcrumbHelper, juste au-dessus du contenu de chaque page.
   Le separateur est pose en CSS plutot qu'en <li> supplementaires : le
   lecteur d'ecran n'annonce ainsi que les vraies etapes. */
.breadcrumb {
  margin: 0 0 1.6rem;
}

.breadcrumb ul {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 1.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb li {
  align-items: center;
  display: flex;
  margin: 0;
}

.breadcrumb li + li::before {
  color: var(--itt-text-faint);
  content: "/";
  margin: 0 .7rem;
}

.breadcrumb a {
  color: var(--itt-text-muted);
  text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumb a:focus {
  color: var(--itt-accent-dark);
  text-decoration: underline;
}

/* Derniere miette : la page courante, jamais un lien. */
.breadcrumb li:last-child span {
  color: var(--itt-text);
  font-weight: 600;
}

/* --------------------------------------------------------------- Tables --- */

/* Le conteneur devient une carte : c'est lui qui porte le cadre et l'ombre,
   la table n'a donc plus besoin de bordures exterieures. */
.table-responsive {
  background: var(--itt-surface);
  border: 1px solid var(--itt-border);
  border-radius: var(--itt-radius);
  box-shadow: var(--itt-shadow);
  overflow: auto;
}

.table-responsive > table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 1.3rem;
  margin: 0;
  width: 100%;
}

.table-responsive thead th {
  background: var(--itt-surface-alt);
  border-bottom: 1px solid var(--itt-border-strong);
  color: var(--itt-text-muted);
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: .04em;
  padding: .9rem 1rem;
  position: sticky;
  text-align: left;
  text-transform: uppercase;
  top: 0;
  white-space: nowrap;
  z-index: 2;
}

.table-responsive thead th a {
  color: inherit;
}

.table-responsive tbody td {
  border-bottom: 1px solid var(--itt-border);
  padding: .75rem 1rem;
  vertical-align: middle;
}

.table-responsive tbody tr:last-child td {
  border-bottom: none;
}

.table-responsive tbody tr:nth-child(even) {
  background: var(--itt-surface-alt);
}

.table-responsive tbody tr:hover {
  background: var(--itt-accent-soft);
}

/* Colonne d'actions : compacte et alignee a droite.
 *
 * Pas de white-space:nowrap ici, et c'est delibere : il forcait les icones sur
 * une seule ligne, ce qui donnait a la colonne une largeur minimale de deux
 * icones. Sur un index large - Incidents en tete - cette trentaine de pixels
 * incompressibles suffisait a pousser la table au-dela de son conteneur et a
 * faire apparaitre une barre de defilement horizontale pour presque rien.
 *
 * Sans nowrap, la colonne se laisse comprimer : les icones passent a la ligne
 * au moment precis ou elles declencheraient la barre, et la table tient. Aux
 * largeurs confortables la colonne reste sur une ligne, rien ne change.
 */
.table-responsive td.actions,
.table-responsive th.actions {
  text-align: right;
  width: 1%;
}

.table-responsive td.actions a {
  margin-left: .4rem;
}

/* Pas d'espace mort aux extremites : la marge precedant le premier bouton et
   le padding suivant le dernier s'ajoutaient au padding de la cellule. */
.table-responsive td.actions a:first-child {
  margin-left: 0;
}

.table-responsive td.actions a:last-child {
  padding-right: 0;
}

/* Les lignes de filtres restent visibles sous l'en-tete. */
.table-responsive thead tr:nth-child(2) th {
  top: 3.4rem;
}

.table-responsive input,
.table-responsive select {
  font-size: 1.25rem;
  height: 3rem;
  margin: 0;
  padding: 0 .6rem;
}

/* ------------------------------------------------- Formulaires et champs --- */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
  background: var(--itt-surface);
  border: 1px solid var(--itt-border-strong);
  border-radius: var(--itt-radius-sm);
  box-shadow: var(--itt-shadow-sm);
  color: var(--itt-text);
  font-family: inherit;
  font-size: 1.35rem;
  padding: .6rem .9rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--itt-accent);
  box-shadow: var(--itt-focus);
  outline: none;
}

input[disabled],
select[disabled],
textarea[disabled] {
  background: var(--itt-surface-alt);
  color: var(--itt-text-faint);
}

label {
  color: var(--itt-text-muted);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: .01em;
}

fieldset {
  background: var(--itt-surface);
  border: 1px solid var(--itt-border);
  border-radius: var(--itt-radius);
  box-shadow: var(--itt-shadow);
  padding: 1.8rem 2rem;
}

legend {
  color: var(--itt-text);
  font-size: 1.5rem;
  font-weight: 650;
  padding: 0 .6rem;
}

/* -------------------------------------------------------------- Boutons --- */

/* Forme commune. Les couleurs restent celles de intratool.css : seules la
   geometrie, la densite et les etats d'interaction sont repris.
   Aucun !important ici : cette feuille etant chargee en dernier, la cascade
   suffit, et les boutons qui posent leurs propres dimensions en !important
   (les boutons-icones, .buttonAddDialog) gardent ainsi les leurs. */
button,
input[type="submit"],
input[type="button"],
.buttonITT {
  border: none;
  border-radius: var(--itt-radius-sm);
  box-shadow: var(--itt-shadow-sm);
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
  font-size: 1.3rem;
  font-weight: 600;
  height: auto;
  letter-spacing: .01em;
  line-height: 1.4;
  margin: 0 .4rem 1rem 0;
  padding: 1rem 1.4rem;
  text-transform: none;
  transition: filter .15s ease, box-shadow .15s ease, transform .05s ease;
  box-sizing: border-box;
  width: 250px;
}

/* Un bouton sans classe est le bouton principal de son formulaire : le
   « Envoyer » d'un ecran de saisie. cake.css les peint tous en rouge
   (--pomegranate-color), heritage qui donnait a chaque formulaire l'allure
   d'une action dangereuse -- 41 des 42 boutons de soumission de l'application
   etaient dans ce cas, seul celui de la connexion portait une classe.
   Le rouge reste porte par les classes explicites (.buttonDelete,
   .buttonReject), qui designent bien un refus ou une suppression : le
   :not([class]) garantit qu'aucune d'elles n'est touchee ici. */
button:not([class]),
input[type="submit"]:not([class]) {
  background-color: var(--itt-btn-primary);
  border-color: var(--itt-btn-primary);
  color: #fff;
}

button:not([class]):hover,
input[type="submit"]:not([class]):hover {
  background-color: var(--itt-btn-primary-hover);
  filter: none;
}

button:hover,
input[type="submit"]:hover,
.buttonITT:hover {
  box-shadow: var(--itt-shadow);
  filter: brightness(1.07);
  text-decoration: none;
}

button:active,
input[type="submit"]:active,
.buttonITT:active {
  box-shadow: var(--itt-shadow-sm);
  transform: translateY(1px);
}

/* Les variantes pleine largeur gardaient un display:block hérité. */
.buttonBack,
.buttonAccept,
.buttonReject,
.buttonCancel {
  display: inline-block;
}

/*
 * Couleurs par action.
 *
 * Ces regles reprennent celles de intratool.css, qui reste inchange : en
 * retirant 'theme' du layout, les aplats d'origine reviennent seuls. D'ou le
 * !important sur la couleur du texte, rendu necessaire par le
 * `color: white !important` de .buttonITT qu'on ne peut pas battre autrement.
 *
 * Hierarchie : plein = action principale ou irreversible confirmee ;
 * teinte douce = tout le reste.
 */

/* Action principale d'un ecran : creer.
   Le selecteur type+classe est necessaire pour les <input type="submit"> :
   l'aplat rose de cake.css les vise par attribut, ce qu'une simple classe ne
   peut pas battre. */
.buttonAdd,
.buttonAddDialog,
input[type="submit"].buttonAdd {
  background-color: var(--itt-btn-primary);
  color: #fff !important;
}

.buttonAdd:hover,
.buttonAddDialog:hover,
input[type="submit"].buttonAdd:hover {
  background-color: var(--itt-btn-primary-hover);
  filter: none;
}

/* Accepter engage un plan d'action : pleine, mais distincte de la creation. */
.buttonAccept {
  background-color: var(--itt-btn-success);
  color: #fff !important;
}

.buttonAccept:hover {
  background-color: var(--itt-btn-success-hover);
  filter: none;
}

/* Actions secondaires : teinte douce, bordure de la meme famille. */
.button2FA,
.buttonList,
.buttonScorecard,
.buttonEdit,
.buttonDelete,
.buttonClose,
.buttonBack,
.buttonView,
.buttonReject,
.buttonCancel,
.buttonToggleActivate {
  border: 1px solid transparent;
}

.buttonEdit,
.buttonScorecard {
  background-color: var(--itt-soft-warning-bg);
  border-color: var(--itt-soft-warning-br);
  color: var(--itt-soft-warning-fg) !important;
}

.buttonDelete,
.buttonReject,
.buttonCancel,
.buttonToggleActivate {
  background-color: var(--itt-soft-danger-bg);
  border-color: var(--itt-soft-danger-br);
  color: var(--itt-soft-danger-fg) !important;
}

.buttonList,
.buttonClose {
  background-color: var(--itt-soft-info-bg);
  border-color: var(--itt-soft-info-br);
  color: var(--itt-soft-info-fg) !important;
}

.button2FA {
  background-color: var(--itt-soft-success-bg);
  border-color: var(--itt-soft-success-br);
  color: var(--itt-soft-success-fg) !important;
}

.buttonBack,
.buttonView {
  background-color: var(--itt-soft-neutral-bg);
  border-color: var(--itt-soft-neutral-br);
  color: var(--itt-soft-neutral-fg) !important;
}

/* Les teintes douces s'assombrissent au survol : un filtre de luminosite les
   delaverait au lieu de les renforcer. */
.button2FA:hover,
.buttonList:hover,
.buttonScorecard:hover,
.buttonEdit:hover,
.buttonDelete:hover,
.buttonClose:hover,
.buttonBack:hover,
.buttonView:hover,
.buttonReject:hover,
.buttonCancel:hover,
.buttonToggleActivate:hover {
  filter: brightness(.97);
}

/* ----------------------------------------------------------- Pagination --- */

.paginator {
  margin-top: 1.6rem;
}

.paginator .pagination {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.paginator .pagination li { margin: 0; }

.paginator .pagination a,
.paginator .pagination span {
  background: var(--itt-surface);
  border: 1px solid var(--itt-border);
  border-radius: var(--itt-radius-sm);
  color: var(--itt-text-muted);
  display: block;
  font-size: 1.25rem;
  font-weight: 600;
  min-width: 3.2rem;
  padding: .5rem .8rem;
  text-align: center;
}

.paginator .pagination a:hover {
  background: var(--itt-accent-soft);
  border-color: var(--itt-accent);
  color: var(--itt-accent-dark);
  text-decoration: none;
}

.paginator .pagination .active span,
.paginator .pagination .current a {
  background: var(--itt-accent);
  border-color: var(--itt-accent);
  color: #fff;
}

.paginator .pagination .disabled a,
.paginator .pagination .disabled span {
  color: var(--itt-text-faint);
  opacity: .6;
}

/* --------------------------------------------------- Messages et statuts --- */

.message {
  border: 1px solid var(--itt-border);
  border-left: 4px solid var(--itt-text-muted);
  border-radius: var(--itt-radius-sm);
  box-shadow: var(--itt-shadow-sm);
  font-size: 1.35rem;
  margin-bottom: 1.6rem;
  padding: 1.1rem 1.4rem;
}

.message.success {
  background: #edfaf1;
  border-left-color: #27ae60;
  color: #1c6b40;
}

.message.error {
  background: #fdeeee;
  border-left-color: #e74c3c;
  color: #922b21;
}

.message.warning {
  background: #fef8e7;
  border-left-color: #f39c12;
  color: #8a5a08;
}

.message.info {
  background: var(--itt-accent-soft);
  border-left-color: var(--itt-accent);
  color: var(--itt-accent-dark);
}

/* Statuts d'incident : des pastilles plutot que du texte colore.
   Le retrait etait desactive tant que ces classes habillaient la cellule du
   tableau elle-meme : il en deformait la colonne. Elles habillent desormais le
   seul libelle, la pastille peut donc respirer. */
.Cancelled,
.InProgress,
.Finished {
  border-radius: 999px;
  display: inline-block;
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: .02em;
  padding: .25rem .9rem;
  text-align: center;
  white-space: nowrap;
  min-width: 90px;
}

.InProgress { background: var(--itt-accent-soft); color: var(--itt-accent-dark); }
.Finished { background: #e8f6ed; color: #1c6b40; }
.Cancelled { background: #f1f3f5; color: var(--itt-text-muted); }

/* -------------------------------------------------- Icones des actions --- */

/*
 * Les icones de la colonne Actions sont des SVG servis en <img> : le document
 * etant isole, ni le survol ni le theme ne peuvent en changer la couleur. On
 * joue donc sur l'opacite et l'echelle, seuls leviers disponibles de
 * l'exterieur.
 */
.image25px {
  opacity: .72;
  transition: opacity .15s ease, transform .1s ease;
  vertical-align: middle;
}

a:hover .image25px,
.image25px:hover {
  opacity: 1;
  transform: scale(1.1);
}

/*
 * Boutons-icones de la barre de recherche, generes par ExportHelper.
 *
 * Ce sont des input[type=submit] : ils heritent donc de l'aplat rose que
 * cake.css applique a tous les boutons soumis, et des regles de bouton posees
 * plus haut dans ce fichier. Or ils ne doivent montrer que leur icone.
 *
 * index_global.css garde la main sur leurs dimensions, qu'il pose en
 * !important. On ne reprend donc que ce qui doit l'etre : l'aplat de fond, et
 * la taille de police, dont le retour ferait apparaitre le value="1" du bouton
 * d'export a cote de son icone.
 */
input[type="submit"].mysubmit {
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  border-radius: 0;
  box-shadow: none;
  font-size: 0;
  margin: 0 2px;
  opacity: .7;
  transition: opacity .15s ease, transform .1s ease;
  vertical-align: middle;
}

input[type="submit"].mysubmit:hover {
  filter: none;
  opacity: 1;
  transform: scale(1.12);
}

input[type="submit"].mysubmit:active {
  box-shadow: none;
  transform: scale(1.02);
}

/* On redirige vers les SVG sans toucher a index_global.css, qui reste la
   reference si l'on retire ce theme. */
.submitExport { background-image: url("../img/export.svg"); }
.submitExportDisabled { background-image: url("../img/export_disabled.svg"); }
.submitRAZ { background-image: url("../img/raz.svg"); }
.submitRechercher { background-image: url("../img/rechercher.svg"); }

input[type="submit"].submitExportDisabled {
  cursor: not-allowed;
  opacity: .4;
}

input[type="submit"].submitExportDisabled:hover {
  opacity: .4;
  transform: none;
}

/* L'icone d'action impossible n'est pas cliquable : elle reste en retrait. */
img[src$="no_way.svg"] {
  opacity: .45;
}

img[src$="no_way.svg"]:hover {
  opacity: .45;
  transform: none;
}

/* --------------------------------------------------------------- Divers --- */

.index.content > h3,
.index.content > h4 {
  align-items: baseline;
  display: flex;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

hr {
  border: none;
  border-top: 1px solid var(--itt-border);
  margin: 2.4rem 0;
}

footer .footer-intratool {
  border-top: 1px solid var(--itt-border);
  color: var(--itt-text-faint);
  display: flex;
  flex-wrap: wrap;
  font-size: 1.2rem;
  gap: 1.6rem;
  justify-content: center;
  padding: 1.6rem 2rem;
}

/* Fil de dialogue affiche en pleine largeur dans la fiche incident. La modale
   garde son rendu d'origine : ces regles sont portees par .dialog-thread. */
.dialog-thread .incident-dialog-content {
  display: block;
}

.dialog-thread .message-dialog {
  border: 1px solid var(--itt-border);
  border-left: 4px solid var(--itt-border-strong);
  border-radius: var(--itt-radius);
  box-shadow: var(--itt-shadow-sm);
  margin: 0 0 1.2rem;
  max-width: 62ch;
  padding: 1.2rem 1.4rem;
}

/* Le lisere reprend le codage couleur des statuts de dialogue, celui des
   pictogrammes ASK/ACK/... et des cellules de statut dans les tables : on
   suit l'avancement du fil sans lire les libelles. Selecteur d'attribut
   plutot que classe, pour ne pas heriter des bordures et ombres pleines que
   .ASK et consorts posent sur les cellules. */
.dialog-thread [data-status="ASK"] { border-left-color: var(--orange-color); }
.dialog-thread [data-status="ACK"] { border-left-color: var(--sun-flower-color); }
.dialog-thread [data-status="REJ"],
.dialog-thread [data-status="IRJ"] { border-left-color: var(--pomegranate-color); }
.dialog-thread [data-status="ACP"] { border-left-color: var(--nephritis-color); }

/* Le fournisseur repond depuis l'autre bord : la conversation se lit d'un
   coup d'oeil sans avoir a relire les noms. */
.dialog-thread .dialog-supplier {
  background: var(--itt-accent-soft);
  margin-left: auto;
}

.dialog-thread .message-meta {
  color: var(--itt-text-muted);
  font-size: 1.2rem;
  margin-bottom: .6rem;
}

.dialog-thread .message-body p:last-child {
  margin-bottom: 0;
}

/* Les actions d'une section restent des boutons, mais a la largeur de leur
   libelle : la largeur fixe des boutons de formulaire n'a pas de sens ici. */
.section-head {
  margin-bottom: 1.4rem;
}

/* Le pictogramme de statut se lit avec le titre, pas sous lui. */
.section-head h4 img {
  margin-left: .6rem;
  vertical-align: middle;
}

.section-actions .buttonITT {
  margin: 0;
  width: auto;
}

.empty-state {
  color: var(--itt-text-muted);
}

/* Bandeau d'etat du dialogue. Le lisere reprend le codage couleur des statuts
   deja pose sur le fil et sur les cellules de statut, par attribut plutot que
   par classe pour ne pas heriter des bordures et ombres pleines de .ASK et
   consorts. */
.dialog-status {
  background: var(--itt-surface-alt);
  border: 1px solid var(--itt-border);
  border-left-width: 4px;
  border-radius: var(--itt-radius);
}

.dialog-status[data-status="ASK"] { border-left-color: var(--orange-color); }
.dialog-status[data-status="ACK"] { border-left-color: var(--sun-flower-color); }
.dialog-status[data-status="REJ"],
.dialog-status[data-status="IRJ"] { border-left-color: var(--pomegranate-color); }
.dialog-status[data-status="ACP"] { border-left-color: var(--nephritis-color); }

.dialog-status__expected {
  color: var(--itt-text-muted);
}

/* L'echeance ne se colore que lorsqu'elle porte une alerte : un delai tenu se
   lit comme le reste, un delai depasse doit sauter aux yeux. */
.dialog-status__delay--temps { color: var(--itt-text-muted); }
.dialog-status__delay--aujourdhui { color: var(--itt-soft-warning-fg); }
.dialog-status__delay--retard { color: var(--itt-soft-danger-fg); }

/* Note de formulaire : le meme ton doux que les messages d'information, sans
   l'appui d'une alerte -- elle explique, elle n'avertit pas. */
.form-note {
  background: var(--itt-soft-info-bg);
  border-left-color: var(--itt-soft-info-br);
  border-radius: var(--itt-radius);
  color: var(--itt-soft-info-fg);
}

/* Le bouton se lit comme un separateur : le trait court de chaque cote du
   libelle et les chevrons donnent le sens (vers le bas pour ouvrir, vers le
   haut pour refermer). La structure est dans intratool.css, on ne reprend
   ici que la couleur, la typographie et les etats d'interaction. */
.showhide-divider {
  color: var(--itt-text-muted);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.4;
  margin: 2.4rem 0 1.2rem;
}

.showhide-divider::before,
.showhide-divider::after {
  background: var(--itt-border);
}

/* Les etats generiques du bouton (ombre, brightness, enfoncement) n'ont pas
   de sens sur un trait : on les neutralise. */
.showhide-divider:hover {
  box-shadow: none;
  color: var(--itt-accent);
  filter: none;
}

.showhide-divider:hover::before,
.showhide-divider:hover::after {
  background: var(--itt-border-strong);
}

.showhide-divider:active {
  box-shadow: none;
  transform: none;
}

.showhide-divider:focus-visible {
  outline: none;
}

.showhide-divider:focus-visible .showhide-divider__label {
  border-radius: var(--itt-radius-sm);
  box-shadow: var(--itt-focus);
}

/* Ecrans etroits : la barre passe en colonne, la table reste scrollable. */
@media only screen and (max-width: 700px) {
  .top-nav {
    align-items: flex-start;
    flex-direction: column;
    padding: 1rem 1.2rem;
  }

  .main > .container {
    padding: 0 1.2rem;
  }

  .app_title {
    border-left: none;
    margin-left: 0;
    padding-left: 0;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Les ecrans de saisie

   Un formulaire se lit mieux en colonne qu'etale sur toute la largeur : un
   champ « Nom » de mille pixels oblige l'oeil a traverser l'ecran entre le
   libelle et ce qu'on vient d'y taper, et la ligne de saisie n'a plus aucun
   rapport avec ce qu'elle recoit.

   La carte se centre donc dans l'espace qui lui reste, et cet espace depend
   de la colonne « Actions » : quand elle est la, c'est ce qui reste a sa
   droite ; quand elle ne l'est pas, c'est la page entiere -- la colonne du
   formulaire, alors seule de sa rangee, s'y centre a son tour. Une seule
   regle couvre les deux cas, et aucun gabarit n'a eu a bouger.

   Les grilles, les fiches et les tableaux de bord ne sont pas concernes :
   eux se lisent d'autant mieux qu'ils sont larges. C'est `.form` qui fait la
   difference, et elle est deja posee sur chacun de ces ecrans. */
.form.content {
  margin-inline: auto;
  max-width: 72rem;
}

/* Seule une rangee qui porte un formulaire est centree : une grille, une
   fiche ou un tableau de bord seul dans sa rangee reste ou il est. Un
   navigateur qui ignore `:has()` ignore la regle entiere, et rend la page
   comme avant -- alignee a gauche, jamais cassee. */
.row:has(> .column > .form.content) > .column:only-child {
  margin-inline: auto;
}

/* Un exemple ou une precision attachee a un champ de formulaire.
   Pose sous le controle, il doit remonter contre lui : sinon il flotte a
   mi-distance des deux et semble annoncer le suivant. Meme convention que
   .plan-aide-champ dans l'ecran du plan d'actions. */
.aide-champ {
    margin: -8px 0 16px;
    font-size: 1.25rem;
    color: var(--itt-text-muted, #6b7785);
}