/* THORION v2 — F3.2 : l'interface. Maquettes de FB (10_THORION/prompts/maquettes-F3.2). */

/* Public Sans (licence SIL OFL, app/static/fonts/OFL.txt), servie par THORION lui-même :
   rien n'est chargé depuis internet. Police variable : un fichier pour 400 à 600. */
@font-face {
  font-family: "Public Sans";
  src: url("/static/fonts/public-sans-latin-variable.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --fond: #f6f4ef;
  --barre: #efece5;
  --texte: #2b2a27;
  --texte-2: #3d3b36;
  --doux: #8b877b;
  --doux-2: #6f6b5f;
  --trait: #e2ded4;
  --trait-2: #ddd8cc;
  --actif: #e4dfd3;
  --bulle: #e9e5dc;
  --carte: #ffffff;
  --accent: #8a5a1c;
  --accent-fonce: #6b4413;
  --alerte: #b0553a;
  --alerte-fond: #faf1ec;
  --rayon: 12px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 15px/1.5 "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--accent); }
a:hover { color: var(--accent-fonce); }
button, input, select, textarea { font: inherit; color: inherit; }
.ic { flex: none; }

/* ------------------------------------------------------------ l'ossature */

.appli { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }
.centre { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.barre {
  width: 272px; flex: none; display: flex; flex-direction: column; gap: 18px;
  background: var(--barre); border-right: 1px solid var(--trait); padding: 20px 16px 14px;
  overflow-y: auto;
}
.barre-repliee .barre { display: none; }
.barre-haut { display: flex; align-items: center; justify-content: space-between; min-height: 28px; }
.marque { font-weight: 600; font-size: 17px; letter-spacing: .02em; color: var(--texte); text-decoration: none; }
.barre .fermer-menu { display: none; }
.icone-bouton {
  display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px;
  background: none; border: 0; border-radius: 8px; cursor: pointer; color: var(--texte); text-decoration: none;
  font-size: 18px; line-height: 1; padding: 4px;
}
.icone-bouton:hover { background: var(--actif); }
.bouton-nouvelle {
  display: flex; align-items: center; gap: 10px; background: var(--texte); color: var(--fond);
  padding: 12px 14px; border-radius: 10px; font-weight: 500; font-size: 15px; text-decoration: none;
}
.bouton-nouvelle:hover { background: #1a1917; color: var(--fond); }
.recherche {
  display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid var(--trait-2);
  border-radius: 10px; background: var(--fond);
}
.recherche input { flex: 1; min-width: 0; border: 0; background: none; padding: 10px 0; font-size: 14px; outline: none; }
.recherche input::placeholder { color: var(--doux); }
.recherche:focus-within { border-color: var(--doux); }
.resultats-recherche { display: flex; flex-direction: column; gap: 4px; margin-top: -8px; }
.resultat { display: block; padding: 8px 10px; border-radius: 8px; background: var(--fond); text-decoration: none; color: var(--texte); border: 1px solid var(--trait); }
.resultat:hover { border-color: var(--doux); }
.resultat .t { display: block; font-size: 13.5px; font-weight: 500; }
.resultat .x { font-size: 12.5px; color: var(--doux-2); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.recherche input::-webkit-search-cancel-button { -webkit-appearance: none; }
.resultat mark { background: #f3e3c3; color: inherit; }
.rubrique { display: flex; flex-direction: column; gap: 2px; }
.rubrique.grandit, .grandit { flex-grow: 1; }
.rubrique-titre {
  display: flex; justify-content: space-between; align-items: center; padding: 0 8px 4px;
  font-size: 12px; color: var(--doux); text-transform: uppercase; letter-spacing: .08em; margin: 0;
}
.rubrique-titre .plus { color: var(--doux); display: inline-flex; padding: 2px; border-radius: 6px; }
.rubrique-titre .plus:hover { background: var(--actif); }
.lien-barre {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px;
  color: var(--texte-2); text-decoration: none; font-size: 14px; min-width: 0;
}
.lien-barre span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lien-barre:hover { background: var(--actif); color: var(--texte); }
.lien-barre.actif { background: var(--actif); color: var(--texte); font-weight: 500; }
.lien-barre.discret { color: var(--doux); font-size: 13px; }
.liste-recents { display: flex; flex-direction: column; gap: 2px; }
.lien-barre.recent { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vide-barre { font-size: 13px; color: var(--doux); padding: 4px 10px; margin: 0; }
.utilisateur { display: flex; align-items: center; gap: 10px; padding: 8px 10px 0; font-size: 13px; color: var(--doux); flex-wrap: wrap; }
.avatar {
  width: 28px; height: 28px; border-radius: 50%; background: #c9a878; color: var(--texte);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px;
}
.lien-discret { color: var(--doux); font-size: 12px; margin-left: auto; }
.voile { display: none; }

/* ------------------------------------------------------------ la discussion */

.bandeau-discussion {
  height: 56px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 24px 0 32px;
  border-bottom: 1px solid #e8e4da;
}
.bouton-menu, .bouton-nouvelle-mobile { display: none; }
.rouvrir-barre { display: none; margin-left: -18px; }
.barre-repliee .rouvrir-barre { display: inline-flex; }
.bandeau-titre { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--doux-2); }
.pastille-projet {
  flex: none; background: var(--actif); padding: 4px 10px; border-radius: 999px; font-size: 13px;
  color: var(--texte); text-decoration: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pastille-projet.petite { font-size: 12px; padding: 2px 8px; }
.titre-discussion { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.titre-edition { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 0; }
.titre-edition input { flex: 1; min-width: 0; padding: 6px 10px; border: 1px solid var(--doux); border-radius: 8px; background: var(--carte); }
.etiquette-grise { font-size: 12px; background: var(--actif); border-radius: 6px; padding: 1px 7px; color: var(--doux-2); }
.bandeau-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.bouton-leger {
  padding: 6px 12px; border: 1px solid var(--trait-2); border-radius: 8px; background: var(--carte);
  color: var(--doux-2); font-size: 13px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.bouton-leger:hover { border-color: var(--doux); color: var(--texte); }
.bouton-leger.petit { font-size: 12.5px; padding: 5px 10px; }
.menu-plus { position: relative; }
.menu-plus > summary { list-style: none; }
.menu-plus > summary::-webkit-details-marker { display: none; }
.menu-plus-contenu {
  position: absolute; right: 0; top: 40px; z-index: 20; width: 260px; background: var(--carte);
  border: 1px solid var(--trait); border-radius: var(--rayon); padding: 6px; box-shadow: 0 6px 18px rgba(43,42,39,.08);
  display: flex; flex-direction: column; gap: 2px;
}
.menu-plus-contenu > button, .menu-plus-contenu form > button {
  display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px;
  padding: 9px 10px; cursor: pointer; font-size: 14px;
}
.menu-plus-contenu > button:hover, .menu-plus-contenu form > button:hover { background: var(--barre); }
.menu-plus-contenu form { margin: 0; }
.menu-projet { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 10px; border-top: 1px solid var(--barre); border-bottom: 1px solid var(--barre); }
.menu-projet label { font-size: 12px; color: var(--doux); width: 100%; }
.menu-projet select { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--trait-2); border-radius: 8px; background: var(--fond); font-size: 13px; }
.menu-projet button { width: auto !important; padding: 6px 10px !important; border: 1px solid var(--trait-2) !important; }
.seulement-mobile, .seulement-mobile-bloc { display: none !important; }

.panneau-synthese { flex: none; max-height: 45vh; overflow-y: auto; border-bottom: 1px solid #e8e4da; background: #faf9f5; }
.panneau-synthese[hidden] { display: none; }
.bloc-synthese { width: 760px; max-width: 100%; margin: 0 auto; padding: 18px 24px; }
.synthese-meta { font-size: 12.5px; color: var(--doux); margin: 0 0 6px; }
.synthese .corps h4 { margin: 12px 0 4px; font-size: 14px; font-weight: 600; }
.synthese .corps p, .synthese .corps li { font-size: 14.5px; margin: 4px 0; }
.synthese .corps ul { padding-left: 20px; margin: 4px 0; }
.synthese.ancienne { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--trait); }
.regenerer { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.versions { margin-top: 10px; }
.versions > summary { cursor: pointer; font-size: 13px; color: var(--doux); }

.fil { flex: 1 1 auto; overflow-y: auto; }
.fil-dedans { width: 760px; max-width: 100%; margin: 0 auto; padding: 40px 24px 24px; display: flex; flex-direction: column; gap: 28px; }
.accueil { margin-top: 12vh; text-align: center; color: var(--doux-2); }
.accueil-titre { font-size: 22px; font-weight: 600; color: var(--texte); margin: 0 0 6px; }
.question-ligne { display: flex; justify-content: flex-end; }
.bulle {
  max-width: 560px; background: var(--bulle); padding: 12px 18px; border-radius: 16px 16px 4px 16px;
  font-size: 15px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word;
}
.reponse-bloc { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.texte-reponse { font-size: 15.5px; line-height: 1.65; }
.texte-reponse p { margin: 0 0 12px; }
.texte-reponse p:last-child { margin-bottom: 0; }
.renvoi {
  display: inline-block; min-width: 16px; height: 16px; line-height: 16px; text-align: center; vertical-align: 2px;
  font-size: 10.5px; border-radius: 4px; background: #efe4d2; color: var(--accent); margin: 0 1px; padding: 0 3px;
}
.etiquette-reponse { align-self: flex-start; margin: 0; font-size: 12.5px; background: var(--actif); border-radius: 999px; padding: 3px 10px; color: var(--texte-2); }
.avertissement-doux { margin: 0; font-size: 13.5px; color: var(--doux-2); border-left: 3px solid #d8b98a; padding: 2px 10px; }
.message-souci { background: var(--alerte-fond); border: 1px solid #efd9cd; border-radius: var(--rayon); padding: 14px 16px; font-size: 14.5px; color: var(--texte-2); }
.message-souci p { margin: 4px 0; }
.souci-titre { font-weight: 600; color: var(--texte); margin-top: 0 !important; }
.dossiers-titre { color: var(--doux-2); font-size: 13.5px; }
.puces-dossiers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.puce-dossier { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid var(--trait-2); border-radius: 999px; background: var(--carte); font-size: 12.5px; }
.proches { margin: 0 0 -6px; font-size: 13px; color: var(--doux); }
.pastilles-sources { display: flex; gap: 8px; flex-wrap: wrap; }
.pastille-source {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--trait-2);
  border-radius: 999px; font-size: 13px; background: var(--carte); color: var(--texte-2); text-decoration: none; max-width: 100%;
}
.pastille-source:hover { border-color: var(--accent); color: var(--texte); }
.pastille-source .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pastille-source .num { font-size: 11px; color: var(--accent); }
.autres-sources > summary { cursor: pointer; font-size: 13px; color: var(--doux); margin-bottom: 8px; }
.meta-reponse { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; font-size: 13px; color: var(--doux); }
.details > summary { cursor: pointer; text-decoration: underline; list-style: none; display: inline; }
.details > summary::-webkit-details-marker { display: none; }
.details[open] { flex-basis: 100%; }
.details-contenu { margin-top: 8px; padding: 10px 14px; background: var(--barre); border-radius: 10px; font-size: 12.5px; color: var(--doux-2); }
.details-contenu p { margin: 4px 0; }
.details-sources { margin: 6px 0 0; padding-left: 20px; }
.details-sources li { word-break: break-word; }
.attente-texte { display: none; font-size: 13.5px; color: var(--doux-2); }
.attente-texte.visible, .htmx-request .attente-texte, .htmx-request.attente-texte { display: inline; }
.attente-texte.erreur { color: var(--alerte); }
.aide-douce { font-size: 12.5px; color: var(--doux); }

.saisie { flex: none; padding: 0 24px 28px; display: flex; flex-direction: column; align-items: center; }
.saisie-cadre {
  width: 760px; max-width: 100%; display: flex; flex-direction: column; gap: 10px; background: var(--carte);
  border: 1px solid var(--trait-2); border-radius: 16px; padding: 14px 16px; box-shadow: 0 2px 10px rgba(43,42,39,.06);
}
.saisie-cadre:focus-within { border-color: var(--doux); }
.saisie textarea { border: 0; outline: none; resize: none; background: none; font-size: 15px; line-height: 1.5; padding: 0; min-height: 24px; max-height: 220px; }
.saisie textarea::placeholder { color: #a19d91; }
.saisie-bas { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.saisie-options { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.pastille-modele { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; background: #f0ede6; font-size: 13px; color: var(--texte-2); cursor: pointer; }
.pastille-modele select { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 0; margin: 0; padding: 0; box-sizing: border-box; appearance: none; -webkit-appearance: none; opacity: 0; cursor: pointer; font-size: 16px; }
.pastille-modele:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.interrupteur { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--doux-2); cursor: pointer; padding: 6px 6px; }
.interrupteur input { position: absolute; opacity: 0; pointer-events: none; }
.interrupteur .piste { width: 30px; height: 18px; border-radius: 999px; background: #d9d4c8; position: relative; flex: none; }
.interrupteur .piste::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.interrupteur input:checked + .piste { background: var(--accent); }
.interrupteur input:checked + .piste::after { left: 14px; }
.interrupteur input:focus-visible + .piste { outline: 2px solid var(--accent); outline-offset: 2px; }
.envoi { width: 36px; height: 36px; border-radius: 50%; background: var(--texte); border: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.envoi:disabled { background: #9c988e; cursor: default; }
.alerte-saisie { width: 760px; max-width: 100%; margin: 8px 0 0; font-size: 13px; color: var(--alerte); }

.tiroir { width: 340px; flex: none; border-left: 1px solid #e8e4da; background: #faf9f5; overflow-y: auto; padding: 18px 20px; }
.tiroir[hidden] { display: none; }
.tiroir-haut { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-weight: 500; }

/* ------------------------------------------------------------ pages Projets, Projet, Discussions */

.page-large .defile { flex: 1; overflow-y: auto; padding: 48px 64px; }
.haut-mobile { display: none; }
.entete-page { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px; }
.titre-page { font-size: 28px; font-weight: 600; margin: 0; }
.sous-titre { font-size: 14px; color: var(--doux); margin: 4px 0 0; }
.bouton-sombre { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 10px; background: var(--texte); color: var(--fond); border: 0; font-size: 14px; font-weight: 500; cursor: pointer; }
.groupe-projets { margin-bottom: 28px; }
.groupe-projets .rubrique-titre { padding: 0 0 8px; }
.grille-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.carte-projet {
  display: flex; flex-direction: column; gap: 10px; background: var(--carte); border: 1px solid var(--trait);
  border-radius: 14px; padding: 18px 20px; text-decoration: none; color: var(--texte);
}
.carte-projet:hover { border-color: var(--doux); color: var(--texte); }
.carte-nom { font-size: 16px; font-weight: 600; }
.carte-apercu { font-size: 13.5px; line-height: 1.5; color: #55524a; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.carte-apercu.vide { color: #a19d91; }
.carte-compteurs { display: flex; gap: 14px; font-size: 12.5px; color: var(--doux); margin-top: auto; flex-wrap: wrap; }
.lien-bas { font-size: 14px; }
.dialogue { border: 1px solid var(--trait); border-radius: 14px; padding: 22px 24px; max-width: 460px; background: var(--carte); color: var(--texte); }
.dialogue::backdrop { background: rgba(43,42,39,.25); }
.dialogue-titre { font-weight: 600; font-size: 17px; margin: 0 0 8px; }
.dialogue p { font-size: 14.5px; }
.dialogue form { text-align: right; margin: 0; }

.avec-panneau .centre { min-width: 0; }
.entete-projet { margin-bottom: 24px; }
.fil-ariane { font-size: 13px; color: var(--doux); text-decoration: none; }
.fil-ariane:hover { color: var(--accent); }
.carte-texte { background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; padding: 20px 24px; margin-bottom: 18px; font-size: 15px; line-height: 1.6; }
.carte-texte-haut { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 10px; }
.carte-texte-titre { font-weight: 600; }
.carte-texte .corps p { margin: 6px 0; color: var(--texte-2); }
.carte-texte .corps h4 { font-size: 14.5px; margin: 12px 0 4px; }
.carte-texte .corps ul { padding-left: 20px; margin: 4px 0; }
.voir-fichier { margin-top: 8px; }
.voir-fichier > summary { cursor: pointer; font-size: 12.5px; color: var(--doux); }
.voir-fichier pre { white-space: pre-wrap; font-size: 12.5px; background: var(--barre); border-radius: 8px; padding: 10px 12px; margin: 6px 0 0; }
.ligne-decisions { margin: -4px 0 18px 2px; }
.rubrique-ligne { display: flex; justify-content: space-between; align-items: center; margin: 24px 0 10px; gap: 10px; flex-wrap: wrap; }
.rubrique-ligne .rubrique-titre { padding: 0; }
.lien-action { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--texte); text-decoration: none; }
.lien-action:hover { color: var(--accent); }
.liste-carte { display: flex; flex-direction: column; background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; overflow: hidden; }
.ligne-liste { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--barre); font-size: 14.5px; color: var(--texte); text-decoration: none; }
.ligne-liste:last-child { border-bottom: 0; }
.ligne-liste:hover { background: #fbfaf7; color: var(--texte); }
.ligne-gauche { display: flex; align-items: center; gap: 10px; min-width: 0; }
.onglets { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.onglet { padding: 7px 14px; border-radius: 999px; font-size: 13.5px; color: var(--doux-2); text-decoration: none; border: 1px solid var(--trait-2); background: var(--carte); }
.onglet.actif { background: var(--texte); color: var(--fond); border-color: var(--texte); }

.colonne-fichiers { width: 340px; flex: none; border-left: 1px solid #e8e4da; background: #faf9f5; overflow-y: auto; padding: 44px 24px 24px; }
.colonne-fichiers > details > summary { list-style: none; }
.panneau-fichiers { display: flex; flex-direction: column; gap: 14px; min-height: 100%; }
.panneau-titre { display: flex; justify-content: space-between; align-items: center; }
.panneau-titre .rubrique-titre { padding: 0; }
.panneau-aide { font-size: 12.5px; color: var(--doux); line-height: 1.5; margin: 0; }
.panneau-aide .chemin { color: var(--texte-2); overflow-wrap: anywhere; }
.arbo { display: flex; flex-direction: column; font-size: 13.5px; }
.arbo .enfants { padding-left: 22px; }
.noeud > summary { list-style: none; cursor: pointer; }
.noeud > summary::-webkit-details-marker { display: none; }
.ligne-fichier { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-radius: 6px; color: var(--texte); text-decoration: none; min-width: 0; }
a.ligne-fichier:hover, .noeud > summary.ligne-fichier:hover { background: var(--barre); color: var(--texte); }
.ligne-fichier .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.ligne-fichier .compte { color: var(--doux); font-size: 12px; }
.ligne-fichier.grise { color: var(--doux); }
.non-lu { font-size: 11.5px; color: var(--alerte); flex: none; }
.etiq { font-size: 11px; color: var(--doux); flex: none; }
.panneau-bas { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.panneau-bas p { margin: 0; }
.lien-souligne { background: none; border: 0; padding: 0; color: var(--doux); text-decoration: underline; cursor: pointer; font-size: 12.5px; }
.explication { background: var(--carte); border: 1px solid var(--trait); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; max-height: 260px; overflow-y: auto; }
.explication p { margin: 0 0 6px; }
.explication ul { margin: 0; padding-left: 18px; }
.explication li { margin: 3px 0; word-break: break-word; }
.reindexer { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.resultat-passe { font-size: 13px; background: var(--carte); border: 1px solid var(--trait); border-radius: 10px; padding: 8px 12px; }
.resultat-passe p { margin: 0 0 4px; }

/* ------------------------------------------------------------ pages techniques (état, extrait) */

.page-simple { max-width: 900px; margin: 0 auto; padding: 24px 20px 60px; }
.retour { margin: 0 0 12px; font-size: 14px; }
.page-simple h2 { font-size: 19px; margin: 28px 0 10px; }
.bandeau { display: block; margin: 8px 0 16px; padding: 8px 14px; border-radius: 999px; background: var(--barre); color: var(--doux-2); font-size: 13px; text-decoration: none; }
.bandeau .fleche { float: right; }
.souci { background: var(--alerte-fond); border: 1px solid #efd9cd; border-radius: var(--rayon); padding: 12px 16px; }
.souci h3 { margin: 0 0 6px; font-size: 15px; }
.souci p { margin: 0; font-size: 14px; }
.discret { color: var(--doux); font-size: 13.5px; }
.intitule { display: block; font-size: 12px; color: var(--doux); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.chemin-win { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--barre); border-radius: 6px; padding: 6px 10px; display: inline-block; font-size: 13px; word-break: break-all; }
.texte-extrait { white-space: pre-wrap; word-wrap: break-word; background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 16px; font-size: 15px; line-height: 1.6; }
mark { background: #f3e3c3; padding: 0 1px; }
.tableau-conteneur { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--trait); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--doux); font-weight: 600; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
.chiffres { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0; }
.chiffre { flex: 1 1 130px; background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 12px 14px; }
.chiffre .val { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chiffre .lib { color: var(--doux); font-size: 12.5px; }

/* ------------------------------------------------------------ écrans moyens et téléphone */

@media (max-width: 1180px) {
  .grille-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .avec-panneau { flex-wrap: nowrap; }
  .colonne-fichiers { width: 300px; }
}

@media (max-width: 900px) {
  .barre {
    position: fixed; inset: 0 auto 0 0; z-index: 40; width: 86vw; max-width: 320px;
    transform: translateX(-100%); visibility: hidden;
  }
  .menu-ouvert .barre { transform: none; visibility: visible; display: flex; }
  .barre-repliee .barre { display: flex; }
  .menu-ouvert .voile { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(43,42,39,.25); }
  .replier, .rouvrir-barre, .barre-repliee .rouvrir-barre { display: none; }
  .barre .fermer-menu { display: inline-flex; min-width: 44px; min-height: 44px; }
  .bouton-nouvelle, .lien-barre, .recherche input { min-height: 44px; }
  .icone-bouton { min-width: 44px; min-height: 44px; }

  .bandeau-discussion { height: auto; min-height: 60px; padding: 8px 8px; gap: 4px; border-bottom: 0; }
  .bouton-menu, .bouton-nouvelle-mobile { display: inline-flex; }
  .bandeau-titre { flex-direction: column; align-items: center; gap: 1px; text-align: center; }
  .pastille-projet { background: none; padding: 0; font-size: 12px; color: var(--doux); max-width: 100%; }
  .titre-discussion { font-size: 15px; font-weight: 500; color: var(--texte); max-width: 100%; }
  .bouton-leger.large { display: none; }
  .seulement-mobile { display: block !important; }
  .menu-plus-contenu { top: 48px; }
  .menu-plus-contenu > button, .menu-plus-contenu form > button { min-height: 44px; }
  .menu-projet select, .menu-projet button { min-height: 44px; }

  .fil-dedans { padding: 16px 16px 12px; gap: 20px; }
  .bulle { max-width: 86%; }
  .saisie { padding: 12px 12px 20px; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .saisie-cadre { padding: 12px 14px; }
  .envoi { width: 44px; height: 44px; }
  .pastille-modele { min-height: 44px; padding: 0 12px; }
  .interrupteur { min-height: 44px; }
  .pastille-source { min-height: 44px; }
  .autres-sources > summary { padding: 12px 0; margin-bottom: 0; }
  .saisie textarea { min-height: 44px; }
  .pastille-projet { pointer-events: none; }
  .marque { min-height: 44px; display: inline-flex; align-items: center; }
  .rubrique-titre .plus { min-width: 44px; min-height: 44px; justify-content: center; align-items: center; }
  .fil-ariane { display: inline-flex; align-items: center; min-height: 44px; }
  .voir-fichier > summary { padding: 12px 0; }
  .lien-action { min-height: 44px; }
  .lien-souligne { min-height: 44px; }
  .details > summary { display: inline-block; padding: 12px 0; }
  .tiroir { position: fixed; inset: 0 0 0 auto; z-index: 35; width: 100%; max-width: 380px; box-shadow: -6px 0 18px rgba(43,42,39,.1); }

  .haut-mobile { display: flex; align-items: center; justify-content: space-between; padding: 8px; flex: none; }
  .haut-mobile-titre { font-size: 15px; font-weight: 500; }
  .page-large .defile { padding: 12px 16px 32px; }
  .entete-page { flex-direction: column; align-items: stretch; }
  .bouton-sombre { justify-content: center; min-height: 44px; }
  .grille-cartes { grid-template-columns: 1fr; }
  .titre-page { font-size: 24px; }
  .avec-panneau { flex-direction: column; overflow-y: auto; height: auto; min-height: 100dvh; }
  .avec-panneau .centre { overflow: visible; }
  .avec-panneau .defile { overflow: visible; }
  .colonne-fichiers { width: 100%; border-left: 0; border-top: 1px solid #e8e4da; padding: 16px; overflow: visible; }
  .seulement-mobile-bloc { display: block !important; font-weight: 600; min-height: 44px; padding: 10px 0; cursor: pointer; }
  .ligne-fichier { min-height: 44px; }
  .ligne-liste, .onglet { min-height: 44px; }
  .onglet { display: inline-flex; align-items: center; }
}

/* F3.2 : sur téléphone, le nom du projet au-dessus du titre ne doit pas être rogné. */
@media (max-width: 900px) {
  .bandeau-titre .pastille-projet { display: block; line-height: 16px; padding-top: 1px; }
  .bandeau-titre .titre-discussion { line-height: 20px; }
}

/* ------------------------------------------------------------ F3.3 */

/* C1 : la barre sur toutes les pages ; repliee, un bouton flottant la rouvre. */
.rouvrir-flottant { display: none; position: fixed; top: 12px; left: 10px; z-index: 25; background: var(--fond); }
.barre-repliee .rouvrir-flottant { display: inline-flex; }
.barre-repliee .bandeau-discussion { padding-left: 60px; }
.barre-repliee .page-large .defile { padding-left: 72px; }
.nav-principale { margin-top: -6px; }
.defile .page-simple { padding: 0; margin: 0 auto; }
.utilisateur .lien-discret.actif { color: var(--texte); }

/* C2 : « Tous les projets » deplie la liste sur place. */
.bouton-deplier { background: none; border: 0; width: 100%; text-align: left; cursor: pointer; font: inherit; font-size: 13px; }
.tous-projets { display: flex; flex-direction: column; gap: 2px; }
.tous-projets[hidden], #projets-recents[hidden] { display: none; }
.groupe-barre { margin: 8px 0 2px; padding: 0 10px; font-size: 11.5px; color: var(--doux); }

/* C3 : la corbeille. */
.ligne-actions { padding: 0 12px 0 0; gap: 8px; }
.ligne-actions > .ligne-gauche { padding: 14px 0 14px 20px; flex: 1; min-width: 0; }
.ligne-lien { flex: 1; min-width: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 8px 14px 20px; color: var(--texte); text-decoration: none; }
.ligne-actions form { margin: 0; }
.ligne-actions:hover { background: #fbfaf7; }
.bouton-discret { background: none; border: 0; color: var(--doux); font-size: 12.5px; cursor: pointer; padding: 6px 8px; border-radius: 6px; }
.ligne-actions .bouton-discret { visibility: hidden; }
.ligne-actions:hover .bouton-discret, .ligne-actions .bouton-discret:focus { visibility: visible; }
.menu-plus-contenu .action-supprimer { color: var(--alerte); }
.bouton-discret.action-supprimer:hover { color: var(--alerte); background: var(--alerte-fond); }
.bandeau-info { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; padding: 10px 14px; margin-bottom: 16px; font-size: 14px; }
.bandeau-info form { margin: 0; }

/* C4 : le menu des modeles, un nom et une ligne d'explication. */
.choix-modele { position: relative; }
button.pastille-modele { border: 0; font: inherit; font-size: 13px; }
.menu-modeles {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 30; width: 340px; max-width: calc(100vw - 32px);
  background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; padding: 6px;
  box-shadow: 0 6px 18px rgba(43,42,39,.08); display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow-y: auto;
}
.menu-modeles[hidden] { display: none; }
.option-modele { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.option-modele:hover:not([disabled]), .option-modele:focus-visible { background: var(--barre); outline: none; }
.option-modele[aria-selected="true"] { background: var(--actif); }
.option-modele[disabled] { cursor: default; opacity: .55; }
.om-nom { font-size: 14px; font-weight: 500; color: var(--texte); }
.om-desc { font-size: 12.5px; color: var(--doux-2); line-height: 1.4; }
.cache-visuel { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------ F4 : l'assistant écrit dans le dossier */

.bouton-maj { border-color: #d8b98a; color: var(--accent-fonce); }
.panneau-proposition { flex: none; max-height: 62vh; overflow-y: auto; border-bottom: 1px solid #e8e4da; background: #faf9f5; }
.panneau-proposition[hidden] { display: none; }
.bloc-proposition { width: 1000px; max-width: 100%; margin: 0 auto; padding: 16px 24px 20px; }
.prop-entete { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.prop-titre { margin: 0; font-weight: 600; font-size: 15px; }
.prop-sous { margin: 2px 0 10px; font-size: 12.5px; color: var(--doux); }
.prop-fiche { margin: 0 0 10px; font-size: 16px; font-weight: 600; }
.prop-rien { font-size: 15px; margin: 10px 0; }
.prop-fait { margin: 8px 0; font-size: 14px; background: #eef3e6; border: 1px solid #d6e2c6; border-radius: 10px; padding: 8px 12px; }
.prop-fini { font-size: 14px; margin: 10px 0 0; }
.prop-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.prop-col { background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; padding: 12px 16px; min-width: 0; }
.prop-col.ancien { background: #fbfaf7; }
.prop-col.unifie { display: none; }
.prop-col-titre { margin: 0 0 6px; font-size: 12px; color: var(--doux); text-transform: uppercase; letter-spacing: .06em; }
.prop-texte { font-size: 14px; line-height: 1.55; color: var(--texte-2); overflow-wrap: anywhere; }
.prop-texte h4 { margin: 10px 0 4px; font-size: 14px; font-weight: 600; color: var(--texte); }
.prop-texte h4:first-child { margin-top: 0; }
.prop-texte p { margin: 3px 0; }
.prop-texte .d-li { padding-left: 14px; text-indent: -10px; }
.prop-texte .d-li::before { content: "– "; color: var(--doux); }
.prop-texte ins, .prop-legende ins { text-decoration: none; background: #e2eed2; color: #2f4a17; border-radius: 3px; padding: 0 2px; }
.prop-texte del, .prop-legende del { text-decoration: line-through; text-decoration-color: #b0553a; background: #f7e3dc; color: #7a3a25; border-radius: 3px; padding: 0 2px; }
.prop-legende { font-size: 12.5px; color: var(--doux-2); margin: 10px 0; }
.prop-boutons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.prop-boutons form { margin: 0; }
.prop-boutons .bouton-sombre { padding: 9px 20px; }
.prop-edition textarea { width: 100%; font: 14px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 10px 12px;
  border: 1px solid var(--doux); border-radius: 10px; background: var(--carte); resize: vertical; }
.prop-edition label { display: block; }

.bandeau-propositions { position: fixed; right: 20px; top: 68px; z-index: 28; display: flex; flex-direction: column; gap: 8px; width: 380px; max-width: calc(100vw - 32px); }
.bandeau-propositions:empty { display: none; }
.prop-banniere { background: var(--carte); border: 1px solid #d8b98a; border-radius: 12px; padding: 10px 14px; box-shadow: 0 6px 18px rgba(43,42,39,.10);
  font-size: 13.5px; display: flex; flex-direction: column; gap: 8px; }
.prop-banniere[hidden] { display: none; }
.prop-banniere-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.trombone { background: none; border: 0; border-radius: 8px; padding: 6px; display: inline-flex; align-items: center; cursor: pointer; }
.trombone:hover { background: var(--barre); }
.piece-jointe .pj-carte { max-width: 560px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pj-image { max-width: 260px; max-height: 220px; border-radius: 10px; border: 1px solid var(--trait); display: block; }
.pastille-pj { background: #f7efe2; border-color: #e3cfae; }
.pj-etat { margin: 0; font-size: 12px; color: var(--doux); text-align: right; }
.piece-jointe.en-attente { align-self: flex-end; }

.dialogue-projet { width: 520px; }
.form-projet { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.form-projet label { font-size: 12.5px; color: var(--doux); margin-top: 6px; }
.form-projet select, .form-projet input { padding: 9px 10px; border: 1px solid var(--trait-2); border-radius: 8px; background: var(--fond); font-size: 15px; }
.verif-projet { font-size: 14px; min-height: 40px; }
.verif-projet p { margin: 6px 0; }
.verif-projet form { text-align: left; margin: 10px 0 0; }
.verif-refus { color: var(--alerte); font-size: 14px; }
.dialogue-fermer { margin-top: 10px !important; }

.historique-ecritures { margin-top: 24px; }
.historique-ecritures > details > summary { font-size: 14px; color: var(--texte-2); padding: 6px 0; }
.ligne-historique { align-items: flex-start; flex-wrap: wrap; }
.hist-gauche { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 320px; }
.hist-quoi { font-size: 14.5px; }
.hist-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.prop-colonnes.deux .prop-col { padding: 12px 14px; }
.texte-fiche { white-space: pre-wrap; font-size: 13px; line-height: 1.5; margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

@media (max-width: 900px) {
  .rouvrir-flottant, .barre-repliee .rouvrir-flottant { display: none; }
  /* F4 : sur telephone, une seule colonne « Ce qui change » (ajouts et retraits melanges). */
  .prop-colonnes:not(.deux) { grid-template-columns: 1fr; }
  .prop-colonnes:not(.deux) .prop-col.ancien, .prop-colonnes:not(.deux) .prop-col.nouveau { display: none; }
  .prop-colonnes:not(.deux) .prop-col.unifie { display: block; }
  .prop-colonnes.deux { grid-template-columns: 1fr; }
  .bloc-proposition { padding: 12px 14px 16px; }
  .panneau-proposition { max-height: 70vh; }
  .prop-boutons .bouton-sombre, .prop-boutons .bouton-leger { min-height: 44px; }
  .bandeau-propositions { right: 12px; left: 12px; bottom: auto; top: 64px; width: auto; }
  .prop-banniere .bouton-leger, .prop-banniere .bouton-discret { min-height: 44px; }
  .trombone { min-width: 44px; min-height: 44px; justify-content: center; }
  .hist-actions .bouton-leger { min-height: 44px; }
  .form-projet select, .form-projet input { min-height: 44px; }
  .historique-ecritures > details > summary { min-height: 44px; display: flex; align-items: center; }
  .barre-repliee .bandeau-discussion { padding-left: 8px; }
  .barre-repliee .page-large .defile { padding-left: 16px; }
  .bouton-deplier { min-height: 44px; }
  .ligne-actions .bouton-discret { visibility: visible; min-height: 44px; }
  .bandeau-info .bouton-leger, .ligne-actions .bouton-leger { min-height: 44px; }
  .option-modele { min-height: 52px; padding: 10px 12px; }
  .menu-modeles { position: fixed; left: 12px; right: 12px; bottom: 150px; width: auto; max-width: none; }
  button.pastille-modele { min-height: 44px; }
}

/* ------------------------------------------------------------ F4.1 : comme les applications de tous les jours */

/* B3 : la largeur de la barre se règle à la souris (240 à 480 px). */
.barre { width: var(--largeur-barre, 272px); }
.poignee-barre { flex: none; width: 8px; margin: 0 -4px; cursor: col-resize; position: relative; z-index: 6; }
.poignee-barre::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: transparent; transition: background .15s; }
.poignee-barre:hover::after, .redimension .poignee-barre::after { background: #d8b98a; }
.redimension, .redimension * { cursor: col-resize !important; user-select: none; }
.barre-repliee .poignee-barre { display: none; }

/* B2 : groupes de projets repliables. */
.groupe-barre { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: 0; border-radius: 6px;
  margin: 8px 0 2px; padding: 4px 10px; font: inherit; font-size: 11.5px; color: var(--doux); cursor: pointer; text-align: left; }
.groupe-barre:hover { background: var(--actif); color: var(--texte); }
.fleche-groupe { display: inline-flex; transition: transform .15s; }
.groupe-barre[aria-expanded="false"] .fleche-groupe { transform: rotate(-90deg); }
.groupe-contenu { display: flex; flex-direction: column; gap: 2px; }
.groupe-contenu[hidden] { display: none; }

/* B4 : le menu « ⋯ » d'une discussion. */
.ligne-recent { display: flex; align-items: center; border-radius: 8px; }
.ligne-recent .lien-barre.recent { flex: 1; min-width: 0; }
.ligne-recent:hover, .ligne-recent.actif { background: var(--actif); }
.ligne-recent .lien-barre.recent:hover, .ligne-recent .lien-barre.recent.actif { background: none; }
.bouton-conv { flex: none; visibility: hidden; background: none; border: 0; border-radius: 6px; width: 28px; height: 28px;
  margin-right: 4px; color: var(--doux-2); cursor: pointer; font-size: 16px; line-height: 1; }
.ligne-recent:hover .bouton-conv, .ligne-actions:hover .bouton-conv, .bouton-conv:focus-visible { visibility: visible; }
.bouton-conv:hover { background: var(--trait); color: var(--texte); }
.menu-flottant { position: fixed; z-index: 60; min-width: 210px; background: var(--carte); border: 1px solid var(--trait); border-radius: 12px;
  padding: 6px; box-shadow: 0 8px 24px rgba(43,42,39,.14); display: flex; flex-direction: column; gap: 2px; }
.menu-flottant[hidden] { display: none; }
.menu-flottant button { text-align: left; background: none; border: 0; border-radius: 8px; padding: 9px 12px; font-size: 14px; cursor: pointer; }
.menu-flottant button:hover, .menu-flottant button:focus-visible { background: var(--barre); outline: none; }
.menu-flottant .action-supprimer { color: var(--alerte); }
.champ { width: 100%; padding: 10px 12px; border: 1px solid var(--trait-2); border-radius: 8px; background: var(--fond); font-size: 15px; margin: 8px 0 4px; }
.dialogue-boutons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.dialogue-texte { font-weight: 500; }
.bouton-alerte { background: var(--alerte); color: #fff; border: 0; border-radius: 10px; padding: 10px 16px; font-size: 14px; font-weight: 500; cursor: pointer; }
.bouton-alerte-leger { color: var(--alerte); border-color: #e7c9bc; }
.ligne-actions .bouton-discret.toujours { visibility: visible; }

/* B5 : glisser une discussion sur un projet. */
.glisser-en-cours [data-depot-projet] { outline: 1px dashed #cdb48a; outline-offset: -2px; }
.cible-depot { background: #f1e4cc !important; outline: 2px solid var(--accent) !important; }
.glissee { opacity: .45; }

/* B6 : l'infobulle. */
.infobulle { position: fixed; z-index: 90; max-width: 280px; background: #2b2a27; color: #f6f4ef; font-size: 12.5px; line-height: 1.35;
  padding: 6px 9px; border-radius: 7px; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,.15); }

/* B7 : raccourcis. */
.lien-aide { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--trait-2); font-size: 12px; font-weight: 600; color: var(--doux); text-decoration: none; }
.lien-aide:hover, .lien-aide.actif { color: var(--texte); border-color: var(--doux); }
.table-raccourcis td:first-child { white-space: nowrap; }
kbd { display: inline-block; min-width: 22px; padding: 1px 6px; border: 1px solid var(--trait-2); border-bottom-width: 2px; border-radius: 5px;
  background: var(--carte); font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }

/* B8 : chaque clic se voit ; ce qui attend est grisé. */
button:not(:disabled):active, a.bouton-leger:active, .lien-barre:active, .bouton-nouvelle:active, summary:active { transform: translateY(1px); filter: brightness(.94); }
button:disabled { cursor: default; opacity: .55; }
.envoi:disabled { opacity: 1; }

/* B9 : les messages, dans la page. */
.avis { position: fixed; z-index: 95; left: 50%; transform: translateX(-50%); top: 14px; display: flex; flex-direction: column; gap: 8px;
  width: min(560px, calc(100vw - 24px)); }
.avis-message { display: flex; align-items: center; gap: 10px; justify-content: space-between; background: var(--alerte-fond);
  border: 1px solid #efd9cd; color: var(--texte); border-radius: 12px; padding: 8px 8px 8px 16px; font-size: 14px; box-shadow: 0 6px 18px rgba(43,42,39,.12); }
.avis-message.info { background: #eef3e6; border-color: #d6e2c6; }
.page-erreur { padding-top: 48px; }

/* B10 */
.aide-titre { font-size: 12px; color: var(--doux); white-space: nowrap; }

/* B12 : « Mettre à jour le projet » et « ⋯ » se voient. */
.bouton-maj { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid #d8b98a; border-radius: 9px;
  background: #f7ecd9; color: var(--accent-fonce); font-size: 13.5px; font-weight: 500; cursor: pointer; text-decoration: none; }
.bouton-maj:hover { background: #f1e1c4; border-color: var(--accent); color: var(--accent-fonce); }
.bouton-plus { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 32px;
  border: 1px solid var(--trait-2); border-radius: 8px; background: var(--carte); font-size: 18px; line-height: 1; cursor: pointer; color: var(--texte); }
.bouton-plus::-webkit-details-marker { display: none; }
.bouton-plus:hover, .menu-plus[open] > .bouton-plus { border-color: var(--doux); background: var(--barre); }
.maj-mobile { display: none; }

/* A3 : « Je rédige la synthèse du projet ? » */
.offre-synthese { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: #fbf5ea; border: 1px solid #ead7b6;
  border-radius: 12px; padding: 12px 14px; }
.offre-synthese p { margin: 0; width: 100%; font-size: 14.5px; }

@media (max-width: 900px) {
  .poignee-barre, .aide-titre { display: none; }
  .bouton-maj.large { display: none; }
  .bandeau-discussion { flex-wrap: wrap; }
  .maj-mobile { display: flex; width: 100%; padding: 2px 4px 6px; }
  .maj-mobile .bouton-maj { min-height: 44px; width: 100%; justify-content: center; }
  .bouton-plus { width: 44px; height: 44px; }
  .liste-discussions .bouton-conv { visibility: visible; width: 44px; height: 44px; }
  .ligne-recent .bouton-conv { display: none; }              /* dans la barre : appui long */
  .menu-flottant button, .groupe-barre, .lien-aide, .champ, .dialogue-boutons button { min-height: 44px; }
  .lien-aide { width: 44px; }
  .offre-synthese .bouton-maj { min-height: 44px; }
}

/* ------------------------------------------------------------ F5 : Paramètres, modèles par API */

.barre { width: var(--largeur-barre, var(--largeur-barre-defaut, 272px)); }
.parametres { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; margin-top: 20px; align-items: start; }
.param-menu { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; }
.param-menu a { padding: 8px 12px; border-radius: 8px; color: var(--texte-2); text-decoration: none; font-size: 14.5px; }
.param-menu a:hover { background: var(--actif); color: var(--texte); }
.param-menu a.actif { background: var(--actif); color: var(--texte); font-weight: 500; }
.param-contenu { max-width: 780px; min-width: 0; }
.param-titre { font-size: 19px; margin: 0 0 12px; }
.param-form { display: flex; flex-direction: column; gap: 0; }
.param-ligne { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--trait); flex-wrap: wrap; }
.param-libelle { flex: 1 1 260px; min-width: 0; }
.param-libelle label, .param-libelle .libelle, .param-ligne > .libelle { font-weight: 500; font-size: 14.5px; }
.param-libelle p { margin: 3px 0 0; }
.param-ligne .champ { width: 300px; max-width: 100%; margin: 0; }
.param-ligne .champ.court { width: 110px; }
.param-actions { display: flex; gap: 12px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.param-note { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0 14px; }
.param-proposition { background: #fbf5ea; border: 1px solid #ead7b6; border-radius: 12px; padding: 14px 16px; margin: 12px 0 18px; }
.champ.editeur { width: 100%; font: 13.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; min-height: 420px; }
.liste-simple { margin: 6px 0; padding-left: 20px; font-size: 13px; color: var(--doux-2); }
.carte-service { background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; padding: 12px 18px 8px; margin: 14px 0; }
.carte-service .param-ligne:last-of-type { border-bottom: 0; }
.service-haut { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; padding: 4px 0 6px; }
.service-nom { font-weight: 600; font-size: 16px; }
.etat-service { font-size: 12.5px; border-radius: 999px; padding: 3px 10px; }
.etat-service.ok { background: #e2eed2; color: #2f4a17; }
.etat-service.non { background: var(--actif); color: var(--doux-2); }
.role-modele { font-size: 12.5px; color: var(--doux-2); white-space: nowrap; }
.form-cle { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.resultat-test.ok { color: #2f4a17; }
.resultat-test.non { color: var(--alerte); }
.total-mois { font-size: 14px; }
.lien-utilisateur { display: inline-flex; align-items: center; gap: 10px; color: var(--texte-2); text-decoration: none; border-radius: 8px; padding: 2px 6px 2px 0; }
.lien-utilisateur:hover, .lien-utilisateur.actif { color: var(--texte); }
.pastille-web { border-color: #c9d9e4; background: #f3f8fb; }
.interrupteur.grisee { opacity: .5; cursor: default; }
.meta-reponse .cout { color: var(--doux-2); }

@media (max-width: 900px) {
  .parametres { grid-template-columns: 1fr; gap: 12px; }
  .param-menu { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .param-menu a { border: 1px solid var(--trait-2); border-radius: 999px; background: var(--carte); min-height: 44px; display: inline-flex; align-items: center; }
  .param-ligne .champ { width: 100%; }
  .param-ligne .champ.court { width: 140px; }
  .form-cle { width: 100%; }
  .form-cle .champ { flex: 1; }
  .param-actions .bouton-sombre, .form-cle .bouton-leger, .param-ligne .bouton-leger, .param-note .bouton-leger { min-height: 44px; }
  .champ.editeur { min-height: 300px; }
  .lien-utilisateur { min-height: 44px; }
}

/* F7.1 : la reformulation d'une suite de discussion, sous la bulle ; la recherche internet (Brave). */
.compris-ligne { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin: 4px 0 0; }
.compris { background: none; border: 0; padding: 3px 6px; border-radius: 6px; max-width: min(80%, 620px);
  font: inherit; font-size: 12.5px; line-height: 1.4; color: #7a7669; text-align: right; cursor: pointer; }
.compris:hover, .compris:focus-visible { background: #ece9e1; color: #3d3b36; text-decoration: underline; }
.compris-note { font-size: 12px; color: #3d6b8a; display: inline-flex; gap: 4px; align-items: center; }
.param-sous-titre { font-size: 15px; font-weight: 600; margin: 28px 0 10px; }
.choix-radio { display: flex; gap: 16px; flex-wrap: wrap; }
.choix-radio label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.pastille-web .num { margin-right: 2px; }

/* F7 phase B : l'import de l'historique claude.ai */
.badge-import { display: inline-block; margin-left: .4em; padding: 0 .45em; border-radius: 4px; font-size: .75em; line-height: 1.6;
  color: #3d6b8a; background: #e8f0f5; border: 1px solid #c9dbe7; vertical-align: middle; white-space: nowrap; }
.pj-non-fournies { margin: .2rem 0 .4rem; font-size: .85em; }
.details-import { margin-top: .3rem; }
.prop-import { border-left: 3px solid #3d6b8a; }
.panneau-proposition-projet { margin-top: .8rem; border-top: 1px solid #e8e4da; padding-top: .6rem; }
.panneau-proposition-projet[hidden] { display: none; }
/* La ligne d'import sous le titre d'une discussion importee : l'en-tete (56 px fixes) s'agrandit. */
.bandeau-discussion:has(.bandeau-import) { height: auto; min-height: 56px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 6px; }
.bandeau-import { order: 10; flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  font-size: 13px; color: var(--doux-2); }
.bandeau-import .badge-import { margin-left: 0; }
.bandeau-import .details-import { flex-basis: 100%; margin-top: 0; }

/* F6 : la page de connexion, le menu du projet */
.page-connexion { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; background: #f6f4ef; }
.connexion { width: min(22rem, 100% - 2rem); padding: 2rem 1.5rem; text-align: center; }
.connexion-icone { width: 72px; height: 72px; border-radius: 16px; }
.connexion h1 { font-size: 1.4rem; font-weight: 600; margin: 1rem 0 1.4rem; letter-spacing: .04em; }
.connexion-form { display: flex; flex-direction: column; gap: .6rem; text-align: left; }
.connexion-form input[type=password] { font: inherit; font-size: 16px; padding: .7rem .8rem; border: 1px solid #d9d4c7; border-radius: 10px; background: #fff; }
.connexion-form button { min-height: 44px; margin-top: .4rem; }
.connexion .message-souci { text-align: left; margin-bottom: 1rem; }
.titre-projet-ligne { display: flex; align-items: center; gap: 10px; }
.menu-projet-plus { position: relative; }
.param-form { display: flex; flex-direction: column; gap: .5rem; max-width: 28rem; margin-bottom: 1rem; }
.param-form input[type=password] { font: inherit; padding: .5rem .7rem; border: 1px solid #d9d4c7; border-radius: 8px; }
.param-form button { align-self: flex-start; }
.param-form .case { display: flex; gap: .5rem; align-items: center; }