/* ============================================================
   PFM Lyon — composants partagés :
   topbar, navbar, boutons, en-têtes de section, footer
   Valeurs issues de Figma 22:133 (header), 22:8873 (footer)
   ============================================================ */

/* ================= Topbar (1440x52, #0B1937) ================= */
.topbar {
  background: var(--c-ink);
  color: var(--c-white);
  height: 52px;
  display: flex;
  align-items: center;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.topbar__left {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
}
.topbar__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font: var(--t-small-med);
  line-height: 21px;
  white-space: nowrap;
}
.topbar__item--address { font-weight: 500; }
.topbar__item .ic { flex: none; }
.topbar__phone {
  font: var(--t-phone);
  color: var(--c-white);
}
.topbar__sep {
  width: 1px;
  height: 21px;
  background: var(--c-white-40);
  flex: none;
}
.topbar__badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font: var(--t-small-600);
  white-space: nowrap;
}
.topbar__dot {
  width: 8px; height: 8px;
  border-radius: var(--r-input);
  background: var(--c-primary);
  flex: none;
}

/* ================= Navbar (1440x110, blanc) ================= */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-white);
  box-shadow: var(--sh-nav);
  height: 110px;
  display: flex;
  align-items: center;
}
.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Logo : pictogramme 67x69 + monogramme */
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  flex: none;
}
.brand__icon { width: 67px; height: 69px; }
.brand__name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.brand__title {
  font: 900 10.4px/15.7px var(--f-title);
  letter-spacing: 0.52px;
  text-transform: uppercase;
  color: var(--c-ink);
}
.brand__sub {
  display: flex;
  align-items: center;
  gap: 1px;
}
.brand__sub-text {
  font: 600 4.7px/5.6px var(--f-body);
  color: var(--c-ink);
  white-space: nowrap;
}
.brand__sub-line {
  width: 4px; height: 1px;
  background: var(--c-ink);
  flex: none;
}

/* Liens de navigation — Cinzel 14, actif = 700 marine + filet or */
.nav__list {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font: var(--t-nav-idle);
  color: var(--c-title);
  text-align: center;
  transition: color .2s;
}
.nav__link:hover { color: var(--c-ink); }
.nav__link::after {
  content: "";
  width: 28px;
  height: 1.3px;
  background: var(--c-primary);
  opacity: 0;
  transition: opacity .2s;
}
.nav__link[aria-current="page"] {
  font: var(--t-nav);
  color: var(--c-ink);
}
.nav__link[aria-current="page"]::after,
.nav__link:hover::after { opacity: 1; }

/* Burger mobile */
.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.nav__burger span {
  width: 24px; height: 2px;
  background: var(--c-ink);
  border-radius: var(--r-input);
  transition: transform .25s, opacity .25s;
}

/* ================= Boutons ================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px; /* hauteur FIXED Figma de toutes les instances BTN */
  padding: 0 26px;
  border-radius: var(--r-btn);
  font: 600 14px/21px var(--f-body);
  white-space: nowrap;
  transition: transform .2s, box-shadow .2s, background-color .2s, color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn .ic { flex: none; }

.btn--ink {
  background: var(--c-ink);
  color: var(--c-white);
  box-shadow: var(--sh-btn);
}
.btn--white {
  background: var(--c-white);
  color: var(--c-ink);
  box-shadow: var(--sh-btn);
}
.btn--outline-white {
  background: transparent;
  color: var(--c-white);
  border: 1px solid var(--c-white);
}
.btn--outline-white:hover { background: var(--c-white-05); }
.btn--nav { padding: 16px 24px; }

.btn--ink .ic-arrow path,
.btn--outline-white .ic-arrow path { fill: var(--c-white); }

/* ================= En-tête de section ================= */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.section-head--center {
  align-items: center;
  text-align: center;
}
.section-head__top {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.section-head--center .section-head__top { align-items: center; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 16px/18.8px var(--f-body);
  letter-spacing: 0.32px;
  color: var(--c-primary);
  text-transform: uppercase;
}
.eyebrow::before,
.eyebrow::after {
  content: "";
  width: 7px; height: 7px;
  border-radius: var(--r-input);
  background: var(--c-primary);
}
.eyebrow--start::before { display: none; }
.section-head h1,
.section-head h2 {
  font: var(--t-h2);
  color: var(--c-title);
}
.section-head p:not(.eyebrow) {
  font: var(--t-body);
  color: var(--c-body);
}

/* ================= Footer (#0B1937) ================= */
.footer {
  position: relative;
  background: var(--c-ink);
  color: var(--c-white);
  overflow: hidden;
}
.footer__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  pointer-events: none;
  background: url("../icons/ornament-hands.svg") center / 640px auto repeat;
}
.footer__inner {
  position: relative;
  padding-top: 80px;
  display: flex;
  flex-direction: column;
  gap: 72px;
}
.footer__cols {
  display: flex;
  gap: 76px;
  align-items: flex-start;
}
.footer__brand {
  width: 384px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: 100px;
  height: 110px; /* hauteur FIXED Figma (22:10002) */
}
.footer__logo img { width: 81px; height: 84px; }
.footer__logo-title {
  font: 900 12.7px/19px var(--f-title);
  letter-spacing: 0.63px;
  text-transform: uppercase;
  color: var(--c-white);
}
.footer__logo-sub {
  font: 600 5.8px/6.8px var(--f-body);
  color: var(--c-white);
  display: flex;
  align-items: center;
  gap: 2px;
}
.footer__logo-sub::before,
.footer__logo-sub::after {
  content: "";
  width: 4px; height: 1px;
  background: var(--c-white);
}
.footer__about strong {
  display: block;
  font: 600 14px/22.4px var(--f-body);
  margin-bottom: 6px;
}
.footer__about { font: var(--t-small-lh22); }

.footer__nav {
  flex: 1;
  display: flex;
  justify-content: space-between;
  gap: 56px;
}
.footer__col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.footer__col-title {
  font: 700 22px/22px var(--f-title);
  text-transform: uppercase;
  color: var(--c-white);
}
.footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer__links a,
.footer__links li {
  display: flex;
  align-items: center;
  gap: 8px;
  font: var(--t-body-med);
  color: var(--c-white);
}
.footer__links a:hover { color: var(--c-primary); }
.footer__links .ic { flex: none; }

.footer__legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding-bottom: 70px;
}
.footer__rule {
  width: 100%;
  height: 0.75px;
  background: var(--c-white);
  opacity: 0.24;
}
.footer__bloctel {
  max-width: 1064px;
  font: 400 15px/24px var(--f-body);
  text-align: center;
}
.footer__bloctel a { text-decoration: underline; color: var(--c-primary); }
.footer__copy {
  font: 400 15px/22.5px var(--f-body);
  letter-spacing: 1px;
  text-align: center;
}

/* Glyphes arabes isolés dans un texte français (ex. ﷺ) : Raleway ne les couvre pas */
span[lang="ar"] { font-family: var(--f-arabic); }

/* ================= Bandeau hero de page intérieure ================= */
.page-hero {
  position: relative;
  color: var(--c-white);
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.page-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--g-hero-veil);
}
.page-hero > .container {
  position: relative;
  z-index: 2;
}