/* ASSA Escalade — Bourse aux chaussons
   Palette et typographie du design system du club. */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --mer: #2BA8D6; --mer-deep: #1A82AB; --mer-bright: #5BC1E5; --mer-foam: #D9F0F8;
  --rock: #0E1418; --chalk: #F5F2EA; --paper: #FFFFFF; --surface-2: #FBF9F4;
  --sunset: #FF7350;
  --neutral-50: #F6F8FA; --neutral-100: #ECEFF3; --neutral-200: #DCE2E8; --neutral-300: #B9C3CD;
  --fg-1: #0E1418; --fg-2: #404B57; --fg-3: #8A96A3;
  --border: #DCE2E8; --border-strong: #B9C3CD; --divider: #ECEFF3;
  --danger: #C8412E; --link: #1A82AB;
  --font-display: 'Anton', Impact, sans-serif;
  --font-sans: 'Archivo', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --shadow-1: 0 1px 2px rgba(14,20,24,.06), 0 1px 1px rgba(14,20,24,.04);
  --shadow-2: 0 4px 12px rgba(14,20,24,.08), 0 2px 4px rgba(14,20,24,.04);
  --ease: cubic-bezier(.22,1,.36,1);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--chalk); color: var(--fg-1); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; }
body.centre { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
img { max-width: 100%; }
a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--rock); }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.section { padding: 40px 24px 72px; }
.mono { font-family: var(--font-mono); }
.nombre { font-size: 17px; font-weight: 500; white-space: nowrap; }
.small { font-size: 14px; line-height: 1.45; color: var(--fg-2); }
.caption { font-size: 12px; line-height: 1.4; color: var(--fg-3); display: block; }
.erreur { color: var(--danger); font-weight: 600; font-size: 14px; }
.ok { color: #1F5C3D; font-weight: 600; font-size: 14px; }
.colonne-etroite { max-width: 460px; }
.colonne-large { max-width: 640px; }

/* Type */
.masthead { font-family: var(--font-display); text-transform: uppercase; letter-spacing: -.01em; line-height: .92; font-size: 30px; }
.masthead-l { font-size: 40px; margin: 12px 0 8px; }
.masthead-xl { font-size: clamp(40px, 6vw, 56px); margin: 10px 0 12px; }
h1, h2, .h2, .h3 { line-height: 1.25; margin: 0; }
.h2 { font-size: 26px; font-weight: 700; }
.h3 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--mer-deep); }
.eyebrow-clair { color: var(--mer-bright); }
.eyebrow-link { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--mer-bright); text-decoration: none; }
.eyebrow-link:hover { color: #fff; }

/* Accueil */
.hero { background: var(--rock); color: #fff; padding: 64px 0 72px; }
.hero-in { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.hero-p { margin: 0; max-width: 460px; color: rgba(245,242,234,.72); }
.logo-hero { width: 132px; height: 132px; border-radius: 999px; flex: none; }
.logo-rond { width: 84px; height: 84px; border-radius: 999px; margin-bottom: 16px; }
.grille-applis { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 24px; }
.tuile { display: block; text-decoration: none; background: var(--paper); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-1); padding: 28px; transition: box-shadow .22s var(--ease), transform .22s var(--ease); }
.tuile:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.tuile h2 { font-size: 22px; font-weight: 700; margin: 16px 0 8px; color: var(--fg-1); }
.tuile p { margin: 0 0 20px; font-size: 15px; color: var(--fg-2); }
.tuile-cta { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mer-deep); }
.tuile-vide { background: var(--surface-2); border-style: dashed; border-color: var(--border-strong); box-shadow: none; }
.tuile-vide h2 { font-size: 18px; color: var(--fg-2); margin-top: 0; }
.tuile-vide p { color: var(--fg-3); font-size: 14px; margin: 0; }
.pied-ligne { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--border); display: flex; gap: 24px; flex-wrap: wrap; justify-content: space-between; align-items: baseline; }

/* Bandeau appli */
.bandeau { background: var(--rock); color: #fff; padding: 20px 0; }
.bandeau-in { display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline; justify-content: space-between; }
.bandeau .masthead { margin-top: 6px; }
.bandeau-sous { font-size: 14px; color: rgba(245,242,234,.6); }
.bandeau-meta { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.55); text-align: right; }
.onglets { background: var(--paper); border-bottom: 1px solid var(--border); }
.onglets-in { display: flex; gap: 4px; flex-wrap: wrap; padding: 0 24px; }
.onglet { height: 52px; display: inline-flex; align-items: center; padding: 0 20px; text-decoration: none; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.onglet:hover { color: var(--fg-1); }
.onglet.actif { color: var(--rock); box-shadow: inset 0 -3px 0 var(--mer); }
.pied { border-top: 1px solid var(--border); padding: 24px 0 48px; font-size: 14px; color: var(--fg-2); }

/* Cartes et formulaires */
.carte { background: var(--paper); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-1); padding: 28px; }
.carte-acces { width: 100%; max-width: 420px; box-shadow: var(--shadow-2); }
.carte-table { padding: 0; overflow-x: auto; }
.carte-annonce { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 18px 20px; margin-bottom: 12px; }
.annonce-gauche { display: flex; gap: 14px; align-items: center; }
.deux-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; align-items: start; }
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; }
.titre-ligne { display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.vide { background: var(--paper); border: 1px dashed var(--border-strong); border-radius: 20px; padding: 48px 24px; text-align: center; }
.vide p { margin: 0 0 8px; }
.vide-petit { padding: 32px 20px; text-align: left; }
.liste-admin { max-width: 760px; }

label { display: block; font-weight: 600; font-size: 14px; margin: 16px 0 6px; }
.champ { width: 100%; min-height: 44px; padding: 10px 14px; font-size: 15px; font-family: var(--font-sans); color: var(--fg-1); border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface-2); }
.champ:focus { outline: 2px solid var(--mer); outline-offset: 1px; }
textarea.champ { resize: vertical; }
.champ-code { font-family: var(--font-mono); font-size: 18px; letter-spacing: .18em; text-transform: uppercase; }
.fichier { font-size: 13px; color: var(--fg-2); }
.radios { display: flex; gap: 8px; flex-wrap: wrap; }
.radio { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: 600; font-size: 14px; background: var(--neutral-100); border-radius: 999px; padding: 10px 16px; min-height: 44px; }
.segments { display: flex; gap: 4px; background: var(--neutral-100); padding: 4px; border-radius: 999px; width: fit-content; margin-bottom: 24px; }
.segment { min-height: 36px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); }
.segment.actif { background: var(--paper); color: var(--rock); box-shadow: var(--shadow-1); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 24px; margin-top: 22px; border: none; border-radius: 12px; font-family: var(--font-sans); font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: background .22s var(--ease), border-color .22s var(--ease); }
.btn:active { transform: scale(.98); }
.btn-mer { width: 100%; background: var(--mer); color: #fff; }
.btn-mer:hover { background: var(--mer-deep); color: #fff; }
.btn-sunset { width: 100%; background: var(--sunset); color: #fff; }
.btn-sunset:hover { opacity: .92; color: #fff; }
.btn-secondaire { background: none; border: 1px solid var(--rock); color: var(--rock); }
.btn-secondaire:hover { background: var(--rock); color: #fff; }
.btn-danger { margin: 0; padding: 0 18px; border: 1px solid var(--border-strong); border-radius: 999px; background: none; color: var(--danger); font-size: 13px; }
.btn-danger:hover { border-color: var(--danger); background: #FDF1EF; }
.btn-fantome { margin: 0; padding: 0 16px; min-height: 40px; border: 1px solid var(--border-strong); border-radius: 999px; background: none; color: var(--fg-1); font-size: 12px; }
.btn-fantome:hover { border-color: var(--mer); color: var(--mer-deep); }
.lien-discret { font-size: 12px; font-weight: 600; color: var(--fg-3); }

/* Tableau */
.tableau { width: 100%; border-collapse: collapse; min-width: 760px; }
.tableau th { text-align: left; padding: 14px 20px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); border-bottom: 1px solid var(--border); white-space: nowrap; }
.tableau td { padding: 14px 20px; border-bottom: 1px solid var(--divider); vertical-align: top; }
.tableau tbody tr:last-child td { border-bottom: none; }
.th-tri { text-decoration: none; color: inherit; }
.th-tri:hover, .th-tri.actif { color: var(--mer-deep); }
.cell-marque { min-width: 170px; font-size: 15px; }
.cell-contact { min-width: 200px; }
.contact { font-weight: 700; font-size: 15px; }
.vignette { width: 25mm; height: 25mm; border-radius: 12px; border: 1px solid var(--border); object-fit: cover; display: block; background: var(--neutral-50); }
.vignette-lien { display: inline-block; line-height: 0; border-radius: 12px; cursor: zoom-in; transition: box-shadow .22s var(--ease); }
.vignette-lien:hover { box-shadow: var(--shadow-2); }
.vignette-petite { width: 44px; height: 44px; }

/* Visionneuse photo */
.visionneuse { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(14,20,24,.88); }
.visionneuse[open] { display: flex; }
.visionneuse img { max-width: min(560px, 90vw); max-height: 82vh; border-radius: 20px; background: var(--paper); }
.visionneuse-ref { position: absolute; top: 24px; left: 24px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--mer-bright); }
.visionneuse-fermer { position: absolute; top: 16px; right: 20px; width: 44px; height: 44px; border: none; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.visionneuse-fermer:hover { background: rgba(255,255,255,.22); }
.vignette-vide { background: repeating-linear-gradient(135deg, var(--neutral-100) 0 6px, var(--neutral-50) 6px 12px); }
.pastille { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.pastille-mer, .etat-tres_bon { background: var(--mer-foam); color: #12657F; }
.etat-neuf { background: #E4F3EA; color: #1F5C3D; }
.etat-bon { background: var(--neutral-50); color: var(--fg-2); }
.etat-use { background: #FFF3D6; color: #8A5E06; }

@media (max-width: 640px) {
  .section { padding: 28px 20px 56px; }
  .wrap { padding: 0 20px; }
  .hero { padding: 40px 0 48px; }
  .logo-hero { width: 96px; height: 96px; }
  .bandeau-meta { text-align: left; }
}