/* Sélecteur de nacelle — Corberon
   Parti pris : l'écran est un abaque constructeur, pas un tableau de bord.
   Fond papier, trait CAO, cotes en monospace, couleur rare et saturée. */

:root {
  /* Encres et papier — repris du vocabulaire des diagrammes de portée */
  --papier:        #F7F6F3;
  --papier-creux:  #EFEDE7;
  --encre:         #16191C;
  --encre-douce:   #5A5751;
  --filet:         #D9D6CF;
  --filet-fort:    #BFBAB0;

  /* Verdicts. Au comptoir, le verdict doit se lire à un mètre de l'écran :
     couleurs franches, pastille pleine, et le hors-portée nettement éteint. */
  --atteint:       #0F6B3A;
  --atteint-clair: #C6E6D4;
  --allege:        #B14B08;
  --allege-clair:  #F8D6B8;
  --hors:          #6E6A63;
  --hors-clair:    #E8E6E1;
  /* Rouge Corberon : un seul usage dans tout l'écran, le point recherché */
  --repere:        #C8102E;

  --u: 4px;
  --rayon: 3px;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Les cotes sont en chiffres à chasse fixe, comme sur un plan :
     les valeurs s'alignent en colonne et se comparent d'un coup d'oeil. */
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Roboto Mono", monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

/* --- Bandeau ---------------------------------------------------------- */

.bandeau {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 4) calc(var(--u) * 5);
  border-bottom: 2px solid var(--encre);
}
.bandeau-titre { display: flex; align-items: baseline; gap: calc(var(--u) * 3); }
.marque {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--repere); font-weight: 600;
}
.bandeau h1 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.bandeau-note { margin: 0; color: var(--encre-douce); font-size: 13px; max-width: 46ch; }

/* --- Plan général ----------------------------------------------------- */

.plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  gap: calc(var(--u) * 5);
  padding: calc(var(--u) * 5);
  align-items: start;
  max-width: 1600px;
}
@media (max-width: 980px) { .plan { grid-template-columns: minmax(0, 1fr); } }

/* Sur grand écran, la grille reste sous les yeux pendant qu'on parcourt les
   machines : c'est elle qui porte la conversation avec le client. */
@media (min-width: 981px) {
  .panneau-grille {
    position: sticky; top: calc(var(--u) * 4);
    max-height: calc(100vh - var(--u) * 8);
    display: flex; flex-direction: column;
  }
  .panneau-grille .grille-cadre { flex: 1 1 auto; min-height: 0; display: flex; }
  .panneau-grille #grille { width: 100%; height: 100%; }
}

.panneau { min-width: 0; }

/* --- Les deux étapes, en tête de page ---------------------------------- */
/* Le chantier vient AVANT la grille : la présélection réduit le champ des
   machines candidates, et un résultat lu sans avoir regardé pente, gabarit et
   énergie ne veut pas dire grand-chose. Mis sur le côté, ce bloc se sautait
   sans même le voir. */

.etapes {
  display: grid; gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 5) calc(var(--u) * 5) 0;
  max-width: 1600px;
}

.etape-rang {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 3px;
  background: var(--encre); color: #fff;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
}
.etape-titre { font-size: 15px; font-weight: 600; }
.etape-tete {
  display: flex; align-items: center; gap: calc(var(--u) * 2);
  margin-bottom: calc(var(--u) * 3);
}

/* --- Saisie des cotes --------------------------------------------------- */
/* Hauteur, déport et charge sont les trois valeurs qu'on regarde le plus :
   elles écrasent volontairement tout le reste de la page. */

.saisie {
  border: 1px solid var(--filet-fort); border-radius: var(--rayon);
  background: #fff; padding: calc(var(--u) * 4);
}

/* Trois cellules de largeur égale, séparées par un filet : sur tablette, les
   champs se tassaient dans le tiers gauche en laissant un grand vide à droite.
   Elles occupent maintenant toute la largeur, quel que soit l'écran. */
.cotes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cote {
  display: flex; flex-direction: column; gap: 3px;
  padding: 0 calc(var(--u) * 4);
  border-left: 1px solid var(--filet);
  min-width: 0;
}
.cote:first-child { padding-left: 0; border-left: 0; }
.cote:last-child { padding-right: 0; }

.cote-nom {
  font-size: 12px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--encre-douce);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cote-champ {
  display: flex; align-items: baseline; gap: 6px;
  border-bottom: 3px solid var(--encre); padding-bottom: 2px;
}
.cote-champ input {
  flex: 1; min-width: 0; width: 100%;
  font-family: var(--mono); font-size: clamp(30px, 3.6vw, 42px); font-weight: 700;
  line-height: 1.05; color: var(--encre); background: transparent;
  border: 0; border-radius: 0; padding: 0; text-align: right;
  -moz-appearance: textfield;
}
.cote-champ input::-webkit-outer-spin-button,
.cote-champ input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cote-champ:focus-within { border-bottom-color: var(--repere); }
.cote-champ input:focus-visible { outline: 0; }
.cote-champ em {
  font-family: var(--mono); font-style: normal; font-size: 17px; font-weight: 600;
  color: var(--encre-douce); flex: none;
}

@media (max-width: 560px) {
  .cotes { grid-template-columns: 1fr; gap: calc(var(--u) * 3); }
  .cote { padding: 0; border-left: 0; }
  .cote + .cote { border-top: 1px solid var(--filet); padding-top: calc(var(--u) * 3); }
}

/* --- Le geste tactile --------------------------------------------------- */
/* Rien n'indiquait que la grille se manipule au doigt. */

.geste {
  display: flex; align-items: center; gap: calc(var(--u) * 2);
  margin: 0 0 calc(var(--u) * 2);
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  border: 1px solid color-mix(in srgb, var(--repere) 35%, var(--filet-fort));
  border-radius: var(--rayon);
  background: color-mix(in srgb, var(--repere) 6%, #fff);
  color: var(--encre); font-size: 13px; line-height: 1.35;
}
.geste svg { width: 22px; height: 22px; flex: none; color: var(--repere); }

/* --- Grille ----------------------------------------------------------- */

.grille-cadre {
  background: #fff;
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon);
  padding: calc(var(--u) * 2);
  touch-action: none;                 /* le doigt déplace le point, pas la page */
}
#grille { display: block; width: 100%; height: auto; }

.grille-pied {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: center; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 3);
}
.echelle { border: 0; padding: 0; margin: 0; display: flex; align-items: center; gap: calc(var(--u) * 3); }
.echelle legend {
  float: left; padding: 0 calc(var(--u) * 2) 0 0;
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-douce);
}
.echelle label, .legende-traits { font-size: 13px; color: var(--encre-douce); }
.echelle-aide {
  flex-basis: 100%; margin: 6px 0 0; font-size: 12px; color: var(--encre-douce);
  max-width: 62ch;
}
.echelle { flex-wrap: wrap; }
.echelle label { display: inline-flex; align-items: center; gap: 6px; }
.legende-traits { display: flex; align-items: center; gap: var(--u); margin: 0; }
.trait-plein, .trait-pointille {
  display: inline-block; width: 26px; height: 0;
  border-top: 2px solid var(--encre-douce); margin: 0 4px 0 10px;
}
.trait-pointille { border-top-style: dotted; border-top-width: 2.5px; }

/* --- Contraintes de chantier ------------------------------------------ */

.chantier, .ecartees {
  border: 1px solid var(--filet-fort); border-radius: var(--rayon);
  background: var(--papier-creux);
}
.ecartees { margin-bottom: calc(var(--u) * 4); }
/* Tant qu'aucune contrainte n'est posée, le résumé le dit franchement :
   « aucune » se lisait comme un réglage neutre, pas comme un constat. */
.chantier > summary { gap: calc(var(--u) * 2); }
.chantier > summary em { margin-left: auto; text-align: right; }
.chantier:not([open]) > summary em[data-vide="oui"] { color: var(--allege); }
.chantier > summary, .ecartees > summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--u);
  padding: calc(var(--u) * 3); cursor: pointer;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
}
.chantier > summary em, .ecartees > summary em {
  font-family: var(--mono); font-style: normal; font-weight: 400;
  color: var(--encre-douce); font-size: 12px;
}
summary:focus-visible { outline: 2px solid var(--repere); outline-offset: -2px; }

.chantier-corps {
  padding: 0 calc(var(--u) * 3) calc(var(--u) * 3);
  display: grid; gap: calc(var(--u) * 2);
}
.champ { display: flex; align-items: baseline; gap: var(--u); }
.champ > span { flex: 1; font-size: 13px; }
.champ input[type="number"] {
  width: 5.5ch; font-family: var(--mono); font-size: 15px; text-align: right;
  border: 0; border-bottom: 1.5px solid var(--filet-fort); background: transparent;
  padding: 1px 0;
}
.champ input:focus-visible { outline: 2px solid var(--repere); outline-offset: 2px; }
.champ em { font-family: var(--mono); font-style: normal; font-size: 12px; color: var(--encre-douce); width: 1.5ch; }
.champ-groupe { border: 0; padding: 0; margin: var(--u) 0 0; display: flex; flex-wrap: wrap; gap: var(--u) calc(var(--u) * 3); }
.champ-groupe legend { font-size: 13px; padding: 0 0 var(--u); }
.champ-groupe label, .champ-case { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.champ-case { margin-top: var(--u); }
.bouton-discret {
  justify-self: start; margin-top: var(--u);
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--encre-douce);
  text-decoration: underline; text-underline-offset: 3px;
}

/* --- Réglages de chantier --------------------------------------------- */
/* Sur le terrain, personne ne connaît la pente en degrés. On propose des
   paliers nommés — qui valent le pire cas de leur tranche, donc du côté de la
   sûreté — et un curseur pour affiner quand la valeur est connue. */

.reglage { padding: calc(var(--u) * 2) 0; border-bottom: 1px solid var(--filet); }
.reglage:last-of-type { border-bottom: 0; }
.reglage-tete {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--u); margin-bottom: calc(var(--u) * 2);
}
.reglage-tete span { font-size: 13px; font-weight: 500; }
.reglage-tete output {
  font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--encre);
}
.reglage-tete output[data-vide="oui"] { font-weight: 400; color: var(--encre-douce); }

.paliers { display: flex; flex-wrap: wrap; gap: 5px; }
.paliers button {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font: inherit; font-size: 12px; line-height: 1.2;
  padding: 5px 9px; min-height: 40px; justify-content: center;
  background: #fff; color: var(--encre);
  border: 1.5px solid var(--filet-fort); border-radius: var(--rayon);
  cursor: pointer;
}
.paliers button em {
  font-family: var(--mono); font-style: normal; font-size: 10.5px;
  color: var(--encre-douce);
}
.paliers button:hover { border-color: var(--encre-douce); }
.paliers button[aria-pressed="true"] {
  background: var(--encre); color: #fff; border-color: var(--encre);
}
.paliers button[aria-pressed="true"] em { color: #C9C6C0; }
.paliers button:focus-visible { outline: 2px solid var(--repere); outline-offset: 2px; }

.reglage input[type="range"] {
  width: 100%; margin: calc(var(--u) * 2) 0 0; accent-color: var(--encre);
  height: 26px;
}
.reglage input[type="range"]:focus-visible { outline: 2px solid var(--repere); outline-offset: 2px; }
.reglage input[type="range"].inactif { opacity: .45; }

/* --- Compteur --------------------------------------------------------- */

.compteur {
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--encre-douce);
  padding-bottom: calc(var(--u) * 2);
  border-bottom: 1px solid var(--filet);
  margin-bottom: calc(var(--u) * 3);
}

/* --- Cartouches machine ----------------------------------------------- */
/* Le filet vertical épais reprend le repère de cote du dessin technique.
   Pas d'aplat franc : sept aplats colorés feraient un damier illisible. */

.cartouches { display: grid; gap: calc(var(--u) * 2); }

.cartouche {
  --teinte: var(--hors);
  --fond: var(--hors-clair);
  border: 1px solid var(--filet-fort);
  border-left: 12px solid var(--teinte);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  background: var(--fond);
  padding: calc(var(--u) * 3);
}
.cartouche[data-verdict="tous_paliers"]   { --teinte: var(--atteint); --fond: var(--atteint-clair); }
.cartouche[data-verdict="paliers_legers"] { --teinte: var(--allege);  --fond: var(--allege-clair); }
.cartouche[data-verdict="hors_portee"]    { --teinte: var(--hors);    --fond: var(--hors-clair); }
.cartouche[data-verdict="tous_paliers"] h3,
.cartouche[data-verdict="paliers_legers"] h3 { color: var(--teinte); }
.cartouche[data-verdict="hors_portee"] h3,
.cartouche[data-verdict="hors_portee"] .valeur { color: var(--encre-douce); }

.cartouche-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--u); }
.cartouche h3 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.25; }
.cartouche-famille {
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--encre-douce);
}
/* Pastille pleine plutôt que du texte teinté : c'est ce qui se voit en
   premier quand on balaie la colonne du regard. */
.verdict {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  background: var(--teinte); color: #fff;
  padding: 4px 9px; border-radius: 2px;
  white-space: nowrap; flex: none;
}

.cartouche-cotes {
  display: flex; flex-wrap: wrap; gap: var(--u) calc(var(--u) * 5);
  margin: calc(var(--u) * 2) 0 0;
}
.cartouche-cotes div { display: flex; flex-direction: column; }
.cartouche-cotes .etiq {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--encre-douce);
}
.cartouche-cotes .valeur { font-family: var(--mono); font-size: 16px; font-weight: 600; }

.mention-limite {
  margin: calc(var(--u) * 2) 0 0; padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
  border-left: 3px solid var(--teinte); background: #fff;
  font-size: 12.5px; color: var(--encre);
}
.a-verifier { margin: calc(var(--u) * 2) 0 0; font-size: 12px; color: var(--encre-douce); }
.a-verifier strong { color: var(--allege); font-weight: 600; }

.cartouche-pied { display: flex; align-items: center; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 3); }

.bouton-courbe {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  background: #fff; color: var(--encre);
  border: 1.5px solid var(--encre); border-radius: var(--rayon);
  padding: 5px 11px; min-height: 34px;
}
.bouton-courbe[aria-pressed="true"] { background: var(--encre); color: #fff; }
.bouton-courbe:focus-visible { outline: 2px solid var(--repere); outline-offset: 2px; }
.pastille { width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: none; }
.bouton-courbe[aria-pressed="true"] .pastille { background: var(--couleur-courbe, #fff); }

.details-alertes { margin-top: calc(var(--u) * 2); }
.details-alertes > summary { font-size: 12px; color: var(--encre-douce); cursor: pointer; }
.details-alertes ul { margin: var(--u) 0 0; padding-left: calc(var(--u) * 4); font-size: 12px; color: var(--encre-douce); }
.details-alertes li { margin-bottom: var(--u); }

/* --- Écartées et avertissement ---------------------------------------- */

.ecartees ul { margin: 0; padding: 0 calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 7); font-size: 13px; }
.ecartees li { margin-bottom: var(--u); color: var(--encre-douce); }
.ecartees li strong { color: var(--encre); font-weight: 600; }

.avertissement {
  margin: calc(var(--u) * 4) 0 0; padding-top: calc(var(--u) * 3);
  border-top: 1px solid var(--filet);
  font-size: 12px; color: var(--encre-douce);
}

.vide { padding: calc(var(--u) * 6) calc(var(--u) * 3); text-align: center; color: var(--encre-douce); font-size: 14px; }