/* ============================================================================
   Cannelle — design system
   Palette, typographie et composants décrits dans docs-projet/IDENTITE.md
   ========================================================================== */

:root {
  /* Pigments */
  --cannelle:      #A4552B;
  --ecorce:        #7C3D1D;
  --poudre:        #E8C9AF;
  --poudre-clair:  #F4E6DA;

  /* Encres */
  --girofle:       #2B211B;
  --muscade:       #6B5D53;
  --muscade-clair: #8F8378;

  /* Papiers */
  --papier:        #FBF7F2;
  --creme:         #FFFFFF;
  --sable:         #E5DDD3;
  --sable-clair:   #F1EAE1;

  /* États */
  --olive:         #5C7148;
  --olive-fond:    #ECF1E6;
  --safran:        #B4803A;
  --safran-fond:   #FBF0DE;
  --grenat:        #9A3B34;
  --grenat-fond:   #FAEAE8;
  --ardoise:       #3F5A6B;
  --ardoise-fond:  #EAF0F3;

  /* Motif de fond des écrans de connexion : un ton sous le papier. */
  --motif:         #D9C2AC;
  --verre:         rgba(255, 255, 255, .38);
  --verre-bord:    rgba(255, 255, 255, .7);
  --verre-reflet:  rgba(255, 255, 255, .9);
  --verre-ombre:   0 8px 32px rgba(84, 52, 30, .12), 0 1px 2px rgba(84, 52, 30, .06);
  --verre-appli:   rgba(255, 255, 255, .62);

  /* Structure */
  --rayon:      6px;
  --rayon-sm:   4px;
  --ombre:      0 1px 2px rgba(43, 33, 27, .06);
  --ombre-haut: 0 4px 16px rgba(43, 33, 27, .10);

  --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier:        #19130F;
    --creme:         #221B16;
    --sable:         #362C25;
    --sable-clair:   #2B221C;
    --girofle:       #F3EAE1;
    --muscade:       #B5A79B;
    --muscade-clair: #8E8278;
    --cannelle:      #D98C5F;
    --ecorce:        #E9AC84;
    --poudre:        #6B4028;
    --poudre-clair:  #3A251A;
    --olive-fond:    #232B1D;
    --safran-fond:   #33260F;
    --grenat-fond:   #321917;
    --ardoise-fond:  #1B262C;
    --motif:         #4E3727;
    --verre:         rgba(40, 30, 24, .30);
    --verre-bord:    rgba(255, 235, 215, .10);
    --verre-reflet:  rgba(255, 235, 215, .16);
    --verre-ombre:   0 8px 32px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);
    --verre-appli:   rgba(34, 27, 22, .55);
    --olive:         #9DBA84;
    --safran:        #E0AE62;
    --grenat:        #DE8079;
    --ardoise:       #8FB3C8;
    --ombre:         0 1px 2px rgba(0, 0, 0, .35);
    --ombre-haut:    0 4px 16px rgba(0, 0, 0, .45);
  }
}

/* Le thème sombre choisi à la main. Mêmes valeurs que ci-dessus, recopiées :
   une requête média ne peut pas partager un bloc avec un sélecteur. Un test
   vérifie que les deux blocs restent identiques. */
:root[data-theme="dark"] {
  --papier:        #19130F;
  --creme:         #221B16;
  --sable:         #362C25;
  --sable-clair:   #2B221C;
  --girofle:       #F3EAE1;
  --muscade:       #B5A79B;
  --muscade-clair: #8E8278;
  --cannelle:      #D98C5F;
  --ecorce:        #E9AC84;
  --poudre:        #6B4028;
  --poudre-clair:  #3A251A;
  --olive-fond:    #232B1D;
  --safran-fond:   #33260F;
  --grenat-fond:   #321917;
  --ardoise-fond:  #1B262C;
  --motif:         #4E3727;
  --verre:         rgba(40, 30, 24, .30);
  --verre-bord:    rgba(255, 235, 215, .10);
  --verre-reflet:  rgba(255, 235, 215, .16);
  --verre-ombre:   0 8px 32px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);
  --verre-appli:   rgba(34, 27, 22, .55);
  --olive:         #9DBA84;
  --safran:        #E0AE62;
  --grenat:        #DE8079;
  --ardoise:       #8FB3C8;
  --ombre:         0 1px 2px rgba(0, 0, 0, .35);
  --ombre-haut:    0 4px 16px rgba(0, 0, 0, .45);
}

/* Les contrôles natifs — barres de défilement, calendriers, cases — suivent
   le thème affiché plutôt que celui du système. */
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--girofle);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
h1 { font-size: 28px; line-height: 1.2; }
h2 { font-size: 19px; line-height: 1.3; }
h3 { font-size: 16px; }

a { color: var(--cannelle); text-decoration: none; }
a:hover { color: var(--ecorce); text-decoration: underline; text-underline-offset: 2px; }

/* --- Chiffres : alignement vertical impératif ----------------------------
   IBM Plex Mono donne à chaque glyphe la même chasse : les milliers tombent
   sous les milliers, les centimes sous les centimes, sans que l'œil ait à
   chercher la virgule. `tabular-nums` reste utile pour les polices de repli.
   0,94em compense la chasse de la mono, plus large qu'Inter à taille égale. */
.num, td.num, th.num {
  font-family: var(--mono);
  font-size: .94em;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  text-align: right;
  white-space: nowrap;
}
.num-fort { font-weight: 600; }

/* ---------------------------------------------------------------- charpente */
.appli { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh;
         position: relative; z-index: 1; }

.barre-laterale {
  background: var(--creme);
  border-right: 1px solid var(--sable);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

/* La marque mène à l'accueil, mais se lit comme un logo : un soulignement au
   survol la ferait passer pour un lien de texte au milieu d'une phrase. */
.marque { display: flex; align-items: center; gap: 10px; padding: 0 8px; color: var(--cannelle); }
.marque:hover, .marque:hover .marque-nom { text-decoration: none; color: inherit; }
.marque:hover { color: var(--cannelle); }
.marque svg { width: 30px; height: 30px; flex: none; }
.marque-texte { display: flex; flex-direction: column; line-height: 1.1; }
.marque-nom { font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--girofle); }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-radius: var(--rayon);
  color: var(--girofle); font-weight: 500; font-size: 13.5px;
}
.nav a:hover { background: var(--sable-clair); text-decoration: none; }
.nav a.actif { background: var(--poudre-clair); color: var(--ecorce); font-weight: 600; }

/* La rubrique où l'on se trouve se signale sans fond : le fond appartient à
   la page courante, et deux aplats superposés brouilleraient lequel des deux
   est l'endroit où l'on est. */
.nav a.ouvert { color: var(--ecorce); font-weight: 600; }
.nav-sous {
  display: flex; flex-direction: column; gap: 2px;
  margin: 2px 0 8px 18px; padding-left: 10px;
  border-left: 1px solid var(--sable);
}
.nav-sous a { font-size: 13px; font-weight: 400; color: var(--muscade); padding: 6px 10px; }
.nav-sous a.actif { font-weight: 600; }
.nav .pastille {
  background: var(--grenat); color: #fff; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; padding: 1px 6px; font-variant-numeric: tabular-nums;
}

.pied-laterale { margin-top: auto; font-size: 11.5px; color: var(--muscade-clair); padding: 0 8px; }
.pied-laterale a { color: var(--muscade); }

.contenu { padding: 28px 32px 64px; max-width: 1400px; }

.entete-page {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin-bottom: 24px; flex-wrap: wrap;
}
.entete-page p { margin: 6px 0 0; color: var(--muscade); max-width: 62ch; }

/* ---------------------------------------------------------------- éléments */
.carte {
  background: var(--creme);
  border: 1px solid var(--sable);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}
.carte-entete {
  padding: 14px 16px; border-bottom: 1px solid var(--sable);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.carte-corps { padding: 16px; }
.carte-corps > p:first-child { margin-top: 0; }
.carte-corps > p:last-child { margin-bottom: 0; }

.grille { display: grid; gap: 16px; }
.grille-4 { grid-template-columns: repeat(4, 1fr); }
.grille-3 { grid-template-columns: repeat(3, 1fr); }
.grille-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .grille-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px)  { .grille-4, .grille-3, .grille-2 { grid-template-columns: 1fr; } }

/* Tuile de chiffre clé */
.tuile { padding: 16px; }
.tuile-libelle {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muscade); font-weight: 600;
}
.tuile-valeur {
  font-family: var(--mono); font-size: 25px; font-weight: 500;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  margin-top: 6px; line-height: 1.1;
}
.tuile-note { font-size: 12px; color: var(--muscade); margin-top: 4px; }
.tuile-alerte .tuile-valeur { color: var(--grenat); }

/* Tableaux : le cœur de l'application */
table.tableau { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tableau th {
  text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muscade); font-weight: 600; padding: 10px 12px;
  border-bottom: 1px solid var(--sable); white-space: nowrap; background: var(--creme);
  position: sticky; top: 0; z-index: 1;
}
table.tableau td { padding: 10px 12px; border-bottom: 1px solid var(--sable-clair); }
table.tableau tbody tr:last-child td { border-bottom: none; }
table.tableau tbody tr:hover { background: var(--sable-clair); }
table.tableau tfoot td {
  padding: 12px; border-top: 2px solid var(--sable); font-weight: 600; background: var(--sable-clair);
}
.tableau-defilant { overflow-x: auto; }
.cellule-principale { font-weight: 600; }
.cellule-note { display: block; font-size: 12px; color: var(--muscade); font-weight: 400; margin-top: 2px; }

/* États : couleur + libellé, jamais la couleur seule */
.etat {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.etat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.etat-neutre  { background: var(--sable-clair);  color: var(--muscade); }
.etat-succes  { background: var(--olive-fond);   color: var(--olive); }
.etat-alerte  { background: var(--safran-fond);  color: var(--safran); }
.etat-danger  { background: var(--grenat-fond);  color: var(--grenat); }
.etat-info    { background: var(--ardoise-fond); color: var(--ardoise); }

/* Boutons */
.bouton {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  padding: 8px 14px; border-radius: var(--rayon); border: 1px solid transparent;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; cursor: pointer;
  background: var(--cannelle); color: #fff; text-decoration: none;
}
.bouton:hover { background: var(--ecorce); color: #fff; text-decoration: none; }
.bouton-secondaire { background: var(--creme); color: var(--girofle); border-color: var(--sable); }
.bouton-secondaire:hover { background: var(--sable-clair); color: var(--girofle); }
.bouton-discret { background: transparent; color: var(--muscade); padding: 6px 10px; }
.bouton-discret:hover { background: var(--sable-clair); color: var(--girofle); }
.bouton-petit { padding: 5px 10px; font-size: 12.5px; }
.bouton[disabled] { opacity: .45; pointer-events: none; }

/* Formulaires */
input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="number"], input[type="search"], select, textarea {
  font-family: var(--sans); font-size: 13.5px; padding: 8px 10px;
  border: 1px solid var(--sable); border-radius: var(--rayon);
  background: var(--creme); color: var(--girofle); width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--poudre); outline-offset: -1px; border-color: var(--cannelle);
}
label { font-size: 12px; font-weight: 600; color: var(--muscade); display: block; margin-bottom: 4px; }
.champ { margin-bottom: 14px; }
.barre-filtres { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 18px; }
.barre-filtres .champ { margin: 0; min-width: 150px; }

/* Messages */
/* Marge des deux côtés : un message n'apparaît pas qu'en tête de page, il
   s'intercale aussi entre deux blocs. Les marges verticales adjacentes
   fusionnant, deux messages qui se suivent ne s'écartent pas pour autant. */
.message {
  padding: 12px 15px; border-radius: var(--rayon); margin: 16px 0;
  border: 1px solid transparent; font-size: 13.5px; line-height: 1.55;
}
.message:first-child { margin-top: 0; }
/* Un message long reste lisible : au-delà, l'œil perd la ligne en revenant
   à la marge. Le cadre, lui, garde toute la largeur. */
.message p, .message > div { max-width: 78ch; margin: 8px 0 0; }
.message p:last-child, .message > div:last-child { margin-bottom: 0; }
.message-success { background: var(--olive-fond);  border-color: var(--olive);  color: var(--olive); }
.message-warning { background: var(--safran-fond); border-color: var(--safran); color: var(--safran); }
.message-error   { background: var(--grenat-fond); border-color: var(--grenat); color: var(--grenat); }
.message-info    { background: var(--ardoise-fond);border-color: var(--ardoise);color: var(--ardoise); }

.vide { padding: 40px 16px; text-align: center; color: var(--muscade); }
.vide strong { display: block; font-family: var(--serif); font-size: 16px; color: var(--girofle); margin-bottom: 4px; }

.liste-definitions { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; font-size: 13.5px; }
.liste-definitions dt { color: var(--muscade); font-weight: 500; }
.liste-definitions dd { margin: 0; font-weight: 500; }

.filet { height: 1px; background: var(--sable); border: 0; margin: 24px 0; }
.discret { color: var(--muscade); }
.petit { font-size: 12px; }

/* --------------------------------------------------- écran de connexion */
.connexion { display: grid; place-items: center; min-height: 100vh; padding: 24px;
             position: relative; z-index: 1; }
.connexion-carte { width: 100%; max-width: 380px; padding: 32px; }

/* La carte en verre dépoli : le motif passe dessous, flouté et saturé,
   comme derrière une fenêtre de macOS. Le reflet du bord supérieur est un
   liseré intérieur plus lumineux que le reste du cadre — c'est lui qui
   donne l'épaisseur. Sans `backdrop-filter`, la carte reste opaque. */
.connexion-carte {
  background: var(--creme);
  border-color: var(--verre-bord);
  border-radius: 16px;
  box-shadow: var(--verre-ombre), inset 0 1px 0 var(--verre-reflet);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .connexion-carte {
    background: var(--verre);
    -webkit-backdrop-filter: blur(6px) saturate(180%);
            backdrop-filter: blur(6px) saturate(180%);
  }
  .connexion-carte input {
    background: color-mix(in srgb, var(--creme) 60%, transparent);
  }
}

/* Le même verre sur les cartes de l'application, un peu plus couvrant : un
   tableau de chiffres doit rester lisible quand une rosace s'allume dessous.
   La barre latérale et l'en-tête mobile restent opaques — ce sont des repères,
   pas du contenu. */
.contenu .carte {
  border-color: var(--verre-bord);
  border-radius: 10px;
  box-shadow: var(--verre-ombre), inset 0 1px 0 var(--verre-reflet);
}
/* Les en-têtes de tableau collent en haut au défilement : ils gardent un fond
   pour masquer les lignes qui passent dessous, mais translucide, pour ne pas
   trancher sur le verre. Le conteneur défilant épouse l'arrondi de la carte. */
.contenu .carte > .tableau-defilant:first-child { border-radius: 10px 10px 0 0; }
.contenu .carte > .tableau-defilant:last-child { border-radius: 0 0 10px 10px; }
.contenu .carte > .tableau-defilant:only-child { border-radius: 10px; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .contenu .carte {
    background: var(--verre-appli);
    -webkit-backdrop-filter: blur(10px) saturate(170%);
            backdrop-filter: blur(10px) saturate(170%);
  }
  .contenu .carte table.tableau th {
    background: color-mix(in srgb, var(--creme) 80%, transparent);
  }
  /* Une carte dans une carte ne refloute pas ce que la première a déjà flouté. */
  .contenu .carte .carte { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Le motif : la rosace répétée en filigrane derrière la carte, un ton sous
   le papier, qui s'efface vers le bas et les bords. Chaque rosace respire à
   son rythme — le script leur donne une durée et un départ différents — si
   bien que le champ scintille sans jamais se répéter. Sans script, la couche
   reste vide et la page ne perd rien. */
.motif {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  display: grid; grid-template-columns: repeat(var(--colonnes, 12), var(--motif-taille, 36px));
  grid-auto-rows: var(--motif-taille, 36px); justify-content: center; align-content: start;
  gap: var(--motif-pas, 48px); padding: 32px 0;
  -webkit-mask-image: radial-gradient(ellipse 90% 85% at 50% 0%, #000 0%, rgba(0,0,0,.55) 45%, transparent 100%);
          mask-image: radial-gradient(ellipse 90% 85% at 50% 0%, #000 0%, rgba(0,0,0,.55) 45%, transparent 100%);
}
.motif i {
  display: block;
  background: var(--motif);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2064%2064%22%3E%3Cpath%20fill-rule=%22evenodd%22%20d=%22M32%202C41%2013%2042%2023%2032%2031C22%2023%2023%2013%2032%202ZM32%2012C37%2019%2037%2025%2032%2028C27%2025%2027%2019%2032%2012Z%22%20transform=%22rotate(0%2032%2032)%22/%3E%3Cpath%20fill-rule=%22evenodd%22%20d=%22M32%202C41%2013%2042%2023%2032%2031C22%2023%2023%2013%2032%202ZM32%2012C37%2019%2037%2025%2032%2028C27%2025%2027%2019%2032%2012Z%22%20transform=%22rotate(60%2032%2032)%22/%3E%3Cpath%20fill-rule=%22evenodd%22%20d=%22M32%202C41%2013%2042%2023%2032%2031C22%2023%2023%2013%2032%202ZM32%2012C37%2019%2037%2025%2032%2028C27%2025%2027%2019%2032%2012Z%22%20transform=%22rotate(120%2032%2032)%22/%3E%3Cpath%20fill-rule=%22evenodd%22%20d=%22M32%202C41%2013%2042%2023%2032%2031C22%2023%2023%2013%2032%202ZM32%2012C37%2019%2037%2025%2032%2028C27%2025%2027%2019%2032%2012Z%22%20transform=%22rotate(180%2032%2032)%22/%3E%3Cpath%20fill-rule=%22evenodd%22%20d=%22M32%202C41%2013%2042%2023%2032%2031C22%2023%2023%2013%2032%202ZM32%2012C37%2019%2037%2025%2032%2028C27%2025%2027%2019%2032%2012Z%22%20transform=%22rotate(240%2032%2032)%22/%3E%3Cpath%20fill-rule=%22evenodd%22%20d=%22M32%202C41%2013%2042%2023%2032%2031C22%2023%2023%2013%2032%202ZM32%2012C37%2019%2037%2025%2032%2028C27%2025%2027%2019%2032%2012Z%22%20transform=%22rotate(300%2032%2032)%22/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2064%2064%22%3E%3Cpath%20fill-rule=%22evenodd%22%20d=%22M32%202C41%2013%2042%2023%2032%2031C22%2023%2023%2013%2032%202ZM32%2012C37%2019%2037%2025%2032%2028C27%2025%2027%2019%2032%2012Z%22%20transform=%22rotate(0%2032%2032)%22/%3E%3Cpath%20fill-rule=%22evenodd%22%20d=%22M32%202C41%2013%2042%2023%2032%2031C22%2023%2023%2013%2032%202ZM32%2012C37%2019%2037%2025%2032%2028C27%2025%2027%2019%2032%2012Z%22%20transform=%22rotate(60%2032%2032)%22/%3E%3Cpath%20fill-rule=%22evenodd%22%20d=%22M32%202C41%2013%2042%2023%2032%2031C22%2023%2023%2013%2032%202ZM32%2012C37%2019%2037%2025%2032%2028C27%2025%2027%2019%2032%2012Z%22%20transform=%22rotate(120%2032%2032)%22/%3E%3Cpath%20fill-rule=%22evenodd%22%20d=%22M32%202C41%2013%2042%2023%2032%2031C22%2023%2023%2013%2032%202ZM32%2012C37%2019%2037%2025%2032%2028C27%2025%2027%2019%2032%2012Z%22%20transform=%22rotate(180%2032%2032)%22/%3E%3Cpath%20fill-rule=%22evenodd%22%20d=%22M32%202C41%2013%2042%2023%2032%2031C22%2023%2023%2013%2032%202ZM32%2012C37%2019%2037%2025%2032%2028C27%2025%2027%2019%2032%2012Z%22%20transform=%22rotate(240%2032%2032)%22/%3E%3Cpath%20fill-rule=%22evenodd%22%20d=%22M32%202C41%2013%2042%2023%2032%2031C22%2023%2023%2013%2032%202ZM32%2012C37%2019%2037%2025%2032%2028C27%2025%2027%2019%2032%2012Z%22%20transform=%22rotate(300%2032%2032)%22/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: var(--pic, .6);
  animation: scintille var(--duree, 4s) ease-in-out var(--depart, 0s) infinite;
}
/* Dans l'application, le motif n'est qu'une texture : le texte y est posé
   directement, sans carte, et une rosace pleinement allumée derrière un titre
   ou une liste gêne la lecture. Il pâlit nettement et s'éteint avant le
   milieu de l'écran. */
.motif-appli {
  opacity: .35;
  -webkit-mask-image: radial-gradient(ellipse 110% 55% at 50% 0%, #000 0%, rgba(0,0,0,.4) 50%, transparent 100%);
          mask-image: radial-gradient(ellipse 110% 55% at 50% 0%, #000 0%, rgba(0,0,0,.4) 50%, transparent 100%);
}
@keyframes scintille {
  0%, 100% { opacity: .06; transform: scale(.85); }
  45%, 55% { opacity: var(--pic, .8); transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .motif i { animation: none; opacity: .35; }
}

/* Masqué à l'œil, lu par les lecteurs d'écran. `display:none` les priverait
   de l'information ; ce découpage la leur laisse. */
.hors-ecran {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Le code à six chiffres : espacé, centré, assez grand pour se relire d'un
   coup d'œil en le recopiant depuis un téléphone. */
.champ-code {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 500;
  text-align: center;
  letter-spacing: .34em;
  text-indent: .34em;         /* recentre malgré l'espace ajouté après le 6e chiffre */
  padding: 14px 8px;
  color: var(--girofle);
}
.champ-code::placeholder {
  color: var(--sable);
  letter-spacing: .34em;
}
.champ-code:focus {
  border-color: var(--cannelle);
  box-shadow: 0 0 0 3px rgba(164, 85, 43, .14);
}

/* Une action secondaire qui ne doit pas rivaliser avec le bouton principal. */
.bouton-lien {
  background: none;
  border: 0;
  padding: 4px;
  color: var(--muscade);
  font-family: var(--sans);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bouton-lien:hover { color: var(--cannelle); }
/* Le nom seul tient lieu d'en-tête : la marge reprend l'espace que la
   baseline et la mention du groupe occupaient avant de les retirer. */
.connexion .marque { justify-content: center; margin-bottom: 28px; }

/* --------------------------------------------------- impression / PDF */
@page { size: A4; margin: 16mm 15mm 18mm; }

@media print {
  .barre-laterale, .sans-impression { display: none !important; }
  .appli { display: block; }
  .contenu { padding: 0; max-width: none; }
  body { background: #fff; font-size: 10.5pt; }
  .carte { border: none; box-shadow: none; background: #fff !important;
           -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .motif { display: none; }
}

/* ---------------------------------------------------------------- assistant */
.actions-entete { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.etiquette {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muscade); font-weight: 600; margin: 0 0 10px;
}

/* Deux colonnes : la liste des fils, puis l'échange. Sous 900 px, la liste
   passe au-dessus — elle reste utile, mais cesse de rogner la lecture. */
.assistant { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .assistant { grid-template-columns: 1fr; } }

.assistant-fils { display: flex; flex-direction: column; gap: 2px; }
.assistant-fil {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; border-radius: var(--rayon-sm);
  color: var(--girofle); text-decoration: none;
}
.assistant-fil:hover { background: var(--sable-clair); text-decoration: none; }
.assistant-fil.actif { background: var(--poudre-clair); }
.assistant-fil-titre {
  font-size: 13px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.assistant-echange { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.assistant-messages { display: flex; flex-direction: column; gap: 14px; }
.bulle { max-width: 78%; }
.bulle-personne { align-self: flex-end; }
.bulle-personne .bulle-contenu {
  background: var(--poudre-clair); border: 1px solid var(--poudre);
  border-radius: var(--rayon) var(--rayon) 2px var(--rayon);
}
.bulle-assistant { align-self: flex-start; }
.bulle-assistant .bulle-contenu {
  background: var(--creme); border: 1px solid var(--sable);
  border-radius: var(--rayon) var(--rayon) var(--rayon) 2px;
}
.bulle-contenu { padding: 12px 15px; line-height: 1.6; }
.bulle-outils { margin: 5px 4px 0; font-size: 11.5px; }

.assistant-vide { padding: 28px 4px; }
.assistant-vide ul { margin: 10px 0 0; padding-left: 18px; line-height: 1.9; }

.assistant-saisie { display: flex; gap: 10px; align-items: flex-end; }
.assistant-saisie textarea {
  flex: 1; font-family: var(--sans); font-size: 14px; line-height: 1.55;
  padding: 11px 13px; border: 1px solid var(--sable);
  border-radius: var(--rayon); background: var(--creme); color: var(--girofle);
  resize: vertical; min-height: 66px;
}
.assistant-saisie textarea:focus {
  outline: none; border-color: var(--cannelle);
  box-shadow: 0 0 0 3px rgba(164, 85, 43, .12);
}
.assistant-saisie textarea:disabled { background: var(--sable-clair); cursor: not-allowed; }

/* --- propositions de modification --- */
.assistant-propositions { display: flex; flex-direction: column; gap: 10px; }

.proposition {
  border: 1px solid var(--poudre); background: var(--poudre-clair);
  border-radius: var(--rayon); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 9px;
}
.proposition-large { background: var(--creme); border-color: var(--sable); margin-bottom: 12px; }
.proposition-objet { display: flex; flex-direction: column; gap: 2px; }

/* L'avant barré, l'après en évidence : la nature du changement doit se lire
   sans avoir à comparer deux nombres caractère par caractère. */
.proposition-valeurs {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 14px;
}
.valeur-avant { color: var(--muscade-clair); text-decoration: line-through; }
.valeur-apres { color: var(--ecorce); font-weight: 600; }
.fleche { color: var(--muscade-clair); }
.proposition-motif { margin: 0; line-height: 1.55; }
.proposition-actions { display: flex; gap: 10px; align-items: center; }

.titre-section {
  font-family: var(--serif); font-size: 17px; font-weight: 600;
  margin: 26px 0 12px; display: flex; align-items: center; gap: 9px;
}
.compteur {
  background: var(--cannelle); color: #fff; border-radius: 999px;
  font-family: var(--sans); font-size: 11px; font-weight: 700; padding: 1px 7px;
}

/* Le Markdown rendu dans les bulles. Les marges sont resserrées : une bulle
   n'est pas une page, et les marges par défaut d'un <p> y creusent des trous. */
.bulle-contenu > *:first-child { margin-top: 0; }
.bulle-contenu > *:last-child  { margin-bottom: 0; }
.bulle-contenu p { margin: 0 0 10px; }
.bulle-contenu ul, .bulle-contenu ol { margin: 0 0 10px; padding-left: 20px; }
.bulle-contenu li { margin-bottom: 3px; }
.bulle-contenu li::marker { color: var(--muscade-clair); }
.bulle-contenu strong { font-weight: 600; color: var(--girofle); }
.bulle-contenu code {
  font-family: var(--mono); font-size: .9em;
  background: var(--sable-clair); padding: 1px 5px; border-radius: var(--rayon-sm);
}
.bulle-contenu h1, .bulle-contenu h2, .bulle-contenu h3 {
  font-size: 15px; margin: 14px 0 6px;
}
/* Un tableau dans une bulle défile plutôt que d'élargir la page. */
.bulle-contenu table {
  width: 100%; border-collapse: collapse; font-size: 13px; margin: 4px 0 10px;
  display: block; overflow-x: auto;
}
.bulle-contenu th, .bulle-contenu td {
  padding: 6px 10px; border-bottom: 1px solid var(--sable); text-align: left;
}
.bulle-contenu th { font-weight: 600; color: var(--muscade); font-size: 11.5px;
                    text-transform: uppercase; letter-spacing: .05em; }

/* L'indicateur d'attente : trois points qui respirent, décalés pour donner
   l'impression d'une vague plutôt que d'un clignotement. L'assistant peut
   mettre dix secondes à répondre quand il enchaîne les outils — sans ce
   signal, on croirait la page figée. */
.reflexion { display: flex; align-items: center; gap: 5px; }
.reflexion-texte { color: var(--muscade); margin-left: 6px; font-size: 13px; }
.point {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cannelle); opacity: .3;
  animation: respire 1.3s ease-in-out infinite;
}
.point:nth-child(2) { animation-delay: .18s; }
.point:nth-child(3) { animation-delay: .36s; }

@keyframes respire {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

/* Un mouvement perpétuel devient vite pénible pour qui y est sensible. */
@media (prefers-reduced-motion: reduce) {
  .point { animation: none; opacity: .6; }
}

#envoyer:disabled, .assistant-saisie textarea:disabled { opacity: .6; cursor: wait; }

/* ------------------------------------------------------------------ mailing */
.mailing { display: grid; grid-template-columns: 250px 1fr; gap: 22px; align-items: start; }
@media (max-width: 960px) { .mailing { grid-template-columns: 1fr; } }

.mailing-filtres { position: sticky; top: 20px; }
.mailing-filtres .champ { margin-bottom: 14px; }
.mailing-filtres .etiquette { margin: 18px 0 6px; }

.filtre-liste { display: flex; flex-direction: column; gap: 1px; margin-bottom: 4px; }
.filtre-liste a {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 5px 9px; border-radius: var(--rayon-sm);
  color: var(--girofle); font-size: 13px;
}
.filtre-liste a:hover { background: var(--sable-clair); text-decoration: none; }
.filtre-liste a.actif { background: var(--poudre-clair); color: var(--ecorce); font-weight: 600; }

.mailing-liste { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Une ligne de courriel doit se lire en diagonale : correspondant et date sur
   la première ligne, objet en évidence, aperçu en gris. */
.courriel {
  display: block; padding: 11px 14px;
  border: 1px solid transparent; border-radius: var(--rayon);
  color: var(--girofle); background: var(--creme);
}
.courriel:hover { border-color: var(--sable); text-decoration: none; box-shadow: var(--ombre); }
.courriel-echec { border-left: 3px solid var(--grenat); }

.courriel-entete { display: flex; justify-content: space-between; gap: 12px; }
.courriel-correspondant { font-size: 13px; color: var(--muscade); }
.courriel-objet { font-weight: 600; margin: 2px 0; }
.courriel-apercu {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.courriel-marques { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }

.courriel-corps p { margin: 0 0 12px; line-height: 1.65; }
.courriel-corps p:last-child { margin-bottom: 0; }

/* Un groupe de destinataires : la case, puis le nom, l'effectif et l'intitulé. */
.groupe {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 10px; border-radius: var(--rayon-sm); cursor: pointer;
}
.groupe:hover { background: var(--sable-clair); }
.groupe input { margin-top: 3px; flex: none; }
.groupe > span { display: flex; flex-direction: column; gap: 2px; }

.pagination {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 18px 0 0;
}

/* --- images d'un courriel --- */
.images-courriel { margin: 18px 0; }
.images-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.images-actions label { cursor: pointer; margin: 0; }

.vignettes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.vignette {
  width: 64px; height: 64px; padding: 0; overflow: hidden;
  border: 1px solid var(--sable); border-radius: var(--rayon-sm);
  background: var(--sable-clair); cursor: pointer;
}
.vignette:hover { border-color: var(--cannelle); }
.vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   Petits écrans
   ==========================================================================
   L'application a été dessinée pour un écran large : une barre latérale fixe
   et des tableaux denses. Sur un téléphone, la barre mangeait les deux tiers
   de la largeur et les tableaux débordaient. Ce bloc reprend ces choix sans
   rien enlever à la version de bureau.
   ========================================================================== */

/* L'en-tête mobile n'existe pas au-dessus de 860 px. */
.entete-mobile { display: none; }
.voile { display: none; }

@media (max-width: 860px) {

  /* --- charpente --- */
  .appli { grid-template-columns: 1fr; }
  .contenu { padding: 16px 16px 48px; }

  .entete-mobile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--creme);
    border-bottom: 1px solid var(--sable);
    position: sticky;
    top: 0;
    z-index: 30;
  }
  .marque-mobile { display: flex; align-items: center; gap: 9px; padding: 0; }
  .marque-mobile svg { width: 26px; height: 26px; }
  .marque-mobile .marque-nom { font-size: 19px; }
  .marque-bureau { display: none; }
  .pastille-entete { margin-left: auto; text-decoration: none; }

  /* 44 px de côté : la cible tactile en dessous de laquelle on rate le
     bouton une fois sur deux. */
  .bouton-menu {
    width: 44px; height: 44px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; padding: 0; cursor: pointer;
    border-radius: var(--rayon-sm); color: var(--girofle);
  }
  .bouton-menu:hover { background: var(--sable-clair); }
  .barres { display: flex; flex-direction: column; gap: 4px; width: 20px; }
  .barres span {
    height: 2px; background: currentColor; border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
  }
  .navigation-ouverte .barres span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .navigation-ouverte .barres span:nth-child(2) { opacity: 0; }
  .navigation-ouverte .barres span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* --- la barre latérale devient un panneau ---
     Tant que le script n'a pas signalé sa présence, elle reste dans le flux :
     sans JavaScript, la navigation demeure atteignable en bas de page. */
  .navigation-repliable .barre-laterale {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: 270px;
    max-width: 84vw;
    height: 100dvh;          /* dvh, sinon la barre d'URL rogne le bas */
    z-index: 40;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: var(--ombre-haut);
    border-right: 1px solid var(--sable);
  }
  .navigation-ouverte .barre-laterale { transform: translateX(0); }

  .navigation-repliable .voile {
    display: block;
    position: fixed; inset: 0;
    background: rgba(43, 33, 27, .45);
    z-index: 35;
  }

  /* Une règle d'auteur l'emporte sur la feuille du navigateur : sans cette
     ligne, le `display: block` ci-dessus annule l'attribut `hidden` que pose
     le script, et le voile reste étalé sur toute la page, panneau fermé. Il
     n'assombrit pas seulement l'écran, il intercepte chaque clic : plus un
     lien atteignable sur téléphone. */
  .navigation-repliable .voile[hidden] { display: none; }

  /* Les liens de navigation méritent aussi 44 px au doigt. */
  .nav a { padding: 11px 12px; font-size: 15px; }
  .nav-sous a { padding: 9px 12px; font-size: 14px; }

  /* --- en-têtes de page --- */
  .entete-page { gap: 14px; margin-bottom: 18px; }
  h1 { font-size: 23px; }
  h2 { font-size: 17px; }
  .actions-entete { width: 100%; }
  .actions-entete .bouton,
  .actions-entete form { flex: 1; }
  .actions-entete .bouton { justify-content: center; text-align: center; }

  /* --- tableaux ---
     Un tableau de dix colonnes ne rentrera jamais. Il défile dans son propre
     conteneur, et c'est la page qui ne bouge pas. */
  .carte { overflow-x: auto; }
  table.tableau { font-size: 13px; }
  table.tableau th, table.tableau td { padding: 9px 10px; white-space: nowrap; }
  /* La première colonne porte le nom : elle peut revenir à la ligne. */
  table.tableau td:first-child { white-space: normal; min-width: 130px; }

  /* --- formulaires ---
     16 px au minimum : en deçà, iOS zoome à la mise au point et l'on se
     retrouve avec une page décalée. */
  input, select, textarea { font-size: 16px; }
  .champ input, .champ select, .champ textarea { width: 100%; }
  .bouton { min-height: 42px; }

  /* --- barre de filtres --- */
  .barre-filtres { flex-direction: column; align-items: stretch; }
  .barre-filtres .champ { min-width: 0; width: 100%; }

  /* --- tuiles de chiffres --- */
  .tuile { padding: 13px; }
  .tuile-valeur { font-size: 21px; }

  /* --- assistant --- */
  .bulle { max-width: 92%; }
  .assistant-fils {
    flex-direction: row; overflow-x: auto; gap: 6px;
    padding-bottom: 6px; margin-bottom: 4px;
  }
  .assistant-fil { flex: none; width: 190px; }
  .assistant-saisie { flex-direction: column; align-items: stretch; }
  .assistant-saisie .bouton { width: 100%; }

  /* --- mailing --- */
  .mailing-filtres { position: static; }
  .filtre-liste { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .filtre-liste a { border: 1px solid var(--sable); }
  .courriel { padding: 12px 13px; }
  .courriel-entete { flex-direction: column; gap: 1px; }

  /* --- propositions --- */
  .proposition-valeurs { font-size: 13px; }
  .proposition-actions { flex-wrap: wrap; }
  .proposition-actions .bouton { flex: 1; }

  /* --- connexion --- */
  .connexion { padding: 16px; min-height: 100dvh; }
  .connexion-carte { padding: 24px 20px; }
  .champ-code { font-size: 24px; letter-spacing: .26em; text-indent: .26em; }
}

/* Téléphones étroits : on resserre encore, sans jamais rogner la lisibilité. */
@media (max-width: 400px) {
  .contenu { padding: 14px 12px 40px; }
  .carte-corps { padding: 13px; }
  .tuile-valeur { font-size: 19px; }
  .assistant-fil { width: 160px; }
}

/* Une animation de panneau devient pénible pour qui y est sensible. */
@media (prefers-reduced-motion: reduce) {
  .barre-laterale, .barres span { transition: none; }
}

/* --- fil de conversation --- */
.fil { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }

.lettre {
  background: var(--creme); border: 1px solid var(--sable);
  border-radius: var(--rayon); padding: 15px 18px; max-width: 760px;
}
/* Reçus à gauche, envoyés à droite : la conversation se suit sans lire les
   en-têtes. */
.lettre-sortant { align-self: flex-end; background: var(--poudre-clair); border-color: var(--poudre); }
.lettre-courante { box-shadow: 0 0 0 2px var(--poudre); }

.lettre-entete {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-bottom: 9px; margin-bottom: 11px; border-bottom: 1px solid var(--sable-clair);
}

/* Le corps vient de l'extérieur : on borne ce qu'il peut faire à la mise en
   page, quelles que soient les largeurs qu'il déclare. */
.lettre-corps { line-height: 1.6; overflow-x: auto; }
.lettre-corps p { margin: 0 0 12px; }
.lettre-corps p:last-child { margin-bottom: 0; }
.lettre-corps img { max-width: 100%; height: auto; }
.lettre-corps table { max-width: 100%; border-collapse: collapse; }
.lettre-corps blockquote {
  margin: 10px 0; padding-left: 12px;
  border-left: 2px solid var(--sable); color: var(--muscade);
}
.lettre-corps a { word-break: break-word; }
.lettre-pieces { margin: 10px 0 0; }

/* La signature intéresse rarement à la relecture : repliée, jamais perdue. */
.signature { margin-top: 10px; }
.signature summary {
  cursor: pointer; padding: 3px 0;
  list-style: none; display: inline-flex; align-items: center; gap: 5px;
}
.signature summary::-webkit-details-marker { display: none; }
.signature summary::before { content: "▸"; font-size: 10px; }
.signature[open] summary::before { content: "▾"; }
.signature-corps {
  margin-top: 8px; padding: 10px 12px;
  background: var(--sable-clair); border-radius: var(--rayon-sm);
  font-size: 13px; color: var(--muscade); line-height: 1.55;
}
.signature-corps p { margin: 0 0 8px; }
.signature-corps p:last-child { margin-bottom: 0; }

.acheminement summary { cursor: pointer; padding: 4px 0; }

/* --- correction de catégorie sur place --- */
.choix-categorie {
  font-family: var(--sans); font-size: 12.5px;
  padding: 4px 24px 4px 8px;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--sable-clair); color: var(--girofle);
  cursor: pointer; max-width: 190px;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B5D53' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
.choix-categorie:hover { border-color: var(--sable); }
.choix-categorie:focus { outline: none; border-color: var(--cannelle); }

/* Une catégorie corrigée à la main se distingue : c'est un jugement, pas une
   déduction, et un réimport ne la remettra pas en cause. */
.choix-categorie.corrigee { background-color: var(--poudre-clair); color: var(--ecorce); font-weight: 500; }
.choix-categorie.enregistre { border-color: var(--olive); background-color: var(--olive-fond); }
.choix-categorie.en-echec { border-color: var(--grenat); background-color: var(--grenat-fond); }
.choix-categorie:disabled { opacity: .6; cursor: wait; }

/* Le bouton « Filtrer » n'a plus d'objet quand les filtres s'appliquent seuls.
   Il reste en place sans JavaScript, où il est le seul moyen de filtrer. */
.filtres-automatiques .bouton-filtrer { display: none; }

/* ------------------------------------------------------------ confidentiel */
.pied-identite { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.pied-identite > div { flex: 1; min-width: 0; }

.bouton-oeil {
  flex: none; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: var(--rayon-sm);
  color: var(--muscade-clair); cursor: pointer; padding: 0;
}
.bouton-oeil:hover { background: var(--sable-clair); color: var(--muscade); }

/* Le bouton de thème montre ce vers quoi il bascule : la lune en clair, le
   soleil en sombre. Le choix se fait en CSS, d'après le thème affiché, pour
   que l'icône soit juste dès le premier rendu, avant tout script. */
.bouton-theme .icone-soleil { display: none; }
:root[data-theme="dark"] .bouton-theme .icone-soleil { display: block; }
:root[data-theme="dark"] .bouton-theme .icone-lune { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bouton-theme .icone-soleil { display: block; }
  :root:not([data-theme="light"]) .bouton-theme .icone-lune { display: none; }
}
/* Le fondu d'un thème à l'autre, voir theme.js. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .5s;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.theme-en-transition,
.theme-en-transition *,
.theme-en-transition *::before,
.theme-en-transition *::after {
  transition: background-color .45s ease, color .45s ease,
              border-color .45s ease, box-shadow .45s ease, fill .45s ease !important;
}
/* Sur les écrans de connexion, en haut à droite, au-dessus du motif. */
.theme-flottant { position: fixed; top: 16px; right: 16px; z-index: 2; }
.bouton-oeil[aria-pressed="true"] {
  color: var(--cannelle); background: var(--poudre-clair); border-color: var(--poudre);
}

/* Le flou plutôt que l'effacement : on voit qu'un montant est là, et la mise
   en page ne bouge pas d'un pixel en basculant. `user-select: none` évite de
   le récupérer en le sélectionnant, et `pointer-events: none` de le laisser
   copier d'un double-clic. */
[data-confidentiel] .montant {
  filter: blur(6px);
  user-select: none;
  pointer-events: none;
}
[data-confidentiel] .tuile-valeur.montant { filter: blur(9px); }

/* Sur un écran qui ne sait pas flouter, mieux vaut cacher franchement que
   laisser tout lisible. */
@supports not (filter: blur(1px)) {
  [data-confidentiel] .montant { color: transparent; background: var(--sable-clair); }
}

/* --- échanges sur une opération --- */
.champ-commentaire { display: flex; gap: 10px; align-items: flex-start; }
.champ-commentaire textarea {
  flex: 1; font-family: var(--sans); font-size: 14px; line-height: 1.55;
  padding: 10px 12px; border: 1px solid var(--sable); border-radius: var(--rayon);
  background: var(--papier); color: var(--girofle); resize: vertical; min-height: 58px;
}
.champ-commentaire textarea:focus {
  outline: none; border-color: var(--cannelle);
  box-shadow: 0 0 0 3px rgba(164, 85, 43, .12);
}

.commentaires { display: flex; flex-direction: column; margin-top: 18px; }
.commentaire { padding: 13px 0; border-top: 1px solid var(--sable-clair); }
.commentaire:first-child { border-top: 0; padding-top: 4px; }
.commentaire-entete { display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px; }
.commentaire-texte { line-height: 1.6; }

@media (max-width: 860px) {
  .champ-commentaire { flex-direction: column; }
  .champ-commentaire .bouton { width: 100%; }
}