/* ===========================================================================
   Portail des retours — mise en page
   ---------------------------------------------------------------------------
   Chargee APRES ds-tokens.css et ds-components.css (copies du Desktop). Aucune
   couleur, aucun rayon, aucune duree ecrits ici : tout passe par les jetons
   --ds-* (tests/test_socle.py refuse une couleur litterale). Les seules
   valeurs propres au portail sont des LARGEURS, declarees ci-dessous.

   Proprietes logiques seulement (inline/block, start/end) : la meme feuille
   sert le francais et l'arabe, sans regle [dir="rtl"] a maintenir.
   =========================================================================== */

:root {
  --rt-page-max: 72rem;      /* largeur de lecture du portail sur un poste */
  --rt-etroit-max: 34rem;    /* cartes d'entree (connexion, liaison) */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body.rt-corps {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ds-bg);
  color: var(--ds-text);
  font-family: var(--ds-font);
  font-size: var(--ds-text-base);
  line-height: var(--ds-leading-normal);
}

a {
  color: var(--ds-accent);
  text-underline-offset: 2px;
}
/* Pas sur un bouton : un lien-bouton garde la couleur de sa variante au
   survol (sinon un bouton principal devient bleu sur marine, 1,02:1). */
a:not(.btn):hover {
  color: var(--ds-accent-hover);
}
a:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--ds-focus-ring);
  border-radius: var(--ds-radius-sm);
}

h1, h2, h3 {
  line-height: var(--ds-leading-tight);
}

/* ── Barre du haut ──────────────────────────────────────────────────────── */
.rt-barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-2) var(--ds-space-5);
  min-height: var(--ds-topbar-h);
  padding: var(--ds-space-2) var(--ds-page-pad-x);
  background: var(--ds-navy-600);
  color: var(--ds-text-inverse);
}

.rt-marque {
  display: inline-flex;
  align-items: baseline;
  gap: var(--ds-space-2);
  color: var(--ds-text-inverse);
  font-size: var(--ds-text-md);
  font-weight: var(--ds-weight-bold);
  text-decoration: none;
  white-space: nowrap;
}
.rt-marque:hover {
  color: var(--ds-text-inverse);
}
.rt-marque-sous {
  color: var(--ds-gold-light);
  font-weight: var(--ds-weight-semi);
}

.rt-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-1) var(--ds-space-4);
}
.rt-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ds-control-h-compact);
  color: var(--ds-text-inverse);
  text-decoration: none;
  font-weight: var(--ds-weight-medium);
  border-block-end: 2px solid transparent;
}
.rt-nav a:hover {
  color: var(--ds-gold-light);
}
.rt-nav a[aria-current="page"] {
  border-block-end-color: var(--ds-gold);
}

.rt-barre-fin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-2);
  margin-inline-start: auto;
  min-width: 0;
}
.rt-barre-fin form {
  margin: 0;
}
.rt-compte {
  max-inline-size: 18rem;
  color: var(--ds-gold-light);
  font-size: var(--ds-text-sm);
}

.btn.rt-bouton-barre {
  background: transparent;
  color: var(--ds-text-inverse);
  border-color: var(--ds-navy-300);
}
.btn.rt-bouton-barre:hover {
  background: var(--ds-navy-500);
  color: var(--ds-text-inverse);
}

/* ── Page ───────────────────────────────────────────────────────────────── */
.rt-page {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--rt-page-max);
  margin-inline: auto;
  padding: var(--ds-page-pad-y) var(--ds-page-pad-x) var(--ds-space-8);
}
.rt-page-etroite {
  max-width: var(--rt-etroit-max);
}

.rt-carte-centree {
  margin-block-start: var(--ds-space-7);
}

.rt-pied {
  padding: var(--ds-space-4) var(--ds-page-pad-x);
  color: var(--ds-text-2);
  font-size: var(--ds-text-sm);
  text-align: center;
}
.rt-pied p {
  margin: 0;
}

/* ── Formulaires et cartes d'entree ─────────────────────────────────────── */
.rt-carte-entree {
  margin-block-start: var(--ds-space-6);
  padding: var(--ds-space-6);
  box-shadow: var(--ds-shadow-sm);
}
.rt-carte-entree .ds-page-header {
  margin-block-end: var(--ds-space-4);
}

.rt-formulaire {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  margin-block-start: var(--ds-space-4);
}

.rt-champ .ds-field-help {
  margin: var(--ds-space-1) 0 0;
}

.rt-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-2) var(--ds-space-3);
}
.rt-actions .btn {
  white-space: normal;
  text-align: center;
  line-height: var(--ds-leading-tight);
}

.rt-note {
  margin: var(--ds-space-5) 0 0;
  color: var(--ds-text-2);
  font-size: var(--ds-text-sm);
}

.rt-alerte-texte {
  margin: 0;
  color: var(--ds-text);
}

/* ── Pastilles, numeros ─────────────────────────────────────────────────── */
.rt-numero {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semi);
  color: var(--ds-text);
}
.rt-pastille,
.rt-type {
  vertical-align: middle;
}

/* ── Filtres de liste ───────────────────────────────────────────────────── */
.rt-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  margin-block-end: var(--ds-space-4);
}
.rt-filtre {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-height: var(--ds-control-h-compact);
  padding: 0 var(--ds-space-3);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-card);
  color: var(--ds-text);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  text-decoration: none;
}
.rt-filtre:hover {
  background: var(--ds-surface-2);
  color: var(--ds-text);
}
.rt-filtre[aria-current="true"] {
  background: var(--ds-cream);
  border-color: var(--ds-cream-border);
  color: var(--ds-gold-text);
}
.rt-filtre-compte {
  color: var(--ds-text-2);
  font-variant-numeric: tabular-nums;
}

/* ── Liste des tickets : une ligne par ticket ───────────────────────────── */
.rt-liste-cadre {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-sm);
  overflow: hidden;
}
.rt-liste-entete,
.rt-ligne {
  display: grid;
  grid-template-columns: 9rem 6rem minmax(0, 1fr) 11rem 7rem;
  align-items: center;
  gap: var(--ds-space-3);
  padding: var(--ds-space-3) var(--ds-space-4);
}
.rt-liste-entete {
  background: var(--ds-surface-2);
  border-block-end: 1px solid var(--ds-border);
  color: var(--ds-text-2);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semi);
  text-transform: uppercase;
  letter-spacing: var(--ds-tracking-caps);
}
.rt-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rt-liste li + li {
  border-block-start: 1px solid var(--ds-border-light);
}
.rt-ligne {
  color: var(--ds-text);
  text-decoration: none;
}
.rt-ligne:hover {
  background: var(--ds-surface);
  color: var(--ds-text);
}
.rt-ligne:focus-visible {
  outline: 2px solid transparent;
  box-shadow: inset var(--ds-focus-ring);
}
.rt-ligne-titre {
  min-width: 0;
  font-weight: var(--ds-weight-medium);
  overflow-wrap: anywhere;
}
.rt-ligne-date {
  color: var(--ds-text-2);
  font-size: var(--ds-text-sm);
  font-variant-numeric: tabular-nums;
}

/* ── Formulaire du ticket ───────────────────────────────────────────────── */
.rt-page-formulaire {
  max-width: calc(var(--ds-form-max-w) + 2 * var(--ds-page-pad-x));
}
.rt-bloc {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  min-width: 0;
}
.rt-bloc-titre {
  margin: 0;
}
.rt-groupe {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.rt-choix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--ds-space-3);
}
.rt-choix-ligne {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2) var(--ds-space-5);
}
.rt-choix-carte {
  padding: var(--ds-space-3);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius);
  background: var(--ds-card);
}
.rt-choix-carte:has(input:checked) {
  background: var(--ds-cream);
  border-color: var(--ds-cream-border);
}
.rt-choix-carte > input {
  inset-inline-start: var(--ds-space-3);
  inset-block-start: calc(var(--ds-space-3) + var(--ds-space-1));
}
.rt-grille-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--ds-space-4);
  margin-block-start: var(--ds-space-4);
}
.rt-replie-titre {
  cursor: pointer;
  font-weight: var(--ds-weight-semi);
}
.rt-replie-titre:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--ds-focus-ring);
  border-radius: var(--ds-radius-sm);
}
[hidden] {
  display: none !important;
}

.rt-depot {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  padding: var(--ds-space-5);
  border: 2px dashed var(--ds-border-strong);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  text-align: center;
  transition: border-color var(--ds-transition), background-color var(--ds-transition);
}
.rt-depot.est-survole {
  border-color: var(--ds-accent);
  background: var(--ds-accent-dim);
}
.rt-depot-invite {
  margin: 0;
  font-weight: var(--ds-weight-medium);
}
.rt-depot-choisir {
  color: var(--ds-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
/* Le champ natif reste le vrai controle (clavier, lecteur d'ecran, envoi sans
   script) ; il est seulement masque a la vue : son bouton parlerait la langue
   du navigateur, pas celle du portail. Le libelle « choisissez-les » l'ouvre. */
.rt-depot-fichiers {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.rt-depot:focus-within {
  box-shadow: var(--ds-focus-ring);
}
.rt-depot {
  position: relative;
}
.rt-depot-message {
  margin: 0;
  color: var(--ds-danger);
  font-size: var(--ds-text-sm);
}
.rt-depot-message:empty {
  display: none;
}
.rt-depot-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  text-align: start;
}
.rt-depot-item {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  padding: var(--ds-space-2);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-card);
  min-width: 0;
}
.rt-depot-nom {
  flex: 1 1 auto;
  font-size: var(--ds-text-sm);
}
.rt-vignette {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border-radius: var(--ds-radius-sm);
  object-fit: cover;
  background: var(--ds-surface-3);
}
.rt-vignette-video {
  display: inline-grid;
  place-items: center;
  color: var(--ds-text-2);
}

.rt-consentement {
  padding: var(--ds-space-3);
  border: 1px solid var(--ds-warn-border);
  border-radius: var(--ds-radius);
  background: var(--ds-warn-bg);
}
.rt-envoi .btn[data-envoi]:disabled {
  opacity: 0.55;
}

.rt-erreurs {
  margin-block-end: var(--ds-space-4);
}
.rt-erreurs-liste {
  margin: var(--ds-space-1) 0 0;
  padding-inline-start: var(--ds-space-5);
}

/* ── Un ticket ──────────────────────────────────────────────────────────── */
.rt-fil-ariane {
  margin: 0 0 var(--ds-space-3);
  font-size: var(--ds-text-sm);
}
.rt-bandeau {
  margin-block-end: var(--ds-space-4);
}
.rt-ticket-entete {
  margin-block-end: var(--ds-space-5);
}
.rt-ticket-marques {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-2);
}
.rt-ticket-titre {
  margin: var(--ds-space-2) 0;
}
.rt-ticket-dates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-1) var(--ds-space-5);
  margin: 0;
  color: var(--ds-text-2);
  font-size: var(--ds-text-sm);
}
.rt-note-etat {
  margin: var(--ds-space-2) 0 0;
  font-weight: var(--ds-weight-medium);
}
.rt-ticket-corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
  gap: var(--ds-space-5);
  align-items: start;
}
.rt-ticket-principal,
.rt-ticket-cote {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-5);
  min-width: 0;
}
.rt-sous-titre {
  margin: 0;
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semi);
  color: var(--ds-text-2);
}
.rt-texte {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: var(--ds-leading-normal);
}
.rt-pieces {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--ds-space-3);
}
.rt-piece {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-1);
  min-width: 0;
}
.rt-vignette-grande {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-surface-3);
}
.rt-video {
  width: 100%;
  border-radius: var(--ds-radius);
  background: var(--ds-navy);
}
.rt-piece-nom {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-2);
}
.rt-fil,
.rt-historique {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
}
.rt-message {
  padding: var(--ds-space-3) var(--ds-space-4);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-card);
}
.rt-message-equipe {
  border-inline-start: 3px solid var(--ds-gold);
  background: var(--ds-surface);
}
.rt-message-entete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ds-space-2);
  margin: 0 0 var(--ds-space-2);
  font-size: var(--ds-text-sm);
  color: var(--ds-text-2);
}
.rt-message-entete strong {
  color: var(--ds-text);
}
.rt-historique li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-2);
  font-size: var(--ds-text-sm);
  color: var(--ds-text-2);
}
.rt-meta {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
}
.rt-meta > div {
  display: flex;
  justify-content: space-between;
  gap: var(--ds-space-3);
  font-size: var(--ds-text-sm);
}
.rt-meta dt {
  color: var(--ds-text-2);
}
.rt-meta dd {
  margin: 0;
  text-align: end;
  overflow-wrap: anywhere;
}

/* ── Ce qui arrive ──────────────────────────────────────────────────────── */
.rt-colonnes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-space-4);
  align-items: start;
}
.rt-colonne {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  background: var(--ds-surface-2);
}
.rt-colonne-titre {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  margin: 0;
  font-size: var(--ds-text-md);
}
.rt-cartes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
}
.rt-carte-route {
  padding: var(--ds-space-3);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-sm);
}
.rt-carte-votre {
  border-color: var(--ds-cream-border);
  background: var(--ds-cream);
}
.rt-carte-titre {
  margin: 0;
  font-weight: var(--ds-weight-medium);
  overflow-wrap: anywhere;
}
.rt-carte-pied {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  margin: var(--ds-space-2) 0 0;
}

/* ── Administration ─────────────────────────────────────────────────────── */
.rt-page-large {
  max-width: 90rem;
}
.rt-export {
  flex-wrap: wrap;
}
.rt-champ-mois {
  width: auto;
}
.rt-barre-filtres {
  align-items: flex-end;
  margin-block-end: var(--ds-space-4);
  padding: var(--ds-space-3) var(--ds-space-4);
}
.rt-filtre-champ {
  display: flex;
  flex-direction: column;
  flex: 1 1 9rem;
  min-width: 0;
}
.rt-filtre-champ .ds-label {
  margin-block-end: var(--ds-space-1);
}
.rt-filtre-actions {
  flex: 0 0 auto;
}
.rt-table-file .ds-table td {
  vertical-align: top;
  padding-block: var(--ds-space-3);
}
.rt-cellule-titre {
  min-width: 14rem;
  font-weight: var(--ds-weight-medium);
}
.rt-action {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  padding: var(--ds-space-2) var(--ds-space-3);
  background: var(--ds-surface);
}
.rt-action[open] {
  background: var(--ds-card);
}
.rt-action-titre {
  cursor: pointer;
  font-weight: var(--ds-weight-semi);
  min-height: var(--ds-control-h-compact);
  display: flex;
  align-items: center;
}
.rt-action-titre:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--ds-focus-ring);
  border-radius: var(--ds-radius-sm);
}
.rt-action .rt-formulaire {
  margin-block-start: var(--ds-space-2);
}
.rt-message-interne {
  border-style: dashed;
}
.rt-historique-acteur {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-2);
}
.rt-qr {
  display: flex;
  justify-content: center;
  padding: var(--ds-space-3);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-card);
  color: var(--ds-navy);
}
.rt-qr-image {
  max-width: 100%;
  height: auto;
}
.rt-cle-libelle {
  margin-block-start: var(--ds-space-4);
}
.rt-cle code,
.rt-codes code {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-base);
  overflow-wrap: anywhere;
  color: var(--ds-text);
}
.rt-cle {
  margin: var(--ds-space-1) 0 0;
  padding: var(--ds-space-2) var(--ds-space-3);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface-2);
}
.rt-codes {
  list-style: none;
  margin: 0 0 var(--ds-space-4);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-space-2);
}
.rt-codes li {
  padding: var(--ds-space-2);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  text-align: center;
}
.rt-zone-danger {
  border-color: var(--ds-danger-border);
}
.rt-contacts {
  margin: 0 0 var(--ds-space-4);
}
.rt-contact {
  display: inline-block;
  margin-inline-end: var(--ds-space-2);
  color: var(--ds-text);
}
.rt-champ-code {
  font-family: var(--ds-font-mono);
  letter-spacing: 0.2em;
}

/* ── Largeurs intermediaires ────────────────────────────────────────────── */
@media (max-width: 64rem) {
  .rt-ticket-corps {
    grid-template-columns: minmax(0, 1fr);
  }
  .rt-colonnes {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 52rem) {
  .rt-liste-entete {
    display: none;
  }
  .rt-ligne {
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas:
      "numero type date"
      "titre titre titre"
      "etat etat etat";
    row-gap: var(--ds-space-2);
  }
  .rt-ligne-numero { grid-area: numero; }
  .rt-ligne-type { grid-area: type; }
  .rt-ligne-titre { grid-area: titre; }
  .rt-ligne-etat { grid-area: etat; }
  .rt-ligne-date { grid-area: date; justify-self: end; }
}

/* ── Telephone ──────────────────────────────────────────────────────────── */
@media (max-width: 40rem) {
  .rt-barre,
  .rt-page,
  .rt-pied {
    padding-inline: var(--ds-space-4);
  }
  .rt-page {
    padding-block-start: var(--ds-space-4);
  }
  .rt-nav {
    order: 3;
    flex-basis: 100%;
  }
  .ds-page-title {
    font-size: var(--ds-text-lg);
  }
}