/* Couche « outils » de la charte commune.
   Base : charte/tokens.css. Les outils sont sur PAPIER (<html data-fond="papier">, #F2F0EC), aucun fond nuit.
   Mots en relief et or clair.
   Ce fichier n'ajoute AUCUNE couleur. Rien hors jetons : un jeton qui manque s'ajoute à tokens.css. */

:root {
  --largeur: 1120px;                       /* écran d'outil : plus large que la colonne de lecture de la vitrine */
  --t-verdict: clamp(52px, 6.4vw, 92px);   /* le verdict tient la place du titre : 52 px au téléphone, 92 px au large */
  --d-statut: 2600ms;                      /* temps pendant lequel le statut reste ouvert après une mise à jour */
}

/* Hérités de composants.css de l'identité, réécrits ici sans ses remises à zéro globales (elles cassent les écrans d'outil) */
:focus-visible { outline: 2px solid var(--or); outline-offset: 4px; border-radius: 2px; }
/* Étiquette à l'or clair */
.etiquette { font-style: italic; color: var(--or-clair); }
.etiquette .num { font-style: normal; }

/* Deux ors par écran au plus : l'or plein (l'action principale, le point en cause) et l'or clair (relief, étiquettes).
   Mots en relief : quelques mots qui portent le rythme. Dans un titre ou le verdict, italique à l'or clair ;
   dans un texte au gris, italique à l'encre. Jamais plus de deux par phrase, jamais dans une table de données. */
h1 em, h2 em, .verdict em { font-style: italic; color: var(--or-clair); }
p em, dd em, li em { font-style: italic; color: var(--encre); }

/* Action principale : or plein et flèche, comme en ligne. Une seule par écran. */
.lien-trait.principal { color: var(--or); }
.fleche { display: inline-block; text-decoration: none; margin-left: .4em; transition: transform var(--d-survol) var(--courbe); }
@media (hover: hover) and (pointer: fine) { a:hover .fleche, button:hover .fleche { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .fleche { transition: none; } }
/* Lien-trait : propriétés séparées. Sous WebKit, la forme courte « underline 1px <couleur> » est ignorée (correctif 09aec95f67) */
.lien-trait { display: inline-flex; align-items: center; min-height: var(--cible); color: var(--encre);
  text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: var(--or); text-underline-offset: .32em;
  transition: text-underline-offset var(--d-survol) var(--courbe); }
@media (hover: hover) and (pointer: fine) { .lien-trait:hover { text-underline-offset: .42em; } }
.lien-trait.discret { color: var(--gris); text-decoration-color: var(--trait); }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* ===== Statut qui grandit et rétrécit (sans bibliothèque).
   Une ligne courte qui dit l'état. Quand l'état change, elle s'élargit au nouveau texte et s'ouvre sur le détail,
   reste ouverte --d-statut, puis se referme sur la ligne courte. La page ne change pas.
   Le détail reste lisible au clic (aria-expanded sur le bouton, data-ouvert sur le conteneur) ; l'annonce passe par role="status".
   Sous « réduire les animations » : le texte change d'un coup, rien ne s'ouvre seul.
   « … en cours » ne s'affiche que pendant le traitement réel, jamais une durée fixe qui mime un calcul (DV-028). */
.statut { display: inline-grid; grid-template-rows: auto 0fr; max-width: 100%; vertical-align: top;
  border: 1px solid var(--trait); border-radius: 2px; color: var(--encre); background: var(--fond);
  transition: grid-template-rows var(--d-ui) var(--courbe), width var(--d-ui) var(--courbe); overflow: hidden; }
.statut[data-ouvert="true"] { grid-template-rows: auto 1fr; }
.statut > button { display: flex; align-items: center; gap: var(--e-1); min-height: var(--cible); padding: 0 var(--e-2);
  font: inherit; font-size: var(--t-petit); color: inherit; background: none; border: 0; cursor: pointer; text-align: left; white-space: nowrap; }
.statut .etat { display: inline-flex; align-items: center; gap: var(--e-1); }
.statut .etat::before { content: ""; flex: none; width: var(--e-1); height: var(--e-1); border: 1px solid var(--gris); border-radius: 50%; }
.statut[data-ton="signal"] .etat::before { background: var(--or); border-color: var(--or); }
.statut .court { color: var(--gris); }
.statut .detail { min-height: 0; overflow: hidden; width: 0; min-width: 100%; }   /* le détail ne dicte pas la largeur fermée */
.statut[data-ouvert="true"] .detail { width: auto; }                         /* ouvert, il l’élargit : le statut grandit */
.statut .detail p { padding: 0 var(--e-2) var(--e-2); font-size: var(--t-petit); color: var(--gris); max-width: 44ch; white-space: normal; }
.statut .detail b { color: var(--encre); font-weight: 600; }
.statut .texte { transition: opacity var(--d-survol) var(--courbe); }
.statut.change .texte { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .statut, .statut .texte { transition: none; }
}
/* La place du statut : il grandit PAR-DESSUS la page, sans la pousser (la page ne bouge pas, M8 tenu) */
.place-statut { position: relative; height: var(--cible); min-width: 50%; }
.place-statut .statut { position: absolute; top: 0; right: 0; z-index: 2; }
@media (max-width: 600px) { .place-statut { min-width: 100%; } .place-statut .statut { right: auto; left: 0; } }