/* sw.css — blocs widgets des articles de blog.
 *
 * Hauteurs des zones de résultat fixées : le bloc est rendu côté serveur avec
 * des valeurs d'exemple, puis le JS les remplace. Sans hauteur fixe, le
 * remplacement décalerait la page et dégraderait le CLS.
 * Couleurs INDÉPENDANTES DU THÈME : le parc compte des sites clairs et des
 * sites sombres (sharp-articles.com est noir), et les variables CSS n'ont pas
 * les mêmes noms partout. Le bloc hérite donc de la couleur de texte de la page
 * et dérive ses fonds d'un gris translucide, qui fonctionne sur fond clair comme
 * sur fond sombre. Les variables du socle sont utilisées quand elles existent,
 * en premier argument de var().
 */

.sw {
  margin: 2rem 0;
  padding: 1.25rem 1.25rem 0.75rem;
  border: 1px solid var(--color-border, rgba(128, 128, 128, 0.32));
  border-radius: 10px;
  background: var(--color-surface, rgba(128, 128, 128, 0.07));
  color: inherit;
}

.sw-titre {
  margin: 0 0 0.75rem;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
}

.sw .sw-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 0.75rem;
  font-size: 0.94rem;
}

.sw .sw-table th,
.sw .sw-table td {
  border: 1px solid var(--color-border, rgba(128, 128, 128, 0.32));
  padding: 0.45rem 0.6rem;
  text-align: left;
  vertical-align: top;
}

.sw .sw-table th {
  background: rgba(128, 128, 128, 0.14);
  font-weight: 600;
}

.sw .sw-table td:last-child {
  white-space: nowrap;
}

.sw-lecture {
  margin: 0 0 1rem;
  font-size: 0.92rem;
  line-height: 1.55;
}

.sw-intro {
  margin: 0 0 0.9rem;
  font-size: 0.88rem;
  opacity: 0.78;
}

.sw-saisie {
  margin: 0 0 1rem;
}

/* Six champs en vrac ne disaient pas lesquels servaient à quoi. */
.sw-groupe {
  margin: 0 0 0.9rem;
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 0.6rem 1rem;
  /* Les libelles ne font pas tous le meme nombre de lignes : sans cet
     alignement, le champ d un libelle sur deux lignes descend sous celui de
     ses voisins et la rangee part en escalier. */
  align-items: end;
}

.sw-groupe > legend {
  /* `legend` ne se place pas dans la grille du fieldset : sans `float`, il
     occupe une cellule et décale le premier champ d'une colonne. */
  grid-column: 1 / -1;
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 0.45rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.68;
}

.sw-champ {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sw-champ label {
  font-size: 0.86rem;
  line-height: 1.3;
}

.sw-unite {
  opacity: 0.72;
}

/* L'unité passe DANS le champ : elle était dans le label, ce qui laissait une
   boîte nue sans indice de ce qu'on y met. */
.sw-boite {
  position: relative;
  display: block;
}

.sw-boite-unite .sw-unite {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  pointer-events: none;
}

.sw-boite-unite input {
  padding-right: 2.6rem;
}

.sw-champ input {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--color-border, rgba(128, 128, 128, 0.45));
  border-radius: 6px;
  font: inherit;
  font-size: 0.95rem;
  /* ni blanc ni noir en dur : le champ se pose sur le fond de la page. Plus
     dense que le fond du bloc, sinon il se confond avec lui et rien ne dit
     qu'on peut écrire dedans. */
  background: rgba(128, 128, 128, 0.2);
  color: inherit;
}

.sw-champ input:hover {
  border-color: var(--color-accent, rgba(128, 128, 128, 0.75));
}

.sw-champ input:focus-visible {
  outline: 2px solid var(--color-accent, currentColor);
  outline-offset: 1px;
}

.sw-champ input.sw-invalide {
  border-color: #e05a4a;
}

.sw-sortie {
  margin: 0 0 0.9rem;
  padding: 0.9rem 1rem;
  border-radius: 8px;
  /* Le bloc de réponse se détache du formulaire sans couleur de marque :
     un gris un cran plus dense que le fond du widget suffit sur clair
     comme sur sombre. */
  background: rgba(128, 128, 128, 0.13);
}

/* LA réponse. Les quatre sorties avaient la même graisse et le lecteur ne
   savait pas laquelle répondait à sa question. */
.sw-principal {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.sw-principal .sw-label {
  font-size: 0.85rem;
  opacity: 0.78;
}

.sw-valeur-xl {
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  /* hauteur tenue : le JS remplace la valeur sans décaler la page */
  min-height: 2.3rem;
}

.sw-apres {
  font-size: 0.85rem;
  opacity: 0.78;
}

.sw-verdict {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
}

.sw-verdict:empty {
  display: none;
}

/* Les chiffres intermédiaires : présents, mais clairement au second plan. */
.sw-secondaires {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  margin: 0.8rem 0 0;
  padding: 0.7rem 0 0;
  border-top: 1px solid var(--color-border, rgba(128, 128, 128, 0.3));
}

.sw-chiffre {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.sw-chiffre .sw-label {
  font-size: 0.78rem;
  opacity: 0.7;
}

.sw-chiffre .sw-valeur {
  font-size: 1.02rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-height: 1.3rem;
}

/* La théorie, repliée sous l'outil au lieu de lui barrer l'accès. */
.sw-detail {
  margin: 0 0 0.5rem;
  font-size: 0.92rem;
}

.sw-detail > summary {
  cursor: pointer;
  padding: 0.35rem 0;
  font-weight: 600;
  font-size: 0.88rem;
  opacity: 0.85;
}

.sw-detail > summary:focus-visible {
  outline: 2px solid var(--color-accent, currentColor);
  outline-offset: 2px;
}

.sw-detail .sw-table {
  margin-top: 0.5rem;
}

.sw-detail .sw-table th[scope="row"] {
  width: 34%;
  white-space: normal;
}

.sw-source {
  margin: 0;
  padding: 0.5rem 0 0.25rem;
  border-top: 1px solid var(--color-border, rgba(128, 128, 128, 0.32));
  font-size: 0.78rem;
  opacity: 0.68;
}

/* Sans JavaScript, les champs ne servent à rien : on les laisse visibles mais
   on n'annonce pas un calcul qui n'aura pas lieu. Le reste du bloc, formules,
   exemple et repères, se suffit à lui-même. */
.sw:not(.sw-actif) .sw-sortie {
  display: none;
}

@media (max-width: 600px) {
  .sw {
    padding: 1rem 0.9rem 0.6rem;
  }
  .sw .sw-table {
    font-size: 0.88rem;
  }
  .sw .sw-table td:last-child {
    white-space: normal;
  }
}

/* ---------------------------------------------------------------- SCHÉMAS
 * Tout est tracé en `currentColor` : le dessin hérite de la couleur du texte
 * de la page, donc il reste lisible sur les sites clairs comme sur les sites
 * sombres, sans connaître une seule variable de thème. Aucune couleur en dur,
 * aucun `fill="#fff"` : un blanc en dur disparaîtrait sur sharp-articles.com.
 */

.sw-dessin {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 1rem;
  /* Un dessin très large sur un grand écran devient une frise illisible ;
     trop haut, il chasse le texte sous la ligne de flottaison. */
  max-width: 480px;
  color: inherit;
  overflow: visible;
}

/* Matière : le mur, le bâti. Rempli faiblement, cerné nettement. */
.sw-hachure {
  stroke: currentColor;
  stroke-width: 1;
  stroke-opacity: 0.5;
}

/* La matière du mur est remplie par la hachure (attribut `fill` posé sur la
   forme), pas par une teinte : seul le cerne est défini ici. */
.sw-matiere {
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-opacity: 0.85;
  stroke-linejoin: round;
}

/* Trait de rappel entre la cote et le dessus du mur. */
.sw-attache {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.8;
  stroke-opacity: 0.45;
}

.sw-bati {
  fill: currentColor;
  fill-opacity: 0.14;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-opacity: 0.85;
  stroke-linejoin: round;
}

/* L'étalon : la carte bancaire. Plus présent que la matière, c'est la
   référence que l'œil doit saisir en premier. */
.sw-etalon {
  fill: currentColor;
  fill-opacity: 0.1;
  stroke: currentColor;
  stroke-width: 1.6;
}

.sw-etalon-bande {
  fill: currentColor;
  fill-opacity: 0.45;
}

.sw-sol {
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-opacity: 0.7;
}

.sw-enterre {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-opacity: 0.55;
  stroke-dasharray: 4 3;
}

.sw-trait {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-opacity: 0.6;
}

/* Cotes : fines, mais pas fantomatiques, sinon la mesure ne se lit plus. */
.sw-cote {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-opacity: 0.8;
}

.sw-mesure {
  fill: currentColor;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sw-repere {
  fill: currentColor;
  fill-opacity: 0.92;
  stroke: currentColor;
  stroke-width: 1.2;
}

/* Le numéro doit ressortir SUR la pastille pleine : il prend la couleur du
   fond de la page, pas celle du texte. `--color-surface` quand le site la
   définit, sinon on retombe sur le fond du bloc. */
.sw-repere-n {
  fill: var(--color-bg, var(--bg, Canvas));
  font-weight: 800;
}

/* Légende : surtout PAS la carte à puces du corps d'article. Dans le parc,
   `.blog-article-content li` porte déjà fond, bordure et pastille ; sans ce
   retrait, la légende d'un schéma deviendrait six cartes empilées, soit
   exactement le défaut qu'on cherche à corriger. */
.sw-legende,
.sw-legende li {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.sw-legende {
  list-style: none;
  margin: 0 0 0.6rem;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  counter-reset: sw-leg;
}

.sw-legende li {
  /* Grille plutôt que position absolue : avec « 15 mm » en clé, un simple
     padding-left laissait le texte passer sous la clé. */
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 0 0.7rem;
  align-items: baseline;
  font-size: 0.92rem;
  line-height: 1.5;
}

.sw-legende li::before {
  display: none;
}

.sw-legende .sw-cle {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 0.88rem;
  text-align: right;
}

/* Légende numérotée : la pastille reprend celle du dessin, pour que l'œil
   fasse le lien sans chercher. Elle occupe la colonne de clé, que le gabarit
   laisse vide pour elle. */
.sw-legende-num li {
  counter-increment: sw-leg;
}

.sw-legende-num .sw-cle::before {
  content: counter(sw-leg);
  display: inline-block;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: currentColor;
  color: var(--color-bg, var(--bg, Canvas));
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.55rem;
  text-align: center;
}

.sw-legende .sw-nom {
  font-weight: 650;
}

.sw-legende .sw-note {
  opacity: 0.82;
}

@media (max-width: 600px) {
  .sw-legende li {
    grid-template-columns: 2.6rem 1fr;
    gap: 0 0.5rem;
  }
}


/* ------------------------------------------------- BLOCS GRAPHIQUES HTML
 * Second format de schéma, à côté du SVG. La mise en page vient du bloc
 * lui-même (styles inline filtrés) ; ici on ne pose que le cadre et les deux
 * animations que le modèle peut demander par leur classe. Il ne peut pas en
 * écrire d'autres : un <style> venu d'un article n'arrive jamais jusqu'ici.
 */

.sw-bloc-article {
  margin: 1.8rem 0;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--color-border, rgba(128, 128, 128, 0.3));
  border-radius: 10px;
  background: var(--color-surface, rgba(128, 128, 128, 0.06));
  color: inherit;
  font-size: 0.94rem;
  line-height: 1.5;
  overflow-x: auto;
}

/* Le bloc ne doit pas hériter de la carte à puces du corps d'article : dans
   le parc, `.blog-article-content li` porte déjà fond, bordure et pastille,
   et une légende de six lignes deviendrait six cartes empilées. */
.sw-bloc-article ul,
.sw-bloc-article ol,
.sw-bloc-article li {
  background: none;
  border: 0;
  border-radius: 0;
  padding-left: 0;
  margin: 0;
  list-style: none;
}

.sw-bloc-article li::before {
  display: none;
}

/* Une barre se déploie depuis son bord gauche. `transform` n'est pas dans la
   liste des propriétés autorisées en inline : l'animation est donc forcément
   la nôtre, le modèle ne peut que la demander. */
@keyframes sw-pousse {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.sw-anim-pousse {
  display: inline-block;
  transform-origin: left center;
  animation: sw-pousse 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes sw-fondu {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.sw-anim-fondu {
  animation: sw-fondu 0.5s ease-out both;
}

/* Un lecteur qui a demandé moins d'animations ne doit pas en subir : la valeur
   finale est posée d'emblée, sans transition. */
@media (prefers-reduced-motion: reduce) {
  .sw-anim-pousse,
  .sw-anim-fondu {
    animation: none;
  }
}