/* ==========================================================================
   Ned Med Car — feuille unique.
   Palette : echantillonnee sur LEURS photos (aucune couleur inventee).
   Les jetons portent le nom de leur PROVENANCE, pas d'un nom de couleur :
     --ciel             #F4F2DD  ciel de crepuscule, photo-07
     --ciel-chaud       #F5EACC  meme ciel, cote chaud, photo-07
     --ciel-clair       #FAF8EA  teinte derivee de --ciel
     --caisson-clair    #A98D7A  reflet clair du caisson d'enseigne, photo-01
     --facade           #6E5335  facade ocre de l'agence, photo-01
     --caisson          #382D27  caisson d'enseigne (brun sombre), photo-01
     --caisson-fonce    #241C18  ombre derivee de --caisson
     --logo-rouge       #953D2C  coeur du rouge du logo, photo-01
     --logo-rouge-fonce #74231D  rouge d'enseigne, photo-02
   Seules les valeurs marquees « derivee » ne sont pas echantillonnees : ce
   sont des teintes/ombres des couleurs ci-dessus, jamais de nouvelles teintes.
   ========================================================================== */

@font-face {
  font-family: 'Bodoni Moda';
  src: url('../fonts/bodoni-moda-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sora';
  src: url('../fonts/sora-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ciel: #F4F2DD;
  --ciel-chaud: #F5EACC;
  --ciel-clair: #FAF8EA;          /* teinte claire dérivée de --ciel */
  --caisson-clair: #A98D7A;
  --facade: #6E5335;
  --caisson: #382D27;
  --caisson-fonce: #241C18; /* ombre dérivée de --caisson */
  --logo-rouge: #953D2C;
  --logo-rouge-fonce: #74231D;
  --line: rgba(56, 45, 39, .16);
  --line-soft: rgba(56, 45, 39, .08);
  --shadow: 0 1px 2px rgba(36, 28, 24, .06), 0 8px 24px rgba(36, 28, 24, .07);
  --display: 'Bodoni Moda', Didot, 'Bodoni MT', Georgia, serif;
  --ui: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1120px;
  --r: 4px;
  --ease: cubic-bezier(.25, 1, .5, 1); /* ease-out-quart */
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ciel);
  color: var(--caisson);
  font-family: var(--ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

/* Bodoni est une didone : ses déliés disparaissent en petit corps. On ne
   l'utilise qu'en grand, et jamais pour un chiffre à lire (téléphone,
   horaires) : ces données passent en Sora. */
body { font-optical-sizing: auto; }

:focus-visible {
  outline: 2px solid var(--logo-rouge);
  outline-offset: 3px;
  border-radius: 2px;
}

/* `margin-inline` et pas le raccourci `margin` : `margin: 0 auto` remettait
   margin-bottom a 0, et comme .wrap (classe) l'emporte sur `section`
   (element), la respiration verticale des sections ne s'appliquait jamais. */
.wrap { max-width: var(--wrap); margin-inline: auto; padding: 0 20px; }

/* ============================ BOUTONS ============================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--ui);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  padding: .85rem 1.4rem;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.btn-ink { background: var(--caisson); color: var(--ciel); }
.btn-ink:hover { background: var(--caisson-fonce); }
.btn-brick { background: transparent; color: var(--logo-rouge); border-color: var(--logo-rouge); }
.btn-brick:hover { background: var(--logo-rouge); color: var(--ciel); }
.btn-line { background: transparent; color: var(--caisson); border-color: var(--line); }
.btn-line:hover { border-color: var(--caisson); }
.btn-sm { padding: .55rem 1rem; font-size: .8125rem; min-height: 44px; }
.btn-full { width: 100%; }
.btn:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:active { transform: none; } }

/* ============================ BARRE ============================ */
.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 20px;
  background: rgba(244, 242, 221, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.brand {
  font-family: var(--display);
  font-size: 1.375rem;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  margin-right: auto;
}
.brand span { color: var(--logo-rouge); }
.nav { display: none; gap: 1.5rem; }
.nav a {
  font-size: .8125rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--caisson);
  opacity: .72;
  padding: .25rem 0;
  border-bottom: 1px solid transparent;
}
.nav a:hover { opacity: 1; border-bottom-color: var(--logo-rouge); }
.bar-act { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
#lang-en {
  font-family: var(--ui);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--caisson);
  padding: .5rem .75rem;
  min-height: 44px;
  min-width: 44px;
  border-radius: var(--r);
  cursor: pointer;
}
#lang-en:hover { border-color: var(--caisson); }
@media (min-width: 900px) {
  .nav { display: flex; }
  .bar-act { margin-left: 0; }
  .brand { margin-right: 0; }
  .bar { gap: 2rem; }
  .nav { margin: 0 auto; }
}

/* ============================ HERO ============================
   Structure : masthead CENTRÉ sur fond clair, puis bandeau image
   pleine largeur en dessous. Aucune colonne, aucun bandeau défilant,
   aucune affiche encadrée.
   ============================================================== */
.hero {
  max-width: 1020px;
  margin: 0 auto;
  padding: clamp(3rem, 9vw, 6rem) 20px clamp(2rem, 5vw, 3rem);
  text-align: center;
}
.eyebrow {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--facade);
  margin: 0 0 1.25rem;
}
.hero h1 {
  font-size: clamp(2.125rem, 5.4vw, 3.625rem);
  line-height: 1.12;
  margin-bottom: 1.5rem;
}
.hero h1 em { font-style: italic; color: var(--logo-rouge); }
.lede {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.65;
  max-width: 54ch;
  margin: 0 auto 1.5rem;
  color: rgba(56, 45, 39, .82);
}
.trust {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  margin: 0 0 1.75rem;
}
.stars { color: var(--logo-rouge); letter-spacing: .1em; }
.trust strong { font-weight: 700; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* ---- bandeau letterbox ---- */
.plate { margin: 0 0 clamp(3rem, 7vw, 5rem); }
.plate img { width: 100%; }
.plate figcaption {
  max-width: var(--wrap);
  margin: .875rem auto 0;
  padding: 0 20px;
  font-size: .8125rem;
  color: var(--facade);
  text-align: center;
}

/* ============================ TÊTES DE SECTION ============================ */
.head { max-width: 60ch; margin: 0 0 clamp(1.75rem, 4vw, 2.5rem); }
.head h2 { font-size: clamp(1.875rem, 4.2vw, 2.75rem); margin-bottom: .625rem; }
.head p { margin: 0; color: rgba(56, 45, 39, .78); }
section { margin-bottom: clamp(3.5rem, 8vw, 6rem); }

/* ============================ FLOTTE ============================ */
.fleet {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .fleet { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .fleet { grid-template-columns: repeat(4, 1fr); } }
.car {
  background: var(--ciel-clair);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}
.car > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.car-b { padding: 1.125rem 1.125rem 1.25rem; display: flex; flex-direction: column; gap: .375rem; flex: 1; }
.car-b h3 { font-size: 1.5rem; }
.car-t { margin: 0 0 .875rem; font-size: .8125rem; color: var(--facade); }
.car-b .btn { margin-top: auto; }
.note {
  margin: 1.75rem 0 0;
  font-size: .875rem;
  color: var(--facade);
  max-width: 62ch;
}

/* ============================ À BORD ============================ */
.bord {
  max-width: var(--wrap);
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .bord { grid-template-columns: 1.35fr 1fr; } }
.bord-fig { margin: 0; border-radius: var(--r); overflow: hidden; }
.bord-fig img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.bord-copy h2 { font-size: clamp(1.75rem, 3.6vw, 2.375rem); margin-bottom: .75rem; }
.bord-copy p { margin: 0; color: rgba(56, 45, 39, .82); }

/* ============================ AVIS ============================ */
.avis {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .avis { grid-template-columns: repeat(3, 1fr); } }
.av {
  background: var(--ciel-chaud);
  border-radius: var(--r);
  padding: 1.5rem 1.375rem;
  display: flex;
  flex-direction: column;
}
.av .q {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.4;
  margin: 0 0 .875rem;
}
.av .g {
  margin: 0 0 1.125rem;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--facade);
}
.av .a {
  margin: auto 0 0;
  font-size: .75rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .4rem;
  color: rgba(56, 45, 39, .7);
}
.av .stars { font-size: .6875rem; }

/* ============================ RÉSERVER ============================ */
.resa { background: var(--caisson); color: var(--ciel); padding: clamp(3rem, 7vw, 4.5rem) 20px; }
.resa-in { max-width: 560px; margin: 0 auto; }
.resa h2 { font-size: clamp(1.875rem, 4.2vw, 2.5rem); margin-bottom: .625rem; }
.resa-lede { margin: 0 0 2rem; color: rgba(244, 242, 221, .74); font-size: .9375rem; }
.f-row { margin-bottom: 1rem; }
/* Les champs date ont une largeur mini intrinsèque : en dessous de 420px on
   empile, et `min-width: 0` empêche la grille de déborder (sinon `1fr` refuse
   de descendre sous min-content et pousse la page à ~390px). */
.f-2 { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
.f-2 > * { min-width: 0; }
@media (min-width: 420px) { .f-2 { grid-template-columns: 1fr 1fr; } }
label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: .4rem;
  color: rgba(244, 242, 221, .7);
}
.opt { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .7; }
input, select {
  width: 100%;
  font-family: var(--ui);
  font-size: 1rem;
  color: var(--ciel);
  background: rgba(244, 242, 221, .06);
  border: 1px solid rgba(244, 242, 221, .22);
  border-radius: var(--r);
  padding: .8rem .9rem;
  min-height: 44px;
}
/* .58 et pas .42 : en dessous, le texte indicatif tombe sous 4,5:1. */
input::placeholder { color: rgba(244, 242, 221, .58); }
input:focus, select:focus { outline: 2px solid var(--caisson-clair); outline-offset: 1px; border-color: transparent; }
select option { background: var(--caisson); color: var(--ciel); }
.resa .btn-ink { background: var(--ciel); color: var(--caisson); margin-top: .5rem; }
.resa .btn-ink:hover { background: #FFFFFF; }
.f-note { margin: 1rem 0 0; font-size: .75rem; color: rgba(244, 242, 221, .58); text-align: center; }

/* ============================ INFOS ============================ */
.infos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
  padding-top: 2rem;
}
@media (min-width: 760px) { .infos { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.infos h3 {
  font-family: var(--ui);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--facade);
  margin-bottom: .625rem;
}
.infos .big { font-family: var(--ui); font-weight: 600; font-size: 1.125rem; line-height: 1.35; margin: 0 0 .375rem; letter-spacing: -0.01em; }
.infos .big a { text-decoration: none; border-bottom: 1px solid var(--logo-rouge); }
.infos .big a:hover { color: var(--logo-rouge); }
.infos .sub { margin: 0; font-size: .8125rem; color: rgba(56, 45, 39, .7); }

.cta-end {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding: clamp(2rem, 5vw, 3rem) 1.25rem;
  background: var(--ciel-chaud);
  border-radius: var(--r);
  text-align: center;
}
.cta-end p { font-family: var(--display); font-size: clamp(1.375rem, 3vw, 1.875rem); margin: 0 0 1.25rem; }

/* ============================ PIED ============================ */
.foot {
  border-top: 1px solid var(--line);
  padding: 2.5rem 20px 6rem;
  text-align: center;
  font-size: .8125rem;
  color: rgba(56, 45, 39, .72);
}
.foot p { margin: 0 0 .375rem; }
.f-brand { font-family: var(--display); font-size: 1.25rem; color: var(--caisson); margin-bottom: .625rem; }
.f-thin { opacity: .7; }
.foot a { text-decoration: none; border-bottom: 1px solid var(--line); }
.foot a:hover { border-bottom-color: var(--caisson); }

/* ============================ FLOTTANT ============================ */
.float {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--caisson);
  color: var(--ciel);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px rgba(36, 28, 24, .28);
  transition: background-color .18s var(--ease);
}
.float:hover { background: var(--logo-rouge); }
.float svg { width: 26px; height: 26px; fill: currentColor; }
@media (prefers-reduced-motion: reduce) { .float { transition: none; } }

/* ============================ TOAST ============================ */
.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 12px);
  z-index: 60;
  background: var(--caisson-fonce);
  color: var(--ciel);
  font-size: .8125rem;
  font-weight: 500;
  padding: .7rem 1.1rem;
  border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(36, 28, 24, .3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
  max-width: calc(100vw - 32px);
  text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: opacity .22s var(--ease); } }

/* ============================ RÉVÉLATIONS ============================ */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}