/* ═══════════════════════════════════════════════════════════════════
   assets/syn-communs.css — composants partagés et densité (refonte, lot 7)

   Chargée après syn-admin.css, sur index.php et clients.php.
   1. Toast : un seul pour tout le site (#toast), icône selon le ton.
   2. Notifications en direct (.inAppToast) : forme seulement, leurs
      couleurs restent celles choisies par l'expéditeur.
   3. (retiré au lot 13 : bouton flottant de recherche)
   4. Fenêtres communes (.modalOverlay > .modal, panneaux latéraux).
   5. Densité : html[data-densite] (posé par PHP et par l'éditeur).
   8. Fenêtre d'une zone de la page Recherche, mode Avancé (lot 13).
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Toast ────────────────────────────────────────────────── */
#toast.toast{
  --tc:var(--syn); position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:5000;
  display:none; align-items:center; gap:10px; max-width:min(560px, calc(100vw - 32px)); padding:11px 16px 11px 12px;
  border-radius:calc(var(--r) + 4px); background:var(--tx); color:#fff; border:0; box-shadow:0 14px 38px rgba(2,6,23,.28);
  font-family:var(--f); font-size:14px; font-weight:700; line-height:1.35; text-align:left;
  animation:synToast var(--tM) var(--eS); }
#toast.toast-ok{ --tc:#4ade80; } #toast.toast-error{ --tc:#f87171; background:#3a1214; } #toast.toast-warn{ --tc:#fbbf24; } #toast.toast-info{ --tc:#c4b5fd; }
#toast .toastIco{ width:26px; height:26px; flex:0 0 auto; border-radius:8px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--tc) 22%, transparent); color:var(--tc); }
#toast .toastIco svg{ width:15px; height:15px; }
#toast .toastTxt{ min-width:0; overflow-wrap:anywhere; }
@keyframes synToast{ from{ opacity:0; transform:translate(-50%, 10px) scale(.98); } to{ opacity:1; transform:translate(-50%, 0); } }
@media (min-width:1100px){ #toast.toast{ left:calc(50% + (var(--rail-w, 248px) + 16px) / 2); } }
/* Lot 13 : messages de la page Recherche affichés en haut si réglé ainsi (Apparence › Recherche). */
#toast.toast[data-place="haut"]{ bottom:auto; top:calc(var(--topbar-h, 64px) + 14px); }

/* ── 2. Notifications en direct ──────────────────────────────── */

/* ── 3. (Lot 13) Le bouton flottant de recherche a été retiré. ── */

/* ── 4. Fenêtres communes ────────────────────────────────────── */
.modalOverlay{ background:rgba(15,18,28,.42); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.modalOverlay > .modal{ border-radius:calc(var(--r) + 8px); border:0; background:var(--surface, #fff); box-shadow:var(--sh2), 0 30px 70px rgba(2,6,23,.18); }
.modalOverlay .loginHead{ border-bottom:1px solid var(--bd); }
.modalOverlay .loginTitle{ font-family:var(--f); font-weight:800; letter-spacing:-.01em; color:var(--tx); }
:is(.modalOverlay, #page-profil) .btnIcon{ border-radius:10px; border:1px solid var(--bd); background:var(--surface, #fff); color:var(--mu); box-shadow:none; }
:is(.modalOverlay, #page-profil) .btnIcon:hover{ border-color:var(--syn); color:var(--syn); }
:is(.modalOverlay, #page-profil) .btnIcon svg{ width:17px; height:17px; }
:is(.modalOverlay, #page-profil) .btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:var(--r); font-family:var(--f); font-weight:700;
  background:var(--syn); color:#fff; border:1px solid transparent; box-shadow:none; background-image:none; text-shadow:none; }
:is(.modalOverlay, #page-profil) .btn:hover{ background:var(--synD); }
:is(.modalOverlay, #page-profil) .btn.green{ background:var(--syn); }
:is(.modalOverlay, #page-profil) .btn.secondary{ background:var(--surface, #fff); color:var(--tx); border-color:var(--bd); }
:is(.modalOverlay, #page-profil) .btn.secondary:hover{ border-color:var(--syn); color:var(--syn); background:var(--surface, #fff); }
:is(.modalOverlay, #page-profil) .btn.danger{ background:var(--surface, #fff); color:var(--red); border-color:color-mix(in srgb, var(--red) 35%, transparent); }
:is(.modalOverlay, #page-profil) .btn.danger:hover{ background:var(--red); color:#fff; }
:is(.modalOverlay, #page-profil) .btn:disabled{ opacity:.5; cursor:not-allowed; }

/* Connexion */
#loginOverlay .loginAvatar{ background:var(--synT); color:var(--syn); display:grid; place-items:center; font-weight:800; }
#loginOverlay .loginAvatar svg{ width:28px; height:28px; }
#loginOverlay #togglePass svg, #page-profil .togglePwd svg{ width:17px; height:17px; }

/* Panneaux latéraux (panier, notifications) */
.basketOverlay .basketPanel{ background:var(--surface, #fff); box-shadow:-20px 0 60px rgba(2,6,23,.18); }
.basketOverlay .basketTitle{ font-family:var(--f); font-weight:800; color:var(--tx); }
.basketOverlay .basketCountBadge{ background:var(--syn); color:#fff; border-radius:999px; }
.basketOverlay .basketEmptyIcon{ color:var(--mu); opacity:.6; }
.basketOverlay .basketEmptyIcon svg{ width:38px; height:38px; }
#page-profil .profileActionIcon svg{ width:18px; height:18px; }

/* ── 6. Formulaires (lot 8) ────────────────────────────────────
   Une seule présentation, partout : libellé au-dessus, champ encadré.
   Les cartes .admField (libellé dans le cadre) deviennent de simples
   groupes. Jetons : --fH (hauteur), --fGap (entre champs), --fLab
   (libellé → champ), déclarés dans syn-theme.css. Les champs des
   barres de recherche de page et de l'éditeur d'apparence gardent leur
   présentation. */
:is(#page-search, #page-refs, #page-zones, #page-logs, #page-purchases, #page-users, .modalOverlay, #page-profil, .orderModalOverlay, .disputeFullPage, .cliPage) :is(.admLabel, .adminLabel){
  display:block; font-family:var(--f); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--mu); line-height:1.3; margin:0 0 var(--fLab); }
:is(#page-search, #page-refs, #page-zones, #page-logs, #page-purchases, #page-users, .modalOverlay, #page-profil, .orderModalOverlay, .disputeFullPage, .cliPage) .admField{
  display:flex; flex-direction:column; gap:var(--fLab); min-width:0; background:none; border:0; border-radius:0; padding:0; box-shadow:none; }
:is(#page-search, #page-refs, #page-zones, #page-logs, #page-purchases, #page-users, .modalOverlay, #page-profil, .orderModalOverlay, .disputeFullPage, .cliPage) .admField:focus-within{ border:0; box-shadow:none; }
:is(#page-search, #page-refs, #page-zones, #page-logs, #page-purchases, #page-users, .modalOverlay, #page-profil, .orderModalOverlay, .disputeFullPage, .cliPage) .admField > .admLabel{ margin:0; }
:is(#page-search, #page-refs, #page-zones, #page-logs, #page-purchases, #page-users, .modalOverlay, #page-profil, .orderModalOverlay, .disputeFullPage, .cliPage)
  :is(.admField, .adminRow, .synChamp, .admInlineForm, .modal, .adminSection)
  :is(input.input, select.input, textarea.input):where(:not([type="checkbox"], [type="radio"], [type="color"], [type="range"], [type="file"], #apparenceRoot *)){
  box-sizing:border-box; width:100%; height:var(--fH); min-height:var(--fH); margin:0; padding:0 12px; border:1px solid var(--bd); border-radius:var(--r);
  background-color:var(--surface, #fff); color:var(--tx); font-family:var(--f); font-size:14px; font-weight:500; line-height:1.4; box-shadow:none;
  transition:border-color var(--tC) ease, box-shadow var(--tC) ease; }
:is(#page-search, #page-refs, #page-zones, #page-logs, #page-purchases, #page-users, .modalOverlay, #page-profil, .orderModalOverlay, .disputeFullPage, .cliPage)
  :is(.admField, .adminRow, .synChamp, .admInlineForm, .modal, .adminSection) textarea.input:where(:not(#apparenceRoot *)){
  height:auto; min-height:96px; padding:10px 12px; line-height:1.5; }
:is(#page-search, #page-refs, #page-zones, #page-logs, #page-purchases, #page-users, .modalOverlay, #page-profil, .orderModalOverlay, .disputeFullPage, .cliPage)
  :is(.admField, .adminRow, .synChamp, .admInlineForm, .modal, .adminSection) select.input:where(:not([multiple], #apparenceRoot *)){
  -webkit-appearance:none; appearance:none; padding-right:34px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6b7c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:14px 14px; }
:is(#page-search, #page-refs, #page-zones, #page-logs, #page-purchases, #page-users, .modalOverlay, #page-profil, .orderModalOverlay, .disputeFullPage, .cliPage)
  :is(.admField, .adminRow, .synChamp, .admInlineForm, .modal, .adminSection) :is(input.input, select.input, textarea.input):where(:not(#apparenceRoot *)):focus{
  border-color:var(--syn); box-shadow:0 0 0 3px var(--synT); outline:none; }
:is(#page-search, #page-refs, #page-zones, #page-logs, #page-purchases, #page-users, .modalOverlay, #page-profil, .orderModalOverlay, .disputeFullPage, .cliPage)
  :is(.admField, .adminRow, .synChamp, .admInlineForm, .modal, .adminSection) :is(input.input, textarea.input):where(:not(#apparenceRoot *))::placeholder{ color:color-mix(in srgb, var(--mu) 72%, transparent); }
:is(#page-search, #page-refs, #page-zones, #page-logs, #page-purchases, #page-users, .modalOverlay, #page-profil, .orderModalOverlay, .disputeFullPage, .cliPage)
  :is(.admField, .adminRow, .synChamp, .admInlineForm, .modal, .adminSection) :is(input.input, select.input, textarea.input):where(:not(#apparenceRoot *)):is([readonly], :disabled){
  background-color:var(--surface2, #f8fafc); color:var(--mu); }
/* Couleurs : une pastille encadrée, à la hauteur des champs. */
:is(#page-zones, .modalOverlay, #page-profil) input[type="color"]:where(:not(#apparenceRoot *)){
  box-sizing:border-box; height:var(--fH); min-width:56px; padding:4px; border:1px solid var(--bd); border-radius:var(--r); background:var(--surface, #fff); cursor:pointer; }
:is(#page-zones, .modalOverlay, #page-profil) input[type="color"]:where(:not(#apparenceRoot *))::-webkit-color-swatch-wrapper{ padding:0; }
:is(#page-zones, .modalOverlay, #page-profil) input[type="color"]:where(:not(#apparenceRoot *))::-webkit-color-swatch{ border:0; border-radius:calc(var(--r) - 4px); }
:is(#page-zones, .modalOverlay, #page-profil) input[type="color"]:where(:not(#apparenceRoot *))::-moz-color-swatch{ border:0; border-radius:calc(var(--r) - 4px); }
/* Rythme : groupes, grilles, lignes, aides, barres d'actions. */
:is(#page-search, #page-refs, #page-zones, #page-logs, #page-purchases, #page-users, .modalOverlay, #page-profil, .orderModalOverlay, .disputeFullPage, .cliPage) .admGrid{ row-gap:var(--fGap); column-gap:12px; }
:is(#page-search, #page-refs, #page-zones, #page-logs, #page-purchases, #page-users, .modalOverlay, #page-profil, .orderModalOverlay, .disputeFullPage, .cliPage) .profileGrid{ gap:var(--fGap) 12px; }
/* Groupes posés l'un après l'autre, sans grille : leur cadre les séparait, l'écart le remplace. */
:is(#page-search, #page-refs, #page-zones, #page-logs, #page-purchases, #page-users, .modalOverlay, #page-profil, .orderModalOverlay, .disputeFullPage, .cliPage) :is(.admField, .admGrid) + :is(.admField, .admGrid){ margin-top:var(--fGap); }
:is(#page-search, #page-refs, #page-zones, #page-logs, #page-purchases, #page-users, .modalOverlay, #page-profil, .orderModalOverlay, .disputeFullPage, .cliPage) :is(.admGrid, .profileGrid, .synChamps, .admInlineForm) > :is(.admField, .admGrid){ margin-top:0; }   /* dans une grille, l'écart vient de la grille */
:is(#page-search, #page-refs, #page-zones, #page-logs, #page-purchases, #page-users, .modalOverlay, #page-profil, .orderModalOverlay, .disputeFullPage, .cliPage) :is(.catBlock, .orderMeta) .admField{ margin-bottom:0; }   /* anciens écarts de 11 px, remplacés par celui du dessus */
:is(.modalOverlay, #page-profil) .adminRow{ flex-direction:column; align-items:stretch; flex-wrap:nowrap; gap:0; margin:0 0 var(--fGap); }
:is(.modalOverlay, #page-profil) .synChamp{ display:flex; flex-direction:column; min-width:0; margin:0 0 var(--fGap); }
:is(.modalOverlay, #page-profil) .synChamps{ display:grid; grid-template-columns:repeat(var(--n, 2), minmax(0, 1fr)); gap:var(--fGap) 12px; margin:0 0 var(--fGap); }
:is(.modalOverlay, #page-profil) .synChamps > .synChamp{ margin:0; }
:is(.modalOverlay, #page-profil) .synSousTitre{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--mu); margin:0 0 var(--fGap); }
:is(.modalOverlay, #page-profil) .synActions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:4px; }
:is(#page-search, #page-refs, #page-zones, #page-logs, #page-purchases, #page-users, .modalOverlay, #page-profil, .orderModalOverlay, .disputeFullPage, .cliPage) .admField :is(.admHelp, .admCounter){ margin:0; }
:is(#page-search, #page-refs, #page-zones, #page-logs, #page-purchases, #page-users, .modalOverlay, #page-profil, .orderModalOverlay, .disputeFullPage, .cliPage) .admActions{ gap:10px; margin-top:20px; padding-top:16px; }
:is(.modalOverlay, #page-profil) .admInlineForm{ gap:10px; }
#stMotifsOverlay .stMotifForm{ grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr) 96px auto; }
#stMotifsOverlay .stMotifForm .btn{ height:var(--fH); }
/* Petits boutons : jamais sous 32 px (40 px au doigt). */
:is(.modalOverlay, #page-profil) .admMiniBtn{ min-height:32px; padding:0 12px; }
:is(.modalOverlay, #page-profil) .admLabelBtn{ min-height:32px; padding:0 10px; border-radius:var(--r); background:none; border:0; color:var(--syn); font-family:var(--f); font-weight:700; cursor:pointer; }
:is(.modalOverlay, #page-profil) .admLabelBtn:hover{ background:var(--synT); }
#page-zones .zoneActs { gap:6px; }
/* Choix d'icône et de thème des notifications : les deux éditeurs à l'identique. */
@media (max-width:760px){
  :is(#page-search, #page-refs, #page-zones, #page-logs, #page-purchases, #page-users, .modalOverlay, #page-profil, .orderModalOverlay, .disputeFullPage, .cliPage)
    :is(.admField, .adminRow, .synChamp, .admInlineForm, .modal, .adminSection) :is(input.input, select.input, textarea.input):where(:not(#apparenceRoot *)){ font-size:16px; }
  :is(.modalOverlay, #page-profil) .synChamps{ grid-template-columns:minmax(0, 1fr); }
  #stMotifsOverlay .stMotifForm{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  #stMotifsOverlay .stMotifForm > :first-child{ grid-column:1 / -1; }
  :is(.modalOverlay, #page-profil) :is(.admMiniBtn, .admLabelBtn){ min-height:40px; }
  :is(#disputeDetailOverlay .disputeSetBtn, #stMotifsOverlay .refBtn, #page-zones .zonesCat, #orderBasketCollapse){ min-height:40px; }
  #stMotifsOverlay .refBtn{ min-width:40px; }
}

/* ── 5. Densité ──────────────────────────────────────────────────
   Standard : rien ne change. Confortable : contrôles de 46 px, lignes
   plus aérées. Compacte : 34 px et lignes serrées, sur ordinateur ; sur
   téléphone, jamais sous 40 px (cibles tactiles). */
html[data-densite="confort"]{ --dC:46px; --dCs:40px; --dRow:16px 18px; --dCell:16px 16px; }
html[data-densite="compact"]{ --dC:34px; --dCs:30px; --dRow:7px 12px; --dCell:7px 12px; }
@media (max-width:899px){ html[data-densite="compact"]{ --dC:40px; --dCs:36px; --dRow:10px 12px; --dCell:10px 12px; } }
html:is([data-densite="confort"], [data-densite="compact"]) :is(#page-search, #page-refs, #page-zones, #page-logs, #page-purchases, #page-users, .cliPage, .modalOverlay, #page-profil)
  :is(.btn, .cliBtn, input.input:not([type="color"]), select.input, .cliChamp input, .cliSearch input, .zonesSearch input){ height:var(--dC); min-height:var(--dC); }
html:is([data-densite="confort"], [data-densite="compact"]) :is(#page-search, #page-refs, #page-zones, #page-logs, #page-purchases, #page-users, .cliPage)
  :is(.adminSubTab, .purchaseTab, .zonesCat, .cliDTab, .admMiniBtn, .refSegBtn, .cliMini, .zoneMini){ height:var(--dCs); min-height:var(--dCs); }
html:is([data-densite="confort"], [data-densite="compact"]) :is(#page-search, #page-refs, #page-zones, #page-logs, #page-purchases, #page-users, .cliPage)
  :is(.orderCard, .disputeCard, .zoneRow, .logRow, .userCard, .catalogCard, .cliItem, .sItem, .homeTile){ padding:var(--dRow); }
html:is([data-densite="confort"], [data-densite="compact"]) :is(#page-purchases) .stCard { padding:var(--dRow); }
html:is([data-densite="confort"], [data-densite="compact"]) .cliPage .cliTable td{ padding:var(--dCell); }
html:is([data-densite="confort"], [data-densite="compact"]) #page-search #searchInput{ height:calc(var(--dC) + 12px); }

:root.anims-off #toast.toast{ animation:none; }
@media (prefers-reduced-motion:reduce){ #toast.toast{ animation:none; } }

/* ── 7. Mouvement (lot 8) ──────────────────────────────────────
   Trois durées et une courbe pour tout le site (syn-theme.css) :
   --tC survol et focus, --tM ouverture d'une fenêtre ou d'un volet,
   --tL panneau latéral ; --eS, une sortie douce, sans rebond.
   Le réglage « Animations » (html.anims-off) et la préférence système
   « réduire les animations » restent gérés par styles.css, pour tout. */
@keyframes synFondu{ from{ opacity:0; } to{ opacity:1; } }
@keyframes synEntre{ from{ opacity:0; transform:translateY(10px) scale(.985); } to{ opacity:1; transform:none; } }
@keyframes synApparait{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@keyframes synGlisse{ from{ opacity:0; transform:translateX(28px); } to{ opacity:1; transform:none; } }
@keyframes synMonte{ from{ opacity:.4; transform:translateY(32px); } to{ opacity:1; transform:none; } }
/* Lot 26 : une carte de la fiche qui vient d'être enregistrée s'illumine (--rc : couleur de sa rubrique). */
@keyframes fiFlash{ 0%{ background:color-mix(in srgb, var(--rc) 16%, var(--surface, #fff)); box-shadow:0 0 0 0 color-mix(in srgb, var(--rc) 40%, transparent); } 60%{ box-shadow:0 0 0 7px transparent; } 100%{ background:var(--surface, #fff); box-shadow:none; } }
:root:not(.anims-off) :is(.modalOverlay, .orderModalOverlay){ animation:synFondu var(--tM) ease-out; }
:root:not(.anims-off) .modalOverlay > .modal, :root:not(.anims-off) .orderModalOverlay .orderModalBox{ animation:synEntre var(--tM) var(--eS); }
:root:not(.anims-off) .basketOverlay .basketPanel{ animation:synGlisse var(--tL) var(--eS); }
@media (max-width:600px){ :root:not(.anims-off) .basketOverlay .basketPanel{ animation:synMonte var(--tL) var(--eS); } }
:root:not(.anims-off) :is(.loginStep.active, .profilePane.active, .cliFiche.on){ animation:synApparait var(--tM) var(--eS); }
:root:not(.anims-off) .toast.toastZone{ animation-duration:var(--tM); animation-timing-function:var(--eS); }
:is(.btn, .btnIcon, .btnMenuToggle){ transition:transform var(--tC) var(--eS), box-shadow var(--tC) var(--eS), background-color var(--tC) ease, border-color var(--tC) ease, color var(--tC) ease; }
.navDrawer{ transition:transform var(--tL) var(--eS); }
.switch::after{ transition:transform var(--tC) var(--eS); }

/* ── 8. Fenêtre d'une zone, page Recherche (lot 13, choix 2C) ──
   Ouverte par assets/index-recherche.js en mode Avancé. */
.modalOverlay.srchFen{ z-index:1200; }
.modalOverlay.srchFen > .srchFenBox{ width:min(420px, 100%); padding:0; overflow:hidden; font-family:var(--f); color:var(--tx); }
.modalOverlay.srchFen .srchFenTete{ display:flex; align-items:center; gap:12px; padding:16px 16px 14px 18px; border-bottom:1px solid var(--bd); }
.modalOverlay.srchFen .srchFenTeteAjout{ align-items:flex-start; }
.modalOverlay.srchFen .srchFenPuce{ width:44px; height:44px; flex:0 0 44px; border-radius:12px; display:grid; place-items:center; background:var(--zc); color:#fff; font-weight:800; font-size:13px; }
.modalOverlay.srchFen .srchFenId{ flex:1; min-width:0; }
.modalOverlay.srchFen .srchFenT{ font-size:17px; font-weight:800; letter-spacing:-.01em; }
.modalOverlay.srchFen .srchFenS{ font-size:12.5px; color:var(--mu); margin-top:2px; }
.modalOverlay.srchFen .srchMono{ font-family:var(--m); }
.modalOverlay.srchFen .srchFenZ{ color:var(--zc); }
.modalOverlay.srchFen .srchFenX{ width:34px; height:34px; flex:0 0 34px; border-radius:10px; border:1px solid var(--bd); background:var(--surface, #fff); color:var(--mu); font-size:19px; line-height:1; cursor:pointer; }
.modalOverlay.srchFen .srchFenX:hover{ border-color:var(--syn); color:var(--syn); }
.modalOverlay.srchFen .srchFenCorps{ padding:16px 18px; display:flex; flex-direction:column; gap:16px; }
.modalOverlay.srchFen .srchFenL{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--mu); margin-bottom:8px; }
.modalOverlay.srchFen .srchFenDet{ display:flex; align-items:center; gap:12px; padding:12px; cursor:pointer; border:1px solid var(--bd); border-radius:calc(var(--r) + 2px); }
.modalOverlay.srchFen .srchFenDIco{ width:28px; height:28px; flex:0 0 28px; border-radius:50%; display:grid; place-items:center; background:var(--tx); color:#fff; font-size:12px; font-weight:800; }
.modalOverlay.srchFen .srchFenDT{ flex:1; min-width:0; display:flex; flex-direction:column; }
.modalOverlay.srchFen .srchFenDT small{ font-size:12px; color:var(--mu); }
.modalOverlay.srchFen .srchNivs{ display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; }
.modalOverlay.srchFen .srchNiv{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:9px 4px 8px; border:1px solid var(--bd); border-radius:var(--r); background:var(--surface, #fff); color:var(--tx); font-family:var(--f); cursor:pointer; }
.modalOverlay.srchFen .srchNiv b{ font-size:15px; font-weight:800; }
.modalOverlay.srchFen .srchNiv span{ font-size:10.5px; color:var(--mu); font-weight:700; }
.modalOverlay.srchFen .srchNiv:hover{ border-color:var(--syn); }
.modalOverlay.srchFen .srchNiv.on{ border-color:var(--syn); background:var(--synT); box-shadow:inset 0 0 0 1px var(--syn); }
.modalOverlay.srchFen .srchNiv.on span{ color:var(--synD); }
.modalOverlay.srchFen .srchBar{ display:flex; gap:2px; width:34px; }
.modalOverlay.srchFen .srchBar i{ flex:1; height:4px; border-radius:2px; background:color-mix(in srgb, var(--bd) 80%, transparent); }
.modalOverlay.srchFen .srchBar i.a{ background:var(--srchAccA, #15803d); }
.modalOverlay.srchFen .srchBar i.c{ background:var(--srchAccC, #f59e0b); }
.modalOverlay.srchFen .srchFenNote{ margin:8px 0 0; font-size:12px; color:var(--mu); }
.modalOverlay.srchFen .srchFenInfo{ font-size:12px; color:var(--mu); }
.modalOverlay.srchFen .srchFenSeg{ display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:calc(var(--r) + 2px); background:color-mix(in srgb, var(--bd) 45%, transparent); }
.modalOverlay.srchFen .srchFenSeg button{ height:36px; border:0; border-radius:var(--r); background:none; color:var(--mu); font-family:var(--f); font-size:13.5px; font-weight:700; cursor:pointer; }
.modalOverlay.srchFen .srchFenSeg button.on{ background:var(--surface, #fff); color:var(--syn); box-shadow:0 1px 3px rgba(2,6,23,.08); }
.modalOverlay.srchFen .srchFenPied{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-top:1px solid var(--bd); background:color-mix(in srgb, var(--bg) 50%, var(--surface, #fff)); }
.modalOverlay.srchFen .srchFenSp{ flex:1; }
.modalOverlay.srchFen .srchFenRetirer{ border:0; background:none; color:var(--red); font-family:var(--f); font-size:13.5px; font-weight:700; padding:8px 6px; border-radius:8px; cursor:pointer; }
.modalOverlay.srchFen .srchFenRetirer:hover, .modalOverlay.srchFen .srchFenRetirer.conf{ background:color-mix(in srgb, var(--red) 10%, transparent); }
.modalOverlay.srchFen .srchFenRetirer:disabled{ opacity:.5; cursor:wait; }
.modalOverlay.srchFen :is(button, input):focus-visible{ outline:2px solid var(--syn); outline-offset:1px; }
@media (max-width:520px){
  .modalOverlay.srchFen{ align-items:flex-end; padding:0; }
  .modalOverlay.srchFen > .srchFenBox{ width:100%; border-radius:calc(var(--r) + 8px) calc(var(--r) + 8px) 0 0; padding-bottom:env(safe-area-inset-bottom); }
  .modalOverlay.srchFen .srchFenX{ width:40px; height:40px; flex-basis:40px; }
  .modalOverlay.srchFen .srchFenRetirer{ min-height:42px; }
}

/* ── 9. Récapitulatif (lot 14) : panneau à droite, feuille sur téléphone ── */
.basketOverlay.recapOverlay .recapPanel{ width:min(480px, 100vw); height:100%; font-family:var(--f); color:var(--tx); background:var(--bg); }
.basketOverlay.recapOverlay .recapTete{ gap:12px; padding:16px 16px 14px 18px; background:var(--surface, #fff); border-bottom:1px solid var(--bd); justify-content:flex-start; }
.basketOverlay.recapOverlay .recapTeteIco{ width:42px; height:42px; flex:0 0 42px; border-radius:12px; display:grid; place-items:center; background:var(--synT); color:var(--syn); }
.basketOverlay.recapOverlay .recapTeteIco svg{ width:22px; height:22px; }
.basketOverlay.recapOverlay .recapTitre{ flex:1; min-width:0; display:grid; grid-template-columns:auto auto 1fr; align-items:center; column-gap:8px; font-size:18px; letter-spacing:-.01em; }
.basketOverlay.recapOverlay .recapTitre .basketCountBadge{ min-width:24px; height:22px; padding:0 7px; display:inline-grid; place-items:center; font-size:12px; font-family:var(--m); }
.basketOverlay.recapOverlay .recapSous{ grid-column:1 / -1; font-size:12.5px; font-weight:600; color:var(--mu); letter-spacing:0; }
.basketOverlay.recapOverlay .recapX{ width:38px; height:38px; flex:0 0 38px; border-radius:10px; border:1px solid var(--bd); background:var(--surface, #fff); color:var(--mu); display:grid; place-items:center; font-size:15px; }
.basketOverlay.recapOverlay .recapX:hover{ border-color:var(--syn); color:var(--syn); }
.basketOverlay.recapOverlay .recapVues{ display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:12px 16px 0; padding:4px; border-radius:calc(var(--r) + 2px); background:color-mix(in srgb, var(--bd) 45%, transparent); flex:0 0 auto; }
.basketOverlay.recapOverlay .recapVues button{ height:36px; border:0; border-radius:var(--r); background:none; color:var(--mu); font:700 13.5px var(--f); cursor:pointer; }
.basketOverlay.recapOverlay .recapVues button[aria-pressed="true"]{ background:var(--surface, #fff); color:var(--syn); box-shadow:0 1px 3px rgba(2,6,23,.08); }
.basketOverlay.recapOverlay .recapListe{ padding:12px 16px 16px; gap:10px; }
.basketOverlay.recapOverlay .recapVide .basketEmptyIcon{ width:64px; height:64px; border-radius:18px; display:grid; place-items:center; background:var(--synT); color:var(--syn); opacity:1; }
.basketOverlay.recapOverlay .recapVide .basketEmptyIcon svg{ width:30px; height:30px; }
.basketOverlay.recapOverlay .recapVideT{ font-size:15px; font-weight:800; color:var(--tx); }

.basketOverlay.recapOverlay .recapCarte{ display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:12px; align-items:start; padding:12px; margin:0; background:var(--surface, #fff);
  border:1px solid var(--bd); border-radius:calc(var(--r) + 4px); box-shadow:var(--sh); transition:border-color var(--tC), box-shadow var(--tC); }
.basketOverlay.recapOverlay .recapCarte:hover{ border-color:color-mix(in srgb, var(--syn) 35%, var(--bd)); box-shadow:var(--sh2); }
.basketOverlay.recapOverlay .recapNum{ width:28px; height:28px; border-radius:9px; display:grid; place-items:center; background:var(--synT); color:var(--synD); font:800 12.5px var(--m); }
.basketOverlay.recapOverlay .recapCorps{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.basketOverlay.recapOverlay .recapRef{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.basketOverlay.recapOverlay .recapRef b{ font-family:var(--m); font-size:15px; font-weight:800; letter-spacing:-.01em; }
.basketOverlay.recapOverlay .recapStatut{ font-size:10.5px; font-weight:800; color:var(--amb); background:var(--ambL, #fdf3e7); border-radius:6px; padding:2px 6px; }
.basketOverlay.recapOverlay .recapNom{ font-size:13px; color:var(--mu); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.basketOverlay.recapOverlay .recapZones{ display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.basketOverlay.recapOverlay .recapZone{ display:inline-flex; align-items:center; height:26px; padding:0 9px; border-radius:7px; background:var(--zc); color:#fff; font:800 12px var(--m); letter-spacing:.01em; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.basketOverlay.recapOverlay .recapAbsente{ font-size:12.5px; font-style:italic; color:var(--mu); }
.basketOverlay.recapOverlay .recapActs{ display:flex; gap:4px; }
.basketOverlay.recapOverlay .recapAct{ width:34px; height:34px; border:1px solid var(--bd); border-radius:9px; background:var(--surface, #fff); color:var(--mu); display:grid; place-items:center; cursor:pointer; padding:0; transition:border-color var(--tC), color var(--tC), background var(--tC); }
.basketOverlay.recapOverlay .recapAct svg{ width:16px; height:16px; }
.basketOverlay.recapOverlay .recapAct:hover{ border-color:var(--syn); color:var(--syn); }
.basketOverlay.recapOverlay .recapActSup:hover{ border-color:var(--red); color:var(--red); background:var(--redL, #fdeaea); }

.basketOverlay.recapOverlay .recapGroupe{ background:var(--surface, #fff); border:1px solid var(--bd); border-top:3px solid var(--dc, var(--syn)); border-radius:calc(var(--r) + 4px); box-shadow:var(--sh); padding:10px 12px 12px; display:flex; flex-direction:column; gap:10px; }
.basketOverlay.recapOverlay .recapSans{ border-top-color:var(--bd); }
.basketOverlay.recapOverlay .recapGroupeT{ display:flex; align-items:center; gap:8px; font-size:13.5px; }
.basketOverlay.recapOverlay .recapGroupeT b{ font-weight:800; }
.basketOverlay.recapOverlay .recapDepot{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--dc, var(--mu)); background:color-mix(in srgb, var(--dc, var(--syn)) 10%, #fff); border-radius:999px; padding:3px 8px; }
.basketOverlay.recapOverlay .recapArret{ display:grid; grid-template-columns:auto minmax(0, 1fr); gap:10px; align-items:start; }
.basketOverlay.recapOverlay .recapSans .recapArret{ grid-template-columns:minmax(0, 1fr); }
.basketOverlay.recapOverlay .recapArret + .recapArret{ padding-top:10px; border-top:1px dashed var(--bd); }
.basketOverlay.recapOverlay .recapArret ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.basketOverlay.recapOverlay .recapRefLien{ width:100%; display:flex; align-items:baseline; gap:8px; padding:4px 6px; border:0; border-radius:7px; background:none; cursor:pointer; text-align:left; font-family:var(--f); color:var(--tx); }
.basketOverlay.recapOverlay .recapRefLien:hover{ background:var(--synT); }
.basketOverlay.recapOverlay .recapRefLien b{ font-family:var(--m); font-size:13.5px; font-weight:800; white-space:nowrap; }
.basketOverlay.recapOverlay .recapRefLien span{ font-size:12.5px; color:var(--mu); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.basketOverlay.recapOverlay .recapPied{ display:flex; flex-direction:column; gap:10px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:var(--surface, #fff); border-top:1px solid var(--bd); }
.basketOverlay.recapOverlay .recapActions{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.basketOverlay.recapOverlay .recapActions .btn{ height:40px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:0 10px; font-size:13px; }
.basketOverlay.recapOverlay .recapActions .btn svg{ width:16px; height:16px; flex:0 0 auto; }
.basketOverlay.recapOverlay .recapVider:hover{ color:var(--red); border-color:var(--red); }
.basketOverlay.recapOverlay :is(button):focus-visible{ outline:2px solid var(--syn); outline-offset:1px; }
:root:not(.anims-off) .basketOverlay.recapOverlay .recapCarte, :root:not(.anims-off) .basketOverlay.recapOverlay .recapGroupe{ animation:synApparait var(--tM) var(--eS) both; }
@media (max-width:600px){
  .basketOverlay.recapOverlay .recapPanel{ width:100vw; height:92vh; border-radius:20px 20px 0 0; overflow:hidden; }
  .basketOverlay.recapOverlay .recapTete{ padding-top:18px; }
  .basketOverlay.recapOverlay .recapActions .btn{ height:44px; }
}

/* ── 10. Fenêtres de la fiche (assets/index-fiche.js, lot 14 ; lot 26 : rubriques en couleur) ── */
.modalOverlay.fiFen .fiBt{ display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px; padding:0 12px; border-radius:var(--rb, 9px); border:1px solid var(--bd); background:var(--surface, #fff);
  color:var(--tx); font:700 13px var(--f); cursor:pointer; transition:border-color var(--tC), background var(--tC), color var(--tC); }
.modalOverlay.fiFen .fiBt:hover{ border-color:var(--syn); color:var(--syn); }
.modalOverlay.fiFen .fiBt.plein{ background:var(--syn); border-color:var(--syn); color:#fff; }
.modalOverlay.fiFen .fiBt.plein:hover{ background:var(--synD); color:#fff; }
.modalOverlay.fiFen .fiBt.danger{ background:var(--red); border-color:var(--red); color:#fff; }
.modalOverlay.fiFen .fiBt.danger:hover{ background:color-mix(in srgb, var(--red) 85%, #000); color:#fff; }
/* Fenêtres « Ajouter une caractéristique » et « Gérer la fiche » */
.modalOverlay.fiFen{ z-index:1200; }
/* .admField pose display:flex : sans cela, un champ masqué (hidden) restait affiché. */
.modalOverlay.fiFen [hidden]{ display:none !important; }
.modalOverlay.fiFen > .fiBox{ width:min(580px, 100%); max-height:min(88vh, 780px); padding:0; overflow:hidden; display:flex; flex-direction:column; font-family:var(--f); color:var(--tx); }
.modalOverlay.fiFen.fiFenGestion > .fiBox{ width:min(660px, 100%); }
.modalOverlay.fiFen .fiFenTete{ display:flex; align-items:flex-start; gap:12px; padding:18px 18px 14px 20px; border-bottom:1px solid var(--bd); }
.modalOverlay.fiFen .fiFenTete > div{ flex:1; min-width:0; }
.modalOverlay.fiFen .fiFenT{ font-size:18px; font-weight:800; letter-spacing:-.01em; }
.modalOverlay.fiFen .fiFenS{ font-size:12.5px; color:var(--mu); margin-top:3px; line-height:1.45; }
.modalOverlay.fiFen .fiFenX{ width:40px; height:40px; flex:0 0 40px; border-radius:10px; border:1px solid var(--bd); background:var(--surface, #fff); color:var(--mu); font-size:20px; line-height:1; cursor:pointer; }
.modalOverlay.fiFen .fiFenX:hover{ border-color:var(--syn); color:var(--syn); }
.modalOverlay.fiFen .fiFenCorps{ padding:16px 20px 20px; overflow:auto; display:flex; flex-direction:column; gap:12px; }
.modalOverlay.fiFen .fiLb{ font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--mu); }
.modalOverlay.fiFen .fiModG{ --rc:var(--syn); display:flex; flex-direction:column; gap:7px; }
.modalOverlay.fiFen .fiModGT{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800; color:var(--rc); }
.modalOverlay.fiFen .fiModeles{ display:grid; grid-template-columns:repeat(auto-fill, minmax(156px, 1fr)); gap:8px; }
.modalOverlay.fiFen .fiModele{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left; padding:11px 12px; border-radius:calc(var(--r) + 2px); border:1px solid var(--bd); border-left:3px solid var(--rc);
  background:var(--surface, #fff); cursor:pointer; font-family:var(--f); color:var(--tx); transition:border-color var(--tC), background var(--tC), transform var(--tC) var(--eS); }
.modalOverlay.fiFen .fiModele:hover{ border-color:var(--rc); background:color-mix(in srgb, var(--rc) 7%, var(--surface, #fff)); }
.modalOverlay.fiFen .fiModele:active{ transform:scale(.98); }
.modalOverlay.fiFen .fiModele b{ font-size:13.5px; font-weight:800; }
.modalOverlay.fiFen .fiModele small{ font-size:11.5px; color:var(--mu); }
.modalOverlay.fiFen .fiPerso{ display:flex; flex-direction:column; gap:10px; padding:14px; border-radius:calc(var(--r) + 4px); background:color-mix(in srgb, var(--bg) 60%, var(--surface, #fff)); border:1px solid var(--bd); }
.modalOverlay.fiFen :is(.fiPerso, .fiEditC) .admField{ margin:0; }
.modalOverlay.fiFen .fiDeux{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.modalOverlay.fiFen .fiPersoA{ display:flex; justify-content:flex-end; gap:6px; }
.modalOverlay.fiFen .fiMsg{ margin:0; font-size:13px; font-weight:700; color:var(--red); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.modalOverlay.fiFen .fiAide{ margin:0; font-size:12px; color:var(--mu); }
.modalOverlay.fiFen .fiChoixRs{ display:flex; flex-wrap:wrap; gap:6px; }
.modalOverlay.fiFen .fiChoixR{ --rc:var(--syn); display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 12px; border-radius:999px; border:1px solid var(--bd); background:var(--surface, #fff);
  color:var(--tx); font:700 12.5px var(--f); cursor:pointer; transition:border-color var(--tC), background var(--tC), color var(--tC); }
.modalOverlay.fiFen .fiChoixR svg{ color:var(--rc); }
.modalOverlay.fiFen .fiChoixR:hover{ border-color:var(--rc); }
.modalOverlay.fiFen .fiChoixR.on{ border-color:var(--rc); background:color-mix(in srgb, var(--rc) 11%, var(--surface, #fff)); color:var(--rc); box-shadow:inset 0 0 0 1px var(--rc); }
.modalOverlay.fiFen .fiChoixR.fiNouv{ border-style:dashed; }
.modalOverlay.fiFen .fiNouvR{ display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:calc(var(--r) + 2px); border:1px dashed var(--bd); background:var(--surface, #fff); }
.modalOverlay.fiFen .fiCouleurs{ display:flex; flex-wrap:wrap; gap:8px; }
.modalOverlay.fiFen .fiCoul{ width:32px; height:32px; border-radius:50%; border:2px solid var(--surface, #fff); background:var(--rc); box-shadow:0 0 0 1px var(--bd); cursor:pointer; transition:transform var(--tC) var(--eS), box-shadow var(--tC); }
.modalOverlay.fiFen .fiCoul:hover{ transform:scale(1.08); }
.modalOverlay.fiFen .fiCoul.on{ box-shadow:0 0 0 2px var(--rc); transform:scale(1.08); }
.modalOverlay.fiFen .fiIcones{ --rc:var(--syn); display:grid; grid-template-columns:repeat(auto-fill, minmax(42px, 1fr)); gap:6px; }
.modalOverlay.fiFen .fiIcoC{ height:42px; border-radius:10px; border:1px solid var(--bd); background:var(--surface, #fff); color:var(--mu); display:grid; place-items:center; cursor:pointer; transition:border-color var(--tC), background var(--tC), color var(--tC); }
.modalOverlay.fiFen .fiIcoC:hover{ border-color:var(--rc); color:var(--rc); }
.modalOverlay.fiFen .fiIcoC.on{ border-color:var(--rc); background:color-mix(in srgb, var(--rc) 12%, var(--surface, #fff)); color:var(--rc); }
.modalOverlay.fiFen .fiOnglets{ display:flex; gap:4px; border-bottom:1px solid var(--bd); margin:-4px 0 2px; }
.modalOverlay.fiFen .fiOnglet{ height:42px; padding:0 12px; border:0; border-bottom:2.5px solid transparent; background:none; color:var(--mu); font:700 13.5px var(--f); cursor:pointer; display:inline-flex; align-items:center; gap:7px; }
.modalOverlay.fiFen .fiOnglet.on{ color:var(--synD); border-bottom-color:var(--syn); }
.modalOverlay.fiFen .fiNb{ min-width:20px; height:18px; padding:0 6px; border-radius:999px; background:var(--synT); color:var(--synD); font:800 10.5px var(--m); display:inline-grid; place-items:center; }
.modalOverlay.fiFen .fiGestion{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.modalOverlay.fiFen .fiGestion li{ --rc:var(--syn); display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:8px 8px 8px 12px; border:1px solid var(--bd); border-left:3px solid var(--rc); border-radius:calc(var(--r) + 2px); background:var(--surface, #fff); }
.modalOverlay.fiFen .fiGestion li.masque{ background:color-mix(in srgb, var(--bd) 22%, var(--surface, #fff)); }
.modalOverlay.fiFen .fiGestion li.masque .fiGN{ opacity:.6; }
.modalOverlay.fiFen .fiGestion li.ouvert{ border-color:var(--rc); box-shadow:0 0 0 3px color-mix(in srgb, var(--rc) 12%, transparent); }
.modalOverlay.fiFen .fiGPt{ width:10px; height:10px; flex:0 0 10px; border-radius:50%; background:var(--rc); }
.modalOverlay.fiFen .fiGRubs .fiRubIco{ width:32px; height:32px; flex:0 0 32px; border-radius:9px; display:grid; place-items:center; background:color-mix(in srgb, var(--rc) 13%, var(--surface, #fff)); color:var(--rc); }
.modalOverlay.fiFen .fiGN{ flex:1; min-width:140px; display:flex; flex-direction:column; }
.modalOverlay.fiFen .fiGN b{ font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.modalOverlay.fiFen .fiGN small{ font-size:11.5px; color:var(--mu); }
.modalOverlay.fiFen .fiGOutils{ display:flex; gap:4px; margin-left:auto; }
.modalOverlay.fiFen .fiIc{ width:36px; height:36px; flex:0 0 36px; border:1px solid var(--bd); border-radius:9px; background:var(--surface, #fff); color:var(--mu); display:grid; place-items:center; cursor:pointer; }
.modalOverlay.fiFen .fiIc:hover:not(:disabled){ border-color:var(--syn); color:var(--syn); }
.modalOverlay.fiFen .fiIc:disabled{ opacity:.35; cursor:default; }
.modalOverlay.fiFen .fiIc[aria-pressed="true"]{ color:var(--amb); }
.modalOverlay.fiFen .fiIc[aria-expanded="true"]{ border-color:var(--rc); color:var(--rc); }
.modalOverlay.fiFen .fiIc.fiRouge:hover{ border-color:var(--red); color:var(--red); }
.modalOverlay.fiFen .fiIcVide{ visibility:hidden; }
.modalOverlay.fiFen .fiEditC{ flex-basis:100%; display:flex; flex-direction:column; gap:10px; padding:12px 4px 4px; border-top:1px dashed var(--bd); }
.modalOverlay.fiFen .fiNouvelle{ --rc:var(--syn); padding:4px 12px 12px; border:1px solid var(--rc); border-radius:calc(var(--r) + 2px); }
.modalOverlay.fiFen .fiNouvelle .fiEditC{ border-top:0; }
.modalOverlay.fiFen .fiAjoutR{ align-self:flex-start; }
.modalOverlay.fiFen .fiDemande{ flex-basis:100%; display:flex; flex-direction:column; gap:10px; padding:12px; border-radius:var(--r); background:color-mix(in srgb, var(--red) 7%, var(--surface, #fff)); border:1px solid color-mix(in srgb, var(--red) 30%, var(--bd)); animation:synApparait var(--tM) var(--eS) both; }
.modalOverlay.fiFen .fiDemande p{ margin:0; font-size:13.5px; line-height:1.5; }
.modalOverlay.fiFen .fiDemandeA{ display:flex; justify-content:flex-end; gap:6px; }
.modalOverlay.fiFen .fiVide{ color:var(--mu); font-size:13.5px; }
.modalOverlay.fiFen :is(button, input, select):focus-visible{ outline:2px solid var(--syn); outline-offset:1px; }
@media (max-width:520px){
  .modalOverlay.fiFen{ align-items:flex-end; padding:0; }
  .modalOverlay.fiFen > .fiBox, .modalOverlay.fiFen.fiFenGestion > .fiBox{ width:100%; max-height:92vh; border-radius:calc(var(--r) + 8px) calc(var(--r) + 8px) 0 0; padding-bottom:env(safe-area-inset-bottom); }
  :root:not(.anims-off) .modalOverlay.fiFen > .fiBox{ animation:synMonte var(--tL) var(--eS); }   /* la feuille monte du bas */
  .modalOverlay.fiFen .fiFenCorps{ padding:14px 14px 18px; }
  .modalOverlay.fiFen .fiDeux{ grid-template-columns:1fr; }
  .modalOverlay.fiFen .fiModeles{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .modalOverlay.fiFen .fiGOutils{ width:100%; justify-content:flex-end; }
  .modalOverlay.fiFen :is(.fiIc, .fiBt){ min-height:42px; }
  .modalOverlay.fiFen .fiIc{ width:42px; flex-basis:42px; }
  .modalOverlay.fiFen .fiChoixR{ height:40px; }
  .modalOverlay.fiFen input.input, .modalOverlay.fiFen select.input{ font-size:16px; }
}

/* ── 11. Organisation des zones (assets/index-zones.js, lot 14) ── */
/* ── Fenêtre « Organisation des zones » ── */
.modalOverlay.zorgFen{ z-index:1200; }
.modalOverlay.zorgFen > .zorgBox{ width:min(760px, 100%); max-height:min(90vh, 900px); padding:0; overflow:hidden; display:flex; flex-direction:column; font-family:var(--f); color:var(--tx); }
.modalOverlay.zorgFen .zorgTete{ display:flex; align-items:center; gap:14px; padding:18px 18px 16px 20px; border-bottom:1px solid var(--bd); }
.modalOverlay.zorgFen .zorgTete > div{ flex:1; min-width:0; }
.modalOverlay.zorgFen .zorgTeteIco{ width:44px; height:44px; flex:0 0 44px; border-radius:13px; display:grid; place-items:center; background:var(--synT); color:var(--syn); }
.modalOverlay.zorgFen .zorgT{ font-size:19px; font-weight:800; letter-spacing:-.015em; }
.modalOverlay.zorgFen .zorgS{ font-size:12.5px; color:var(--mu); margin-top:2px; }
.modalOverlay.zorgFen .zorgX{ width:38px; height:38px; flex:0 0 38px; border-radius:10px; border:1px solid var(--bd); background:var(--surface, #fff); color:var(--mu); font-size:20px; line-height:1; cursor:pointer; }
.modalOverlay.zorgFen .zorgX:hover{ border-color:var(--syn); color:var(--syn); }
.modalOverlay.zorgFen .zorgCorps{ flex:1; overflow:auto; padding:16px 20px 22px; display:flex; flex-direction:column; gap:22px; background:color-mix(in srgb, var(--bg) 55%, var(--surface, #fff)); }
.modalOverlay.zorgFen .zorgPied{ display:flex; align-items:center; gap:8px; padding:12px 18px; border-top:1px solid var(--bd); background:var(--surface, #fff); }
.modalOverlay.zorgFen .zorgInfo{ flex:1; font-size:12.5px; color:var(--mu); }
.modalOverlay.zorgFen .zorgInfo.err{ color:var(--red); font-weight:700; }
.modalOverlay.zorgFen .zorgSec{ display:flex; flex-direction:column; gap:10px; }
.modalOverlay.zorgFen .zorgSecT{ display:flex; flex-direction:column; gap:1px; }
.modalOverlay.zorgFen .zorgSecT span{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--mu); }
.modalOverlay.zorgFen .zorgSecT small{ font-size:12.5px; color:var(--mu); }
.modalOverlay.zorgFen .zorgDep{ background:var(--surface, #fff); border:1px solid var(--bd); border-top:4px solid var(--dc, var(--syn)); border-radius:calc(var(--r) + 4px); padding:12px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--sh); }
.modalOverlay.zorgFen .zorgDepT{ display:flex; align-items:center; gap:8px; }
.modalOverlay.zorgFen .zorgDepIco{ width:44px; height:44px; flex:0 0 44px; border-radius:12px; border:0; background:var(--dc, var(--syn)); color:#fff; display:grid; place-items:center; cursor:pointer; transition:transform var(--tC) var(--eS); }
.modalOverlay.zorgFen .zorgDepIco:hover{ transform:scale(1.05); }
.modalOverlay.zorgFen .zorgNom{ flex:1; min-width:0; height:38px; border:1px solid var(--bd); border-radius:var(--r); padding:0 10px; font:700 14px var(--f); color:var(--tx); background:var(--surface, #fff); outline:none; }
.modalOverlay.zorgFen .zorgDepNom{ font-size:16px; font-weight:800; height:42px; }
.modalOverlay.zorgFen .zorgNom:focus{ border-color:var(--syn); box-shadow:0 0 0 3px var(--synT); }
.modalOverlay.zorgFen .zorgCoul{ width:38px; height:38px; flex:0 0 38px; padding:0; border:1px solid var(--bd); border-radius:var(--r); background:none; cursor:pointer; }
.modalOverlay.zorgFen .zorgOrd{ display:inline-flex; gap:2px; }
.modalOverlay.zorgFen .zorgIc{ width:34px; height:34px; flex:0 0 34px; border:1px solid var(--bd); border-radius:9px; background:var(--surface, #fff); color:var(--mu); display:grid; place-items:center; cursor:pointer; padding:0; }
.modalOverlay.zorgFen .zorgIc:hover:not(:disabled){ border-color:var(--syn); color:var(--syn); }
.modalOverlay.zorgFen .zorgIc:disabled{ opacity:.35; cursor:default; }
.modalOverlay.zorgFen .zorgIc[aria-expanded="true"]{ background:var(--synT); border-color:var(--syn); color:var(--syn); }
.modalOverlay.zorgFen .zorgIcones{ display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:6px; padding:10px; border-radius:var(--r); background:color-mix(in srgb, var(--bg) 70%, var(--surface, #fff)); }
.modalOverlay.zorgFen .zorgIcones button{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px; border:1px solid transparent; border-radius:var(--r); background:none; color:var(--tx); font:700 11.5px var(--f); cursor:pointer; }
.modalOverlay.zorgFen .zorgIcones button:hover{ background:var(--surface, #fff); border-color:var(--bd); }
.modalOverlay.zorgFen .zorgIcones button.on{ background:var(--surface, #fff); border-color:var(--dc, var(--syn)); color:var(--dc, var(--syn)); }
.modalOverlay.zorgFen .zorgBlocs{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.modalOverlay.zorgFen .zorgBloc{ --bc:var(--dc); border:1px solid var(--bd); border-radius:var(--r); background:var(--surface, #fff); padding:8px; display:flex; flex-direction:column; gap:8px; }
.modalOverlay.zorgFen .zorgBloc.cache{ background:color-mix(in srgb, var(--bg) 70%, var(--surface, #fff)); }
.modalOverlay.zorgFen .zorgBloc.ouvert{ border-color:color-mix(in srgb, var(--syn) 50%, var(--bd)); box-shadow:0 0 0 3px var(--synT); }
.modalOverlay.zorgFen .zorgBlocL{ display:flex; align-items:center; gap:6px; }
.modalOverlay.zorgFen .zorgCompte{ font-family:var(--m); font-size:11.5px; font-weight:700; color:var(--mu); white-space:nowrap; padding:0 4px; }
.modalOverlay.zorgFen .zorgBlocOpts{ display:flex; flex-wrap:wrap; gap:6px 14px; padding:0 4px 2px 44px; }
.modalOverlay.zorgFen .zorgOpt{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.modalOverlay.zorgFen .zorgOpt span{ display:flex; flex-direction:column; line-height:1.2; }
.modalOverlay.zorgFen .zorgOpt b{ font-size:12.5px; }
.modalOverlay.zorgFen .zorgOpt small{ font-size:11px; color:var(--mu); }
.modalOverlay.zorgFen .zorgOpt .switch{ width:38px; height:22px; }
.modalOverlay.zorgFen .zorgOpt .switch::after{ width:16px; height:16px; }
.modalOverlay.zorgFen .zorgOpt .switch[aria-checked="true"]{ background:var(--syn); }
.modalOverlay.zorgFen .zorgOpt .switch[aria-checked="true"]::after{ transform:translateX(16px); }
.modalOverlay.zorgFen .zorgOptSel select{ height:32px; border:1px solid var(--bd); border-radius:8px; padding:0 8px; font:600 13px var(--f); background:var(--surface, #fff); color:var(--tx); }
.modalOverlay.zorgFen .zorgDetail{ margin:0 0 0 44px; padding:10px 12px; border-radius:var(--r); background:color-mix(in srgb, var(--bg) 70%, var(--surface, #fff)); display:flex; flex-direction:column; gap:10px; }
.modalOverlay.zorgFen .zorgDetT{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:13px; }
.modalOverlay.zorgFen .zorgSeg{ display:inline-flex; gap:3px; padding:3px; border-radius:calc(var(--r) + 2px); background:color-mix(in srgb, var(--bd) 45%, transparent); }
.modalOverlay.zorgFen .zorgSeg button{ height:30px; min-width:40px; padding:0 12px; border:0; border-radius:var(--r); background:none; color:var(--mu); font:700 12.5px var(--f); cursor:pointer; }
.modalOverlay.zorgFen .zorgSeg button.on{ background:var(--surface, #fff); color:var(--syn); box-shadow:0 1px 3px rgba(2,6,23,.08); }
.modalOverlay.zorgFen .zorgZones{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:6px; }
.modalOverlay.zorgFen .zorgZones.manuel{ grid-template-columns:minmax(0, 1fr); }
.modalOverlay.zorgFen .zorgZones li{ display:flex; align-items:center; gap:8px; padding:5px 6px 5px 10px; border-radius:9px; background:var(--surface, #fff); border:1px solid var(--bd); }
.modalOverlay.zorgFen .zorgZp{ width:10px; height:10px; border-radius:3px; background:var(--zc); flex:0 0 10px; }
.modalOverlay.zorgFen .zorgZn{ flex:1; min-width:0; font-family:var(--m); font-size:13px; font-weight:700; }
.modalOverlay.zorgFen .zorgZr{ font-size:11.5px; color:var(--mu); }
.modalOverlay.zorgFen .zorgZones .zorgIc{ width:30px; height:30px; flex-basis:30px; }
.modalOverlay.zorgFen .zorgVide{ margin:0; font-size:12.5px; color:var(--mu); }
.modalOverlay.zorgFen .zorgDetA{ display:flex; flex-wrap:wrap; gap:8px; }
.modalOverlay.zorgFen .zorgDetA .btn{ height:34px; padding:0 12px; font-size:12.5px; display:inline-flex; align-items:center; gap:6px; }
.modalOverlay.zorgFen .zorgDanger:not(:disabled){ color:var(--red); }
.modalOverlay.zorgFen .zorgAjout{ display:inline-flex; align-items:center; justify-content:center; gap:6px; height:38px; border:1.5px dashed color-mix(in srgb, var(--syn) 35%, var(--bd)); border-radius:var(--r); background:none; color:var(--syn); font:700 13px var(--f); cursor:pointer; }
.modalOverlay.zorgFen .zorgAjout:hover{ background:var(--synT); }
.modalOverlay.zorgFen .zorgAjoutDep{ height:46px; }
.modalOverlay.zorgFen .zorgLigne{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 12px; border-radius:var(--r); background:var(--surface, #fff); border:1px solid var(--bd); cursor:default; }
.modalOverlay.zorgFen label.zorgLigne{ cursor:pointer; }
.modalOverlay.zorgFen .zorgLigne > span{ display:flex; flex-direction:column; }
.modalOverlay.zorgFen .zorgLigne b{ font-size:13.5px; }
.modalOverlay.zorgFen .zorgLigne small{ font-size:12px; color:var(--mu); }
.modalOverlay.zorgFen .zorgLigne .switch[aria-checked="true"]{ background:var(--syn); }
.modalOverlay.zorgFen :is(button, input, select):focus-visible{ outline:2px solid var(--syn); outline-offset:1px; }
@media (max-width:640px){
  .modalOverlay.zorgFen{ align-items:flex-end; padding:0; }
  .modalOverlay.zorgFen > .zorgBox{ width:100%; max-height:94vh; border-radius:calc(var(--r) + 8px) calc(var(--r) + 8px) 0 0; padding-bottom:env(safe-area-inset-bottom); }
  .modalOverlay.zorgFen .zorgCorps{ padding:12px 12px 18px; }
  .modalOverlay.zorgFen .zorgDepT{ flex-wrap:wrap; }
  .modalOverlay.zorgFen .zorgDepNom{ flex:1 1 140px; }
  .modalOverlay.zorgFen .zorgBlocL{ flex-wrap:wrap; }
  .modalOverlay.zorgFen .zorgBlocL .zorgNom{ flex:1 1 120px; }
  .modalOverlay.zorgFen .zorgBlocOpts, .modalOverlay.zorgFen .zorgDetail{ padding-left:4px; margin-left:0; }
  .modalOverlay.zorgFen .zorgNom{ font-size:16px; }
  .modalOverlay.zorgFen .zorgLigne{ flex-wrap:wrap; }
}