/* Charte du Copilote (point 52) : même identité que les présentations.
   Bleu nuit = confiance et action principale, orange brûlé = Noter et liens, fond lin, cartes papier.
   Polices hébergées sur le serveur (aucun appel à un service tiers). */

@font-face {
    font-family: "DM Sans";
    src: url("polices/dm-sans.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
}
@font-face {
    font-family: "Space Grotesk";
    src: url("polices/space-grotesk.woff2") format("woff2");
    font-weight: 500 700;
    font-display: swap;
}

:root {
    --encre: #14213D;
    --ardoise: #4A5568;
    --accent: #B4531A;
    --accent-fonce: #8F3F12;
    --accent-doux: #FBE9DC;
    --fond: #F7F5F0;
    --papier: #FFFDF8;
    --ligne: #E2DACB;
    --ligne-forte: #D9CFBC;
    --neutre: #EFEAE0;
    --rouge: #B42318;
    --rouge-doux: #FDE8E6;
    --vert: #1F7A4D;
    --vert-doux: #E3F3EA;
    --ambre: #F2A65A;
    --ambre-texte: #7A4A0B;
    --ambre-doux: #FEF1DF;
    --titre: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
    --texte: "DM Sans", "Segoe UI", system-ui, sans-serif;
    --nav-bas: 64px;
    --rayon: 16px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--texte);
    font-size: 16px;
    line-height: 1.45;
    color: var(--encre);
    background: var(--fond);
}
a { color: var(--accent); }
a:hover { color: var(--accent-fonce); }
:focus-visible { outline: 3px solid var(--ambre); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--titre); line-height: 1.2; margin: 0; }
h1 { font-size: 28px; font-weight: 700; }
h2 { font-size: 20px; font-weight: 700; }
p { margin: 0; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 16px; top: 8px; z-index: 50; background: var(--papier); padding: 8px 12px; }

/* --- Icônes : un seul jeu au trait (icones.svg) ------------------------------------------------------------- */
.ic { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ic-petite { width: 16px; height: 16px; }
.ic-grande { width: 24px; height: 24px; }

/* --- Barre du haut, navigation ----------------------------------------------------------------------------- */
.barre-haut {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 24px;
    height: 60px;
    padding: 0 16px;
    background: var(--papier);
    border-bottom: 1px solid var(--ligne);
}
.marque { font-family: var(--titre); font-size: 19px; font-weight: 700; color: var(--encre); text-decoration: none; }
.marque:hover { color: var(--encre); }
.nav-haut { display: none; gap: 4px; }
.nav-haut a {
    display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
    border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--ardoise); text-decoration: none;
}
.nav-haut a:hover { background: var(--neutre); color: var(--encre); }
.nav-haut a[aria-current="page"] { background: var(--neutre); color: var(--encre); }
.avatar {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--encre); color: var(--papier); font-size: 14px; font-weight: 700; text-decoration: none;
}
.avatar:hover { color: var(--papier); }
.compte { margin-left: auto; }
.compte-bureau { display: none; position: relative; }
.compte-bureau summary {
    display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px;
    list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; border-radius: 12px;
}
.compte-bureau summary::-webkit-details-marker { display: none; }
.compte-bureau summary:hover { background: var(--neutre); }

.nav-bas {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    display: flex; justify-content: space-around; align-items: flex-start;
    height: calc(var(--nav-bas) + env(safe-area-inset-bottom));
    padding: 6px 8px env(safe-area-inset-bottom);
    background: var(--papier);
    border-top: 1px solid var(--ligne);
}
.nav-bas a {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-width: 72px; min-height: 52px; justify-content: center;
    font-size: 12px; font-weight: 600; color: var(--ardoise); text-decoration: none;
}
.nav-bas a[aria-current="page"] { color: var(--encre); }
.nav-bas .ic { width: 24px; height: 24px; }
.nav-bas .bouton-noter {
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; margin-top: -22px; border-radius: 50%;
    background: var(--accent); color: var(--papier);
    box-shadow: 0 6px 16px rgba(180, 83, 26, .35);
}
.nav-bas a[aria-current="page"] .bouton-noter { background: var(--encre); box-shadow: 0 6px 16px rgba(20, 33, 61, .3); }
.nav-bas .bouton-noter .ic { width: 26px; height: 26px; stroke-width: 2.2; }

.page { max-width: 760px; margin: 0 auto; padding: 20px 16px calc(var(--nav-bas) + 32px + env(safe-area-inset-bottom)); }
.page-large { max-width: 1120px; }
.pied { display: none; text-align: center; color: var(--ardoise); font-size: 12px; padding: 0 16px 24px; }

@media (min-width: 760px) {
    .barre-haut { padding: 0 32px; height: 64px; }
    .nav-haut { display: flex; }
    .compte-mobile { display: none; }
    .compte-bureau { display: block; }
    .nav-bas { display: none; }
    .page { padding: 28px 24px 40px; }
    .pied { display: block; }
}

/* --- En-tête de page ----------------------------------------------------------------------------------------- */
.entete-page { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; }
.entete-page .sous-titre { color: var(--ardoise); font-size: 15px; }
.retour { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; margin-bottom: 4px; font-size: 14px; font-weight: 600; text-decoration: none; }
@media (min-width: 760px) { h1 { font-size: 32px; } }

/* --- Boutons --------------------------------------------------------------------------------------------------- */
button, .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; padding: 0 16px;
    border: 1px solid var(--ligne-forte); border-radius: 12px;
    background: var(--papier); color: var(--encre);
    font: 600 15px var(--texte); text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
button:hover, .btn:hover { border-color: var(--encre); color: var(--encre); }
button:disabled { opacity: .55; cursor: default; }
.btn-p, button.principal { background: var(--encre); border-color: var(--encre); color: var(--papier); }
.btn-p:hover, button.principal:hover { background: #1F2F55; color: var(--papier); }
.btn-danger { color: var(--rouge); }
.btn-danger:hover { border-color: var(--rouge); color: var(--rouge); }
.btn-discret { border-color: transparent; background: none; color: var(--accent); padding: 0 8px; }
.btn-discret:hover { border-color: transparent; color: var(--accent-fonce); text-decoration: underline; }
.btn-i { width: 44px; padding: 0; }
.btn-petit { min-height: 36px; padding: 0 12px; font-size: 14px; border-radius: 10px; }
.lien { min-height: auto; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; }
.lien:hover { border: 0; color: var(--accent-fonce); text-decoration: underline; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.actions form { margin: 0; display: flex; }
.actions .etirer { flex: 1 1 auto; }
.actions .etirer button { width: 100%; }

/* Menu « … » : <details> sans script */
.menu { position: relative; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu-liste {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 10;
    min-width: 230px; padding: 6px 0;
    background: var(--papier); border: 1px solid var(--ligne); border-radius: 14px;
    box-shadow: 0 12px 32px rgba(20, 33, 61, .16);
}
.menu-liste form { margin: 0; display: block; }
.menu-liste a, .menu-liste button {
    display: flex; align-items: center; justify-content: flex-start; gap: 10px;
    width: 100%; min-height: 44px; padding: 0 14px;
    border: 0; border-radius: 0; background: none;
    font: 500 15px var(--texte); color: var(--encre); text-decoration: none; text-align: left;
}
.menu-liste a:hover, .menu-liste button:hover { background: var(--neutre); color: var(--encre); }
.menu-liste .danger, .menu-liste .danger:hover { color: var(--rouge); }

/* --- Étiquettes, compteurs -------------------------------------------------------------------------------- */
.puces { display: flex; flex-wrap: wrap; gap: 6px; }
.puce { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; background: var(--neutre); color: var(--ardoise); }
.puce-retard { background: var(--rouge-doux); color: var(--rouge); }
.puce-confirmer { background: var(--ambre-doux); color: var(--ambre-texte); }
.puce-fait { background: var(--vert-doux); color: var(--vert); }
.puce-accent { background: var(--accent-doux); color: var(--accent-fonce); }
.nb { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; font-size: 12px; font-weight: 700; background: #E9E3D6; color: var(--encre); }
.nb-confirmer { background: var(--ambre); color: var(--encre); }
.nb-retard { background: var(--rouge); color: var(--papier); }

/* --- Onglets en pastilles -------------------------------------------------------------------------------------- */
.onglets { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 16px; padding: 2px 16px; }
.onglets::-webkit-scrollbar { display: none; }
.onglet { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; min-height: 40px; padding: 0 14px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--ardoise); text-decoration: none; white-space: nowrap; }
.onglet:hover { background: var(--neutre); color: var(--encre); }
.onglet[aria-current="page"] { background: var(--encre); color: var(--papier); }

/* --- Cartes ---------------------------------------------------------------------------------------------------- */
.carte { background: var(--papier); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 16px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.carte.clos { opacity: .75; }
.carte-titre { font-family: var(--texte); font-size: 17px; font-weight: 600; line-height: 1.3; }
.meta { font-size: 14px; color: var(--ardoise); }
.meta strong { color: var(--encre); font-weight: 600; }
/* Envoi d'un message (point 110) : balises restantes, texte envoyé tel quel */
.meta.attention { color: var(--ambre-texte); background: var(--ambre-doux); padding: 6px 10px; border-radius: 8px; }
.texte-envoye { white-space: pre-wrap; margin: 8px 0 0; }
.contexte { font-size: 14px; color: var(--ardoise); white-space: pre-line; }
.contexte-court { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.suite-de { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--accent); }
.source { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ardoise); }
.alerte-ligne { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; font-weight: 600; color: var(--rouge); }
.vide { color: var(--ardoise); padding: 24px 0; text-align: center; }
.intro { font-size: 14px; color: var(--ardoise); margin-bottom: 14px; }

/* Groupe d'un import dans « À confirmer » */
.import { margin-bottom: 20px; }
.import-entete { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 2px 8px; font-size: 14px; font-weight: 600; }
.import-entete span { display: flex; align-items: center; gap: 8px; }
.import-entete .ic { color: var(--accent); }
.import-entete form { margin: 0; }
.import-en-cours { flex-direction: row; align-items: center; gap: 12px; font-size: 14px; color: var(--ardoise); }

/* --- Bandeaux : succès, attention, erreur -------------------------------------------------------------------- */
.bandeau { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-bottom: 14px; border-radius: 12px; font-size: 14px; font-weight: 500; }
.bandeau .ic { margin-top: 1px; }
.bandeau-succes { background: var(--vert-doux); color: var(--vert); }
.bandeau-attention { background: var(--ambre-doux); color: var(--ambre-texte); }
.bandeau-erreur { background: var(--rouge-doux); color: var(--rouge); }
.bandeau-info { background: var(--neutre); color: var(--encre); }

/* --- Formulaires ------------------------------------------------------------------------------------------------- */
.saisie label { display: block; margin-bottom: 14px; font-size: 14px; font-weight: 600; color: var(--encre); }
.saisie textarea, .saisie input:not([type=radio]), .saisie select {
    display: block; width: 100%; margin-top: 6px; min-height: 44px; padding: 10px 12px;
    border: 1px solid var(--ligne-forte); border-radius: 12px; background: var(--papier);
    font: 400 16px var(--texte); color: var(--encre);
}
.saisie textarea { resize: vertical; }
.saisie textarea:focus, .saisie input:focus, .saisie select:focus { outline: none; border-color: var(--encre); box-shadow: 0 0 0 3px rgba(242, 166, 90, .45); }
.saisie fieldset { border: 0; padding: 0; margin: 0 0 14px; }
.saisie legend { font-size: 14px; font-weight: 600; margin-bottom: 6px; padding: 0; }
.saisie label.choix { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 18px 0 0; font-weight: 500; }
.saisie label.choix input { width: 20px; height: 20px; accent-color: var(--encre); }
.saisie details { margin: 4px 0 14px; }
.saisie summary { cursor: pointer; color: var(--accent); font-size: 15px; font-weight: 600; min-height: 40px; display: flex; align-items: center; }
.ligne-choix { display: flex; flex-wrap: wrap; gap: 12px; }
.ligne-choix label { flex: 1 1 140px; }

/* --- Accueil ---------------------------------------------------------------------------------------------------- */
.accueil-entete { margin-bottom: 16px; }
.accueil-entete h1 { margin-bottom: 4px; }
.accueil { display: block; }
.accueil-cote { display: none; }
@media (min-width: 1024px) {
    .accueil { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
    .accueil-cote { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 92px; }
    .accueil .carte-engagement { flex-direction: row; align-items: center; gap: 16px; }
    .accueil .carte-engagement .corps { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
    .accueil .carte-engagement .actions { flex-wrap: nowrap; margin: 0; }
    .accueil .carte-engagement .actions .etirer { flex: 0 0 auto; }
}
.corps { display: flex; flex-direction: column; gap: 8px; }
.resume { background: var(--encre); color: var(--papier); border-radius: var(--rayon); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.resume h2, .rubrique { font-family: var(--texte); font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.resume h2 { color: var(--ambre); }
.rubrique { color: var(--ardoise); margin: 0 2px 8px; }
.resume-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.resume-chiffres strong { display: block; font-family: var(--titre); font-size: 30px; line-height: 1.1; }
.resume-chiffres span { font-size: 13px; color: #C9D3E3; }
.raccourci { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; margin-bottom: 8px; border: 1px solid var(--ligne); border-radius: 12px; background: var(--papier); color: var(--encre); font-size: 15px; font-weight: 600; text-decoration: none; }
.raccourci:hover { border-color: var(--encre); color: var(--encre); }
.pastille-ronde { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--neutre); color: var(--encre); }
.pastille-ronde.orange { background: var(--accent); color: var(--papier); }
.pastille-ronde.nuit { background: var(--encre); color: var(--papier); }

/* --- Liste de liens (page « Plus ») ------------------------------------------------------------------------ */
.profil { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.profil .avatar { width: 52px; height: 52px; font-size: 18px; }
.liste-liens { background: var(--papier); border: 1px solid var(--ligne); border-radius: var(--rayon); margin-bottom: 20px; overflow: hidden; }
.liste-liens a { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 16px; color: var(--encre); text-decoration: none; border-top: 1px solid var(--neutre); }
.liste-liens a:first-child { border-top: 0; }
.liste-liens a:hover { background: #FBF9F4; color: var(--encre); }
.liste-liens .libelle { display: flex; flex-direction: column; flex: 1 1 auto; font-size: 16px; font-weight: 600; }
.liste-liens .libelle small { font-size: 13px; font-weight: 400; color: var(--ardoise); }
.liste-liens .pastille { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--neutre); }
.liste-liens .chevron { color: var(--ardoise); }
.deconnexion { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 1px solid var(--ligne-forte); border-radius: 12px; background: var(--papier); color: var(--rouge); font-weight: 600; text-decoration: none; }
.deconnexion:hover { color: var(--rouge); border-color: var(--rouge); }
.mention { font-size: 12px; color: var(--ardoise); text-align: center; margin-top: 16px; }

/* --- Noter : carrousel de tuiles -------------------------------------------------------------------------- */
.tuiles {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px; padding: 4px 16px 10px; margin: 12px -16px 0;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tuiles::-webkit-scrollbar { display: none; }
@media (min-width: 760px) { .tuiles { justify-content: center; } .tuile { width: 228px; } }
.tuile {
    flex: 0 0 auto; width: min(72vw, 260px); height: 320px; scroll-snap-align: center;
    background: var(--papier); border: 1px solid var(--ligne); border-radius: 20px;
    padding: 24px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
}
.tuile .meta { margin-top: auto; font-size: 13px; }
.action { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; min-height: auto; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: none; cursor: pointer; }
.action:hover { border: 0; color: inherit; }
.rond { display: flex; align-items: center; justify-content: center; width: 112px; height: 112px; margin-bottom: 8px; border-radius: 50%; background: var(--encre); color: var(--papier); transition: transform .15s; }
.rond .ic { width: 48px; height: 48px; }
.rond.orange { background: var(--accent); box-shadow: 0 8px 22px rgba(180, 83, 26, .35); }
button.action:active .rond { transform: scale(.95); }
.titre-tuile { font-family: var(--titre); font-size: 20px; font-weight: 700; }
.consigne { font-size: 15px; font-weight: 600; color: var(--accent); min-height: 1.3em; }
.adresse { font-weight: 600; word-break: break-all; user-select: all; color: var(--encre); }
.micro.actif .rond { background: var(--rouge); box-shadow: none; animation: pulse 1.2s ease-in-out infinite; }
.micro.actif .consigne { color: var(--rouge); }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(180, 35, 24, .5); } 50% { box-shadow: 0 0 0 16px rgba(180, 35, 24, 0); } }
@media (prefers-reduced-motion: reduce) { .micro.actif .rond { animation: none; } }
.points { display: flex; justify-content: center; gap: 8px; margin: 6px 0 12px; }
.points span { width: 8px; height: 8px; border-radius: 4px; background: var(--ligne-forte); transition: all .2s; }
.points span.actif { width: 20px; background: var(--accent); }
@media (min-width: 760px) { .points { display: none; } }
.etat { text-align: center; min-height: 1.4em; color: var(--ardoise); font-size: 14px; margin-bottom: 12px; }
.compris { background: var(--papier); border: 1px solid var(--ligne); border-radius: 12px; padding: 12px 14px; color: var(--ardoise); font-size: 14px; margin-bottom: 12px; }

/* --- Choisir un email -------------------------------------------------------------------------------------------- */
.email-entete { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; font-size: 15px; }
.email-objet { font-weight: 600; }
.email-apercu { font-size: 14px; color: var(--ardoise); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.email-confie .email-objet, .email-confie .email-entete strong { color: var(--ardoise); }
.email-masque { opacity: .75; }
.centre { text-align: center; }

/* --- Tableaux (consommation, bilan) ------------------------------------------------------------------------ */
.tableau { overflow-x: auto; background: var(--papier); border: 1px solid var(--ligne); border-radius: var(--rayon); margin-bottom: 16px; }
.tableau table { border-collapse: collapse; width: 100%; font-size: 14px; }
.tableau th, .tableau td { padding: 10px 12px; border-bottom: 1px solid var(--neutre); text-align: left; white-space: nowrap; }
.tableau th { color: var(--ardoise); font-weight: 600; }
.tableau .nombre { text-align: right; font-variant-numeric: tabular-nums; }
.tableau tfoot th { color: var(--encre); border-bottom: 0; border-top: 2px solid var(--ligne); }
.mois { margin: 24px 0 10px; }
.chiffres { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 4px 0 20px; }
.chiffres div { background: var(--papier); border: 1px solid var(--ligne); border-radius: 12px; padding: 12px 14px; font-size: 13px; color: var(--ardoise); }
.chiffres strong { display: block; font-family: var(--titre); font-size: 26px; color: var(--encre); }
.historique { padding-left: 18px; }
.historique li { margin-bottom: 8px; }

/* --- Chat « Demander » ----------------------------------------------------------------------------------------- */
.chat { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
.chat-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.chat-entete .outils-entete { display: flex; gap: 4px; }
.conversations-bureau { display: none; }
@media (min-width: 900px) {
    .chat { grid-template-columns: 240px minmax(0, 1fr); }
    .conversations-bureau { display: block; position: sticky; top: 92px; }
    .conversations-mobile { display: none; }
}
.conversations-liste { list-style: none; padding: 0; margin: 0; max-height: 70vh; overflow-y: auto; }
.conversations-liste li a { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 10px; color: var(--encre); text-decoration: none; font-size: 14px; }
.conversations-liste li a:hover { background: var(--neutre); }
.conversations-liste li.active a { background: var(--neutre); font-weight: 600; }
.conversations-liste .titre-conv { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversations-liste small { color: var(--ardoise); font-weight: 400; }
.conversations-mobile .menu-liste { width: min(86vw, 320px); max-height: 60vh; overflow-y: auto; }
.discussion { min-width: 0; }
.fil { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.accueil-chat { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; color: var(--ardoise); font-size: 15px; }
.exemples { display: flex; flex-wrap: wrap; gap: 8px; }
.exemple { min-height: 38px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--encre); }
.bulle { border-radius: 18px; padding: 12px 16px; max-width: 92%; overflow-wrap: anywhere; font-size: 15px; line-height: 1.5; }
.bulle.dirigeant { align-self: flex-end; max-width: 85%; background: var(--encre); color: var(--papier); border-bottom-right-radius: 4px; }
.bulle.dirigeant .texte { white-space: pre-line; }
.bulle.dirigeant .source { color: #C9D3E3; margin-top: 4px; }
.bulle.copilote { align-self: stretch; max-width: 100%; background: var(--papier); border: 1px solid var(--ligne); border-top-left-radius: 4px; }
.markdown p { margin: 0 0 8px; }
.markdown p:last-child { margin-bottom: 0; }
/* Tableaux des réponses : cases bordées, en-tête sur fond, lignes alternées. Le tableau défile en largeur
   plutôt que de couper les mots (adresses email, noms) au milieu. */
.markdown table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 1.4; margin: 10px 0; display: block; overflow-x: auto; overflow-wrap: normal; }
.markdown th, .markdown td { border: 1px solid var(--ligne); padding: 6px 10px; text-align: left; vertical-align: top; overflow-wrap: break-word; }
.markdown th { background: var(--neutre); color: var(--encre); font-weight: 600; }
.markdown tbody tr:nth-child(even) td { background: #FBF9F4; }
.markdown td .renvoi, .markdown th .renvoi { margin-left: 3px; }
.markdown h3, .markdown h4 { font-family: var(--texte); font-size: 15px; font-weight: 700; margin: 12px 0 6px; }
.markdown ul, .markdown ol { padding-left: 20px; margin: 4px 0 8px; }
.markdown.vide { color: var(--ardoise); }
.renvoi { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin: 0 1px; border-radius: 9px; background: var(--accent-doux); color: var(--accent-fonce); font-size: 11px; font-weight: 700; vertical-align: 2px; text-decoration: none; }
.incertain { display: flex; align-items: flex-start; gap: 6px; color: var(--ambre-texte); font-size: 14px; margin-top: 8px; }
.bulle .etat { display: flex; align-items: center; gap: 8px; color: var(--ardoise); margin: 0; text-align: left; }
.bulle .etat .chrono { font-variant-numeric: tabular-nums; }
.bulle .roue { width: 16px; height: 16px; flex: 0 0 16px; border: 2px solid var(--ligne); border-top-color: var(--accent); border-radius: 50%; animation: tourne .8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bulle .roue { animation-duration: 2.4s; } }
.bulle .brouillon { opacity: .72; margin-top: 8px; transition: opacity .3s; }
.sources-chat { margin-top: 10px; font-size: 14px; }
.sources-chat summary { cursor: pointer; color: var(--accent); font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.sources-chat ol { padding-left: 20px; margin: 6px 0 0; }
.sources-chat li { margin-bottom: 10px; }
.sources-chat li:target, .sources-chat li.surligne { background: var(--ambre-doux); border-radius: 8px; }
.sources-chat .meta { font-size: 13px; }
.sources-chat pre.tableau-source { margin: 4px 0; padding: 8px 10px; background: var(--fond); border-radius: 8px; font-size: 12px; line-height: 1.5; white-space: pre; overflow-x: auto; max-height: 360px; }
.sources-chat blockquote { margin: 4px 0; padding: 6px 10px; border-left: 3px solid var(--ligne-forte); color: var(--ardoise); background: var(--fond); }
.origine { word-break: break-word; }
.outils { display: flex; flex-wrap: wrap; gap: 2px; margin: 6px -8px -6px; }
.outil { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; min-height: 40px; padding: 0 8px; border: 0; border-radius: 10px; background: none; color: var(--ardoise); font: 600 13px var(--texte); text-decoration: none; cursor: pointer; }
.outil:hover { border: 0; background: var(--neutre); color: var(--encre); }
.outil.choisi { color: var(--accent); background: var(--accent-doux); }
.composer {
    position: fixed; left: 0; right: 0; bottom: calc(var(--nav-bas) + env(safe-area-inset-bottom)); z-index: 15;
    padding: 8px 12px 6px; background: var(--fond); border-top: 1px solid var(--ligne);
}
.discussion { padding-bottom: 76px; }
@media (min-width: 760px) {
    .composer { position: sticky; left: auto; right: auto; bottom: 0; padding: 10px 0 8px; border-top: 0; }
    .discussion { padding-bottom: 0; }
}
.composer-ligne { display: flex; align-items: flex-end; gap: 6px; background: var(--papier); border: 1px solid var(--ligne-forte); border-radius: 24px; padding: 4px; }
.composer textarea { flex: 1 1 auto; min-width: 0; height: 44px; min-height: 44px; max-height: 200px; padding: 11px 6px; border: 0; background: none; resize: none; overflow-y: hidden; font: 400 16px/22px var(--texte); color: var(--encre); }
.composer textarea:focus { outline: none; }
.composer-ligne:focus-within { border-color: var(--encre); box-shadow: 0 0 0 3px rgba(242, 166, 90, .45); }
.composer .outil { min-width: 44px; min-height: 44px; border-radius: 22px; }
.envoyer { width: 44px; min-width: 44px; padding: 0; border-radius: 22px; }
.micro-question.actif { background: var(--rouge); color: var(--papier); animation: pulse 1.2s ease-in-out infinite; }
.etat-composer { font-size: 13px; color: var(--ardoise); margin: 4px 12px 0; }
.etat-composer:empty { display: none; }
.apercu-photo { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ardoise); margin: 0 8px 6px; }
.supprimer-conversation { text-align: right; margin-top: 4px; }
.supprimer-conversation button { font-size: 13px; color: var(--ardoise); }