/* =========================================================================
   La Casquette — Café-restaurant, Montmartre (Paris)
   Archétype : bistro-café parisien artistique de Montmartre — chaleureux, cosy,
   esprit galerie (le lieu expose des artistes).
   Palette : cobalt-indigo #20308F · ocre-moutarde #DDA02A · bordeaux #7C2233 ·
             crème #F7EFE0 · bleu-nuit #141A38 (footer).
   Fonts  : Yeseva One (display / enseigne) / Familjen Grotesk (body).
   Signature : « CARTEL DE GALERIE » — visuels encadrés + plaque-légende ocre
               dessous (comme les cartels d'exposition).
   Anti-footprint : 100 % Bootstrap dans le balisage ; toute la peau ici.
   ========================================================================= */

:root {
  --bs-primary: #20308F;
  --bs-primary-rgb: 32, 48, 143;
  --bs-secondary: #DDA02A;
  --bs-secondary-rgb: 221, 160, 42;

  --cobalt: #20308F;
  --cobalt-700: #1a2775;
  --ochre: #DDA02A;
  --ochre-600: #c1861a;
  --bordeaux: #7C2233;
  --cream: #F7EFE0;
  --cream-2: #F0E4CE;
  --night: #141A38;
  --ink: #1c2036;

  --bs-body-font-family: 'Familjen Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-color: #38384a;
  --bs-body-bg: var(--cream);
  --bs-emphasis-color: var(--ink);

  --bs-border-radius: .5rem;
  --bs-border-radius-lg: .85rem;

  --bs-link-color: var(--cobalt);
  --bs-link-color-rgb: 32, 48, 143;
  --bs-link-hover-color: var(--ochre-600);

  --shadow-soft: 0 2px 5px rgba(20, 26, 56, .07), 0 18px 38px -20px rgba(20, 26, 56, .4);
  --shadow-lift: 0 4px 9px rgba(20, 26, 56, .11), 0 32px 58px -24px rgba(20, 26, 56, .5);
}

/* ---------------------------------------------------------------- Base ---- */
body {
  background-color: var(--cream);
  background-image:
    radial-gradient(50rem 26rem at 108% -6%, rgba(221, 160, 42, .18), transparent 60%),
    radial-gradient(46rem 26rem at -8% 3%, rgba(32, 48, 143, .1), transparent 58%);
  background-attachment: fixed;
  color: var(--bs-body-color);
}

h1, h2, h3, h4, h5, .navbar-brand, .display-1 {
  font-family: 'Yeseva One', Georgia, serif;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: .002em;
  line-height: 1.14;
}
p { line-height: 1.75; }
a { text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .16em; }
::selection { background: rgba(221, 160, 42, .28); }
:focus-visible { outline: 3px solid rgba(32, 48, 143, .6); outline-offset: 2px; border-radius: 4px; }

.container { max-width: 1170px; }

/* Eyebrow / label */
#label-eyebrow, #hero-eyebrow, #topbar-note {
  font-family: 'Familjen Grotesk', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em; font-size: .74rem;
}
#label-eyebrow { color: var(--cobalt); background: rgba(32, 48, 143, .08); padding: .35rem .85rem; border-radius: 50rem; }
#label-eyebrow::after { content: ""; display: inline-block; width: 1.6rem; height: 2px; background: var(--ochre); vertical-align: middle; margin-left: .55rem; }

/* ------------------------------------------------------------- Buttons ---- */
.btn { font-weight: 600; border-radius: 50rem; padding-inline: 1.35rem; letter-spacing: .01em; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.btn-lg { padding-block: .7rem; }
.btn-primary {
  --bs-btn-bg: var(--cobalt); --bs-btn-border-color: var(--cobalt);
  --bs-btn-hover-bg: var(--cobalt-700); --bs-btn-hover-border-color: var(--cobalt-700);
  --bs-btn-active-bg: var(--night);
  box-shadow: 0 12px 22px -14px rgba(32, 48, 143, .9);
}
.btn-outline-light { --bs-btn-border-color: rgba(255,255,255,.7); --bs-btn-color: #fff; border-width: 2px; }
.btn-outline-light:hover { --bs-btn-hover-bg: #fff; --bs-btn-hover-color: var(--cobalt); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* -------------------------------------------------------------- Topbar ---- */
#topbar { background: var(--night); color: #d7cdbb; }
#topbar-item, #topbar-tel { color: #d7cdbb; }
#topbar-item .bi, #topbar-tel .bi { color: var(--ochre); }
#topbar-tel:hover { color: #fff; text-decoration: none; }
#topbar-note { color: var(--ochre); }

/* -------------------------------------------------------------- Navbar ---- */
#topnav {
  background: rgba(247, 239, 224, .92);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid rgba(32, 48, 143, .12);
}
#brand-name { font-family: 'Yeseva One', serif; font-size: 1.5rem; color: var(--cobalt); line-height: 1; }
#brand-sub { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ochre-600); font-weight: 600; }
#topnav .nav-link { color: var(--ink); font-weight: 500; border-radius: 50rem; padding-inline: .9rem; position: relative; }
#topnav .nav-link:hover { color: var(--cobalt); }
#topnav .nav-link::after {
  content: ""; position: absolute; left: .95rem; right: .95rem; bottom: .3rem; height: 2px;
  background: var(--ochre); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
#topnav .nav-link:hover::after { transform: scaleX(1); }

/* ---------------------------------------------------------------- Hero ---- */
#hero { position: relative; min-height: 78vh; display: flex; align-items: center; background: var(--night); }
#hero-media img { z-index: 0; }
#hero-veil {
  background:
    linear-gradient(100deg, rgba(20, 26, 56, .92) 0%, rgba(20, 26, 56, .72) 42%, rgba(20, 26, 56, .25) 100%),
    radial-gradient(30rem 20rem at 20% 30%, rgba(32, 48, 143, .5), transparent 70%);
}
#hero .container { z-index: 2; }
#hero-eyebrow { color: var(--ochre); background: rgba(221, 160, 42, .14); padding: .4rem .9rem; border-radius: 50rem; letter-spacing: .16em; }
#hero-title { color: #fff; font-size: clamp(2.6rem, 6vw, 4.6rem); text-shadow: 0 2px 20px rgba(0,0,0,.35); }
#hero-sub { color: var(--ochre); font-size: 1.3rem; font-family: 'Yeseva One', serif; }

/* ------------------------------------------------------ Concept ----------- */
#concept-intro { color: var(--cobalt); font-size: clamp(1.5rem, 3vw, 2.15rem); }
#concept-label { font-family: 'Yeseva One', serif; color: var(--bordeaux); font-size: 1.02rem; }
#concept-outro { color: #4a4a5c; }
#offres { }
#offre-item { font-size: 1.08rem; padding: .5rem .9rem; background: #fff; border: 1px solid rgba(32, 48, 143, .1); border-left: 4px solid var(--ochre); border-radius: .4rem; box-shadow: 0 1px 2px rgba(20,26,56,.05); }

/* Cadre « galerie » pour les visuels d'ambiance */
#framed-figure { position: relative; padding: 10px; background: #fff; box-shadow: var(--shadow-soft); border-radius: 3px; }
#framed-figure::before { content: ""; position: absolute; inset: 4px; border: 2px solid var(--ochre); pointer-events: none; z-index: 2; }
#framed-figure img { display: block; border-radius: 1px; }

/* --------------------------------------------- Sélection (CARTEL) --------- */
#selection { background: linear-gradient(180deg, transparent, rgba(32,48,143,.035)); }
#selection-title { color: var(--ink); }

/* SIGNATURE — cartel de galerie : visuel encadré + plaque-légende ocre */
#cartel { margin: 0; transition: transform .25s ease; }
#cartel:hover { transform: translateY(-5px); }
#cartel-frame {
  aspect-ratio: 4/3; background: #fff; padding: 8px;
  box-shadow: var(--shadow-soft); position: relative; border-radius: 3px;
}
#cartel-frame::before { content: ""; position: absolute; inset: 3px; border: 2px solid rgba(32, 48, 143, .35); pointer-events: none; z-index: 2; }
#cartel-frame img { border-radius: 1px; transition: transform .5s ease; }
#cartel:hover #cartel-frame img { transform: scale(1.06); }
#cartel-plate {
  display: block; width: max-content; max-width: 90%; margin: -14px auto 0; position: relative; z-index: 3;
  font-family: 'Yeseva One', serif; font-size: .95rem; color: var(--ink); text-align: center;
  background: var(--cream); border: 1px solid var(--ochre); border-top: 3px solid var(--ochre);
  padding: .5rem 1.1rem; box-shadow: 0 8px 18px -8px rgba(20, 26, 56, .4);
}
#selection-chip {
  font-family: 'Familjen Grotesk', sans-serif; font-weight: 600; font-size: .85rem;
  color: var(--cobalt); background: #fff; border: 1px solid rgba(32, 48, 143, .2);
  padding: .45rem .95rem; border-radius: 50rem;
}

/* -------------------------------------------------------- Bande story ----- */
#story-band {
  border-radius: 1.25rem; background: linear-gradient(120deg, var(--cobalt), var(--night));
  color: #ece6da; box-shadow: var(--shadow-lift); position: relative; overflow: hidden;
}
#story-band::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.08) 1.5px, transparent 1.5px); background-size: 24px 24px; opacity: .5;
}
#story-band::after {
  content: ""; position: absolute; right: -3rem; bottom: -4rem; width: 14rem; height: 14rem;
  background: radial-gradient(circle, rgba(221, 160, 42, .35), transparent 68%);
}
#story-ico { width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--ochre); color: var(--night); font-size: 1.5rem; position: relative; }
#story-title { color: #fff; font-size: clamp(1.6rem, 3.4vw, 2.4rem); position: relative; }
#story-text { color: #d8d0c2; max-width: 46ch; position: relative; }
#story-badge { color: var(--night); background: var(--ochre); font-weight: 600; padding: .5rem 1.1rem; border-radius: 50rem; position: relative; }

/* ----------------------------------------------------------- Contact ------ */
#contact-title { color: var(--cobalt); }
#contact-ico { color: var(--ochre-600); font-size: 1.3rem; }
#contact a { color: var(--cobalt); font-weight: 600; }
#map-frame { border-radius: var(--bs-border-radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); border: 6px solid #fff; }
#map-frame iframe { border: 0; width: 100%; height: 100%; }

/* ------------------------------------------------------------- Footer ------ */
#colophon { background: var(--night); color: #b9b1a3; border-top: 4px solid var(--ochre); }
#footer-name { font-family: 'Yeseva One', serif; color: #fff; }
#footer-baseline { color: #8f8a7d; }
#footer-head { color: var(--ochre); }
#footer-link { color: #b9b1a3; }
#footer-link:hover { color: #fff; }
#footer-note { color: #b9b1a3; }
#footer-note .bi, #colophon .bi { color: var(--ochre); }
#footer-rule { border-color: rgba(255,255,255,.14); }
#copyright { color: #7d7669; }

/* 404 (hors hero) */
#content > section #hero-title.display-1 { color: var(--cobalt); text-shadow: none; }

/* -------------------------------------------------------- Responsive ------- */
@media (max-width: 991.98px) {
  #hero { min-height: 68vh; }
}
@media (max-width: 575.98px) {
  #hero-title { font-size: 2.4rem; }
  #hero { min-height: 60vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .btn:hover, #cartel:hover { transform: none; }
  #cartel:hover #cartel-frame img { transform: none; }
}