/* Baudilia : la mise en page et les écrans, sur le design system Baudi (docs/design-system/baudi/).
   Chargée après baudi/tokens.css et baudi/bundle.css, qu'on ne modifie pas : tout ce qui est propre à Baudilia vit ici. */

/* Le kit ne prévoit le sombre que sur choix (data-theme) ; Baudilia suit aussi le réglage du système (« Auto »). */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --canvas:#1f181e;--surface:#2a2229;--surface-sunken:#241d23;--surface-blush:#33262f;--ink:#f6eef1;--ink-muted:#bfafb8;
  --ink-faint:#8c7e8a;--ink-inverse:#3b2e3a;--line:#3e333c;--line-strong:#857480;--outline:#f6eef1;--action:#f4a7b9;
  --action-hover:#f8c9d4;--pink-soft:#4a2f3b;--pink-strong:#f4a7b9;--mint-soft:#213a33;--mint-strong:#9ed3c0;
  --butter-soft:#3d3320;--butter-strong:#f8d57e;--danger:#ff8fa6;--danger-soft:#45222b;--scrim:rgba(0,0,0,.55);
  --shadow-sticker:0 2px 0 rgba(0,0,0,.35);--shadow-float:0 8px 24px rgba(0,0,0,.45);--shadow-modal:0 20px 56px rgba(0,0,0,.6)}
  :root:not([data-theme="light"]) .bd-btn--danger{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}
}

html,body{margin:0}
body{background:var(--canvas);min-height:100vh}
h1,h2,h3,p{margin:0}
a{color:inherit}
button{color:inherit}
.bd svg{flex:none}

/* --- la charpente : barre latérale + contenu ------------------------------------------------- */
.app{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100vh;
  /* le fond de la barre latérale descend jusqu'en bas d'une page longue (la barre, elle, reste collée en haut) */
  background:linear-gradient(to right,var(--surface-sunken) calc(var(--sidebar) - 1px),var(--line) calc(var(--sidebar) - 1px),
    var(--line) var(--sidebar),transparent var(--sidebar))}
.bd-sidebar{position:sticky;top:0;height:100vh;overflow-y:auto}
.bd-sidebar>*{flex-shrink:0}   /* fenêtre basse : la barre défile, les onglets ne se tassent pas */
.bd-sidebar__brand{color:var(--ink);text-decoration:none}
.bd-sidebar .bas{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-top:var(--space-3);
  border-top:var(--border-hair) solid var(--line)}
.bd-sidebar form{margin:0}
.bd-sidebar button.bd-nav-item{width:100%;border:0;background:none;text-align:left;font-family:inherit}
.moi{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3) var(--space-3)}
.moi strong{display:block;font-size:14px;line-height:1.2}
.moi small{font-size:12px}
.contenu{padding:var(--space-8) var(--space-10) var(--space-14);min-width:0}
.mobile-barre,.voile{display:none}
.marque{display:flex;align-items:center;gap:var(--space-2);font-size:16px;font-weight:800;letter-spacing:-.01em}
.marque img{width:28px;height:28px}
@media (max-width:767px){
  .app{grid-template-columns:minmax(0,1fr);background:none}
  .mobile-barre{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);position:sticky;
    top:0;z-index:20;background:var(--surface);border-bottom:var(--border-hair) solid var(--line)}
  .bd-sidebar{position:fixed;inset:0 auto 0 0;z-index:40;transform:translateX(-100%);
    transition:transform 240ms cubic-bezier(.2,0,0,1);box-shadow:var(--shadow-modal)}
  body.nav-ouverte .bd-sidebar{transform:none}
  body.nav-ouverte .voile{display:block;position:fixed;inset:0;z-index:30;background:var(--scrim)}
  .contenu{padding:var(--space-5) var(--space-4) var(--space-10)}
}
@media (prefers-reduced-motion:reduce){.bd-sidebar{transition:none}}

/* --- porte d'entrée (signée par la maison : on vouvoie) ----------------------------------------- */
.porte{min-height:100vh;display:grid;place-items:center;padding:var(--space-6) var(--space-4)}
.porte .bd-card{width:100%;max-width:420px;display:grid;justify-items:center;gap:var(--space-3);text-align:center;
  padding:var(--space-10) var(--space-8)}
.porte svg{width:120px;height:120px}
.porte h1{font-size:32px;font-weight:800;letter-spacing:-.02em}
.porte .bd-btn{margin-top:var(--space-2)}
.porte .petit{font-size:13px}
.porte .logo{margin:var(--space-1) 0}
.porte .logo img{display:block;height:34px;width:auto}
/* Sur fond sombre, toujours la version négative du logo (règle du kit). */
.logo-marque img{display:block;height:26px;width:auto}
.porte .logo .sombre,.logo-marque .sombre{display:none}
:root[data-theme="dark"] .porte .logo .clair,:root[data-theme="dark"] .logo-marque .clair{display:none}
:root[data-theme="dark"] .porte .logo .sombre,:root[data-theme="dark"] .logo-marque .sombre{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .porte .logo .clair,
  :root:not([data-theme="light"]) .logo-marque .clair{display:none}
  :root:not([data-theme="light"]) .porte .logo .sombre,:root:not([data-theme="light"]) .logo-marque .sombre{display:block}}
.porte .bd-banner{text-align:left}

/* --- accueil --------------------------------------------------------------------------------- */
.accueil-tete{display:flex;align-items:center;gap:var(--space-5);margin-bottom:var(--space-6)}
.accueil-tete svg{width:96px;height:96px}
.accueil-tete h1{font-size:28px;font-weight:800;letter-spacing:-.015em;line-height:1.2}
.accueil-tete p{font-size:16px;color:var(--ink-muted);margin-top:var(--space-1)}
.accueil-question{margin-bottom:var(--space-8)}
.bd-composer input{flex:1;min-width:0;height:36px;border:0;outline:none;background:transparent;padding:0 var(--space-2);
  font:400 16px/1.5 var(--font-sans);color:var(--ink)}
.bd-composer input::placeholder{color:var(--ink-muted)}
/* Le contour de focus du kit (.bd :focus-visible) s'ajoutait au cadre de la zone de saisie : le cadre montre déjà
   le focus (contour prune + halo rose), le champ intérieur n'en dessine pas un second. */
.bd .bd-composer input:focus-visible,.bd .bd-composer textarea:focus-visible{outline:none}
.grille{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--space-6);align-items:start}
@media (max-width:1100px){.grille{grid-template-columns:minmax(0,1fr)}}
.bd-card h2{font-size:18px;font-weight:700;display:flex;align-items:center;gap:var(--space-2)}
.sous{color:var(--ink-muted);font-size:13px;margin:var(--space-1) 0 var(--space-4)}
.val{border-top:var(--border-hair) solid var(--line);padding:var(--space-3) 0;display:grid;grid-template-columns:auto 1fr;
  gap:var(--space-1) var(--space-3)}
.val:first-child{border-top:0;padding-top:0}
.val .bd-chip{grid-row:span 2;align-self:start}
.val .meta{color:var(--ink-muted);font-size:13px;margin-top:2px}
.vide-carte{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4);border-radius:var(--radius-md);
  background:var(--surface-blush);color:var(--ink-muted)}
.vide-carte img{width:64px;height:64px;flex:none}
.bd-empty{max-width:640px}
.introuvable{margin:12vh auto 0}

/* --- Demander : le chat ------------------------------------------------------------------------ */
.chat{display:grid;grid-template-columns:232px minmax(0,1fr);gap:var(--space-8);align-items:start}
@media (max-width:1100px){.chat{grid-template-columns:minmax(0,1fr)}.convs{order:2;position:static}}
.convs{position:sticky;top:var(--space-8);display:flex;flex-direction:column}
.convs .bd-caption{margin:var(--space-5) var(--space-3) var(--space-2)}
.convs ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:2px;max-height:65vh;
  overflow-y:auto;overflow-x:hidden}
.conv{width:100%;text-align:left;border:0;background:none;border-radius:var(--radius-sm);padding:9px var(--space-3);
  font:500 14px/1.3 var(--font-sans);color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  cursor:pointer;transition:background-color 160ms,color 160ms}
.conv:hover{background:var(--surface-sunken);color:var(--ink)}
.conv[aria-current="true"]{background:var(--pink-soft);color:var(--ink);font-weight:600;box-shadow:inset 3px 0 0 var(--pink)}
.convs .vide{color:var(--ink-muted);font-size:13px;padding:var(--space-2) var(--space-3)}
.fil{min-width:0;width:100%;max-width:var(--reading)}
.filtete{display:flex;gap:var(--space-2);align-items:center;margin-bottom:var(--space-5);flex-wrap:wrap}
.filtete input{flex:1;min-width:160px;border:var(--border-control) solid transparent;background:transparent;
  border-radius:var(--radius-sm);padding:4px 8px;font:700 20px/1.3 var(--font-sans);color:var(--ink);letter-spacing:-.01em}
.filtete input:hover{border-color:var(--line)}
.filtete input:focus{border-color:var(--outline);background:var(--surface);outline:none;box-shadow:0 0 0 3px var(--pink-soft)}
.filtete .bd-select{width:auto;height:var(--control-sm);font-size:13px}
.messages{margin-bottom:var(--space-6)}
.bd-msg__bubble{overflow-wrap:anywhere}
.bd-msg__bubble p{margin:0 0 10px}.bd-msg__bubble p:last-child{margin-bottom:0}
.bd-msg__bubble ul{margin:0 0 10px;padding-left:22px}
.bd-msg__bubble code{font-family:var(--font-mono);font-size:13px;background:var(--surface);border:var(--border-hair) solid var(--line);
  border-radius:var(--radius-xs);padding:0 4px}
.bd-msg__bubble table{border-collapse:collapse;margin:4px 0 12px;font-size:14px}
.bd-msg__bubble th,.bd-msg__bubble td{border:var(--border-hair) solid var(--line);padding:4px 10px;text-align:left}
.bd-msg__bubble th{background:var(--surface);font-weight:600}
/* Chiffres et en-têtes courts sur une ligne ; seule la première colonne (le libellé) passe à la ligne. */
.bd-msg__bubble th,.bd-msg__bubble td{white-space:nowrap}
.bd-msg__bubble th:first-child,.bd-msg__bubble td:first-child{white-space:normal}
.bd-msg__bubble table{display:block;max-width:100%;overflow-x:auto}
.cite{font-size:12px;font-weight:500;color:var(--ink-muted);background:var(--surface);border:var(--border-hair) solid var(--line);
  border-radius:var(--radius-xs);padding:0 5px;white-space:nowrap}
.bd-source{cursor:default}
.statut{margin-top:var(--space-1)}
.statut svg{width:72px;height:72px}
.pied{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.pouces{display:flex;gap:2px}
.pouces .bd-icon-btn{width:30px;height:30px}
.pouces .bd-icon-btn svg{width:16px;height:16px}
.pouces .bd-icon-btn[aria-pressed="true"]{background:var(--pink-soft);color:var(--ink)}
.accroche{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-5);border-radius:var(--radius-lg);
  background:var(--surface-blush);font-size:16px}
.accroche img{width:72px;height:72px;flex:none}
.sugg{margin-left:44px;background:var(--surface);border:var(--border-baudi) solid var(--outline);border-radius:var(--radius-md);
  padding:var(--space-4);display:grid;gap:var(--space-2);font-size:14px}
.sugg .meta{font-size:13px;color:var(--ink-muted)}
.sugg .row{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-1)}
.sugg .voisin{display:flex;gap:var(--space-3);align-items:center;justify-content:space-between}
.erreur{color:var(--danger);font-weight:500;font-size:14px}
.depense{margin-top:var(--space-2);font-size:12px;color:var(--ink-muted)}
#supprimer[hidden]{display:none}

/* --- Fiches (J11) ------------------------------------------------------------------------------------ */
.page-tete{margin-bottom:var(--space-5)}
.page-tete h1{font-size:28px;font-weight:800;letter-spacing:-.015em;line-height:1.2}
.page-tete p{margin-top:var(--space-1)}
.recherche-fiches{margin-bottom:var(--space-4)}
.arbre{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:var(--space-5);margin-top:var(--space-5);align-items:start}
.branche h3{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--ink-muted);margin:var(--space-4) 0 var(--space-2)}
.fiches{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-2)}
.fiche-lien{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--space-2);padding:var(--space-3);border-radius:var(--radius-sm);
  border:var(--border-hair) solid var(--line);text-decoration:none;color:var(--ink);transition:border-color 160ms,background-color 160ms}
.fiche-lien:hover{border-color:var(--line-strong);background:var(--surface-sunken)}
.fiche-lien .resume{flex-basis:100%;font-size:13px;color:var(--ink-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.petit{font-size:12px}
.aide{max-width:var(--reading);font-size:14px;color:var(--ink-muted);margin:0 0 var(--space-4)}
.fiche-lien .etiquettes{flex-basis:100%;display:flex;flex-wrap:wrap;gap:4px}
.bd-chip.discret{background:transparent;border:var(--border-hair) solid var(--line);color:var(--ink-muted);font-weight:500}
.branche h2{margin-bottom:var(--space-3)}
a.bd-tab{display:inline-flex;align-items:center;text-decoration:none}
.fil-ariane{font-size:13px;color:var(--ink-muted);margin-bottom:var(--space-3)}
.fil-ariane a{color:var(--ink-muted)}
.meta-fiche{display:flex;flex-wrap:wrap;gap:6px;margin:var(--space-3) 0 var(--space-2)}
.colonnes-fiche{display:grid;grid-template-columns:minmax(0,var(--reading)) minmax(220px,300px);gap:var(--space-6);align-items:start;margin-top:var(--space-4)}
@media (max-width:1100px){.colonnes-fiche{grid-template-columns:minmax(0,1fr)}}
.cote-fiche{display:grid;gap:var(--space-4)}
.corps-fiche{font-size:15px;line-height:1.65;overflow-wrap:anywhere}
.corps-fiche h2{font-size:19px;font-weight:700;margin:var(--space-6) 0 var(--space-2)}
.corps-fiche h2:first-child{margin-top:0}
.corps-fiche h3{font-size:16px;font-weight:700;margin:var(--space-5) 0 var(--space-2)}
.corps-fiche h4{font-size:14px;font-weight:700;margin:var(--space-4) 0 var(--space-1)}
.corps-fiche p{margin:0 0 var(--space-3)}
.corps-fiche ul,.corps-fiche ol{margin:0 0 var(--space-3);padding-left:22px}
.corps-fiche li{margin-bottom:4px}
.corps-fiche code{font-family:var(--font-mono);font-size:13px;background:var(--surface-sunken);border-radius:var(--radius-xs);padding:0 4px}
.corps-fiche table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:0 0 var(--space-4);font-size:13.5px}
.corps-fiche th,.corps-fiche td{border:var(--border-hair) solid var(--line);padding:5px 10px;text-align:left;vertical-align:top}
.corps-fiche th{background:var(--surface-sunken);font-weight:600}
.versions{list-style:none;padding:0;margin:var(--space-2) 0 0;display:grid;gap:2px}
.versions a{display:block;padding:6px var(--space-3);border-radius:var(--radius-sm);text-decoration:none;color:var(--ink-muted);font-size:14px}
.versions a:hover{background:var(--surface-sunken);color:var(--ink)}
.versions a[aria-current="page"]{background:var(--pink-soft);color:var(--ink);font-weight:600}

/* --- À valider (J11) ---------------------------------------------------------------------------------- */
a.val{text-decoration:none;color:inherit;border-radius:var(--radius-sm);transition:background-color 160ms}
a.val:hover{background:var(--surface-sunken)}
.proposition p{margin-top:var(--space-2);font-size:15px}
.ecarts .statut svg{width:64px;height:64px}
.diff{font-family:var(--font-mono);font-size:12.5px;line-height:1.55;border:var(--border-hair) solid var(--line);
  border-radius:var(--radius-sm);overflow:auto;max-height:60vh;margin-top:var(--space-2)}
.diff .l{white-space:pre-wrap;padding:1px var(--space-3);overflow-wrap:anywhere}
.diff .ajoute{background:var(--mint-soft);color:var(--mint-strong)}
.diff .retire{background:var(--danger-soft);color:var(--danger);text-decoration:line-through;text-decoration-color:rgba(180,49,79,.35)}
.diff .meme{color:var(--ink-muted)}
.diff .saut{color:var(--ink-faint);text-align:center;background:var(--surface-sunken)}
.corps-edition{min-height:50vh;font-family:var(--font-mono);font-size:13px;margin-top:var(--space-2)}
.actions-carte{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-5) 0 var(--space-3)}
.refus{display:grid;gap:var(--space-3);max-width:var(--reading)}
.refus[hidden],#edition[hidden],.actions-carte[hidden]{display:none}
.motifs{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5)}
.message-carte{font-size:14px;min-height:20px}
.message-carte.erreur{color:var(--danger)}
.message-carte .ok{font-weight:600;color:var(--mint-strong)}
.fait-propose{font-size:16px;margin:var(--space-2) 0}
.decidees{margin-top:var(--space-6)}
.decidees li{font-size:14px}
.page-tete + .bd-card{margin-bottom:var(--space-4)}
#valider + #modifier{margin-right:auto}

/* --- pièces jointes (J9) --------------------------------------------------------------------------- */
.joints{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-2);max-width:var(--reading)}
.joints[hidden]{display:none}
.joints .erreur{flex-basis:100%}
.joint{display:inline-flex;align-items:center;gap:6px;max-width:100%;height:30px;padding:0 6px 0 10px;border-radius:var(--radius-pill);
  background:var(--surface);border:var(--border-hair) solid var(--line);font-size:13px;color:var(--ink);text-decoration:none}
.joint svg{width:14px;height:14px;color:var(--ink-muted)}
.joint .nom{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px}
.joint .poids{color:var(--ink-muted)}
.joint button{display:grid;place-items:center;width:22px;height:22px;border:0;border-radius:50%;background:none;cursor:pointer;color:var(--ink-muted)}
.joint button:hover{background:var(--surface-sunken);color:var(--ink)}
.joint--envoi{opacity:.75}
.joint--erreur{background:var(--danger-soft);border-color:transparent}
.joint--erreur .poids{color:var(--danger)}
a.joint{padding-right:10px}
a.joint:hover{border-color:var(--line-strong)}
.joints-msg{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--space-2)}
.bd-composer.depot{border-color:var(--outline);background:var(--surface-blush);box-shadow:0 0 0 3px var(--pink-soft)}
.bd-composer #joindre{flex:none;width:36px;height:36px}
/* Le choix du modèle dans la barre de l'accueil : discret, à côté du bouton d'envoi. */
.bd-composer .bd-select{flex:none;width:auto;height:36px;border:0;background-color:var(--surface-sunken);font-size:13px}
.accueil-question{max-width:var(--reading)}
.accueil-question .bd-composer{margin:0}