/* ============================================================
   Recette V6 — configurateur baby-foot et détail des composants
   dans les documents. Feuille propre au lot « conf » (importée par
   assets/app.js) : rien ici ne redéfinit le socle Aurora.
   ============================================================ */

/* ---------- Grille des pièces ----------
   Deux colonnes. Les joueurs d'une équipe sont ancrés en colonne 1 et ses
   bouliers en colonne 2 : placés automatiquement, un élément de colonne 1
   ouvre toujours une nouvelle ligne, si bien que l'équipe 1 puis l'équipe 2
   gardent chacune leur ligne, quel que soit le nombre de pièces masquées
   au-dessus pour le modèle choisi. */
.conf-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; }
.conf-grille .conf-etape { min-width: 0; }
.conf-grille .conf-etape--col1 { grid-column: 1; }
.conf-grille .conf-etape--col2 { grid-column: 2; }
/* Pièce absente du modèle alors que l'autre pièce de l'équipe est proposée :
   la case reste réservée, invisible, pour ne pas faire glisser la ligne. */
.conf-grille .conf-etape-fantome { visibility: hidden; }
@media (max-width: 767.98px) {
    .conf-grille { grid-template-columns: minmax(0, 1fr); }
    .conf-grille .conf-etape--col2 { grid-column: 1; }
    .conf-grille .conf-etape-fantome { display: none; }
}

/* Modèle sans prix (Black Oak) : l'intitulé dit quel prix manque sur la fiche
   article ; tronqué par des points de suspension, il ne se lisait plus. */
[data-controller="configurateur"] .ts-dropdown .option[aria-disabled="true"] .ts-lbl { white-space: normal; }

/* ---------- Précision libre (laque, teinte RAL) ---------- */
.conf-precision { margin-top: .5rem; padding: .55rem .65rem .6rem; border-radius: var(--r-sm); background: var(--grad-soft); border: 1px solid rgba(124,92,255,.16); }
.conf-precision[hidden] { display: none; }
.conf-precision__lbl { display: flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 700; letter-spacing: .02em; color: var(--v1); margin-bottom: .3rem; }
.conf-precision .form-control { background: #fff; }

/* Champ en défaut (classe maison, cf. configurateur_controller.js). */
[data-controller="configurateur"] input.conf-invalide { border-color: #e11d48 !important; box-shadow: 0 0 0 4px rgba(225,29,72,.12) !important; }

/* ---------- Mode modification ---------- */
.conf-edition { display: flex; gap: .9rem; align-items: flex-start; padding: .9rem 1.1rem; border-radius: var(--r-lg); background: linear-gradient(135deg, rgba(124,92,255,.10), rgba(34,211,238,.08)); border: 1px solid rgba(124,92,255,.2); color: var(--ink-soft); box-shadow: var(--sh-sm); }
.conf-edition__icone { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--grad); box-shadow: var(--sh-glow); }
.conf-edition__alerte { margin-top: .45rem; font-size: .85rem; font-weight: 600; color: #b26a00; }
.conf-societe-figee { min-height: 44px; display: flex; align-items: center; }
.conf-societe-figee .badge { font-size: .85rem; }

/* ---------- Détail chiffré sous la ligne d'un document (fiche) ----------
   Rangée placée sous la ligne du baby (document/_composants_ecran_rangee.html.twig),
   sur toute la largeur du tableau sauf la référence : la cellule « Désignation »
   seule ne laissait pas la place des deux colonnes en page pleine. La ligne et sa
   rangée se lisent comme un seul bloc (pas de filet entre elles), et le détail est
   posé dans un encart pour ne pas se confondre avec les colonnes de prix. */
.table > tbody > tr:has(+ tr.conf-detail-rangee) > td { border-bottom-width: 0; }
.table > tbody > tr.conf-detail-rangee > td { padding-top: 0; }
.conf-detail { font-size: .78rem; color: var(--ink-soft); line-height: 1.4; min-width: 15rem; max-width: 64rem; padding: .55rem .85rem; border-radius: var(--r-md); background: #fafaff; border: 1px solid var(--line); }
.conf-detail strong { color: var(--ink); font-weight: 700; }
.conf-detail__ligne { display: flex; justify-content: space-between; gap: .75rem; padding: .1rem 0; }
.conf-detail__ligne > span:first-child { min-width: 0; }
.conf-detail__mt { flex: 0 0 auto; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); font-weight: 600; }
.conf-detail__mt.is-inclus { color: var(--ink-faint); font-weight: 500; font-style: italic; }
.conf-detail__base { border-bottom: 1px dashed #dcdcef; margin-bottom: .15rem; padding-bottom: .2rem; }
/* Deux colonnes dès que la rangée a la place (toute fiche de bureau ou de
   tablette, en page pleine comme en modale) ; sur téléphone, les deux moitiés
   s'empilent dans le même ordre de lecture. */
.conf-detail__colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); column-gap: 1.6rem; }
/* Téléphone : le tableau défile à l'horizontale et la rangée fait toute sa largeur.
   Le détail passe sur une colonne à la largeur de la partie visible du tableau,
   calé à gauche (cellule vide de la référence retirée) et épinglé pendant le
   défilement, pour se lire sans avoir à faire glisser le tableau. */
@media (max-width: 767.98px) {
    .table-responsive:has(> table > tbody > tr.conf-detail-rangee) { container-type: inline-size; }
    .table > tbody > tr.conf-detail-rangee > td:first-child { display: none; }
    .conf-detail-rangee .conf-detail { position: sticky; left: .85rem; width: min(calc(100cqw - 1.7rem), 34rem); min-width: 0; max-width: none; }
    .conf-detail-rangee .conf-detail__colonnes { grid-template-columns: minmax(0, 1fr); }
}
.conf-detail__pied { border-top: 1px dashed #dcdcef; margin-top: .15rem; padding-top: .2rem; }


.conf-modifier { display: inline-flex; align-items: center; gap: .35rem; margin-top: .45rem; padding: .18rem .7rem; border-radius: 999px; font-size: .74rem; font-weight: 600; color: var(--v1); background: #fff; border: 1.5px solid #ded8ff; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s; }
.conf-modifier:hover { background: var(--grad-soft); border-color: #cfc4ff; color: var(--v1); box-shadow: 0 6px 16px rgba(124,92,255,.18); }
.conf-fige { display: inline-flex; align-items: center; gap: .3rem; margin-top: .4rem; font-size: .72rem; color: var(--ink-faint); }

/* Formulaire « Modifier » du document : le lien reste discret sous la désignation. */
.lignes-tableau .conf-modifier { margin-top: .25rem; padding: .08rem .55rem; font-size: .7rem; }

/* ---------- Configurateur : la société émettrice d'abord (recette V7) ----------
   Même comportement que le formulaire de document (v6-dossier.css, D3) : tant
   qu'aucune société n'est choisie, le reste est voilé et inerte. */
.conf-form [data-dossier-voile] { transition: opacity .2s ease, filter .2s ease; }
.conf-form.is-sans-societe [data-dossier-voile] { opacity: .38; filter: grayscale(.6) blur(.4px); user-select: none; }
.conf-form.is-sans-societe .conf-societe-col .ts-control,
.conf-form.is-sans-societe .conf-societe-col select {
    border-color: var(--v1) !important;
    box-shadow: 0 0 0 4px rgba(124,92,255,.22), 0 8px 22px rgba(124,92,255,.25) !important;
    animation: dossier-appel 1.8s ease-in-out infinite;
}
.conf-form.is-sans-societe .conf-societe-col .form-label { color: var(--v1); font-weight: 700; }
/* Dernières configurations : le client sous le libellé. */
.collection-item .conf-client { color: var(--ink); font-weight: 600; }