/**
 * Mise en page de l'outil « Estimation du sexe - os longs ».
 * Liée automatiquement par le châssis (outils/<id>/style.css, TUTORIEL.md
 * §5bis) - ne jamais la lier à la main dans index.php.
 *
 * Règles tenues (test-style-outil.php) :
 *  1. Géométrie libre : display, grid, flex, gap, marges, padding, tailles
 *     de texte en unités relatives - jamais en px.
 *  2. Couleurs et polices uniquement en var(--...) de la charte, jamais de
 *     valeur littérale.
 *  3. Chaque sélecteur commence par une classe qui n'appartient pas à la
 *     charte (.sk-cartes, .sk-shap... inventées ici, pas .sk-champ seul).
 *  4. Aucune ressource externe.
 *
 * Les douze mesures reprennent .sk-tableau (déjà déclarée dans
 * commun/style.php, déjà utilisée par
 * public/outils/stature-os-longs/index.php) et .sk-cartes/.sk-carte (déjà
 * utilisée ici même pour les résultats) : une bulle par os, un petit
 * tableau à l'intérieur, côte à côte plutôt qu'empilées - empilées en
 * pleine largeur, les colonnes "Valeur" de chaque bulle ne s'alignaient
 * plus entre elles. .sk-mesures-titre distingue le nom de l'os des autres
 * titres .sk-champ-titre de la page.
 */

/* ---- La bulle de mesures : nom de l'os calé en haut, tableau centré dans
   l'espace restant. Les bulles sont toutes de même longueur (.sk-cartes,
   align-items: stretch) mais n'ont pas toutes le même nombre de mesures -
   sans ce centrage, les tableaux les plus courts se retrouveraient collés
   en haut, décalés par rapport aux tableaux plus longs. ---- */
.sk-mesures-carte {
  display: flex;
  flex-direction: column;
}
.sk-mesures-carte .sk-tableau {
  margin-block: auto;
}

/* ---- Sépare visuellement les 3 grandes parties de la page (l'outil,
   les définitions, les références) : un filet au-dessus, de l'air avant
   et après. ---- */
.sk-section-separee {
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* ---- L'illustration au-dessus du tableau des définitions, dans sa carte. ---- */
.sk-mesures-illustration {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  margin-block-end: var(--space-2);
}

/* ---- L'acronyme d'une mesure : sa definition complete en infobulle
   (attribut title du <abbr>) - le soulignement pointille est la convention
   usuelle pour signaler qu'il y a plus a lire au survol. ---- */
.sk-mesures-definition {
  text-decoration: underline dotted;
  text-decoration-color: var(--color-gray-600);
  cursor: help;
}

/* ---- Le bouton "Estimer" : centre et mis en valeur (plus grand, pleine
   largeur jusqu'a une certaine taille) plutot qu'aligne a gauche comme le
   reste du formulaire. ---- */
.sk-mesures-valider {
  display: flex;
  justify-content: center;
  margin-block-start: var(--space-4);
}
.sk-bouton-estimer {
  font-size: 1.125rem;
  padding: var(--space-2) var(--space-5);
}

/* ---- Le rappel "mesures transmises..." sous le bouton : trop collé au
   bouton par defaut, un peu d'air au-dessus. ---- */
.sk-avant-envoi {
  margin-block-start: var(--space-4);
}

/* ---- Une valeur saisie refusee (hors plage plausible) : le champ et
   l'aide de plage juste en dessous, en rouge. ---- */
.sk-mesures-carte input[aria-invalid="true"] {
  border-color: var(--color-error);
}
.sk-mesures-erreur {
  color: var(--color-error);
}

/* ---- Nom de l'os, en tête de sa bulle, centré ---- */
.sk-mesures-titre {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}

/* ---- La décision : mise en avant (encadrée, centrée, en capitales) ---- */
.sk-decision {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bone);
  padding: var(--space-3);
  margin-block: var(--space-2);
}

/* ---- Paragraphes qu'on veut sur toute la largeur de la page, pas bridés
   par le .prose de la charte (pensé pour du texte long, pas pour ce résumé
   ni cette aide d'une ligne). ---- */
.sk-texte-pleine-largeur {
  max-width: none;
}

/* ---- Le curseur de seuil : libellé, curseur et probabilité sur une ligne ---- */
.sk-curseur {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.sk-curseur input[type="range"] {
  flex: 1 1 12rem;
  appearance: none;
  height: 0.4rem;
  border-radius: var(--radius-sm);
  background: var(--color-gray-300);
  outline: none;
}
.sk-curseur input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--color-navy);
  border: none;
  cursor: pointer;
}
.sk-curseur input[type="range"]::-moz-range-thumb {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--color-navy);
  border: none;
  cursor: pointer;
}
.sk-curseur input[type="range"]::-moz-range-track {
  height: 0.4rem;
  border-radius: var(--radius-sm);
  background: var(--color-gray-300);
}

/* ---- Cartes côte à côte (résultats, mesures) ---- */
.sk-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-3);
  margin-block-start: var(--space-3);
}
.sk-carte {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3);
}

/* ---- La répartition masculin/féminin : donut et légende côte à côte ---- */
.sk-donut {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.sk-donut svg {
  flex: 0 0 auto;
}

/* ---- Le diagramme SHAP, dessiné par le serveur (largeur écrite par PHP) ---- */
.sk-shap {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}
.sk-shap li {
  display: grid;
  grid-template-columns: 6rem 1fr 3.5rem;
  gap: var(--space-2);
  align-items: center;
}
.sk-shap-nom {
  font-size: 0.8125rem;
  color: var(--color-gray-600);
  text-align: right;
}
.sk-shap-barre {
  background: var(--color-bone);
  height: 0.75rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.sk-shap-barre span {
  display: block;
  height: 100%;
  background: var(--color-navy);
}
.sk-shap-barre[data-sk-sens="negative"] span {
  background: var(--color-gold-dark);
}
.sk-shap-valeur {
  font-size: 0.8125rem;
  color: var(--color-gray-600);
}
.sk-shap-legende {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-block-start: var(--space-2);
  font-size: 0.8125rem;
  color: var(--color-gray-600);
}
.sk-shap-puce {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: var(--radius-sm);
  margin-inline-end: var(--space-1);
  background: var(--color-navy);
}
.sk-shap-puce.est-negative {
  background: var(--color-gold-dark);
}