/* Garde-robe — formulaire de pièce (htdocs/assets/garderobe/formulaire.css), lot C. Cahier des charges § 8.4.
   Racine de l'écran : .ec-formulaire (écran poussé sur mobile, panneau de détail au bureau). Les feuilles
   ouvertes par formulaire.js ont chacune leur racine : .fo-f-palette, .fo-f-lien, .fo-f-ev, .fo-f-sous,
   .fo-f-semblable, et pour « À compléter » .fo-f-champ (un champ seul) et .fo-f-couleurs (la palette seule, sur la base
   de .fo-f-palette). Aucune couleur en dur : tout vient des jetons. */

/* ---------------- Barre haute, corps, pied ---------------- */
.ec-formulaire { position: relative; }
.ec-formulaire .fo-barre { justify-content: flex-start; }
.ec-formulaire .fo-titre { margin: 0; outline: none; }
.ec-formulaire .fo-form {
    display: flex; flex-direction: column; gap: 32px;
    padding: 16px var(--gr-marge) 40px; max-width: 520px; margin: 0 auto;
}
.ec-formulaire .fo-section { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; }
.ec-formulaire .fo-titre-section { margin: 0; font: 400 22px/28px var(--gr-serif); }
.ec-formulaire .fo-titre-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ec-formulaire .fo-aide { margin: 0; font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); }
.ec-formulaire .fo-mini-titre { margin: 0 0 8px; font: 600 15px/20px var(--gr-sans); }
/* « Enregistrer » collé en bas : primaire de 52, pleine largeur, zone de sécurité comprise. */
.ec-formulaire .fo-pied {
    position: sticky; bottom: 0; z-index: var(--z-barre);
    padding: 8px var(--gr-marge) calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--gr-ligne);
}
.ec-formulaire .fo-pied button { display: flex; max-width: 480px; margin: 0 auto; }
/* Un champ focalisé au clavier (Tab, flèches du clavier de l'iPhone) ne passe jamais sous les barres collées :
   le défileur du formulaire (.g-detail, écran poussé ou panneau du bureau) réserve la barre haute (44) + 8 et
   le pied (8 + 52 + 8 + 1 de filet, zone de sécurité comprise) + 8. */
.g-detail:has(> .ec-formulaire:not([hidden])) {
    scroll-padding-top: 52px;
    scroll-padding-bottom: calc(77px + env(safe-area-inset-bottom));
}
.ec-formulaire .fo-tourne, .fo-f-ev .fo-tourne, .fo-f-champ .fo-tourne, .fo-f-couleurs .fo-tourne { animation: fo-tourne 800ms linear infinite; }
@keyframes fo-tourne { to { transform: rotate(360deg); } }

/* Erreur du serveur : en tête du formulaire, jamais en toast. */
.ec-formulaire .fo-alerte {
    display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-ctrl);
    background: var(--gr-danger-doux); color: var(--gr-danger); font: 500 15px/21px var(--gr-sans);
}
.ec-formulaire .fo-alerte svg { margin-top: 1px; flex: none; }
/* « Rempli depuis stockx.com · vérifiez » */
.ec-formulaire .fo-carte-lien {
    display: flex; gap: 10px; align-items: center; margin: 0; padding: 12px 14px; border-radius: var(--r-ctrl);
    background: var(--gr-surface); font: 500 15px/21px var(--gr-sans); color: var(--gr-texte);
}
.ec-formulaire .fo-depart { margin-bottom: -8px; }

/* ---------------- 1. Photo ---------------- */
/* Le tirage carré (335 à 375 px) ; sur un écran bas (SE), il rétrécit pour que le nom reste au premier écran. */
.ec-formulaire .fo-tirage { position: relative; width: min(100%, max(220px, calc(100dvh - 400px))); margin: 0 auto; aspect-ratio: 1; border-radius: var(--r-tirage); overflow: hidden; }
.ec-formulaire .fo-tirage-photo { background: var(--gr-tirage); }
.ec-formulaire .fo-tirage > canvas, .ec-formulaire .fo-tirage > img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; display: block;
}
.ec-formulaire .fo-ajouter-photo { width: 100%; }
.ec-formulaire .fo-outils { width: min(100%, max(220px, calc(100dvh - 400px))); margin: 0 auto; }
.ec-formulaire .fo-outils-photo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: -4px; }
.ec-formulaire .fo-outil {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 4px 2px;
    border: 0; border-radius: var(--r-ctrl); background: none; color: var(--gr-texte); cursor: pointer;
    font: 500 13px/16px var(--gr-sans); text-align: center;
}
.ec-formulaire .fo-outil:active { background: var(--gr-presse); }
.ec-formulaire .danger { color: var(--gr-danger); }
@media (hover: hover) { .ec-formulaire .fo-outil:hover { background: var(--gr-survol); } }

/* ---------------- 2. Nom court et alias ---------------- */
.ec-formulaire .fo-nom { gap: 8px; }
.ec-formulaire .fo-nom > .g-erreur { margin: 0; }
/* La marque sous le nom (20/10/2026) : un champ souligné comme lui, plus petit ; sa liste (GR.autocompletion) flotte
   dessous. L'aide (« Déjà 3 pièces de cette marque ») n'occupe une ligne que si elle a quelque chose à dire. */
.ec-formulaire .fo-marque { margin-top: 4px; }
.gr .ec-formulaire .fo-champ-marque {
    font: 500 17px/24px var(--gr-sans); border: 0; border-bottom: 1px solid var(--gr-ligne-forte); border-radius: 0;
    background: none; padding: 8px 0; box-shadow: none;
}
.gr .ec-formulaire .fo-champ-marque:focus { box-shadow: 0 1px 0 0 var(--gr-texte); border-bottom-color: var(--gr-texte); }
.ec-formulaire .fo-marque-aide:empty { display: none; }
.ec-formulaire .fo-alias { margin-top: 4px; }
.ec-formulaire .fo-alias-puce { cursor: default; padding-right: 2px; gap: 2px; }
.ec-formulaire .fo-alias-x {
    position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
    background: none; color: var(--gr-texte-2); cursor: pointer;
}
.ec-formulaire .fo-alias-x::before { content: ''; position: absolute; inset: -6px; }
.ec-formulaire .fo-alias-x > .g-ic { width: 16px; height: 16px; }
.ec-formulaire .fo-alias-saisie { width: 160px; height: 36px; padding: 0 14px; border-radius: 18px; font-size: 16px; }
.ec-formulaire .fo-reprendre { max-width: 100%; white-space: normal; height: auto; min-height: 36px; padding-block: 6px; text-align: left; line-height: 1.25; }

/* ---------------- 3. Catégorie : puces de 40, sous-catégories dessous ---------------- */
.ec-formulaire .fo-cat { height: 40px; border-radius: 20px; }
.ec-formulaire .fo-sous { display: flex; flex-direction: column; gap: 8px; }
.ec-formulaire .fo-sous-titre { margin: 4px 0 0; font: 600 15px/20px var(--gr-sans); }
.ec-formulaire .fo-sous-titre > span { font-weight: 500; color: var(--gr-texte-2); }
.ec-formulaire .fo-apparait { animation: fo-apparait var(--d-court) var(--c-sortie); }
@keyframes fo-apparait { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------------- 4. Couleurs ---------------- */
.ec-formulaire .fo-compteur { font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); font-variant-numeric: tabular-nums; }
.ec-formulaire .fo-plein { color: var(--gr-attention); }
.ec-formulaire .fo-point { width: 16px; height: 16px; border-radius: 50%; flex: none; background: var(--c1); box-shadow: inset 0 0 0 1px var(--c-encre); }
.ec-formulaire .fo-sugg-puce { padding-right: 10px; }
.ec-formulaire .fo-disques { display: flex; flex-wrap: wrap; gap: 8px 4px; margin: 0; padding: 0; list-style: none; touch-action: pan-y; }
.ec-formulaire .fo-disque-li { display: block; }
.ec-formulaire .fo-disque {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 72px; padding: 2px 0 0;
    border: 0; background: none; color: var(--gr-texte); cursor: grab; border-radius: var(--r-ctrl);
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.ec-formulaire .fo-souleve { z-index: 2; cursor: grabbing; transition: none; }
.ec-formulaire .fo-rond {
    position: relative; display: block; width: 40px; height: 40px; border-radius: 50%; flex: none;
    background: var(--c1); box-shadow: inset 0 0 0 1px var(--c-encre);
}
.ec-formulaire .fo-souleve i { box-shadow: inset 0 0 0 1px var(--c-encre), var(--gr-o-souleve); }
.ec-formulaire .fo-un {
    position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center;
    background: var(--gr-texte); color: var(--gr-inverse); font: 600 10px/1 var(--gr-sans); box-shadow: 0 0 0 2px var(--gr-fond);
}
.ec-formulaire .fo-disque-nom { max-width: 72px; font: 500 13px/16px var(--gr-sans); color: var(--gr-texte-2); text-align: center;
                                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Couleurs fines : le groupe de la palette en second, sous le nom fin (« gris ardoise » / « anthracite »). */
.ec-formulaire .fo-disque-groupe { max-width: 72px; margin-top: -4px; font: 500 11px/14px var(--gr-sans); color: var(--gr-texte-3); text-align: center;
                                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-formulaire .fo-aucune { list-style: none; }
.ec-formulaire .fo-refus { margin: 0; font: 500 13px/18px var(--gr-sans); color: var(--gr-attention); }
.ec-formulaire .fo-refus:empty { display: none; }
.ec-formulaire .fo-tremble, .fo-f-palette .fo-tremble { animation: fo-tremble 240ms linear; }
@keyframes fo-tremble { 0%, 100% { transform: none; } 17%, 50%, 83% { transform: translateX(-4px); } 33%, 67% { transform: translateX(4px); } }

/* ---------------- 5. Détails : <details> de 52, résumé replié ---------------- */
.ec-formulaire .fo-details { margin: 0; }
.ec-formulaire .fo-resume {
    display: flex; align-items: center; gap: 12px; min-height: 52px; cursor: pointer; list-style: none; border-radius: var(--r-ctrl);
}
.ec-formulaire .fo-resume::-webkit-details-marker { display: none; }
.ec-formulaire .fo-resume-titre { font: 400 22px/28px var(--gr-serif); flex: none; }
.ec-formulaire .fo-resume-texte { flex: 1; min-width: 0; text-align: right; font: 500 15px/20px var(--gr-sans); color: var(--gr-texte-2);
                                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-formulaire .fo-resume-chevron { width: 20px; height: 20px; color: var(--gr-texte-3); transition: transform var(--d-court) var(--c-standard); }
.ec-formulaire .fo-chevron-ouvert { transform: rotate(180deg); }
.ec-formulaire .fo-groupe { margin: 8px 0 0; }
.ec-formulaire .fo-rangee { gap: 8px; cursor: text; }
.ec-formulaire .fo-libelle { flex: none; min-width: 72px; }
.ec-formulaire .g-champ-nu { flex: 1 1 auto; width: auto; min-width: 0; height: 47px; }
.ec-formulaire input::-webkit-date-and-time-value { text-align: right; }
.ec-formulaire .fo-suffixe { color: var(--gr-texte-2); margin-left: -2px; }
.ec-formulaire .fo-lien-ic { color: var(--gr-texte-2); }
/* Les champs que le lien a remplis : fond surface-2 qui s'efface en 1,2 s. */
.ec-formulaire .fo-flash { animation: fo-flash 1200ms var(--c-standard); }
@keyframes fo-flash { from { background: var(--gr-surface-2); } to { background: transparent; } }
.ec-formulaire .fo-statut { cursor: default; gap: 8px; padding-block: 6px; }
/* Nombre d'exemplaires : une ligne « Nombre » · minus 44 · valeur 22/600 · plus 44 · unité (« paires » : 52 au moins,
   le compteur ne bouge pas de 1 à 2) ; au rebut, figé, son aide dessous, dans la même rangée. */
.ec-formulaire .fo-nombre { cursor: default; flex-direction: column; align-items: stretch; gap: 0; }
.ec-formulaire .fo-nombre:active { background: none; }
@media (hover: hover) { .ec-formulaire .fo-nombre:hover { background: none; } }
.ec-formulaire .fo-nombre-ligne { display: flex; align-items: center; gap: 8px; min-height: 48px; }
.ec-formulaire .fo-nombre-ligne > .fo-libelle { flex: 1 1 auto; min-width: 0; }
.ec-formulaire .fo-compteur-nb { display: flex; align-items: center; flex: none; }
.ec-formulaire .fo-qte {
    width: 48px; height: 44px; padding: 0 4px; text-align: center; font: 600 22px/1 var(--gr-sans); font-variant-numeric: tabular-nums;
}
.ec-formulaire .fo-unite { flex: none; min-width: 52px; font: 500 15px/20px var(--gr-sans); color: var(--gr-texte-2); }
.ec-formulaire .fo-nombre-aide { padding-bottom: 12px; }
.ec-formulaire .fo-compteur-nb > [aria-disabled="true"], .ec-formulaire .fo-compteur-nb > :disabled { opacity: .35; cursor: default; }

/* ---------------- 3 bis. Rodage (chaussures) : la case « Faites », puis « Elles font encore mal » aligné sur son
   libellé (boîte de 24 + écart de 12, moins le retrait de 12 du bouton texte) ---------------- */
.ec-formulaire .fo-rodage { gap: 4px; }
.ec-formulaire .fo-rodage-corps { display: flex; flex-direction: column; align-items: flex-start; }
.ec-formulaire .fo-case { align-self: stretch; }
.ec-formulaire .fo-encore-mal { margin-left: 24px; }
.ec-formulaire .fo-seg-statut { flex: 0 1 236px; margin-left: auto; min-width: 0; }
.ec-formulaire .fo-statut > .g-valeur { display: inline-flex; align-items: center; gap: 6px; max-width: none; }

/* ---------------- 6. Avant le suivi ---------------- */
.ec-formulaire .fo-environ { display: flex; align-items: center; gap: 4px; }
.ec-formulaire .fo-nb {
    width: 76px; height: 44px; padding: 0 8px; text-align: center; font: 600 22px/1 var(--gr-sans); font-variant-numeric: tabular-nums;
}
.ec-formulaire .fo-environ-unite { margin-left: 8px; font: 500 15px/20px var(--gr-sans); color: var(--gr-texte-2); }

/* ---------------- 8. Supprimer (modification) ---------------- */
.ec-formulaire .fo-supprimer { display: flex; justify-content: center; margin-top: -8px; }

/* =====================================================================
   Feuilles
   ===================================================================== */
.fo-f-sous .fo-f-corps, .fo-f-lien .fo-f-corps, .fo-f-ev .fo-f-corps { display: flex; flex-direction: column; gap: 8px; padding: 0 var(--gr-marge) 8px; }
.fo-f-sous .g-libelle, .fo-f-ev .g-libelle, .fo-f-lien .g-libelle { margin: 8px 0 0; }

/* ---- Palette par famille : grille de 5, disques de 44 ---- */
.fo-f-palette .fo-pal-etat { margin: 0 var(--gr-marge) 4px; font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); font-variant-numeric: tabular-nums; }
.fo-f-palette .fo-plein { color: var(--gr-attention); }
.fo-f-palette .fo-pal-famille { padding: 0 var(--gr-marge); margin-top: 16px; }
.fo-f-palette .fo-pal-titre { margin: 0 0 12px; font: 400 22px/28px var(--gr-serif); }
.fo-f-palette .fo-pal-grille { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 4px; }
.fo-f-palette .fo-pal-c {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none;
    color: var(--gr-texte); cursor: pointer; border-radius: var(--r-ctrl); min-width: 0;
}
.fo-f-palette .fo-pal-c > span { max-width: 100%; font: 500 12px/15px var(--gr-sans); color: var(--gr-texte-2); text-align: center;
                                 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; min-height: 30px; }
.fo-f-palette .fo-rond { display: block; width: 44px; height: 44px; border-radius: 50%; background: var(--c1); box-shadow: inset 0 0 0 1px var(--c-encre);
                         transition: box-shadow var(--d-court) var(--c-standard); }
/* Choisie : anneau encre de 2 px détaché de 2 px. */
.fo-f-palette [aria-pressed="true"] > .fo-rond { box-shadow: inset 0 0 0 1px var(--c-encre), 0 0 0 2px var(--gr-surface), 0 0 0 4px var(--gr-texte); }
.fo-f-palette .fo-pal-c[aria-pressed="true"] > span { color: var(--gr-texte); font-weight: 600; }
/* La principale (la première choisie) : « 1 » sur son disque, comme dans le formulaire. */
.fo-f-palette .fo-rond { position: relative; }
.fo-f-palette .fo-un {
    position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center;
    background: var(--gr-texte); color: var(--gr-inverse); font: 600 10px/1 var(--gr-sans); box-shadow: 0 0 0 2px var(--gr-surface);
}

/* ---- Couleurs fines (19/10/2026) : la recherche d'une nuance, et sous chaque famille les nuances des couleurs choisies ---- */
.fo-f-palette .fo-point { width: 16px; height: 16px; border-radius: 50%; flex: none; background: var(--c1); box-shadow: inset 0 0 0 1px var(--c-encre); }
.fo-f-palette .fo-pal-cherche { display: flex; flex-direction: column; gap: 10px; padding: 0 var(--gr-marge); margin-top: 12px; }
.fo-f-palette .fo-pal-champ { height: 44px; }
.gr .fo-f-palette .fo-pal-champ > input { height: 42px; padding: 0 16px 0 44px; }
.fo-f-palette .fo-pal-trouvees[hidden] { display: none; }
.fo-f-palette .fo-pal-trouvees .fo-aide { margin: 0; font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); }
.fo-f-palette .fo-pal-n { padding: 0 12px 0 10px; }
.fo-f-palette .fo-pal-n-groupe { font: 500 12px/1 var(--gr-sans); color: var(--gr-texte-3); }
.fo-f-palette .fo-pal-n[aria-pressed="true"] .fo-pal-n-groupe { color: inherit; opacity: .72; }
/* Choisie : le point garde sa couleur, cerclé de l'inverse pour se détacher de la puce encre. */
.fo-f-palette .fo-pal-n[aria-pressed="true"] .fo-point { box-shadow: inset 0 0 0 1px var(--c-encre), 0 0 0 2px var(--gr-inverse); }
.fo-f-palette .fo-pal-fines:empty { display: none; }
.fo-f-palette .fo-pal-fines { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.fo-f-palette .fo-pal-fin { padding: 12px; border-radius: var(--r-ctrl); background: var(--gr-surface-2); }
.fo-f-palette .fo-pal-fin .g-puce { background: var(--gr-surface); }
.fo-f-palette .fo-pal-fin .g-puce[aria-pressed="true"] { background: var(--gr-texte); }
.fo-f-palette .fo-pal-fin-titre { margin: 0 0 10px; font: 600 15px/20px var(--gr-sans); }
.fo-f-palette .fo-pal-fin-titre > span { font-weight: 500; color: var(--gr-texte-2); }
.fo-f-palette .fo-apparait { animation: fo-apparait var(--d-court) var(--c-sortie); }
@media (prefers-reduced-motion: reduce) { .fo-f-palette .fo-apparait { animation: none; } }

/* ---- Les couleurs seules (GR.formulaires.couleurs, « À compléter ») : racine .fo-f-couleurs, sur la base de
   .fo-f-palette ; en tête, l'aide, l'état, les couleurs vues sur la photo et la pipette ---- */
.fo-f-couleurs .fo-cs-tete { display: flex; flex-direction: column; gap: 8px; padding: 0 var(--gr-marge); }
.fo-f-couleurs .fo-cs-tete > .g-libelle { margin: 8px 0 0; }
.fo-f-couleurs .fo-cs-aide { margin: -4px 0 0; font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); }
.fo-f-couleurs .fo-cs-tete > .fo-pal-etat { margin: 0; }
.fo-f-couleurs .fo-cs-tete + .fo-pal-etat { margin-top: 16px; }
.fo-f-couleurs .fo-cs-mini { margin: 8px 0 0; font: 600 15px/20px var(--gr-sans); }
.fo-f-couleurs .fo-point { width: 16px; height: 16px; border-radius: 50%; flex: none; background: var(--c1); box-shadow: inset 0 0 0 1px var(--c-encre); }
.fo-f-couleurs .fo-cs-sugg { padding-left: 10px; }
.fo-f-couleurs .fo-ev-alerte { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-ctrl);
                               background: var(--gr-danger-doux); color: var(--gr-danger); font: 500 15px/21px var(--gr-sans); }
.fo-f-couleurs .fo-ev-alerte svg { margin-top: 1px; flex: none; }

/* ---- Un champ seul (GR.formulaires.champ, « À compléter ») : racine .fo-f-champ ; le libellé, le champ (« € » collé
   à droite du prix), l'erreur, l'aide, puis les valeurs déjà connues ---- */
.fo-f-champ .fo-f-corps { display: flex; flex-direction: column; gap: 8px; padding: 0 var(--gr-marge) 8px; }
.fo-f-champ .g-libelle { margin: 8px 0 0; }
.fo-f-champ .fo-ch-saisie { position: relative; display: flex; align-items: center; }
.fo-f-champ .fo-ch-prix > input { padding-right: 36px; }
/* La marque (brancherMarque) : sa liste est dans la feuille, sous le champ, au lieu de flotter (la feuille grandit avec
   elle et ne défile pas en cachant le champ) ; elle remplace les puces « Déjà dans votre garde-robe ». */
.fo-f-champ .fo-ch-saisie.g-ac { display: block; }
.fo-f-champ .g-ac-liste { position: static; margin-top: 8px; max-height: none; box-shadow: none; }
.fo-f-champ .fo-ch-prix > .fo-suffixe { position: absolute; right: 14px; color: var(--gr-texte-2); pointer-events: none; }
/* Une date vide ne s'écrase pas (iPhone) ; sa valeur s'aligne sur celle des autres champs. */
.fo-f-champ input[type="date"] { min-height: 52px; }
.fo-f-champ input::-webkit-date-and-time-value { text-align: left; }
.fo-f-champ .g-erreur { margin: 0; }
.fo-f-champ .fo-ch-aide { margin: 0; font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); }
.fo-f-champ .fo-ch-sugg-titre { margin: 12px 0 0; font: 600 15px/20px var(--gr-sans); }
.fo-f-champ .fo-ch-sugg > .g-puce { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ---- Semblable à… ---- */
.fo-f-semblable .fo-sem-titre { margin: 16px var(--gr-marge) 8px; font: 400 22px/28px var(--gr-serif); }
.fo-f-semblable .fo-sem { --vg: 40px; }

/* ---- Depuis un lien ---- */
.fo-f-lien .fo-lien-boutons { display: flex; gap: 8px; }
.fo-f-lien .fo-lien-resultat { margin-top: 8px; min-height: 8px; }
.fo-f-lien .fo-lien-carte { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: var(--r-ctrl); background: var(--gr-surface-2); }
.fo-f-lien .fo-lien-photo, .fo-f-lien .fo-lien-sq {
    position: relative; flex: none; width: 96px; height: 96px; border-radius: var(--r-tirage); overflow: hidden;
    background: var(--gr-tirage); display: grid; place-items: center; color: var(--gr-texte-3);
}
.fo-f-lien .fo-lien-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.fo-f-lien .fo-lien-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fo-f-lien .fo-lien-nom { font: 600 17px/22px var(--gr-sans); overflow-wrap: anywhere; }
.fo-f-lien .fo-lien-meta { font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); }
.fo-f-lien .fo-lien-erreur { display: flex; gap: 8px; align-items: flex-start; margin: 0; font: 500 15px/21px var(--gr-sans); color: var(--gr-texte); }
.fo-f-lien .fo-lien-erreur > .g-ic { margin-top: 3px; flex: none; }
.fo-f-lien .fo-lien-reglages { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-top: 4px; font: 600 15px/20px var(--gr-sans); color: var(--gr-texte); }

/* ---- Événement d'usure ---- */
.fo-f-ev .fo-ev-alerte { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-ctrl);
                         background: var(--gr-danger-doux); color: var(--gr-danger); font: 500 15px/21px var(--gr-sans); }
.fo-f-ev .fo-ev-releve { margin: 4px 0 0; font: 400 28px/1.1 var(--gr-serif); }
.fo-f-ev .fo-ev-rebut { display: flex; gap: 6px; align-items: center; margin: 0; font: 500 13px/18px var(--gr-sans); color: var(--gr-accent); }
.fo-f-ev .fo-ev-photo { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.fo-f-ev .fo-ev-vignette { position: relative; width: 96px; height: 96px; border-radius: var(--r-tirage); overflow: hidden; background: var(--gr-tirage); flex: none; }
.fo-f-ev .fo-ev-vignette > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.fo-f-ev .fo-ev-photo-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.fo-f-ev .fo-ev-supprimer { display: flex; justify-content: center; margin-top: 16px; }

/* ---- Jet ou rachat d'exemplaires (GR.formulaires.quantite) : racine .fo-f-qte, sur la base de .fo-f-ev ---- */
.fo-f-qte .fo-q-compteur { display: flex; align-items: center; gap: 4px; }
.fo-f-qte .fo-q-nb { width: 76px; height: 44px; padding: 0 8px; text-align: center; font: 600 22px/1 var(--gr-sans); font-variant-numeric: tabular-nums; }
.fo-f-qte .fo-q-unite { margin-left: 8px; font: 500 15px/20px var(--gr-sans); color: var(--gr-texte-2); }
.fo-f-qte .fo-q-compteur > [aria-disabled="true"] { opacity: .35; cursor: default; }
.fo-f-qte .fo-q-prix { position: relative; display: flex; align-items: center; }
.fo-f-qte .fo-q-prix > input { padding-right: 36px; }
.fo-f-qte .fo-q-prix > .fo-suffixe { position: absolute; right: 14px; color: var(--gr-texte-2); pointer-events: none; }
/* Le relevé en direct : serif 22 ; au dernier exemplaire, la dague rouille devant. */
.fo-f-qte .fo-q-releve { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; font: 400 22px/28px var(--gr-serif); overflow-wrap: anywhere; }
.fo-f-qte .fo-q-releve:empty { display: none; }
.fo-f-qte .fo-q-dague { flex: none; margin-top: 4px; color: var(--gr-accent); }