/* =========================================================================
   Calculateur de Soudabilité - Design system global
   Direction esthétique (CLAUDE.md #8) : ingénierie moderne épurée, blanc
   dominant, accent bleu profond #0D3B66, espacement généreux.
   Aucun style inline dans le HTML : tout est ici.
   ========================================================================= */

/* ----------------------------------------------------------------------- */
/* 1. Variables (design tokens)                                            */
/* ----------------------------------------------------------------------- */
:root {
  /* -----------------------------------------------------------------
     Direction esthétique : DARK MODE (révision actée par Tony).
     Fond bleu marine, cartes plus claires, accents bleu néon.
     La version imprimée repasse en blanc / noir (voir @media print).
     ----------------------------------------------------------------- */
  --fond: #0F172A;            /* fond général bleu marine */
  --surface: #1E293B;         /* cartes / panneaux légèrement plus clairs */

  /* Accents bleu néon lumineux */
  --bleu: #38BDF8;            /* liens + titres de section */
  --bleu-fonce: #0EA5E9;      /* boutons + éléments interactifs */
  --bleu-lien: #38BDF8;
  --bleu-voile: rgba(56, 189, 248, 0.12);   /* fond teinté accent (hover/actif) */
  --bleu-bordure: rgba(56, 189, 248, 0.55); /* bordure accent au survol */

  /* Neutres - fond sombre dominant */
  --blanc: #FFFFFF;           /* blanc réel (texte sur bouton, impression) */
  --gris-fond: #1E293B;       /* panneaux : en-têtes de table, pied, survol nav */
  --gris-carte: #1E293B;      /* fond des cartes */
  --gris-bordure: #334155;    /* bordures subtiles */
  --encre: #F1F5F9;           /* texte principal (blanc cassé) */
  --texte-doux: #94A3B8;      /* texte secondaire gris bleuté */
  --texte-faible: #64748B;    /* légendes, mentions */

  /* Verdicts (CLAUDE.md #12) - teintes adaptées au fond sombre */
  --vert: #4ADE80;
  --vert-voile: rgba(74, 222, 128, 0.12);
  --ambre: #FBBF24;
  --ambre-voile: rgba(251, 191, 36, 0.12);
  --rouge: #F87171;
  --rouge-voile: rgba(248, 113, 113, 0.12);

  /* Typographie - Inter / IBM Plex Sans souhaitées (CLAUDE.md #8).
     Repli sur pile système pour éviter toute dépendance CDN de police
     (respect RGPD : aucune requête vers un tiers). Self-hosting en Lot 2. */
  --font-sans: "Inter", "IBM Plex Sans", system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Consolas",
    monospace;

  /* Échelle typographique */
  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.15rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2.1rem;
  --lh: 1.55;

  /* Espacement - base 8 px */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  /* Rayons, ombres, largeurs */
  --radius: 10px;
  --radius-sm: 6px;
  --ombre: 0 1px 2px rgba(0, 0, 0, 0.30),
    0 8px 24px rgba(0, 0, 0, 0.35);
  --ombre-legere: 0 1px 2px rgba(0, 0, 0, 0.30);
  --largeur-max: 1080px;
}

/* ----------------------------------------------------------------------- */
/* 2. Reset léger et base                                                  */
/* ----------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh);
  color: var(--encre);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

a {
  color: var(--bleu-lien);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

table {
  border-collapse: collapse;
  width: 100%;
}

:focus-visible {
  outline: 2px solid var(--bleu);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Conteneur centré partagé par toutes les pages */
.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

/* ----------------------------------------------------------------------- */
/* 3. Barre de navigation (topbar + onglets)                               */
/* ----------------------------------------------------------------------- */
.topbar {
  border-bottom: 1px solid var(--gris-bordure);
  background: var(--fond);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 64px;
  flex-wrap: wrap;
}

/* Lien-logo texte : repère de marque + retour accueil, à gauche des
   onglets (CLAUDE.md #26). */
.nav__marque {
  font-family: var(--font-sans);
  font-size: var(--fs-xl); /* +50% vs --fs-base (1rem -> 1.5rem) */
  font-weight: 700;
  color: var(--bleu);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.nav__marque:hover {
  color: var(--bleu-fonce);
  text-decoration: none;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.nav__lien {
  display: inline-block;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--texte-doux);
  font-size: var(--fs-sm);
  font-weight: 550;
}

.nav__lien:hover {
  background: var(--gris-fond);
  color: var(--encre);
  text-decoration: none;
}

.nav__lien.is-active {
  color: var(--bleu);
  background: var(--bleu-voile);
}

/* ----------------------------------------------------------------------- */
/* 4. Structure de page                                                    */
/* ----------------------------------------------------------------------- */
.page {
  flex: 1 0 auto;
  padding-block: var(--sp-6);
}

/* Onglet Présentation : « une vue, pas de scroll » (CLAUDE.md #13).
   Espacement resserré pour tenir dans une hauteur d'écran courante. */
.presentation {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

/* --- Hero --- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
}

.hero__titre {
  font-size: var(--fs-2xl);
  color: var(--encre);
}

.hero__sous-titre {
  font-size: var(--fs-lg);
  font-weight: 550;
  color: var(--bleu);
}

.hero__desc {
  font-size: var(--fs-base);
  color: var(--texte-doux);
  align-self: stretch; /* pleine largeur du conteneur, texte centré */
}

/* --- Grille : normes à gauche, sommaire onglets à droite --- */
.grille-presentation {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}

.bloc__titre {
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-3);
  color: var(--bleu); /* titres de section en bleu néon */
}

/* --- Tableau des normes --- */
.normes {
  border: 1px solid var(--gris-bordure);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--ombre-legere);
  font-size: var(--fs-sm);
}

.normes thead th {
  text-align: left;
  background: var(--gris-fond);
  color: var(--texte-doux);
  font-weight: 600;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: var(--sp-2) var(--sp-3);
}

.normes tbody td {
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--gris-bordure);
  vertical-align: top;
  color: var(--texte-doux);
}

.normes tbody tr:hover td {
  background: var(--bleu-voile);
}

.normes__code {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--encre);
  white-space: nowrap;
}

/* --- Cartes sommaire des onglets --- */
.cartes {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.carte {
  display: block;
  border: 1px solid var(--gris-bordure);
  border-radius: var(--radius);
  background: var(--gris-carte);
  padding: var(--sp-4);
  box-shadow: var(--ombre-legere);
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
    transform 0.15s ease;
}

/* Masquage réel : display:block ci-dessus a la même spécificité que la
   règle UA [hidden]{display:none} - même correctif que .champ[hidden]. */
.carte[hidden] {
  display: none;
}

.carte--onglet:hover {
  text-decoration: none;
  border-color: var(--bleu-bordure);
  box-shadow: var(--ombre);
  transform: translateY(-1px);
}

.carte__titre {
  font-size: var(--fs-base);
  color: var(--bleu);
  margin-bottom: var(--sp-1);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.carte__titre::after {
  content: "→";
  color: var(--texte-faible);
  font-weight: 400;
}

.carte__texte {
  font-size: var(--fs-sm);
  color: var(--texte-doux);
}

/* --- Bloc auteur + LinkedIn (discret) --- */
.auteur {
  text-align: right;
  font-size: var(--fs-sm);
  color: var(--texte-faible);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--gris-bordure);
}

.auteur__logo {
  height: 22px;
  width: auto;
  vertical-align: middle;
  margin-right: 4px;
}

.auteur__nom {
  color: var(--encre);
  font-weight: 600;
}

.auteur__lien {
  font-size: var(--fs-sm);
}

/* ----------------------------------------------------------------------- */
/* 5. Badges de verdict (préparés pour les onglets Analyse - CLAUDE.md #12) */
/* ----------------------------------------------------------------------- */
.verdict {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  border: 1px solid transparent;
}

.verdict__icone {
  font-weight: 700;
}

/* Écart à la zone idéale quand le joint en est proche (CLAUDE.md #26).
   En bloc sous le libellé principal : évite d'élargir la colonne/le badge
   quand la note est présente ("limite idéale à 5 %"). */
.verdict__note {
  display: block;
  font-weight: 500;
  font-size: 0.82em;
  opacity: 0.85;
  margin-top: 2px;
}

.verdict--ok {
  color: var(--vert);
  background: var(--vert-voile);
  border-color: var(--vert);
}

.verdict--attention {
  color: var(--ambre);
  background: var(--ambre-voile);
  border-color: var(--ambre);
}

.verdict--refus {
  color: var(--rouge);
  background: var(--rouge-voile);
  border-color: var(--rouge);
}

/* Zone S - dernier recours : neutre, ni positif ni négatif. */
.verdict--neutre {
  color: var(--texte-doux);
  background: var(--gris-fond);
  border-color: var(--gris-bordure);
}

/* ----------------------------------------------------------------------- */
/* 6. Pied de page (disclaimer permanent - CLAUDE.md #3)                    */
/* ----------------------------------------------------------------------- */
.pied {
  flex: none;
  border-top: 1px solid var(--gris-bordure);
  background: var(--gris-fond);
  padding-block: var(--sp-4);
}

.pied__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.pied__disclaimer {
  font-size: var(--fs-sm);
  color: var(--texte-doux);
  max-width: 70ch;
}

.pied__compteurs {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.pied__compteur {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--texte-faible);
  white-space: nowrap;
}

/* ----------------------------------------------------------------------- */
/* 6b. Onglet Paramètres DMOS - formulaire et carte résultats               */
/* ----------------------------------------------------------------------- */
.parametres {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.param-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
}

.param-intro__texte {
  color: var(--texte-doux);
  max-width: 80ch;
  margin-inline: auto;
}

.param-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}

.param-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.carte--form {
  padding: var(--sp-5);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.form-grid--trois {
  grid-template-columns: 1fr 1fr 1fr;
}

/* Un seul champ visible dans la carte : centré, largeur limitée. */
.form-grid--centre {
  grid-template-columns: minmax(0, 340px);
  justify-content: center;
}

.champ {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

/* Masquage réel : .champ étant en display:flex, l'attribut [hidden] (UA)
   ne suffit pas - on force display:none pour les champs hors procédé. */
.champ[hidden] {
  display: none;
}

.champ--large {
  grid-column: 1 / -1;
}

.champ__label {
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--texte-doux);
}

.champ__input,
.champ__select {
  width: 100%;
  padding: 0.5rem 0.625rem;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--encre);
  background: var(--fond);
  border: 1px solid var(--gris-bordure);
  border-radius: var(--radius-sm);
  appearance: none;
}

.champ__input:focus,
.champ__select:focus {
  outline: none;
  border-color: var(--bleu);
}

/* Options du menu déroulant natif (Chrome/Edge honorent ces couleurs). */
.champ__select option {
  background: var(--surface);
  color: var(--encre);
}

.note {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--texte-faible);
}

.erreur {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
  color: var(--rouge);
}

/* --- Bouton en style lien (composition manuelle, réinitialiser) --- */
.btn-lien {
  align-self: flex-start;
  padding: 0;
  border: none;
  background: none;
  color: var(--bleu);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 550;
  cursor: pointer;
}

.btn-lien:hover {
  text-decoration: underline;
}

.btn-lien--reset {
  margin-top: var(--sp-3);
  color: var(--texte-doux);
}

/* --- Bouton plein (action principale - génération de la fiche PDF) --- */
.btn-primaire {
  display: inline-block;
  padding: var(--sp-3) var(--sp-5);
  border: none;
  border-radius: var(--radius-sm);
  background: var(--bleu-fonce);
  color: #ffffff;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

.btn-primaire:hover {
  background: var(--bleu);
}

.pdf-action {
  display: flex;
  justify-content: center;
  padding-top: var(--sp-2);
}

/* Fiche imprimable : jamais visible à l'écran, seulement en @media print
   (assets/css/print.css, chargé uniquement sur parametres.html). */
#fiche-impression {
  display: none;
}

/* --- Bloc composition manuelle (dépliant) --- */
.comp-manuelle {
  margin-top: var(--sp-2);
  padding: var(--sp-3);
  background: var(--fond);
  border: 1px solid var(--gris-bordure);
  border-radius: var(--radius-sm);
}

.comp-manuelle__titre {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--texte-faible);
}

.comp-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: var(--sp-2);
}

.comp-champ {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.comp-champ__label {
  font-size: var(--fs-xs);
  color: var(--texte-doux);
}

.comp-champ__input {
  width: 100%;
  padding: 0.3rem 0.4rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--encre);
  background: var(--surface);
  border: 1px solid var(--gris-bordure);
  border-radius: var(--radius-sm);
  appearance: none;
}

.comp-champ__input:focus {
  outline: none;
  border-color: var(--bleu);
}

/* Valeur en lecture seule (banque.html : composition détaillée dépliée
   sous une ligne) - même typographie que .comp-champ__input, sans les
   attributs de champ de saisie (pas de champ éditable ici). */
.comp-champ__valeur {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--encre);
}

/* Ligne équivalents calculés sous chaque métal */
.comp-eq {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--texte-doux);
  min-height: 1em;
}

/* Carte résultats - collée en haut lors du défilement du formulaire */
.param-resultats {
  position: sticky;
  top: var(--sp-5);
}

.carte--resultats {
  padding: var(--sp-5);
}

.res {
  margin: var(--sp-4) 0 0;
}

.res__ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--gris-bordure);
}

.res__ligne:first-child {
  border-top: none;
}

.res__label {
  font-size: var(--fs-sm);
  color: var(--texte-doux);
}

.res__valeur {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  color: var(--encre);
  white-space: nowrap;
}

.res__unite {
  font-size: var(--fs-xs);
  color: var(--texte-faible);
  margin-left: var(--sp-1);
}

.res__ligne--fort .res__valeur {
  color: var(--bleu);
  font-weight: 600;
}

/* --- Thème sombre pour Choices.js (combobox à recherche) --- */
.choices {
  margin-bottom: 0;
}

.choices__inner {
  min-height: 0;
  padding: 0.4rem 0.5rem;
  font-size: var(--fs-sm);
  color: var(--encre);
  background: var(--fond);
  border: 1px solid var(--gris-bordure);
  border-radius: var(--radius-sm);
}

.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
  border-color: var(--bleu);
}

.choices[data-type*="select-one"]::after {
  border-color: var(--texte-faible) transparent transparent;
}

.choices__list--single {
  padding: 0;
}

.choices__list--single .choices__item {
  color: var(--encre);
}

.choices__placeholder {
  color: var(--texte-faible);
  opacity: 1;
}

.choices__input {
  color: var(--encre);
  background: transparent;
  font-size: var(--fs-sm);
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
  background: var(--surface);
  border: 1px solid var(--gris-bordure);
  border-radius: var(--radius-sm);
  color: var(--encre);
}

.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
  color: var(--encre);
  font-size: var(--fs-sm);
  background: transparent;
}

/* Item survolé / actif : bleu plein, texte blanc (CLAUDE.md #8 / accent). */
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background: var(--bleu-fonce);
  color: #ffffff;
}

/* Champ de recherche à l'intérieur du dropdown. */
.choices__list--dropdown .choices__input,
.choices__list[aria-expanded] .choices__input {
  background: var(--fond);
  color: var(--encre);
  border-bottom: 1px solid var(--gris-bordure);
}

/* ----------------------------------------------------------------------- */
/* 6c. Onglet Analyse - diagramme Schaeffler, tableaux, synthèse            */
/* ----------------------------------------------------------------------- */
.analyse {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

[data-analyse="contenu"] {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* Masquage réel : la règle display:flex ci-dessus a la même spécificité
   que la règle UA [hidden]{display:none} - sans ce correctif l'attribut
   hidden posé en JS (afficherVide/afficherContenu) est ignoré (même bug
   que .champ[hidden], cf. plus haut). */
[data-analyse="contenu"][hidden] {
  display: none;
}

.schaeffler-zone {
  width: 100%;
  display: flex;
  justify-content: center;
}

.schaeffler-svg {
  display: block;
  width: 100%;
  height: auto;
  /* +18% puis +12% supplémentaires, en lockstep avec le viewBox agrandi
     (schaeffler_svg.js) : même ratio pixel/unité, diagramme physiquement
     plus grand à l'écran. */
  max-height: 90vh;
  margin-inline: auto;
  background: var(--fond);
  border: 1px solid var(--gris-bordure);
  border-radius: var(--radius-sm);
}

.legende {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  column-gap: 2rem;
  row-gap: 0.4rem;
  font-size: var(--fs-xs);
  color: var(--texte-doux);
}

.legende li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.legende__pastille {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
  display: inline-block;
}

.legende__pastille--carre {
  border-radius: 2px;
}

.legende__pastille--triangle {
  width: 0;
  height: 0;
  border-radius: 0;
  background: none;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 11px solid currentColor;
}

.lg-a { background: #4ade80; }
.lg-b { background: #fb923c; }
.lg-d { background: #cbd5e1; }
.lg-c { background: #c084fc; }
.lg-id { background: #3B82F6; }
.lg-ac { background: #10B981; }
.lg-s { background: #FFFFFF; }
.lg-j { border-bottom-color: #f87171; }

/* Tableaux (apports, valeurs de synthèse) */
.tableau-defilant {
  overflow-x: auto;
  margin-top: var(--sp-4);
}

/* Sous-titre de groupe au-dessus d'un tableau-defilant (ex. banque.html :
   un sous-tableau par procédé compatible). Plus discret que .bloc__titre
   (pas bleu, taille de base) pour rester secondaire au titre de carte. */
.tableau-groupe__titre {
  font-size: var(--fs-base);
  margin: var(--sp-5) 0 var(--sp-2);
  color: var(--texte-doux);
}

.tableau-groupe__titre:first-child {
  margin-top: 0;
}

.tableau {
  width: 100%;
  font-size: var(--fs-sm);
  border: 1px solid var(--gris-bordure);
  border-radius: var(--radius);
  overflow: hidden;
}

.tableau thead th {
  text-align: left;
  background: var(--gris-fond);
  color: var(--texte-doux);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: var(--sp-2) var(--sp-3);
  white-space: nowrap;
}

.tableau tbody td {
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--gris-bordure);
  color: var(--texte-doux);
  white-space: nowrap;
}

/* Colonne Verdict : la note d'écart (.verdict__note) doit pouvoir passer
   à la ligne au lieu d'élargir la colonne - à toutes les tailles d'écran,
   pas seulement sous 820px. Spécificité alignée sur .tableau tbody td
   (0,1,2) pour la battre malgré l'ordre des règles. */
.tableau--apports tbody td {
  white-space: normal;
}

/* banque.html : désignations longues (ex. "OK Tigrod 2509 (ER2594 / W 25
   9 4 N L) super duplex") - passent à la ligne au lieu d'imposer un
   scroll horizontal, alors que les colonnes numériques (Cr_eq, Ni_eq)
   et le bouton restent compacts (nowrap hérité de .tableau tbody td). */
.tableau--banque tbody td:first-child {
  white-space: normal;
}

/* Padding horizontal resserré : seulement 4 colonnes (Désignation, Cr_eq,
   Ni_eq, bouton) mais chacune doit rester compacte pour tenir sur les
   viewports mobiles étroits (~360-390px) sans scroll horizontal. */
.tableau--banque thead th,
.tableau--banque tbody td {
  padding-inline: var(--sp-2);
}

.apport-ligne {
  cursor: pointer;
}

.apport-ligne:hover td,
.apport-ligne.is-active td {
  background: var(--bleu-voile);
  color: var(--encre);
}

/* Infobulle survol des points du diagramme */
.infobulle {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  max-width: 240px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--gris-bordure);
  border-radius: var(--radius-sm);
  box-shadow: var(--ombre);
  font-size: var(--fs-xs);
  color: var(--encre);
  white-space: pre-line;
}

.synth-verdict {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}

/* ----------------------------------------------------------------------- */
/* 7. Responsive de base (CLAUDE.md #14 - polissage mobile en Lot 2)        */
/* ----------------------------------------------------------------------- */
@media (max-width: 820px) {
  .grille-presentation {
    grid-template-columns: 1fr;
  }

  .topbar__inner {
    min-height: 0;
    padding-block: var(--sp-3);
  }

  .nav {
    flex-wrap: wrap;
  }

  .legende {
    grid-template-columns: repeat(2, auto);
  }

  .hero__titre {
    font-size: var(--fs-xl);
  }

  .pied__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .param-layout {
    grid-template-columns: 1fr;
  }

  .param-resultats {
    position: static;
  }

  .form-grid,
  .form-grid--trois {
    grid-template-columns: 1fr;
  }

  /* Tableau des 7 apports : empilé en cartes (une ligne = un bloc), plus
     lisible qu'un défilement horizontal sur mobile. En-têtes reportés en
     data-label (posé en JS, vue_analyse.js) et affichés via ::before. */
  .tableau--apports thead {
    display: none;
  }

  .tableau--apports,
  .tableau--apports tbody,
  .tableau--apports tr,
  .tableau--apports td {
    display: block;
    width: 100%;
  }

  .tableau--apports tr {
    margin-bottom: var(--sp-3);
    border: 1px solid var(--gris-bordure);
    border-radius: var(--radius-sm);
    overflow: hidden;
  }

  .tableau--apports td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
  }

  .tableau--apports td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--texte-doux);
    margin-right: var(--sp-4);
  }
}

/* ----------------------------------------------------------------------- */
/* 8. Impression - retour fond blanc / texte noir (économie d'encre)        */
/*    Filet de sécurité pour un Ctrl+P sur une page sans fiche dédiée       */
/*    (index.html, banque.html). La mise en page de la fiche PDF elle-même */
/*    (parametres.html #fiche-impression) vit dans assets/css/print.css    */
/*    (CLAUDE.md #25 - window.print + @media print, pas jsPDF).            */
/* ----------------------------------------------------------------------- */
@media print {
  :root {
    --fond: #FFFFFF;
    --surface: #FFFFFF;
    --gris-fond: #FFFFFF;
    --gris-carte: #FFFFFF;
    --gris-bordure: #CCCCCC;
    --encre: #000000;
    --texte-doux: #1A1A1A;
    --texte-faible: #333333;
    --bleu: #0D3B66;
    --bleu-lien: #0D3B66;
    --bleu-voile: #FFFFFF;
    --ombre: none;
    --ombre-legere: none;
  }

  body {
    background: #FFFFFF;
    color: #000000;
  }

  /* Éléments d'interface non pertinents sur papier */
  .topbar,
  .nav,
  .pied__compteur {
    display: none;
  }
}