/* Garde-robe — Simulation d'une tenue (htdocs/assets/garderobe/simulation.css), lot compositeur.
   Cahier « quantités + compositeur » § 7.10, 7.11 ; plusieurs images à la fois (.sm-serie, .sm-tuile, 19/10/2026).
   Racines : la feuille « Simuler la tenue » (.sm-feuille),
   la visionneuse (.sm-visionneuse), la galerie d'une fiche de tenue (.sm-galerie, dans .tn-feuille), la page
   Réglages › Simulation (.sm-r-*, dans .ec-reglages). Les images générées sont des photos : sur le tirage, en
   multiply, coins de tirage. Couleurs : jetons. */

/* ---------------- Commun ---------------- */
.sm-tourne { animation: sm-tourne 800ms linear infinite; }
@keyframes sm-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sm-tourne { animation-duration: 2400ms; } }
.sm-environ { width: 14px; height: 14px; vertical-align: -2px; margin-right: 1px; }
/* Un coût (« 0,034 $ », le texte des Tools tel quel) ne se coupe jamais de son unité. */
.sm-somme { white-space: nowrap; }
.sm-corps { display: flex; flex-direction: column; gap: 24px; padding: 4px 0 8px; min-width: 0; }
.sm-alerte {
    display: flex; gap: 8px; align-items: flex-start; margin: 0 var(--gr-marge); padding: 12px 14px; border-radius: var(--r-ctrl);
    background: var(--gr-danger-doux); color: var(--gr-danger); font: 500 15px/21px var(--gr-sans); overflow-wrap: anywhere;
}
.sm-alerte > .g-ic, .sm-motif > .g-ic, .sm-avant > .g-ic, .sm-r-erreur > .g-ic { flex: none; margin-top: 1px; }
.sm-legende { margin: 0 var(--gr-marge); font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sm-legende + .sm-legende { margin-top: -20px; }
.sm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 var(--gr-marge); }
.sm-actions > .g-bouton.texte { margin-left: -12px; }
.sm-actions > .g-bouton.petit + .g-bouton.texte { margin-left: 0; }

/* ---------------- La feuille « Simuler la tenue » ---------------- */
.sm-feuille .g-feuille-pied { flex-direction: column; align-items: stretch; gap: 6px; }
/* En colonne, le flex: 1 des boutons du pied (socle) les aplatirait : ils gardent leur hauteur. */
.sm-feuille .g-feuille-pied > .g-bouton { flex: 0 0 auto; }
.sm-feuille .sm-statut { margin: 0; font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); text-align: center; overflow-wrap: anywhere; }
.sm-feuille .g-squelette.ligne { margin-left: var(--gr-marge); }
.sm-feuille .sm-motif { display: flex; gap: 8px; align-items: flex-start; margin: 8px var(--gr-marge) 0; font: 500 15px/21px var(--gr-sans); color: var(--gr-texte-2); }
.sm-feuille .sm-apercu { display: flex; align-items: center; gap: 12px; margin: 0 var(--gr-marge); }
.sm-feuille .sm-planche { flex: none; width: 72px; }
.sm-feuille .sm-planche > .g-planche { width: 72px; padding: 6px; }
.sm-feuille .sm-resume { margin: 0; min-width: 0; font: 500 15px/20px var(--gr-sans); font-variant-numeric: tabular-nums; }
.sm-feuille .sm-champs { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.sm-feuille .sm-champs:disabled { opacity: .55; }
.sm-feuille .sm-section { display: flex; flex-direction: column; gap: 10px; margin: 0 var(--gr-marge); min-width: 0; }
.sm-feuille .sm-titre { margin: 0; font: 600 15px/20px var(--gr-sans); }
.sm-feuille .sm-aide, .sm-feuille .sm-consigne .sm-aide { margin: 0; font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); }
.sm-feuille .sm-aide a { color: var(--gr-texte); font-weight: 600; text-underline-offset: 3px; }
/* Un lien dans une phrase de 13 px : la zone touchable monte à 44 (le padding d'une boîte en ligne ne déplace
   pas les lignes), sans couper la phrase. */
.sm-feuille .sm-aide a { padding: 14px 0; }
.sm-feuille .sm-libre > input { width: 100%; }
.sm-feuille .g-erreur[hidden] { display: none; }
.sm-feuille .sm-cases { display: flex; flex-direction: column; }
.sm-feuille .sm-groupe { background: var(--gr-surface-2); }
.sm-feuille .sm-groupe .g-valeur { max-width: 65%; }
.sm-feuille .sm-cout { margin: 0 var(--gr-marge); font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); font-variant-numeric: tabular-nums; }
.sm-feuille .sm-plafond { display: block; margin: -16px var(--gr-marge) 0; font: 500 13px/18px var(--gr-sans); color: var(--gr-attention); overflow-wrap: anywhere; }
.sm-feuille .sm-plafond > .g-ic { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }
.sm-feuille [aria-busy="true"] { opacity: .6; transition: opacity var(--d-court); }
/* La consigne envoyée : repliée ; le prompt en chasse fixe, coupé à la largeur. */
.sm-feuille .sm-consigne { margin: 0 var(--gr-marge); font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); }
.sm-feuille .sm-consigne > summary {
    list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer;
    color: var(--gr-texte); font: 600 15px/20px var(--gr-sans); border-radius: var(--r-ctrl);
}
.sm-feuille .sm-consigne > summary::-webkit-details-marker { display: none; }
.sm-feuille .sm-consigne-ic { width: 16px; height: 16px; transition: transform var(--d-court) var(--c-standard); }
.sm-feuille .sm-consigne[open] .sm-consigne-ic { transform: rotate(90deg); }
.sm-feuille .sm-prompt {
    margin: 4px 0 12px; padding: 12px; border-radius: var(--r-ctrl); background: var(--gr-surface-2); color: var(--gr-texte);
    font: 400 13px/18px var(--gr-mono); white-space: pre-wrap; overflow-wrap: anywhere;
}
.sm-feuille .sm-images { margin: 0 0 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; }
.sm-feuille .sm-distante { color: var(--gr-texte-3); }
/* Le résultat : l'image en largeur pleine (3:4), bornée à la hauteur de l'écran. */
.sm-feuille .sm-resultat { gap: 16px; }
.sm-image, .sm-v-image {
    position: relative; margin: 0 auto; width: 100%; max-width: min(100%, calc(70dvh * 3 / 4)); aspect-ratio: 3 / 4;
    background: var(--gr-tirage); border-radius: var(--r-tirage); overflow: hidden;
}
.sm-image > img, .sm-v-image > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; mix-blend-mode: multiply; }
.sm-image > img { object-fit: cover; }

/* ---------------- La galerie (fiche d'une tenue) ---------------- */
.sm-galerie { list-style: none; margin: 0 var(--gr-marge); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 1024px) { .sm-galerie { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sm-vignette {
    position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; padding: 0; border: 0; cursor: zoom-in; overflow: hidden;
    background: var(--gr-tirage); border-radius: var(--r-tirage); -webkit-tap-highlight-color: transparent;
    transition: transform var(--d-instant) var(--c-standard);
}
.sm-vignette:active { transform: scale(.97); }
.sm-vignette:focus-visible { outline: 2px solid var(--gr-focus); outline-offset: 3px; }
.sm-vignette > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; display: block; }
/* L'image de la tenue : une étoile dans une pastille de verre, en haut à droite. */
.sm-etoile {
    position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 12px; display: grid; place-items: center;
    background: var(--gr-verre); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--gr-texte);
}
.sm-etoile > .g-ic { width: 16px; height: 16px; }

/* ---------------- Plusieurs images à la fois (19/10/2026) ----------------
   La série d'une feuille (.sm-serie : l'avancement « 2 sur 3 prêtes », une vignette par image, les échecs), et les
   vignettes qui attendent (.sm-tuile : en route, ou échouée) — dans la feuille comme dans la galerie d'une fiche. */
.sm-serie { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sm-serie[hidden] { display: none; }
.sm-progres { margin: 0 var(--gr-marge); font: 600 15px/20px var(--gr-sans); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sm-progres:empty { display: none; }
.sm-echec { display: flex; gap: 8px; align-items: flex-start; margin: 0 var(--gr-marge); font: 500 13px/18px var(--gr-sans); color: var(--gr-danger); overflow-wrap: anywhere; }
.sm-echec > .g-ic { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.sm-tuile {
    position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 4; overflow: hidden;
    border-radius: var(--r-tirage); background: var(--gr-tirage); color: var(--gr-texte-2);
}
.sm-tuile > .sm-tuile-fond { position: absolute; inset: 0; width: 100%; height: 100%; }
.sm-tuile > .g-ic { position: relative; width: 24px; height: 24px; }
.sm-tuile.echec { background: var(--gr-danger-doux); color: var(--gr-danger); }
.sm-tuile-texte { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 600 13px/16px var(--gr-sans); text-align: center; }
.sm-tuile-texte > .g-ic { width: 24px; height: 24px; }
.sm-feuille .sm-resultats { gap: 16px; }
.sm-feuille .sm-resultats > .sm-aide { margin: -4px var(--gr-marge) 0; }

/* ---------------- La visionneuse ---------------- */
.sm-visionneuse .sm-v { gap: 16px; }
.sm-v-image { width: calc(100% - 2 * var(--gr-marge)); max-width: min(calc(100% - 2 * var(--gr-marge)), calc(70dvh * 3 / 4)); touch-action: pan-y; }
.sm-v-image > img { object-fit: contain; }
.sm-v-nav { display: flex; align-items: center; justify-content: center; gap: 8px; margin: -8px var(--gr-marge) 0; }
.sm-v-position { min-width: 64px; text-align: center; font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); font-variant-numeric: tabular-nums; }
.sm-avant { display: flex; gap: 8px; align-items: flex-start; margin: -8px var(--gr-marge) 0; font: 500 13px/18px var(--gr-sans); color: var(--gr-attention); }
.sm-avant > .g-ic { width: 16px; height: 16px; }

/* ---------------- Réglages › Simulation ---------------- */
.sm-r-titre { margin-top: 0; }
.sm-r-titre ~ .sm-r-titre { margin-top: 32px; }
.sm-r-photos { list-style: none; margin: 4px var(--gr-marge) 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.sm-r-photo { position: relative; width: 96px; aspect-ratio: 3 / 4; border-radius: var(--r-tirage); background: var(--gr-tirage); overflow: hidden; }
.sm-r-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; display: block; }
.sm-r-retirer { position: absolute; top: 4px; right: 4px; }
.sm-r-ajouter {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 96px; aspect-ratio: 3 / 4; padding: 8px;
    border: 1.5px dashed var(--gr-ligne-forte); border-radius: var(--r-tirage); background: none; color: var(--gr-texte-2); cursor: pointer;
    font: 500 13px/16px var(--gr-sans); text-align: center;
}
.sm-r-ajouter > .g-ic { width: 24px; height: 24px; color: var(--gr-texte); }
.sm-r-ajouter[aria-disabled="true"] { cursor: progress; }
.sm-r-ajouter:focus-visible { outline: 2px solid var(--gr-focus); outline-offset: 2px; }
@media (hover: hover) { .sm-r-ajouter:hover { border-color: var(--gr-texte-2); color: var(--gr-texte); } }
.sm-r-confidentiel { margin: 8px var(--gr-marge) 0; font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); }
.sm-r-select > .g-valeur { color: var(--gr-texte-2); }
.sm-r-bloc { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.sm-r-bloc-titre { margin: 0; font: 600 15px/20px var(--gr-sans); }
.sm-r-bloc-titre ~ .sm-r-bloc-titre { margin-top: 8px; }
.sm-r-espace { margin-top: 12px; }
.sm-r-motif { margin: 0 var(--gr-marge); font: 500 15px/21px var(--gr-sans); color: var(--gr-texte-2); }
/* Non permise, des photos de vous déjà déposées : leur titre se détache du motif (on peut toujours les retirer). */
.sm-r-motif ~ .sm-r-titre { margin-top: 32px; }
.sm-r-erreur {
    display: flex; gap: 8px; align-items: flex-start; margin: 0 var(--gr-marge) 12px; padding: 12px 14px; border-radius: var(--r-ctrl);
    background: var(--gr-danger-doux); color: var(--gr-danger); font: 500 15px/21px var(--gr-sans);
}
.sm-r-marge { margin: 0 var(--gr-marge); }
.sm-r-bloc .g-squelette.ligne { margin-top: 0; }
.sm-confirme { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin: 0; font: 500 15px/20px var(--gr-sans); color: var(--gr-texte-2); }
.sm-confirme > .g-ic { width: 16px; height: 16px; color: var(--gr-texte); }
/* Au bureau (feuille de 520, 86 vh au plus) : l'image laisse voir la légende et les actions sans défiler. Dans la
   visionneuse, les trois actions tiennent sur deux rangées (« Supprimer » passe dessous) : 340 px leur sont gardés. */
@media (min-width: 1024px) {
    .sm-image { max-width: min(100%, calc((86dvh - 260px) * 3 / 4)); }
    .sm-v-image { max-width: min(calc(100% - 2 * var(--gr-marge)), calc((86dvh - 340px) * 3 / 4)); }
}