/* ===========================================================================
   L'espace client AvoCare (lot S9 ; document 48, D48.5, D48.10)
   ===========================================================================
   Une feuille, lue APRES les jetons du poste (static/ds-tokens.css, servi
   sous /actifs/jetons.css) : aucune couleur, aucune taille de police, aucun
   rayon ni aucune duree ecrits ici en dur — tout vient d'un jeton
   (espace/tests/test_design.py le tient). Proprietes LOGIQUES seulement
   (inline/block, start/end) : la meme feuille sert le francais et le miroir
   arabe. Deux mises en page :

   * .porte   : les pages d'entree, fond marine, une carte au centre (le
                vocabulaire de l'ecran d'activation du poste) ;
   * .espace  : le tableau de bord, bandeau marine puis cartes sur fond clair.

   Le telephone d'abord : une colonne, des cibles de 40 px au moins ; deux
   colonnes de cartes a partir de 760 px.
   =========================================================================== */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("polices/inter-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("polices/inter-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("polices/inter-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("polices/plex-arabic-400.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("polices/plex-arabic-600.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("polices/plex-arabic-700.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

/* ── Les fondations ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--ds-font);
  font-size: var(--ds-text-base);
  line-height: var(--ds-leading-normal);
  color: var(--ds-text);
  background: var(--ds-bg);
}
:lang(ar) body, body:lang(ar) { font-family: var(--ds-font-ar); }
h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--ds-accent); text-underline-offset: 0.18em; }
a:hover { color: var(--ds-accent-hover); }
img, svg { display: block; }
:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; border-radius: var(--ds-radius-sm); }

.icone { inline-size: 1.15em; block-size: 1.15em; flex: none; }
[dir="rtl"] .icone.sens { transform: scaleX(-1); }

/* Le lien d'evitement : invisible jusqu'au clavier. */
.saut {
  position: absolute; inset-inline-start: var(--ds-space-3); inset-block-start: -100px;
  z-index: var(--ds-z-toast);
  padding: var(--ds-space-2) var(--ds-space-4);
  background: var(--ds-card); color: var(--ds-text);
  border-radius: var(--ds-radius); box-shadow: var(--ds-shadow-lg);
  font-weight: var(--ds-weight-semi);
}
.saut:focus { inset-block-start: var(--ds-space-3); }

.texte-second { color: var(--ds-text-2); }

/* ── La marque et le choix de langue (communs aux deux mises en page) ──── */
.marque {
  display: inline-flex; align-items: center; gap: var(--ds-space-3);
  color: var(--ds-text-inverse); text-decoration: none;
}
.marque:hover { color: var(--ds-text-inverse); }
.marque-logo { inline-size: 36px; block-size: 36px; }
.marque-textes { display: flex; flex-direction: column; line-height: var(--ds-leading-tight); }
.marque-nom { font-weight: var(--ds-weight-bold); font-size: var(--ds-text-md); }
.marque-sous {
  color: var(--ds-gold-light); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semi);
  text-transform: uppercase; letter-spacing: var(--ds-tracking-caps);
}
.langue, .btn-bandeau {
  display: inline-flex; align-items: center; gap: var(--ds-space-2);
  min-block-size: var(--ds-control-h-compact);
  padding: 0 var(--ds-space-3);
  border: 1px solid color-mix(in srgb, var(--ds-text-inverse) 22%, transparent);
  border-radius: var(--ds-radius-pill);
  background: color-mix(in srgb, var(--ds-text-inverse) 6%, transparent);
  color: var(--ds-text-inverse);
  font: inherit; font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semi);
  text-decoration: none; cursor: pointer;
  transition: background var(--ds-transition), border-color var(--ds-transition);
}
.langue:hover, .btn-bandeau:hover {
  color: var(--ds-text-inverse);
  background: color-mix(in srgb, var(--ds-text-inverse) 14%, transparent);
  border-color: color-mix(in srgb, var(--ds-text-inverse) 40%, transparent);
}
.langue:focus-visible, .btn-bandeau:focus-visible { outline-color: var(--ds-gold-light); }

/* ── Les pages d'entree ────────────────────────────────────────────────── */
.porte {
  min-block-size: 100vh;
  display: flex; flex-direction: column; align-items: center;
  padding: var(--ds-space-5) var(--ds-space-4) var(--ds-space-7);
  background:
    radial-gradient(1100px 520px at 50% -8%, var(--ds-gold-dim), transparent 60%),
    linear-gradient(160deg, var(--ds-navy) 0%, var(--ds-navy-600) 55%, var(--ds-navy) 100%);
  background-attachment: fixed;
}
.porte-haut {
  inline-size: 100%; max-inline-size: 960px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3);
}
.porte-corps { inline-size: 100%; flex: 1; display: flex; justify-content: center; align-items: flex-start; padding-block-start: clamp(var(--ds-space-6), 9vh, 96px); }
.carte-porte {
  inline-size: 100%; max-inline-size: 460px;
  display: flex; flex-direction: column; gap: var(--ds-space-5);
  padding: var(--ds-space-7) var(--ds-space-6);
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  box-shadow: var(--ds-shadow-xl);
}
.carte-porte-tete { display: flex; flex-direction: column; gap: var(--ds-space-3); }
.carte-porte-tete h1 { font-size: var(--ds-text-xl); line-height: var(--ds-leading-tight); font-weight: var(--ds-weight-bold); }
:lang(ar) .carte-porte-tete h1 { font-size: var(--ds-text-kpi); }
.porte-pied {
  inline-size: 100%; max-inline-size: 460px;
  display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-2);
  margin-block-start: var(--ds-space-6);
  color: color-mix(in srgb, var(--ds-text-inverse) 70%, transparent);
  font-size: var(--ds-text-sm); text-align: center;
}
.porte-pied-confiance { display: inline-flex; align-items: center; gap: var(--ds-space-2); }
.porte-pied-confiance .icone { color: var(--ds-gold-light); }
.porte-pied-liens { display: flex; gap: var(--ds-space-2); }
.porte-pied a { color: var(--ds-text-inverse); }

/* ── Les tuiles d'icone ────────────────────────────────────────────────── */
.tuile {
  display: inline-grid; place-items: center;
  inline-size: 44px; block-size: 44px; flex: none;
  border-radius: var(--ds-radius);
}
.tuile .icone { inline-size: 22px; block-size: 22px; }
.tuile-grande { inline-size: 52px; block-size: 52px; border-radius: var(--ds-radius-lg); }
.tuile-grande .icone { inline-size: 26px; block-size: 26px; }
.tuile-or { background: var(--ds-tile-gold-bg); color: var(--ds-tile-gold-fg); }
.tuile-vert, .tuile-ok { background: var(--ds-tile-green-bg); color: var(--ds-tile-green-fg); }
.tuile-bleu, .tuile-info { background: var(--ds-tile-blue-bg); color: var(--ds-tile-blue-fg); }
.tuile-violet { background: var(--ds-tile-violet-bg); color: var(--ds-tile-violet-fg); }
.tuile-attention { background: var(--ds-warn-bg); color: var(--ds-warn); }
.tuile-danger { background: var(--ds-danger-bg); color: var(--ds-danger); }
.tuile-neutre { background: var(--ds-neutral-bg); color: var(--ds-neutral); }

/* ── Les formulaires ───────────────────────────────────────────────────── */
.pile { display: flex; flex-direction: column; gap: var(--ds-space-4); }
.champ { display: flex; flex-direction: column; gap: var(--ds-space-2); }
.champ label { font-weight: var(--ds-weight-semi); }
.champ-aide { color: var(--ds-text-3); font-size: var(--ds-text-sm); }
.saisie {
  inline-size: 100%;
  min-block-size: 48px;
  padding: var(--ds-space-3) var(--ds-space-4);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius);
  background: var(--ds-card); color: var(--ds-text);
  font: inherit; font-size: var(--ds-text-md);
  transition: border-color var(--ds-transition), box-shadow var(--ds-transition);
}
textarea.saisie { min-block-size: 88px; resize: vertical; font-size: var(--ds-text-base); }
.saisie:hover { border-color: var(--ds-text-3); }
.saisie:focus { outline: none; border-color: var(--ds-focus); box-shadow: var(--ds-focus-ring); }
.champ-erreur .saisie { border-color: var(--ds-danger); }
.champ-erreur .saisie:focus { box-shadow: var(--ds-focus-ring-danger); }
input[type="email"].saisie, .ds-email { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] input[type="email"].saisie { text-align: end; }

/* ── Les boutons ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2);
  min-block-size: 44px;
  padding: 0 var(--ds-space-5);
  border: 1px solid transparent; border-radius: var(--ds-radius);
  font: inherit; font-weight: var(--ds-weight-semi); font-size: var(--ds-text-base);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--ds-transition), border-color var(--ds-transition), color var(--ds-transition), opacity var(--ds-transition);
}
.btn-primaire { background: var(--ds-primary); color: var(--ds-primary-fg); }
.btn-primaire:hover { background: var(--ds-primary-hover); color: var(--ds-primary-fg); }
.btn-primaire .icone { color: var(--ds-btn-icon); }
.btn-secondaire { background: var(--ds-card); color: var(--ds-accent); border-color: var(--ds-border-strong); }
.btn-secondaire:hover { background: var(--ds-accent-dim); color: var(--ds-accent-hover); border-color: var(--ds-accent); }
.btn-fantome { background: transparent; color: var(--ds-text-2); border-color: var(--ds-border); }
.btn-fantome:hover { background: var(--ds-surface); color: var(--ds-text); border-color: var(--ds-border-strong); }
.btn-large { inline-size: 100%; min-block-size: 50px; font-size: var(--ds-text-md); }
.btn-petit { min-block-size: var(--ds-control-h-large); padding: 0 var(--ds-space-4); font-size: var(--ds-text-sm); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn-icone {
  display: inline-grid; place-items: center;
  inline-size: var(--ds-icon-btn); block-size: var(--ds-icon-btn); flex: none;
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm);
  background: var(--ds-card); color: var(--ds-text-2); cursor: pointer;
}
.btn-icone:hover { color: var(--ds-accent); border-color: var(--ds-accent); }
.btn-icone[data-copie] { color: var(--ds-success); border-color: var(--ds-success-border); }

/* L'attente visible (document 47, D47.1) : le bouton d'un formulaire parti,
   fige par espace.js, montre un disque tournant (CSS pur, couleur du texte). */
.en-attente { cursor: progress; }
.en-attente::after {
  content: ""; flex: none;
  inline-size: 1em; block-size: 1em;
  border: 2px solid currentColor; border-inline-end-color: transparent;
  border-radius: var(--ds-radius-pill);
  animation: espace-tourne var(--ds-duration-spin) linear infinite;
}
@keyframes espace-tourne { to { transform: rotate(360deg); } }

.actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); }
.actions form { display: contents; }

/* ── Les encarts et les notes ──────────────────────────────────────────── */
.encart {
  display: flex; align-items: flex-start; gap: var(--ds-space-3);
  padding: var(--ds-space-3) var(--ds-space-4);
  border: 1px solid; border-radius: var(--ds-radius);
}
.encart-icone { display: inline-grid; place-items: center; padding-block-start: 2px; }
.encart-texte { font-weight: var(--ds-weight-medium); }
.encart-ok { background: var(--ds-success-bg); border-color: var(--ds-success-border); color: var(--ds-success); }
.encart-info { background: var(--ds-info-bg); border-color: var(--ds-info-border); color: var(--ds-info); }
.encart-attention { background: var(--ds-warn-bg); border-color: var(--ds-warn-border); color: var(--ds-warn); }
.encart-danger { background: var(--ds-danger-bg); border-color: var(--ds-danger-border); color: var(--ds-danger); }
.encart .encart-texte { color: var(--ds-text); }

/* Une note sans icone reste un bloc de texte : en boite flexible, chaque
   fragment isole (<bdi>) deviendrait un element espace du suivant. */
.note { display: block; color: var(--ds-text-2); }
.note:has(> .icone) { display: flex; align-items: flex-start; gap: var(--ds-space-2); }
.note .icone { margin-block-start: 0.15em; color: var(--ds-text-3); }
.note-petite { font-size: var(--ds-text-sm); color: var(--ds-text-3); }
.note a { overflow-wrap: anywhere; }

/* ── Le lien envoye ────────────────────────────────────────────────────── */
.adresse-saisie {
  display: flex; flex-direction: column; gap: var(--ds-space-1);
  padding: var(--ds-space-3) var(--ds-space-4);
  background: var(--ds-surface-2); border: 1px solid var(--ds-border); border-radius: var(--ds-radius);
}
.adresse-saisie-libelle { color: var(--ds-text-3); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semi); text-transform: uppercase; letter-spacing: var(--ds-tracking-caps); }
.adresse-saisie-valeur { font-weight: var(--ds-weight-semi); font-size: var(--ds-text-md); overflow-wrap: anywhere; text-align: start; }
.rien-recu { display: flex; flex-direction: column; gap: var(--ds-space-3); padding-block-start: var(--ds-space-4); border-block-start: 1px solid var(--ds-border-light); }
.rien-recu h2 { font-size: var(--ds-text-md); font-weight: var(--ds-weight-semi); }
.liste-coches { display: flex; flex-direction: column; gap: var(--ds-space-3); }
.liste-coches li { display: flex; gap: var(--ds-space-3); color: var(--ds-text-2); }
.liste-coches .icone { margin-block-start: 0.15em; color: var(--ds-gold-text); }

/* ── Le tableau de bord : le bandeau ───────────────────────────────────── */
.conteneur { inline-size: 100%; max-inline-size: 1120px; margin-inline: auto; padding-inline: var(--ds-space-4); }
.bandeau {
  color: var(--ds-text-inverse);
  background:
    radial-gradient(900px 360px at 85% -40%, var(--ds-gold-dim), transparent 65%),
    linear-gradient(160deg, var(--ds-navy) 0%, var(--ds-navy-600) 60%, var(--ds-navy-500) 100%);
  padding-block: var(--ds-space-4) calc(var(--ds-space-8) + var(--ds-space-6));
}
[dir="rtl"] .bandeau {
  background:
    radial-gradient(900px 360px at 15% -40%, var(--ds-gold-dim), transparent 65%),
    linear-gradient(200deg, var(--ds-navy) 0%, var(--ds-navy-600) 60%, var(--ds-navy-500) 100%);
}
.bandeau-haut { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); }
.bandeau-outils { display: flex; align-items: center; gap: var(--ds-space-2); }
.bandeau-outils form { display: contents; }
.bandeau-titre { display: flex; flex-direction: column; gap: var(--ds-space-2); margin-block-start: var(--ds-space-7); }
.bandeau-titre h1 { font-size: var(--ds-text-xl); line-height: var(--ds-leading-tight); font-weight: var(--ds-weight-bold); overflow-wrap: anywhere; }
.bandeau-offre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3); color: color-mix(in srgb, var(--ds-text-inverse) 78%, transparent); }
.bandeau-offre-nom { font-weight: var(--ds-weight-semi); }

.pastille {
  display: inline-flex; align-items: center; gap: var(--ds-space-2);
  padding: var(--ds-space-1) var(--ds-space-3);
  border-radius: var(--ds-radius-pill);
  font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semi);
  background: var(--ds-card); color: var(--ds-text);
}
.pastille-point { inline-size: 8px; block-size: 8px; border-radius: var(--ds-radius-pill); background: currentColor; }
.pastille-ok .pastille-point { background: var(--ds-success-dot); }
.pastille-attention .pastille-point { background: var(--ds-warn-dot); }
.pastille-danger .pastille-point { background: var(--ds-danger-dot); }
.pastille-neutre .pastille-point { background: var(--ds-neutral-dot); }

/* ── Le tableau de bord : l'etat et le geste ───────────────────────────── */
.tableau {
  display: flex; flex-direction: column; gap: var(--ds-space-5);
  margin-block-start: calc(-1 * (var(--ds-space-8) + var(--ds-space-4)));
  padding-block-end: var(--ds-space-7);
}
.etat {
  display: flex; gap: var(--ds-space-5); align-items: flex-start;
  padding: var(--ds-space-6);
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-inline-start: 4px solid var(--ds-success);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-lg);
}
.etat-attention { border-inline-start-color: var(--ds-warn-dot); }
.etat-danger { border-inline-start-color: var(--ds-danger); }
.etat-neutre { border-inline-start-color: var(--ds-neutral-dot); }
.etat-corps { display: flex; flex-direction: column; gap: var(--ds-space-3); flex: 1; min-inline-size: 0; }
.etat-phrase { font-size: var(--ds-text-lg); font-weight: var(--ds-weight-bold); line-height: var(--ds-leading-tight); }
.etat-suite { color: var(--ds-text-2); max-inline-size: var(--ds-prose-max-w); }
.geste { display: flex; flex-direction: column; gap: var(--ds-space-4); margin-block-start: var(--ds-space-2); max-inline-size: 560px; }
.geste-discret { margin-block-start: 0; }
.geste-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3) var(--ds-space-4); }
.geste-actions .note { flex: 1 1 220px; }

/* ── Le tableau de bord : les cartes ───────────────────────────────────── */
.grille { display: grid; grid-template-columns: 1fr; gap: var(--ds-space-5); }
.carte {
  display: flex; flex-direction: column; gap: var(--ds-space-4);
  padding: var(--ds-card-pad);
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
  min-inline-size: 0;
}
.carte > .btn, .carte > form { align-self: flex-start; }
.carte-h { display: flex; align-items: center; gap: var(--ds-space-3); }
.carte-h h2 { font-size: var(--ds-text-md); font-weight: var(--ds-weight-semi); }
.offre-nom { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); font-size: var(--ds-text-lg); font-weight: var(--ds-weight-bold); }
.etiquette {
  display: inline-flex; align-items: center;
  padding: 2px var(--ds-space-2);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-info-bg); color: var(--ds-info);
  font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semi);
}
.etiquette-or { background: var(--ds-cream); color: var(--ds-gold-text); }
.lignes { display: flex; flex-direction: column; }
.ligne {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--ds-space-1) var(--ds-space-3);
  padding-block: var(--ds-space-3);
  border-block-end: 1px solid var(--ds-border-light);
}
.ligne:last-child { border-block-end: 0; }
.ligne dt { display: flex; align-items: center; gap: var(--ds-space-2); color: var(--ds-text-2); }
.ligne dt .icone { color: var(--ds-text-3); }
.ligne dd { font-weight: var(--ds-weight-semi); text-align: end; }
.jauge {
  grid-column: 1 / -1;
  inline-size: 100%; block-size: 6px;
  border: 0; border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-3);
  -webkit-appearance: none; appearance: none;
}
.jauge::-webkit-meter-bar { background: var(--ds-surface-3); border: 0; border-radius: var(--ds-radius-pill); block-size: 6px; }
.jauge::-webkit-meter-optimum-value, .jauge::-webkit-meter-suboptimum-value { background: var(--ds-navy-300); border-radius: var(--ds-radius-pill); }
.jauge::-moz-meter-bar { background: var(--ds-navy-300); border-radius: var(--ds-radius-pill); }

.cle-boite {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-3);
  padding: var(--ds-space-4);
  background: var(--ds-surface-2);
  border: 1px dashed var(--ds-border-strong);
  border-radius: var(--ds-radius);
}
.cle-valeur {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-md); font-weight: var(--ds-weight-bold);
  letter-spacing: 0.06em;
  direction: ltr; unicode-bidi: isolate;
  overflow-wrap: anywhere;
}
.cle-masquee { color: var(--ds-text-3); letter-spacing: 0.12em; }
.cle-revelee { background: var(--ds-cream); border: 1px solid var(--ds-cream-border); }
.cle-revelee .cle-valeur { color: var(--ds-text); user-select: all; -webkit-user-select: all; }

.fichiers { display: flex; flex-direction: column; gap: var(--ds-space-3); }
.fichier { display: flex; flex-direction: column; gap: var(--ds-space-2); padding: var(--ds-space-3) var(--ds-space-4); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); }
.fichier-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-3); }
.fichier-nom { font-weight: var(--ds-weight-semi); }
.empreinte { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--ds-space-1) var(--ds-space-2); }
.empreinte-libelle { grid-column: 1 / -1; color: var(--ds-text-3); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semi); text-transform: uppercase; letter-spacing: var(--ds-tracking-caps); }
.empreinte-valeur { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); color: var(--ds-text-2); overflow-wrap: anywhere; word-break: break-all; direction: ltr; unicode-bidi: isolate; text-align: start; }

.liens { display: flex; flex-direction: column; gap: var(--ds-space-2); }
.lien-carte {
  display: flex; align-items: center; gap: var(--ds-space-3);
  min-block-size: 56px;
  padding: var(--ds-space-3) var(--ds-space-4);
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius);
  color: var(--ds-text); text-decoration: none;
  transition: border-color var(--ds-transition), background var(--ds-transition);
}
.lien-carte:hover { color: var(--ds-text); border-color: var(--ds-accent); background: var(--ds-accent-dim); }
.lien-carte > .icone:first-child { color: var(--ds-accent); }
.lien-carte-texte { display: flex; flex-direction: column; flex: 1; min-inline-size: 0; font-weight: var(--ds-weight-semi); }
.lien-carte-note { color: var(--ds-text-3); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-normal); overflow-wrap: anywhere; }
.lien-carte-fin { color: var(--ds-text-3); }

.espace-pied {
  display: flex; flex-direction: column; gap: var(--ds-space-2);
  padding-block: var(--ds-space-5) var(--ds-space-7);
  border-block-start: 1px solid var(--ds-border);
  color: var(--ds-text-3); font-size: var(--ds-text-sm);
}
.espace-pied p { display: flex; align-items: flex-start; gap: var(--ds-space-2); }
.espace-pied .icone { margin-block-start: 0.15em; }

/* ── A partir de la tablette ───────────────────────────────────────────── */
@media (min-width: 760px) {
  .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .conteneur { padding-inline: var(--ds-space-6); }
  .carte-porte { padding: var(--ds-space-8) var(--ds-space-7); }
}

/* ── Au telephone ──────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .porte { padding: var(--ds-space-4) var(--ds-space-3) var(--ds-space-6); }
  .porte-corps { padding-block-start: var(--ds-space-6); }
  .carte-porte { padding: var(--ds-space-6) var(--ds-space-5); border-radius: var(--ds-radius-lg); }
  .carte-porte-tete h1 { font-size: var(--ds-text-kpi-sm); }
  :lang(ar) .carte-porte-tete h1 { font-size: var(--ds-text-kpi-sm); }
  .marque-logo { inline-size: 32px; block-size: 32px; }
  .btn-bandeau span, .langue span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .btn-bandeau, .langue { inline-size: var(--ds-control-h); min-block-size: var(--ds-control-h); justify-content: center; padding: 0; }
  .bandeau-titre { margin-block-start: var(--ds-space-5); }
  .bandeau-titre h1 { font-size: var(--ds-text-kpi-sm); }
  .etat { flex-direction: column; gap: var(--ds-space-4); padding: var(--ds-space-5); }
  .etat-phrase { font-size: var(--ds-text-md); }
  .geste-actions .btn, .actions .btn { inline-size: 100%; }
  .actions { flex-direction: column; }
  .fichier-tete .btn { inline-size: 100%; }
}

/* Moins de mouvement : les jetons ramenent les durees a 1 ms, ce qui ferait
   clignoter le disque. Il s'arrete et devient un anneau pointille, immobile. */
@media (prefers-reduced-motion: reduce) {
  .en-attente::after { animation: none; border-style: dotted; border-inline-end-color: currentColor; }
}