/* O1–O13, H1–H5 : réemploi exclusif des tailles, surfaces et verdicts du produit. */
#outils-applications, #outils-sur-mesure { min-width: 0; }
#outils-applications { display: flex; flex-direction: column; gap: var(--espace-3); }
#tools .outils-tete { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--espace-4); }
.outils-tete h1 { margin-right: auto; }
.outils-tete .niveaux { margin: 0; }
.sm-grille { display: grid; grid-template-columns: minmax(220px, 30%) minmax(0, 1fr); gap: var(--espace-5); align-items: start; }
.sm-panneau { display: flex; flex-direction: column; gap: var(--espace-4); min-width: 0; min-height: 640px; }
.sm-panneau h2 { font-size: var(--t-titre-vue); line-height: var(--i-titre-vue); }
.sm-pile, .sm-form, .sm-traces { display: flex; flex-direction: column; gap: var(--espace-3); min-width: 0; }
.sm-entete { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--espace-3); }
.sm-entete > div:first-child { flex: 1; min-width: 0; }
.sm-deux { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--espace-3); align-items: start; }
.sm-trois { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--espace-2); }
.sm-large { grid-column: 1 / -1; }
.sm-ligne { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--espace-1) var(--espace-2); text-align: left; }
.sm-ligne > strong { grid-column: 1 / -1; }
.sm-ligne > .pastille { justify-self: end; font-size: var(--t-aide); }
.sm-ligne[aria-current="true"] { border-color: var(--border-controle); box-shadow: var(--ombre-case); background: var(--case-reflet), var(--bg-hover); }
.sm-bloc, .sm-operation, .sm-cas { min-width: 0; padding: var(--espace-4); border-radius: var(--rayon-case); background: var(--bg-hover); display: flex; flex-direction: column; gap: var(--espace-3); }
.sm-operation { border: 1px solid var(--border-subtle); }
.sm-operation > summary, .sm-cas > summary { cursor: pointer; }
.sm-cas > summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espace-2); }
.sm-cas > summary .hint { width: 100%; }
.sm-cas[open] { grid-column: 1 / -1; }
.sm-valeur { min-width: 0; background: var(--bg-surface); border-radius: var(--rayon-controle); padding: var(--espace-3); overflow-wrap: anywhere; }
.sm-paires { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(140px,100%),1fr)); gap: var(--espace-3); margin: 0; }
.sm-paires dt { font-size: var(--t-aide); color: var(--text-secondary); }
.sm-paires dd { margin: var(--espace-1) 0 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.sm-chiffres dd { font-size: var(--t-titre-vue); font-weight: var(--g-gras); line-height: var(--i-titre-vue); }
.sm-form :is(input:not([type="checkbox"]),select,textarea), .sm-frise-mobile select { width: 100%; min-width: 0; min-height: var(--controle-h); padding: var(--espace-2) var(--espace-3); border: 1px solid var(--border-controle); border-radius: var(--rayon-controle); background: var(--bg-surface); color: var(--text-primary); font: inherit; font-size: var(--t-texte); }
.sm-form input[type="checkbox"] { accent-color: var(--text-primary); }
.sm-form fieldset { border: 0; padding: 0; min-width: 0; }
.sm-form label { font-size: var(--t-nom); }
.sm-form .champ { display: flex; flex-direction: column; gap: var(--espace-2); min-width: 0; }
.sm-form textarea { resize: vertical; }
.sm-form input[type="date"] { color-scheme: dark; }
.sm-form > .btn { align-self: flex-start; }
.sm-onglets { flex-wrap: wrap; row-gap: var(--espace-1); }
.sm-onglets .onglet { flex: 0 1 auto; white-space: normal; }
.sm-operations { flex-wrap: wrap; max-width: 100%; }
.sm-operations button { white-space: normal; min-width: 0; }
.sm-code { font: inherit; font-size: var(--t-texte); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
.sm-points { padding-left: var(--espace-5); }
.sm-decomptes { display: flex; flex-wrap: wrap; gap: var(--espace-2); }
.sm-cas-echec { border-color: var(--etat-echec); }
.sm-panne, #creation-outil .case.bandeau { background: var(--bg-surface); }
.sm-vide { text-align: center; padding: var(--espace-6); }
.sm-activite { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: var(--espace-2); }
.sm-resultat-fil { max-width: 100%; display: flex; flex-direction: column; gap: var(--espace-2); }
.msg--user .sm-resultat-fil > p { padding: 0; background: none; box-shadow: none; border: 0; white-space: pre-wrap; }
.sm-resultat-fil .sm-chiffres dd { font-size: var(--t-titre-case); line-height: var(--i-titre-case); }
#fiche-outils-sur-mesure { display: flex; flex-direction: column; gap: var(--espace-3); }
[data-sm-action="retour"], .sm-frise-mobile { display: none; }
/* Une seule création est visible ; l'entretien conserve ses 360 px sur les grands écrans. */
#main:not([data-view="creation-outil"]) > #creation-outil { display: none; }
#main[data-view="creation-outil"] > :not(#creation-outil) { display: none; }
#main[data-view="creation-outil"] #creation-outil { display: flex; flex: 1; min-width: 0; min-height: 0; width: 100%; padding: var(--espace-5); gap: var(--espace-5); }
#main[data-view="creation-outil"]:has(#creation-outil:not(.creation--large)) { flex: 0 1 var(--largeur-fil); margin-inline: auto; }
#creation-outil { font-size: var(--t-texte); line-height: var(--i-texte); overflow-wrap: anywhere; }
#creation-outil .creation__entretien { width: 360px; }
#creation-outil:not(.creation--large) .creation__entretien { width: 100%; }
#outil-demarrage { display: flex; flex-direction: column; gap: var(--espace-3); }
#outil-demarrage h2 { font-size: var(--t-titre-case); line-height: var(--i-titre-case); }
#canevas-outil { flex: 1; min-width: 0; }
#decision-outil { display: flex; flex-direction: column; gap: var(--espace-3); }
#creation-outil .sm-frise { gap: var(--espace-2); padding: var(--espace-3); background: var(--bg-surface); border-radius: var(--rayon-case); }
#creation-outil .frise__etape { gap: var(--espace-1); }
#creation-outil .frise__etape::after { display: none; }
#creation-outil .frise__etape > * { gap: var(--espace-1); }
#creation-outil .frise__pastille { width: var(--espace-6); height: var(--espace-6); flex: none; }
#creation-outil .frise__etape.is-active .frise__pastille { color: var(--text-primary); background: var(--bg-hover); border-color: var(--border-controle); }
#creation-outil .sm-traces .btn { background: var(--bg-surface); text-align: left; justify-content: flex-start; font-size: var(--t-aide); }
#creation-outil .sm-cas .btn { align-self: flex-start; }
#creation-outil .sm-trois .sm-bloc { padding: var(--espace-3); }
#creation-outil .sm-trois .sm-paires { grid-template-columns: minmax(0,1fr); }
#creation-outil .sm-trois .sm-chiffres dd { font-size: var(--t-titre-case); line-height: var(--i-titre-case); }
@media (max-width: 1250px) {
  #creation-outil .sm-etape-nom { display: none; }
  #creation-outil .is-active .sm-etape-nom { display: inline; }
  #creation-outil .creation__entretien { width: 320px; }
  .sm-ligne { grid-template-columns: minmax(0,1fr); }
  .sm-ligne > .pastille { justify-self: start; }
}
@media (max-width: 1100px) {
  #main[data-view="creation-outil"] { padding-bottom: 100px; }
  #main[data-view="creation-outil"] #creation-outil { overflow-y: auto; align-items: flex-start; padding-bottom: var(--espace-5); }
  #creation-outil .creation__entretien { position: static; min-height: 620px; }
  #creation-outil .creation__fil, #creation-outil .creation__pile, #canevas-outil { overflow: visible; max-height: none; }
  #creation-outil .saisie { position: fixed; bottom: 28px; left: 116px; right: 116px; z-index: 3; }
  #creation-outil .creation__pile { flex: none; }
  #creation-outil .sm-deux, #creation-outil .sm-trois { grid-template-columns: minmax(0,1fr); }
  .sm-grille { grid-template-columns: minmax(200px,28%) minmax(0,1fr); gap: var(--espace-4); }
  .sm-panneau { padding: var(--espace-4); }
  .sm-panneau .sm-deux { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 640px) {
  #tools .outils-tete { gap: var(--espace-2); }
  .outils-tete #outils-familles { order: 3; width: 100%; }
  .sm-grille { grid-template-columns: minmax(0,1fr); }
  #outils-sur-mesure:not(.sm--detail) #sm-panneau:has(#sm-contenu) { display: none; }
  .sm--detail #sm-liste { display: none; }
  .sm--detail [data-sm-action="retour"] { display: inline-flex; align-self: flex-start; }
  .sm-panneau { min-height: 0; }
  #sm-panneau:has(.sm-vide) { min-height: 0; }
  .sm-deux, .sm-trois, .sm-paires { grid-template-columns: minmax(0,1fr); }
  .sm-bloc, .sm-operation, .sm-cas { padding: var(--espace-3); }
  .sm-chiffres .sm-valeur { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espace-2); }
  .sm-chiffres dd { font-size: var(--t-titre-case); line-height: var(--i-titre-case); }
  #main[data-view="creation-outil"] #creation-outil { display: flex; flex-direction: column; padding: var(--espace-3); }
  #creation-outil .creation__entretien { width: 100%; min-height: 0; display: contents; }
  #creation-outil .creation__tete { order: 0; width: 100%; }
  #creation-outil .creation__fil { order: 2; width: 100%; flex: none; }
  #creation-outil .creation__pile { order: 3; width: 100%; }
  #canevas-outil { order: 1; width: 100%; flex: none; }
  #creation-outil .saisie { left: 20px; right: 20px; bottom: 20px; }
  #creation-outil .sm-frise { display: none; }
  .sm-frise-mobile { display: block; }
  #creation-outil .canevas__agent { padding: var(--espace-3); }
  .sm-form .actions > .btn { width: 100%; }
}

.sm-etat::before { content: none; }

/* Suivi de fabrication : barre indéterminée, étape en cours pulsée, chrono. */
.fab-suivi { display: grid; gap: var(--espace-3); margin-top: var(--espace-2); }
.fab-barre { height: 4px; border-radius: 0; background: var(--border-subtle); overflow: hidden; position: relative; }
.fab-barre::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 35%; background: var(--accent); animation: fab-glisse 1.6s ease-in-out infinite; }
@keyframes fab-glisse { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.fab-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espace-2); }
.fab-etape { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: var(--espace-2); color: var(--text-secondary); }
.fab-etape--en_cours, .fab-etape--fait { color: var(--text-primary); }
.fab-etape--en_cours .fab-texte { font-weight: var(--g-moyen); }
.fab-signe { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: var(--t-aide); border: 1px solid var(--border-controle); }
.fab-etape--fait .fab-signe { color: var(--etat-reussi); border-color: var(--etat-reussi); }
.fab-etape--en_cours .fab-signe { border: 2px solid var(--border-subtle); border-top-color: var(--accent); animation: fab-tourne .9s linear infinite; }
@keyframes fab-tourne { to { transform: rotate(360deg); } }
.fab-detail { font-size: var(--t-aide); color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) {
  .fab-barre::after { animation: none; width: 100%; opacity: .35; }
  .fab-etape--en_cours .fab-signe { animation: none; border-color: var(--accent); }
}


/* Étape Contrôle : verdict expliqué, relecture en points lisibles, vérifications en colonnes. */
.sm-verdict { display: grid; gap: var(--espace-1); }
.sm-verdict-titre { font-size: var(--t-titre-case); font-weight: var(--g-gras); }
.sm-controle { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--espace-3); align-items: start; }
.sm-controle h3 { font-size: var(--t-texte); font-weight: var(--g-moyen); margin: 0 0 var(--espace-3); }
.sm-constat-bloc { display: grid; gap: var(--espace-2); justify-items: start; }
.sm-constat-bloc + .sm-constat-bloc { margin-top: var(--espace-4); padding-top: var(--espace-4); border-top: 1px solid var(--border-subtle); }
.sm-constat { margin: 0; padding-left: 20px; display: grid; gap: var(--espace-2); font-size: var(--t-texte); line-height: 1.55; color: var(--text-primary); overflow-wrap: anywhere; }
.sm-regles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espace-2); font-size: var(--t-texte); }
.sm-regle { display: grid; gap: 2px; }
.sm-regle--bloque > span:first-child { color: var(--etat-echec); }
.sm-regle--attention > span:first-child { color: var(--etat-attention); }
@media (max-width: 1100px) { .sm-controle { grid-template-columns: 1fr; } }

/* Points à trancher (planches PT1–PT6) : une case par point, le point ouvert en détail, une décision à la fois. */
.sm-point { display: flex; flex-direction: column; gap: var(--espace-3); min-width: 0; }
.sm-point--ouvert { border-color: var(--border-controle); }
.sm-point-tete { display: flex; align-items: flex-start; gap: var(--espace-3); }
.sm-point-tete h3 { font-size: var(--t-titre-case); font-weight: var(--g-gras); margin: 0; }
.sm-point .repere { margin: 0 0 var(--espace-1); }
.sm-point--ligne { flex-direction: row; align-items: center; gap: var(--espace-3); padding-block: var(--espace-3); }
.sm-point--ligne > div { flex: 1; min-width: 0; }
.sm-point--ligne .pastille, .sm-point-tete .pastille { flex: none; }
.sm-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--espace-3); }
.sm-option { min-width: 0; padding: var(--espace-4); border-radius: var(--rayon-case); background: var(--bg-hover); display: flex; flex-direction: column; gap: var(--espace-1); }
.sm-option h4 { margin: 0; font-size: var(--t-nom); font-weight: var(--g-moyen); }
.sm-option-resultat { font-size: var(--t-titre-vue); line-height: var(--i-titre-vue); font-weight: var(--g-gras); margin: var(--espace-1) 0; }
.sm-recap { display: flex; flex-direction: column; gap: var(--espace-2); }
.sm-recap h3 { font-size: var(--t-titre-case); margin: 0; }
.sm-recap-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espace-2); }
.sm-verrou-ligne { display: flex; align-items: center; gap: var(--espace-2); color: var(--text-secondary); margin: 0; }
.sm-verrou { flex: none; vertical-align: -2px; }
.frise__etape.is-verrouillee .frise__pastille { color: var(--text-secondary); }
.sm-origine { font-size: var(--t-aide); color: var(--text-secondary); margin: 0; }
.sm-choix-point fieldset { display: grid; gap: var(--espace-2); margin: 0; }
.sm-radio { display: flex; align-items: center; gap: var(--espace-2); min-height: var(--controle-h); padding: var(--espace-2) var(--espace-3); border: 1px solid var(--border-controle); border-radius: var(--rayon-controle); background: var(--bg-surface); cursor: pointer; }
.sm-radio:has(input:checked) { border-color: var(--text-primary); }
.sm-form .sm-radio input[type="radio"] { accent-color: var(--text-primary); margin: 0; width: auto; min-height: 0; padding: 0; flex: none; }
.sm-choix-point > .btn { align-self: stretch; }
.sm-precision summary { cursor: pointer; font-size: var(--t-aide); color: var(--text-secondary); }
@media (max-width: 640px) { .sm-point--ligne { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .sm-radio, .sm-point { transition: none; } }
/* Sept étapes : libellés courts sans retour à la ligne ; quand la place manque, seule l'étape en cours garde son nom
   (les autres le portent en aria-label). */
.sm-frise-boite { container-type: inline-size; }
#creation-outil .sm-frise-boite .sm-frise { justify-content: space-between; }
#creation-outil .sm-frise-boite .sm-frise .frise__etape { flex: 0 1 auto; min-width: auto; }
#creation-outil .sm-frise-boite .sm-frise :is(button, .sm-etape-nom) { white-space: nowrap; }
@container (max-width: 760px) {
  #creation-outil .sm-frise .frise__etape:not(.is-active) .sm-etape-nom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}