/* Radar Artisan : toutes les valeurs viennent de tokens.css (généré depuis brand/tokens.json). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--r-fond);
  color: var(--r-texte);
  font-family: var(--police);
  font-size: var(--t-corps);
  line-height: var(--lh-corps);
  font-variation-settings: "wdth" var(--l-normale);
}
a { color: var(--r-texte); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--r-focus); outline-offset: 2px; }
img { max-width: 100%; }

.entete, main, .pied { max-width: 40rem; margin: 0 auto; padding: 0 var(--e-4); }
.entete { padding-top: var(--e-4); padding-bottom: var(--e-4); }
.marque { display: inline-flex; align-items: center; gap: var(--e-2); text-decoration: none; font-weight: var(--g-gras); font-stretch: var(--l-titre); font-size: var(--t-intro); }

h1, h2, h3 { font-stretch: var(--l-titre); line-height: var(--lh-titre); margin: 0 0 var(--e-4); }
h1 { font-size: var(--t-h1); font-weight: var(--g-noir); font-stretch: var(--l-affiche); letter-spacing: -0.01em; }
h2 { font-size: var(--t-h2); font-weight: var(--g-gras); }
h3 { font-size: var(--t-h3); font-weight: var(--g-gras); }
p { margin: 0 0 var(--e-4); max-width: 65ch; }

.ouverture { padding: var(--e-5) 0 var(--e-7); }
.question [data-phrase] { background: linear-gradient(transparent 68%, var(--c-signal) 68%); }
.chapo { font-size: var(--t-intro); color: var(--r-texteSecondaire); margin-bottom: var(--e-6); }

/* Écran de radar : un seul tour de balayage au chargement, les points s'allument à son passage. */
.ouverture { position: relative; }
.radar { display: block; width: 104px; height: 104px; margin-bottom: var(--e-4); }
.radar-disque { fill: var(--r-fondSombre); }
.radar-balayage { fill: var(--c-signal); transform-origin: 100px 100px; animation: balayage 2.4s cubic-bezier(.4, 0, .3, 1) both; }
.radar-portee { fill: none; stroke: var(--c-blanc); stroke-width: 3; }
.radar-point { fill: var(--c-blanc); animation: allumage 2.4s linear both; }
.radar-point.p1 { fill: var(--r-fondSombre); }
.radar-point.p2 { animation-delay: .1s; }
.radar-point.p3 { animation-delay: .25s; }
@keyframes balayage { from { transform: rotate(-360deg); } to { transform: rotate(0deg); } }
@keyframes allumage { 0%, 60% { opacity: 0; } 75%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .radar-balayage, .radar-point { animation: none; } }

.panneau {
  background: var(--r-carte);
  border: 2px solid var(--r-texte);
  border-radius: var(--rayon-moyen);
  padding: var(--e-5);
}
.panneau-titre { font-weight: var(--g-noir); font-stretch: var(--l-affiche); font-size: var(--t-h3); margin-bottom: var(--e-2); }
.ligne { display: grid; gap: var(--e-1); padding: var(--e-3) 0; border-bottom: 1px solid var(--r-bordure); }
.ligne label { font-weight: var(--g-gras); font-stretch: var(--l-titre); }
input, select {
  font: inherit;
  color: inherit;
  width: 100%;
  min-height: 48px;
  padding: var(--e-2) var(--e-3);
  border: 2px solid var(--r-bordure);
  border-radius: var(--rayon-petit);
  background: var(--r-carte);
}
input:focus, select:focus { border-color: var(--r-texte); }
input[aria-invalid="true"] { border-color: var(--r-erreur); }
input::placeholder { color: var(--r-texteSecondaire); }
.facultatif { padding: var(--e-3) 0; border-bottom: 1px solid var(--r-bordure); }
.facultatif summary { cursor: pointer; color: var(--r-texteSecondaire); min-height: 44px; display: flex; align-items: center; }
.accord { display: grid; grid-template-columns: 28px 1fr; gap: var(--e-3); align-items: start; padding: var(--e-4) 0; font-size: var(--t-petit); }
.accord input, .choix input { width: 24px; height: 24px; min-height: 0; margin: 2px 0 0; accent-color: var(--r-texte); }
.erreur { color: var(--r-erreur); font-size: var(--t-petit); font-weight: var(--g-moyen); margin: var(--e-1) 0 0; }
.bouton {
  font: inherit;
  font-weight: var(--g-gras);
  font-size: var(--t-intro);
  width: 100%;
  min-height: 56px;
  margin-top: var(--e-3);
  border: 0;
  border-radius: var(--rayon-petit);
  background: var(--r-action);
  color: var(--r-texteSurAction);
  cursor: pointer;
}
.bouton:hover { background: var(--r-texte); color: var(--r-texteSurSombre); }
.bouton[disabled] { opacity: 0.6; cursor: wait; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-weight: var(--g-gras); font-size: var(--t-h3); font-stretch: var(--l-titre); margin-bottom: var(--e-3); }
.choix { display: grid; grid-template-columns: 28px 1fr; gap: var(--e-3); padding: var(--e-3); border: 2px solid var(--r-bordure); border-radius: var(--rayon-petit); margin-bottom: var(--e-2); cursor: pointer; }
.choix:has(input:checked) { border-color: var(--r-texte); }
.fait { font-size: var(--t-h2); font-weight: var(--g-noir); font-stretch: var(--l-affiche); }
.statut { margin: var(--e-3) 0 0; font-weight: var(--g-moyen); }
.statut:empty { display: none; }
.discret { color: var(--r-texteSecondaire); font-size: var(--t-petit); }

.bloc { padding: var(--e-6) 0; border-top: 2px solid var(--r-texte); }
.liste-sobre { padding-left: var(--e-5); margin: 0; }
.liste-sobre li { margin-bottom: var(--e-2); }
.etapes { padding-left: var(--e-5); margin: 0; }
.etapes li { margin-bottom: var(--e-3); }
.limites { background: var(--r-carte); padding: var(--e-5); margin: var(--e-5) 0; border: 2px solid var(--r-bordure); border-radius: var(--rayon-moyen); }
details { border-bottom: 1px solid var(--r-bordure); }
.bloc details summary { cursor: pointer; font-weight: var(--g-moyen); min-height: 48px; display: flex; align-items: center; }
.bloc details p { margin-top: 0; }

.pied { padding-top: var(--e-6); padding-bottom: var(--e-7); color: var(--r-texteSecondaire); font-size: var(--t-petit); border-top: 1px solid var(--r-bordure); }
.pied a { color: var(--r-texteSecondaire); margin-right: var(--e-4); }

/* Page de résultat */
.resultat-tete { padding: var(--e-5) 0; }
.score-chiffre { font-size: var(--t-score); font-weight: var(--g-noir); font-stretch: var(--l-affiche); line-height: var(--lh-serre); margin: 0; }
.score-chiffre small { font-size: var(--t-h3); font-weight: var(--g-moyen); color: var(--r-texteSecondaire); }
.niveau { font-weight: var(--g-gras); font-size: var(--t-intro); }
/* Cadran : l'écran de radar du logo, 100 points font un tour. */
.cadran { position: relative; width: 220px; height: 220px; margin: var(--e-4) 0 var(--e-3); }
.cadran svg { display: block; }
.cadran-fond { fill: var(--r-fondSombre); }
.cadran-portee { fill: none; stroke: var(--c-gris); stroke-width: 1.5; }
.cadran-piste { fill: none; stroke: var(--c-gris); stroke-width: 12; }
.cadran-arc { fill: none; stroke: var(--c-signal); stroke-width: 12; }
.cadran-point { fill: var(--c-blanc); stroke: var(--r-fondSombre); stroke-width: 3; }
.cadran .score-chiffre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--r-texteSurSombre); }
.cadran .score-chiffre small { color: var(--c-trait); font-size: var(--t-petit); }
.indicatif { border-left: 4px solid var(--c-signal); padding-left: var(--e-3); }
.point { display: inline-block; width: .7em; height: .7em; border-radius: var(--rayon-plein); margin-right: var(--e-2); border: 2px solid currentColor; }
.cite-oui .point { background: currentColor; }
.tableau-ia { width: 100%; border-collapse: collapse; margin-bottom: var(--e-4); }
.tableau-ia th, .tableau-ia td { text-align: left; padding: var(--e-3) var(--e-2) var(--e-3) 0; border-bottom: 1px solid var(--r-bordure); vertical-align: top; }
.tableau-ia th { font-weight: var(--g-gras); }
.cite-oui { font-weight: var(--g-gras); }
.cite-non { font-weight: var(--g-moyen); }
.actions { padding-left: var(--e-5); }
.actions li { margin-bottom: var(--e-4); }
.actions strong { display: block; font-stretch: var(--l-titre); font-size: var(--t-intro); }
.encart { background: var(--r-fondSombre); color: var(--r-texteSurSombre); padding: var(--e-5); margin: var(--e-6) 0; border-radius: var(--rayon-moyen); }
.encart h2 { color: var(--r-texteSurSombre); }
.encart a.bouton { display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; color: var(--r-texteSurAction); }
.resultat-tete .chapo { margin-bottom: 0; }
.encart a.bouton:hover { background: var(--r-carte); color: var(--r-texte); }
.encart .discret { color: var(--r-texteSurSombre); opacity: .85; }

@media (min-width: 48rem) {
  .ouverture { padding-top: var(--e-7); }
  .radar { position: absolute; top: var(--e-7); right: calc(-1 * 9rem); width: 128px; height: 128px; }
  .ligne { grid-template-columns: 9rem 1fr; align-items: center; }
  .ligne .erreur { grid-column: 2; }
}

/* Pages juridiques */
.juridique { padding-bottom: var(--e-7); overflow-wrap: anywhere; }
.juridique table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; font-size: var(--t-petit); margin-bottom: var(--e-4); }
.juridique th, .juridique td { text-align: left; padding: var(--e-2); border: 1px solid var(--r-bordure); vertical-align: top; }

/* Tableau de bord du porteur */
.tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); margin-bottom: var(--e-5); }
.tuile { background: var(--r-carte); border: 1px solid var(--r-bordure); border-radius: var(--rayon-moyen); padding: var(--e-3); }
.tuile p { margin: 0; }
.tuile-valeur { font-size: var(--t-h2); font-weight: var(--g-noir); font-stretch: var(--l-titre); font-variant-numeric: tabular-nums; line-height: var(--lh-serre); }
.tuile-libelle { font-size: var(--t-petit); color: var(--r-texteSecondaire); margin-top: var(--e-1) !important; }
.tableau-ia td.nombre, .tableau-ia th.nombre { text-align: right; font-variant-numeric: tabular-nums; }

/* Rapport d'audit : lisible sur téléphone, imprimable en PDF */
.rapport-partie { padding: var(--e-5) 0; border-top: 1px solid var(--r-bordure); }
.rapport-partie h2 { font-size: var(--t-h2); }
.extrait { margin: var(--e-1) 0 0; color: var(--r-texteSecondaire); font-size: var(--t-petit); }
.prompt { background: var(--r-carte); border: 1px solid var(--r-bordure); border-radius: var(--rayon-petit); padding: var(--e-3); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-petit); }
.coche { display: inline-block; width: 1.4em; font-weight: var(--g-noir); }
@media print {
  .entete, .pied { display: none; }
  body { background: var(--c-blanc); }
  .rapport-partie, .encart, tr { break-inside: avoid; }
  .encart { background: none; color: var(--r-texte); border: 1px solid var(--r-bordure); }
}