/* ═══════════════════════════════════════════════════════════════════
   assets/syn-references.css — page Références (lot 27, modèle B)

   Le HTML est écrit par assets/index-references.js dans #refsApp. Tout
   est sous #page-refs, sauf la petite fenêtre (.rfFond) posée sur body.
   Couleurs réglables (Admin › Apparence › Références › Pages produits) :
   variables --rfAcc, --rfVerif, --rfActive, --rfSommeil, --rfMasquee sur
   .rfApp. Animations : classes rfAnim-aucune / -douces / -vives et
   rfAnimLignes, rfAnimSceau, rfAnimPanneau ; :root.anims-off les coupe.
   Téléphone (≤ 760 px) : lignes en cartes, l'aperçu monte du bas.
   ═══════════════════════════════════════════════════════════════════ */

#page-refs .rfApp{ --rfAcc:var(--syn); --rfVerif:#6d28d9; --rfActive:#15803d; --rfSommeil:#b45309; --rfMasquee:#4b5563; --rfVit:1; font-family:var(--f); color:var(--tx); }
#page-refs .rfApp svg{ flex:0 0 auto; }
#page-refs .rfMono{ font-family:var(--m); font-weight:600; letter-spacing:-.01em; }
#page-refs .rfMono.gros{ font-size:22px; font-weight:700; }
#page-refs .rfPetit{ font-size:12.5px; color:var(--mu); margin:0; }
#page-refs .rfLb{ display:block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--mu); }
#page-refs .rfEsp{ flex:1; }

/* ── Boutons ─────────────────────────────────────────────────── */
:is(#page-refs, .rfFond) .rfBt{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:38px; padding:0 13px; border-radius:var(--r);
  border:1px solid var(--bd); background:var(--surface); color:var(--tx); font:700 13.5px var(--f); cursor:pointer; white-space:nowrap;
  transition:background var(--tC), border-color var(--tC), color var(--tC), box-shadow var(--tC);
}
:is(#page-refs, .rfFond) .rfBt:hover:not(:disabled){ border-color:color-mix(in srgb, var(--rfAcc, var(--syn)) 45%, transparent); color:var(--rfAcc, var(--syn)); }
:is(#page-refs, .rfFond) .rfBt:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--synT); border-color:var(--rfAcc, var(--syn)); }
:is(#page-refs, .rfFond) .rfBt:disabled{ opacity:.45; cursor:default; }
:is(#page-refs, .rfFond) .rfBt.plein{ background:var(--rfAcc, var(--syn)); border-color:transparent; color:#fff; }
:is(#page-refs, .rfFond) .rfBt.plein:hover:not(:disabled){ color:#fff; background:color-mix(in srgb, var(--rfAcc, var(--syn)) 84%, #000); }
:is(#page-refs, .rfFond) .rfBt.danger{ color:var(--red); }
:is(#page-refs, .rfFond) .rfBt.danger:hover:not(:disabled){ border-color:color-mix(in srgb, var(--red) 45%, transparent); background:var(--redL); color:var(--red); }
.rfFond .rfFenPied .rfBt.danger{ background:var(--red); color:#fff; border-color:transparent; }
:is(#page-refs, .rfFond) .rfBt.ic{ width:38px; padding:0; }
:is(#page-refs, .rfFond) .rfBt.ic.on{ background:var(--rfAcc, var(--syn)); color:#fff; border-color:transparent; }
:is(#page-refs, .rfFond) .rfBt.petit{ min-height:30px; padding:0 9px; font-size:12px; }
:is(#page-refs, .rfFond) .rfBt.ic.petit{ width:30px; padding:0; }
#page-refs .rfLienB{ border:0; background:none; padding:0; font:700 12.5px var(--f); color:var(--rfAcc); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }

/* ── En-tête et chiffres ─────────────────────────────────────── */
#page-refs .rfListe{ display:grid; grid-template-columns:minmax(0, 1fr); gap:18px; align-items:start; }
#page-refs .rfListe.avecApercu{ grid-template-columns:minmax(0, 1fr) 360px; }
#page-refs .rfPrinc{ min-width:0; display:flex; flex-direction:column; gap:14px; }
#page-refs .rfHaut{ display:flex; align-items:flex-end; gap:16px; justify-content:space-between; flex-wrap:wrap; }
#page-refs .rfH1{ margin:0; font-size:26px; font-weight:800; letter-spacing:-.025em; }
#page-refs .rfSous{ margin:4px 0 0; color:var(--mu); font-size:14px; max-width:62ch; }
#page-refs .rfStats{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; }
#page-refs .rfStat{
  position:relative; display:flex; flex-direction:column; gap:6px; text-align:left; padding:13px 14px 12px; border-radius:var(--r2);
  border:1px solid var(--bd); background:var(--surface); color:var(--tx); font-family:var(--f); cursor:pointer; overflow:hidden;
  transition:border-color var(--tC), box-shadow var(--tC), transform var(--tC);
}
#page-refs .rfStat:hover{ border-color:color-mix(in srgb, var(--rfAcc) 35%, transparent); box-shadow:var(--sh); }
#page-refs .rfStat.on{ border-color:var(--rfAcc); box-shadow:0 0 0 3px var(--synT); }
#page-refs .rfStat:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--synT); }
#page-refs .rfStatL{ font-size:12px; font-weight:700; color:var(--mu); }
#page-refs .rfStatN{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
#page-refs .rfStatN b{ font-size:24px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
#page-refs .rfStatN small{ font-size:12px; color:var(--mu); font-weight:600; }
#page-refs .rfBarre{ display:block; height:4px; border-radius:99px; background:color-mix(in srgb, var(--tx) 7%, transparent); overflow:hidden; }
#page-refs .rfBarre i{ display:block; height:100%; border-radius:99px; background:var(--rfAcc); }

/* ── Recherche et filtres ────────────────────────────────────── */
#page-refs .rfOutils{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#page-refs .rfRech{ position:relative; display:flex; align-items:center; flex:1 1 260px; min-width:200px; max-width:420px; color:var(--mu); }
#page-refs .rfRech svg{ position:absolute; left:12px; pointer-events:none; }
#page-refs .rfRech input{
  width:100%; height:40px; padding:0 12px 0 38px; border-radius:var(--r); border:1px solid var(--bd); background:var(--surface);
  font:600 14px var(--f); color:var(--tx); outline:none; transition:border-color var(--tC), box-shadow var(--tC);
}
#page-refs .rfRech input:focus{ border-color:var(--rfAcc); box-shadow:0 0 0 3px var(--synT); }
#page-refs .rfRech:focus-within{ color:var(--rfAcc); }
#page-refs .rfFiltres{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#page-refs .rfSeg{ display:inline-flex; padding:3px; gap:2px; border-radius:calc(var(--r) + 1px); background:color-mix(in srgb, var(--tx) 6%, transparent); }
#page-refs .rfSeg button{
  display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 11px; border:0; border-radius:8px; background:none;
  font:700 12.5px var(--f); color:var(--mu); cursor:pointer; transition:background var(--tC), color var(--tC);
}
#page-refs .rfSeg button:hover:not(:disabled){ color:var(--tx); }
#page-refs .rfSeg button.on{ background:var(--surface); color:var(--tx); box-shadow:0 1px 3px rgba(2,6,23,.1); }
#page-refs .rfSeg button:focus-visible{ outline:2px solid var(--rfAcc); outline-offset:1px; }
#page-refs .rfSeg.plein{ display:flex; }
#page-refs .rfSeg.plein button{ flex:1; justify-content:center; gap:5px; padding:0 6px; white-space:nowrap; font-size:12px; }
#page-refs .rfSeg button.on.active{ color:var(--rfActive); }
#page-refs .rfSeg button.on.sommeil{ color:var(--rfSommeil); }
#page-refs .rfSeg button.on.masquee{ color:var(--rfMasquee); }
#page-refs .rfSeg button:disabled{ cursor:default; }
#page-refs .rfSel{ position:relative; display:inline-flex; align-items:center; color:var(--mu); }
#page-refs .rfSel svg{ position:absolute; left:10px; pointer-events:none; }
#page-refs .rfSel select, #page-refs .rfParPage select{
  height:38px; padding:0 28px 0 32px; border-radius:var(--r); border:1px solid var(--bd); background:var(--surface); font:700 12.5px var(--f); color:var(--tx); cursor:pointer; max-width:220px;
}
#page-refs .rfSel.on select{ border-color:var(--rfAcc); color:var(--rfAcc); background:var(--synT); }
#page-refs .rfPuce{
  display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:0 12px; border-radius:var(--pill); border:1px solid var(--bd); background:var(--surface);
  font:700 12.5px var(--f); color:var(--mu); cursor:pointer; transition:background var(--tC), border-color var(--tC), color var(--tC);
}
#page-refs .rfPuce:hover{ color:var(--tx); }
#page-refs .rfPuce.on{ border-color:var(--rfAcc); background:var(--synT); color:var(--rfAcc); }
#page-refs .rfPuce:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--synT); }
#page-refs .rfCompte{ margin-left:auto; font-size:13px; color:var(--mu); white-space:nowrap; }
#page-refs .rfCompte b{ color:var(--tx); font-variant-numeric:tabular-nums; }

/* ── Tableau ─────────────────────────────────────────────────── */
#page-refs .rfTable{ border:1px solid var(--bd); border-radius:var(--r2); background:var(--surface); overflow:hidden; border-top:3px solid var(--rfAcc); }
#page-refs .rfLn{ display:grid; align-items:center; gap:12px; min-height:52px; padding:6px 14px; border-top:1px solid var(--bd); cursor:pointer; position:relative; transition:background var(--tC); }
#page-refs .rfCorps .rfLn:first-child{ border-top:0; }
#page-refs .rfLn:hover{ background:color-mix(in srgb, var(--rfAcc) 4%, transparent); }
#page-refs .rfLn:focus-visible{ outline:none; background:color-mix(in srgb, var(--rfAcc) 6%, transparent); box-shadow:inset 3px 0 0 var(--rfAcc); }
#page-refs .rfLn.on{ background:var(--synT); box-shadow:inset 3px 0 0 var(--rfAcc); }
#page-refs .rfLn.inactive .rfRef b, #page-refs .rfLn.inactive .rfNom{ color:var(--mu); }
#page-refs .rfTete{ min-height:40px; border-top:0; cursor:default; background:var(--surface2); position:sticky; top:0; z-index:2; }
#page-refs .rfTete:hover{ background:var(--surface2); }
#page-refs .rfTh{
  display:inline-flex; align-items:center; gap:5px; border:0; background:none; padding:0; font:800 11px var(--f); letter-spacing:.07em; text-transform:uppercase;
  color:var(--mu); cursor:pointer; text-align:left; white-space:nowrap;
}
#page-refs .rfTh.fixe{ cursor:default; }
#page-refs .rfTh.centre{ justify-content:center; width:100%; }
#page-refs .rfTh.on, #page-refs button.rfTh:hover{ color:var(--rfAcc); }
#page-refs .rfTh:focus-visible{ outline:2px solid var(--rfAcc); outline-offset:2px; border-radius:4px; }
#page-refs .rfTri{ font-size:11px; opacity:.6; }
#page-refs .rfRef{ display:flex; align-items:center; gap:10px; min-width:0; }
#page-refs .rfRef b{ font-family:var(--m); font-size:13.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#page-refs .rfRef img, #page-refs .rfVig{ width:34px; height:34px; flex:0 0 34px; border-radius:8px; object-fit:cover; background:var(--surface2); border:1px solid var(--bd); }
#page-refs .rfVig{ display:grid; place-items:center; color:var(--mu); font-style:normal; }
#page-refs .rfVig.grand{ width:56px; height:56px; flex-basis:56px; border-radius:12px; }
#page-refs .rfNom{ min-width:0; font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#page-refs .rfZs{ display:flex; flex-wrap:wrap; gap:5px; min-width:0; }
#page-refs .rfZ{
  --zc:#64748b; display:inline-flex; align-items:center; gap:5px; padding:3px 8px 3px 7px; border-radius:6px; font:700 11.5px var(--m);
  background:color-mix(in srgb, var(--zc) 11%, var(--surface)); color:color-mix(in srgb, var(--zc) 75%, #000); white-space:nowrap;
}
#page-refs .rfZ::before{ content:""; width:7px; height:7px; border-radius:2px; background:var(--zc); }
#page-refs .rfZ.plus, #page-refs .rfZ.aucune{ background:none; color:var(--mu); font-family:var(--f); font-weight:600; border:1px dashed var(--bd); }
#page-refs .rfZ.plus::before, #page-refs .rfZ.aucune::before{ display:none; }
#page-refs .rfZs.grand .rfZ{ font-size:12.5px; padding:5px 10px 5px 8px; }
#page-refs .rfJauge{ display:block; height:6px; border-radius:99px; background:color-mix(in srgb, var(--tx) 8%, transparent); overflow:hidden; }
#page-refs .rfJauge i{ display:block; height:100%; border-radius:99px; background:var(--rfAcc); }
#page-refs .rfEtat{ display:flex; justify-content:center; }
#page-refs .rfEtatI{ display:grid; place-items:center; width:32px; height:32px; border-radius:10px; }
#page-refs .rfEtatI.active{ color:var(--rfActive); background:color-mix(in srgb, var(--rfActive) 10%, transparent); }
#page-refs .rfEtatI.sommeil{ color:var(--rfSommeil); background:color-mix(in srgb, var(--rfSommeil) 11%, transparent); }
#page-refs .rfEtatI.masquee{ color:var(--rfMasquee); background:color-mix(in srgb, var(--rfMasquee) 10%, transparent); }
#page-refs .rfEtatI.verifie{ background:none; }
#page-refs .rfSceau{ display:block; }
#page-refs .rfSceau .s{ fill:var(--rfVerif); stroke:none; }
#page-refs .rfSceau .c{ fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
#page-refs .rfVerif{ display:inline-grid; place-items:center; }
#page-refs .rfCat{
  --cc:#475569; display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 8px; border-radius:var(--pill); font:700 12.5px var(--f);
  background:color-mix(in srgb, var(--cc) 11%, var(--surface)); color:color-mix(in srgb, var(--cc) 80%, #000); white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
#page-refs .rfCat.petit{ font-size:11.5px; padding:3px 8px 3px 7px; }
#page-refs .rfVide{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:44px 16px; color:var(--mu); text-align:center; }
#page-refs .rfVide b{ color:var(--tx); font-size:15px; }
#page-refs .rfPied{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
#page-refs .rfPages{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
#page-refs .rfEll{ padding:0 4px; color:var(--mu); }
#page-refs .rfParPage{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--mu); font-weight:600; margin-left:auto; }
#page-refs .rfParPage select{ padding:0 10px; }

/* ── Aperçu ──────────────────────────────────────────────────── */
#page-refs .rfApercu{
  position:sticky; top:calc(var(--topbar-h, 0px) + 12px); display:flex; flex-direction:column; gap:12px; padding:14px; border-radius:var(--r2);
  border:1px solid var(--bd); background:var(--surface); box-shadow:var(--sh); max-height:calc(100vh - var(--topbar-h, 0px) - 24px); overflow:auto; border-top:3px solid var(--rfAcc);
}
#page-refs .rfApT{ display:flex; align-items:center; gap:8px; }
#page-refs .rfApT .rfLb{ flex:1; }
#page-refs .rfApPhotos{ display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; gap:6px; height:180px; }
#page-refs .rfApPhotos img{ width:100%; height:100%; object-fit:cover; border-radius:10px; background:var(--surface2); min-height:0; }
#page-refs .rfApPhotos img.grande{ grid-row:span 2; }
#page-refs .rfApPhotos img:only-child{ grid-column:span 2; }
#page-refs .rfApSans{
  grid-column:1 / -1; grid-row:1 / -1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:1.5px dashed var(--bd); border-radius:12px;
  background:var(--surface2); color:var(--mu); font:700 13px var(--f); cursor:pointer; transition:border-color var(--tC), color var(--tC);
}
#page-refs .rfApSans:hover{ border-color:var(--rfAcc); color:var(--rfAcc); }
#page-refs .rfApSans.grand{ width:100%; aspect-ratio:4 / 3; }
#page-refs .rfApNom{ display:flex; align-items:center; gap:8px; font-size:18px; }
#page-refs .rfApLib{ font-size:15px; font-weight:700; margin-top:-6px; }
#page-refs .rfApEtat{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:13px; font-weight:700; }
#page-refs .rfApEtat.active{ color:var(--rfActive); }
#page-refs .rfApEtat.sommeil{ color:var(--rfSommeil); }
#page-refs .rfApEtat.masquee{ color:var(--rfMasquee); }
#page-refs .rfApEtat.verifie{ color:var(--rfVerif); }
#page-refs .rfApManque{ font-size:12.5px; padding:8px 10px; border-radius:var(--r); background:var(--ambL); color:color-mix(in srgb, var(--amb) 70%, #000); }
#page-refs .rfApBloc{ display:flex; flex-direction:column; gap:6px; padding-top:10px; border-top:1px solid var(--bd); }
#page-refs .rfKv{ display:flex; justify-content:space-between; gap:12px; font-size:13px; }
#page-refs .rfKv span{ color:var(--mu); }
#page-refs .rfKv b{ text-align:right; overflow-wrap:anywhere; }
#page-refs .rfApActions{ display:grid; grid-template-columns:1fr 1fr; gap:6px; padding-top:10px; border-top:1px solid var(--bd); }
#page-refs .rfApActions .rfBt{ min-width:0; white-space:normal; line-height:1.2; padding:6px 8px; text-align:center; }
#page-refs .rfJ{ display:grid; grid-template-columns:10px minmax(0, 1fr) auto; gap:8px; align-items:baseline; font-size:12.5px; }
#page-refs .rfJ > i{ width:7px; height:7px; border-radius:50%; background:var(--mu); transform:translateY(-1px); }
#page-refs .rfJ-green > i{ background:#15803d; }
#page-refs .rfJ-red > i{ background:var(--red); }
#page-refs .rfJ-orange > i, #page-refs .rfJ-amber > i{ background:var(--amb); }
#page-refs .rfJ-blue > i{ background:#1d4ed8; }
#page-refs .rfJ-violet > i, #page-refs .rfJ-purple > i{ background:var(--syn); }
#page-refs .rfJT{ min-width:0; overflow-wrap:anywhere; }
#page-refs .rfJ time{ font-size:11px; color:var(--mu); white-space:nowrap; }
#page-refs .rfJournal{ display:flex; flex-direction:column; gap:9px; }

/* ── Fiche en page entière ───────────────────────────────────── */
#page-refs .rfFiche{ display:flex; flex-direction:column; gap:14px; }
#page-refs .rfFTete{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#page-refs .rfFPos{ font-variant-numeric:tabular-nums; }
#page-refs .rfFCorps{ display:grid; grid-template-columns:320px minmax(0, 1fr); gap:18px; align-items:start; }
#page-refs .rfFGauche{
  position:sticky; top:calc(var(--topbar-h, 0px) + 12px); display:flex; flex-direction:column; gap:12px; padding:14px; border-radius:var(--r2);
  border:1px solid var(--bd); background:var(--surface); border-top:3px solid var(--rfAcc);
}
#page-refs .rfGal{ display:flex; flex-direction:column; gap:6px; }
#page-refs .rfGal img.grande{ width:100%; aspect-ratio:4 / 3; object-fit:cover; border-radius:12px; background:var(--surface2); }
#page-refs .rfMinis{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
#page-refs .rfMinis img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; background:var(--surface2); }
#page-refs .rfComplet{ display:flex; flex-direction:column; gap:8px; padding:11px 12px; border-radius:var(--r); background:var(--surface2); border:1px solid var(--bd); }
#page-refs .rfComplet.ok{ background:color-mix(in srgb, var(--rfVerif) 7%, var(--surface)); border-color:color-mix(in srgb, var(--rfVerif) 25%, transparent); }
#page-refs .rfComplet .rfBarre i{ background:var(--rfAcc); }
#page-refs .rfComplet.ok .rfBarre i{ background:var(--rfVerif); }
#page-refs .rfCompletT{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; font-weight:800; }
#page-refs .rfCompletT span{ display:inline-flex; align-items:center; gap:6px; }
#page-refs .rfComplet.ok .rfCompletT{ color:var(--rfVerif); }
#page-refs .rfFActions{ display:flex; flex-direction:column; gap:6px; }
#page-refs .rfFActions .rfBt{ justify-content:flex-start; }
#page-refs .rfFDroite{ min-width:0; display:flex; flex-direction:column; gap:12px; }
#page-refs .rfOnglets{ display:flex; gap:2px; border-bottom:1px solid var(--bd); overflow-x:auto; scrollbar-width:none; }
#page-refs .rfOnglets::-webkit-scrollbar{ display:none; }
#page-refs .rfOnglet{
  position:relative; border:0; background:none; padding:11px 14px; font:700 14px var(--f); color:var(--mu); cursor:pointer; white-space:nowrap; transition:color var(--tC);
}
#page-refs .rfOnglet:hover{ color:var(--tx); }
#page-refs .rfOnglet.on{ color:var(--rfAcc); }
#page-refs .rfOnglet.on::after{ content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:3px; border-radius:3px 3px 0 0; background:var(--rfAcc); }
#page-refs .rfOnglet:focus-visible{ outline:2px solid var(--rfAcc); outline-offset:-2px; border-radius:6px; }
#page-refs .rfSection{ min-width:0; }
#page-refs .rfBloc{ display:flex; flex-direction:column; gap:14px; padding:16px; border-radius:var(--r2); border:1px solid var(--bd); background:var(--surface); }
#page-refs .rfBlocT{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; }
#page-refs .rfBlocT b{ font-size:16px; font-weight:800; }
:is(#page-refs, .rfFond) .rfChamp{ display:flex; flex-direction:column; gap:6px; }
:is(#page-refs, .rfFond) .rfChamp > span{ font-size:12.5px; font-weight:800; color:var(--tx); }
:is(#page-refs, .rfFond) .rfChamp > span small{ font-weight:600; color:var(--mu); }
:is(#page-refs, .rfFond) .rfChamp input, :is(#page-refs, .rfFond) .rfChamp textarea{
  width:100%; box-sizing:border-box; padding:10px 12px; border-radius:var(--r); border:1px solid var(--bd); background:var(--surface); color:var(--tx);
  font:600 14.5px var(--f); outline:none; resize:vertical; transition:border-color var(--tC), box-shadow var(--tC);
}
:is(#page-refs, .rfFond) .rfChamp input.rfMono{ font-family:var(--m); }
:is(#page-refs, .rfFond) .rfChamp input:focus, :is(#page-refs, .rfFond) .rfChamp textarea:focus{ border-color:var(--rfAcc, var(--syn)); box-shadow:0 0 0 3px var(--synT); }
:is(#page-refs, .rfFond) .rfChamp [readonly]{ background:var(--surface2); }
#page-refs .rfFormA{ display:flex; align-items:center; justify-content:flex-end; gap:12px; }
#page-refs .rfCaract{ min-width:0; }
:is(#page-refs, .rfFond) .rfZGroupe{ display:flex; flex-direction:column; gap:7px; }
:is(#page-refs, .rfFond) .rfZChoix{ display:flex; flex-wrap:wrap; gap:6px; }
:is(#page-refs, .rfFond) .rfZC{
  --zc:#64748b; display:inline-flex; align-items:center; gap:5px; min-height:36px; padding:0 12px; border-radius:var(--r); border:1px solid var(--bd); background:var(--surface);
  font:700 13px var(--m); color:var(--tx); cursor:pointer; transition:background var(--tC), border-color var(--tC), color var(--tC);
}
:is(#page-refs, .rfFond) .rfZC::before{ content:""; width:8px; height:8px; border-radius:2px; background:var(--zc); }
:is(#page-refs, .rfFond) .rfZC.on::before{ display:none; }
:is(#page-refs, .rfFond) .rfZC:hover{ border-color:var(--zc); }
:is(#page-refs, .rfFond) .rfZC.on{ background:color-mix(in srgb, var(--zc) 14%, var(--surface)); border-color:var(--zc); color:color-mix(in srgb, var(--zc) 75%, #000); }
:is(#page-refs, .rfFond) .rfZC:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--synT); }
#page-refs .rfPhotos{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
#page-refs .rfPh{ position:relative; margin:0; border-radius:12px; overflow:hidden; border:1px solid var(--bd); background:var(--surface2); }
#page-refs .rfPh.cv{ border-color:var(--rfAcc); box-shadow:0 0 0 2px var(--synT); }
#page-refs .rfPh img{ display:block; width:100%; aspect-ratio:1; object-fit:cover; }
#page-refs .rfPhCv{ position:absolute; top:8px; left:8px; padding:3px 8px; border-radius:var(--pill); background:var(--rfAcc); color:#fff; font:800 10.5px var(--f); letter-spacing:.04em; text-transform:uppercase; }
#page-refs .rfPh figcaption{ display:flex; justify-content:flex-end; gap:5px; padding:6px; }
#page-refs .rfPhAjout{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; aspect-ratio:1; border:1.5px dashed var(--bd); border-radius:12px; color:var(--mu);
  cursor:pointer; transition:border-color var(--tC), color var(--tC);
}
#page-refs .rfPhAjout:hover, #page-refs .rfPhAjout:focus-within{ border-color:var(--rfAcc); color:var(--rfAcc); }
#page-refs .rfPhAjout b{ font-size:14px; color:inherit; }
#page-refs .rfPhAjout small{ font-size:12px; }

/* ── Fenêtre (confirmation, nouvelle référence) ──────────────── */
.rfFond{ position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:20px; background:rgba(15,18,30,.48); font-family:var(--f); color:var(--tx); }
.rfFen{ width:min(480px, 100%); max-height:calc(100vh - 40px); display:flex; flex-direction:column; border-radius:16px; background:var(--surface); box-shadow:0 30px 80px rgba(2,6,23,.3); overflow:hidden; border-top:3px solid var(--syn); }
.rfFondAssist .rfFen{ width:min(860px, 100%); }
.rfFenTete{ display:flex; align-items:center; gap:10px; padding:14px 16px 10px 20px; }
.rfFenTete h2{ flex:1; margin:0; font-size:18px; font-weight:800; letter-spacing:-.01em; }
.rfFenCorps{ padding:0 20px 16px; overflow:auto; font-size:14px; line-height:1.5; }
.rfFenCorps p{ margin:0 0 10px; }
.rfFenCorps .rfMono{ font-family:var(--m); }
.rfFenCorps .rfPetit{ font-size:12.5px; color:var(--mu); }
.rfFenPied{ display:flex; justify-content:flex-end; gap:8px; padding:12px 20px 16px; border-top:1px solid var(--bd); }
.rfFond .rfLb{ display:block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--mu); }
.rfFond .rfEsp{ flex:1; }
.rfFond .rfPetit{ font-size:12.5px; color:var(--mu); }
.rfFond .rfAssist{ display:flex; flex-direction:column; gap:16px; }
.rfFond .rfEtapes{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.rfFond .rfEtapes li{ display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:var(--r); background:var(--surface2); color:var(--mu); min-width:0; }
.rfFond .rfEtapes li span:last-child{ display:flex; flex-direction:column; min-width:0; }
.rfFond .rfEtapes b{ font-size:13px; color:inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rfFond .rfEtapes small{ font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rfFond .rfEtN{ display:grid; place-items:center; width:26px; height:26px; flex:0 0 26px; border-radius:50%; background:color-mix(in srgb, var(--tx) 8%, transparent); font:800 12px var(--f); }
.rfFond .rfEtapes li.on{ background:var(--synT); color:var(--syn); }
.rfFond .rfEtapes li.on .rfEtN{ background:var(--syn); color:#fff; }
.rfFond .rfEtapes li.fait .rfEtN{ background:color-mix(in srgb, var(--syn) 16%, transparent); color:var(--syn); }
.rfFond .rfAsCorps{ display:grid; grid-template-columns:minmax(0, 1fr) 220px; gap:18px; }
.rfFond .rfAsPan{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.rfFond .rfAide{ margin:-4px 0 0; font-size:12.5px; color:var(--mu); }
.rfFond .rfAide.ok{ color:#15803d; font-weight:700; }
.rfFond .rfAide.ko{ color:var(--red); font-weight:700; }
.rfFond .rfMsg{ margin:0; min-height:1px; font-size:13px; font-weight:700; color:var(--red); }
.rfFond .rfMsg:empty{ display:none; }
.rfFond .rfAsRecap{ display:flex; flex-direction:column; gap:8px; }
.rfFond .rfAsCarte{ display:flex; flex-direction:column; gap:6px; padding:12px; border-radius:12px; border:1px solid var(--bd); background:var(--surface2); min-width:0; }
.rfFond .rfAsCarte > img{ width:100%; aspect-ratio:4 / 3; object-fit:cover; border-radius:10px; }
.rfFond .rfAsCarte > b{ font-family:var(--m); font-size:15px; overflow-wrap:anywhere; }
.rfFond .rfAsCarte > span{ font-size:13px; font-weight:600; overflow-wrap:anywhere; }
.rfFond .rfVig{ display:grid; place-items:center; width:56px; height:56px; border-radius:12px; background:var(--surface); border:1px solid var(--bd); color:var(--mu); font-style:normal; }
.rfFond .rfZs{ display:flex; flex-wrap:wrap; gap:4px; }
.rfFond .rfZ{ padding:2px 7px; border-radius:6px; font:700 11px var(--m); background:var(--synT); color:var(--syn); }
.rfFond .rfZ.aucune{ background:none; color:var(--mu); border:1px dashed var(--bd); font-family:var(--f); }
.rfFond .rfDepot{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:28px 16px; border:1.5px dashed var(--bd); border-radius:14px;
  color:var(--mu); text-align:center; cursor:pointer; transition:border-color var(--tC), color var(--tC);
}
.rfFond .rfDepot:hover, .rfFond .rfDepot:focus-within{ border-color:var(--syn); color:var(--syn); }
.rfFond .rfDepot b{ font-size:14.5px; color:var(--tx); }
.rfFond .rfAsPh{ display:flex; flex-wrap:wrap; gap:8px; }
.rfFond .rfAsPhI{ position:relative; }
.rfFond .rfAsPhI img{ width:76px; height:76px; object-fit:cover; border-radius:10px; display:block; }
.rfFond .rfAsPhI .rfBt{ position:absolute; top:4px; right:4px; }
.rfFond .rfCoche{
  display:grid; grid-template-columns:22px minmax(0, 1fr) auto; align-items:center; gap:10px; width:100%; padding:9px 11px; border-radius:var(--r); border:1px solid var(--bd);
  background:var(--surface); font:600 13.5px var(--f); color:var(--mu); text-align:left; cursor:pointer;
}
.rfFond .rfCoche i{ display:grid; place-items:center; width:20px; height:20px; border-radius:6px; border:1.5px solid var(--bd); font-style:normal; }
.rfFond .rfCoche.on{ color:var(--tx); border-color:color-mix(in srgb, var(--syn) 35%, transparent); }
.rfFond .rfCoche.on i{ background:var(--syn); border-color:var(--syn); color:#fff; }
.rfFond .rfCoche b{ text-align:right; overflow-wrap:anywhere; }
.rfFond .rfAsPied{ display:flex; align-items:center; gap:10px; padding-top:12px; border-top:1px solid var(--bd); }

/* ── Animations (réglables) ──────────────────────────────────── */
@keyframes rfEntre{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@keyframes rfGlisse{ from{ opacity:0; transform:translateX(18px); } to{ opacity:1; transform:none; } }
@keyframes rfSceau{ from{ transform:scale(.4) rotate(-40deg); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes rfMonte{ from{ transform:translateY(100%); } to{ transform:none; } }
#page-refs .rfAnim-vives{ --rfVit:.7; }
:root:not(.anims-off) #page-refs .rfAnimLignes:not(.rfAnim-aucune) .rfCorps .rfLn{ animation:rfEntre calc(var(--tM) / var(--rfVit)) var(--eS) both; animation-delay:calc(min(var(--i, 0), 14) * 18ms); }
:root:not(.anims-off) #page-refs .rfAnimSceau:not(.rfAnim-aucune) .rfSceau{ animation:rfSceau calc(var(--tL) / var(--rfVit)) var(--eS) both; }
:root:not(.anims-off) #page-refs .rfAnimPanneau:not(.rfAnim-aucune) .rfApercu{ animation:rfGlisse calc(var(--tM) / var(--rfVit)) var(--eS) both; }
:root:not(.anims-off) #page-refs .rfAnimPanneau:not(.rfAnim-aucune) .rfFiche{ animation:rfEntre calc(var(--tM) / var(--rfVit)) var(--eS) both; }
:root:not(.anims-off) #page-refs .rfAnim-vives .rfStat.on{ transform:translateY(-2px); }
:root:not(.anims-off) .rfFen{ animation:rfEntre var(--tM) var(--eS) both; }
#page-refs .rfAnim-aucune *{ transition:none !important; }
@media (prefers-reduced-motion:reduce){
  #page-refs .rfApp *, .rfFen{ animation:none !important; }
}

/* ── Écran moyen ─────────────────────────────────────────────── */
@media (max-width:1180px){
  #page-refs .rfListe.avecApercu{ grid-template-columns:minmax(0, 1fr) 320px; }
  #page-refs .rfFCorps{ grid-template-columns:280px minmax(0, 1fr); }
}
@media (max-width:1000px){
  #page-refs .rfStats{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  #page-refs .rfListe.avecApercu{ grid-template-columns:minmax(0, 1fr); }
  #page-refs .rfApercu{ position:fixed; z-index:900; right:14px; top:auto; bottom:14px; width:min(380px, calc(100vw - 28px)); max-height:min(76vh, 680px); box-shadow:var(--sh2); }
  #page-refs .rfFCorps{ grid-template-columns:minmax(0, 1fr); }
  #page-refs .rfFGauche{ position:static; }
}

/* ── Téléphone ───────────────────────────────────────────────── */
@media (max-width:760px){
  #page-refs .rfH1{ font-size:22px; }
  #page-refs .rfSous{ font-size:13px; }
  #page-refs .rfHaut .rfBt.plein{ position:fixed; z-index:850; right:14px; bottom:calc(14px + env(safe-area-inset-bottom, 0px)); min-height:52px; padding:0 18px; border-radius:var(--pill); box-shadow:var(--sh2); }
  #page-refs .rfStats{ gap:8px; }
  #page-refs .rfStat{ padding:10px 11px; }
  #page-refs .rfStatN b{ font-size:20px; }
  #page-refs .rfOutils{ gap:8px; }
  #page-refs .rfRech{ max-width:none; flex-basis:100%; }
  #page-refs .rfRech input{ height:46px; font-size:16px; }
  #page-refs .rfFiltres{ flex-wrap:nowrap; overflow-x:auto; margin:0 -14px; padding:2px 14px 4px; scrollbar-width:none; width:calc(100% + 28px); }
  #page-refs .rfFiltres::-webkit-scrollbar{ display:none; }
  #page-refs .rfFiltres > *{ flex:0 0 auto; }
  #page-refs .rfCompte{ margin-left:0; }
  #page-refs .rfTable{ border:0; background:none; border-radius:0; border-top:0; overflow:visible; }
  #page-refs .rfTete{ display:none; }
  #page-refs .rfCorps{ display:flex; flex-direction:column; gap:8px; }
  #page-refs .rfLn{
    grid-template-columns:auto minmax(0, 1fr) auto !important; grid-template-areas:"ref ref etat" "nom nom etat" "zs zs zs"; gap:4px 10px; padding:11px 12px;
    border:1px solid var(--bd); border-radius:var(--r2); background:var(--surface);
  }
  #page-refs .rfCorps .rfLn:first-child{ border-top:1px solid var(--bd); }
  #page-refs .rfLn > .rfRef{ grid-area:ref; }
  #page-refs .rfLn > .rfNom{ grid-area:nom; white-space:normal; font-size:13.5px; color:var(--mu); padding-left:44px; margin-top:-6px; }
  #page-refs .rfLn > .rfZs{ grid-area:zs; padding-left:44px; }
  #page-refs .rfLn > .rfEtat{ grid-area:etat; align-self:center; }
  #page-refs .rfLn > .rfJauge, #page-refs .rfLn > span:has(> .rfCat){ display:none; }
  #page-refs .rfLn.on{ box-shadow:inset 3px 0 0 var(--rfAcc); }
  #page-refs .rfPied{ padding-bottom:70px; }
  #page-refs .rfParPage{ display:none; }
  #page-refs .rfApercu{
    left:0; right:0; bottom:0; width:auto; max-height:82vh; border-radius:18px 18px 0 0; border-left:0; border-right:0; border-bottom:0;
    padding:10px 16px calc(16px + env(safe-area-inset-bottom, 0px)); z-index:950;
  }
  #page-refs .rfApercu::before{ content:""; display:block; width:40px; height:4px; border-radius:4px; background:var(--bd); margin:0 auto 2px; flex:0 0 auto; }
  :root:not(.anims-off) #page-refs .rfAnimPanneau:not(.rfAnim-aucune) .rfApercu{ animation:rfMonte calc(var(--tL) / var(--rfVit)) var(--eS) both; }
  #page-refs .rfApActions .rfBt{ min-height:44px; }
  #page-refs .rfFTete .rfMasqueTel{ display:none; }
  #page-refs .rfFTete{ position:sticky; top:var(--topbar-h, 0px); z-index:5; background:var(--bg); padding:6px 0; }
  #page-refs .rfFGauche{ padding:12px; }
  #page-refs .rfOnglet{ padding:11px 12px; font-size:13.5px; }
  #page-refs .rfBloc{ padding:13px; }
  #page-refs .rfChamp input, #page-refs .rfChamp textarea{ font-size:16px; }
  #page-refs .rfPhotos{ grid-template-columns:repeat(2, 1fr); }
  #page-refs .rfZC{ min-height:42px; }
  .rfFond{ place-items:end stretch; padding:0; }
  .rfFen, .rfFondAssist .rfFen{ width:100%; max-height:92vh; border-radius:18px 18px 0 0; }
  :root:not(.anims-off) .rfFen{ animation:rfMonte var(--tL) var(--eS) both; }
  .rfFenPied{ padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px)); }
  .rfFenPied .rfBt{ flex:1; min-height:46px; }
  .rfFond .rfChamp input, .rfFond .rfChamp textarea{ font-size:16px; }
  .rfFond .rfEtapes{ grid-template-columns:repeat(4, auto); justify-content:space-between; }
  .rfFond .rfEtapes li{ padding:6px; background:none; }
  .rfFond .rfEtapes li span:last-child{ display:none; }
  .rfFond .rfEtapes li.on span:last-child{ display:flex; }
  .rfFond .rfAsCorps{ grid-template-columns:minmax(0, 1fr); }
  .rfFond .rfAsRecap{ display:none; }
  .rfFond .rfAsPied .rfPetit{ display:none; }
}
@media (max-width:420px){
  #page-refs .rfStatL{ font-size:11.5px; }
  #page-refs .rfApActions{ grid-template-columns:1fr; }
}