/* Pilote MidasAlgo — direction visuelle tirée du « Jugement de Midas »
   (école flamande, v. 1600). Toutes les couleurs sont relevées sur la toile :
   le fond de vernis assombri, la robe safran de Midas, le drapé pétrole
   d'Apollon, le cramoisi de Pan, la chair ivoire, le feuillage olive.

   Sémantique retenue (elle porte du sens, ce n'est pas décoratif) :
     or       = Midas, le jugement, l'action principale
     apollon  = le concurrent qu'on a eu tort d'écarter → liens, information
     pan      = le choix qui a coûté les oreilles d'âne → avertissements */

:root {
  --vernis:     #17130d;
  --bois:       #221b12;
  --bois-clair: #2e2618;
  --trait:      #3b3121;

  --or:      #d8a03c;
  --or-vif:  #f0c86a;
  --apollon: #57a9ab;
  --pan:     #c25a44;
  --laurier: #7f8f52;

  --ivoire:  #e8dac0;
  --estompe: #a4937a;

  --serif: "Fraunces", "Hoefler Text", Georgia, serif;
  --sans:  "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  --page: 68rem;

  /* Fait rendre les contrôles natifs (sélecteur de fichier, barres de
     défilement, calendriers) en sombre : sans ça le bouton « Parcourir »
     ressort en gris clair illisible sur le vernis. */
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--vernis);
  color: var(--ivoire);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Bandeau : la toile elle-même, noyée dans son vernis ---------- */

.bandeau {
  position: relative;
  background-image:
    linear-gradient(to bottom, rgba(23, 19, 13, .58) 0%, rgba(23, 19, 13, .82) 55%, var(--vernis) 100%),
    url("/static/midas.jpg");
  background-size: cover;
  background-position: center 34%;
  border-bottom: 1px solid var(--or);
}

.bandeau--haut { min-height: 20rem; }
.bandeau--bas  { min-height: 9rem; }

.bandeau__voile {
  max-width: var(--page);
  margin: 0 auto;
  padding: 1.5rem 1.5rem 2.25rem;
  display: flex;
  flex-direction: column;
  min-height: inherit;
}

.marque {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  flex-wrap: wrap;
}

.marque__nom {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--or-vif);
  margin: 0;
}

.marque__role {
  font-size: .7rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--estompe);
}

/* ---------- Navigation ---------- */

.nav {
  margin-left: auto;
  display: flex;
  gap: 1.5rem;
  align-items: baseline;
  flex-wrap: wrap;
}

.nav a {
  color: var(--ivoire);
  text-decoration: none;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding-bottom: .2rem;
  border-bottom: 1px solid transparent;
}

.nav a:hover,
.nav a:focus-visible { color: var(--or-vif); border-bottom-color: var(--or); }
.nav a[aria-current="page"] { color: var(--or-vif); border-bottom-color: var(--or); }

/* ---------- Titre de page, posé au bas du bandeau ---------- */

.titrage { margin-top: auto; padding-top: 3rem; }

.titrage__sur {
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0 0 .5rem;
}

.titrage__titre {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1;
  letter-spacing: -.015em;
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .6);
}

/* Sur les pages intérieures le bandeau est bas : le titre suit la mesure,
   ce qui évite qu'un titre de lettre à rallonge occupe tout l'écran. */
.bandeau--bas .titrage__titre { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.bandeau--bas .titrage { padding-top: 1.75rem; }

.titrage__note {
  margin: .9rem 0 0;
  max-width: 42ch;
  color: var(--ivoire);
  font-size: .95rem;
}

.etiquette {
  display: block;
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--estompe);
}

/* ---------- Corps ---------- */

.corps {
  max-width: var(--page);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 5rem;
}

.corps > * + * { margin-top: 2rem; }

h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.45rem;
  letter-spacing: .01em;
  margin: 0 0 .9rem;
  color: var(--or-vif);
}

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

/* ---------- Le relevé : chiffres de la journée ---------- */

.releve {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 2.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--bois);
  border: 1px solid var(--trait);
  border-left: 3px solid var(--or);
}

.chiffre__valeur {
  display: block;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--or-vif);
}

.chiffre__nom {
  display: block;
  margin-top: .45rem;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--estompe);
}

.releve__action { margin-left: auto; }

/* ---------- L'inscription : la mise en garde du mythe ---------- */

.inscription {
  padding: 1.25rem 1.5rem;
  background: linear-gradient(to right, rgba(194, 90, 68, .13), transparent 70%);
  border-left: 3px solid var(--pan);
}

.inscription__vers {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ivoire);
  margin: 0 0 .6rem;
}

.inscription p:last-child {
  margin: 0;
  font-size: .9rem;
  color: var(--estompe);
  max-width: 62ch;
}

/* ---------- Les prétendants : une carte par angle en lice ---------- */

.lice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
}

.pretendant {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: var(--bois);
  border: 1px solid var(--trait);
  border-top: 2px solid var(--trait);
}

.pretendant--tete { border-top-color: var(--or); background: var(--bois-clair); }

.pretendant__rang {
  font-family: var(--serif);
  font-size: .95rem;
  letter-spacing: .2em;
  color: var(--estompe);
}

.pretendant--tete .pretendant__rang { color: var(--or); }

.pretendant__sujet {
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.3;
  margin: .5rem 0 1.25rem;
  color: var(--ivoire);
}

.pretendant__taux {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--or-vif);
  margin-top: auto;
}

.pretendant__taux span { font-size: 1.1rem; color: var(--estompe); }

.pretendant__detail {
  margin: .6rem 0 0;
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--estompe);
}

.pretendant__laurier {
  margin: 1rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid var(--trait);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--estompe);
}

.pretendant--tete .pretendant__laurier { color: var(--or); }

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

.bouton {
  display: inline-block;
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .7rem 1.3rem;
  border: 1px solid var(--or);
  background: transparent;
  color: var(--or-vif);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.bouton:hover { background: var(--or); color: var(--vernis); }

.bouton--plein { background: var(--or); color: var(--vernis); font-weight: 600; }
.bouton--plein:hover { background: var(--or-vif); }

.bouton--discret { border-color: var(--trait); color: var(--estompe); }
.bouton--discret:hover { background: var(--trait); color: var(--ivoire); }

.bouton--pan { border-color: var(--pan); color: var(--pan); }
.bouton--pan:hover { background: var(--pan); color: var(--vernis); }

/* ---------- Champs ---------- */

.champ {
  font-family: var(--sans);
  font-size: 1rem;
  padding: .7rem .9rem;
  background: var(--vernis);
  border: 1px solid var(--trait);
  color: var(--ivoire);
  width: 100%;
}

.champ:focus { outline: none; border-color: var(--or); }
.champ::placeholder { color: #6f6350; }

:focus-visible { outline: 2px solid var(--or-vif); outline-offset: 2px; }

/* ---------- Panneau générique ---------- */

.panneau {
  padding: 1.5rem;
  background: var(--bois);
  border: 1px solid var(--trait);
}

.rangee { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.rangee .bouton { flex-shrink: 0; }

/* ---------- Connexion : page isolée, la toile en plein écran ---------- */

.seuil {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background-image:
    linear-gradient(rgba(23, 19, 13, .74), rgba(23, 19, 13, .93)),
    url("/static/midas.jpg");
  background-size: cover;
  background-position: center;
}

.seuil__carte {
  width: min(26rem, 100%);
  padding: 2.5rem;
  background: rgba(34, 27, 18, .93);
  border: 1px solid var(--trait);
  border-top: 2px solid var(--or);
  backdrop-filter: blur(3px);
}

.seuil__titre {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--or-vif);
  margin: 0;
}

.seuil__note {
  color: var(--estompe);
  font-size: .85rem;
  margin: .4rem 0 1.75rem;
}

.erreur {
  color: var(--pan);
  font-size: .9rem;
  margin: 0 0 1rem;
  padding-left: .75rem;
  border-left: 2px solid var(--pan);
}

/* ---------- Lettres ---------- */

.lettres { list-style: none; padding: 0; margin: 0; }

.lettres li { border-bottom: 1px solid var(--trait); }

.lettres a {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 1.1rem .25rem;
  text-decoration: none;
  color: var(--ivoire);
}

.lettres a:hover { background: var(--bois); color: var(--or-vif); }

.lettres__titre { font-family: var(--serif); font-size: 1.15rem; }
.lettres__meta { margin-left: auto; font-family: var(--mono); font-size: .78rem; color: var(--estompe); }

.vide {
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--estompe);
  border: 1px dashed var(--trait);
}

.apercu {
  width: 100%;
  height: 34rem;
  border: 1px solid var(--trait);
  background: #fff;
}

.apercu--optimise { border-color: var(--or); }

.avis {
  padding: 1.25rem 1.5rem;
  background: var(--bois);
  border-left: 3px solid var(--apollon);
  white-space: pre-wrap;
}

.mention {
  padding: .8rem 1.2rem;
  background: rgba(87, 169, 171, .12);
  border-left: 3px solid var(--apollon);
  margin: 0;
}

/* ---------- Registre des consultations ----------
   Pas de bulles ni d'étiquettes de rôle : la question est un titre, la réponse
   du texte courant. Un échange = une question suivie de sa réponse, séparé du
   suivant par un filet. */

.registre { margin-top: 3rem; }

/* Le filet ouvre chaque échange, donc il ne se pose que sur la question. */
.consultation { padding-top: 2rem; border-top: 1px solid var(--trait); }

.consultation--reponse { padding: 1rem 0 2rem; border-top: none; }

.consultation__date {
  margin: 0 0 .6rem;
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--estompe);
}

.consultation__question {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.25;
  margin: 0;
  color: var(--ivoire);
}

.consultation__reponse {
  white-space: pre-wrap;
  max-width: 68ch;
  color: var(--ivoire);
}

/* ---------- Tableau de repli ---------- */

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

.table th {
  text-align: left;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--estompe);
  font-weight: 500;
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--or);
}

.table td { padding: .7rem .75rem; border-bottom: 1px solid var(--trait); }
.table .nombre { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- Pied ---------- */

.pied {
  max-width: var(--page);
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
  border-top: 1px solid var(--trait);
  color: var(--estompe);
  font-size: .78rem;
}

/* ---------- Carnet de bord d'une lettre ---------- */

.carnet { list-style: none; padding: 0; margin: 1.75rem 0 0; }

.carnet__note {
  padding: 1rem 0 1rem 1.25rem;
  border-left: 2px solid var(--trait);
}

.carnet__note + .carnet__note { border-top: 1px solid var(--trait); }

.carnet__date {
  margin: 0 0 .35rem;
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--estompe);
}

.carnet__texte { margin: 0; white-space: pre-wrap; }

.bascule {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .9rem;
  color: var(--estompe);
  cursor: pointer;
}

.bascule input { accent-color: var(--or); }

@media (max-width: 40rem) {
  .bandeau--haut { min-height: 16rem; }
  .releve { gap: 1.5rem; }
  .releve__action { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}