/* ============================================================
   Objectif Droit — système de design
   Palette : ivoire, marine profond, doré discret.
   ============================================================ */

:root {
  --ivoire: #f6f4ef;
  --surface: #ffffff;
  --marine: #16324f;
  --marine-fonce: #0e2238;
  --or: #b08c3f;
  --or-clair: #d9c79a;
  --encre: #1d2433;
  --texte: #3a4254;
  --sourdine: #7a8194;
  --trait: #e6e2d8;
  --succes: #2f7d5d;
  --alerte: #b04a3f;
  --rayon: 10px;
  --ombre: 0 1px 2px rgba(22, 50, 79, 0.06), 0 8px 24px rgba(22, 50, 79, 0.07);
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* L'attribut hidden doit gagner même sur les éléments dont une classe
   redéfinit display (ex. : .btn en inline-flex). */
[hidden] { display: none !important; }

html { font-size: 16px; }

body {
  font-family: var(--sans);
  background: var(--ivoire);
  color: var(--texte);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand { font-family: var(--serif); color: var(--encre); font-weight: 600; }

a { color: var(--marine); }

button { font-family: inherit; cursor: pointer; }

/* ---------------------------------------------------- Marque */

.brand {
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  color: var(--marine);
  display: flex; align-items: center; gap: 0.55rem;
}

.brand .fin { color: var(--or); }

/* Balance de la justice — marque animée */
.marque-balance { width: 30px; height: 30px; flex-shrink: 0; color: var(--or); }
.lateral .marque-balance { color: var(--or-clair); }
.marque-balance .fleau {
  transform-origin: 16px 9px;
  animation: osciller-balance 6s ease-in-out infinite;
}
.marque-balance .plateau { transform-box: fill-box; }

@keyframes osciller-balance {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .marque-balance .fleau, .scene-justice .fleau,
  .scene-justice, .etincelles circle { animation: none; }
}

.filet {
  width: 42px; height: 2px;
  background: var(--or);
  border: none; margin: 0.75rem 0 1.25rem;
}

/* ---------------------------------------------------- Boutons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.6rem 1.4rem;
  border: 1px solid var(--marine);
  border-radius: var(--rayon);
  background: var(--marine); color: #fff;
  font-size: 0.92rem; font-weight: 500;
  transition: background 0.15s ease, transform 0.1s ease;
}

.btn:hover { background: var(--marine-fonce); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondaire {
  background: transparent; color: var(--marine);
}
.btn-secondaire:hover { background: rgba(22, 50, 79, 0.06); }

.btn-discret {
  border: none; background: none; color: var(--sourdine);
  padding: 0.35rem 0.6rem; border-radius: 6px; font-size: 0.85rem;
}
.btn-discret:hover { color: var(--marine); background: rgba(22, 50, 79, 0.06); }

.btn-danger { border-color: var(--alerte); background: transparent; color: var(--alerte); }
.btn-danger:hover { background: rgba(176, 74, 63, 0.08); }

/* ---------------------------------------------------- Formulaires */

label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--encre); margin-bottom: 0.3rem; }

input, select, textarea {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--trait);
  border-radius: 8px;
  background: var(--surface);
  font-family: inherit; font-size: 0.92rem; color: var(--encre);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--marine);
  box-shadow: 0 0 0 3px rgba(22, 50, 79, 0.1);
}

textarea { resize: vertical; min-height: 110px; }

.champ { margin-bottom: 1rem; }

.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ---------------------------------------------------- Page de connexion */

.page-accueil {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(340px, 460px) 1fr;
}

.panneau-connexion {
  background: var(--surface);
  padding: 4rem 3.25rem;
  display: flex; flex-direction: column; justify-content: center;
  border-right: 1px solid var(--trait);
}

.panneau-decor {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(176, 140, 63, 0.22), transparent 60%),
    linear-gradient(160deg, var(--marine) 0%, var(--marine-fonce) 100%);
  color: #eef1f5;
  display: flex; flex-direction: column; justify-content: center;
  padding: 4rem;
}

.panneau-decor h2 { color: #fff; font-size: 2rem; max-width: 26rem; line-height: 1.3; }
.panneau-decor p { color: #b9c4d2; max-width: 30rem; margin-top: 1rem; }
.panneau-decor ul { list-style: none; margin-top: 2rem; }
.panneau-decor li { padding: 0.4rem 0; color: #d5dce5; }
.panneau-decor li::before { content: "—"; color: var(--or-clair); margin-right: 0.65rem; }

.message-erreur {
  background: rgba(176, 74, 63, 0.09);
  border: 1px solid rgba(176, 74, 63, 0.35);
  color: var(--alerte);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
  margin-bottom: 1rem;
  display: none;
}
.message-erreur.visible { display: block; }

.bascule-auth { margin-top: 1.5rem; font-size: 0.87rem; color: var(--sourdine); }
.bascule-auth a, .bascule-auth button { cursor: pointer; text-decoration: underline; }
.bascule-auth button { border: 0; background: none; color: inherit; font: inherit; padding: 0; }

/* ---------------------------------------------------- Coquille d'application */

.coquille { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
/* min-width:auto des enfants de grille : sans ceci, une navigation ou un
   tableau large élargit la page au lieu de défiler dans son conteneur. */
.coquille > * { min-width: 0; }

.lateral {
  background: var(--marine-fonce);
  color: #c8d1dc;
  padding: 1.75rem 1rem;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}

.lateral .brand { color: #fff; padding: 0 0.75rem; }
.lateral .filet { margin-left: 0.75rem; }

.lateral nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.lien-nav {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.62rem 0.8rem;
  border-radius: 9px;
  color: #aeb9c6;
  text-decoration: none;
  font-size: 0.9rem;
  border: none; background: none; text-align: left; width: 100%;
  position: relative;
  transition: background 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
}

.lien-nav .icone-nav { width: 20px; height: 20px; flex-shrink: 0; opacity: 0.85; }
.lien-nav:hover { background: rgba(255, 255, 255, 0.06); color: #fff; padding-left: 1rem; }
.lien-nav.actif { background: rgba(176, 140, 63, 0.16); color: var(--or-clair); font-weight: 600; }
.lien-nav.actif .icone-nav { opacity: 1; }
/* Filet doré à gauche de l'entrée active */
.lien-nav.actif::before {
  content: ""; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--or);
}

.lateral .pied {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1rem; font-size: 0.82rem; color: #8d99a8;
}

.contenu { padding: 2.5rem 3rem; max-width: 1200px; }

.entete-vue { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.75rem; gap: 1rem; flex-wrap: wrap; }
.entete-vue h1 { font-size: 1.7rem; }
.entete-vue .sous-titre { color: var(--sourdine); font-size: 0.92rem; margin-top: 0.2rem; }

/* ---------------------------------------------------- Cartes et tableaux */

.carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 1.5rem;
}

.grille-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem; margin-bottom: 2rem;
}

.stat { padding: 1.25rem 1.4rem; }
.stat .valeur { font-family: var(--serif); font-size: 1.9rem; color: var(--marine); line-height: 1.2; }
.stat .libelle { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--sourdine); margin-top: 0.25rem; }

.enveloppe-tableau { overflow-x: auto; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }

th {
  text-align: left; padding: 0.8rem 1rem;
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--sourdine); border-bottom: 1px solid var(--trait);
  white-space: nowrap;
}

td { padding: 0.75rem 1rem; border-bottom: 1px solid #f0ede5; vertical-align: top; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #fbfaf6; }

.pastille {
  display: inline-block; padding: 0.13rem 0.6rem;
  border-radius: 99px; font-size: 0.75rem; font-weight: 600;
}
.pastille-ok { background: rgba(47, 125, 93, 0.12); color: var(--succes); }
.pastille-off { background: rgba(176, 74, 63, 0.12); color: var(--alerte); }
.pastille-info { background: rgba(22, 50, 79, 0.1); color: var(--marine); }
.pastille-or { background: rgba(176, 140, 63, 0.15); color: #8a6d2e; }

/* ---------------------------------------------------- Dialogues */

/* Centrage : le reset universel annule le margin:auto natif des <dialog>,
   on le rétablit explicitement pour un centrage parfait sur tous les écrans. */
dialog, .dialogue-droitweb {
  border: 0; padding: 0; margin: auto;
  color: var(--texte); background: transparent;
  max-width: min(92vw, 34rem); width: 100%;
  max-height: min(88vh, 88dvh); overflow-y: auto;
}
dialog::backdrop, .dialogue-droitweb::backdrop { background: rgba(8, 25, 42, 0.72); backdrop-filter: blur(4px); }
dialog h2 { margin-bottom: 1.25rem; font-size: 1.25rem; }
.actions-dialogue { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.5rem; }

/* Entrée et sortie animées (la sortie est pilotée par la classe .fermeture) */
dialog[open] { animation: dialogue-entrer 0.32s cubic-bezier(0.18, 0.9, 0.32, 1.12); }
dialog[open]::backdrop { animation: voile-entrer 0.32s ease; }
dialog.fermeture { animation: dialogue-sortir 0.18s ease forwards; }
dialog.fermeture::backdrop { animation: voile-sortir 0.18s ease forwards; }

@keyframes dialogue-entrer {
  from { opacity: 0; transform: translateY(22px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes dialogue-sortir {
  to { opacity: 0; transform: translateY(12px) scale(0.97); }
}
@keyframes voile-entrer { from { opacity: 0; } }
@keyframes voile-sortir { to { opacity: 0; } }

.dialogue-droitweb-carte, #dialogue {
  --accent-dialogue: var(--or);
  background: var(--surface); border: 1px solid rgba(176, 140, 63, 0.45); border-radius: 14px;
  box-shadow: 0 24px 70px rgba(7, 23, 39, 0.36); padding: 1.75rem; position: relative; overflow: hidden;
}
.dialogue-droitweb-carte::before, #dialogue::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: linear-gradient(90deg, var(--marine), var(--or), #b5322f);
}

/* Tons thématiques : la teinte du sceau, du sur-titre et du liseré suit le propos. */
.dialogue--confirmation { --accent-dialogue: var(--marine); }
.dialogue--danger { --accent-dialogue: var(--alerte); border-color: rgba(176, 74, 63, 0.5); }
.dialogue--danger::before { background: linear-gradient(90deg, var(--alerte), var(--or), var(--alerte)); }
.dialogue--succes { --accent-dialogue: var(--succes); border-color: rgba(47, 125, 93, 0.45); }
.dialogue--succes::before { background: linear-gradient(90deg, var(--succes), var(--or), var(--succes)); }

.dialogue-droitweb-sceau { color: var(--accent-dialogue, var(--or)); float: right; margin-left: 1rem; }
.dialogue-droitweb-sceau svg { width: 60px; height: 44px; display: block; }
.dialogue-droitweb-sur-titre { color: var(--accent-dialogue, var(--or)); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.18em; }
.dialogue-droitweb-entete h2, #dialogue h2 { color: var(--marine); margin: 0.2rem 0 0.8rem; font-family: Georgia, serif; }
.dialogue-droitweb-sous-titre { color: var(--sourdine); font-size: 0.84rem; margin: -0.5rem 0 0.9rem; }
.dialogue-droitweb-message { line-height: 1.55; white-space: pre-line; }

/* Mode lecture : texte intégral d'une décision ou d'un article */
dialog.dialogue-large { max-width: min(94vw, 50rem); }
dialog.dialogue-large .dialogue-droitweb-message {
  font-size: 0.92rem; text-align: justify; hyphens: auto;
}

/* Sceaux SVG animés selon le type de dialogue */
.sceau-balance .fleau { transform-origin: 16px 9px; animation: osciller-balance 5s ease-in-out infinite; }
.sceau-marteau .marteau { transform-origin: 25px 21px; animation: frapper-marteau 2.6s ease-in-out infinite; }
.sceau-plume .plume { transform-origin: 9px 24px; animation: ecrire-plume 2.4s ease-in-out infinite; }
.sceau-plume .ligne { stroke-dasharray: 22; stroke-dashoffset: 22; animation: tracer-ligne 2.4s ease-in-out infinite; }
.sceau-coche .trace { stroke-dasharray: 26; stroke-dashoffset: 26; animation: tracer-coche 0.7s ease 0.25s forwards; }
.sceau-alerte .halo { transform-origin: center; animation: pulser-halo 1.8s ease-in-out infinite; }

@keyframes frapper-marteau {
  0%, 55%, 100% { transform: rotate(0deg); }
  70%           { transform: rotate(-24deg); }
  80%           { transform: rotate(6deg); }
}
@keyframes ecrire-plume {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(2.5px, 1px) rotate(3deg); }
  60%      { transform: translate(5px, 0) rotate(-2deg); }
}
@keyframes tracer-ligne {
  0%       { stroke-dashoffset: 22; }
  70%, 100% { stroke-dashoffset: 0; }
}
@keyframes tracer-coche { to { stroke-dashoffset: 0; } }
@keyframes pulser-halo {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(1.12); }
}

/* Sceau de section (back-office) : l'icône de la vue active se trace
   à l'ouverture du dialogue, puis lévite doucement. */
.sceau-section { animation: flotter-sceau 4.5s ease-in-out 1.3s infinite; }
.sceau-section .trait-section {
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: tracer-section 0.9s ease 0.15s forwards;
}
@keyframes tracer-section { to { stroke-dashoffset: 0; } }
@keyframes flotter-sceau {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

.champ-secret { display: flex; align-items: stretch; }
.champ-secret input { border-radius: 7px 0 0 7px; }
.btn-secret { border: 1px solid var(--trait); border-left: 0; background: #f2efe7; color: var(--marine); padding: 0 0.8rem; border-radius: 0 7px 7px 0; font-weight: 700; }
.erreur-formulaire { color: var(--alerte); min-height: 1.25rem; font-size: 0.82rem; margin-top: 0.4rem; }
body:has(dialog[open]) { overflow: hidden; }

@media (max-width: 520px) {
  .dialogue-droitweb-carte, #dialogue { padding: 1.25rem; border-radius: 10px; }
  .dialogue-droitweb-sceau svg { width: 36px; height: 36px; }
  .actions-dialogue { flex-direction: column-reverse; }
  .actions-dialogue .btn { width: 100%; }
}

/* ---------------------------------------------------- Espace étudiant */

.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }

.carte-module { display: flex; flex-direction: column; gap: 0.5rem; }
.carte-module h3 { font-size: 1.05rem; }
.carte-module .resume { font-size: 0.88rem; color: var(--sourdine); flex: 1; }
.carte-module .pied-module { display: flex; justify-content: space-between; align-items: center; margin-top: 0.75rem; }

.barre-progression { height: 6px; background: #ece8dd; border-radius: 99px; overflow: hidden; }
.barre-progression > div { height: 100%; background: linear-gradient(90deg, var(--or), var(--marine)); border-radius: 99px; transition: width 0.4s ease; }

.article-cours { max-width: 46rem; }
.article-cours h2 { font-size: 1.3rem; margin: 1.75rem 0 0.6rem; }
.article-cours p { margin-bottom: 1rem; }

/* ------------------- Test de niveau */

.question-test { margin-bottom: 1.75rem; }
.question-test .enonce { font-weight: 600; color: var(--encre); margin-bottom: 0.6rem; }
.choix-test { display: flex; flex-direction: column; gap: 0.4rem; }
.choix-test label {
  display: flex; gap: 0.6rem; align-items: baseline;
  font-weight: 400; font-size: 0.92rem; color: var(--texte);
  padding: 0.55rem 0.8rem; border: 1px solid var(--trait); border-radius: 8px;
  cursor: pointer; background: var(--surface);
}
.choix-test label:hover { border-color: var(--marine); }
.choix-test input { width: auto; }

/* ------------------- Assistant / chat */

.assistant { display: grid; grid-template-rows: auto 1fr auto; height: calc(100vh - 220px); height: calc(100dvh - 220px); min-height: 420px; }

.modes-assistant { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.mode-puce {
  border: 1px solid var(--trait); background: var(--surface);
  padding: 0.4rem 0.95rem; border-radius: 99px; font-size: 0.85rem; color: var(--texte);
}
.mode-puce.actif { background: var(--marine); border-color: var(--marine); color: #fff; }

.fil-messages {
  overflow-y: auto; display: flex; flex-direction: column; gap: 0.9rem;
  padding: 1.25rem; background: var(--surface);
  border: 1px solid var(--trait); border-radius: var(--rayon);
}

.bulle { max-width: 46rem; padding: 0.75rem 1rem; border-radius: 12px; font-size: 0.93rem; white-space: pre-wrap; }
.bulle-utilisateur { align-self: flex-end; background: var(--marine); color: #fff; border-bottom-right-radius: 4px; }
.bulle-assistant { align-self: flex-start; background: #f2efe7; color: var(--encre); border-bottom-left-radius: 4px; }

/* Réponses de l'assistant : Markdown léger rendu proprement */
.bulle-riche { white-space: normal; display: flex; flex-direction: column; gap: 0.55rem; line-height: 1.55; }
.bulle-riche p { margin: 0; }
.bulle-riche .intertitre { font-family: var(--serif); font-weight: 700; color: var(--marine); margin-top: 0.35rem; }
.bulle-riche ul, .bulle-riche ol { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.3rem; }
.bulle-riche strong { color: var(--marine); }
.bulle-riche code {
  background: rgba(22, 50, 79, 0.08); border-radius: 4px;
  padding: 0.05rem 0.35rem; font-size: 0.86em;
}

/* Indicateur de frappe : l'assistant « rédige » */
.bulle-attente { display: inline-flex; gap: 5px; align-items: center; padding: 0.95rem 1.1rem; }
.bulle-attente span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--sourdine);
  animation: pulser-frappe 1.2s ease-in-out infinite;
}
.bulle-attente span:nth-child(2) { animation-delay: 0.15s; }
.bulle-attente span:nth-child(3) { animation-delay: 0.3s; }
@keyframes pulser-frappe {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  40%      { opacity: 1; transform: translateY(-3px); }
}

.saisie-assistant { display: flex; gap: 0.75rem; margin-top: 1rem; }
.saisie-assistant textarea { min-height: 52px; max-height: 160px; flex: 1; }

.solde-tokens { font-size: 0.85rem; color: var(--sourdine); }
.solde-tokens strong { color: var(--or); font-size: 1rem; }

/* ------------------- Pages juridiques (CGU, confidentialité) */

.page-juridique { max-width: 46rem; margin: 0 auto; padding: 3rem 1.5rem 4rem; }
.page-juridique .brand { justify-content: center; }
.page-juridique .filet { margin: 0.9rem auto 2rem; }

.article-juridique {
  background: var(--surface); border: 1px solid var(--trait); border-radius: 14px;
  box-shadow: var(--ombre); padding: 2.5rem 2.75rem;
  position: relative; overflow: hidden;
}
.article-juridique::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: linear-gradient(90deg, var(--marine), var(--or), #b5322f);
}
.article-juridique h1 { font-size: 1.55rem; margin-bottom: 0.3rem; }
.article-juridique .version { color: var(--sourdine); font-size: 0.85rem; margin-bottom: 1.6rem; }
.article-juridique h2 { font-size: 1.08rem; color: var(--marine); margin: 1.6rem 0 0.5rem; }
.article-juridique p { margin-bottom: 0.9rem; }

.pied-juridique { display: flex; justify-content: center; margin-top: 2rem; }

/* Ornement animé des pages juridiques : se trace à l'arrivée puis lévite. */
.ornement-juridique {
  width: 64px; height: 64px; color: var(--or);
  float: right; margin: 0.2rem 0 0.75rem 1.25rem;
  animation: flotter-sceau 5s ease-in-out 2.4s infinite;
}
.ornement-juridique .trace {
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: tracer-ornement 1.3s ease 0.25s forwards;
}
.ornement-juridique .trace-tardive { animation-delay: 0.9s; }
.ornement-juridique .ligne {
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: tracer-ornement 0.5s ease forwards;
}
.ornement-cgu .ligne:nth-of-type(1) { animation-delay: 1.4s; }
.ornement-cgu .ligne:nth-of-type(2) { animation-delay: 1.7s; }
.ornement-cgu .ligne:nth-of-type(3) { animation-delay: 2s; }
.ornement-confidentialite .halo {
  transform-origin: center;
  animation: pulser-halo 2.6s ease-in-out 1.8s infinite;
}
@keyframes tracer-ornement { to { stroke-dashoffset: 0; } }

@media (max-width: 640px) {
  .ornement-juridique { width: 48px; height: 48px; }
}

@media (max-width: 640px) {
  .page-juridique { padding: 2rem 1rem 3rem; }
  .article-juridique { padding: 1.75rem 1.25rem; }
}

/* ---------------------------------------------------- Divers */

.vue { display: none; }
.vue.active { display: block; }

.vide { text-align: center; color: var(--sourdine); padding: 3rem 1rem; font-size: 0.92rem; }

.note-avertissement {
  background: rgba(176, 140, 63, 0.1);
  border: 1px solid rgba(176, 140, 63, 0.35);
  border-radius: 8px; padding: 0.8rem 1rem; font-size: 0.87rem; color: #7a622f;
  margin-bottom: 1.5rem;
}

/* ============================================================
   Responsive — tablette et mobile
   ============================================================ */

@media (max-width: 900px) {
  /* Connexion : panneau unique, centré */
  .page-accueil { grid-template-columns: 1fr; }
  .panneau-decor { display: none; }
  .panneau-connexion {
    border-right: none;
    width: 100%; max-width: 34rem; margin: 0 auto;
    padding: 3rem 1.75rem;
  }

  /* Coquille : la barre latérale devient un bandeau supérieur collant,
     navigation défilante horizontalement (motif applicatif mobile). */
  .coquille { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .lateral {
    position: sticky; top: 0; z-index: 40; height: auto;
    padding: 0.8rem 1rem 0;
    box-shadow: 0 8px 24px rgba(14, 34, 56, 0.28);
  }
  .lateral .brand { padding: 0; font-size: 1.15rem; }
  .lateral .filet { display: none; }
  .lateral nav {
    flex-direction: row; gap: 0.25rem; margin-top: 0.55rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .lateral nav::-webkit-scrollbar { display: none; }
  .lien-nav { white-space: nowrap; width: auto; padding: 0.55rem 0.75rem 0.7rem; }
  .lien-nav:hover { padding-left: 0.75rem; }
  .lien-nav.actif::before {
    left: 0.6rem; right: 0.6rem; top: auto; bottom: 0;
    width: auto; height: 3px; border-radius: 3px 3px 0 0;
  }
  .lateral .pied {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.15rem 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.45rem 0; margin-top: 0.5rem; font-size: 0.78rem;
  }
  .lateral .pied .btn-discret { margin-top: 0 !important; }

  .contenu { padding: 1.5rem; }
  .grille-2 { grid-template-columns: 1fr; }

  /* Assistant : hauteur pilotée par le fil de messages, unités dynamiques */
  .assistant { height: auto; min-height: 0; }
  .fil-messages { height: 52vh; height: 52dvh; }
}

@media (max-width: 640px) {
  .contenu { padding: 1.25rem 1rem 2.5rem; }
  .panneau-connexion { padding: 2.25rem 1.25rem; }

  /* ≥ 16px dans les champs : évite le zoom automatique d'iOS à la saisie */
  input, select, textarea { font-size: 16px; }

  .entete-vue { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .entete-vue h1 { font-size: 1.45rem; }
  .entete-vue > .btn { width: 100%; }

  .grille-stats { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .stat { padding: 1rem 1.1rem; }
  .stat .valeur { font-size: 1.55rem; }
  .grille-cartes { grid-template-columns: 1fr; }

  th, td { padding: 0.6rem 0.7rem; }

  .bulle { max-width: 88%; }
  .modes-assistant { gap: 0.4rem; }
  .saisie-assistant { flex-direction: column; }
  .saisie-assistant .btn { width: 100%; }
}

@media (max-width: 420px) {
  html { font-size: 15px; }
  .lateral .pied { font-size: 0.74rem; }
  .grille-stats { gap: 0.6rem; }
}

/* ============================================================
   Thème justice — scène animée, liseré tricolore, raffinements
   ============================================================ */

/* ---- Scène de justice (page de connexion) */

.panneau-decor { position: relative; overflow: hidden; }

.scene-justice {
  color: var(--or-clair);
  width: min(320px, 70%);
  margin: 0 auto 2.5rem;
  opacity: 0;
  animation: apparaitre-scene 1.1s ease forwards;
}
.scene-justice svg { width: 100%; height: auto; overflow: visible; }

/* Le fléau de la balance oscille doucement autour de son axe central. */
.scene-justice .fleau {
  transform-origin: 110px 82px;
  animation: osciller-fleau 7s ease-in-out infinite;
}
.scene-justice .chaine { opacity: 0.65; }
.scene-justice .plateau { fill: rgba(217, 199, 154, 0.12); }
.scene-justice .palais { color: #e7ddc4; }

.scene-justice .etincelles circle { animation: scintiller 4s ease-in-out infinite; }
.scene-justice .etincelles circle:nth-child(2) { animation-delay: 1s; }
.scene-justice .etincelles circle:nth-child(3) { animation-delay: 2s; }
.scene-justice .etincelles circle:nth-child(4) { animation-delay: 3s; }

@keyframes osciller-fleau {
  0%, 100% { transform: rotate(-3.5deg); }
  50%      { transform: rotate(3.5deg); }
}
@keyframes apparaitre-scene {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scintiller {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 0.9; }
}

/* ---- Liseré tricolore (bas du panneau décor) */

.liseré-tricolore {
  display: flex; gap: 0; margin-top: 2.5rem;
  width: 120px; height: 4px; border-radius: 4px; overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.liseré-tricolore span { flex: 1; transform: scaleX(0); transform-origin: left; }
.liseré-tricolore span:nth-child(1) { background: #274b8f; animation: derouler 0.5s ease 0.6s forwards; }
.liseré-tricolore span:nth-child(2) { background: #f4f1ea; animation: derouler 0.5s ease 0.8s forwards; }
.liseré-tricolore span:nth-child(3) { background: #b5322f; animation: derouler 0.5s ease 1s forwards; }

@keyframes derouler { to { transform: scaleX(1); } }

/* ---- Entrée en fondu des vues applicatives */

.vue.active { animation: monter-vue 0.35s ease; }
@keyframes monter-vue {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Raffinements cartes, boutons, tuiles */

.carte { transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease; }
/* Cartes de résultats officiels : cliquables, avec appel à la lecture */
.carte-source { cursor: pointer; }
.carte-source:focus-visible { outline: 2px solid var(--marine); outline-offset: 2px; }
.lien-lecture { color: var(--or); font-size: 0.83rem; font-weight: 600; margin-top: 0.6rem; }
.carte-source:hover .lien-lecture { color: var(--marine); }

.carte-module:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(22, 50, 79, 0.08), 0 14px 34px rgba(22, 50, 79, 0.12);
  border-color: var(--or-clair);
}

.stat { position: relative; overflow: hidden; }
/* Discret filet doré en tête de chaque tuile statistique */
.stat::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--or), transparent 70%);
}

.btn { box-shadow: 0 1px 2px rgba(14, 34, 56, 0.15); }
.btn:hover { box-shadow: 0 4px 14px rgba(14, 34, 56, 0.22); }

/* Marque cliquable sobre sur la page de connexion */
.panneau-connexion .brand { margin-bottom: 0.25rem; }

@media (prefers-reduced-motion: reduce) {
  .scene-justice, .vue.active, .liseré-tricolore span { animation: none; }
  .liseré-tricolore span { transform: scaleX(1); }
  .scene-justice { opacity: 1; }
  dialog[open], dialog[open]::backdrop, dialog.fermeture, dialog.fermeture::backdrop,
  .sceau-balance .fleau, .sceau-marteau .marteau, .sceau-plume .plume,
  .sceau-plume .ligne, .sceau-coche .trace, .sceau-alerte .halo { animation: none; }
  .sceau-plume .ligne, .sceau-coche .trace { stroke-dashoffset: 0; }
  .sceau-section, .sceau-section .trait-section { animation: none; }
  .sceau-section .trait-section { stroke-dashoffset: 0; }
  .bulle-attente span { animation: none; opacity: 0.6; }
  .ornement-juridique, .ornement-juridique .trace, .ornement-juridique .ligne,
  .ornement-confidentialite .halo { animation: none; }
  .ornement-juridique .trace, .ornement-juridique .ligne { stroke-dashoffset: 0; }
}