/* ============================================================================
   PASSERELLE · Diagnostic
   Complément de passerelle-ui.css, propre à cet outil. Aucune couleur nouvelle
   en dehors des quatre repères d'axe définis par la note de cadrage.

   Cette page ne charge pas Tailwind : elle porte des données personnelles et un
   lien d'accès, donc aucun script tiers. Les quelques espacements dont elle a
   besoin sont écrits ici.
   ============================================================================ */

[hidden]{ display:none !important; }

/* ---------- Titres --------------------------------------------------------- */
.dg-title{ font-size:var(--step-3); }
@media (min-width:640px){ .dg-title{ font-size:var(--step-4); } }
.dg-title--page{ font-size:var(--step-3); margin-top:.5rem; }
.dg-title:focus, .dg-situation:focus{ outline:none; }
.dg-eyebrow{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:var(--step--1);
             letter-spacing:.1em; text-transform:uppercase; color:var(--teal); margin-top:2rem; }
.dg-lede{ margin-top:.75rem; font-size:var(--step-1); }
.dg-rule{ margin:1.75rem 0 2rem; }

/* ---------- Accueil -------------------------------------------------------- */
.dg-personal{ margin-top:1.5rem; }
.dg-start{ margin-top:2rem; }
.dg-aside-title{ font-size:var(--step-2); }
/* Colonne resserrée et lignes équilibrées : le bord droit est plus régulier, sans justification
   (la charte demande un texte aligné à gauche). */
.dg-aside-p{ margin-top:1rem; color:rgba(250,249,247,.78); font-size:var(--step-0); max-width:46ch; text-wrap:pretty; }
@media (min-width:900px){ .pt-gate__inner.dg-single{ grid-template-columns:1fr; max-width:var(--read-w); margin-left:auto; margin-right:auto; } }

/* ---------- Situations ----------------------------------------------------- */
.dg-axis{ display:flex; align-items:center; gap:.625rem; margin-top:2rem;
          font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:var(--step--1);
          letter-spacing:.08em; text-transform:uppercase; color:var(--navy); }
/* La couleur repère l'axe sur le point seulement : le libellé reste en navy,
   parce que le coral et le bleu acier ne tiennent pas le contraste en texte. */
.dg-axis__dot{ width:9px; height:9px; border-radius:50%; flex:none; background:var(--slate); }
.dg-axis__dot[data-axis="suivre"]{ background:#0D5C63; }
.dg-axis__dot[data-axis="traiter"]{ background:#C96B63; }
.dg-axis__dot[data-axis="peser"]{ background:#7E8D73; }
.dg-axis__dot[data-axis="engager"]{ background:#8FA8B8; }

.dg-situation{ font-size:var(--step-2); line-height:1.3; margin-top:1rem; max-width:30ch; }
@media (min-width:640px){ .dg-situation{ max-width:34ch; } }
.dg-choices{ display:grid; gap:.75rem; margin-top:2rem; }
.pt-choice[aria-pressed="true"]{ border-color:var(--teal); border-width:2px;
                                 padding:calc(1rem - 1px) calc(1.125rem - 1px);
                                 background:rgba(13,92,99,.06); }
.dg-nav{ margin-top:2rem; }

/* ---------- Contexte ------------------------------------------------------- */
.dg-field{ margin-bottom:1.75rem; }
.dg-field .pt-label{ font-size:var(--step-0); font-weight:600; }
.dg-hint{ margin:-.125rem 0 .625rem; }
.dg-req{ color:var(--coral-ink); font-weight:600; }
.dg-short{ min-height:72px; }
.dg-long{ min-height:160px; }
#sendMsg{ min-height:1.5rem; }

/* ---------- Confirmation --------------------------------------------------- */
.dg-done{ margin-top:1.25rem; font-size:var(--step-1); color:var(--slate); }