@import url("fonts.css");

/* =============================================================================
   Haras de l'Être — page des ventes de yearlings, Deauville 2026
   DOLLAR / GG — 25/08/2026
   Palette relevée au pixel sur la maquette validée par GG.
   Page autonome : aucune dépendance externe, polices servies en local.
   ============================================================================= */

:root {
  color-scheme: light only;            /* anti dark mode — convention DOLLAR */

  /* ── Couleurs ── */
  --nuit:        #011026;
  --nuit-2:      #04162f;
  --nuit-3:      #0a1f3d;
  --clair:       #e4e4e5;
  --clair-2:     #efeff0;
  --blanc:       #ffffff;
  --bleu:        #252f70;
  --bleu-vif:    #3b3d7f;
  --bleu-clair:  #8f96c4;
  --or:          #b99a5b;
  --or-clair:    #d4bd8c;
  --texte:       #14182a;
  --texte-doux:  #5d6274;
  --ligne:       #cdcdd0;
  --ligne-nuit:  rgba(255, 255, 255, .14);

  /* ── Typo ── */
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* ── Mesures ── */
  --large:  1780px;
  --etroit: 1120px;
  --entete: 78px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: var(--entete); }

body {
  background: var(--blanc);
  color: var(--texte);
  font: 400 16px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }

/* Le design impose ses couleurs — on neutralise le forçage du navigateur. */
@media (prefers-color-scheme: dark) {
  body { background: var(--blanc) !important; color: var(--texte) !important; }
}

/* ── Utilitaires ─────────────────────────────────────────────────────────── */
.enveloppe { max-width: var(--large); margin: 0 auto; padding: 0 clamp(20px, 4vw, 76px); }
.enveloppe--etroit { max-width: var(--etroit); }

.surtitre {
  font-family: var(--sans);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--bleu-clair);
}
.section-nuit .surtitre { color: var(--bleu-clair); }
.section-clair .surtitre { color: var(--bleu); }

.titre-section {
  font-family: var(--serif);
  font-variant-numeric: lining-nums;
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 500; line-height: 1.15;
  letter-spacing: .06em; text-transform: uppercase;
}
.filet {
  width: 54px; height: 2px; background: var(--or);
  margin: 22px 0; border: 0;
}
.section-clair .filet { background: var(--bleu); }

.section-nuit  { background: var(--nuit);  color: var(--blanc); }
.section-clair { background: var(--clair); color: var(--texte); }

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.bouton {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--bleu-vif); color: var(--blanc);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 15px 26px; border: 1px solid var(--bleu-vif);
  cursor: pointer; transition: background .18s, border-color .18s, transform .18s;
}
.bouton:hover { background: var(--bleu); border-color: var(--bleu); }
.bouton .fleche { transition: transform .18s; }
.bouton:hover .fleche { transform: translateX(4px); }

.bouton--fantome {
  background: transparent; color: var(--blanc);
  border-color: rgba(255, 255, 255, .38);
}
.bouton--fantome:hover { background: rgba(255, 255, 255, .1); border-color: var(--blanc); }

/* =============================================================================
   EN-TÊTE
   ============================================================================= */
.entete {
  position: fixed; inset: 0 0 auto; z-index: 90;
  height: var(--entete);
  display: flex; align-items: center;
  transition: background .3s, box-shadow .3s, height .3s;
}
.entete.figee {
  background: rgba(1, 16, 38, .96);
  box-shadow: 0 1px 0 var(--ligne-nuit);
  backdrop-filter: saturate(150%) blur(10px);
  height: 66px;
}
.entete .enveloppe {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.marque { display: flex; align-items: center; gap: 14px; color: var(--blanc); }
.marque__nom { font-family: var(--serif); font-size: 30px; line-height: 1.05; letter-spacing: .02em; }

.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  color: var(--blanc); font-size: 11.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color .18s, opacity .18s;
  opacity: .88;
}
.nav a:hover, .nav a.actif { opacity: 1; border-bottom-color: var(--or); }

.langue {
  display: flex; align-items: center; gap: 2px;
  border: 1px solid rgba(255, 255, 255, .3); padding: 3px;
}
.langue button {
  background: none; border: 0; cursor: pointer; color: var(--blanc);
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
  padding: 5px 10px; opacity: .6; transition: background .16s, opacity .16s;
}
.langue button[aria-pressed="true"] { background: var(--bleu-vif); opacity: 1; }

.burger { display: none; background: none; border: 0; cursor: pointer; padding: 10px; }
.burger span {
  display: block; width: 24px; height: 2px; background: var(--blanc);
  transition: transform .2s, opacity .2s;
}
.burger span + span { margin-top: 6px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* =============================================================================
   BANNIÈRE
   ============================================================================= */
.banniere {
  position: relative; min-height: 100svh;
  display: flex; align-items: center;
  background: var(--nuit); color: var(--blanc); overflow: hidden;
}
.banniere__fond { position: absolute; inset: 0; }
.banniere__fond img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 42%; }
.banniere__voile {
  position: absolute; inset: 0;
  background:
    /* ancre le menu : sans ça il passe sur le ciel clair et devient illisible */
    linear-gradient(to bottom, rgba(1, 16, 38, .86) 0, rgba(1, 16, 38, .28) 120px, transparent 230px),
    /* le voile s'efface vers la droite : l'image s'y montre presque nue */
    linear-gradient(100deg, var(--nuit) 0%, rgba(1, 16, 38, .88) 26%, rgba(1, 16, 38, .3) 54%, rgba(1, 16, 38, .08) 100%),
    linear-gradient(to top, rgba(1, 16, 38, .72), transparent 38%);
}
.banniere .enveloppe {
  position: relative; z-index: 2; padding-top: var(--entete);
  /* width:100% est indispensable : la bannière est un conteneur flex, sans lui
     l'enveloppe se dimensionne sur son contenu et le texte se recentre. */
  width: 100%;
}
.banniere__texte { max-width: 610px; }
.banniere h1 {
  font-family: var(--serif); font-weight: 400; font-variant-numeric: lining-nums;
  font-size: clamp(48px, 7.4vw, 92px); line-height: 1.02; letter-spacing: -.01em;
  margin-top: 20px;
}
.banniere__chapo { font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, .84); max-width: 430px; }
.banniere__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.banniere__compte {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: stretch;
  background: rgba(1, 16, 38, .84);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--ligne-nuit); border-left: 1px solid var(--ligne-nuit);
}
.banniere__compte div { padding: 18px 30px; text-align: center; }
.banniere__compte div + div { border-left: 1px solid var(--ligne-nuit); }
.banniere__compte b {
  display: block; font-family: var(--serif); font-size: 34px; font-weight: 500; line-height: 1;
  font-variant-numeric: lining-nums;
}
.banniere__compte span {
  display: block; margin-top: 6px;
  font-size: 10px; letter-spacing: .17em; text-transform: uppercase; color: var(--bleu-clair);
}

/* =============================================================================
   BANDEAU SERVICES
   ============================================================================= */
.services { padding: 74px 0; }
.services__grille {
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.services__item { padding: 12px 34px; text-align: center; }
.services__item + .services__item { border-left: 1px solid var(--ligne); }
.services__item h3 {
  font-family: var(--serif); font-size: 17px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--bleu);
  line-height: 1.35; margin-bottom: 14px;
}
.services__item p { font-size: 14.5px; line-height: 1.6; color: var(--texte-doux); }

/* =============================================================================
   VENTES — le cœur de la page
   ============================================================================= */
.ventes { padding: 88px 0 96px; }
.ventes__tete {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; flex-wrap: wrap; margin-bottom: 38px;
}
.ventes__tete h2 { color: var(--blanc); }
.ventes__lieu {
  margin-top: 14px; font-size: 13px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--or-clair);
}
.ventes__chapo { margin-top: 18px; max-width: 560px; color: rgba(255, 255, 255, .8); font-size: 15.5px; }

.horaires { display: flex; gap: 0; flex-wrap: wrap; }
.horaires div {
  padding: 14px 22px; border: 1px solid var(--ligne-nuit); margin-left: -1px;
  min-width: 172px;
}
.horaires b {
  display: block; font-family: var(--serif); font-size: 20px; font-weight: 500; letter-spacing: .04em;
  font-variant-numeric: lining-nums;
}
.horaires span { display: block; margin-top: 4px; font-size: 12px; color: var(--bleu-clair); }

/* ── Barre de filtres ── */
.filtres {
  position: sticky; top: 66px; z-index: 40;
  background: rgba(1, 16, 38, .97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--ligne-nuit); border-bottom: 1px solid var(--ligne-nuit);
  padding: 14px 0; margin-bottom: 34px;
}
.filtres__ligne {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.groupe-filtre { display: flex; align-items: center; gap: 0; }
.groupe-filtre button {
  background: transparent; border: 1px solid var(--ligne-nuit); color: rgba(255, 255, 255, .78);
  font-size: 11px; font-weight: 500; letter-spacing: .11em; text-transform: uppercase;
  padding: 9px 15px; margin-left: -1px; cursor: pointer;
  transition: background .16s, color .16s, border-color .16s;
  white-space: nowrap;
}
.groupe-filtre button:hover { color: var(--blanc); border-color: rgba(255, 255, 255, .34); }
.groupe-filtre button[aria-pressed="true"] {
  background: var(--bleu-vif); border-color: var(--bleu-vif); color: var(--blanc); position: relative; z-index: 1;
}

.recherche { position: relative; flex: 1 1 210px; max-width: 300px; }
.recherche input {
  width: 100%; background: rgba(255, 255, 255, .07);
  border: 1px solid var(--ligne-nuit); color: var(--blanc);
  padding: 9px 34px 9px 14px; font-size: 13.5px;
}
.recherche input::placeholder { color: rgba(255, 255, 255, .42); }
.recherche input:focus { outline: 1px solid var(--bleu-clair); outline-offset: -1px; background: rgba(255, 255, 255, .1); }
.recherche button {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: rgba(255, 255, 255, .5); cursor: pointer;
  padding: 6px 8px; font-size: 15px; line-height: 1; display: none;
}
.recherche.rempli button { display: block; }

.compteur-lots {
  margin-left: auto; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bleu-clair); white-space: nowrap;
}
.compteur-lots strong { color: var(--blanc); font-weight: 600; }

.vue-bascule { display: flex; }
.vue-bascule button {
  background: transparent; border: 1px solid var(--ligne-nuit); color: rgba(255, 255, 255, .7);
  padding: 8px 11px; cursor: pointer; margin-left: -1px; display: grid; place-items: center;
  transition: background .16s, color .16s;
}
.vue-bascule button svg { width: 15px; height: 15px; stroke: currentColor; fill: none; }
.vue-bascule button[aria-pressed="true"] { background: var(--bleu-vif); border-color: var(--bleu-vif); color: var(--blanc); }

/* ── Grille de cartes ── */
.grille-lots {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 22px;
}
.carte {
  background: var(--nuit-2); border: 1px solid var(--ligne-nuit);
  display: flex; flex-direction: column;
  transition: border-color .2s, transform .2s;
}
.carte:hover { border-color: rgba(255, 255, 255, .3); transform: translateY(-3px); }

.carte__visuel { position: relative; aspect-ratio: 4 / 3; background: #000; overflow: hidden; cursor: pointer; }
.carte__visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.carte:hover .carte__visuel img { transform: scale(1.045); }
/* Numéro de lot et jour de passage en bas de la photo : les chevaux d'Arqana
   sont cadrés de profil, tête vers le haut. Posés en haut, ces deux repères
   mordaient systématiquement sur la tête. En bas, ils ne couvrent que le sol. */
.carte__bandeau {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 26px 14px 13px;
  background: linear-gradient(to top, rgba(1, 16, 38, .95), rgba(1, 16, 38, .68) 55%, transparent);
  pointer-events: none;
}
.carte__badge {
  color: var(--blanc);
  font-size: 11.5px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase;
}
.carte__jour {
  color: var(--or-clair);
  font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
.carte__loupe {
  position: absolute; right: 10px; top: 10px; z-index: 3;
  width: 32px; height: 32px; display: grid; place-items: center;
  background: rgba(1, 16, 38, .7); border: 1px solid var(--ligne-nuit);
  opacity: 0; transition: opacity .2s;
}
.carte:hover .carte__loupe { opacity: 1; }
.carte__loupe svg { width: 15px; height: 15px; stroke: var(--blanc); fill: none; }

.carte__corps { padding: 16px 18px 0; flex: 1; }
.carte__sexe {
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bleu-clair);
}
.carte__nom {
  font-family: var(--serif); font-size: 24px; font-weight: 500; line-height: 1.14;
  font-variant-numeric: lining-nums;
  color: var(--blanc); margin: 3px 0 12px; letter-spacing: .01em;
}
.carte__origines { font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .68); }
.carte__origines b { color: rgba(255, 255, 255, .92); font-weight: 500; }
.carte__origines span { color: rgba(255, 255, 255, .45); }
.carte__maj {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ligne-nuit);
  font-size: 12px; line-height: 1.5; color: var(--or-clair);
}

.carte__actions { display: flex; margin-top: 16px; border-top: 1px solid var(--ligne-nuit); }
.carte__actions a, .carte__actions button {
  flex: 1; background: transparent; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 13px 6px; color: rgba(255, 255, 255, .78);
  font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  transition: background .16s, color .16s;
}
.carte__actions a + a, .carte__actions a + button, .carte__actions button + a { border-left: 1px solid var(--ligne-nuit); }
.carte__actions a:hover, .carte__actions button:hover { background: rgba(255, 255, 255, .08); color: var(--blanc); }
.carte__actions svg { width: 14px; height: 14px; stroke: currentColor; fill: none; flex: 0 0 14px; }

/* ── Vue tableau ── */
.tableau-enveloppe { overflow-x: auto; border: 1px solid var(--ligne-nuit); }
table.lots { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 1040px; }
table.lots thead th {
  background: var(--nuit-3); color: var(--blanc); text-align: left;
  font-variant-numeric: lining-nums;
  font-size: 10.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  padding: 12px 12px 10px; border-bottom: 1px solid var(--ligne-nuit); white-space: nowrap;
}
table.lots thead th.triable { cursor: pointer; user-select: none; }
table.lots thead th.triable:hover { color: var(--or-clair); }
table.lots thead th .fleche-tri { opacity: .35; margin-left: 5px; font-size: 9px; }
table.lots thead th[data-tri-actif] .fleche-tri { opacity: 1; color: var(--or-clair); }
table.lots thead tr.ligne-filtres th { padding: 7px 8px; }
table.lots thead input, table.lots thead select {
  width: 100%; min-width: 78px;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--ligne-nuit);
  color: var(--blanc); padding: 6px 8px; font-size: 12px; font-weight: 400;
  letter-spacing: 0; text-transform: none;
}
table.lots thead input::placeholder { color: rgba(255, 255, 255, .35); }
table.lots thead input:focus, table.lots thead select:focus { outline: 1px solid var(--bleu-clair); outline-offset: -1px; }
table.lots thead select option { background: var(--nuit-2); color: var(--blanc); }

table.lots tbody td {
  padding: 8px 10px; border-bottom: 1px solid var(--ligne-nuit);
  color: rgba(255, 255, 255, .82); vertical-align: middle;
}
table.lots tbody tr:hover td { background: rgba(255, 255, 255, .05); }
table.lots tbody tr:last-child td { border-bottom: 0; }
td.col-lot { font-weight: 600; color: var(--blanc); white-space: nowrap; }
td.col-nom a { font-family: var(--serif); font-size: 16.5px; color: var(--blanc); letter-spacing: .01em; }
td.col-jour, td.col-box, td.col-ne { white-space: nowrap; }
td.col-nom a:hover { color: var(--or-clair); }
td.col-vignette { width: 62px; padding: 6px 12px; }
td.col-vignette img { width: 62px; height: 46px; object-fit: cover; cursor: pointer; }
td.col-actions { white-space: nowrap; }
td.col-actions a, td.col-actions button {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid var(--ligne-nuit); background: transparent; cursor: pointer;
  color: rgba(255, 255, 255, .75); margin-right: 4px; transition: background .16s, color .16s;
}
td.col-actions a:hover, td.col-actions button:hover { background: var(--bleu-vif); color: var(--blanc); border-color: var(--bleu-vif); }
td.col-actions svg { width: 13px; height: 13px; stroke: currentColor; fill: none; }

.aucun-resultat {
  padding: 60px 20px; text-align: center; color: rgba(255, 255, 255, .55);
  border: 1px dashed var(--ligne-nuit);
}
.aucun-resultat b { display: block; font-family: var(--serif); font-size: 24px; color: var(--blanc); margin-bottom: 8px; }

.ventes__pied {
  margin-top: 40px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: center;
}

/* =============================================================================
   INSTALLATIONS
   ============================================================================= */
.installations { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.installations__image { min-height: 460px; background: var(--nuit-2); }
.installations__image img { width: 100%; height: 100%; object-fit: cover; }
.installations__texte {
  background: var(--clair); display: flex; flex-direction: column; justify-content: center;
  padding: 74px 64px;
}
.installations__texte h2 { color: var(--bleu); }
.installations__texte p { color: var(--texte-doux); max-width: 480px; font-size: 15.5px; }

.chiffres { display: flex; gap: 0; margin-top: 40px; flex-wrap: wrap; }
.chiffres div { padding-right: 40px; }
.chiffres div + div { padding-left: 40px; border-left: 1px solid var(--ligne); }
.chiffres b { display: block; font-family: var(--serif); font-size: 42px; font-weight: 500; line-height: 1; color: var(--texte);
  font-variant-numeric: lining-nums; }
.chiffres span {
  display: block; margin-top: 6px;
  font-size: 10.5px; letter-spacing: .17em; text-transform: uppercase; color: var(--texte-doux);
}

/* =============================================================================
   APPROCHE
   ============================================================================= */
.approche { padding: 92px 0; }
.approche__grille { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 64px; align-items: start; }
.approche h2 { color: var(--blanc); }
.approche__corps p { color: rgba(255, 255, 255, .78); font-size: 16px; }
.approche__corps p + p { margin-top: 20px; }
.approche__corps p:first-child::first-letter {
  font-family: var(--serif); font-size: 58px; line-height: .82; float: left;
  padding: 6px 14px 0 0; color: var(--or-clair);
}

/* =============================================================================
   CITATION
   ============================================================================= */
.citation { padding: 78px 0; text-align: center; position: relative; overflow: hidden; }
.citation blockquote {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(26px, 3.6vw, 42px); line-height: 1.28; color: var(--blanc);
  position: relative; z-index: 1;
}
.citation blockquote::before, .citation blockquote::after {
  content: "\201C"; font-family: var(--serif); font-style: normal;
  color: var(--or); font-size: 1.4em; line-height: 0; vertical-align: -.28em; margin: 0 .12em;
}
.citation blockquote::after { content: "\201D"; }
.citation cite {
  display: block; margin-top: 22px; font-style: normal;
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--bleu-clair);
}

/* =============================================================================
   CONTACT
   ============================================================================= */
.contact { padding: 84px 0; text-align: center; position: relative; overflow: hidden; }
.contact h2 { color: var(--bleu); }
.contact p { color: var(--texte-doux); max-width: 560px; margin: 18px auto 32px; }
.contact .filet { margin-left: auto; margin-right: auto; }
.contact__liens { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.contact__liens .bouton--clair {
  background: transparent; color: var(--bleu); border-color: var(--ligne);
}
.contact__liens .bouton--clair:hover { background: var(--bleu); color: var(--blanc); border-color: var(--bleu); }

/* =============================================================================
   PIED DE PAGE
   ============================================================================= */
.pied { padding: 42px 0; font-size: 13.5px; }
.pied .enveloppe {
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.pied__coord { color: rgba(255, 255, 255, .72); line-height: 1.75; }
.pied__coord a:hover { color: var(--or-clair); }
.pied__reseaux { display: flex; gap: 10px; }
.pied__reseaux a {
  width: 38px; height: 38px; border: 1px solid var(--ligne-nuit); border-radius: 50%;
  display: grid; place-items: center; transition: background .18s, border-color .18s;
}
.pied__reseaux a:hover { background: var(--bleu-vif); border-color: var(--bleu-vif); }
.pied__reseaux svg { width: 16px; height: 16px; fill: var(--blanc); }
.pied__mentions {
  border-top: 1px solid var(--ligne-nuit); margin-top: 34px; padding-top: 22px;
  font-size: 11.5px; color: rgba(255, 255, 255, .42);
}
.pied__mentions a { border-bottom: 1px solid rgba(255, 255, 255, .2); transition: color .18s, border-color .18s; }
.pied__mentions a:hover { color: var(--or-clair); border-bottom-color: var(--or-clair); }

/* =============================================================================
   LIGHTBOX
   ============================================================================= */
.boite {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(1, 8, 20, .95); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.boite.ouverte { display: flex; }
.boite__cadre { position: relative; max-width: 1160px; width: 100%; max-height: 100%; display: flex; flex-direction: column; }
.boite__tete {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  color: var(--blanc); margin-bottom: 14px; padding-right: 54px;
}
.boite__tete .lot {
  background: var(--bleu-vif); font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; padding: 6px 12px;
}
.boite__tete h3 { font-family: var(--serif); font-size: 30px; font-weight: 500; letter-spacing: .02em; }
.boite__tete .origines { font-size: 13px; color: rgba(255, 255, 255, .65); }

.boite__media {
  flex: 1; min-height: 0; display: grid; place-items: center;
  background: #000; border: 1px solid var(--ligne-nuit);
}
.boite__media img, .boite__media video { max-width: 100%; max-height: calc(100svh - 240px); object-fit: contain; }
.boite__media iframe { width: 100%; height: calc(100svh - 240px); border: 0; background: var(--blanc); }
.boite__chargement { color: rgba(255, 255, 255, .5); font-size: 13px; padding: 60px; }

.boite__onglets { display: flex; margin-top: 14px; flex-wrap: wrap; }
.boite__onglets button {
  background: transparent; border: 1px solid var(--ligne-nuit); color: rgba(255, 255, 255, .75);
  font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  padding: 11px 20px; margin-left: -1px; cursor: pointer; transition: background .16s, color .16s;
  display: flex; align-items: center; gap: 8px;
}
.boite__onglets button svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
.boite__onglets button:hover { color: var(--blanc); }
.boite__onglets button[aria-pressed="true"] { background: var(--bleu-vif); border-color: var(--bleu-vif); color: var(--blanc); }
.boite__onglets .separateur { flex: 1; }
.boite__onglets a.externe {
  border: 1px solid var(--ligne-nuit); color: rgba(255, 255, 255, .75);
  font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  padding: 11px 20px; display: flex; align-items: center; gap: 8px; transition: background .16s, color .16s;
}
.boite__onglets a.externe:hover { background: rgba(255, 255, 255, .1); color: var(--blanc); }
.boite__onglets a.externe svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }

.boite__fermer, .boite__nav {
  position: absolute; background: rgba(255, 255, 255, .1); border: 1px solid var(--ligne-nuit);
  color: var(--blanc); cursor: pointer; display: grid; place-items: center;
  width: 44px; height: 44px; transition: background .16s;
}
.boite__fermer:hover, .boite__nav:hover { background: var(--bleu-vif); }
.boite__fermer { top: 0; right: 0; }
.boite__nav { top: 50%; transform: translateY(-50%); }
.boite__nav.prec { left: -58px; }
.boite__nav.suiv { right: -58px; }
.boite__fermer svg, .boite__nav svg { width: 17px; height: 17px; stroke: currentColor; fill: none; }

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 1180px) {
  .boite__nav.prec { left: 4px; }
  .boite__nav.suiv { right: 4px; }
}

@media (max-width: 1024px) {
  .services__grille { grid-template-columns: repeat(2, 1fr); gap: 44px 0; }
  .services__item:nth-child(3) { border-left: 0; }
  .installations { grid-template-columns: 1fr; }
  .installations__image { min-height: 320px; }
  .installations__texte { padding: 56px 32px; }
  .approche__grille { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 860px) {
  :root { --entete: 66px; }
  .burger { display: block; }
  .nav {
    position: fixed; inset: var(--entete) 0 auto; flex-direction: column; gap: 0;
    background: var(--nuit); box-shadow: 0 18px 30px rgba(0,0,0,.35);
    padding: 10px 0 22px; display: none;
    border-bottom: 1px solid var(--ligne-nuit);
  }
  .nav.ouverte { display: flex; }
  .nav a { padding: 14px 20px; width: 100%; text-align: center; border-bottom: 0; }
  .nav a:hover, .nav a.actif { border-bottom: 0; color: var(--or-clair); }
  .marque__nom { font-size: 24px; }
  .banniere { min-height: 92svh; }
  .banniere__fond img { object-position: 74% 40%; }
  .banniere__compte { position: static; margin-top: 40px; border-left: 0; }
  .banniere__compte div { flex: 1; padding: 14px 10px; }
  .banniere__compte b { font-size: 26px; }
  .filtres { top: 66px; }
  .compteur-lots { margin-left: 0; width: 100%; }
  .grille-lots { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
  .chiffres div { padding-right: 24px; }
  .chiffres div + div { padding-left: 24px; }
  .chiffres b { font-size: 34px; }
  .boite { padding: 12px; }
  .boite__tete h3 { font-size: 22px; }
  .boite__media img, .boite__media video, .boite__media iframe { max-height: calc(100svh - 280px); }
}

@media (max-width: 560px) {
  .services__grille { grid-template-columns: 1fr; }
  .services__item { border-left: 0 !important; padding: 0 10px; }
  .services__item + .services__item { padding-top: 34px; border-top: 1px solid var(--ligne); }
  .grille-lots { grid-template-columns: 1fr; }
  .ventes__tete { flex-direction: column; align-items: flex-start; }
  .horaires div { min-width: 0; flex: 1 1 100%; }
  .pied .enveloppe { flex-direction: column; align-items: flex-start; }
}

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

/* ── Impression : la liste des lots, propre, sur fond blanc ── */
@media print {
  .entete, .filtres, .banniere__actions, .ventes__pied, .contact__liens, .boite, .vue-bascule { display: none !important; }
  body, .section-nuit { background: #fff !important; color: #000 !important; }
  .carte, table.lots tbody td { border-color: #bbb !important; }
  .carte__nom, td.col-nom a, .titre-section { color: #000 !important; }
  .grille-lots { grid-template-columns: repeat(3, 1fr) !important; }
}

/* =============================================================================
   BILINGUE — les textes de contenu vivent en double dans le HTML,
   une seule langue est affichée à la fois. Aucun JS pour le contenu.
   ============================================================================= */
html[data-langue="fr"] [data-l="en"],
html[data-langue="en"] [data-l="fr"] { display: none !important; }

/* Carte dont la photo Arqana n'a pas répondu : on garde le cadre, pas le vide. */
.carte__visuel.sans-photo {
  background: var(--nuit-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f96c4' stroke-width='1'%3E%3Crect x='3' y='5' width='18' height='14' rx='1.5'/%3E%3Ccircle cx='8.5' cy='10' r='1.6'/%3E%3Cpath d='m3 16 4.5-4 4 3.5L15 12l6 5'/%3E%3C/svg%3E") center / 44px no-repeat;
}

/* =============================================================================
   AJUSTEMENTS — chiffres en grille, section équipe
   DOLLAR — 25/08/2026
   ============================================================================= */

/* Huit chiffres d'infrastructure : une rangée ne suffit plus, on passe en grille. */
.chiffres {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; margin-top: 40px; border-top: 1px solid var(--ligne); border-left: 1px solid var(--ligne);
}
.chiffres div {
  padding: 26px 18px 24px; border-right: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne);
}
.chiffres div + div { padding-left: 18px; border-left: 0; }
.chiffres b { font-size: 34px; }
.chiffres span { font-size: 9.5px; letter-spacing: .13em; line-height: 1.4; }

/* ── Alain & Tiphaine ── */
.equipe { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); align-items: stretch; }
.equipe__image { min-height: 420px; background: var(--nuit); }
.equipe__image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.equipe__texte {
  background: var(--nuit-2); color: var(--blanc);
  display: flex; flex-direction: column; justify-content: center; padding: 70px 60px;
}
.equipe__texte h2 { color: var(--blanc); }
.equipe__texte > p { color: rgba(255, 255, 255, .8); max-width: 520px; font-size: 15.5px; }
.equipe__fiches { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 34px; }
.equipe__fiches div { padding: 20px 24px 20px 0; }
.equipe__fiches div + div { padding-left: 24px; padding-right: 0; border-left: 1px solid var(--ligne-nuit); }
.equipe__fiches b {
  display: block; font-family: var(--serif); font-size: 26px; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase; margin-bottom: 4px;
}
.equipe__fiches em {
  display: block; font-style: normal; font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--or-clair); margin-bottom: 10px;
}
.equipe__fiches p { font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .7); }

@media (max-width: 1024px) {
  .equipe { grid-template-columns: 1fr; }
  .equipe__image { min-height: 300px; }
  .equipe__texte { padding: 54px 32px; }
}
@media (max-width: 720px) {
  .chiffres { grid-template-columns: repeat(2, 1fr); }
  .equipe__fiches { grid-template-columns: 1fr; }
  .equipe__fiches div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--ligne-nuit); padding-top: 20px; }
}

/* =============================================================================
   CORRECTIF MOBILE — la bannière
   Le bloc de compteurs est un frère de .enveloppe dans un conteneur flex :
   en position statique il se rangeait à côté du texte au lieu de passer
   dessous. On bascule la bannière en colonne sous 860 px.
   DOLLAR — 25/08/2026
   ============================================================================= */
@media (max-width: 860px) {
  .banniere { flex-direction: column; justify-content: flex-end; }
  .banniere .enveloppe {
    flex: 1; width: 100%; display: flex; align-items: center;
    padding-top: calc(var(--entete) + 24px); padding-bottom: 28px;
  }
  .banniere__compte {
    position: static; width: 100%; margin-top: 0;
    border-left: 0; border-top: 1px solid var(--ligne-nuit);
  }
  .banniere .surtitre { font-size: 10px; letter-spacing: .19em; }
  .banniere__actions { gap: 10px; }
  .banniere__actions .bouton { flex: 1 1 100%; justify-content: space-between; }
}

/* Sur mobile la barre de filtres fait trois rangées : collée en haut elle
   mangerait un cinquième de l'écran. On la laisse défiler avec la page. */
@media (max-width: 860px) {
  .filtres { position: static; }
  .filtres__ligne { gap: 8px; }
  .recherche { max-width: none; }
}

/* =============================================================================
   MARQUE — le médaillon du client
   Fourni en filet blanc sur fond transparent : il ne vit que sur les fonds
   sombres. Le trait est très fin, d'où une taille plancher assez haute.
   DOLLAR — 25/08/2026
   ============================================================================= */
.marque__logo {
  height: 52px; width: auto; flex: 0 0 auto; display: block;
  margin-right: -2px;
}
.entete.figee .marque__logo { height: 46px; }
.pied .marque__logo { height: 46px; }

@media (max-width: 860px) {
  .marque__logo, .entete.figee .marque__logo { height: 42px; }
}