@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/static/polices/bricolage-grotesque.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 500 800;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("/static/polices/instrument-sans.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400 600;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/polices/jetbrains-mono.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 500 700;
}

:root {
  --papier: #F6F8F3;
  --surface: #FFFFFF;
  --encre: #1E2A21;
  --encre-douce: #56645A;
  --trait: #DCE3D8;
  --mousse: #2F5D3A;
  --mousse-fonce: #234A2C;
  --sur-mousse: #FFFFFF;
  --entete-fond: #2F5D3A;
  --entete-texte: #FFFFFF;
  --beurre: #F4C430;
  --sur-beurre: #1E2A21;
  --erreur: #B3261E;
  --attention: #9A5B00;
  --info: #2C5A8C;
  --famille-menthe: #D6EEDD;
  --famille-rose: #F7DAD3;
  --famille-ble: #FBEDB5;
  --famille-ciel: #D6E5F5;
  --famille-lilas: #E7DEF3;
  --famille-violet: #CDB4EE;
  --police-titre: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --police-texte: "Instrument Sans", "Segoe UI", sans-serif;
  --police-nombre: "JetBrains Mono", "DejaVu Sans Mono", monospace;
  --taille-texte: 1rem;
  --taille-petite: 0.875rem;
  --taille-titre: clamp(1.6rem, 4vw, 2.2rem);
  --taille-sous-titre: 1.5rem;
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --espace-1: 0.5rem;
  --espace-2: 1rem;
  --espace-3: 1.5rem;
  --espace-4: 2rem;
  --largeur-contenu: 64rem;
  --largeur-lecture: 38rem;
  --hauteur-tactile: 3rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #141A16;
    --surface: #1C241F;
    --encre: #EEF2EC;
    --encre-douce: #A9B5AC;
    --trait: #2E3A32;
    --mousse: #7DBB8A;
    --mousse-fonce: #9BD1A6;
    --sur-mousse: #10180F;
    --entete-fond: #1C241F;
    --entete-texte: #7DBB8A;
    --beurre: #F4C430;
    --sur-beurre: #1E2A21;
    --erreur: #F2938C;
    --attention: #E8B25A;
    --info: #8DB6E6;
    --famille-menthe: #24392B;
    --famille-rose: #3D2A27;
    --famille-ble: #3A3420;
    --famille-ciel: #22303F;
    --famille-lilas: #2F2A3B;
    --famille-violet: #3B2A55;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color: var(--encre);
  background: var(--papier);
  font-family: var(--police-texte);
  font-size: var(--taille-texte);
  line-height: 1.55;
}

body {
  min-width: 20rem;
  min-height: 100dvh;
  margin: 0;
}

a {
  color: inherit;
}

.acces-rapide {
  position: absolute;
  z-index: 1;
  top: var(--espace-1);
  left: var(--espace-1);
  padding: var(--espace-1) var(--espace-2);
  background: var(--surface);
  transform: translateY(-150%);
}

.acces-rapide:focus {
  transform: translateY(0);
}

.entete {
  background: var(--entete-fond);
  border-bottom: 1px solid var(--trait);
}

.marque {
  display: block;
  width: min(100% - (2 * var(--espace-2)), var(--largeur-contenu));
  min-height: var(--hauteur-tactile);
  margin-inline: auto;
  padding-block: 0.7rem;
  color: var(--entete-texte);
  font-family: var(--police-titre);
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
}

.marque img {
  display: block;
  width: auto;
  height: 52px;
}

.conteneur {
  width: min(100% - (2 * var(--espace-2)), var(--largeur-contenu));
  margin-inline: auto;
  padding-block: var(--espace-4);
}

.panneau {
  padding: clamp(var(--espace-3), 5vw, var(--espace-4));
  border: 1px solid var(--trait);
  border-radius: var(--r-md);
  background: var(--surface);
}

.panneau-etroit {
  max-width: var(--largeur-lecture);
  margin-inline: auto;
}

.accueil {
  margin-top: clamp(var(--espace-2), 8vh, 5rem);
}

.surtitre {
  margin: 0 0 var(--espace-1);
  color: var(--encre-douce);
  font-size: var(--taille-petite);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1 {
  max-width: 18ch;
  margin: 0 0 var(--espace-2);
  font-size: var(--taille-titre);
  font-family: var(--police-titre);
  font-weight: 700;
  line-height: 1.05;
  text-wrap: balance;
}

h2 {
  margin-top: 0;
  font-family: var(--police-titre);
  font-size: var(--taille-sous-titre);
  line-height: 1.05;
}

.barre-titre {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--espace-2);
  margin-bottom: var(--espace-3);
}

.barre-titre h1 {
  margin-bottom: 0;
}

.actions,
.filtres,
.formulaire-court {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--espace-2);
}

.actions {
  align-items: center;
}

.filtres {
  margin-bottom: var(--espace-3);
  padding: var(--espace-2);
}

.filtres > div,
.formulaire-court > div {
  flex: 1 1 12rem;
}

.formulaire {
  display: grid;
  gap: var(--espace-3);
  margin-top: var(--espace-3);
}

.dimensions-champs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espace-1);
}

.dimensions-champs legend {
  margin-bottom: var(--espace-1);
}

.dimensions-champs label {
  font-size: var(--taille-petite);
}

.dimensions-piece {
  margin-block: var(--espace-1) var(--espace-2);
  color: var(--encre-douce);
  font-family: var(--police-nombre);
  font-size: var(--taille-petite);
}

.choix-photos {
  display: grid;
  gap: var(--espace-1);
}

.choix-photos label:not(:first-of-type) {
  margin-top: var(--espace-1);
}

.choix-photos .aide-champ {
  margin-bottom: 0;
  text-align: left;
}

.formulaire-court > .choix-photos {
  flex: 1 1 100%;
}

label {
  display: block;
  margin-bottom: var(--espace-1);
  font-weight: 600;
}

input,
select,
textarea,
button {
  min-height: var(--hauteur-tactile);
  border-radius: var(--r-sm);
  font: inherit;
  touch-action: manipulation;
}

input,
select,
textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 2px solid var(--trait);
  color: var(--encre);
  background: var(--papier);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--mousse);
}

textarea {
  min-height: calc(3 * var(--hauteur-tactile));
  resize: vertical;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: var(--espace-2);
  border: 1px solid var(--trait);
  border-radius: var(--r-sm);
}

legend {
  padding-inline: var(--espace-1);
  font-weight: 600;
}

.aide-champ,
.precision {
  color: var(--encre-douce);
  font-size: var(--taille-petite);
  font-weight: 400;
}

.aide-champ {
  margin-block: var(--espace-1);
  text-align: center;
}

button {
  padding: 14px 20px;
  border: 2px solid var(--mousse);
  color: var(--sur-mousse);
  background: var(--mousse);
  font-weight: 600;
  cursor: pointer;
}

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hauteur-tactile);
  padding: 14px 20px;
  border: 2px solid var(--mousse);
  border-radius: var(--r-md);
  color: var(--sur-mousse);
  background: var(--mousse);
  font-weight: 600;
  text-decoration: none;
  touch-action: manipulation;
}

.bouton:hover,
button:hover {
  border-color: var(--mousse-fonce);
  background: var(--mousse-fonce);
}

.bouton:active,
button:active {
  transform: translateY(2px);
}

button:disabled {
  border-color: var(--trait);
  color: var(--encre-douce);
  background: var(--papier);
  cursor: not-allowed;
  opacity: 0.7;
}

.bouton-secondaire {
  margin-top: var(--espace-3);
  border-color: var(--mousse);
  color: var(--mousse);
  background: transparent;
}

.bouton-secondaire:hover {
  color: var(--sur-mousse);
}

.message-erreur {
  padding: var(--espace-2);
  border: 0;
  border-left: 4px solid var(--erreur);
  border-radius: var(--r-sm);
  color: var(--erreur);
  background: var(--papier);
  font-weight: 600;
}

/* Aide-moi au travail : bien visible, et le bouton est caché pendant ce temps. */
.message-attente {
  display: grid;
  gap: var(--espace-1);
  padding: var(--espace-2);
  border: 2px solid var(--encre);
  border-radius: var(--r-sm);
  color: var(--sur-beurre);
  background: var(--beurre);
  box-shadow: 3px 3px 0 var(--encre);
  font-size: 1.125rem;
}

.message-attente strong {
  font-family: var(--police-titre);
  font-size: 1.25rem;
}

.message-reussite,
.compteur-voiture,
.pastille-nouvelle {
  padding: var(--espace-1) var(--espace-2);
  border: 1px solid var(--trait);
  border-radius: var(--r-sm);
  background: var(--papier);
}

.message-reussite {
  border: 0;
  border-left: 4px solid var(--mousse);
}

.compteur-voiture {
  margin: 0;
}

.liste-pieces {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--espace-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.liste-messages {
  display: grid;
  gap: var(--espace-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.carte-message {
  display: grid;
  grid-template-columns: minmax(5rem, 7rem) minmax(0, 1fr);
  gap: var(--espace-2);
  padding: var(--espace-2);
}

.carte-message > img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  object-fit: cover;
}

.message-repondu {
  color: var(--encre-douce);
}

.entete-message {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espace-1) var(--espace-2);
}

.entete-message h2,
.piece-message,
.texte-message {
  margin-bottom: var(--espace-1);
}

.piece-message {
  color: var(--encre-douce);
  font-family: var(--police-nombre);
  font-size: var(--taille-petite);
}

.texte-message {
  white-space: pre-wrap;
}

.contacts-message {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-1) var(--espace-2);
  margin-top: var(--espace-2);
}

.contacts-message a {
  display: inline-flex;
  align-items: center;
  min-height: var(--hauteur-tactile);
  color: var(--mousse);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.actions-message {
  margin-top: var(--espace-2);
}

.actions-message .bouton-secondaire {
  margin-top: 0;
}

@media (max-width: 30rem) {
  .carte-message {
    grid-template-columns: 5rem minmax(0, 1fr);
  }
}

.liste-simple,
.grille-photos {
  display: grid;
  gap: var(--espace-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.liste-simple {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.grille-photos {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
}

.grille-photos img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  object-fit: cover;
}

.grille-photos form + form {
  margin-top: var(--espace-1);
}

.choix {
  display: flex;
  align-items: center;
  gap: var(--espace-1);
}

.choix input {
  width: auto;
}

.espacement-haut {
  margin-top: var(--espace-3);
}

.carte-piece {
  display: grid;
  grid-template-columns: minmax(6rem, 40%) 1fr;
  gap: var(--espace-2);
  padding: var(--espace-2);
}

.famille-menthe {
  --couleur-famille: var(--famille-menthe);
}

.famille-rose {
  --couleur-famille: var(--famille-rose);
}

.famille-ble {
  --couleur-famille: var(--famille-ble);
}

.famille-ciel {
  --couleur-famille: var(--famille-ciel);
}

.famille-lilas {
  --couleur-famille: var(--famille-lilas);
}

.famille-violet {
  --couleur-famille: var(--famille-violet);
}

.carte-piece[class*="famille-"],
.bouton-vente[class*="famille-"],
.piece-a-vendre[class*="famille-"],
.vente-paiement[class*="famille-"],
.liste-simple > [class*="famille-"] {
  color: var(--encre);
  background: var(--couleur-famille);
}

.carte-piece img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  object-fit: cover;
}

.carte-piece h2,
.carte-piece p {
  margin-bottom: var(--espace-1);
}

.groupe-preparation + .groupe-preparation {
  margin-top: var(--espace-4);
}

.liste-preparation {
  display: grid;
  gap: var(--espace-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.piece-preparation {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: var(--espace-2);
  padding: var(--espace-2);
}

.piece-preparation img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  object-fit: cover;
}

.detail-preparation {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espace-2);
}

.detail-preparation h3,
.detail-preparation p {
  margin-block: 0 var(--espace-1);
}

.pastille-nouvelle {
  display: inline-block;
  font-size: var(--taille-petite);
  font-weight: 700;
}

.choix-preparation {
  display: grid;
  align-content: start;
  gap: var(--espace-1);
}

.choix-tactile {
  min-height: var(--hauteur-tactile);
  margin: 0;
  padding-inline: var(--espace-1);
  border-radius: var(--r-sm);
  cursor: pointer;
  touch-action: manipulation;
}

.choix-tactile:active {
  background: var(--papier);
}

.choix-tactile:has(input:disabled) {
  color: var(--encre-douce);
  cursor: not-allowed;
}

.envoi-en-cours {
  pointer-events: none;
  opacity: 0.7;
}

.caisse {
  padding: var(--espace-2);
  border: 1px solid var(--trait);
  border-radius: var(--r-md);
  background: var(--surface);
}

.caisse p {
  margin: 0;
  color: var(--encre-douce);
}

.caisse strong,
.carte-piece p:nth-of-type(3),
.piece-a-vendre span,
.vente-paiement > p {
  font-family: var(--police-nombre);
  font-variant-numeric: tabular-nums;
}

.caisse strong {
  font-size: clamp(1.5rem, 6vw, 2.6rem);
  line-height: 1.05;
}

.actions-vente {
  margin-bottom: var(--espace-3);
}

.grille-vente,
.grille-paiements {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: var(--espace-2);
}

.bouton-vente {
  min-height: calc(2 * var(--hauteur-tactile));
  flex-direction: column;
  color: var(--encre);
  background: var(--couleur-famille);
  font-family: var(--police-titre);
  font-size: 1.25rem;
  font-weight: 700;
  text-align: left;
}

.bouton-vente span {
  font-family: var(--police-nombre);
  font-size: var(--taille-petite);
  font-weight: 400;
}

.bouton-large {
  width: 100%;
  min-height: calc(1.5 * var(--hauteur-tactile));
}

.piece-a-vendre {
  display: grid;
  gap: var(--espace-1);
  min-height: var(--hauteur-tactile);
  padding: var(--espace-1);
  border: 1px solid var(--trait);
  border-radius: var(--r-md);
  color: var(--encre);
  background: var(--couleur-famille, var(--surface));
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}

.piece-a-vendre img,
.vente-paiement img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  object-fit: cover;
}

.piece-a-vendre:active {
  opacity: 0.72;
}

.vente-paiement {
  text-align: center;
}

.vente-paiement > img {
  max-width: var(--largeur-lecture);
}

.grille-paiements button {
  min-height: calc(1.5 * var(--hauteur-tactile));
}

.bouton-vendu {
  width: 100%;
  color: var(--sur-beurre);
  background: var(--beurre);
  border-color: var(--encre);
  border-radius: var(--r-md);
  box-shadow: 0 4px 0 var(--encre);
  font-family: var(--police-titre);
  font-size: 1.6rem;
  font-weight: 800;
  text-align: center;
}

.bouton-vendu:hover {
  color: var(--sur-beurre);
  background: var(--beurre);
  border-color: var(--encre);
}

.bouton-vendu:active {
  box-shadow: 0 1px 0 var(--encre);
  transform: translateY(3px);
}

/* Bandeau de l'écran de vente : où je vends, et la caisse du jour. */
.bandeau-vente {
  display: grid;
  gap: 4px;
  margin-block: var(--espace-2) var(--espace-3);
  padding: var(--espace-2);
  color: var(--sur-mousse);
  background: var(--mousse);
  border: 0;
  border-radius: var(--r-md);
}

.bandeau-vente h1 {
  max-width: none;
  margin: 0;
  font-family: var(--police-texte);
  font-size: var(--taille-petite);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.bandeau-vente p {
  margin: 0;
  color: inherit;
}

.bandeau-vente strong {
  font-size: clamp(1.4rem, 6.5vw, 2.6rem);
  white-space: nowrap;
}

.tampon {
  display: inline-block;
  width: fit-content;
  padding: 4px 8px;
  color: var(--sur-beurre);
  background: var(--beurre);
  border-radius: var(--r-sm);
  box-shadow: 2px 2px 0 var(--encre);
  font-family: var(--police-titre);
  font-weight: 800;
  text-transform: uppercase;
  transform: rotate(-4deg);
  animation: poser-tampon 180ms ease-out;
}

@keyframes poser-tampon {
  from {
    opacity: 0;
    transform: scale(1.25) rotate(-4deg);
  }
}

.choix-couleur {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: var(--espace-1);
  border: 0;
  padding: 0;
}

.pastille-couleur {
  display: grid;
  width: var(--hauteur-tactile);
  min-height: var(--hauteur-tactile);
  margin: 0;
  place-items: center;
  border: 2px solid var(--trait);
  border-radius: 50%;
  background: var(--couleur-famille);
  cursor: pointer;
}

.pastille-couleur:has(input:checked) {
  border-color: var(--encre);
  box-shadow: 0 0 0 3px var(--beurre);
}

.pastille-couleur input {
  position: absolute;
  width: 1px;
  min-height: 1px;
  opacity: 0;
}

.pastille-couleur span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.liste-tri {
  display: grid;
  gap: var(--espace-3);
  padding-left: var(--espace-4);
}

:focus-visible {
  outline: 3px solid var(--beurre);
  outline-offset: 3px;
}

@media (max-width: 30rem) {
  .barre-titre,
  .barre-titre button {
    width: 100%;
  }

  .piece-preparation {
    grid-template-columns: 5rem 1fr;
  }

  .detail-preparation,
  .choix-preparation {
    width: 100%;
  }

  .grille-paiements {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .tampon {
    animation: none;
  }
}


/* Texte écrit par l'IA, à relire : posé juste sous le tampon « À relire ». */
.a-relire {
  margin: var(--espace-1) 0 var(--espace-2);
  padding: var(--espace-2);
  border-left: 4px solid var(--beurre);
  border-radius: var(--r-sm);
  background: var(--papier);
}