/* BnbDesign — site layout. Built on top of the design-system tokens/components;
   this file only adds page structure, responsiveness and the header/footer/hero
   chrome that isn't part of the exported component library. */

@font-face {
  font-family: "TiretDroit";
  src: local("Work Sans"), local("Helvetica Neue"), local("Arial"), local("Liberation Sans"), local("DejaVu Sans");
  unicode-range: U+002D, U+2010, U+2011;
  font-display: swap;
}
:root {
  --font-display: "TiretDroit", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-title: var(--font-display);
}

/* ---------- Layout helpers ---------- */
.bd-container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.bd-container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }
.bd-section { padding: var(--section-y) 0; }
.bd-section--sm { padding: var(--space-8) 0 var(--space-7); }
.bd-section--tight { padding: var(--space-8) 0; }
.bd-section--card { background: var(--surface-card); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.bd-section--card-top { background: var(--surface-card); border-top: 1px solid var(--border-subtle); }
.bd-section--ink { background: var(--surface-ink); color: var(--text-inverse); }
.bd-center { text-align: center; }
.bd-measure { max-width: var(--measure); }

.bd-grid-2 { display: grid; grid-template-columns: var(--grid-cols, 1fr 1fr); gap: var(--space-5); }
.bd-grid-3 { display: grid; grid-template-columns: var(--grid-cols, repeat(3, 1fr)); gap: var(--space-5); }
.bd-grid-2--wide { gap: var(--space-8); }
.bd-grid-2--align-center { align-items: center; }
.bd-grid-2--align-start { align-items: start; }
/* !important: these must win over the --grid-cols custom property set inline
   for the desktop ratio (e.g. 1.5fr .8fr) — a bare override wouldn't beat it. */
@media (max-width: 900px) {
  .bd-grid-2, .bd-grid-3, .bd-grid-2--wide { grid-template-columns: 1fr !important; }
}

.bd-stack-5 { display: flex; gap: var(--space-5); align-items: center; flex-wrap: wrap; }
.bd-stack-7 { display: flex; gap: var(--space-7); flex-wrap: wrap; }

/* ---------- Header ---------- */
.bd-header { position: sticky; top: 0; z-index: 40; background: rgba(247,241,232,.86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-subtle); }
.bd-header__inner { max-width: var(--container); margin: 0 auto; padding: 16px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.bd-nav, .bd-nav-mobile { display: flex; gap: var(--space-6); align-items: center; }
.bd-nav a, .bd-nav-mobile a { font: var(--type-label); letter-spacing: var(--tracking-label-tight); text-transform: uppercase; text-decoration: none; padding-bottom: 4px; border: 0; border-bottom: 1px solid transparent; color: var(--text-body); }
.bd-nav a:hover, .bd-nav a[aria-current="page"], .bd-nav-mobile a:hover, .bd-nav-mobile a[aria-current="page"] { color: var(--text-accent); border-bottom-color: var(--text-accent); }
.bd-header__cta { flex: none; }
.bd-nav-toggle { display: none; background: none; border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 8px 10px; cursor: pointer; color: var(--text-strong); }
.bd-nav-mobile { display: none; }
@media (max-width: 900px) {
  .bd-header__cta { display: none; }
  .bd-nav { display: none; }
  /* Deliberately outside .bd-header in the DOM (see header.php) so its
     `position: fixed` resolves against the viewport, not the header's
     backdrop-filter containing block. z-index above the sticky header
     (40) so it fully covers it while open. */
  .bd-nav-mobile { position: fixed; z-index: 41; inset: 65px 0 0 0; background: var(--surface-page); flex-direction: column; align-items: flex-start; padding: var(--space-6) var(--gutter); gap: var(--space-5); display: none; overflow-y: auto; }
  .bd-nav-mobile.is-open { display: flex; }
  .bd-nav-mobile a { font-size: var(--text-lg); }
  .bd-nav-toggle { display: inline-flex; }
}

/* ---------- Hero 3D mockups ---------- */
/* Rotation is fully JS-driven (see main.js) so both mockups always rest
   front-facing on load — no CSS animation-timeline here, since native
   scroll-driven animations proved inconsistent about their resting state
   on initial paint across browsers. */
[data-anim="ordi"], [data-anim="tel"] {
  transform: rotateY(0deg);
}

.bd-hero-visual { position: relative; padding-bottom: 32px; min-width: 0; }
.bd-hero-visual__stage { -webkit-perspective: 1500px; perspective: 1500px; perspective-origin: 50% 50%; position: relative; z-index: 1; }
.bd-hero-visual__spin { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transform-origin: 50% 50%; position: relative; }
.bd-hero-visual__laptop-frame { display: block; text-decoration: none; background: linear-gradient(150deg,#9E4E5A 0%,#7C303D 34%,#682430 66%,#8E404C 100%); padding: 11px 11px 15px; border-radius: 12px; position: relative; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.32); }
.bd-hero-visual__laptop-frame img { display: block; width: 100%; height: auto; border-radius: 3px; }
.bd-hero-visual__cam { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.35); }
.bd-hero-visual__back { position: absolute; inset: 0; transform: translateZ(-10px) rotateY(180deg); background: linear-gradient(160deg,#B9707A 0%,#93454F 38%,#7A3040 66%,#5E1F2B 100%); border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; }
.bd-hero-visual__back img { width: 52px; height: 52px; border-radius: 50%; opacity: .9; }
.bd-hero-visual__edge-l { position: absolute; left: 0; top: 0; bottom: 0; width: 10px; transform-origin: 0% 50%; transform: rotateY(90deg); background: linear-gradient(90deg,#C0808A,#8A3B47 45%,#631F2B); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.bd-hero-visual__edge-r { position: absolute; right: 0; top: 0; bottom: 0; width: 10px; transform-origin: 100% 50%; transform: rotateY(-90deg); background: linear-gradient(270deg,#C0808A,#8A3B47 45%,#631F2B); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.bd-hero-visual__edge-t { position: absolute; left: 0; right: 0; top: 0; height: 10px; transform-origin: 50% 0%; transform: rotateX(-90deg); background: linear-gradient(180deg,#CE939C,#8A3B47 60%,#6A2531); border-radius: 3px 3px 0 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.bd-hero-visual__edge-b { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; transform-origin: 50% 100%; transform: rotateX(90deg); background: linear-gradient(0deg,#5E1F2B,#A85E69); border-radius: 0 0 3px 3px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

.bd-hero-visual__phone { position: absolute; left: -56px; bottom: 2%; width: 150px; z-index: 2; -webkit-perspective: 1000px; perspective: 1000px; perspective-origin: 50% 50%; }
@media (max-width: 900px) {
  /* The phone mockup has a fixed width, so on a narrow viewport the laptop
     (which scales with the column) shrinks a lot more than the phone does —
     without this, the phone ends up taller than the laptop and its `bottom:
     2%` anchor (percentage of a now-short container) drags it down over the
     "Sites livrés" caption below. Shrink it and pin it a fixed distance from
     the bottom instead, so it hangs off the laptop like on desktop without
     reaching into the caption. */
  .bd-hero-visual__phone { left: auto; right: 4%; width: 120px; bottom: 80px; }
}
.bd-hero-visual__phone-spin { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transform-origin: 50% 55%; position: relative; }
.bd-hero-visual__phone-frame { display: block; background: linear-gradient(150deg,#9E4E5A 0%,#7C303D 34%,#682430 66%,#8E404C 100%); padding: 7px; border-radius: 22px; -webkit-backface-visibility: hidden; backface-visibility: hidden; position: relative; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.bd-hero-visual__phone-frame img { display: block; width: 100%; aspect-ratio: 9/16; object-fit: cover; object-position: 50% 0; border-radius: 16px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.bd-hero-visual__phone-notch { position: absolute; left: 50%; top: 11px; transform: translateX(-50%); width: 42px; height: 4px; background: rgba(45,12,18,.6); border-radius: 3px; }
.bd-hero-visual__phone-back { position: absolute; inset: 0; transform: translateZ(-10px) rotateY(180deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; background: linear-gradient(155deg,#B9707A 0%,#8A3B47 52%,#5E1F2B 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); border-radius: 22px; display: flex; align-items: center; justify-content: center; }
.bd-hero-visual__phone-back img { width: 36px; height: 36px; border-radius: 50%; opacity: .85; }

.bd-hero-caption { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px var(--space-3); margin-top: var(--space-4); padding-left: 120px; }
@media (max-width: 900px) { .bd-hero-caption { padding-left: 0; justify-content: flex-start; } }

/* ---------- Cookie banner (fallback while tarteaucitron script loads) ---------- */
.bd-noscript-cookies { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; padding: var(--space-5) var(--gutter); background: var(--surface-ink); border-top: 1px solid var(--camel); color: var(--creme); font: var(--type-body-sm); }

/* ---------- Accordion (native <details>) ---------- */
.bd-accordion__item summary { list-style: none; }
.bd-accordion__item summary::-webkit-details-marker { display: none; }
.bd-accordion__head { list-style: none; }
.bd-accordion__head span:first-child { flex: 1; }

/* ---------- Utility ---------- */
.bd-mt-auto { margin-top: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- Euro sign optical alignment (display font's old-style figures sit low) ---------- */
.bd-eur { display: inline-block; transform: translateY(0.12em); }

/* ---------- Inline editable number (calculators) ---------- */
.bd-inline-input { width: 2.6ch; background: transparent; border: none; border-bottom: 1px dashed currentColor; color: inherit; font: inherit; font-weight: inherit; text-align: center; padding: 0 2px; -moz-appearance: textfield; }
.bd-inline-input::-webkit-outer-spin-button, .bd-inline-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bd-inline-input:hover { border-bottom-color: var(--camel-clair); }
.bd-inline-input:focus { outline: none; border-bottom: 1px solid var(--camel-clair); }