/* Tarifs organigramme.
   Les onglets viennent de main.css (.tabs-page / .tab-page) : c'est la forme
   des onglets de page de cet ERP, et elle n'est plus recopiee par ecran. */

/* Le conteneur de page vient de main.css : .pf-shell. */

/* Les panneaux d onglets ont disparu : les onglets sont maintenant les marques,
   et il n y a qu un seul contenu, celui de la marque affichee. */

/* ── La barre des marques ───────────────────────────────────────────────
   Les onglets a gauche, les actions de la marque affichee a droite. Sur un
   onglet, ces actions auraient ete invisibles. */
.tf-barre{display:flex;align-items:center;gap:var(--space-3);margin-right:var(--space-8);flex-shrink:0;}
.tf-barre .tabs-page{flex:1;min-width:0;margin-right:0;}
.tf-barre-actions{display:flex;gap:var(--space-2);align-items:center;flex-shrink:0;margin-top:var(--space-5);}
.tf-danger-texte{color:#dc2626;}
.tf-danger-texte:hover{border-color:#dc2626;color:#b91c1c;}

/* Une marque desactivee reste dans la barre — c est le seul moyen de la
   reactiver — mais elle ne doit pas se lire comme une marque en service. */
.tab-page.tf-onglet-inactif{text-decoration:line-through;opacity:.6;}

/* ── Sous l onglet d une marque ─────────────────────────────────────────
   Deux moities en haut — ses gammes et ses options, les deux listes d un
   fabricant — puis la regle sur TOUTE la largeur.

   La regle etait a un tiers de l ecran, et sa grille fait treize colonnes :
   elle defilait horizontalement. Un tarif qu on fait defiler ne se verifie
   pas d un coup d oeil, ce qui etait tout l objet de l afficher. */
.tf-corps{
    flex:1;min-height:0;overflow-y:auto;
    padding:var(--space-5) var(--space-8);background:var(--grey-100);
    display:flex;flex-direction:column;gap:var(--space-4);
}
.tf-haut{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);align-items:start;}

@media (max-width:900px){
    .tf-haut{grid-template-columns:1fr;}
    .tf-barre{flex-direction:column;align-items:stretch;}
    .tf-barre-actions{margin-top:0;flex-wrap:wrap;}
}

.tf-col{display:flex;flex-direction:column;min-width:0;padding:0;overflow:hidden;}
/* La carte de regle prend toute la largeur disponible. Treize colonnes de prix
   tiennent alors sans defilement horizontal sur un ecran normal ; l overflow
   reste en filet de securite pour un ecran etroit. */
.tf-regle-card{min-width:0;}
.tf-orphelines{border-color:#fcd34d;}

.tf-col-tete{
    display:flex;align-items:center;gap:var(--space-3);
    padding:var(--space-3) var(--space-4);
    border-bottom:1px solid var(--grey-200);
    background:#fff;
}
.tf-col-titre{
    flex:1;min-width:0;
    font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    color:var(--grey-500);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Bornee, et non libre : une marque a trois gammes, une autre en a quarante, et
   sans plafond les deux cartes du haut cesseraient d etre de la meme hauteur.
   C est .tf-corps qui defile pour la page. */
.tf-liste{max-height:340px;min-height:110px;overflow-y:auto;}

/* ── Une entree ─────────────────────────────────────────────────────────
   Les boutons ne paraissent qu'au survol : trois boutons sur chaque ligne de
   quarante lignes, c'est cent vingt boutons qui crient en meme temps. */
.tf-item{
    display:flex;align-items:center;gap:var(--space-3);
    padding:9px var(--space-4);
    border-bottom:1px solid var(--grey-100);
    cursor:pointer;
    transition:background .12s;
}
.tf-item:last-child{border-bottom:0;}
.tf-item:hover{background:var(--grey-50);}
.tf-item.tf-choisie{background:rgba(0,26,47,.05);box-shadow:inset 3px 0 0 var(--psg-navy);}

.tf-item-nom{
    flex:1;min-width:0;
    font-size:.85rem;font-weight:600;color:var(--grey-800);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.tf-item-prix{
    font-size:.85rem;font-weight:700;color:var(--psg-navy);
    /* Les chiffres alignes en colonne : sans ca, une liste de prix ondule. */
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}

/* Une entree desactivee reste visible — c'est le seul moyen de la reactiver —
   mais elle ne doit pas se lire comme une entree en service. */
.tf-item.tf-inactif .tf-item-nom,
.tf-item.tf-inactif .tf-item-prix{color:var(--grey-400);text-decoration:line-through;}

.tf-item-actions{display:flex;gap:4px;opacity:0;transition:opacity .12s;flex-shrink:0;}
.tf-item:hover .tf-item-actions,
.tf-item:focus-within .tf-item-actions{opacity:1;}

.tf-mini{
    font:inherit;font-size:.68rem;font-weight:700;
    padding:3px 8px;border-radius:5px;
    border:1px solid var(--grey-200);background:#fff;color:var(--grey-600);
    cursor:pointer;white-space:nowrap;
}
.tf-mini:hover{border-color:var(--psg-navy);color:var(--psg-navy);}
.tf-mini-danger:hover{border-color:#dc2626;color:#dc2626;}

.tf-vide{
    margin:0;padding:var(--space-5) var(--space-4);
    font-size:.82rem;color:var(--grey-400);font-weight:600;
}

/* ── Le dialogue ────────────────────────────────────────────────────────── */
/* Le rembourrage est ICI : les autres pages le tiennent de .modal-body,
   .modal-header et .modal-footer. Ce dialogue n a pas ces trois etages — il
   porte un titre, deux champs et deux boutons — donc il se rembourre
   lui-meme. Sans cette ligne, le contenu touche les bords.
   .modal-overlay et .modal-box viennent de main.css. */
.tf-modal{max-width:420px;padding:var(--space-5);text-align:left;}
.tf-modal-titre{margin:0 0 var(--space-4);font-size:1rem;font-weight:800;color:var(--grey-800);}

.tf-champ{display:block;margin-bottom:var(--space-4);}

/* LE CHAMP DE PRIX NE PARAIT QUE POUR UNE LIGNE ET UNE OPTION.

   Le script pose l attribut [hidden] pour une marque et une gamme, qui n ont
   pas de prix. Mais [hidden] vient de la feuille du NAVIGATEUR, et il a la
   meme specificite qu une classe : des qu un auteur ecrit un display, la
   feuille de page passe apres et gagne. Le champ restait donc visible dans
   les deux dialogues qui ne devraient pas l avoir.

   Quatre autres feuilles portent deja cette parade — stocks.css la documente.
   Un garde-fou la verifie maintenant : voir DialoguesFermesTest. */
.tf-champ[hidden]{display:none;}
.tf-champ span{display:block;font-size:.8rem;font-weight:600;color:var(--grey-600);margin-bottom:5px;}

/* LE SELECT PORTE LA MEME BOITE QUE LES CHAMPS DE TEXTE.

   La regle ne visait que `input`, et les deux listes de choix — la marque d une
   gamme, la gamme d une option — paraissaient donc en gris systeme, plus petites
   et sans le meme arrondi que le nom juste au-dessus.

   `background` est explicite : sans lui, Chrome pose son propre gris sur un
   select et la boite ne ressemble plus a celle du champ voisin. */
.tf-champ input,
.tf-champ select{
    width:100%;padding:9px 11px;font:inherit;font-size:.9rem;
    border:1px solid var(--grey-200);border-radius:6px;color:var(--grey-800);
    background:#fff;
}
.tf-champ select{cursor:pointer;}
.tf-champ input:focus,
.tf-champ select:focus{outline:2px solid var(--psg-navy);outline-offset:1px;border-color:transparent;}

/* LE NOM ET SON PARENT SUR LA MEME LIGNE.

   Un nom de gamme fait huit caracteres et une marque se choisit dans une liste :
   deux lignes entieres pour ca allongeaient le dialogue sans rien gagner.

   `flex` et non `grid` a deux colonnes, parce que le dialogue d une MARQUE ne
   montre ni marque ni gamme — le nom y est seul. Une grille lui aurait laisse une
   colonne vide a droite ; en flex, `flex:1` sur le seul enfant visible lui rend
   toute la largeur. Les deux autres dialogues en montrent deux, donc moitie-moitie.

   `min-width:0` pour qu un libelle long dans la liste ne pousse pas la ligne au
   dela du dialogue : sans lui, un enfant flex refuse de descendre sous la taille
   de son contenu. */
.tf-duo{display:flex;gap:var(--space-3);}
.tf-duo > .tf-champ{flex:1;min-width:0;}
/* ET LA PARADE, PARCE QUE LE SCRIPT CACHE CETTE LIGNE.
   `#tfPrixChamp` porte `.tf-duo` et le script y pose `hidden` pour une marque ou
   une gamme. `[hidden]` vient de la feuille du NAVIGATEUR et a la meme
   specificite qu une classe : sans cette regle, le `display:flex` ci-dessus gagne
   et le prix parait dans les deux dialogues qui n en ont pas.
   C est le troisieme cas de ce piege dans ce depot. */
.tf-duo[hidden]{display:none;}

.tf-erreur{
    margin:0 0 var(--space-4);padding:9px 11px;border-radius:6px;
    background:#fef2f2;border-left:3px solid #dc2626;
    font-size:.82rem;font-weight:600;color:#991b1b;
}

.tf-suppr-quoi{margin:0 0 var(--space-4);font-size:.88rem;font-weight:600;color:var(--grey-700);line-height:1.5;}

.tf-modal-actions{display:flex;gap:var(--space-2);justify-content:flex-end;}
.tf-danger{background:#dc2626;border-color:#dc2626;}
.tf-danger:hover{background:#b91c1c;border-color:#b91c1c;}

/* ── Le panneau d'une gamme : sa regle, et la grille qu'elle produit ──── */

.tf-gamme-corps{padding:var(--space-4);overflow-x:auto;}

.tf-regle-vue{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:var(--space-3);margin:0 0 var(--space-4);
}
.tf-regle-vue dt{font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--grey-400);}
.tf-regle-vue dd{margin:2px 0 0;font-size:.95rem;font-weight:700;color:var(--grey-800);font-variant-numeric:tabular-nums;}



.tf-matrice-titre{
    margin:0 0 var(--space-2);
    font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--grey-500);
}

/* La grille en MATRICE : les demi-longueurs en ligne et en colonne, le prix a
   l'intersection. C'est ainsi qu'un tarif de fabricant se lit, et un supplement
   recopie de travers se voit tout de suite au bout de la diagonale. */
.tf-matrice{width:100%;border-collapse:collapse;font-size:.72rem;font-variant-numeric:tabular-nums;table-layout:fixed;}
.tf-matrice th,
.tf-matrice td{border:1px solid var(--grey-100);padding:3px 5px;text-align:right;white-space:nowrap;}
/* La colonne des demi-longueurs est etroite : le reste se partage le reste. */
.tf-matrice thead th:first-child,
.tf-matrice tbody th{width:52px;}
.tf-matrice thead th,
.tf-matrice tbody th{
    background:var(--grey-50);font-weight:800;color:var(--grey-600);
    position:sticky;left:0;z-index:1;
}
.tf-matrice thead th{top:0;z-index:2;}
.tf-matrice td{color:var(--grey-800);}

/* La moitie basse est vide : 30x40 et 40x30 sont le meme cylindre monte dans
   l'autre sens. On la laisse visible mais muette plutot que de la remplir. */
.tf-matrice-hors{background:var(--grey-50);}

/* ── La regle dans le dialogue ──────────────────────────────────────────── */
.tf-regle-aide{
    margin:0 0 var(--space-3);font-size:.8rem;color:var(--grey-500);font-weight:600;
}
.tf-regle-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--space-3);}
.tf-regle[hidden]{display:none;}

/* ── [hidden] doit vraiment cacher ──────────────────────────────────────
   `.tf-col` et `.tf-corps` declarent un display. Un selecteur d attribut a la
   meme specificite qu une classe, et cette feuille passe apres celle du
   navigateur : sans ces deux lignes, l attribut ne cache rien.

   La carte des options sans marque est marquee `hidden` dans le balisage —
   DialoguesFermesTest l a vu. Le corps de la page l est par le JavaScript,
   que ce test ne peut PAS voir : c est sa limite assumee, et c est pour ca que
   les deux sont ecrits ici ensemble. */
.tf-col[hidden]{display:none;}
.tf-corps[hidden]{display:none;}