/* Bien à moi : l'ardoise des toits de Rennes, le jaune du genêt pour ce qu'on choisit, le bleu des volets pour les liens. */
:root {
  --ardoise: #1e2a35;
  --fond: #e9eef1;
  --papier: #f7f9fa;
  --granit: #5b6773;
  --genet: #f2c230;
  --genet-pale: #fbe8a6;
  --volet: #1f5c8a;
  --trait: #c9d2d9;
  --texte: "Bricolage Grotesque", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--fond);
  color: var(--ardoise);
  font: 400 1.0625rem/1.55 var(--texte);
  font-optical-sizing: auto;
}
a {
  color: var(--volet);
  text-underline-offset: 0.18em;
}
a:hover {
  color: var(--ardoise);
}
:focus-visible {
  outline: 3px solid var(--volet);
  outline-offset: 3px;
  border-radius: 2px;
}
.lu {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cadre {
  max-width: 68rem;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 48rem) {
  .cadre {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.entete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 1.25rem;
  padding-bottom: 1rem;
}
.marque {
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  color: var(--ardoise);
  text-decoration: none;
}

h1,
h2 {
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  margin: 1.5rem 0 1rem;
}
h2 {
  font-size: 1.35rem;
  margin: 2.5rem 0 1rem;
}

/* ---- décrire : on écrit ce qu'on cherche, en grand, comme une lettre ---- */
.haut {
  padding-top: clamp(1.5rem, 6vw, 4.5rem);
  padding-bottom: 1.5rem;
}
.invite {
  display: block;
  font-size: 1.1rem;
  color: var(--granit);
  margin-bottom: 0.75rem;
}
.decrire textarea {
  display: block;
  width: 100%;
  max-width: 26em;
  font: 600 clamp(1.6rem, 4.2vw, 3rem)/1.3 var(--texte);
  letter-spacing: -0.02em;
  color: var(--ardoise);
  background: transparent;
  border: 0;
  border-bottom: 0.18em solid var(--genet);
  padding: 0 0 0.25em;
  resize: vertical;
  field-sizing: content;
  min-height: 2.6em;
}
.decrire textarea::placeholder {
  color: #8b96a0;
  opacity: 1;
}
.decrire textarea:focus {
  outline: none;
  border-bottom-color: var(--volet);
}
.decrire textarea:focus-visible {
  outline: none;
}
.decrire button {
  margin-top: 1.25rem;
  font: 600 1.125rem/1 var(--texte);
  color: var(--papier);
  background: var(--ardoise);
  border: 0;
  border-radius: 999px;
  padding: 0.95rem 1.8rem;
  cursor: pointer;
}
.decrire button:hover {
  background: var(--volet);
}
.decrire button:focus-visible {
  outline: 3px solid var(--volet);
  outline-offset: 3px;
}
.decrire--petite textarea {
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  max-width: 40em;
  min-height: 0;
}
.decrire--petite button {
  margin-top: 0.9rem;
  font-size: 1rem;
  padding: 0.8rem 1.4rem;
}
.exemples {
  margin-top: 2rem;
  max-width: 44rem;
}
.exemples p {
  margin: 0 0 0.4rem;
  color: var(--granit);
}
.exemples ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.exemples li {
  padding: 0.2rem 0;
}
.exemples a {
  color: var(--ardoise);
  text-decoration-color: var(--genet);
  text-decoration-thickness: 0.15em;
}
.exemples a:hover {
  color: var(--volet);
}
.compris {
  margin: 1.25rem 0 0;
  font-size: 1.1rem;
  max-width: 46rem;
}
.compris span {
  color: var(--granit);
}
.etat {
  color: var(--granit);
  max-width: 40rem;
  margin: 1.5rem 0 0;
}

/* ---- les annonces : une ligne par bien, le prix d'abord ---- */
.compte {
  font-weight: 600;
  margin: 1.5rem 0 0.75rem;
}
.annonces {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--papier);
  border-radius: 0.5rem;
}
.annonce {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "prix dpe" "bien bien" "lieu lieu" "voir voir";
  gap: 0.15rem 1rem;
  padding: 1rem 1rem 1.1rem;
  border-top: 1px solid var(--trait);
}
.annonce:first-child {
  border-top: 0;
}
.annonce p {
  margin: 0;
}
.prix {
  grid-area: prix;
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.m2 {
  display: block;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--granit);
  letter-spacing: 0;
}
.bien {
  grid-area: bien;
}
.plus {
  color: var(--granit);
  font-size: 0.95rem;
}
.neuf {
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--genet-pale);
  border-radius: 0.25rem;
  padding: 0.05rem 0.35rem;
  vertical-align: 0.1em;
}
.lieu {
  grid-area: lieu;
}
.voir {
  grid-area: voir;
  justify-self: start;
  font-weight: 600;
  margin-top: 0.35rem;
}
.dpe {
  grid-area: dpe;
  align-self: start;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  font-weight: 800;
  border-radius: 0.3rem;
  color: #fff;
}
@media (min-width: 52rem) {
  .annonce {
    grid-template-columns: 11rem 1fr 13rem 2.5rem 12rem;
    grid-template-areas: "prix bien lieu dpe voir";
    align-items: baseline;
    padding: 1.1rem 1.25rem;
  }
  .voir {
    justify-self: end;
    margin-top: 0;
  }
  .dpe {
    align-self: center;
  }
}
/* couleurs officielles de l'étiquette énergie */
.dpe-A {
  background: #009c6d;
}
.dpe-B {
  background: #52b153;
}
.dpe-C {
  background: #78bd76;
  color: #12301a;
}
.dpe-D {
  background: #f4e70f;
  color: #3d3600;
}
.dpe-E {
  background: #f0b40f;
  color: #3d2a00;
}
.dpe-F {
  background: #eb8235;
  color: #2e1500;
}
.dpe-G {
  background: #d7221f;
}
.dpe-nc {
  background: transparent;
  color: var(--granit);
  border: 1px dashed var(--trait);
}

.vide {
  background: var(--papier);
  border-radius: 0.5rem;
  padding: 1.25rem;
  margin-top: 1rem;
}
.vide p {
  margin: 0 0 0.4rem;
}
.pages {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.25rem 0;
  color: var(--granit);
}
.marche {
  font-size: 1.15rem;
  max-width: 42rem;
}

.communes ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2 12rem;
  column-gap: 2rem;
}
.communes li {
  break-inside: avoid;
  padding: 0.2rem 0;
}
.communes .nb {
  color: var(--granit);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.communes [aria-current] {
  font-weight: 600;
}

.texte {
  max-width: 44rem;
}
.pied {
  color: var(--granit);
  font-size: 0.95rem;
  padding-top: 3rem;
  padding-bottom: 2.5rem;
}

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

/* ---- l'accueil en conversation, façon assistant : écran de départ centré, puis fil et saisie fixée en bas ---- */
.liens {
  display: flex;
  gap: 1.25rem;
  align-items: baseline;
}
.liens [hidden] {
  display: none;
}

.chat {
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 1rem;
  min-height: calc(100dvh - 4.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.depart {
  text-align: center;
  margin-bottom: 1.5rem;
}
.depart h1 {
  font-size: clamp(2rem, 5.5vw, 3.1rem);
  margin: 0 0 0.75rem;
}
.depart p {
  color: var(--granit);
  margin: 0 auto;
  max-width: 34rem;
}

.saisie {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 1.6rem;
  padding: 0.55rem 0.55rem 0.55rem 1.15rem;
  box-shadow:
    0 1px 2px rgb(30 42 53 / 6%),
    0 10px 28px rgb(30 42 53 / 8%);
}
.saisie:focus-within {
  border-color: var(--volet);
}
.saisie textarea {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ardoise);
  font: 400 1.1rem/1.5 var(--texte);
  padding: 0.4rem 0;
  resize: none;
  field-sizing: content;
  min-height: 1.5em;
  max-height: 12rem;
}
.saisie textarea::placeholder {
  color: #8b96a0;
  opacity: 1;
}
.saisie textarea:focus {
  outline: none;
}
.saisie button {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border: 0;
  border-radius: 50%;
  background: var(--ardoise);
  color: var(--genet);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.saisie button:hover {
  background: var(--volet);
}
.saisie button:disabled {
  opacity: 0.4;
  cursor: wait;
}

.suggestions {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.suggestions a {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: var(--papier);
  color: var(--ardoise);
  font-size: 0.95rem;
  text-decoration: none;
}
.suggestions a:hover {
  border-color: var(--genet);
  background: var(--genet-pale);
}
.mention {
  text-align: center;
  color: var(--granit);
  font-size: 0.9rem;
  margin: 1.25rem 0 0;
}

/* le fil */
.fil:empty {
  display: none;
}
.msg {
  margin: 1.5rem 0;
}
.msg--moi {
  display: flex;
  justify-content: flex-end;
}
.msg--moi .bulle {
  max-width: 80%;
  background: var(--ardoise);
  color: var(--papier);
  border-radius: 1.25rem 1.25rem 0.35rem 1.25rem;
  padding: 0.7rem 1rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.msg--lui {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.75rem;
  align-items: start;
}
.avatar svg {
  width: 2rem;
  height: 2rem;
  display: block;
}
.corps {
  min-width: 0;
}
.texte p {
  margin: 0 0 0.6rem;
  line-height: 1.6;
  max-width: 40rem;
}
.texte:empty {
  display: none;
}
.msg--lui .etat {
  color: var(--granit);
  margin: 0.35rem 0 0;
  max-width: none;
}
.points i {
  display: inline-block;
  width: 0.3em;
  height: 0.3em;
  margin-left: 0.2em;
  border-radius: 50%;
  background: currentColor;
  animation: souffle 1.2s infinite ease-in-out;
}
.points i:nth-child(2) {
  animation-delay: 0.15s;
}
.points i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes souffle {
  0%,
  80%,
  100% {
    opacity: 0.25;
  }
  40% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .points i {
    animation: none;
    opacity: 0.6;
  }
}

/* les annonces en cartes, dans le fil */
.resultats {
  margin: 0.5rem 0 0.75rem;
}
.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  gap: 0.6rem;
}
.carte {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.8rem 0.9rem 0.85rem;
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 0.9rem;
  color: var(--ardoise);
  text-decoration: none;
}
.carte:hover {
  border-color: var(--volet);
}
.carte-haut {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.carte-prix {
  font-weight: 800;
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}
.carte .dpe {
  grid-area: auto;
  width: 1.6rem;
  height: 1.6rem;
  font-size: 0.85rem;
}
.carte-bien {
  font-weight: 600;
}
.carte-lieu,
.carte-plus {
  color: var(--granit);
  font-size: 0.9rem;
}
.carte-voir {
  color: var(--volet);
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: 0.35rem;
}
.toutes {
  display: inline-block;
  margin-top: 0.6rem;
  font-weight: 600;
}

/* page d'une commune : la conversation en tête, les annonces de la commune en dessous */
.chat--commune {
  min-height: auto;
  padding-top: clamp(2rem, 7vh, 4.5rem);
  padding-bottom: 2.5rem;
}
.chat--commune .depart .marche {
  font-size: 0.95rem;
  margin-bottom: 1rem;
}
.annonces-commune h2.compte {
  font-size: 1.15rem;
}

/* une fois la conversation lancée : l'écran lui appartient, la saisie reste en bas */
.en-conversation .chat {
  justify-content: flex-start;
  min-height: auto;
  padding-bottom: 8rem;
}
.en-conversation .annonces-commune,
.en-conversation .depart,
.en-conversation .suggestions,
.en-conversation .mention,
.en-conversation .communes,
.en-conversation .pied {
  display: none;
}
.en-conversation .saisie {
  position: fixed;
  z-index: 5;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(46rem, calc(100% - 2rem));
}
.en-conversation .chat::after {
  content: "";
  position: fixed;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6.5rem;
  background: linear-gradient(rgb(233 238 241 / 0%), var(--fond) 45%);
  pointer-events: none;
}

/* petit écran : les bulles prennent un peu plus de largeur */
@media (max-width: 30rem) {
  .msg--moi .bulle {
    max-width: 88%;
  }
}