/* ============================================================================
   PASSERELLE : système de design des outils
   Fichier unique partagé par stress, traps, simulator, dashboard.
   Dépendance : Tailwind pour les utilitaires de mise en page.
   Ce fichier ne contient que les jetons et les composants récurrents.
   ============================================================================ */

:root{
  /* Palette validée */
  --navy:  #1A2332;
  --teal:  #0D5C63;
  --coral: #C96B63;
  --sage:  #7E8D73;
  --slate: #58606D;
  --cream: #FAF9F7;   /* fond exclusif, jamais de blanc pur */
  --sand:  #F2EFEA;
  --line:  #E4E0D9;

  /* Variante sombre du coral, créée pour le texte.
     Le coral de marque plafonne à ~3,5:1 sur crème : inutilisable en texte courant.
     #8F3F38 monte à ~6,7:1. [À VALIDER PAR FRANCINE] ajout à la charte. */
  --coral-ink: #8F3F38;
  /* Et sa symétrique pour les fonds sombres : le coral de marque tombe à
     ~4,3:1 sur navy, cette version monte à ~8:1. [À VALIDER PAR FRANCINE] */
  --coral-light: #E8A49E;
  --teal-ink:  #0A4A50;

  /* Rôles sémantiques : jamais la couleur seule pour porter le sens */
  --ok: var(--teal);
  --ko: var(--coral);

  /* Habillage haut et bas : bandeau et pied partagent le même fond.
     Basculer l'ensemble en clair se fait en changeant ces deux lignes
     (et en repassant le logo sur sa version couleur, voir note). */
  --chrome-bg:  var(--cream);
  --chrome-ink: var(--navy);

  /* Largeur de la grille. La porte, le bandeau et le pied s'y alignent.
     Les écrans d'exercice gardent une colonne de lecture plus étroite. */
  --page-w:  72rem;
  --read-w:  48rem;

  --ease: cubic-bezier(.2,.7,.3,1);
  --r: 2px;                 /* rayon unique, volontairement discret */

  --step--1: .8125rem;
  --step-0:  1rem;
  --step-1:  1.125rem;
  --step-2:  1.5rem;
  --step-3:  2rem;
  --step-4:  2.75rem;
  --step-5:  4rem;
}

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

body{
  margin:0;
  background:var(--cream);
  color:var(--navy);
  font-family:Inter,system-ui,sans-serif;
  font-size:var(--step-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}

h1,h2,h3,.pt-display{
  font-family:Fraunces,Georgia,serif;
  font-weight:500;
  letter-spacing:-.015em;
  line-height:1.15;
  margin:0;
}
.pt-mono{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:var(--step--1); }
p{ margin:0; }          /* longueur de ligne bridée */
.pt-muted{ color:var(--slate); }

/* ---------- Focus : ~3,5:1 sur crème, conforme au 3:1 de WCAG 1.4.11 ------- */
:where(a,button,input,select,summary):focus-visible{
  outline:2px solid var(--coral); outline-offset:3px; border-radius:var(--r);
}
:where(a,button,input,select,summary){ outline:none; }

.pt-skip{ position:absolute; left:-9999px; }
.pt-skip:focus{ left:1rem; top:1rem; z-index:50; background:var(--navy); color:var(--cream); padding:.75rem 1rem; }

/* ---------- Boutons ------------------------------------------------------- */
.pt-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:48px; padding:.875rem 1.75rem;
  border:1px solid transparent; border-radius:var(--r);
  font:500 var(--step-0)/1.2 Inter,sans-serif; cursor:pointer;
  transition:background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.pt-btn--primary{ background:var(--teal); color:var(--cream); }
.pt-btn--primary:hover{ background:var(--navy); }
.pt-btn--ghost{ background:transparent; color:var(--navy); border-color:var(--navy); }
.pt-btn--ghost:hover{ background:var(--navy); color:var(--cream); }
.pt-btn--quiet{ background:transparent; color:var(--slate); border-color:var(--line); }
.pt-btn--quiet:hover{ color:var(--navy); border-color:var(--slate); }
.pt-btn[disabled]{ opacity:.55; cursor:not-allowed; }

/* ---------- Champs -------------------------------------------------------- */
.pt-label{ display:block; font-size:var(--step--1); font-weight:500; margin-bottom:.5rem; }
.pt-field{
  width:100%; min-height:48px; padding:.875rem 1rem;
  background:var(--cream); color:var(--navy);
  border:1px solid var(--line); border-radius:var(--r);
  font:400 var(--step-0)/1.4 "IBM Plex Mono",monospace;
  transition:border-color .18s var(--ease);
}
.pt-field:focus{ border-color:var(--teal); }
.pt-field--select{ font-family:Inter,sans-serif; }
.pt-hint{ font-size:var(--step--1); color:var(--slate); margin-top:.625rem; }
.pt-error{ font-size:var(--step--1); color:var(--coral-ink); margin-top:.625rem; }

/* ---------- Surfaces ------------------------------------------------------ */
.pt-card{ background:var(--sand); border:1px solid var(--line); border-radius:var(--r); padding:1.5rem; }
.pt-panel{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r); padding:1.5rem; }
@media (min-width:640px){ .pt-card,.pt-panel{ padding:2rem; } }

/* ---------- Conteneur de page ---------------------------------------------
   Deux largeurs : --page-w pour l'habillage et la porte, --read-w pour les
   écrans d'exercice, où une ligne trop longue nuit à la lecture.          */
.pt-shell{ max-width:var(--read-w); margin:0 auto; padding:2.5rem 1.25rem; }
/* La contrainte de longueur de ligne est portée ici et non sur tous les p :
   en global, elle écrasait aussi les deux colonnes de la porte. */
.pt-shell p{ max-width:62ch; }
@media (min-width:640px){ .pt-shell{ padding:3.5rem 2rem; } }

/* ---------- Porte d'accès en deux blocs ------------------------------------
   Pleine largeur en navy, dans la continuité du bandeau : la zone sombre
   est la porte, la zone crème est l'entraînement. Deux publics arrivent
   ici, celui qui a un code et celui qui n'en a pas, d'où les deux colonnes
   plutôt qu'un seul formulaire suivi d'une note en bas.                    */
.pt-gate{ background:var(--navy); color:var(--cream); }
.pt-gate__inner{ max-width:var(--page-w); margin:0 auto; padding:3rem 1.25rem 3.5rem;
                 display:grid; gap:2.5rem; }
@media (min-width:640px){ .pt-gate__inner{ padding:4rem 2rem 4.5rem; } }
@media (min-width:900px){
  .pt-gate__inner{ grid-template-columns:1.45fr 1fr; gap:3.5rem; align-items:start; }
  .pt-gate__aside{ border-left:1px solid rgba(250,249,247,.16); padding-left:3rem; }
}
.pt-gate__lead{ color:rgba(250,249,247,.78); font-size:var(--step-1); margin-top:1rem; }
.pt-gate__row{ display:flex; flex-direction:column; gap:.75rem; }
@media (min-width:480px){ .pt-gate__row{ flex-direction:row; } .pt-gate__row .pt-field{ flex:1; } }
.pt-gate__mail{ display:inline-block; margin-top:1.25rem; font-size:var(--step--1);
                color:rgba(250,249,247,.72); text-decoration:underline; text-underline-offset:4px; }
.pt-gate__mail:hover{ color:var(--coral-light); }

/* Variantes sur fond sombre des composants du socle */
.pt-gate .pt-label{ color:var(--cream); }
.pt-gate .pt-field{ background:transparent; color:var(--cream); border-color:rgba(250,249,247,.28); }
.pt-gate .pt-field::placeholder{ color:rgba(250,249,247,.42); }
.pt-gate .pt-field:focus{ border-color:var(--cream); }
.pt-gate .pt-btn--primary{ background:var(--cream); color:var(--navy); }
.pt-gate .pt-btn--primary:hover{ background:var(--coral); color:var(--navy); }
/* Bouton de la colonne de droite : coral pour être identifiable, mais
   ouvert pour rester second derrière l'action principale. Le coral de
   marque ne tient pas le seuil AA en fond plein avec du texte clair
   (~3,6:1), d'où la bordure au repos et --coral-ink au survol (~6,7:1). */
.pt-gate .pt-btn--ghost{ color:var(--coral-light); border-color:var(--coral); }
.pt-gate .pt-btn--ghost:hover{ background:var(--coral-ink); color:var(--cream); border-color:var(--coral-ink); }
.pt-gate .pt-hint{ color:rgba(250,249,247,.68); }
.pt-gate .pt-error{ color:var(--coral-light); }
.pt-gate .pt-spinner{ border-color:rgba(26,35,50,.25); border-top-color:var(--navy); }

/* ---------- Pied de page ---------------------------------------------------
   Repris de l'interface existante : mention à gauche, liens à droite.
   Contenu contraint au même conteneur de 48rem que le bandeau et la page,
   pour que les trois s'alignent sur la même colonne.                      */
.pt-foot{ background:var(--chrome-bg); color:var(--chrome-ink); }
.pt-foot__inner{ max-width:var(--page-w); margin:0 auto; padding:2rem 1.25rem 3rem; }
@media (min-width:640px){ .pt-foot__inner{ padding:2.25rem 2rem 3.5rem; } }
/* Une seule ligne centrée sous le filet pointé. En mono, comme les
   étiquettes de données du reste du système : ce pied n'est pas une zone
   de navigation, c'est une mention. Il ne doit pas attirer l'œil.
   L'adresse e-mail n'y figure pas : elle vit dans la porte d'accès, où
   elle sert vraiment à quelque chose. */
.pt-foot__line{
  margin-top:1.75rem; text-align:center;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:var(--step--1); line-height:1.9;
  color:var(--chrome-ink); opacity:.72;
}
.pt-foot__line a{ color:inherit; text-decoration:underline; text-underline-offset:4px;
                  text-decoration-color:currentColor;
                  transition:color .18s var(--ease), opacity .18s var(--ease); }
.pt-foot__line a:hover{ text-decoration-thickness:2px; }
.pt-foot__sep{ opacity:.45; padding:0 .35rem; }


/* ---------- Bandeau de marque ---------------------------------------------
   Repris de l'interface existante : pleine largeur en navy, mais contenu
   contraint au même conteneur que la page, pour que le logo s'aligne
   verticalement avec le texte au lieu de flotter au bord de l'écran.     */
.pt-band{ background:var(--chrome-bg); color:var(--chrome-ink);
          border-bottom:1px solid rgba(88,96,109,.16); }
.pt-band__inner{
  max-width:var(--page-w); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.25rem;
}
@media (min-width:640px){ .pt-band__inner{ padding:1.25rem 2rem; } }
.pt-band__mark{ display:flex; align-items:center; gap:.75rem; min-width:0; }
.pt-band__logo{ width:64px; height:auto; flex:none; }
.pt-band__word{
  font-family:Fraunces,Georgia,serif; font-weight:500;
  font-size:1.0625rem; letter-spacing:.09em; text-transform:uppercase; line-height:1;
}
.pt-band__tool{ font-size:var(--step--1); color:var(--chrome-ink); opacity:.72; line-height:1.2; margin-top:.25rem; }
.pt-band__meta{ font-family:"IBM Plex Mono",monospace; font-size:var(--step--1);
                color:var(--chrome-ink); opacity:.72; white-space:nowrap; }

/* ---------- Filet pointillé : motif maison, repris du site --------------- */
.pt-rule{ height:2px; background-image:radial-gradient(circle,#C4BEB3 1.5px,transparent 1.6px);
          background-size:10px 2px; background-repeat:repeat-x; }

/* ---------- Progression --------------------------------------------------- */
.pt-progress{ display:flex; gap:4px; }
.pt-progress span{ height:3px; flex:1; background:var(--line); border-radius:2px;
                   transition:background-color .3s var(--ease); }
.pt-progress span[data-state="ok"]{ background:var(--teal); }
.pt-progress span[data-state="ko"]{ background:var(--coral); }
.pt-progress span[data-state="now"]{ background:var(--navy); }

/* ---------- Retour de réponse --------------------------------------------
   Le sens est porté par un libellé texte ET une marque, jamais par la couleur
   seule : exigence WCAG 1.4.1.                                              */
.pt-verdict{ display:flex; gap:.75rem; align-items:flex-start;
             border-left:3px solid var(--line); padding-left:1rem; }
.pt-verdict[data-verdict="ok"]{ border-left-color:var(--teal); }
.pt-verdict[data-verdict="ko"]{ border-left-color:var(--coral); }
.pt-verdict__tag{ font-family:"IBM Plex Mono",monospace; font-size:var(--step--1); white-space:nowrap; }
.pt-verdict[data-verdict="ok"] .pt-verdict__tag{ color:var(--teal-ink); }
.pt-verdict[data-verdict="ko"] .pt-verdict__tag{ color:var(--coral-ink); }

/* ---------- Choix de réponse (traps, et tout futur QCM) ------------------- */
.pt-choice{
  display:block; width:100%; text-align:left;
  min-height:56px; padding:1rem 1.125rem;
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  font:400 var(--step-1)/1.4 Inter,sans-serif; color:var(--navy); cursor:pointer;
  transition:border-color .18s var(--ease), background-color .18s var(--ease);
}
@media (hover:hover){ .pt-choice:hover:not([disabled]){ border-color:var(--navy); background:var(--sand); } }
.pt-choice[data-state="ok"]{ border-color:var(--teal); border-width:2px; background:rgba(13,92,99,.06); }
.pt-choice[data-state="ko"]{ border-color:var(--coral); border-width:2px; text-decoration:line-through;
                             text-decoration-color:var(--coral); text-decoration-thickness:2px; }
.pt-choice[disabled]{ cursor:default; }

/* ---------- Rail syllabique (stress) -------------------------------------- */
.pt-syl{
  min-height:64px; padding:.75rem 1.25rem;
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  font:500 var(--step-3)/1 Fraunces,Georgia,serif; color:var(--navy); cursor:pointer;
  transition:background-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
@media (hover:hover){ .pt-syl:hover:not([disabled]){ background:var(--sand); transform:translateY(-2px); } }
.pt-syl[data-state="ok"]{ background:var(--teal); color:var(--cream); border-color:var(--teal); }
.pt-syl[data-state="ko"]{ border-color:var(--coral); border-width:2px; }
.pt-syl__node{ display:block; width:8px; height:8px; margin:.5rem auto 0;
               border-radius:50%; background:var(--coral); }

/* ---------- Attente et vide ----------------------------------------------- */
.pt-spinner{ width:16px; height:16px; border:2px solid rgba(250,249,247,.3);
             border-top-color:var(--cream); border-radius:50%; animation:pt-spin .7s linear infinite; }
@keyframes pt-spin{ to{ transform:rotate(360deg); } }
.pt-skeleton{ background:var(--line); border-radius:var(--r); animation:pt-pulse 1.4s ease-in-out infinite; }
@keyframes pt-pulse{ 0%,100%{opacity:.5} 50%{opacity:1} }
.pt-empty{ text-align:left; color:var(--slate); border:1px dashed var(--line);
           border-radius:var(--r); padding:1.5rem; }

.pt-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
@media print{ .pt-no-print{ display:none !important; } body{ background:#fff; } }

/* ============================================================================
   BOARDROOM SIMULATOR
   Composants propres à la conversation. Ajoutés au socle parce qu'un futur
   outil de mise en situation les réutilisera.
   ============================================================================ */

/* ---------- Choix en cartes (interlocuteur, niveau de pression) ------------
   De vrais boutons radio, masqués visuellement mais présents : le groupe
   reste navigable aux flèches et annonçable par un lecteur d'écran.      */
.pt-options{ display:grid; gap:.75rem; margin-top:1rem; }
@media (min-width:560px){ .pt-options{ grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); } }
.pt-option{ position:relative; display:block; padding:1rem 1.125rem; cursor:pointer;
            border:1px solid var(--line); border-radius:var(--r); background:var(--cream);
            transition:border-color .18s var(--ease), background-color .18s var(--ease); }
.pt-option input{ position:absolute; width:1px; height:1px; opacity:0; }
.pt-option__name{ display:block; font-weight:500; }
.pt-option__note{ display:block; margin-top:.25rem; font-size:var(--step--1); color:var(--slate); }
.pt-option[data-selected="true"]{ border-color:var(--teal); border-width:2px; padding:calc(1rem - 1px) calc(1.125rem - 1px); }
.pt-option input:focus-visible + .pt-option__name{ outline:2px solid var(--coral); outline-offset:4px; }

.pt-gate .pt-option{ background:transparent; border-color:rgba(250,249,247,.28); color:var(--cream); }
.pt-gate .pt-option__note{ color:rgba(250,249,247,.68); }
.pt-gate .pt-option[data-selected="true"]{ border-color:var(--cream); }

/* ---------- Tours de parole ------------------------------------------------
   L'interlocuteur est posé sur une surface, vous êtes sur le fond de page
   avec un filet teal. La différence est structurelle et non chromatique :
   elle tient aussi en noir et blanc, à l'impression du rapport.          */
.pt-turn{ padding:1rem 1.25rem; border-radius:var(--r); }
.pt-turn + .pt-turn{ margin-top:1rem; }
.pt-turn--them{ background:var(--sand); border:1px solid var(--line); }
.pt-turn--you{ background:transparent; border-left:3px solid var(--teal); padding-left:1rem; }
.pt-turn__who{ font-family:"IBM Plex Mono",monospace; font-size:var(--step--1);
               color:var(--slate); margin-bottom:.375rem; }
.pt-turn p{ max-width:62ch; }

/* ---------- Attente de réponse ------------------------------------------- */
.pt-typing{ display:inline-flex; gap:5px; align-items:center; }
.pt-typing span{ width:6px; height:6px; border-radius:50%; background:var(--slate);
                 animation:pt-bounce 1.1s infinite ease-in-out; }
.pt-typing span:nth-child(2){ animation-delay:.16s; }
.pt-typing span:nth-child(3){ animation-delay:.32s; }
@keyframes pt-bounce{ 0%,80%,100%{ opacity:.3 } 40%{ opacity:1 } }
@media (prefers-reduced-motion:reduce){ .pt-typing span{ animation:none; opacity:.6; } }

/* ---------- Zone de réponse ----------------------------------------------- */
.pt-composer{ position:sticky; bottom:0; background:var(--cream);
              border-top:1px solid var(--line); padding:1rem 0 1.25rem;
              padding-bottom:calc(1.25rem + env(safe-area-inset-bottom,0px)); }
.pt-composer__row{ display:flex; flex-direction:column; gap:.75rem; }
@media (min-width:560px){ .pt-composer__row{ flex-direction:row; align-items:flex-end; } }
.pt-textarea{ width:100%; min-height:96px; resize:vertical; padding:.875rem 1rem;
              background:var(--cream); color:var(--navy); border:1px solid var(--line);
              border-radius:var(--r); font:400 var(--step-0)/1.5 Inter,sans-serif;
              transition:border-color .18s var(--ease); }
.pt-textarea:focus{ border-color:var(--teal); }

/* ---------- Compteur de tours ---------------------------------------------- */
.pt-meter{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
           font-family:"IBM Plex Mono",monospace; font-size:var(--step--1); color:var(--slate); }

/* ---------- Rapport --------------------------------------------------------- */
.pt-report h3{ font-size:var(--step-1); margin-top:2rem; }
.pt-report h3:first-child{ margin-top:0; }
.pt-report p{ margin-top:.625rem; max-width:62ch; }
.pt-report ul{ margin:.625rem 0 0; padding-left:1.125rem; }
.pt-report li{ margin-top:.375rem; max-width:62ch; }

/* ============================================================================
   PROGRESS DASHBOARD
   Seul outil à être une application plutôt qu'un exercice : navigation
   persistante, tableaux, états de données. D'où ces composants.
   ============================================================================ */

/* ---------- Ossature à navigation latérale --------------------------------
   Sur mobile la colonne disparaît au profit d'une barre défilante : une
   navigation latérale repliée en tiroir obligerait à deux gestes pour
   chaque changement d'écran, sur un outil où l'on navigue en permanence. */
.pt-app{ display:grid; grid-template-columns:1fr; min-height:100vh; }
@media (min-width:900px){ .pt-app{ grid-template-columns:15rem 1fr; } }

.pt-nav{ background:var(--sand); border-bottom:1px solid var(--line); }
@media (min-width:900px){ .pt-nav{ border-bottom:0; border-right:1px solid var(--line); } }
.pt-nav__list{ display:flex; gap:.25rem; overflow-x:auto; padding:.75rem;
               list-style:none; margin:0; scrollbar-width:thin; }
@media (min-width:900px){
  .pt-nav__list{ flex-direction:column; overflow:visible; padding:1.25rem 1rem;
                 position:sticky; top:0; }
}
.pt-nav__link{ display:block; white-space:nowrap; padding:.625rem .875rem;
               border-radius:var(--r); color:var(--slate); font-size:var(--step--1);
               text-decoration:none; cursor:pointer; border:1px solid transparent;
               transition:background-color .18s var(--ease), color .18s var(--ease); }
.pt-nav__link:hover{ background:var(--cream); color:var(--navy); }
.pt-nav__link[aria-current="page"]{ background:var(--cream); color:var(--navy);
                                    border-color:var(--line); font-weight:500; }
.pt-nav__group{ font-family:"IBM Plex Mono",monospace; font-size:var(--step--1);
                color:var(--slate); padding:.75rem .875rem .25rem; display:none; }
@media (min-width:900px){ .pt-nav__group{ display:block; } }

.pt-main{ padding:2rem 1.25rem 4rem; max-width:64rem; }
@media (min-width:640px){ .pt-main{ padding:2.5rem 2rem 4rem; } }

/* ---------- Bandeau de chiffres -------------------------------------------- */
.pt-stats{ display:grid; gap:1px; background:var(--line);
           border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
@media (min-width:560px){ .pt-stats{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); } }
.pt-stat{ background:var(--cream); padding:1.25rem; }
.pt-stat__num{ font-family:Fraunces,Georgia,serif; font-size:var(--step-3); line-height:1.1; }
.pt-stat__label{ font-size:var(--step--1); color:var(--slate); margin-top:.375rem; }

/* ---------- Tableaux --------------------------------------------------------
   Le tableau défile horizontalement dans son propre conteneur plutôt que
   d'obliger la page entière à défiler de côté.                          */
.pt-tablewrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); }
.pt-table{ width:100%; border-collapse:collapse; font-size:var(--step-0); }
.pt-table th, .pt-table td{ text-align:left; padding:.875rem 1rem; white-space:nowrap; }
.pt-table thead th{ font-size:var(--step--1); font-weight:500; color:var(--slate);
                    background:var(--sand); border-bottom:1px solid var(--line); }
.pt-table tbody tr{ border-bottom:1px solid var(--line); }
.pt-table tbody tr:last-child{ border-bottom:0; }
.pt-table tbody tr:hover{ background:var(--sand); }
.pt-table td:first-child{ white-space:normal; }
.pt-rowlink{ background:none; border:0; padding:0; font:inherit; color:var(--navy);
             text-decoration:underline; text-underline-offset:3px;
             text-decoration-color:var(--line); cursor:pointer; }
.pt-rowlink:hover{ text-decoration-color:var(--teal); }

/* ---------- Étiquettes d'état --------------------------------------------
   Libellé explicite plus point coloré : la couleur ne porte jamais seule. */
.pt-badge{ display:inline-flex; align-items:center; gap:.4rem;
           font-family:"IBM Plex Mono",monospace; font-size:var(--step--1); }
.pt-badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--slate); }
.pt-badge[data-state="on"]::before{ background:var(--teal); }
.pt-badge[data-state="off"]::before{ background:var(--coral); }

/* ---------- Progression d'un participant ------------------------------------
   Le signe accompagne toujours la couleur.                                  */
.pt-delta{ font-family:"IBM Plex Mono",monospace; font-size:var(--step--1); }
.pt-delta[data-dir="up"]{ color:var(--teal-ink); }
.pt-delta[data-dir="down"]{ color:var(--coral-ink); }
.pt-bar{ height:6px; background:var(--line); border-radius:3px; overflow:hidden; min-width:80px; }
.pt-bar span{ display:block; height:100%; background:var(--teal); }

/* ---------- En-tête de section --------------------------------------------- */
.pt-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
          gap:1rem; }

/* ---------- Blocs de formulaire --------------------------------------------- */
.pt-stack{ display:grid; gap:1.25rem; max-width:34rem; }
.pt-inline{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:flex-end; }

/* ---------- Champ masqué avec révélation --------------------------------
   Repris du tableau de bord en production. Un code d'accès long se saisit
   mal à l'aveugle ; pouvoir le relire évite un refus pour une faute de
   frappe. Le bouton annonce son état via aria-pressed.                  */
.pt-inputwrap{ position:relative; flex:1; min-width:0; }
.pt-inputwrap .pt-field{ padding-right:5rem; }
.pt-reveal{ position:absolute; right:.375rem; top:50%; transform:translateY(-50%);
            background:none; border:0; cursor:pointer; padding:.625rem .75rem;
            font-family:"IBM Plex Mono",monospace; font-size:var(--step--1);
            color:inherit; opacity:.7; transition:opacity .18s var(--ease); }
.pt-reveal:hover{ opacity:1; }