/*
 * Intermediance Auctions : base graphique par défaut.
 * Extrait et adapté de la feuille de style du site intermediance.be
 * (D:\Dev\Web\Website INTERMEDIANCE - V3\src\styles.css).
 * Ces valeurs constituent le look & feel par défaut de la plateforme
 * (cadre commun, back-office, pages génériques). Une vente peut surcharger
 * --sale-accent et ses visuels, jamais les couleurs du cadre INTERMEDIANCE.
 */

:root {
  /* Couleurs de marque INTERMEDIANCE */
  --color-red: #ed482e;          /* accent : actions principales, points rouges, alertes */
  --color-red-dark: #d83c25;     /* survol des boutons primaires */
  --color-teal: #008089;         /* kickers, liens, états actifs, focus */
  --color-teal-deep: #126f75;    /* titres secondaires, boutons ghost, bandeaux sombres */
  --color-hero: #e0ecf0;         /* fond d'en-tête, héros, pied de page */
  --color-ink: #404041;          /* texte principal */
  --color-muted: #667074;        /* texte secondaire */
  --color-soft: #f7fafb;         /* sections alternées, fonds de champs */
  --color-line: #d9e4e7;         /* filets et bordures */
  --color-white: #fff;

  /* Accent propre à une vente (surchargé par la page de la vente) */
  --sale-accent: var(--color-teal);

  /* Typographie */
  --font-body: Manrope, Inter, "Avenir Next", "Segoe UI", Arial, Helvetica, sans-serif;

  /* Mise en page */
  --container: 1210px;
  --gutter: 24px;
  --radius: 8px;            /* cartes, images */
  --radius-field: 10px;     /* champs de formulaire */
  --radius-pill: 999px;     /* boutons, badges */
  --shadow: 0 24px 60px rgba(25, 60, 70, 0.12);
  --shadow-hover: 0 12px 24px rgba(25, 60, 70, 0.12);
  --focus-ring: 0 0 0 4px rgba(0, 128, 137, 0.16);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  background: var(--color-white);
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }

h1, h2, h3 { margin-top: 0; line-height: 1.08; letter-spacing: 0; overflow-wrap: break-word; }
h1 { font-size: clamp(2.4rem, 5vw, 4.6rem); max-width: 820px; margin-bottom: 24px; }
h2 { font-size: clamp(1.8rem, 3.6vw, 3rem); margin-bottom: 20px; }
h3 { font-size: 1.35rem; }

/* Conteneur */
.shell { width: min(var(--container), calc(100% - 2 * var(--gutter))); margin-inline: auto; }

/* Surtitre, chapeau, point rouge (signature du site) */
.kicker { color: var(--color-teal); font-size: 0.82rem; font-weight: 800; text-transform: uppercase; }
.lead { color: var(--color-teal); font-size: clamp(1.2rem, 2vw, 1.7rem); line-height: 1.38; max-width: 720px; }
.red-dot { color: var(--color-red); }

/* Boutons : pilule, flèche animée */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 14px 30px;
  border: 2px solid transparent; border-radius: var(--radius-pill);
  font: inherit; font-weight: 720; line-height: 1.1; cursor: pointer;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.button::after { content: "→"; display: inline-block; font-weight: 650; transition: transform 160ms ease; }
.button--no-arrow::after { content: none; }
.button:hover, .button:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-hover); outline: 0; }
.button:hover::after, .button:focus-visible::after { transform: translateX(4px); }
.button:active { transform: translateY(0); }
.button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.button--primary { background: var(--color-red); color: var(--color-white); }
.button--primary:hover, .button--primary:focus-visible { background: var(--color-red-dark); border-color: var(--color-red-dark); }
.button--ghost { background: var(--color-white); border-color: rgba(0, 128, 137, 0.26); color: var(--color-teal-deep); }
.button--ghost:hover, .button--ghost:focus-visible { border-color: var(--color-teal); background: rgba(224, 236, 240, 0.4); color: var(--color-ink); }
.button--light { background: var(--color-white); color: var(--color-teal-deep); }
.button-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* En-tête et pied de page (cadre INTERMEDIANCE commun à toutes les ventes) */
.site-header { position: sticky; top: 0; z-index: 10; background: var(--color-hero); }
.header-shell { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 86px; }
.brand img { width: 180px; }
.nav a { font-weight: 560; font-size: 0.96rem; color: #2f3335; padding: 0 11px; }
.nav a:hover, .nav a.is-active { color: var(--color-teal); }
.site-footer { background: var(--color-hero); border-top: 1px solid var(--color-line); padding-block: 48px 42px; }
.site-footer h2 { margin: 0; padding-bottom: 14px; border-bottom: 2px solid var(--color-teal); font-size: 1rem; color: var(--color-teal-deep); text-transform: uppercase; }
.site-footer p, .site-footer address { color: var(--color-muted); font-style: normal; }

/* Héros et fil d'Ariane */
.hero { background: var(--color-hero); padding: 70px 0 58px; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 34px; color: var(--color-muted); font-size: 0.92rem; }
.breadcrumb a { color: var(--color-teal); }

/* Sections */
.section { padding: 92px 0; }
.section--soft { background: var(--color-soft); }

/* Grille à filets (style des listes de services du site) */
.line-grid { display: grid; gap: 0; border-top: 1px solid var(--color-line); border-left: 1px solid var(--color-line); }
.line-grid > * { padding: 24px; border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); background: var(--color-white); }

/* Cartes */
.card { border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-white); overflow: hidden; }
.card--elevated { box-shadow: var(--shadow); border: 0; }

/* Badges de statut (lots) */
.badge { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 12px; border-radius: var(--radius-pill); font-size: 0.8rem; font-weight: 750; background: var(--color-hero); color: var(--color-teal-deep); }
.badge--live { background: rgba(0, 128, 137, 0.12); color: var(--color-teal-deep); }
.badge--extended { background: rgba(237, 72, 46, 0.12); color: var(--color-red); }
.badge--closed { background: #eef1f2; color: var(--color-muted); }

/* Formulaires */
.field { display: grid; gap: 7px; color: var(--color-ink); font-weight: 750; font-size: 0.94rem; }
.field em { color: var(--color-red); font-style: normal; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px;
  border: 1px solid var(--color-line); border-radius: var(--radius-field);
  font: inherit; font-weight: 600; color: var(--color-ink); background: var(--color-soft);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.field input::placeholder { color: #9aa7ab; font-weight: 500; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background: var(--color-white); border-color: var(--color-teal); box-shadow: var(--focus-ring); }
.field input:user-invalid { border-color: rgba(237, 72, 46, 0.55); }

/* Accessibilité */
.skip-link { position: absolute; top: -100px; left: 16px; z-index: 20; padding: 10px 14px; background: var(--color-white); color: var(--color-ink); }
.skip-link:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 2px; }

@media (max-width: 760px) {
  :root { --gutter: 16px; }
  .section { padding: 64px 0; }
  .brand img { width: 156px; }
}