/* ═══════════════════════════════════════════════════════════════════════════
   PASSERELLE 2.0 — les composants partagés
   ═══════════════════════════════════════════════════════════════════════════

   Chargé EN DERNIER par chaque page. Il ne touche pas à la mise en page des
   modules : il donne à leurs boutons, badges, cartes, tableaux, champs,
   onglets et avertissements UNE seule allure, pour qu'un bouton de la pige et
   un bouton du mandat soient le même bouton. « Éviter 15 versions légèrement
   différentes du même bouton, badge ou tableau » (§ 51 du Design System).

   Les jetons viennent de portail-shell.css. */

/* ═══════════════════════════ BOUTONS — quatre niveaux ═══════════════════════════
   Secondaire (par défaut) : fond blanc, bordure grise.
   Principal : fond rouge KW — Créer, Ajouter, Enregistrer, Attribuer.
   Fantôme : les actions d'appoint — Plus d'infos, Ouvrir.
   Succès : Fait, Terminé, Validé — vert très clair, jamais saturé. */
.btn,.btn-secondary,.btn-primary,.btn-danger,.btn-mini,.btn-retirer{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;
  border:1px solid var(--border-default);border-radius:999px;background:#fff;color:var(--text-primary);
  font:600 13.5px/1 var(--font);letter-spacing:0;text-decoration:none;white-space:nowrap;cursor:pointer;
  box-shadow:var(--shadow-xs);transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease}
.btn:hover,.btn-secondary:hover,.btn-mini:hover,.btn-retirer:hover{border-color:var(--border-strong);background:var(--bg-hover)}
.btn:active{transform:translateY(.5px)}
.btn:disabled,.btn[aria-disabled="true"],.btn-primary:disabled,.btn-secondary:disabled{opacity:.55;cursor:default;transform:none}
.btn svg{width:16px;height:16px;stroke-width:1.9}
.btn--sm,.btn-mini{height:30px;padding:0 12px;font-size:12.5px;border-radius:999px}
.btn--gros{height:42px;padding:0 18px;font-size:14px}
.btn--ic{width:36px;padding:0}
.btn--sm.btn--ic{width:30px}

/* Principal */
.btn--pri,.btn-primary,.btn--rouge,.btn--kw{background:var(--kw-red);border-color:var(--kw-red);color:#fff;font-weight:600}
.btn--pri:hover,.btn-primary:hover,.btn--rouge:hover,.btn--kw:hover{background:var(--kw-red-hover);border-color:var(--kw-red-hover);color:#fff}
/* Fantôme */
.btn--ghost,.btn--fantome{background:transparent;border-color:transparent;box-shadow:none;color:var(--text-secondary)}
.btn--ghost:hover,.btn--fantome:hover{background:var(--bg-hover);color:var(--text-primary);border-color:transparent}
/* Succès */
.btn--done,.btn--ok,.btn--succes{background:var(--green-soft);border-color:var(--green-border);color:var(--green);box-shadow:none}
.btn--done:hover,.btn--ok:hover,.btn--succes:hover{background:#DDF3E7;border-color:#B5E0CA;color:#0F6E4A}
/* Destructif : une bordure et un texte rouges, jamais un pavé plein. */
.btn-danger,.btn--refus,.btn-retirer{color:var(--kw-red);border-color:var(--kw-red-border)}
.btn-danger:hover,.btn--refus:hover,.btn-retirer:hover{background:var(--kw-red-soft);border-color:#EAB7B7;color:var(--kw-red-hover)}
/* Les boutons de marque tiers gardent leur identité, en sourdine. */
.btn--fb{color:#1D4ED8;border-color:var(--blue-border)}
.btn--fb:hover{background:var(--blue-soft)}

/* ═══════════════════════════ BADGES ═══════════════════════════
   24 à 26 px de haut, coins de 6 à 7 px, 11 à 12 px de texte. Un badge n'est
   jamais un gros bouton. */
.tag,.chip,.etiq,.badge{display:inline-flex;align-items:center;gap:5px;min-height:22px;padding:2px 8px;border-radius:6px;
  font-size:11.5px;font-weight:550;line-height:1.3;border:1px solid var(--border-default);background:#fff;color:var(--ink-2)}
.tag--red,.badge--critique{background:var(--kw-red-soft);border-color:var(--kw-red-border);color:var(--kw-red-hover)}
.tag--warn,.badge--attention{background:var(--orange-soft);border-color:var(--orange-border);color:var(--orange-text)}
.tag--info,.badge--info{background:var(--blue-soft);border-color:var(--blue-border);color:#1D4ED8}
.tag--ok,.badge--succes{background:var(--green-soft);border-color:var(--green-border);color:var(--green)}
.tag--mut,.badge--neutre{background:var(--bg-subtle);border-color:var(--border-subtle);color:var(--text-secondary)}
.badge--ia{background:var(--purple-soft);border-color:var(--purple-border);color:var(--purple)}
.pill{border-radius:7px}
.pill--red{background:var(--kw-red);color:#fff}

/* ═══════════════════════════ CARTES ═══════════════════════════ */
.card,.mk__carte{background:#fff;border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs)}

/* ═══════════════════════════ ONGLETS ═══════════════════════════ */
.onglets{display:flex;gap:4px;border-bottom:1px solid var(--border-default);margin-bottom:var(--s4);overflow-x:auto;scrollbar-width:none}
.onglets::-webkit-scrollbar{display:none}
.onglet,.tab{position:relative;padding:10px 14px;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;
  font:500 13.5px/1.2 var(--font);color:var(--text-secondary);cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s}
.onglet:hover,.tab:hover{color:var(--text-primary)}
.onglet--ici,.onglet.on,.tab.active{color:var(--text-primary);border-bottom-color:var(--kw-red);font-weight:600;background:transparent}
.tab{border-radius:0;border-width:0 0 2px}
.onglet__n{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:6px;background:var(--border-subtle);color:var(--ink-2);font-size:11px;font-weight:650}
.onglet--ici .onglet__n,.onglet.on .onglet__n{background:var(--text-primary);color:#fff}

/* ═══════════════════════════ CHAMPS ═══════════════════════════
   42 px de haut pour un champ de formulaire, 40 px pour une recherche ; coins
   de 8 px ; bordure #DDE1E7 ; le focus en rouge KW avec un halo très léger. */
.body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]):not([type=submit]):not([type=button]),
.body select,.body textarea{
  font:400 14px/1.4 var(--font);color:var(--text-primary);background:#fff;border:1px solid var(--border-input);border-radius:8px;
  transition:border-color .15s ease,box-shadow .15s ease}
.body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]):not([type=submit]):not([type=button]),
.body select{min-height:40px}
.body textarea{padding:10px 12px}
.body input::placeholder,.body textarea::placeholder{color:var(--text-tertiary)}
.body input:not([type=checkbox]):not([type=radio]):focus,.body select:focus,.body textarea:focus{
  outline:0;border-color:var(--kw-red);box-shadow:0 0 0 3px rgba(180,1,1,.08)}
/* Un champ de recherche logé dans son cadre à loupe : c'est le cadre qui porte
   la bordure, le champ reste nu. */
.body .search input,.body [class$="__q"] input,.body [class*="__q "] input,.body .outils__q input,.body .filtres__q input{
  border:0 !important;box-shadow:none !important;background:transparent !important;min-height:0 !important;border-radius:0}
.body [class$="__q"],.body .outils__q,.body .filtres__q{border-color:var(--border-input);border-radius:8px;min-height:40px}
.body [class$="__q"]:focus-within,.body .outils__q:focus-within,.body .filtres__q:focus-within{border-color:var(--kw-red);box-shadow:0 0 0 3px rgba(180,1,1,.08)}
.body input:disabled,.body select:disabled,.body textarea:disabled{background:var(--bg-subtle);color:var(--text-secondary)}
.body input[type=checkbox],.body input[type=radio]{accent-color:var(--kw-red)}
.body label{font-weight:500}
.body .champ > label,.body .champ > span:first-child{font-size:13px;font-weight:550;color:var(--ink-2)}
.filtres select,.filtres input{height:40px}

/* ═══════════════════════════ TABLEAUX — à la Linear ═══════════════════════════
   En-tête discret, séparateurs horizontaux légers, jamais de quadrillage,
   survol subtil de la ligne, actions à droite. */
.body table{border-collapse:collapse;border-spacing:0}
.body table th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.055em;color:var(--text-secondary);
  background:transparent;border:0;border-bottom:1px solid var(--border-default);padding:10px 12px;text-align:left;white-space:nowrap}
.body table td{border:0;border-bottom:1px solid var(--border-subtle);padding:12px;vertical-align:middle}
.body table tbody tr{transition:background .12s}
.body table tbody tr:hover td{background:var(--bg-subtle)}
.body table tbody tr:last-child td{border-bottom:0}
.table-wrap,.tbl-wrap,.mk__table-defile{overflow-x:auto}

/* ═══════════════════════════ AVERTISSEMENTS — compacts ═══════════════════════════ */
.alerte-rouge{border-radius:var(--radius-md)}
.encart{border-radius:var(--radius-md)}
.avert--ok{border-color:var(--green-border);background:var(--green-soft);color:var(--green)}

/* ═══════════════════════════ ÉTAT VIDE ═══════════════════════════ */
.ds-vide{display:flex;flex-direction:column;align-items:center;gap:4px;padding:28px 16px;text-align:center;color:var(--text-secondary);font-size:13.5px}
.ds-vide b{color:var(--text-primary);font-size:14px;font-weight:600}
.ds-vide__ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--green-soft);color:var(--green);margin-bottom:6px}
.ds-vide__ico svg{width:18px;height:18px}

/* ═══════════════════════════ SQUELETTES ═══════════════════════════
   Un chargement Modelo ne s'annonce plus par « Chargement… » seul : rail.js
   pose `ds-charge` sur ces zones, et elles prennent la forme de lignes qui
   respirent. Le texte reste là pour les lecteurs d'écran. */
.ds-charge{position:relative;overflow:hidden;color:transparent !important;min-height:62px}
.ds-charge > *{visibility:hidden}
.ds-charge::before{content:"";position:absolute;left:0;right:28%;top:8px;bottom:8px;border-radius:6px;
  background:repeating-linear-gradient(180deg,#ECEEF2 0 12px,transparent 12px 23px)}
.ds-charge::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  transform:translateX(-100%);animation:ds-souffle 1.3s ease-in-out infinite}
.ds-charge--ligne{min-height:0;display:inline-block;min-width:120px}
.ds-charge--ligne::before{top:2px;bottom:2px;right:0;background:#ECEEF2}
@keyframes ds-souffle{to{transform:translateX(100%)}}

/* ═══════════════════════════ TOASTS ═══════════════════════════
   En haut à droite, trois à cinq secondes, discrets. */
.ds-toasts{position:fixed;top:calc(var(--topbar-height) + 12px);right:20px;z-index:90;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.ds-toast{pointer-events:auto;display:flex;align-items:center;gap:10px;min-width:260px;max-width:380px;padding:11px 14px;
  background:#fff;border:1px solid var(--border-default);border-left:3px solid var(--green);border-radius:10px;box-shadow:var(--shadow-md);
  font-size:13.5px;color:var(--text-primary);animation:ds-toast .18s ease-out}
.ds-toast--erreur{border-left-color:var(--kw-red)}
.ds-toast--info{border-left-color:var(--blue)}
.ds-toast svg{width:16px;height:16px;flex:0 0 auto}
.ds-toast--ok svg{color:var(--green)}
.ds-toast--erreur svg{color:var(--kw-red)}
@keyframes ds-toast{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ═══════════════════════════ TIROIR (drawer) ═══════════════════════════ */
.ds-tiroir{position:fixed;top:0;right:0;bottom:0;width:min(560px,100vw);background:#fff;z-index:70;
  box-shadow:-12px 0 32px rgba(16,24,40,.14);display:flex;flex-direction:column}

/* ═══════════════════════════ PAGES : les ajustements de la charte ═══════════════════════════ */

/* Leads : l'en-tête ne colle plus ; c'est la barre du haut qui colle. */
body.vue-agents .onglets{top:var(--topbar-height) !important}
.agents__tete{top:calc(var(--topbar-height) + var(--h-onglets,0px)) !important}

/* ═══════════════════════════ LE ROUGE AVEC PARCIMONIE ═══════════════════════════
   Le rouge KW dit : navigation active, action principale, alerte critique,
   identité. Tout le reste passe en encre ou en gris. Les alertes réelles
   (champ à renseigner, écart bloquant, manque d'une offre) restent rouges. */

/* Les numéros d'étape des parcours (offre, mandat, bail) : un repère. */
.etape__n,.verrou__p{background:var(--text-primary)}
.verrou--alerte .verrou__p{background:var(--orange)}

/* Les filtres segmentés et les puces de filtre : la sélection en encre. */
.seg{border-color:var(--border-default);border-radius:8px}
.seg__b{color:var(--text-secondary)}
.seg__b--ici,.reg__onglet[aria-selected="true"]{background:var(--text-primary) !important;border-color:var(--text-primary) !important;color:#fff !important}
.reg__onglet{border-radius:8px;min-height:36px;padding:6px 12px}

/* Dossiers et bilans : le type en étiquette neutre, « à toi » en encre. */
.dos--mien .dos__t{color:var(--ink-2)}
.dos--mien .dos__d{color:var(--text-primary)}
.doss{border-radius:var(--radius-lg);box-shadow:var(--shadow-xs)}
.dos{min-height:56px;border-top-color:var(--border-subtle)}
.dos:hover{background:var(--bg-subtle)}

/* Les titres de bloc et les étiquettes de section : gris. */
.bloc__t,.jur__st,.note__st{color:var(--text-secondary)}

/* Les liens de contact et d'ouverture : en encre, soulignés au survol. */
.pige__v a,.fbe__l a{color:var(--text-primary)}
.pige__v a:hover,.fbe__l a:hover{color:var(--kw-red);text-decoration:underline}
.detail summary{color:var(--text-primary)}
.lien-sup{color:var(--text-secondary)}

/* ── Conseiller juridique : un produit de connaissance, plus une grande zone
      rose. L'avertissement reste, compact ; la porte d'entrée devient une
      carte blanche. ── */
.jur__garde{border:1px solid var(--border-default);border-left:3px solid var(--orange);background:var(--bg-subtle);color:var(--ink-2)}
.jur__nb{background:#fff;border:1px solid var(--border-default);box-shadow:var(--shadow-xs);padding:20px 24px}
.jur__nb-t{color:var(--text-primary);font-size:18px;font-weight:650;letter-spacing:-.015em}

/* ── Registre et répertoire : les chiffres restent grands, sans crier. ── */
.reg__geant{color:var(--text-primary)}

/* Contacts : les actions de ligne en encre, le rouge au survol seulement. */
.row-actions button{color:var(--text-secondary);text-decoration:none;font-weight:500;border-radius:6px;padding:4px 8px}
.row-actions button:hover{color:var(--kw-red);background:var(--kw-red-soft)}
.acq-nom,.depot-titre{color:var(--text-primary)}

/* Suivi des pièces : la liste vide devient un état vide, pas une ligne perdue. */
[data-module="pieces"] #liste > p.aide:only-child:not(.ds-charge){margin:8px 0 0;padding:32px 24px;text-align:center;
  background:#fff;border:1px dashed var(--border-strong);border-radius:var(--radius-lg);color:var(--text-secondary);font-size:13.5px}

/* AU DOIGT, 44 PIXELS (30/09/2026). Ce fichier, chargé en dernier, ramenait les
   boutons à 36 et 30 px et écrasait les règles tactiles des pages : le bouton
   « Fait » de l'accueil se ratait au pouce. Sur écran tactile seulement. */
@media (pointer:coarse){
  .btn,.btn-secondary,.btn-primary,.btn-danger,.btn-mini,.btn-retirer,.btn--sm{min-height:44px}
  .btn--ic,.btn--sm.btn--ic{min-width:44px}
}

/* AU TÉLÉPHONE (audit du 15/10/2026, F-09) : des champs à 16 px — Safari iOS zoome sur tout champ plus petit. */
@media (max-width:768px){
  .body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]):not([type=submit]):not([type=button]),
  .body select,.body textarea{font-size:16px}
}

/* ═══════════════════════════ BULLES D'INFORMATION (22/10/2026) ═══════════════════════════
   « Les informations complémentaires actuellement écrites en petits caractères, à masquer derrière de petits
   ronds noirs avec un i blanc au centre » (Divy BARTRA, sur le modèle de la console AWS). La pastille est posée
   par rail.js (KWInfo) au bout du titre ou du libellé ; la phrase d'aide garde sa place dans la page, cachée,
   et s'ouvre en bulle par-dessus le contenu, sans rien décaler. 18 px à l'écran, 44 px de cible au doigt. */
.ds-info{position:relative;display:inline-grid;place-items:center;width:18px;height:18px;margin:0 0 0 7px;
  border-radius:50%;background:var(--text-primary);color:#fff;vertical-align:middle;cursor:pointer;flex:0 0 auto;
  font:italic 700 11.5px/1 Georgia,"Times New Roman",serif;letter-spacing:0;text-transform:none;user-select:none;
  transition:background .15s ease,transform .15s ease;-webkit-tap-highlight-color:transparent}
.ds-info::before{content:"i"}
.ds-info[hidden],.ds-info-libre[hidden]{display:none}
.ds-info-colle{white-space:nowrap}
.ds-info::after{content:"";position:absolute;inset:-13px}  /* la cible au doigt */
.ds-info:hover{background:#3A3F48}
.ds-info[aria-expanded="true"]{background:var(--kw-red)}
.ds-info:focus-visible{outline:2px solid var(--kw-red);outline-offset:2px;border-radius:50%}
.ds-info--titre{width:20px;height:20px;margin-left:10px;font-size:12.5px;transform:translateY(-2px)}
.ds-info-libre{display:inline-flex;align-items:center;gap:7px;margin:4px 0 8px;font-size:13px;font-weight:500;color:var(--text-secondary);cursor:pointer;user-select:none}
.ds-info-libre .ds-info{margin:0}
.ds-info-libre:hover{color:var(--text-primary)}
h1 .ds-info,h2 .ds-info,h3 .ds-info,h4 .ds-info{font-weight:700}
.ds-info__bulle.ds-info__bulle{display:none}
.ds-info__bulle.ds-info__bulle--ouverte{display:block;position:fixed;z-index:90;width:max-content;max-width:min(360px,calc(100vw - 24px));
  margin:0;padding:12px 14px;background:#fff;border:1px solid var(--border-default);border-radius:12px;
  box-shadow:0 12px 32px rgba(16,24,40,.16);color:var(--text-primary);font:400 13.5px/1.55 var(--font);
  text-align:left;white-space:normal;text-transform:none;letter-spacing:0}
.ds-info__bulle--ouverte.ds-info__bulle--suite{border-top-left-radius:0;border-top-right-radius:0;border-top-color:var(--border-subtle);box-shadow:0 12px 32px rgba(16,24,40,.12)}
.ds-info__bulle--ouverte[hidden]{display:none}
.ds-info__bulle--ouverte a{color:var(--kw-red)}
@media (max-width:767px){
  .ds-info__bulle.ds-info__bulle--ouverte{max-width:calc(100vw - 24px);font-size:14.5px}
}
@media print{.ds-info{display:none}}

/* LISIBILITÉ (22/10/2026, sur le modèle de la console AWS) : les en-têtes de tableau et les libellés des champs
   un cran plus grands, les libellés en encre. Les aides, elles, sont passées dans les bulles ci-dessus. */
.body table th{font-size:12px;letter-spacing:.04em}
.body .champ > label,.body .champ > span:first-child{font-size:13.5px;font-weight:600;color:var(--text-primary)}

/* AU TÉLÉPHONE ET À LA TABLETTE, LES TABLEAUX DÉFILENT (22/10/2026, repasse du design) : les tableaux écrits par les
   modules sans cadre de défilement (registre des mandats, statistiques des bilans, suivi de la bascule) sortaient de
   l'écran, jusqu'à 981 px pour une largeur de 768. */
@media (max-width:1023px){
  .body table.tbl,.body table.sb-tbl{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}