/* site/css/chrome.css */

/* ---- Header ---- */
.dsp-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-5);
  background: transparent;
  transition: background var(--dur-base) var(--ease-out),
              -webkit-backdrop-filter var(--dur-base) var(--ease-out),
              backdrop-filter var(--dur-base) var(--ease-out);
}
.dsp-header.scrolled {
  background: rgba(11,22,48,0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.dsp-header__logo img {
  height: 144px; width: auto; object-fit: contain;
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.45));
  image-rendering: -webkit-optimize-contrast;
}
.dsp-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.dsp-header__nav a {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: var(--tracking-nav);
  text-transform: none;
  color: var(--fg-on-dark);
  position: relative;
  padding-bottom: 4px;
}
.dsp-header__nav a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 1px; width: 0;
  background: var(--dsp-gold);
  transition: width var(--dur-base) var(--ease-out);
}
.dsp-header__nav a:hover { color: var(--fg-on-dark); }
.dsp-header__nav a:hover::after { width: 100%; }
.dsp-header__nav a.active { color: var(--accent); }
.dsp-header__nav a.active::after { width: 100%; }

.dsp-header__cta {
  background: var(--dsp-gold);
  color: var(--dsp-navy) !important;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-button);
  border: none;
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.dsp-header__cta:hover {
  background: var(--dsp-gold-hover) !important;
  color: var(--dsp-navy) !important;
  box-shadow: var(--shadow-gold-glow);
}
.dsp-header__cta::after { display: none !important; }
@media (max-width: 768px) { .dsp-header__cta { display: none; } }

.dsp-header__burger {
  display: none;
  background: none; border: none; cursor: pointer;
  color: var(--fg-on-dark); padding: var(--space-2);
}

/* Mobile drawer */
.dsp-drawer {
  position: fixed;
  top: 0; right: 0;
  width: 280px; height: 100vh; height: 100dvh;
  background: var(--bg-primary);
  border-left: 1px solid var(--border-on-dark);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  padding: var(--space-9) var(--space-7);
  gap: var(--space-6);
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-out);
}
.dsp-drawer.open { transform: translateX(0); }
.dsp-drawer__close {
  position: absolute;
  top: var(--space-5); right: var(--space-5);
  background: none; border: none; cursor: pointer;
  color: var(--fg-on-dark);
}
.dsp-drawer a {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 400;
  color: var(--fg-on-dark);
  letter-spacing: var(--tracking-nav);
}
.dsp-drawer a:hover { color: var(--accent); }

.dsp-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1050;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.dsp-overlay.visible { opacity: 1; pointer-events: auto; }

/* ---- Footer ---- */
.dsp-footer {
  background: var(--bg-soft);
  border-top: 1px solid var(--border-on-dark);
  padding: var(--space-9) 0 var(--space-6);
}
.dsp-footer__brand {
  display: block; text-align: center; margin-bottom: var(--space-8);
}
.dsp-footer__brand img {
  height: 260px; width: auto; object-fit: contain; margin: 0 auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); image-rendering: -webkit-optimize-contrast;
}
.dsp-footer__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5) var(--space-7); flex-wrap: wrap;
}
.dsp-footer__social { display: flex; gap: var(--space-3); }
.dsp-social {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-elevated); border: 1px solid var(--border-on-dark);
  color: var(--fg-on-dark);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.dsp-social:hover { background: var(--dsp-gold-12); border-color: var(--dsp-gold-hover); color: var(--accent); transform: translateY(-2px); }
.dsp-social svg { stroke-width: 1.6; }
.dsp-social__g { font-weight: 600; font-size: 18px; line-height: 1; }
.dsp-footer__contact {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-7);
}
.dsp-footer__cline {
  display: inline-flex; align-items: center; gap: var(--space-3);
  color: var(--fg-on-dark); font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.02em;
}
.dsp-footer__cline i, .dsp-footer__cline svg { color: var(--accent); }
.dsp-footer__cline:hover { color: var(--accent); }
.dsp-footer__sep {
  border: none; height: 1px; background: var(--border-on-dark);
  margin: var(--space-7) 0 var(--space-5);
}
.dsp-footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
}
.dsp-footer__copy { font-size: var(--fs-small); color: var(--fg-on-dark-muted); }
.dsp-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.dsp-footer__legal a { font-size: var(--fs-small); color: var(--fg-on-dark-muted); }
.dsp-footer__legal a:hover { color: var(--accent); }
.dsp-footer__legal span { color: var(--fg-on-dark-muted); opacity: 0.45; }
.dsp-footer__identity { font-size: 0.72rem; line-height: 1.7; color: var(--fg-on-dark-muted); opacity: 0.85; margin: 0 0 var(--space-4); }

@media (max-width: 768px) {
  .dsp-header__nav { display: none; }
  .dsp-header__burger { display: flex; }
  .dsp-footer__row { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .dsp-footer__brand img { height: 108px; }
  .dsp-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
}

/* ===== Responsive — logo header réduit en mobile ===== */
@media (max-width: 768px) {
  .dsp-header { padding: var(--space-1) var(--space-4); justify-content: flex-end; }
  .dsp-header__logo img { height: 90px; }
}

/* ===== Alternance navy / clair — sections claires (générique, toutes pages) ===== */
.section--light { background: var(--bg-light) !important; border-color: var(--border-on-light) !important; }
.section--light .eyebrow { color: var(--accent); }
.section--light h1, .section--light h2, .section--light h3, .section--light h4,
.section--light .univers-section__title, .section--light .etude-section__head h2,
.section--light .why-container__title, .section--light .univers-preview__title,
.section--light .faq__head h2, .section--light .gallery-block__head h3,
.section--light .univers-section__text, .section--light p, .section--light li,
.section--light .lead, .section--light address { color: var(--fg-on-light); }
.section--light em { color: var(--accent); }
.section--light strong { color: var(--accent); }
.section--light .right-eb, .section--light .num, .section--light .gallery-block__hint,
.section--light .univers-section__eyebrow { color: var(--fg-on-light-muted); }
.section--light .eyebrow { color: var(--accent); }
.section--light hr { border-color: var(--border-on-light); }
.section--light .faq__item { border-color: var(--border-on-light); }
.section--light .faq__item summary .q { color: var(--fg-on-light); }

/* ===== Sections claires — blancs -> navy (or conservé), cartes sombres protégées ===== */
.section--light { color: var(--fg-on-light); }
/* textes secondaires lisibles sur bone */
.section--light .right-eb, .section--light .num, .section--light .gallery-block__hint,
.section--light .univers-section__tagline, .section--light .univers-preview__tagline,
.section--light .form-note { color: var(--fg-on-light-muted); }
/* Cartes sombres dans une section claire : garder le texte clair (sinon navy/navy illisible) */
.section--light .why-cell h3, .section--light .deliverable h3, .section--light .method .step h4,
.section--light .guarantee h4, .section--light .why-card h3, .section--light .home-duo__title {
  color: var(--fg-on-dark);
}
.section--light .why-cell p, .section--light .deliverable p, .section--light .method .step p,
.section--light .guarantee p, .section--light .why-card p, .section--light .home-duo__tagline,
.section--light .home-duo__col p { color: #fff; }
.section--light .deliverable .tag, .section--light .why-cell .micro, .section--light .method .step .meta { color: var(--dsp-gold); }

/* Accroche (clef en main) sur section claire — texte blanc -> navy */
.section--light .subsection-accroche p { color: var(--fg-on-light); }

/* Cartes offres (sombres) sur section claire — texte clair */
.section--light .offer-card, .section--light .offer-shared-features { color: var(--fg-on-dark); }
.section--light .offer-card__containers { color: #fff; }
.section--light .offer-shared-features__title { color: var(--fg-on-dark); }
.section--light .offer-shared-features__list li { color: #fff; }

/* Têtes de galerie / notes sur section claire — texte -> navy (gras/or conservés) */
.section--light .gallery-80__head h3,
.section--light .gallery-block__head h3,
.section--light .materials-note p,
.section--light .gallery-80__hint { color: var(--fg-on-light); }

.section--light .offer-shared-features__note { color: #fff; }

/* Sections claires — corps univers en navy (lisible) + titre navy */
.section--light .univers-section__text p, .section--light .univers-section__sub,
.section--light .univers-section__muted, .section--light .univers-section__services li { color: var(--fg-on-light-muted); }
.section--light .univers-section__title, .section--light .univers-section__text h2 { color: var(--fg-on-light); }
/* Eyebrows / petits labels dorés — taille x2 + gras (toutes pages) */
.eyebrow, .right-eb { font-size: calc(var(--fs-eyebrow) * 2) !important; font-weight: 700 !important; }

.section--light .right-eb { color: var(--accent); }

/* Logo header — absolu haut-gauche : n'affecte pas la hauteur du nav,
   disparait au scroll (comme le contenu du hero) */
.dsp-header__logo {
  display: block;
  position: absolute;
  top: var(--space-2); left: var(--space-5);
  z-index: 1001;
  transition: opacity var(--dur-base) var(--ease-out);
}
.dsp-header.scrolled .dsp-header__logo { opacity: 0; pointer-events: none; }

/* Pages a fond clair en haut (ex: Realisations) — header navy permanent pour lisibilite nav blanche */
body.solid-header .dsp-header {
  background: rgba(11,22,48,0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}