/* Licences livrées : surcharges propres à l'outil.
   Base : charte/tokens.css puis charte/outils.css. Rien hors jetons : aucun hex, aucun px hors le filet de 1px.
   Parti retenu (« la notice », fond clair) : colonne d'identité
   à gauche, relevé à droite ; le verdict passe en tête de feuille, sur toute la largeur, à --t-verdict.
   Cinq tailles par écran au plus : --t-verdict (ou --t-face sur l'état vide), --t-sous, --t-texte, --t-petit, --t-legende. */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--fond); }
body { color: var(--encre); font: 400 var(--t-texte)/var(--interligne) var(--famille); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.rosace { fill: currentColor; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nw { white-space: nowrap; }
[hidden] { display: none !important; }
.discret { color: var(--gris); }
.petit { font-size: var(--t-petit); }

/* ---- En-tête commun aux deux écrans ---- */
.entete { max-width: var(--largeur); margin: 0 auto; padding: var(--e-3) var(--e-2) 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-3); }
.marque { display: flex; align-items: center; gap: var(--e-1); min-height: var(--cible); text-decoration: none; font-weight: 500; }
.marque svg { width: var(--e-3); height: var(--e-3); }
.outil { font-style: italic; color: var(--or-clair); }
.entete .place-statut { margin-left: auto; }
.entete .aller { margin-left: auto; }

/* ---- La feuille : le document remis ---- */
.feuille { max-width: var(--largeur); margin: var(--e-4) auto var(--e-8); padding: 0 var(--e-2); }
.garde { color: var(--gris); font-style: italic; padding-bottom: var(--e-2); border-bottom: 1px solid var(--filet); max-width: 64em; }
.garde b { font-weight: 600; color: var(--encre); font-style: normal; }

/* Verdict : en tête de feuille, toute la largeur (64 à 92 px). Deux constats à égalité, même taille, même graisse ;
   l'étiquette de chaque ligne ne disparaît jamais. Relief sur le seul compte signalé. */
.verdict { margin-top: var(--e-4); }
.verdict h1 { font-size: var(--t-verdict); font-weight: 400; line-height: var(--interligne-titre); letter-spacing: -.02em; }
.verdict .constat { display: block; text-wrap: balance; }
.verdict .constat + .constat { margin-top: var(--e-3); }
.verdict .lieu { display: block; margin-bottom: calc(var(--e-1) / 2); font-size: var(--t-sous); line-height: 1.3; letter-spacing: 0; color: var(--gris); }
/* État vide : le titre reste au --t-face, il n'y a encore rien à juger */
.accroche h1 { font-size: var(--t-face); font-weight: 400; line-height: var(--interligne-titre); letter-spacing: -.012em; }
.accroche { margin-top: var(--e-4); }
.accroche p { margin-top: var(--e-1); color: var(--gris); max-width: 40em; }

/* Notice : colonne d'identité à gauche, relevé à droite */
.notice { display: grid; grid-template-columns: 4fr 8fr; gap: 0 var(--e-6); margin-top: var(--e-6); align-items: start; }
.cote { border-right: 1px solid var(--filet); padding-right: var(--e-4); }
.identite { display: grid; gap: var(--e-1); }
.identite dt { color: var(--gris); font-size: var(--t-petit); }
.identite dd { font-weight: 600; }
.identite dd + dt { margin-top: var(--e-1); }
.lu { color: var(--gris); font-size: var(--t-petit); margin-top: var(--e-2); }
/* Les actions du relevé suivent le verdict : imprimer ou exporter se voit au premier écran */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e-4); margin-top: var(--e-3); }
.actions .discret { margin-left: auto; }
.actions button { font: inherit; background: none; border: 0; cursor: pointer; text-align: left; }

/* ---- Dépôt (état vide, survolé, en cours, erreur) ---- */
.perimetre { border: 0; }
.perimetre legend { font-size: var(--t-petit); color: var(--gris); margin-bottom: var(--e-1); }
.perimetre label { display: flex; gap: var(--e-1); align-items: baseline; min-height: var(--cible); padding: var(--e-1) 0; cursor: pointer; }
.perimetre input { appearance: none; -webkit-appearance: none; flex: none; width: var(--e-2); height: var(--e-2); margin: 0; border: 1px solid var(--trait); border-radius: 50%; background: var(--fond); transform: translateY(.12em); cursor: pointer; }
.perimetre input:checked { border-color: var(--or); box-shadow: inset 0 0 0 calc(var(--e-1) * .375) var(--fond); background: var(--or); }
.garantie { margin-top: var(--e-3); color: var(--gris); font-size: var(--t-petit); }

.depot { position: relative; display: grid; place-items: center; text-align: center; gap: var(--e-1); min-height: calc(var(--e-12) * 2.5);
  padding: var(--e-4) var(--e-3); border: 1px solid var(--trait); border-radius: 2px; background: var(--fond);
  transition: border-color var(--d-survol) var(--courbe), box-shadow var(--d-survol) var(--courbe); }
.depot__message { font-size: var(--t-sous); line-height: 1.3; }
.depot[data-etat="survol"] { border-color: var(--or); box-shadow: inset 0 0 0 1px var(--or); }
.depot[data-etat="erreur"] { border-color: var(--or); }
/* L'erreur se lit au-dessus du cadre, au corps du texte, en encre ; le cadre ne change pas de hauteur */
.depot__erreur { display: flex; gap: var(--e-1); align-items: baseline; max-width: 40em; margin-bottom: var(--e-2); color: var(--encre); }
#choisir.discret .fleche, #lire.discret .fleche { display: none; }
.depot__erreur::before { content: ""; flex: none; width: var(--e-1); height: var(--e-1); border-radius: 50%; background: var(--or); transform: translateY(-.06em); }
.depot__fichier { font-size: var(--t-petit); color: var(--gris); }
.depot__fichier b { color: var(--encre); font-weight: 600; }

.coller { margin-top: var(--e-2); }
.coller summary { min-height: var(--cible); display: inline-flex; align-items: center; cursor: pointer; color: var(--gris);
  text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: var(--trait); text-underline-offset: .32em; }
.coller textarea { display: block; width: 100%; min-height: calc(var(--e-12) * 1.5); margin-top: var(--e-1); padding: var(--e-1) var(--e-2);
  font: inherit; font-size: var(--t-petit); color: var(--encre); background: var(--fond); border: 1px solid var(--trait); border-radius: 2px; resize: vertical; }
.lancer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-3); margin-top: var(--e-3); }
.lancer button { font: inherit; font-size: var(--t-sous); background: none; border: 0; cursor: pointer; }
.lancer button[aria-disabled="true"] { color: var(--gris); text-decoration-color: var(--trait); cursor: progress; }
.en-cours { font-size: var(--t-petit); color: var(--gris); }

/* ---- Relevé ---- */
.signales h2, .repli-titre { font-size: var(--t-sous); font-weight: 400; line-height: 1.3; }
.signales h2 .compte { color: var(--gris); }
.releve { width: 100%; border-collapse: collapse; margin-top: var(--e-2); font-variant-numeric: tabular-nums lining-nums; font-size: var(--t-petit); }
.releve th, .releve td { text-align: left; vertical-align: baseline; padding: var(--e-1) var(--e-2) var(--e-1) 0; border-bottom: 1px solid var(--filet); }
.releve thead th { font-weight: 400; color: var(--gris); }
.releve .tete th { font-weight: 600; padding-top: var(--e-3); color: var(--encre); font-size: var(--t-texte); }
.releve td.comp { width: 40%; font-size: var(--t-texte); }
.releve td.lic { width: 11em; }
.releve .comp b { font-weight: 600; }
.releve .portee, .releve .src { color: var(--gris); }
.releve .portee { display: block; }
.releve .src { padding-right: 0; }
.releve .ligne { white-space: nowrap; }
.releve .comp, .releve .lic { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .lien-trait { transition: none; } }

.repli { margin-top: var(--e-4); }
.repli > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: var(--cible); color: var(--gris);
  text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: var(--trait); text-underline-offset: .32em; }
.repli > summary::-webkit-details-marker { display: none; }
.repli[open] > summary { color: var(--encre); }
.repli .suite { margin-top: var(--e-2); color: var(--gris); font-size: var(--t-petit); }

.mentions { margin-top: var(--e-6); border-top: 1px solid var(--filet); padding-top: var(--e-2); color: var(--gris); font-size: var(--t-petit); max-width: 46em; display: grid; gap: var(--e-1); }
.pied-sceau { margin-top: var(--e-4); color: var(--gris); font-size: var(--t-petit); }
.tri { margin-top: var(--e-2); color: var(--gris); font-size: var(--t-petit); max-width: 46em; }

/* ---- Page produit ---- */
.ouverture { display: grid; grid-template-columns: 7fr 5fr; gap: var(--e-6); align-items: start; margin-top: var(--e-6); }
.ouverture h1 { font-size: var(--t-titre); font-weight: 400; line-height: var(--interligne-titre); letter-spacing: -.02em; text-wrap: balance; }
.chapo { margin-top: var(--e-3); max-width: 34em; }
.ouverture .lancer { margin-top: var(--e-4); }
.ouverture .lancer a { font-size: var(--t-sous); }
.ouverture .garantie { margin-top: var(--e-1); }
/* Le billet : un extrait du vrai relevé, posé comme une fiche */
.billet { border: 1px solid var(--trait); border-radius: 2px; padding: var(--e-3); margin-top: var(--e-2); }
.billet .sceau { display: block; width: var(--e-6); height: var(--e-6); color: var(--encre); }
.billet .date { margin-top: var(--e-2); color: var(--gris); font-size: var(--t-petit); }
.billet .phrase { margin-top: var(--e-1); font-size: var(--t-sous); line-height: 1.3; }
.billet .phrase span { display: block; }
.billet ol { list-style: none; margin-top: var(--e-2); border-top: 1px solid var(--filet); }
.billet li { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--e-2); padding: var(--e-1) 0; border-bottom: 1px solid var(--filet); font-size: var(--t-petit); }
.billet li b { font-weight: 600; color: var(--encre); }
.billet li span { color: var(--gris); }
.billet figcaption { margin-top: var(--e-2); color: var(--gris); font-size: var(--t-petit); font-style: italic; }

.blocs { margin-top: var(--e-12); display: grid; gap: var(--e-6); }
.bloc { display: grid; grid-template-columns: 4fr 8fr; gap: var(--e-6); border-top: 1px solid var(--filet); padding-top: var(--e-3); }
.bloc h2 { font-size: var(--t-sous); font-weight: 400; line-height: 1.3; }
.bloc ul { list-style: none; display: grid; gap: var(--e-2); max-width: 40em; }
.pied { max-width: calc(var(--largeur) - var(--e-4)); margin: 0 auto; padding: var(--e-3) 0 var(--e-6); border-top: 1px solid var(--filet); color: var(--gris); font-size: var(--t-petit); }

/* ---- Tablette et téléphone ---- */
@media (max-width: 860px) {
  .notice, .ouverture, .bloc { grid-template-columns: 1fr; gap: var(--e-3); }
  .cote { border-right: 0; padding-right: 0; }
  .identite { grid-template-columns: 1fr 1fr; gap: var(--e-1) var(--e-2); }
  .identite div { min-width: 0; }
  .identite dd + dt { margin-top: 0; }
  .actions { gap: 0 var(--e-3); margin-top: var(--e-2); }
  .actions .discret { margin-left: 0; }
  #releve .notice { display: flex; flex-direction: column; align-items: stretch; }
  #releve .cote { order: 2; border-top: 1px solid var(--filet); padding-top: var(--e-3); }
  #releve .corps { order: 1; }
  .releve .src, .releve thead .src { display: none; }
  /* Au téléphone, le dépôt puis l'action d'abord ; le collage et le réglage ensuite */
  #avant .notice { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin-top: var(--e-4); }
  #avant .cote, #avant .corps { display: contents; }
  #avant .depot { order: 1; }
  #avant .lancer { order: 2; margin-top: var(--e-2); }
  #avant .coller { order: 3; }
  #avant .perimetre { order: 4; margin-top: var(--e-3); }
  #avant .garantie { order: 5; margin-top: var(--e-1); }
}
@media (max-width: 520px) {
  .feuille { margin-top: var(--e-3); }
  .verdict { margin-top: var(--e-3); }
  .outil .long { display: none; }
  .entete { gap: 0 var(--e-2); }
  .releve td.comp { width: auto; }
  .releve td.lic { padding-right: 0; }
  .depot { min-height: 0; padding: var(--e-3) var(--e-2); }
  .blocs { margin-top: var(--e-8); }
  .pied { margin: 0 var(--e-2); }
}
@media (prefers-reduced-motion: reduce) { .depot { transition: none; } }
@media print {
  .entete .place-statut, .actions, .repli > summary, .lancer { display: none; }
}