:root {
  /* Terracotta clair : fond des boutons, accents et éléments actifs. */
  --terracotta: #c27a60;
  --terracotta-dark: #a25e46; /* survol, et texte sur fond clair */
  --marque: #d12b1e; /* rouge franc du logotype, et accent de la page d'accueil */
  /* Grands aplats (bouton de génération, bandeau du chat) : la même famille, en plus sourd,
     pour qu'une surface pleine ne crie pas autant qu'un trait ou un texte. */
  --plein: var(--terracotta);
  --plein-dark: var(--terracotta-dark);
  --marque-dark: #a81f14; /* survol du rouge de la marque */
  --marque-tint: rgba(209, 43, 30, 0.1);
  --marque-filet: rgba(209, 43, 30, 0.25); /* séparateurs discrets entre deux points d'une liste */
  --terracotta-tint: rgba(194, 122, 96, 0.12);
  --sur-plein: #fff; /* texte posé sur la teinte d'accent (boutons pleins, onglets actifs) */
  --ground: #faf5f1;
  --sidebar: #f9f1ed; /* colonne de gauche, argile rosée très claire, à peine plus soutenue que la page */
  --sidebar-line: #dfc3b5; /* filets sur le fond de la colonne de gauche */
  --ink: #2b2118;
  --muted: #8f8179;
  --line: #ece1da;
  --danger: #9b1c1c;
  /* Micro actif dans la boîte de dictée : le même rouge vif quel que soit le thème, celui d'un voyant
     d'enregistrement, et un fond grisé. */
  --micro-actif: #e02424;
  --fond-en-dictee: #efebe8;
  /* Voyants des réglages : actif, en cours d'enregistrement, désactivé. */
  --voyant-actif: #5f9e6e;
  --voyant-en-cours: #e0a148;
  --voyant-desactive: #c8554a;
  /* Aperçu de la relecture : couleur posée par Quill sur les passages visés (elle n'accepte
     qu'une valeur, pas une classe CSS). Jaune de surligneur, visible sur tous les thèmes,
     comme le vert et le rouge du diff. */
  --surlignage-relecture: #ffe08a;
}

/* Thèmes de couleur, choisis par chaque compte dans « Mon compte » (voir Preference::THEMES).
   Le thème se pose sur la balise <html> et redéfinit la teinte d'accent, celle du logotype
   comprise ; la page d'accueil, qui n'a pas de compte connecté, garde le rouge de la marque. */
html[data-theme="rouge"] {
  --terracotta: #d12b1e;
  --terracotta-dark: #a81f14;
  --terracotta-tint: rgba(209, 43, 30, 0.12);
  --marque: #d12b1e;
  --sidebar: #fbf2f0;
  --sidebar-line: #e3bdb6;
  --plein: #b03123;
  --plein-dark: #8c2318;
}

html[data-theme="terracotta"] {
  --terracotta: #c27a60;
  --terracotta-dark: #a25e46;
  --terracotta-tint: rgba(194, 122, 96, 0.12);
  /* Le logotype prend une terre cuite plus saturée que le reste : il doit claquer, pas se fondre. */
  --marque: #bf5630;
  --sidebar: #f9f1ed;
  --sidebar-line: #dfc3b5;
  --plein: var(--terracotta);
  --plein-dark: var(--terracotta-dark);
}

/* Vert vif : trop clair pour du texte blanc, les boutons pleins s'écrivent en foncé ; le logotype
   et les textes verts prennent un vert sombre, lisible sur fond clair. */
html[data-theme="celadon"] {
  --terracotta: #17f619;
  --terracotta-dark: #0c7a0e;
  --terracotta-tint: rgba(23, 246, 25, 0.14);
  --marque: #0c7a0e;
  --sidebar: #f1fef1;
  --sidebar-line: #a2fba3;
  --plein: #17f619;
  --plein-dark: #12d314;
  --sur-plein: var(--ink);
}

/* Bleu clair : même principe que le vert, texte foncé sur les boutons pleins. */
html[data-theme="ardoise"] {
  --terracotta: #93e3ec;
  --terracotta-dark: #1f6f78;
  --terracotta-tint: rgba(147, 227, 236, 0.2);
  --marque: #1f6f78;
  --sidebar: #effbfc;
  --sidebar-line: #a9e9f0;
  --plein: #93e3ec;
  --plein-dark: #6fd6e2;
  --sur-plein: var(--ink);
}

html[data-theme="prune"] {
  --terracotta: #7c4d79;
  --terracotta-dark: #5e385c;
  --terracotta-tint: rgba(124, 77, 121, 0.14);
  --marque: #5e385c;
  --sidebar: #f6f1f5;
  --sidebar-line: #d0bccf;
  --plein: #6d4569;
  --plein-dark: #523050;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Champs et boutons : sans cette ligne, le navigateur leur impose sa propre police (Arial),
   et l'interface se retrouve avec deux typographies. Le compte rendu, lui, garde son Times New
   Roman (voir .editor.word-page) : c'est un document, pas une commande. */
input,
select,
textarea,
button {
  font-family: inherit;
}

/* Poppins, servie depuis app/assets/fonts : aucun appel à Google Fonts, rien ne part chez
   un tiers quand la page s'affiche. Seule la page d'accueil s'en sert (.accueil ci-dessous),
   le reste du site garde la police du système. */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/poppins-latin-400-f3f0f5ee.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/poppins-latin-500-ce788af2.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/poppins-latin-700-54e23180.woff2") format("woff2");
}

/* Page d'accueil publique : présentation à gauche, connexion à droite, puis les sections. */

.accueil-page { scroll-behavior: smooth; }

/* Une seule couleur, l'argile rosée de la colonne de gauche en un peu plus clair. */
.accueil-page { --accueil-fond: #f5e8e0; }
.accueil-page body { background: var(--accueil-fond); }

@media (prefers-reduced-motion: reduce) {
  .accueil-page { scroll-behavior: auto; }
}

.accueil {
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Bandeau du haut, collé pendant le défilement : le logo à gauche, le menu à sa suite. */
.accueil-bandeau {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem clamp(1.5rem, 4vw, 3.5rem);
  padding: 1.4rem clamp(1.5rem, 6vw, 5rem);
  background: var(--accueil-fond);
  transition: box-shadow 0.2s ease;
}

/* Un filet n'apparaît qu'une fois la page défilée, quand le texte passe sous le bandeau. */
.accueil-bandeau.defile { box-shadow: 0 1px 0 var(--sidebar-line); }

.accueil-logotype {
  display: block;
  width: clamp(200px, 24vw, 380px);
  max-width: 100%;
  color: var(--marque);
}

.accueil-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem clamp(1rem, 2.5vw, 2.2rem);
  margin-left: auto;
}

.accueil-menu a {
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.accueil-menu a:hover,
.accueil-menu a:focus-visible,
.accueil-menu a.active {
  border-bottom-color: var(--marque);
  color: var(--marque);
}

/* Premier écran, sous le bandeau : tout tient sans faire défiler. */
.accueil-hero {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  min-height: calc(100vh - 7rem);
  scroll-margin-top: 10rem;
}

.accueil-presentation {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.3rem;
  padding: 2rem clamp(1.5rem, 6vw, 5rem) 3rem;
}

.accueil h1 {
  margin: 0;
  font-size: clamp(2.9rem, 5.4vw, 4.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.accueil-sous-titre {
  margin: 0;
  max-width: 34rem;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1.6;
}

.accueil-signature {
  margin: 0;
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.6;
}

/* Sur la page d'accueil, l'appel à l'action porte le rouge de la marque ; dans l'application,
   les boutons gardent le terracotta. */
.accueil .button {
  background: var(--marque);
}

.accueil .button:hover { background: var(--marque-dark); }

.accueil-connexion {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem clamp(1.5rem, 4vw, 3rem);
}

.accueil-carte {
  width: 100%;
  max-width: 340px;
}

/* Sous la carte : demander un accès, ou un mot de passe oublié. */
.accueil-carte-liens {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
}

/* Pastilles de navigation, le long du bord droit du premier écran. */
.accueil-pastilles {
  position: fixed;
  top: 50%;
  right: 1.1rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transform: translateY(-50%);
}

.accueil-pastilles a {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sidebar-line);
  transition: background 0.15s ease;
}

.accueil-pastilles a:hover,
.accueil-pastilles a:focus-visible,
.accueil-pastilles a.active {
  background: var(--marque);
}

/* Filets rouges posés ça et là : ils scandent la page sans la barrer d'un bout à l'autre. */
.accueil-filet {
  width: 56px;
  height: 3px;
  margin: 0;
  border: 0;
  border-radius: 2px;
  background: var(--marque);
}

.accueil-filet-centre { margin: 4.5rem auto 0; }

/* Sections du bas, dans le fil de la page. */
.accueil-section {
  max-width: 900px;
  margin: 0 auto;
  padding: 4.5rem 1.5rem 0;
  scroll-margin-top: 5rem;
}

.accueil-section h2 {
  margin: 0 0 1.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--marque);
  font-size: 1.7rem;
  font-weight: 600;
}

/* Le filet ne court pas sur toute la largeur : il souligne le titre, pas la page. */
.accueil-section h2 { display: inline-block; }

.accueil-section p { line-height: 1.6; }

.accueil-fonctions,
.accueil-liste {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding-left: 1.3rem;
  line-height: 1.6;
}

/* L'explication passe au gris : la phrase qui la précède porte l'information, elle la développe. */
.accueil-fonctions li,
.accueil-liste li {
  color: var(--muted);
}

/* Une fonction par ligne, dont seul le verbe est en gras : l'œil accroche l'action. */
.accueil-fonction {
  display: block;
  color: var(--ink);
}

.accueil-fonctions strong { font-weight: 700; }

/* Un filet rouge très pâle entre deux points : la liste se lit par blocs, sans être encadrée. */
.accueil-fonctions li + li,
.accueil-liste li + li {
  padding-top: 1rem;
  border-top: 1px solid var(--marque-filet);
}

/* Les deux phrases-clés de la page (« Simplifiez-vous la vie… » et « Ne changez pas vos habitudes… »),
   en plus gros et centrées. */
.accueil-accroche {
  margin: 2.2rem 0 0;
  color: var(--ink);
  font-size: clamp(1.6rem, 3.2vw, 2.1rem);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.accueil-accroche.accueil-introduction { margin: 0 0 1.8rem; }

/* Les fonctionnalités, sans puces : le titre en gras suffit à les séparer. */
.accueil-fonctions {
  padding-left: 0;
  list-style: none;
}

.accueil-mail { color: var(--marque); }

/* Formulaire de la section « Contact ». */
.accueil-formulaire {
  max-width: 32rem;
  margin-top: 1.5rem;
}

/* Piège à robots : invisible et hors du parcours au clavier. */
.accueil-piege { display: none; }

.accueil-pied {
  margin-top: 5rem;
  padding: 2rem 1.5rem;
  border-top: 1px solid var(--sidebar-line);
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
}

.accueil-pied p { margin: 0; }

.accueil-pied a {
  color: inherit;
  text-underline-offset: 2px;
}

.accueil-pied a:hover { color: var(--marque); }

/* Mentions légales et politique de confidentialité : une colonne de lecture. */
.page-legale {
  max-width: 760px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 0;
  line-height: 1.65;
}

.page-legale h1 {
  margin: 0 0 0.3rem;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
}

.page-legale h2 {
  margin: 2.2rem 0 0.6rem;
  font-size: 1.2rem;
  font-weight: 600;
}

.page-legale p,
.page-legale ul { margin: 0 0 0.8rem; }

.page-legale ul {
  display: grid;
  gap: 0.4rem;
  padding-left: 1.2rem;
}

.page-legale a { color: var(--terracotta-dark); }

.page-legale-date {
  color: var(--muted);
  font-size: 0.85rem;
}

/* Écran de première connexion : les engagements à cocher. */
.conditions {
  max-width: 640px;
  margin: 0 auto;
  padding: 2rem 1.5rem 0;
}

.conditions h1 {
  margin: 0 0 0.4rem;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
}

.conditions-intro {
  margin: 0 0 1.5rem;
  color: var(--muted);
}

.conditions-carte {
  display: grid;
  gap: 0.9rem;
  padding: 1.5rem;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(80, 50, 40, 0.08);
}

.conditions-case {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  line-height: 1.5;
  cursor: pointer;
}

.conditions-case input {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.15rem 0 0;
  accent-color: var(--terracotta);
}

.conditions-case a { color: var(--terracotta-dark); }

.conditions-carte .button { justify-self: start; }

/* Tant qu'une case manque, « Commencer » reste grisé, sans le curseur d'attente. */
.conditions-carte .button:disabled { cursor: not-allowed; }

.conditions-deconnexion {
  padding: 0.3rem 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
}

.conditions-deconnexion:hover { color: var(--terracotta-dark); }

/* L'essentiel, en tête de la politique de confidentialité. */
.page-legale .page-legale-essentiel {
  margin: 1.5rem 0 0;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--terracotta);
  background: rgba(255, 255, 255, 0.5);
}

/* Téléphone et petite tablette : les deux colonnes s'empilent, présentation puis connexion. */
@media (max-width: 800px) {
  .accueil-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .accueil-presentation {
    gap: 0.9rem;
    padding: 2.25rem 1.5rem 1.75rem;
  }

  .accueil-bandeau {
    gap: 0.6rem;
    padding: 0.9rem 1.5rem 0.6rem;
  }

  .accueil-logotype { width: 170px; }

  /* Sur téléphone, le menu passe sous le logo et défile de côté s'il ne tient pas. */
  .accueil-menu {
    flex-wrap: nowrap;
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
  }

  .accueil-menu a {
    flex: none;
    font-size: 0.85rem;
  }

  .accueil-carte-liens { justify-content: center; }

  .accueil h1 { font-size: 2.3rem; }

  .accueil-sous-titre { font-size: 1.05rem; }

  .accueil-signature { font-size: 1rem; }

  .accueil-connexion { padding: 1.5rem; }

  .accueil-pastilles { display: none; }

  .accueil-section { padding-top: 3rem; }
}

/* Carte blanche du formulaire de connexion. */

.login-form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.5rem;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(80, 50, 40, 0.08);
}

.login-form .button { width: 100%; }

/* Structure : colonne de gauche + contenu */

.app {
  --largeur-menu: 220px;
  position: relative;
  display: grid;
  grid-template-columns: var(--largeur-menu) minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns 0.18s ease;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.25rem 0.75rem;
  border-right: 1px solid var(--sidebar-line);
  background: var(--sidebar);
  /* Gris des compteurs un peu plus foncé : lisible sur l'argile rosée. */
  --muted: #6f6058;
  /* Coupe ce qui dépasse pendant que la colonne se replie ou se rouvre. */
  min-width: 0;
  overflow-x: clip;
}

/* Le mot « Gasparine » n'est plus du texte mais un dessin (voir shared/_logotype).
   Sa couleur suit currentColor, sa hauteur suit sa largeur. */
.brand {
  max-width: 170px;
  margin: 0 auto;
  color: var(--marque);
}

.sidebar .brand { color: var(--marque); }

.logotype {
  display: block;
  width: 100%;
  height: auto;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.nav-link {
  display: block;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  text-align: center; /* le libellé se pose au milieu du bouton, menu replié comme ouvert */
}

.nav-link:hover { border-color: var(--terracotta); }

/* « Se déconnecter » est un bouton de formulaire (DELETE) habillé comme les autres liens du menu. */
.nav-form { margin: 0; }
button.nav-link {
  width: 100%;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

/* Filet entre les pages et les boutons du compte. */
.nav-separateur {
  width: 100%;
  margin: 0;
  border: none;
  border-top: 1px solid var(--sidebar-line);
}

.nav-link.active {
  border-color: var(--terracotta);
  background: var(--terracotta-tint);
  color: var(--terracotta-dark);
  font-weight: 600;
}

.content {
  min-width: 0;
  padding: 1.5rem;
}

/* Bouton rond accroché au bord droit du menu, à hauteur du logo, pour le replier ou le rouvrir. */
.menu-bascule {
  position: absolute;
  top: 15px; /* centré sur le logo */
  left: max(0.5rem, calc(var(--largeur-menu) - 14px));
  z-index: 5;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--terracotta-dark);
  box-shadow: 0 1px 3px rgba(80, 50, 40, 0.12);
  cursor: pointer;
  transition: left 0.18s ease;
}

.menu-bascule:hover { border-color: var(--terracotta); }
.menu-bascule svg { transition: transform 0.18s ease; }

/* Menu masqué : colonne réduite à rien, le bouton reste au bord gauche de la page. */
@media (min-width: 801px) {
  html[data-menu="masque"] .app { --largeur-menu: 0px; }
  html[data-menu="masque"] .sidebar {
    visibility: hidden;
    padding-inline: 0;
    border-right: none;
    transition: visibility 0s 0.18s;
  }
  html[data-menu="masque"] .menu-bascule svg { transform: rotate(180deg); }
}

@media (prefers-reduced-motion: reduce) {
  .app,
  .menu-bascule,
  .menu-bascule svg,
  html[data-menu="masque"] .sidebar { transition: none; }
}

@media (max-width: 800px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .sidebar { border-right: none; border-bottom: 1px solid var(--sidebar-line); }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .menu-bascule { display: none; }
}

.workspace {
  display: grid;
  /* Formulaire plus étroit, page du compte rendu plus large (plus proche d'une page Word). */
  grid-template-columns: minmax(280px, 2fr) minmax(0, 3fr);
  gap: 1.5rem;
  max-width: 1400px;
}

@media (max-width: 1000px) {
  .workspace { grid-template-columns: 1fr; }
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 900px;
  margin-bottom: 1rem;
}

.page-header h1 {
  margin: 0;
  font-size: 1.4rem;
}

.card {
  background: #fff;
  border-radius: 10px;
  padding: 1.25rem;
  box-shadow: 0 1px 3px rgba(80, 50, 40, 0.08);
}

/* Deux cadres empilés respirent au lieu de se toucher. */
.card + .card {
  margin-top: 1.5rem;
}

/* Un titre en tête de cadre ne rajoute pas de bande vide au-dessus de lui. */
.card > h2:first-child {
  margin-top: 0;
}

/* Réglage sans cadre (« Personnalisez Gasparine ») : posé sur le fond, séparé du suivant par l'espace. */
.reglage-entete { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
/* Le micro d'une consigne : rangé au-dessus de son champ, dans le pli — replié, le titre ne porte
   que son voyant. */
.reglage-micro { margin-bottom: 0.3rem; }
.reglage-entete h2 { margin: 0; }
.reglage textarea { width: 100%; }

/* Fiche pratique d'une trame : un menu déroulant, et dedans une feuille libre où l'on écrit et où
   l'on glisse ses schémas. Repliée, elle ne prend qu'une ligne. */
.fiche-memo { margin-top: 1rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.fiche-memo-titre {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  font-weight: 700;
  cursor: pointer;
}
.fiche-memo-titre::marker { color: var(--marque); }
/* Le titre est centré : le voyant d'enregistrement se pose à part, sur le bord droit, sans le
   déplacer quand il apparaît ou s'efface. */
.fiche-memo-etat {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--muted, #777);
}
/* La feuille : une page, aux proportions d'un A4, et non un champ qui s'allonge. Ce qui déborde
   se lit en faisant défiler, comme sur une vraie feuille posée sur le bureau. */
.fiche-memo .fiche-feuille {
  height: min(80vh, 44rem);
  border-top: 1px solid var(--line);
}
.fiche-memo .ql-editor { height: 100%; overflow-y: auto; }
.fiche-memo .ql-toolbar { border: 0; border-bottom: 1px solid var(--line); }
.fiche-memo .ql-container { border: 0; font-size: 0.9rem; }
.fiche-memo .ql-editor img { max-width: 100%; height: auto; border-radius: 8px; }
/* Les boutons « widget » et « Mon Drive » : rangés dans la barre d'outils de Quill, à la suite du
   gras et de l'image (voir fiche_memo_controller.js), et taillés comme elle — Quill habille lui-même
   les boutons qu'il trouve chez lui. Chacun ouvre sa liste juste en dessous. */
.fiche-outils { position: relative; display: inline-block; padding: 0.4rem 0.7rem 0; }
.ql-toolbar .fiche-outils { padding: 0; }
.fiche-outil { padding: 0; border: 0; background: none; cursor: pointer; }
.fiche-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  min-width: 11rem;
  max-width: 18rem;
  padding: 0.2rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 18px rgb(0 0 0 / 12%);
}
/* Dans la barre d'outils, Quill taille tous les boutons à 28 px : les lignes de la liste, elles,
   prennent la largeur du menu. */
.fiche-memo .fiche-menu .fiche-menu-choix {
  display: block;
  width: 100%;
  height: auto;
  padding: 0.3rem 0.45rem;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 0.8rem;
  color: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fiche-memo .fiche-menu .fiche-menu-choix:hover { background: var(--marque-tint); }
/* Le bouton dont la liste est ouverte se marque aux couleurs du site, et non au bleu de Quill. */
.fiche-outil.ql-active .ql-stroke { stroke: var(--marque); }

/* Raccourci vers un fichier de Mon Drive : une tuile posée dans la feuille, comme une icône sur un
   bureau — le carré, et le nom du fichier dessous. */
.fiche-memo .ql-editor a.raccourci-fichier {
  color: inherit;
  text-decoration: none;
}
.raccourci-fichier {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  width: 5rem;
  margin: 0.2rem 0.35rem;
  vertical-align: top;
  color: inherit;
  text-align: center;
  text-decoration: none;
  font-size: 0.7rem;
  line-height: 1.15;
  cursor: pointer;
}
.raccourci-icone { display: block; line-height: 0; }
.raccourci-icone svg { width: 2.5rem; height: 3.1rem; }
/* La page, son coin corné et ses lignes d'écriture : une icône, pas un émoji. */
.raccourci-page { fill: #fff; stroke: var(--marque); stroke-width: 2.5; stroke-linejoin: round; }
.raccourci-coin { fill: var(--marque); }
.raccourci-ligne { stroke: var(--marque); stroke-width: 2.5; stroke-linecap: round; opacity: 0.45; }
.raccourci-fichier:hover .raccourci-page { fill: var(--marque-tint); }
/* Un nom trop long s'arrête au bout de deux lignes plutôt que d'allonger la tuile : le titre
   entier est dans l'infobulle. */
.raccourci-nom {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Ce qu'on pose dans la feuille se range où on le lâche : sur un bord, le texte l'enrobe, comme
   l'habillage d'une image dans un traitement de texte ; au milieu, il tient toute la largeur. */
.fiche-memo .ql-editor [data-habillage^="gauche"] {
  float: left;
  clear: left;
  margin-top: 0.25rem;
  margin-right: 0.9rem;
  margin-bottom: 0.5rem;
}
.fiche-memo .ql-editor [data-habillage^="droite"] {
  float: right;
  clear: right;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  margin-left: 0.9rem;
}
.fiche-memo .ql-editor img[data-habillage] { max-width: 55%; }
/* La feuille se referme sous ce qui flotte, sinon le dernier objet dépasse du bas. */
.fiche-memo .ql-editor::after { content: ""; display: block; clear: both; }
/* Une image se prend et se déplace comme un widget : le curseur le dit. */
.fiche-memo .ql-editor img { cursor: grab; }

/* Les boutons de la barre disent ce qu'ils font au survol, avec l'infobulle du site (voir plus
   bas, [data-infobulle]) : la barre est étroite, la bulle se pose donc sous le bouton. */
.fiche-memo .ql-toolbar [data-infobulle]::after { top: calc(100% + 0.4rem); bottom: auto; }
/* Les derniers boutons sont contre le bord : leur bulle s'aligne à droite. */
.fiche-memo .ql-toolbar .fiche-outils [data-infobulle]::after { left: auto; right: 0; }

/* Ce qu'on est en train de déplacer : allégé, et cerné d'un pointillé pour qu'on le suive des yeux
   pendant que le texte s'écarte autour de lui. */
.objet-en-vol {
  opacity: 0.6;
  outline: 2px dashed var(--marque);
  outline-offset: 3px;
}
.fiche-memo-en-deplacement .ql-editor { cursor: grabbing; }
/* Rien ne doit clignoter pendant le glisser : le texte, lui, se réarrange tout seul. */
.fiche-memo-en-deplacement .objet-fermer { opacity: 0; }

/* La croix qui retire un widget ou un raccourci : discrète, et franche au survol de l'objet. */
.objet-fermer {
  /* Une croix se vise mal : on lui donne de la marge à cliquer sans qu'elle prenne de la place. */
  padding: 0.2rem 0.3rem;
  margin: -0.2rem -0.3rem;
  color: var(--muted, #777);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.widget-fiche:hover .objet-fermer,
.raccourci-fichier:hover .objet-fermer,
.objet-fermer:focus-visible { opacity: 1; }
.objet-fermer:hover { color: var(--marque); }
/* Sur un widget comme sur une tuile, elle se pose dans le coin en haut à droite : au fil du
   texte elle serait coincée entre deux résultats, et le coin en bas sert à redimensionner. */
.widget-fiche .objet-fermer { position: absolute; top: 0.15rem; right: 0.3rem; }
.raccourci-fichier .objet-fermer { position: absolute; top: -0.1rem; right: 0.1rem; }
.raccourci-fichier { position: relative; }

/* Widget posé dans une feuille : une barrette qu'on remplit, et qui calcule toute seule. Tout tient
   sur une ligne — poignée, titre, cases, résultats — et la phrase à dicter passe dessous. */
.widget-fiche {
  position: relative;
  display: flex;
  /* Une carte étroite, en colonne : c'est ainsi qu'elle tient dans une marge, à côté du texte.
     On l'élargit en tirant son coin, et elle se range alors sur une ligne. */
  width: 16rem;
  container-type: inline-size;
  resize: horizontal;
  overflow: hidden;
  min-width: 14rem;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.45rem;
  margin: 0.3rem 0;
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--marque);
  border-radius: 8px;
  background: var(--marque-tint);
  font-size: 0.75rem;
  line-height: 1.4;
}
/* Prise du widget : c'est par elle qu'on le déplace dans la feuille. */
.widget-poignee { color: var(--muted, #777); cursor: grab; }
.widget-poignee:active { cursor: grabbing; }
.widget-titre { font-weight: 700; }
/* Étroite, la carte met une densité par ligne, le nom à gauche et la case à droite ; élargie à la
   main, elle remet tout sur une ligne (d'où la requête de conteneur, qui regarde la carte et non
   la fenêtre). */
.widget-cases { display: flex; flex-direction: column; flex: 1 1 100%; gap: 0.25rem; }
.widget-case {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.2rem;
  color: var(--muted, #777);
}
@container (min-width: 26rem) {
  .widget-cases { flex-flow: row wrap; flex: 0 1 auto; gap: 0.35rem; }
  .widget-case { justify-content: flex-start; }
}
/* Une case de densité, et non un champ de formulaire : la règle générale des champs de texte
   prendrait toute la largeur. */
.widget-case input[type="text"] {
  width: 3.4rem;
  padding: 0.05rem 0.25rem;
  font-size: 0.75rem;
  text-align: right;
}
.widget-resultats { display: flex; gap: 0.5rem; margin-left: auto; }
/* Une ligne vide ne doit pas prendre de place : le widget se réduit à ses cases tant qu'il manque
   une densité. */
.widget-resultat:empty,
.widget-phrase:empty { display: none; }
.widget-fort { font-weight: 700; color: var(--marque-dark); }
.widget-phrase { flex-basis: 100%; font-style: italic; }
/* Une photo qu'on fait glisser depuis l'ordinateur : la feuille se signale pendant le survol. */
.fiche-memo-survolee { border-color: var(--marque); box-shadow: inset 0 0 0 2px var(--marque-tint); }
/* Voyant d'un réglage : petite pastille cliquable, sans texte (libellé dans aria-label et l'infobulle). */
.voyant {
  width: 10px;
  height: 10px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--voyant-actif);
  opacity: 0.85;
  cursor: pointer;
  transition: background-color 0.2s;
}
.voyant:hover { opacity: 1; }
.voyant:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.voyant[data-etat="en-cours"] { background: var(--voyant-en-cours); }
.voyant[data-etat="desactive"] { background: var(--voyant-desactive); }
/* Lexique posé comme les autres réglages : même écart sous le titre, et la liste repliée juste en dessous. */
.reglage .lexique-form { margin: 0; }
.reglage .lexique-form input[type="submit"] { margin-top: 0; }
.reglage .lexique-deroulant { margin-top: 0.25rem; }
.reglage + .reglage,
.reglage + .card { margin-top: 1.75rem; }

.titre-reglage { font-size: 1.1rem; }

/* Choix de la couleur, dans « Mon compte » : cinq ronds, celui du compte cerclé. */
.themes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.themes form { margin: 0; }

.theme-rond {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.theme-rond:hover { transform: scale(1.08); }

/* La couleur en service : un anneau clair la détache de sa voisine. */
.theme-rond[aria-pressed="true"] {
  box-shadow: 0 0 0 3px var(--ground), 0 0 0 5px currentColor;
}

/* Formulaires */

.report-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

label, .eyebrow {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  font-weight: 600;
}

select, textarea, input[type="text"], input[type="password"], input[type="email"] {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font: inherit;
  color: inherit;
}

select:focus, textarea:focus, input[type="text"]:focus, input[type="password"]:focus,
input[type="email"]:focus {
  outline: 2px solid var(--terracotta);
  border-color: transparent;
}

/* Menu des CR types bloqué après une génération. */
select:disabled {
  background: #f6f1ec;
  color: var(--muted);
  cursor: not-allowed;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Un peu d'air entre le choix du CR type et la boîte de dictée. */
.cr-type-field { margin-bottom: 1rem; }

.label-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.label-row label { margin: 0; }

/* « Relancer la génération », seul à droite de la ligne « Dictée » : au-dessus du coin haut
   droit de la boîte. Il n'apparaît qu'une fois un compte rendu généré. */
.label-row .relance { margin-left: auto; }

/* Boutons carrés : micro de dictée, flèche d'envoi du chat. */
.icon-button {
  display: inline-flex;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--terracotta-dark);
  cursor: pointer;
}

.icon-button:hover {
  border-color: var(--terracotta);
  background: var(--terracotta-tint);
}

.icon-button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Dictée en cours. */
.icon-button.is-recording {
  border-color: var(--danger);
  background: #fdecec;
  color: var(--danger);
  animation: recording 1.2s ease-in-out infinite;
}

@keyframes recording {
  50% { opacity: 0.55; }
}

/* Boîte de dictée pendant la prise : fond grisé et gros rond rouge au milieu, qui clignote lentement,
   pour voir d'un coup d'œil que le micro écoute (demande de Victor, 17/10/2026). Le rond ne prend pas
   les clics et ne devient jamais tout à fait opaque : le texte dessous reste lisible et modifiable. */
.dictee-cadre { position: relative; }
.dictee-voyant {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5rem;
  height: 5rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--micro-actif);
  box-shadow: 0 0 0 10px rgba(224, 36, 36, 0.18);
  pointer-events: none;
}
.en-dictee .dictee-cadre textarea { background: var(--fond-en-dictee); }
.en-dictee .dictee-voyant {
  display: block;
  animation: dictee-voyant 2.4s ease-in-out infinite;
}

@keyframes dictee-voyant {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 0.15; }
}

@media (prefers-reduced-motion: reduce) {
  .en-dictee .dictee-voyant { animation: none; opacity: 0.6; }
}

.icon-button-send {
  border-color: var(--plein);
  background: var(--plein);
  color: var(--sur-plein);
}

.icon-button-send:hover {
  border-color: var(--plein-dark);
  background: var(--plein-dark);
}

/* « Générer / Compléter » et, en dessous, « Nouveau compte rendu ». */
.generate-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.generate-actions .button {
  margin-top: 0;
  text-align: center;
}

textarea { resize: vertical; }

.form-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.button {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.65rem 1rem;
  border: none;
  border-radius: 6px;
  background: var(--plein);
  color: var(--sur-plein);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.button:hover { background: var(--plein-dark); }
.button:disabled { opacity: 0.6; cursor: progress; }

.button.secondary {
  margin-top: 0;
  border: 1px solid var(--terracotta);
  background: var(--terracotta-tint);
  color: var(--terracotta-dark);
}

.button.danger {
  border: 1px solid #e3b4b4;
  background: #fff;
  color: var(--danger);
}

.button.danger:hover { background: #fdecec; }

.page-header .button { margin-top: 0; }

/* Phrase d'accueil sous le titre d'une page. */
.page-header + .page-intro { margin: -0.5rem 0 1rem; max-width: 900px; }
/* Seconde phrase d'accueil, juste sous la première. */
.page-intro + .page-intro { margin: -0.6rem 0 1rem; max-width: 900px; }

.link {
  color: var(--terracotta-dark);
  font-weight: 500;
}

/* Éditeur Quill */

.editor .ql-toolbar.ql-snow,
.editor .ql-container.ql-snow {
  border-color: var(--line);
}

.editor .ql-toolbar.ql-snow { border-radius: 6px 6px 0 0; }
.editor .ql-container.ql-snow { border-radius: 0 0 6px 6px; background: #fff; }

/* Le contenu d'un CR type se relit comme un compte rendu : même police que la feuille A4, celle
   que le compte a choisie. */
.editor .ql-editor {
  min-height: 320px;
  font-family: var(--police-document);
  font-size: var(--taille-document);
}

/* Transformation de la trame pendant la génération (tous les comptes, voir
   transformation_de_la_trame.js) : un calque prend la place de Quill le temps de l'animation. Les
   mots supprimés se dissolvent dans la teinte du compte, puis les nouveaux apparaissent. */
.editor .ql-editor.cache-par-la-transformation { display: none; }

.transformation-de-la-trame .mot-dissous,
.transformation-de-la-trame .mot-apparu {
  display: inline-block;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

.transformation-de-la-trame .mot-dissous { animation-name: mot-dissous; }
.transformation-de-la-trame .mot-apparu { animation-name: mot-apparu; }

@keyframes mot-dissous {
  /* La teinte n'arrive qu'au début de la dissolution : un mot programmé plus tard reste tel quel. */
  from { opacity: 1; filter: blur(0); transform: none; color: var(--plein); }
  to { opacity: 0; filter: blur(5px); transform: translateY(-0.25em) scale(1.08); color: var(--plein); }
}

@keyframes mot-apparu {
  from { opacity: 0; filter: blur(5px); transform: translateY(0.25em); }
  to { opacity: 1; filter: blur(0); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .transformation-de-la-trame .mot-dissous { display: none; }
  .transformation-de-la-trame .mot-apparu { animation: none; }
}

.hint {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.generation-status:not(:empty) {
  margin-top: 0.75rem;
}

/* Chat « Gasparine » : panneau dépliable en bas à gauche, façon messagerie. */
.chat {
  position: fixed;
  bottom: 0;
  left: 1rem;
  z-index: 20;
  display: flex;
  flex-direction: column;
  width: max-content;
  max-width: calc(100vw - 2rem);
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 320px;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--plein);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: var(--plein);
  color: var(--sur-plein);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  /* Le glisser horizontal ne doit pas faire défiler la page sur écran tactile. */
  touch-action: pan-y;
  user-select: none;
}

.chat-header:hover { background: var(--plein-dark); }

/* Taille d'ouverture fixe ; la poignée peut l'agrandir (voir chat_controller.js). */

/* Sans cette règle, le display ci-dessous l'emporterait sur l'attribut hidden : le chat ne se replierait plus. */
.chat-panel[hidden] { display: none; }

.chat-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(--chat-width, 320px);
  max-width: calc(100vw - 2rem);
  border: 1px solid var(--line);
  border-bottom: none;
  background: #fff;
}

.chat-messages {
  height: var(--chat-height, 320px);
  max-height: calc(100vh - 9rem);
  overflow-y: auto;
  padding: 0.75rem;
}

/* Poubelle : posée sur la barre orange, à gauche de la poignée d'agrandissement. */
.chat-clear-form {
  position: absolute;
  top: -31px;
  right: 40px;
  z-index: 1;
  margin: 0;
}

.chat-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: #fff;
  cursor: pointer;
}

.chat-clear:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Poignée d'agrandissement : posée sur la barre orange, à droite. */
.chat-resize {
  position: absolute;
  top: -30px;
  right: 8px;
  z-index: 1;
  width: 24px;
  height: 24px;
  cursor: ne-resize;
  background:
    linear-gradient(45deg, transparent 38%, #111 38%, #111 50%, transparent 50%),
    linear-gradient(45deg, transparent 60%, #111 60%, #111 72%, transparent 72%);
}

.chat-bubble {
  margin-bottom: 0.6rem;
  padding: 0.45rem 0.6rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.05);
}

.chat-bubble-user { background: var(--terracotta-tint); }
.chat-bubble-error { background: #fdecec; }

.chat-bubble p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.4;
  white-space: pre-line;
}

/* Gasparine met en gras un mot clé de temps en temps : sobre, pas criard. */
.chat-bubble strong { font-weight: 600; }

/* Les trois points, le temps que la réponse arrive : la conversation n'attend pas immobile. */
.chat-bubble-attente p {
  display: flex;
  gap: 4px;
  align-items: center;
  height: 1.2em;
}

.chat-bubble-attente p span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta-dark);
  animation: chat-attente 1.2s infinite ease-in-out;
}

.chat-bubble-attente p span:nth-child(2) { animation-delay: 0.16s; }
.chat-bubble-attente p span:nth-child(3) { animation-delay: 0.32s; }

@keyframes chat-attente {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 0.9; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .chat-bubble-attente p span { animation: none; opacity: 0.5; }
}

/* Adresse web dans une bulle : soulignée, et coupée si elle est plus large que le chat. */
.chat-lien {
  color: var(--terracotta-dark);
  overflow-wrap: anywhere;
}

.chat-author {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
}

.chat-bubble-model .chat-author { color: var(--terracotta-dark); }

.chat-form {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.6rem;
  border-top: 1px solid var(--line);
}

/* Zone de saisie qui grandit avec le texte dicté, puis défile au-delà de cinq lignes environ. */
.chat-form textarea {
  flex: 1;
  min-width: 0;
  max-height: 7.5rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  line-height: 1.35;
  resize: none;
  overflow-y: auto;
}

.chat-form textarea:focus {
  outline: 2px solid var(--terracotta);
  border-color: transparent;
}

.chat-form .icon-button {
  flex: 0 0 34px;
}

/* Page A4 de l'aperçu et du compte rendu : une seule feuille blanche, barre d'outils en haut
   séparée du texte par un trait fin. Times New Roman 12 par défaut, interligne simple.
   La police se choisit sur la page elle-même (voir Preference::POLICES) : elle est posée sur la
   page entière, en attribut, et seule la feuille A4 s'en sert — l'interface garde la sienne.
   Rien n'est téléchargé : ce sont les polices déjà installées sur l'ordinateur. */
:root { --police-document: "Times New Roman", Times, serif; }
html[data-police="georgia"] { --police-document: Georgia, "Times New Roman", serif; }
html[data-police="cambria"] { --police-document: Cambria, Georgia, serif; }
html[data-police="arial"] { --police-document: Arial, Helvetica, sans-serif; }
html[data-police="calibri"] { --police-document: Calibri, Candara, "Segoe UI", sans-serif; }
html[data-police="verdana"] { --police-document: Verdana, Geneva, sans-serif; }

/* Taille de cette police, en points (voir Preference::TAILLES_DE_POLICE), posée de même sur la page. */
:root { --taille-document: 12pt; }
html[data-taille-police="10"] { --taille-document: 10pt; }
html[data-taille-police="11"] { --taille-document: 11pt; }
html[data-taille-police="13"] { --taille-document: 13pt; }
html[data-taille-police="14"] { --taille-document: 14pt; }
html[data-taille-police="16"] { --taille-document: 16pt; }

/* Le choix de police, posé sur la page A4 comme le bouton des modifications : il appartient à
   l'interface, pas au document. */
.editor.word-page > [data-controller="police"] {
  position: absolute;
  top: 0.55rem;
  right: 1.75rem;
  z-index: 2;
}
.choix-de-police,
.choix-de-taille-de-police {
  width: auto;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-size: 0.75rem;
}
.choix-de-taille-de-police { margin-left: 0.5rem; }


/* Une vraie feuille, comme dans Word : les proportions d'un A4 (21 × 29,7 cm), même pour un CR
   court ; un CR plus long que la page l'allonge au lieu d'être coupé. */
.editor.word-page {
  max-width: 21cm;
  aspect-ratio: 21 / 29.7;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* Les habitudes du mini RAG qui ont servi à la génération, sous le compte rendu (reports/_habitudes_servies),
   et la page « Mes habitudes » (habitudes/index), présentées comme une page blanche. Une ligne par
   habitude : la ressemblance (ou la date) et la poubelle, puis ce qui a été dicté et ce que le médecin en a fait. */
.habitudes-servies {
  max-width: 21cm;
  margin: 1rem auto 0;
  padding: 1.25rem 2.25rem;
  border-radius: 4px;
  background: #fff;
  color: #000;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(0, 0, 0, 0.08);
}

.habitudes-servies h2 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
}

.habitudes-servies-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.habitude-servie {
  display: grid;
  grid-template-columns: 3.25rem 1fr 1.6fr;
  gap: 0.6rem;
  align-items: start;
}

.habitude-servie + .habitude-servie {
  margin-top: 0.6rem;
}

.habitude-servie-marge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding-top: 0.45rem;
}

.habitude-servie-ressemblance {
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.habitude-servie-supprimer {
  display: inline-flex;
  padding: 0.25rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.habitude-servie-supprimer:hover,
.habitude-servie-supprimer:focus-visible {
  color: var(--plein);
}

.habitude-servie-boite {
  min-width: 0;
  padding: 0.45rem 0.6rem;
  border: 1px solid #ddd6ce;
  border-radius: 4px;
  font-size: 0.85rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Page « Mes habitudes » : la marge porte la date et l'heure, plus larges qu'un pourcentage. */
.habitude-datee { grid-template-columns: 5.5rem 1fr 1.6fr; }

.habitude-datee .habitude-servie-ressemblance {
  font-weight: 400;
  text-align: center;
}

/* Sur un téléphone, les deux boîtes passent l'une sous l'autre, à droite de la marge. */
@media (max-width: 640px) {
  .habitudes-servies { padding: 1rem; }
  .habitude-servie { grid-template-columns: 3.25rem 1fr; }
  .habitude-datee { grid-template-columns: 5.5rem 1fr; }
  .habitude-servie-boite + .habitude-servie-boite { grid-column: 2; }
}

.editor.word-page .ql-toolbar.ql-snow {
  margin: 0 1.75rem;
  padding: 0.5rem 0;
  border: 0;
  border-bottom: 1px solid #e7e2dc;
  background: #fff;
}

.editor.word-page .ql-container.ql-snow {
  border: 0;
}

/* La zone d'écriture remplit toute la feuille : un clic sous le texte y place le curseur, comme
   dans Word. :not([hidden]) laisse la vue des modifications masquer l'éditeur. */
.editor.word-page > [data-editor-target="container"]:not([hidden]),
.editor.word-page .ql-container.ql-snow {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.editor.word-page .ql-editor { flex: 1; }

.editor.word-page .ql-editor {
  /* La hauteur d'A4 est portée par la feuille (.editor.word-page) : le texte s'y écrit en haut. */
  height: auto;
  min-height: 12rem;
  padding: 2rem 2.25rem 2.25rem;
  overflow: visible;
  color: #000;
  font-family: var(--police-document);
  font-size: var(--taille-document);
  /* Interligne simple de Word (1,0) : hauteur de ligne naturelle de la police. */
  line-height: normal;
}

.editor.word-page .ql-editor.ql-blank::before {
  left: 2.25rem;
  right: 2.25rem;
  font-family: var(--police-document);
}

.word-page-hint {
  max-width: 21cm;
  margin: 0 auto 0.5rem;
}

/* « Modifications par rapport au CR type » : en haut à droite de la page, sur la ligne de la barre d'outils. */
.editor.word-page {
  position: relative;
}

/* Bouton posé sur la page A4 : il appartient à l'interface, pas au document, et garde donc
   la police du site plutôt que le Times de la page. */
.editor.word-page .diff-toggle {
  position: absolute;
  top: 0.4rem;
  right: 1.75rem;
  margin: 0;
  padding: 0.3rem 0.7rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.8rem;
}

.editor.word-page .diff-toggle[aria-pressed="true"] {
  background: var(--terracotta);
  color: var(--sur-plein);
}

.diff-view {
  min-height: 12rem;
  padding: 3rem 2.25rem 2.25rem;
  color: #000;
  font-family: "Times New Roman", Times, serif;
  font-size: 12pt;
  line-height: normal;
}

.diff-summary {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.8rem;
}

/* Même typographie que la page : Times New Roman 12, interligne simple, texte aligné sur ses marges. */
.diff-line {
  margin: 0 -0.35rem;
  padding: 0 0.35rem;
  border-radius: 2px;
  font-family: "Times New Roman", Times, serif;
  font-size: 12pt;
  line-height: normal;
}

.diff-removed {
  background: #fde2e2;
  color: #8a1c1c;
  text-decoration: line-through;
}

.diff-added {
  background: #dcf5dc;
  color: #1e5b24;
}

/* Pendant l'écriture en direct, la page est verrouillée : barre d'outils grisée. */
.editor.word-page:has(.ql-disabled) .ql-toolbar {
  opacity: 0.35;
  pointer-events: none;
}

/* Liste des CR types */

/* Rubriques en cartes blanches, trois par rangée, de la hauteur de dix CR types ; au-delà, la liste défile. */
.rubriques {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
  max-width: 1200px;
  /* Glisser une carte ou un CR type ne doit pas sélectionner le texte autour. */
  -webkit-user-select: none;
  user-select: none;
}

@media (max-width: 1100px) { .rubriques { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .rubriques { grid-template-columns: 1fr; } }

.template-group {
  display: flex;
  flex-direction: column;
  height: 24rem;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(80, 50, 40, 0.08);
  cursor: grab;
}

/* Glisser-déposer : l'élément déplacé pâlit, la carte d'arrivée d'un CR type s'entoure. */
.en-deplacement { opacity: 0.4; }
.depot-cible { outline: 2px dashed var(--terracotta); }

/* Étiquette qui suit la souris pendant le glissement ; hors de l'écran le temps d'être photographiée. */
.tri-etiquette {
  position: fixed;
  top: -100px;
  left: 0;
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  background: var(--terracotta);
  color: var(--sur-plein);
  font-size: 0.85rem;
  white-space: nowrap;
}

.template-group h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

/* Titre renommé sur place : une case blanche, pour qu'on voie qu'on est en train d'écrire. */
.template-group h2[contenteditable] {
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  outline: 1px solid var(--terracotta);
  background: #fff;
  cursor: text;
  -webkit-user-select: text;
  user-select: text;
}

/* Carré « + » à la place de la prochaine rubrique, un peu moins large que « Nouveau CR type ». */
.ajout-rubrique-form { margin: 0; }

.ajout-rubrique {
  width: 7.5rem;
  height: 7.5rem;
  border: 2px dashed var(--sidebar-line);
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font-size: 2.2rem;
  cursor: pointer;
}

.ajout-rubrique:hover { border-color: var(--terracotta); color: var(--terracotta-dark); }

/* Croix en haut à droite de la carte, et « + Nouveau CR type » en bas. */
.template-group { position: relative; }

/* Deux classes : l'emporte sur [data-infobulle] { position: relative }, défini plus bas. */
.template-group .rubrique-supprimer {
  position: absolute;
  top: 0.3rem;
  right: 0.5rem;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
}

.rubrique-supprimer:hover { color: var(--danger); }
.template-group form.button_to:has(.rubrique-supprimer) { margin: 0; }

.rubrique-nouveau {
  color: var(--muted);
  font-size: 0.9rem;
  text-decoration: none;
}

.rubrique-nouveau:hover { color: var(--terracotta-dark); }

.compte-a-rebours { font-size: 1.4rem; font-weight: 700; color: var(--danger); }

.template-list {
  flex: 1;
  min-height: 0;
  margin: 0.5rem 0 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.template-list li {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}

/* Filets discrets entre les CR types, aucun sous « + Nouveau CR type ». */
.template-list li:last-child { border-bottom: none; }

/* Le nom prend la place ; trop long, il se coupe, pour que la bulle et la poubelle restent visibles. */
.template-list li > span:first-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Le nom ouvre le CR type ; la poubelle le supprime, ou le retire de la liste s'il est commun. */
.template-nom {
  color: inherit;
  text-decoration: none;
}

.template-nom:hover { color: var(--terracotta-dark); }

.template-list form { margin: 0; }

.template-supprimer {
  display: flex;
  padding: 0.2rem;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.template-supprimer:hover { color: var(--danger); }

/* Titre de rubrique suivi de sa bulle de consigne ; la bulle est terracotta quand une consigne est écrite. */
.rubrique-entete {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--sidebar-line);
}

.bulle-consigne {
  display: flex;
  padding: 0.2rem;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.bulle-consigne:hover,
.bulle-consigne-remplie { color: var(--terracotta-dark); }

.narrow { max-width: 900px; }

/* Compte rendu */

/* Le bouton de copie reste visible en bas de l'écran quand le compte rendu est long. */
.report-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  max-width: 21cm;
  margin: 0.25rem auto 0;
  padding: 0.5rem 0;
  /* Même fond que l'app : le texte reste lisible quand la barre passe au-dessus d'un long compte rendu. */
  background: var(--ground);
}

/* La phrase d'aide sur sa propre ligne, au-dessus des boutons : entre deux boutons, elle serait trop étroite. */
.report-actions {
  flex-wrap: wrap;
  row-gap: 0.35rem;
}

.report-actions .hint {
  flex: 1 1 100%;
  order: -1;
  margin: 0;
  text-align: right;
}

/* « Nouveau compte rendu » à gauche de la barre, la phrase d'aide et « Copier » à droite. */
.report-actions .report-actions-new {
  margin-right: auto;
}

/* Le texte d'aide peut passer sur deux lignes, pas le bouton. */
.report-actions .button {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Fond opaque : le bouton reste lisible quand il passe au-dessus de la page. */
.report-actions .button.secondary {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.report-actions .button.secondary:hover { background: var(--terracotta-tint); }

/* Relecture, dans la colonne de gauche sous le bouton « Compléter » : bouton de lancement, puis
   verdict (voir relecture_controller.js). */
.relecture {
  margin-top: 0.8rem;
}

.relecture-alerte {
  margin-top: 0.6rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--terracotta);
  border-radius: 10px;
  background: var(--terracotta-tint);
}

/* C'est un avertissement : il porte la couleur du danger, pas celle de l'accent. */
.relecture-attention {
  margin: 0;
  font-weight: 700;
  color: var(--danger);
}

.relecture-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.relecture-choix {
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--terracotta);
  border-radius: 6px;
  background: #fff;
  font-weight: 600;
  cursor: pointer;
}

.relecture-choix:hover,
.relecture-choix:focus-visible { background: var(--terracotta-tint); }

.relecture-message {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--muted);
}

.relecture-erreur { color: var(--danger); }

/* Retouches de conclusion proposées ligne par ligne (voir relecture_controller.js) : chaque ligne
   dit ce qu'elle propose, et le médecin tranche d'un bouton vert (accepter) ou rouge (refuser).
   Vert et rouge du diff, lisibles sur tous les thèmes. */
.relecture-suggestion {
  margin: 0;
  font-weight: 700;
}

.relecture-ligne {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.relecture-ligne-texte {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
}

.relecture-ligne-action {
  font-weight: 700;
}

.relecture-decisions {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

.relecture-accepter,
.relecture-refuser {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: none;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.relecture-accepter {
  background: #dcf5dc;
  color: #1e5b24;
}

.relecture-refuser {
  background: #fde2e2;
  color: #8a1c1c;
}

.relecture-accepter:hover,
.relecture-refuser:hover { filter: brightness(0.95); }

/* Colonne de droite, avant toute génération. */
.report-intro {
  max-width: 21cm;
  margin: 0 auto;
}

/* « Détection automatique » sans trame trouvée : une feuille A4 blanche, comme la page du CR, avec
   au milieu ce qu'elle attend, en gros. */
.feuille-en-attente {
  aspect-ratio: 21 / 29.7;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(0, 0, 0, 0.08);
}

.feuille-en-attente p {
  margin: 0;
  max-width: 14em;
  color: var(--muted);
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

/* Messages */

.placeholder { color: var(--muted); }

.notice {
  max-width: 900px;
  margin: 0 0 1rem;
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  background: #eaf6ea;
  color: #1e5b24;
}

/* Page ou chat fermé au compte invité (ApplicationController#limiter_l_invite). */
.bloque-invite {
  margin: 1rem 0;
  color: var(--muted);
  font-style: italic;
}

/* Page fermée que l'invité peut regarder sans y toucher (attribut inert) : grisée. */
.page-bloquee {
  opacity: 0.55;
  filter: grayscale(0.6);
  user-select: none;
}

/* Lien « Essayer Gasparine sans compte », sous le formulaire « Contact » : le compte invité.
   .button.secondary remet la marge du haut à zéro : le sélecteur doit être aussi précis que lui. */
.button.accueil-essai {
  display: block;
  max-width: 32rem;
  margin-top: 1.2rem;
  text-align: center;
}

.alert {
  margin: 0;
  padding: 0.75rem;
  border-radius: 6px;
  background: #fdecec;
  color: var(--danger);
}

.alert ul {
  margin: 0;
  padding-left: 1.2rem;
}

/* Messages reçus depuis la page d'accueil, au bas de la page « Admin ». */
/* Page « Admin » : qui a accepté les conditions, quand, et quelle version. */
.acceptations {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.acceptations th,
.acceptations td {
  padding: 0.4rem 0.6rem 0.4rem 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.acceptations th {
  color: var(--muted);
  font-weight: 500;
}

.acceptation-attente { color: var(--muted); }

/* Version dépassée : le compte reverra l'écran à sa prochaine connexion. */
.acceptation-perimee { color: var(--voyant-en-cours); }

/* Poubelle en bout de ligne : supprime le compte, tout ce qui lui appartient part avec. */
.acceptations form { margin: 0; }

.acceptations-supprimer {
  display: flex;
  padding: 0.2rem;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.acceptations-supprimer:hover { color: var(--danger); }

/* Page « Admin » : les réglages en haut, le bouton et son explication côte à côte. */
.admin-boutons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  margin-bottom: 1.6rem;
}

.admin-boutons form { margin: 0; }

.admin-boutons .hint { margin: 0; }

.admin-seuil input[type="range"] { accent-color: var(--plein); }

.admin-seuil output { font-variant-numeric: tabular-nums; min-width: 2.5rem; }

/* Réglages de la dictée Gemini : le titre sur sa ligne, puis chaque curseur avec son libellé et sa valeur. */
.admin-gemini h2 { flex-basis: 100%; margin: 0; }

.admin-gemini > span { display: inline-flex; align-items: center; gap: 0.5rem; }

.admin-gemini label { margin: 0; }

.admin-gemini output { min-width: 4.5rem; }

/* « Mon compte » › Dictées de la dernière heure : forme d'onde de la prise choisie (voir
   dictees_gardees_controller.js). Barres pour la parole, points pour le silence, partie écoutée en couleur. */
.dictees-gardees select { max-width: 100%; }
/* Mon compte › Dictée au micro : un réglage et ses boutons sur une seule ligne (repliée sur un écran étroit). */
.ligne-reglage { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0.5rem 0; }
.ligne-reglage > p { margin: 0; }
.ligne-reglage > select { flex: 0 1 18rem; width: auto; }
/* Les règles d'affichage des boutons et du lecteur l'emportaient sur hidden : « Retirer » sans raccourci,
   le lecteur vide laissait un grand blanc. */
.ligne-reglage > [hidden], .lecteur-de-dictee[hidden] { display: none; }
.lecteur-de-dictee { display: flex; align-items: center; gap: 0.75rem; margin: 0.75rem 0; }
.onde { flex: 1; display: flex; align-items: center; gap: 2px; height: 4rem; cursor: pointer; min-width: 0; }
.onde span { flex: 1; min-width: 1px; background: var(--ink); border-radius: 1px; }
.onde span.silence { height: 2px; flex: 0.5; opacity: 0.5; }
.onde span.jouee { background: var(--terracotta); }
.lecteur-temps { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dictee-renvoyee { width: 100%; }

/* Chaque rubrique de la page se déplie au clic : la page entière tient d'abord en un écran. */
.admin-deroulant {
  border-bottom: 1px solid var(--line);
}

.reglage + .admin-deroulant { margin-top: 0; }

.admin-deroulant > summary {
  margin-bottom: 0;
  padding: 0.75rem 0;
  cursor: pointer;
  list-style: none;
}

.admin-deroulant > summary::-webkit-details-marker { display: none; }

/* Chevron devant le titre, qui pivote quand la rubrique s'ouvre. */
.admin-deroulant > summary::before {
  content: "›";
  color: var(--terracotta-dark);
  font-size: 1.2rem;
  line-height: 1;
  transition: transform 0.15s ease;
}

.admin-deroulant[open] > summary::before { transform: rotate(90deg); }

.admin-deroulant > summary:hover .titre-reglage { color: var(--terracotta-dark); }

/* Nombre d'éléments de la rubrique, annoncé à côté du titre. */
.admin-compte {
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: var(--line);
  font-size: 0.8rem;
}

.admin-deroulant-contenu { padding: 0.2rem 0 1.4rem; }

/* Page « Admin » : comptes rendus signalés depuis un compte de test, un par ligne dépliable. */
.a-revoir-cr {
  border-bottom: 1px solid var(--line);
}

.a-revoir-cr summary {
  padding: 0.5rem 0;
  font-size: 0.9rem;
  cursor: pointer;
}

.a-revoir-document {
  margin: 0.3rem 0 0.6rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-family: "Times New Roman", serif;
  font-size: 12pt;
}

.a-revoir-document p { margin: 0; }

.a-revoir-document p:first-child { margin-bottom: 12pt; }

/* Dictées corrigées (Admin) : les trois transcriptions l'une sous l'autre, puis les lignes de lexique. */
.a-revoir-dictee p:first-child { margin-bottom: 0; }

.a-revoir-dictee p + p { margin-top: 12pt; }

.a-revoir-cr .fixes-list { margin: 0 0 0.6rem; }


.a-revoir-supprimer {
  margin: 0 0 0.8rem;
  font-size: 0.85rem;
}

.messages-recus {
  display: grid;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.messages-recus li {
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.messages-entete {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.messages-contenu {
  margin: 0;
  white-space: pre-line;
}

/* Message lu : le bouton qui le retire, discret, en bas de la carte. */
.messages-supprimer {
  margin: 0.55rem 0 0;
  padding: 0.2rem 0.6rem;
  font-size: 0.78rem;
}

.messages-vide {
  margin: 0;
  color: var(--muted);
}

/* Compteurs d'usage, sur la page « Admin » du compte de base. */
.usage {
  max-width: 30rem;
}

.usage-reports {
  margin: 0 0 0.8rem;
  text-align: center;
  font-size: 0.76rem;
  line-height: 1.25;
  color: var(--muted);
}

.usage-reports strong {
  display: block;
  font-size: 1.35rem;
  color: var(--terracotta-dark);
}

.usage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  color: var(--muted);
}

.usage-table th {
  padding-bottom: 0.25rem;
  font-weight: 600;
  text-align: right;
}

.usage-table th:first-child {
  text-align: left;
}

.usage-table td {
  padding: 0.18rem 0;
  vertical-align: top;
  line-height: 1.2;
}

.usage-table td + td {
  padding-left: 0.35rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  /* L'espace des milliers ne doit pas couper « 128 450 » en deux lignes. */
  white-space: nowrap;
}

/* Coût global de la page « Admin » : le détail de chaque poste, en retrait. */
.cout-global .cout-global-detail {
  text-align: left;
  opacity: 0.8;
}

.usage-total td {
  padding-top: 0.35rem;
  border-top: 1px solid var(--line);
  font-weight: 700;
  color: var(--ink);
}

.usage-cost {
  margin: 0.5rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--muted);
}

.usage-cost strong {
  font-size: 0.95rem;
  color: var(--ink);
  white-space: nowrap;
}

/* Précision « (10 % de …) » sous le libellé des lignes de cache. */
.usage-note {
  display: block;
  font-size: 0.7rem;
  opacity: 0.85;
}

/* Avertissement avant de quitter un compte rendu qui n'a pas été copié.
   Fenêtre native <dialog> : fond assombri et touche Échap gérés par le navigateur. */
.leave-guard {
  position: relative;
  max-width: 27rem;
  padding: 1.6rem 1.5rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 18px 40px rgba(43, 33, 24, 0.18);
}

.leave-guard::backdrop {
  background: rgba(43, 33, 24, 0.35);
}

.leave-guard-close {
  position: absolute;
  top: 0.4rem;
  right: 0.6rem;
  padding: 0.2rem 0.4rem;
  border: 0;
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

.leave-guard-close:hover {
  color: var(--ink);
}

.leave-guard-message {
  margin: 0.3rem 0 1.3rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.leave-guard-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Fenêtre « Nouveau compte rendu » du compte invité : le compteur de l'essai, au-dessus de la question. */
.essai-invite-compteur {
  margin: 0;
  color: var(--terracotta-dark);
  font-size: 0.85rem;
  font-weight: 600;
}

.essai-invite .button:disabled { cursor: not-allowed; }

/* Périodes toutes prêtes, au-dessus des filtres : celle qui est affichée reste enfoncée. */
.usage-periodes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.6rem;
}

.usage-periode {
  padding: 0.22rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 500;
}

.usage-periode[aria-current] {
  background: var(--terracotta);
  color: var(--sur-plein);
}

/* Filtres des compteurs : compte et période, sur une ligne au-dessus du tableau. */
.usage-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.usage-filters select,
.usage-filters input[type="date"] {
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-size: 0.8rem;
  color: var(--ink);
}

.usage-filters label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.usage-filters input[type="submit"] {
  margin-top: 0;
  padding: 0.32rem 0.7rem;
  font-size: 0.8rem;
}

/* Titre d'un fichier, seul sur sa ligne avec la miniature. */
.document-titre {
  display: flex;
  flex-direction: column;
  flex: 1 1 12rem;
  min-width: 0;
}

.document-name {
  font-weight: 600;
  word-break: break-word;
}

/* « Mes classifications », dans les préférences : zone de dépôt et liste. */
.depot-form { margin-bottom: 0.8rem; }

.depot-survol {
  outline: 2px dashed var(--terracotta);
  outline-offset: 4px;
}

.classifications {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Le titre prend toute la place restante ; les réglages et les actions sont poussés à droite,
   sur des colonnes de largeur fixe pour tomber au même endroit d'une ligne à l'autre. La colonne
   des actions loge « Règles à relire » et la poubelle : trop étroite, elle débordait sur la case
   « à la demande ». */
.classification-ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12.5rem 9.5rem;
  align-items: center;
  gap: 0.8rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.classification-titre {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.classification-entete {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.classification-titre .classification-nom {
  overflow-wrap: anywhere;
}

/* Étroit : chaque ligne repasse en colonne plutôt que d'écraser les libellés. */
@media (max-width: 700px) {
  .classification-ligne {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
}

/* Les deux cases, côte à côte, libellé sur deux lignes si besoin. */
.classification-modes {
  display: grid;
  grid-template-columns: 6.8rem 5rem;
  gap: 0.6rem;
}

.classification-case {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.15;
  color: var(--muted);
}

.classification-mode-libelle { cursor: pointer; }

.classification-inactive .classification-nom { opacity: 0.5; }

.classification-nom { font-weight: 600; }

/* Ce que Gasparine a compris du document : une ligne sous son nom, qui ouvre sa fenêtre. */
.classification-fiche {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.76rem;
  font-style: italic;
  text-align: left;
  color: var(--muted);
  cursor: pointer;
}

button.classification-fiche:hover { color: var(--terracotta-dark); }

/* Petite fenêtre de correction du mode d'emploi. */
.fiche-fenetre {
  width: min(42rem, 92vw);
  max-width: 42rem;
  padding: 1.4rem 1.4rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 18px 40px rgba(43, 33, 24, 0.18);
}

.fiche-fenetre::backdrop { background: rgba(43, 33, 24, 0.25); }

.fiche-titre {
  margin: 0 0 0.9rem;
  font-size: 1rem;
  font-weight: 600;
}

.fiche-form label {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.fiche-form textarea {
  width: 100%;
  margin-bottom: 0.9rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 0.85rem;
  resize: vertical;
}

.fiche-actions {
  display: flex;
  gap: 0.6rem;
}

/* Règles de classement : une page de texte, donc une fenêtre plus large et une police régulière. */
.regles-fenetre {
  width: min(56rem, 94vw);
  max-width: 56rem;
}

.regles-fenetre textarea {
  font-size: 0.82rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.regles-fenetre textarea[readonly] { background: #faf8f5; }

.regles-etat {
  margin: 0 0 0.7rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.regles-fenetre .fiche-actions {
  flex-wrap: wrap;
  align-items: center;
}

.classification-actions [data-controller="fiche"] > .link { white-space: nowrap; }

.regles-liens button.link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.regles-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-left: auto;
  font-size: 0.82rem;
}

.classification-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.7rem;
  font-size: 0.85rem;
}

.classification-actions form { margin: 0; }

/* Poubelle d'une classification, à droite des règles : discrète, franche au survol. */
.classification-supprimer {
  display: inline-flex;
  padding: 0.15rem;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.classification-supprimer:hover { color: var(--danger); }

/* Contre le bord droit de la ligne : son infobulle pousse vers la gauche. */
.classification-supprimer[data-infobulle]::after {
  left: auto;
  right: 0;
}


/* Proposition d'appliquer une classification, sous le compte rendu. */
.classification-proposition {
  margin-top: 0.8rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--terracotta);
  border-radius: 10px;
  background: var(--terracotta-tint);
}

.classification-proposition-phrase {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Ce que recouvre un critère non dicté : discret, sous la phrase. */
.classification-proposition-rappel {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
}

.classification-proposition-source {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.classification-proposition-texte {
  margin: 0.5rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--line);
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--muted);
}

.classification-proposition-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.classification-valider,
.classification-refuser {
  padding: 0.3rem 0.7rem;
  border: 0;
  border-radius: 6px;
  font-size: 0.82rem;
  cursor: pointer;
}

.classification-valider {
  background: var(--voyant-actif);
  color: #fff;
}

/* Déjà ajouté d'office : on le dit, et la croix permet de revenir en arrière. */
.classification-ajoutee {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--voyant-actif);
}

.classification-refuser {
  background: none;
  color: var(--danger);
  font-size: 1rem;
  line-height: 1;
}

.classification-valider:hover { filter: brightness(1.08); }
.classification-refuser:hover { background: rgba(155, 28, 28, 0.08); }

/* Infobulle : posée par data-infobulle, elle apparaît au survol, au-dessus de l'élément. */
[data-infobulle] { position: relative; }

[data-infobulle]::after {
  content: attr(data-infobulle);
  position: absolute;
  bottom: calc(100% + 0.45rem);
  left: 0;
  z-index: 10;
  width: max-content;
  max-width: 17rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(43, 33, 24, 0.22);
}

[data-infobulle]:hover::after,
[data-infobulle]:focus-within::after {
  opacity: 1;
  visibility: visible;
}

/* La liste des CR types défile : une bulle posée au-dessus de la ligne serait coupée par le bord
   de la liste, et ne se verrait pas du tout. Elle se pose donc en dessous, où la place ne manque pas. */
.template-list [data-infobulle]::after { top: calc(100% + 0.35rem); bottom: auto; }

/* Les dernières colonnes sont près du bord : leur bulle s'aligne à droite. */
.classification-actions [data-infobulle]::after,
.template-list [data-infobulle]::after,
.rubrique-supprimer::after { left: auto; right: 0; }

/* Avancement des dépôts : une ligne par fichier, avec sa jauge. */
.envois {
  margin-bottom: 0.9rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.envois-titre {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}

.envois ul {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.envoi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10rem;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
}

.envoi-nom { overflow-wrap: anywhere; }

.envoi-jauge {
  height: 6px;
  border-radius: 3px;
  background: var(--terracotta-tint);
  overflow: hidden;
}

.envoi-jauge > span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--terracotta);
  transition: width 0.2s;
}

.envoi-fini .envoi-jauge > span { background: var(--voyant-actif); }
.envoi-echec .envoi-nom { color: var(--danger); }
.envoi-echec .envoi-jauge > span { background: var(--danger); }

/* « Cloud interactif » : la case qui autorise Gasparine à lire un document. */
.document-cloud {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.document-cloud label { cursor: pointer; }

/* Mention d'index d'un document : seulement quand il n'est pas cherchable. */
.document-index {
  font-style: italic;
}

.document-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-left: auto;
}

.document-actions form {
  display: inline;
  margin: 0;
}

/* Miniature d'un fichier : la première page d'un PDF, l'image elle-même, ou l'étiquette du format
   tant que rien n'est dessiné. Proportion d'une page A4. */
.miniature {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  aspect-ratio: 210 / 297;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--terracotta-tint);
  cursor: pointer;
}

.miniature-dessinee {
  background: #fff;
}

.miniature canvas,
.miniature img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.miniature-type {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--terracotta-dark);
}

/* Le titre s'ouvre d'un double-clic : pas de mot sélectionné au passage. */
.tree-file .document-name {
  cursor: pointer;
  user-select: none;
}

/* Les trois pictogrammes d'un fichier : informations, télécharger, supprimer. */
.document-icone {
  display: inline-flex;
  padding: 0.2rem;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.document-icone:hover { color: var(--ink); background: var(--terracotta-tint); }
.document-supprimer:hover { color: var(--danger); }

/* Contre le bord droit de la ligne : les infobulles des pictogrammes poussent vers la gauche. */
.tree-actions [data-infobulle]::after,
.document-actions [data-infobulle]::after {
  left: auto;
  right: 0;
}

/* Fenêtre « Informations » d'un fichier. */
.document-fenetre {
  width: min(30rem, 92vw);
}

.fiche-form input[type="text"] {
  width: 100%;
  margin-bottom: 0.9rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 0.85rem;
}

.document-fenetre-libelle {
  margin: 0 0 0.2rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.document-fenetre-texte {
  margin: 0 0 0.9rem;
}

.document-fenetre-infos {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
  margin: 0 0 0.9rem;
  font-size: 0.85rem;
}

.document-fenetre-infos dt { color: var(--muted); }
.document-fenetre-infos dd { margin: 0; }

.document-fenetre .document-cloud {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--ink);
}

.link.danger {
  color: var(--danger);
}

/* Jauge d'espace occupé dans « Mes fichiers ». */
.quota {
  margin: 0 0 0.9rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* À droite du titre « Mon Drive » : une largeur fixe, le texte calé à droite au-dessus de la barre. */
.page-header .quota {
  flex: 0 1 15rem;
  margin: 0;
  text-align: right;
}

/* Sur téléphone, c'est la jauge qui rétrécit : le titre reste sur une ligne. */
.page-header:has(.quota) h1 { white-space: nowrap; }

.quota-bar {
  display: block;
  height: 6px;
  margin-top: 0.4rem;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}

.quota-bar span {
  display: block;
  height: 100%;
  background: var(--terracotta);
}

/* Menu « déplacer vers », sur chaque ligne de fichier. */
.document-move {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
}

.document-move select {
  max-width: 9rem;
  padding: 0.15rem 0.3rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  font-size: 0.8rem;
  color: var(--ink);
}

.document-move input[type="submit"] {
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.9rem;
  color: var(--terracotta-dark);
  text-decoration: underline;
  cursor: pointer;
}

/* Arborescence de « Mes fichiers » : dossiers dépliables sur place. */
.tree {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tree-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
  padding: 0.55rem 0.4rem;
  padding-left: calc(0.4rem + var(--profondeur, 0) * 1.4rem);
  border-bottom: 1px solid var(--line);
  border-radius: 6px;
}

.tree-racine > li:last-child .tree-row {
  border-bottom: none;
}

.tree-toggle {
  width: 1.2rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.8rem;
  color: var(--muted);
  cursor: pointer;
}

.tree-name {
  flex: 1 1 10rem;
  font-weight: 600;
  word-break: break-word;
}

/* Le dossier plein, gris foncé, devant le nom. La couleur du texte, adoucie : elle suit le thème. */
.tree-dossier {
  display: inline-flex;
  margin-right: 0.4rem;
  vertical-align: -0.2rem;
  color: var(--ink);
  opacity: 0.65;
}

.tree-actions,
.document-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-left: auto;
}

.tree-actions form,
.document-actions form {
  display: inline;
  margin: 0;
}

.tree-rename {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  flex: 1 1 10rem;
}

.tree-rename input[type="text"] {
  flex: 1 1 auto;
  max-width: 16rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--terracotta);
  border-radius: 5px;
  font-size: 0.9rem;
}

.tree-vide {
  padding: 0.5rem 0.4rem;
  padding-left: calc(0.4rem + var(--profondeur, 0) * 1.4rem);
  font-size: 0.8rem;
  font-style: italic;
  color: var(--muted);
}

.tree-nouveau {
  padding-top: 0.7rem;
}

/* Recherche de « Mon Drive », au-dessus de l'arbre. */
.drive-recherche {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
}

.drive-recherche:focus-within { border-color: var(--terracotta); }

.drive-recherche input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
}

/* Lignes écartées par la recherche. */
.filtre-cache { display: none; }

/* Sous l'arbre : le pictogramme « nouveau dossier », sans fond. */
.tree-nouveau > form { display: flex; }

/* « Importer un fichier », sous le cadre de l'arbre, centré. */
.drive-importer {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.tree-importer { cursor: pointer; }

.tree-nouveau-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.tree-nouveau-bouton:hover { color: var(--terracotta-dark); }

.tree-nouveau form,
.tree-actions form {
  margin: 0;
}

/* Une zone d'accueil un peu généreuse : on vise l'arbre, pas une ligne précise. */
.tree-racine {
  min-height: 6rem;
  padding: 0.2rem;
  border: 1px dashed transparent;
  border-radius: 8px;
}

.tree-racine.tree-accueille {
  border-color: var(--terracotta);
  background: var(--terracotta-tint);
}

/* Glisser-déposer : le dossier visé s'éclaire, la barre indique le niveau d'arrivée. */
.tree-row[draggable="true"] {
  cursor: grab;
}

.tree-porte {
  opacity: 0.4;
}

.tree-row.tree-cible {
  background: var(--terracotta-tint);
  outline: 2px solid var(--terracotta);
  outline-offset: -2px;
}

.tree-barre {
  height: 0;
  border-top: 2px solid var(--terracotta);
  margin-left: calc(0.4rem + var(--profondeur, 0) * 1.4rem);
  list-style: none;
}

/* Consigne attachée à un CR type : le champ, son compteur, et la pastille dans la liste. */
.report-form .hint {
  margin: 0;
}

.compteur {
  text-align: right;
  font-size: 0.75rem;
}

/* Dictée : message d'erreur du micro, jusqu'ici caché dans l'infobulle du bouton. */
.dictation-status {
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  color: var(--danger);
}

/* Corrections proposées sous le compte rendu. */
.fixes {
  margin-top: 1rem;
}

/* Compte de base : la liste des lignes modifiées écrite par le modèle, sous le compte rendu. */
.reponse-brute {
  margin-top: 1rem;
}

.reponse-brute summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.9rem;
}

.reponse-brute pre {
  margin: 0.7rem 0 0;
  white-space: pre-wrap;
  font-size: 0.85rem;
  color: var(--ink);
}

.fixes-intro {
  margin: 0 0 0.7rem;
  font-size: 0.9rem;
  font-weight: 600;
}

/* Propositions et liste du lexique dans « Préférences » : une ligne par correction. */
.fixes-list,
.lexique-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fixes-row,
.lexique-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}

.fixes-row:last-child,
.lexique-list li:last-child {
  border-bottom: none;
}

.fixes-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  flex: 1 1 12rem;
}

/* Les deux mots sont modifiables avant d'être retenus. */
.fixes-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  margin: 0;
}

.fixes-input {
  flex: 1 1 8rem;
  width: auto;
  min-width: 0;
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
}

input.fixes-heard {
  font-style: italic;
  color: var(--muted);
}

.fixes-arrow {
  color: var(--muted);
}

input.fixes-written {
  font-weight: 600;
}

/* Hors des champs (page du lexique), les deux mots restent du simple texte. */
span.fixes-heard {
  font-style: italic;
  color: var(--muted);
}

span.fixes-written {
  font-weight: 600;
}

.fixes-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

.fixes-actions form {
  margin: 0;
}

.fixes-yes,
.fixes-no {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}

.fixes-yes {
  border-color: #2f7a4d;
  color: #2f7a4d;
}

.fixes-no {
  border-color: var(--danger);
  color: var(--danger);
}

.fixes-done,
.fixes-failed {
  font-size: 0.85rem;
  color: var(--muted);
}

.fixes-failed {
  color: var(--danger);
}

/* Lexique dans « Personnalisez Gasparine ». */
.lexique-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.8rem 0;
}

.lexique-form input[type="text"] {
  flex: 1 1 9rem;
  width: auto;
}

.lexique-form input[type="submit"] {
  flex: 0 0 auto;
}

/* Règles « en cas de …, proposer … » de « Personnalisez Gasparine » : même allure que le lexique. */
.prise-en-charge-libelle {
  flex: 0 0 auto;
  color: var(--muted);
}

.prise-en-charge-case {
  display: flex;
  flex: 1 1 12rem;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.prise-en-charge-case input[type="text"] {
  flex: 1 1 8rem;
  width: auto;
}

.lexique-list li form {
  margin: 0;
}

/* Liste du lexique repliée par défaut. */
.lexique-deroulant {
  margin-top: 0.4rem;
}

.lexique-deroulant summary {
  padding: 0.4rem 0;
  font-weight: 600;
  color: var(--terracotta-dark);
  cursor: pointer;
}

/* Confirmation d'ajout au lexique : visible un instant, puis elle s'efface. */
.pastille {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: #e6f2ea;
  color: #2f7a4d;
  font-size: 0.8rem;
  font-weight: 600;
  animation: pastille-fondu 3s ease forwards;
}

@keyframes pastille-fondu {
  0%, 75% { opacity: 1; }
  100% { opacity: 0; }
}

.lexique-erreur {
  flex-basis: 100%;
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: var(--danger);
}

.lexique-form .dictation-status {
  flex-basis: 100%;
}

/* Compte qui a ajouté un mot, dans la liste du compte gasparine. */
.lexique-compte {
  color: var(--muted);
  font-size: 0.85em;
  font-style: italic;
}

/* Pense-bête de la page « Générer un CR » : une note jaune pâle, un peu transparente. */
.pense-bete {
  margin-top: 1rem;
  padding: 0.65rem 0.8rem 0.45rem;
  border: 1px solid rgba(214, 178, 52, 0.35);
  border-radius: 8px;
  background: rgba(255, 234, 128, 0.35);
}

.pense-bete-entete {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.pense-bete-titre {
  font-size: 0.8rem;
  font-weight: 600;
  color: #8a6d12;
}

.pense-bete-choix {
  max-width: 12rem;
  padding: 0.1rem 0.3rem;
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.6);
}

.pense-bete-etat {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--muted);
}

.pense-bete-contenu {
  width: 100%;
  min-height: 5rem;
  padding: 0.2rem 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 0.85rem;
  line-height: 1.45;
}

.pense-bete-contenu:focus {
  border: 0;
  outline: none;
  box-shadow: none;
}

.pense-bete-contenu[readonly] {
  cursor: default;
}

/* CR type : titre à gauche, nom au milieu de la ligne, modalité dans le coin. */
.entete-cr-type { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 0.5rem; }
.champ-cr-type { display: flex; align-items: center; gap: 0.5rem; }
.champ-cr-type-coin { justify-self: end; }
.champ-cr-type label { margin: 0; }
.champ-cr-type select,
.copier-cr-type { width: auto; padding: 0.35rem 0.5rem; }
.champ-cr-type input[type="text"] { width: 14rem; padding: 0.35rem 0.5rem; }
.label-row .copier-cr-type { margin-top: 0.5rem; font-size: 0.85rem; }

@media (max-width: 800px) {
  .entete-cr-type { grid-template-columns: 1fr; justify-items: start; }
  .champ-cr-type-coin { justify-self: start; }
}

/* Liste des CR types : titre au milieu de la page, bouton dans le coin. */
.entete-cr-types { display: grid; grid-template-columns: 1fr auto 1fr; }
.entete-cr-types h1 { grid-column: 2; }
.entete-cr-types .button { justify-self: end; }
.entete-cr-types > span { justify-self: start; align-self: center; }

/* Visite guidée : fenêtre d'accueil, projecteur qui assombrit tout sauf l'élément montré, bulle. */
.tutoriel-accueil {
  max-width: 30rem;
  padding: 1.6rem;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(43, 33, 24, 0.25);
}

.tutoriel-accueil::backdrop { background: rgba(43, 33, 24, 0.45); }

.tutoriel-accueil-titre {
  margin: 0 0 0.6rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--terracotta-dark);
}

.tutoriel-accueil p { line-height: 1.5; }

.tutoriel-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1rem;
}

.tutoriel-actions .button { margin-top: 0; }

/* Le bouton du micro, reproduit dans le texte d'une bulle. */
.tutoriel-icone {
  display: inline-flex;
  vertical-align: middle;
  padding: 0.15rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--terracotta-dark);
}

/* Lignes du compte rendu que la bulle désigne. */
.tutoriel-surligne {
  position: fixed;
  z-index: 50;
  border-radius: 3px;
  background: rgba(224, 161, 72, 0.35);
  pointer-events: none;
}

.tutoriel-voile {
  position: fixed;
  inset: 0;
  z-index: 49;
}

.tutoriel-voile-sombre { background: rgba(43, 33, 24, 0.45); }

/* Éléments montrés ensemble (eclairerTous) : au-dessus de la page grisée, cerclés de blanc. */
.tutoriel-eleve {
  position: relative;
  z-index: 51;
  border-radius: 6px;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--terracotta);
  /* Montrés, pas encore à cliquer : la bulle se lit d'abord. */
  pointer-events: none;
}

/* Éléments à manipuler (glisser-déposer) : ceux-là répondent à la souris. */
.tutoriel-eleve.tutoriel-eleve-actif { pointer-events: auto; }

/* Un lien sur fond grisé a besoin d'un fond blanc ; un bouton garde sa propre couleur. */
.tutoriel-eleve:not(.button) { background: #fff; }

.tutoriel-projecteur {
  position: fixed;
  z-index: 50;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(43, 33, 24, 0.45);
  pointer-events: none;
}

.tutoriel-bulle {
  position: fixed;
  z-index: 51;
  max-width: 22rem;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(43, 33, 24, 0.25);
}

.tutoriel-bulle p { margin: 0; line-height: 1.45; }

.tutoriel-bulle p[hidden] + .tutoriel-actions { margin-top: 0; }

/* Case où la visite tape un texte, dans la bulle même. */
.tutoriel-boite {
  min-height: 2.6rem;
  margin-top: 0.6rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Le style des boutons l'emporterait sur l'attribut hidden : « Suivant » disparaît vraiment quand
   l'étape attend un geste, et « Passer le tutoriel » tant que la fenêtre d'accueil est ouverte. */
.tutoriel-bulle [hidden],
.tutoriel-passer[hidden],
.tutoriel-voile[hidden],
.tutoriel-boite[hidden] { display: none; }

.tutoriel-passer {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 52;
  margin: 0;
  padding: 0.8rem 1.4rem;
  font-size: 1.05rem;
  box-shadow: 0 4px 16px rgba(43, 33, 24, 0.25);
}

/* Les dix étoiles sous le compte rendu (voir Note). */
.note {
  max-width: 21cm;
  margin: 1.2rem auto 0;
  text-align: center;
}

.note-question { margin: 0 0 0.2rem; font-size: 0.9rem; color: var(--muted); }

.note-etoiles { display: inline-flex; gap: 0.1rem; }

.note-etoile {
  padding: 0 0.1rem;
  border: 0;
  background: none;
  color: var(--line);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.1s;
}

.note-etoile.allumee { color: var(--terracotta); }

.note-message { min-height: 1.2rem; margin: 0.2rem 0 0; }

/* Les notes des comptes rendus, dans « Admin ». */
.notes-moyenne { margin: 0 0 0.6rem; font-size: 0.95rem; }

.notes { width: 100%; border-collapse: collapse; font-size: 0.85rem; }

.notes th, .notes td { padding: 0.35rem 0.5rem; text-align: left; border-bottom: 1px solid var(--line); }

.notes th { color: var(--muted); font-weight: 600; }

/* ----- Éditeur visuel de la page d'accueil (fonctionnalité temporaire : bloc à supprimer d'un trait). ----- */

/* Le bac à sable : la page d'accueil réelle, rendue éditable sur place. */
.edition-sable { outline: none; }

/* L'élément sélectionné d'un clic, celui que la barre d'outils manipule. */
.edition-sable .edition-selection {
  outline: 2px dashed var(--marque);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Barre d'outils flottante en bas de l'écran, au-dessus du bac à sable. */
.edition-barre {
  position: fixed;
  z-index: 20;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  max-width: calc(100vw - 2rem);
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--marque-filet);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

.edition-bouton {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--marque-filet);
  border-radius: 6px;
  background: var(--ground);
  font: inherit;
  cursor: pointer;
}

.edition-bouton:hover { background: var(--marque-tint); }

.edition-lien {
  padding: 0.35rem 0.7rem;
  color: var(--muted);
  font-size: 0.9rem;
  text-decoration: none;
}

.edition-lien:hover { color: var(--marque); }

.edition-formulaire { display: contents; }

/* Bulle des messages du serveur (mot de passe incorrect, « Message envoyé »…) sur une page
   d'accueil remplacée par un brouillon : posée au-dessus de la boîte de connexion, même largeur
   qu'elle. La colonne passe en pile pour que la bulle tienne au-dessus de la carte — un seul
   enfant quand il n'y a pas de message, rien ne bouge. */
.accueil-connexion { flex-direction: column; }

.edition-messages {
  width: 100%;
  max-width: 340px;
  margin: 0 0 1rem;
}

.edition-messages .notice,
.edition-messages .alert { margin: 0; }

.edition-messages .notice + .alert { margin-top: 0.5rem; }

/* Questions fréquentes : la question seule, la réponse dépliée d'un clic. */
.accueil-question summary {
  cursor: pointer;
  font-weight: 600;
}

.accueil-question summary::marker { color: var(--marque); }

.accueil-question p { margin: 0.5rem 0 0; }

.accueil-question a {
  color: var(--marque);
  font-weight: 600;
  text-decoration: underline;
}

.accueil-question a:hover { color: var(--marque-dark); }

/* Après la dernière question, le même filet qu'entre les questions, puis la phrase qui renvoie au contact. */
.accueil-question + p {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--marque-filet);
}

/* Questions fréquentes : espacées entre elles, séparées par le même filet discret
   que celui des listes au-dessus. */
.accueil-question + .accueil-question {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--marque-filet);
}