/* RLF Deveau : le langage visuel vient du cartouche des plans de construction. Des filets, des cases, des chiffres lisibles. */
@font-face { font-family: "Barlow"; src: url("/fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/fonts/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/fonts/barlow-condensed-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --papier: #ffffff;
  --marine: #14284b;
  --acier: #55657d;
  --brume: #edf1f6;
  --signal: #c4410c;
  --vert: #0e6b4e;
  --trait: 1.5px solid var(--marine);
  --condense: "Barlow Condensed", "Arial Narrow", sans-serif;
  --texte: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--papier);
  color: var(--marine);
  font: 400 17px/1.5 var(--texte);
}
main { flex: 1; outline: none; }
#page { min-height: 100dvh; } /* le pied de page ne saute pas quand le contenu arrive */
img { display: block; max-width: 100%; height: auto; }
a { color: var(--marine); text-underline-offset: 2px; }
h1, h2, h3, p, dl, dd, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1 { font: 700 2.25rem/1.05 var(--condense); text-wrap: balance; }
h2 { font: 700 1.375rem/1.2 var(--condense); }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }

.conteneur { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 8px; top: 8px; z-index: 10; background: var(--papier); padding: 8px 12px; }
/* Le navigateur cache [hidden] avec une règle faible : une classe avec display la bat. */
[hidden] { display: none !important; }
.invisible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.aide { color: var(--acier); font-size: 0.9375rem; }
.petit { font-size: 0.875rem; }
.bon { color: var(--vert); }
.alerte { color: var(--signal); }

/* Démonstration : toutes les pages l'affichent. Effacer cette règle le jour de l'ouverture officielle. */
body::before { content: "Site de démonstration\00A0: aucune vente réelle."; padding: 4px 16px; background: var(--marine); color: var(--papier); font-size: 0.875rem; font-weight: 500; text-align: center; }

/* En-tête */
.entete { border-bottom: var(--trait); }
.entete-rang { display: flex; align-items: stretch; justify-content: space-between; min-height: 56px; }
.marque {
  display: flex; align-items: center; gap: 10px;
  font: 700 1.625rem/1 var(--condense); text-decoration: none; color: var(--marine);
}
.marque span { border-left: var(--trait); padding-left: 10px; font-weight: 600; }
.lien-compte { display: flex; align-items: center; font-weight: 500; }

/* Intro */
.intro { padding-block: 24px 16px; }
.intro p { margin-top: 8px; color: var(--acier); max-width: 60ch; }
.bande { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; padding-block: 10px; border-top: var(--trait); font-size: 0.9375rem; }
.direct { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--vert); }
.direct::before { content: ""; width: 10px; height: 10px; background: var(--vert); }
.direct.coupe { color: var(--signal); }
.direct.coupe::before { background: var(--signal); }
.prochaine { color: var(--acier); }

/* Filtres : une rangée de cases */
.filtres { display: grid; grid-template-columns: 1fr; border: var(--trait); }
.filtre { display: flex; flex-direction: column; min-width: 0; }
.filtre + .filtre { border-top: var(--trait); }
.filtre > span { padding: 6px 12px 0; font-size: 0.8125rem; color: var(--acier); }
.filtre select, .filtre input {
  width: 100%; height: 40px; padding: 0 12px;
  border: 0; border-radius: 0; background: transparent;
  color: var(--marine); font: 500 1rem var(--texte);
}
.filtre input::placeholder { color: var(--acier); opacity: 1; font-weight: 400; }
.seg { flex-direction: row; }
.seg button {
  flex: 1; min-height: 52px; border: 0; background: var(--papier); color: var(--marine);
  font: 600 1.1875rem var(--condense); cursor: pointer;
}
.seg button + button { border-left: var(--trait); }
.seg button[aria-pressed="true"] { background: var(--marine); color: var(--papier); }
.compte-articles { padding-block: 10px; color: var(--acier); font-size: 0.9375rem; min-height: 42px; }

/* Grille d'articles : un seul quadrillage, sans espaces ni ombres */
.grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--trait); border-left: var(--trait); margin-bottom: 32px; }
.carte { display: flex; flex-direction: column; min-width: 0; border-right: var(--trait); border-bottom: var(--trait); background: var(--papier); }
.carte-lien { display: block; text-decoration: none; color: inherit; flex: 1; }
.carte-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--brume); border-bottom: var(--trait); }
.carte-photo img { width: 100%; height: 100%; object-fit: cover; }
.carte h2 { padding: 10px 12px; font: 600 1rem/1.3 var(--texte); overflow-wrap: anywhere; }
.carte-lien:hover h2 { text-decoration: underline; }
.lot { font-weight: 400; color: var(--acier); white-space: nowrap; }
.vendue .carte-photo img { filter: grayscale(0.7); }

/* État : l'étiquette colle au coin de la photo */
.etiquette { position: absolute; top: 0; left: 0; padding: 3px 10px; font: 600 1.0625rem/1.25 var(--condense); }
.etiquette.neuf { background: var(--marine); color: var(--papier); }
.etiquette.usage { background: var(--papier); color: var(--marine); border-right: 2px solid var(--marine); border-bottom: 2px solid var(--marine); }
.tampon {
  position: absolute; right: 8px; bottom: 10px; padding: 2px 12px; transform: rotate(-6deg);
  background: var(--papier); color: var(--signal); border: 3px solid var(--signal);
  font: 700 1.5rem/1.1 var(--condense);
}
.tampon.grand { right: 16px; bottom: 20px; font-size: 2.5rem; border-width: 4px; }

/* Le cartouche : la signature du site */
.cartouche { display: grid; }
.cartouche > div { min-width: 0; padding: 6px 12px 8px; }
.cartouche dt { font-size: 0.8125rem; line-height: 1.3; color: var(--acier); }
.cartouche dd { font-weight: 500; overflow-wrap: anywhere; }
.cartouche dd.prix { font: 700 1.875rem/1.1 var(--condense); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cartouche dd.temps { font: 600 1.25rem/1.2 var(--condense); font-variant-numeric: tabular-nums; white-space: nowrap; }
.urgent { color: var(--signal); }
.carte-cartouche { border-top: var(--trait); }
.carte-cartouche > div + div { border-top: var(--trait); }

/* Un seul moment de mouvement : le prix s'inverse quand une mise arrive */
.eclat { animation: eclat 1.2s ease-out; }
@keyframes eclat {
  0%, 25% { background: var(--marine); color: var(--papier); }
  100% { background: transparent; }
}
.eclat dt { animation: eclat-texte 1.2s ease-out; }
@keyframes eclat-texte { 0%, 25% { color: var(--papier); } }
@media (prefers-reduced-motion: reduce) {
  .eclat, .eclat dt { animation: none; }
}

/* Fiche */
.fiche-page { padding-block: 12px 40px; }
.retour { padding-block: 4px 12px; font-size: 0.9375rem; }
.fiche { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.photo-principale { position: relative; border: var(--trait); background: var(--brume); }
.photo-principale img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.vignettes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-top: -1.5px; border-left: var(--trait); }
.vignettes button { padding: 0; border: var(--trait); border-left: 0; background: var(--brume); cursor: pointer; }
.vignettes button[aria-current="true"] { box-shadow: inset 0 -4px 0 var(--marine); }
.vignettes img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.defauts { margin-top: 20px; }
.defauts h2 { margin-bottom: 8px; }
.defauts-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); border-top: var(--trait); border-left: var(--trait); }
.defauts-grille a { border-right: var(--trait); border-bottom: var(--trait); }
.defauts-grille img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.fiche-infos { display: flex; flex-direction: column; min-width: 0; }
.fiche-infos h1 { overflow-wrap: anywhere; }
.marque-modele { margin-top: 4px; color: var(--acier); font-weight: 500; }
/* Des cases qui s'étirent : une rangée incomplète se remplit, quel que soit le nombre de renseignements. */
.fiche-cartouche, .ligne-cartouche { display: flex; flex-wrap: wrap; border-top: var(--trait); border-left: var(--trait); }
.fiche-cartouche > div, .ligne-cartouche > div { flex: 1 1 40%; border-right: var(--trait); border-bottom: var(--trait); }
.fiche-cartouche { margin-top: 14px; }
.ligne-cartouche { margin-top: 10px; }
.fiche-cartouche > .cellule-prix, .fiche-cartouche > .cellule-large { flex-basis: 100%; }
.cartouche .cellule-prix dd.prix { font-size: 3rem; }
.date { font-weight: 500; }
.bloc { margin-top: 24px; }
.bloc h2 { padding-bottom: 6px; border-bottom: var(--trait); margin-bottom: 10px; }
.description { white-space: pre-line; max-width: 70ch; overflow-wrap: anywhere; }
.conditions-courtes ul { margin-bottom: 8px; }
.conditions-courtes li { padding: 4px 0 4px 18px; position: relative; }
.conditions-courtes li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 8px; height: 1.5px; background: var(--marine); }

/* Zone de mise : collée au bas de l'écran sur téléphone */
/* Sur téléphone, la zone passe après le texte : elle reste ainsi visible pendant toute la lecture. */
#zone-action {
  order: 9; position: sticky; bottom: 0; z-index: 2;
  margin-top: 14px; margin-inline: -16px;
  background: var(--papier); border-block: var(--trait);
}
.action { padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }
.action.fini { padding-block: 14px; }
.action-titre { font: 700 1.375rem/1.2 var(--condense); }
.etat-mise { font-weight: 600; margin-bottom: 4px; }
.message { font-weight: 500; font-size: 0.9375rem; margin-bottom: 6px; }
.message:empty { display: none; }
#message-article { padding: 10px 12px; border: 2px solid currentColor; background: var(--papier); }
/* Une erreur suit l'écran : au bas d'un long formulaire sur un cell, elle reste lisible pendant qu'on corrige. */
#message-article.alerte { position: sticky; top: 8px; z-index: 3; }
.montant-libelle { display: block; font-size: 0.9375rem; font-weight: 500; margin-bottom: 4px; }
.pas { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px auto; border: var(--trait); }
.pas-bouton { min-height: 52px; border: 0; background: var(--brume); color: var(--marine); font: 600 1.625rem var(--texte); cursor: pointer; touch-action: manipulation; }
.pas-champ { display: flex; align-items: center; gap: 4px; padding-inline: 10px; border-inline: var(--trait); font: 700 1.5rem var(--condense); }
.pas-champ input { width: 100%; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--marine); font: 700 1.625rem var(--condense); font-variant-numeric: tabular-nums; text-align: right; border-radius: 0; }
.pas-champ input:focus { outline: none; }
.pas-champ:focus-within { outline: 3px solid var(--signal); outline-offset: -3px; }
.pas .miser-bouton { border: 0; border-left: var(--trait); padding-inline: 18px; }
.miser .aide { display: none; margin-top: 6px; }
.achat { width: 100%; margin-top: 10px; }

/* Boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 8px 22px;
  border: var(--trait); border-radius: 0; background: var(--marine); color: var(--papier);
  font: 600 1.25rem/1.15 var(--condense); text-decoration: none; cursor: pointer; touch-action: manipulation;
}
.bouton:hover { background: #0d1c36; }
.bouton.secondaire { background: var(--papier); color: var(--marine); }
.bouton.secondaire:hover { background: var(--brume); }
.bouton.danger { background: var(--papier); color: var(--signal); border-color: var(--signal); }
.bouton.petit { min-height: 44px; padding: 6px 14px; font-size: 1.0625rem; }
.bouton:disabled { opacity: 0.55; cursor: default; }

/* Historique */
.historique li { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding-block: 8px; border-bottom: 1px solid var(--brume); }
.historique .montant { font: 700 1.25rem/1.2 var(--condense); font-variant-numeric: tabular-nums; text-align: right; }
.historique time { grid-column: 1 / -1; font-size: 0.875rem; color: var(--acier); }
.historique .tete span:first-child { font-weight: 600; }

/* Boîtes de dialogue */
dialog {
  width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto;
  padding: 20px; border: var(--trait); border-radius: 0; background: var(--papier); color: var(--marine);
}
dialog::backdrop { background: rgba(20, 40, 75, 0.55); }
dialog h2 { font-size: 1.75rem; margin-bottom: 8px; }
dialog p { margin-bottom: 10px; }
.dialogue-boutons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dialogue-boutons .bouton { flex: 1 1 auto; }
.montant-confirme { font: 700 3rem/1 var(--condense); font-variant-numeric: tabular-nums; }
.confirme-titre { font-weight: 600; }

/* Formulaires */
.champ { display: block; margin-bottom: 12px; font-weight: 500; font-size: 0.9375rem; }
.champ > input, .champ > select, .champ > textarea {
  display: block; width: 100%; min-height: 48px; margin-top: 4px; padding: 8px 12px;
  border: var(--trait); border-radius: 0; background: var(--papier); color: var(--marine);
  font: 400 1rem var(--texte);
}
input:disabled { background: var(--brume); color: var(--acier); }
textarea { min-height: 120px; resize: vertical; }
.case { display: grid; grid-template-columns: 26px 1fr; gap: 6px; align-items: start; margin-bottom: 12px; font-size: 0.9375rem; }
.case input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--marine); }

/* Compte */
.compte { padding-block: 20px 40px; max-width: 760px; }
.ma-mise { border: var(--trait); margin-bottom: 12px; }
.ma-mise-tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding: 10px 12px; font-weight: 600; }
.ma-mise .cartouche { display: flex; flex-wrap: wrap; overflow: hidden; border-top: var(--trait); }
.ma-mise .cartouche > div { flex: 1 1 110px; margin: -1.5px 0 0 -1.5px; border-top: var(--trait); border-left: var(--trait); }
.instructions { padding: 10px 12px; border-top: var(--trait); font-size: 0.9375rem; }
.pastille { padding: 0 8px; border: 2px solid currentColor; font: 600 1.0625rem/1.4 var(--condense); white-space: nowrap; }
.formulaire-compte { max-width: 480px; }

/* Vide et pied */
.vide { padding-block: 40px; max-width: 60ch; }
.vide h1 { margin-bottom: 8px; }
.vide .bouton { margin-top: 14px; }
.pied { margin-top: 24px; border-top: var(--trait); font-size: 0.9375rem; color: var(--acier); }
.pied-rang { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-block: 14px calc(14px + env(safe-area-inset-bottom)); }
.pied-liens { display: inline-flex; gap: 16px; }

/* Pages de texte (conditions, confidentialité) */
.texte-legal { max-width: 760px; padding-block: 24px 40px; }
.texte-legal h1 { margin-bottom: 8px; }
.texte-legal h2 { margin: 22px 0 6px; }
.texte-legal p, .texte-legal li { max-width: 70ch; }
.texte-legal ul { list-style: disc; padding-left: 20px; }
.texte-legal li { margin-bottom: 4px; }
.texte-legal p { margin-bottom: 10px; }

/* Très petit téléphone : une colonne */
@media (max-width: 339px) {
  .grille { grid-template-columns: minmax(0, 1fr); }
  .pas { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .pas .miser-bouton { grid-column: 1 / -1; border-left: 0; border-top: var(--trait); }
}

@media (min-width: 720px) {
  h1 { font-size: 3rem; }
  .intro { padding-block: 36px 20px; }
  .filtres { grid-template-columns: minmax(240px, 1fr) minmax(220px, 1fr) minmax(280px, 1.4fr); }
  .filtre + .filtre { border-top: 0; border-left: var(--trait); }
  .grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .carte-cartouche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carte-cartouche > div + div { border-top: 0; border-left: var(--trait); }
  .fiche-page { padding-block: 16px 56px; }
  #zone-action { position: static; order: 0; margin-top: 0; margin-inline: 0; border: var(--trait); border-top: 0; }
  .miser .aide { display: block; }
  .fiche-infos h1 { font-size: 2.5rem; }
}

@media (min-width: 1040px) {
  .grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fiche { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; align-items: start; }
  .fiche-photos { position: sticky; top: 12px; }
  .fiche-cartouche > div { flex-basis: 30%; }
}

/* Admin */
.bouton-texte { border: 0; background: none; color: var(--marine); font: 500 1rem var(--texte); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.large { width: 100%; }
.connexion { max-width: 440px; padding-block: 28px; }
.connexion h1 { margin-bottom: 16px; }
.admin { padding-block: 12px 56px; }
.onglets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--trait); border-left: var(--trait); margin-bottom: 18px; }
.onglets button {
  min-height: 52px; padding: 4px 6px; border: 0; border-right: var(--trait); border-bottom: var(--trait);
  background: var(--papier); color: var(--marine); font: 600 1.125rem/1.15 var(--condense); cursor: pointer;
}
.onglets button[aria-selected="true"] { background: var(--marine); color: var(--papier); }
.nombre { font-weight: 500; opacity: 0.8; }
#form-article { max-width: 680px; }
#form-article h1 { font-size: 2.25rem; margin-bottom: 12px; }
.etape { margin-bottom: 18px; }
.etape h2 { margin-bottom: 8px; }
.boutons-photo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.boutons-photo .bouton { position: relative; text-align: center; }
.boutons-photo .bouton:focus-within { outline: 3px solid var(--signal); outline-offset: 2px; }
.photos-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 10px; }
.photos-admin img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--trait); background: var(--brume); }
.photos-admin p { margin-top: 4px; }
.photos-admin .case { margin: 6px 0; }
.photos-admin .bouton { width: 100%; }
.choix { margin: 0 0 16px; padding: 0; border: 0; }
.choix-rang { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--trait); border-left: var(--trait); }
.choix legend { padding: 0 0 4px; font-weight: 500; font-size: 0.9375rem; }
.choix label { display: block; cursor: pointer; }
.choix span {
  display: flex; align-items: center; justify-content: center; min-height: 60px; padding: 6px; text-align: center;
  border-right: var(--trait); border-bottom: var(--trait); font: 600 1.375rem/1.1 var(--condense);
}
.choix.quatre span { font-size: 1.1875rem; min-height: 52px; }
.choix input:checked + span { background: var(--marine); color: var(--papier); }
.choix input:focus-visible + span { outline: 3px solid var(--signal); outline-offset: -3px; }
.deux-champs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 12px; }
details { margin-bottom: 14px; border: var(--trait); padding: 10px 12px; }
summary { font-weight: 500; cursor: pointer; min-height: 28px; }
details[open] summary { margin-bottom: 10px; }
#progression { min-height: 1.5em; margin-bottom: 8px; }
.ligne-boutons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lignes { border-top: var(--trait); }
.ligne { padding-block: 14px; border-bottom: var(--trait); }
.ligne-tete { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; }
.ligne-photo { width: 96px; aspect-ratio: 4 / 3; object-fit: cover; border: var(--trait); background: var(--brume); }
.ligne-titre { font-weight: 600; overflow-wrap: anywhere; }
.acheteur { margin-top: 10px; }
.contacts { display: flex; flex-wrap: wrap; gap: 2px 14px; overflow-wrap: anywhere; }
.coches { display: flex; gap: 24px; margin-top: 10px; }
.coches .case { margin: 0; font-size: 1.0625rem; font-weight: 500; }
.relance { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin-top: 12px; }
.relance .champ { margin: 0; flex: 1 1 200px; }
.relance .bouton { min-height: 48px; }
.bloc-mises { margin-top: 10px; border: var(--trait); }
.bloc-mises:is(p) { padding: 10px 12px; }
.bloc-mises li { padding: 10px 12px; }
.bloc-mises li + li { border-top: var(--trait); }
.mise-tete { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; }
.mise-tete strong { font: 700 1.375rem var(--condense); }
.mise-tete time { color: var(--acier); font-size: 0.875rem; }
.annulee { color: var(--acier); }
.annulee .mise-tete strong { text-decoration: line-through; }
.formulaire-etroit { max-width: 520px; }

@media (min-width: 720px) {
  .onglets { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .deux-champs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choix.quatre .choix-rang { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ligne-tete { grid-template-columns: 140px minmax(0, 1fr); }
  .ligne-cartouche > div { flex-basis: 20%; }
  .ligne-photo { width: 140px; }
}