/* Cockpit › Produit (3 oct. 2026) — tout PostHog, lisible. Les cartes, tableaux, segments et
   boutons viennent de style.css et couts.css ; ici seulement ce qui est propre à l'écran.
   Préfixe `pr` : les feuilles du Cockpit partagent un seul espace de noms. */

.prDirect{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink2);margin-right:4px;white-space:nowrap}
.prPoint{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--gray-tile);flex:0 0 auto}
.prPoint.vert{background:var(--green);box-shadow:0 0 0 0 rgba(52,199,89,.45);animation:prPouls 2s ease-in-out infinite}
.prPoint.bleu{background:var(--blue)}
.prPoint.rouge{background:var(--red)}
@keyframes prPouls{0%{box-shadow:0 0 0 0 rgba(52,199,89,.45)}70%{box-shadow:0 0 0 7px rgba(52,199,89,0)}100%{box-shadow:0 0 0 0 rgba(52,199,89,0)}}
@media (prefers-reduced-motion:reduce){.prPoint.vert{animation:none}}

/* L'en-tête porte trois choses (l'état « en direct » et deux boutons) : elles passent à la ligne
   plutôt que de sortir de l'écran (390 px : 97 px de trop, trouvé au rendu le 3 oct. 2026). */
#p-produit .mainHead .right{flex-wrap:wrap;align-items:center;justify-content:flex-end;max-width:100%;min-width:0}
.prCommandes{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 18px}
.prSections{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0;padding:2px}
.prSections::-webkit-scrollbar{display:none}
.prPastille{border:0;cursor:pointer;white-space:nowrap;font-size:13px;font-weight:500;padding:7px 13px;border-radius:999px;background:var(--fill2);color:var(--ink2)}
.prPastille.on{background:var(--ink);color:#fff;font-weight:600}
.prPastille:hover:not(.on){color:var(--ink);background:var(--fill)}
.prPeriodes{flex:0 0 auto}

.prGrille{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(460px,100%),1fr));gap:16px}
.prBloc{padding:22px 24px;min-width:0}
.prBloc.large{grid-column:1/-1}
.prTete{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.prTete h3{font-size:17px;font-weight:600;letter-spacing:-.015em;min-width:0;overflow-wrap:anywhere}
.prFenetre{font-size:12px;color:var(--ink2);background:var(--fill2);border-radius:999px;padding:2px 9px}
.prRelu{margin-left:auto;font-size:12px;color:var(--ink3);white-space:nowrap}
.prLecture{font-size:13px;color:var(--ink2);line-height:1.5;margin:4px 0 14px;max-width:110ch}
.prAttente,.prVide{font-size:14px;color:var(--ink3);padding:14px 0}
.prErreur{font-size:14px;color:var(--bad);background:var(--red-bg);border-radius:14px;padding:12px 14px}
.prAvert{font-size:13px;color:var(--warn);background:var(--yellow-bg);border-radius:12px;padding:9px 12px;margin-bottom:12px}
.prNote{font-size:12.5px;color:var(--ink2);line-height:1.5;margin-top:10px}
.prFragile{font-size:11.5px;color:var(--warn);margin-left:6px;white-space:nowrap}
.prNoteSection{font-size:13.5px;margin:0 0 14px;max-width:110ch}
.prTotal{font-size:14px;color:var(--ink2);margin-bottom:10px;line-height:1.5}
.prTotal b{font-size:22px;color:var(--ink);font-weight:700;letter-spacing:-.02em;margin-right:4px;font-variant-numeric:tabular-nums}

.prChiffres{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr));gap:10px}
.prChiffre{background:var(--well);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:3px;min-width:0}
.prChiffre .l{font-size:12.5px;color:var(--ink2)}
.prChiffre .v{font-size:26px;font-weight:700;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.prDelta{font-size:12.5px;font-weight:600;color:var(--ink3)}
.prDelta.up{color:var(--ok)}
.prDelta.down{color:var(--bad)}
.prAvant{font-size:11.5px;color:var(--ink3)}

.prSvg{width:100%;height:auto;display:block;overflow:visible}
.prAxe{font-size:11px;fill:var(--ink3);font-family:var(--font)}
.prLigneGrille{stroke:var(--line);stroke-width:1}
.prValeur{fill:var(--ink2);font-weight:600;font-variant-numeric:tabular-nums}
.prCycleTbl{margin-top:12px}
.prCycleTbl td,.prCycleTbl th{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.prCycleTbl td:first-child,.prCycleTbl th:first-child{text-align:left}
.prLegende{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:10px;font-size:13px;color:var(--ink2)}
.prPuce{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.prPuce i{width:10px;height:10px;border-radius:3px;display:inline-block}
.prPuce b{color:var(--ink)}

.prBarres,.prEntonnoir,.prParcours{display:flex;flex-direction:column;gap:7px}
.prBarre{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,2fr) auto;align-items:center;gap:12px;font-size:13.5px}
.prEtape,.prLien{display:grid;grid-template-columns:auto minmax(0,1.3fr) minmax(0,2fr) auto;align-items:center;gap:12px;font-size:13.5px}
.prNom{min-width:0;overflow-wrap:anywhere;color:var(--ink)}
.prPiste{height:10px;border-radius:5px;background:var(--fill2);overflow:hidden}
.prPiste span{display:block;height:100%;border-radius:5px;background:var(--f1)}
.prN{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.prN small{color:var(--ink3)}
.prNum{font-size:11.5px;color:var(--ink3);font-variant-numeric:tabular-nums;min-width:22px}
.prEtape.pire{background:var(--red-bg);border-radius:10px;padding:4px 6px;margin:0 -6px}
.prEtape.pire .prPiste span{background:var(--red)}
.prFleche{color:var(--ink3)}

.prBadge{display:inline-block;font-size:11px;font-weight:600;border-radius:999px;padding:2px 8px;white-space:nowrap}
.prBadge.ok{color:var(--ok);background:var(--green-bg)}
.prBadge.coupe{color:var(--bad);background:var(--red-bg)}
.prBadge.neutre{color:var(--ink2);background:var(--fill2)}

.prTbl td{vertical-align:top}
.prTbl td small,.prTbl th small{color:var(--ink3);font-weight:400}
.prCode{font-family:var(--mono);font-size:11px;color:var(--ink3)}
.prZero td{background:var(--red-bg)}
.prCliquable{cursor:pointer}
.prCliquable:hover td{background:var(--cobTint)}
.prRet td{text-align:center;min-width:64px}
.prRet td:first-child{text-align:left;white-space:nowrap}
.prRet td small{display:block;font-size:10.5px;opacity:.8}
.prFutur{color:var(--ink3)}
.prMoyenne td{font-weight:600;border-top:2px solid var(--line2)}
.prSous{font-size:14px;font-weight:600;margin:16px 0 8px}
.prListe{margin:0 0 0 18px;font-size:13.5px;line-height:1.6;color:var(--ink2)}

.prPhrases{list-style:none;display:flex;flex-direction:column;gap:9px}
.prPhrases li{font-size:15px;line-height:1.55;padding-left:16px;position:relative}
.prPhrases li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--blue)}

.prProprietes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(380px,100%),1fr));gap:18px}
.prPropriete{min-width:0}
.prPropriete h4{font-size:14px;font-weight:600;margin-bottom:8px;overflow-wrap:anywhere}
.prEtapesVides{margin:4px 0 0 20px;font-size:13px;color:var(--ink2);columns:2;column-gap:28px}

.prCleCarte{margin-bottom:18px;border:1px solid var(--cobBorder);background:var(--surface2)}
.prCleCarte h3{font-size:17px;font-weight:600;margin-bottom:8px}
.prCleCarte p{font-size:14px;line-height:1.55}
.prCleCarte ol{margin:8px 0 0 20px;font-size:14px;line-height:1.6}
.prCleCarte code{font-family:var(--mono);font-size:12.5px;background:var(--fill2);padding:1px 5px;border-radius:5px;overflow-wrap:anywhere}
.prDetail{margin-bottom:16px}
.prDetail .prTete .btnGhost{margin-left:8px}
.prBrut{font-family:var(--mono);font-size:11px;white-space:pre-wrap;overflow-wrap:anywhere}

@media (max-width:640px){
  #p-produit .mainHead .right{margin-left:0;width:100%;justify-content:flex-start}
  .prDirect{white-space:normal;flex:1 1 100%}
  .prBloc{padding:18px 16px}
  .prBarre,.prEtape,.prLien{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nom n" "piste piste";row-gap:4px}
  .prBarre>.prNom,.prEtape>.prNom,.prLien>.prNom{grid-area:nom}
  .prBarre>.prN,.prEtape>.prN,.prLien>.prN{grid-area:n}
  .prBarre>.prPiste,.prEtape>.prPiste,.prLien>.prPiste{grid-area:piste}
  .prEtape>.prNum,.prLien>.prNum{display:none}
  .prN{white-space:normal}
  .prChiffre .v{font-size:22px}
  .prChiffres{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .prChiffre{padding:10px 11px}
  .prEtapesVides{columns:1}
  .prPeriodes{width:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
  .prPeriodes button{padding:5px 2px;font-size:12px;white-space:normal;line-height:1.15}
  .prRelu{margin-left:0;width:100%}
}