/* Styles actifs uniquement lorsque le site est lancé depuis l'application installée. */
html.studio181-app-mode body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
html.studio181-app-mode .site-header .socials,
html.studio181-app-mode .site-header .main-nav,
html.studio181-app-mode .site-header .lang-switch,
html.studio181-app-mode .site-header .menu-toggle{display:none!important}
html.studio181-app-mode .site-header{min-height:76px;display:flex!important;align-items:center!important;justify-content:center!important;padding-left:20px!important;padding-right:20px!important}
html.studio181-app-mode .site-header .brand{position:static!important;margin:0 auto!important;transform:none!important}
html.studio181-app-mode .site-header .brand img{max-height:54px!important;width:auto!important}
html.studio181-app-mode .mobile-menu{display:none!important}
html.studio181-app-mode .site-footer{padding-bottom:90px}
.studio181-app-nav{position:fixed;z-index:9990;left:10px;right:10px;bottom:calc(18px + env(safe-area-inset-bottom));height:58px;padding:0 7px;display:flex;align-items:stretch;justify-content:space-around;background:rgba(9,9,9,.88);border:1px solid rgba(255,255,255,.12);border-radius:18px;box-shadow:0 12px 32px rgba(0,0,0,.34);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.studio181-app-nav a{min-width:0;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:rgba(255,255,255,.68);text-decoration:none;font:500 7px/1 Montserrat,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.studio181-app-nav a[aria-current="page"]{color:#fff}
.studio181-app-nav svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:900px){.studio181-app-nav{left:50%;right:auto;width:520px;transform:translateX(-50%)}}


/* ===== Automatic night mode — installed app only ===== */
html.studio181-app-mode.studio181-night {
  color-scheme: dark;
  --bg:#0b0b0b;
  --ink:#f1eee8;
  --soft:#b9b3aa;
  --line:#3a3834;
  background:#0b0b0b;
}
html.studio181-app-mode.studio181-night body {
  background:#0b0b0b!important;
  color:#f1eee8!important;
  transition:background-color .35s ease,color .35s ease;
}
html.studio181-app-mode.studio181-night .site-header .brand img {
  content:url('assets/images/logo-studio181-night.webp');
}
html.studio181-app-mode.studio181-night .site-header,
html.studio181-app-mode.studio181-night .contact-page,
html.studio181-app-mode.studio181-night .contact-hero,
html.studio181-app-mode.studio181-night .about-page,
html.studio181-app-mode.studio181-night .work-page,
html.studio181-app-mode.studio181-night .project-brief,
html.studio181-app-mode.studio181-night .commission-section {
  background-color:#0b0b0b!important;
}
html.studio181-app-mode.studio181-night h1,
html.studio181-app-mode.studio181-night h2,
html.studio181-app-mode.studio181-night h3,
html.studio181-app-mode.studio181-night .project-brief h2,
html.studio181-app-mode.studio181-night .commission-section h2,
html.studio181-app-mode.studio181-night .project-brief-grid h3,
html.studio181-app-mode.studio181-night .portrait-legacy h2,
html.studio181-app-mode.studio181-night .contact-info strong,
html.studio181-app-mode.studio181-night label {
  color:#f1eee8!important;
}
html.studio181-app-mode.studio181-night p,
html.studio181-app-mode.studio181-night .contact-intro,
html.studio181-app-mode.studio181-night .contact-small,
html.studio181-app-mode.studio181-night .project-brief-grid p,
html.studio181-app-mode.studio181-night .project-brief-note,
html.studio181-app-mode.studio181-night .form-reassurance,
html.studio181-app-mode.studio181-night .commission-section p,
html.studio181-app-mode.studio181-night .portrait-legacy-grid p {
  color:#b9b3aa!important;
}
html.studio181-app-mode.studio181-night a { color:inherit; }
html.studio181-app-mode.studio181-night .contact-form input,
html.studio181-app-mode.studio181-night .contact-form textarea,
html.studio181-app-mode.studio181-night .contact-form select {
  background:#111!important;
  color:#f1eee8!important;
  border-color:#504c45!important;
}
html.studio181-app-mode.studio181-night .contact-form input:focus,
html.studio181-app-mode.studio181-night .contact-form textarea:focus,
html.studio181-app-mode.studio181-night .contact-form select:focus {
  border-color:#f1eee8!important;
}
html.studio181-app-mode.studio181-night .contact-form input::placeholder,
html.studio181-app-mode.studio181-night .contact-form textarea::placeholder {
  color:#777!important;
}
html.studio181-app-mode.studio181-night .contact-form select {
  background-image:linear-gradient(45deg,transparent 50%,#aaa 50%),linear-gradient(135deg,#aaa 50%,transparent 50%)!important;
}
html.studio181-app-mode.studio181-night .line,
html.studio181-app-mode.studio181-night hr {
  border-color:#3a3834!important;
  background:#3a3834!important;
}
html.studio181-app-mode.studio181-night .studio181-app-nav {
  background:rgba(20,20,20,.92);
  border-color:rgba(255,255,255,.13);
}

/* ===== Studio 181 — Global automatic night mode V6 ===== */
html.studio181-night {
  color-scheme: dark;
  --bg:#0b0b0b;
  --ink:#f1eee8;
  --soft:#b9b3aa;
  --line:#34312d;
  background:#0b0b0b;
}

html.studio181-night body {
  background:#0b0b0b;
  color:#f1eee8;
}

/* Refined transition: enough to feel deliberate, never flashy. */
html.studio181-night body,
html.studio181-night .site-header,
html.studio181-night .site-footer,
html.studio181-night .mobile-menu-inner,
html.studio181-night .offer-card,
html.studio181-night .project-brief,
html.studio181-night .commission-section,
html.studio181-night .contact-form input,
html.studio181-night .contact-form textarea,
html.studio181-night .contact-form select {
  transition:background-color .38s ease,color .38s ease,border-color .38s ease;
}

/* Logo: dedicated light mark on the dark canvas. */
html.studio181-night .site-header .brand img {
  content:url('assets/images/logo-studio181-night.webp');
}

/* Surfaces */
html.studio181-night .site-header,
html.studio181-night .site-footer,
html.studio181-night .about-page,
html.studio181-night .contact-page,
html.studio181-night .contact-hero,
html.studio181-night .work-page,
html.studio181-night .project-brief,
html.studio181-night .commission-section,
html.studio181-night .legal-page,
html.studio181-night .portrait-selector,
html.studio181-night .work-credibility,
html.studio181-night .work-philosophy,
html.studio181-night .usage-rights,
html.studio181-night .reference-strip {
  background-color:#0b0b0b!important;
}

/* Headings / primary type */
html.studio181-night h1,
html.studio181-night h2,
html.studio181-night h3,
html.studio181-night h4,
html.studio181-night .about-hero h1,
html.studio181-night .about-content h2,
html.studio181-night .about-values h3,
html.studio181-night .work-hero h1,
html.studio181-night .offer-card h2,
html.studio181-night .process h2,
html.studio181-night .process-grid h3,
html.studio181-night .work-cta h2,
html.studio181-night .portrait-legacy h2,
html.studio181-night .work-philosophy h2,
html.studio181-night .usage-rights h2,
html.studio181-night .work-credibility h2,
html.studio181-night .project-brief h2,
html.studio181-night .project-brief-grid h3,
html.studio181-night .commission-section h2,
html.studio181-night .portfolio-chapter h2,
html.studio181-night .portrait-selector-card h2,
html.studio181-night .legal-content h1,
html.studio181-night .legal-content h2,
html.studio181-night .legal-content h3,
html.studio181-night .contact-info h2,
html.studio181-night label {
  color:#f1eee8!important;
}

/* Secondary editorial type */
html.studio181-night .about-content,
html.studio181-night .about-name,
html.studio181-night .about-values p,
html.studio181-night .contact-hero p,
html.studio181-night .work-hero p,
html.studio181-night .work-intro,
html.studio181-night .offer-for,
html.studio181-night .offer-card ul,
html.studio181-night .offer-price-note,
html.studio181-night .work-note p,
html.studio181-night .process-grid p,
html.studio181-night .work-cta p,
html.studio181-night .portrait-legacy-grid p,
html.studio181-night .work-philosophy-grid p,
html.studio181-night .usage-rights p,
html.studio181-night .work-credibility > p,
html.studio181-night .project-brief-grid p,
html.studio181-night .project-brief-note,
html.studio181-night .contact-intro,
html.studio181-night .contact-small,
html.studio181-night .form-reassurance,
html.studio181-night .commission-section p,
html.studio181-night .portfolio-chapter p,
html.studio181-night .gallery-hero p,
html.studio181-night .legal-content p {
  color:#b9b3aa!important;
}

html.studio181-night .about-values span,
html.studio181-night .work-hero span,
html.studio181-night .offer-number,
html.studio181-night .section-kicker,
html.studio181-night .project-brief-grid > div > span,
html.studio181-night .commission-details span,
html.studio181-night .portfolio-chapter span,
html.studio181-night .gallery-hero span {
  color:#8f8980!important;
}

/* Navigation, language and interface controls */
html.studio181-night .site-header,
html.studio181-night .site-header a,
html.studio181-night .site-footer,
html.studio181-night .site-footer a,
html.studio181-night .socials,
html.studio181-night .socials a,
html.studio181-night .lang-switch,
html.studio181-night .lang-switch a,
html.studio181-night .menu-toggle {
  color:#f1eee8!important;
}

html.studio181-night .menu-toggle:focus-visible,
html.studio181-night .menu-close:focus-visible {
  outline-color:rgba(241,238,232,.38)!important;
}

/* Mobile drawer becomes a true night interface instead of a white sheet. */
@media (max-width:900px) {
  html.studio181-night .mobile-menu {
    background:rgba(0,0,0,.58);
  }
  html.studio181-night .mobile-menu-inner {
    background:#10100f!important;
    color:#f1eee8!important;
    box-shadow:18px 0 60px rgba(0,0,0,.42);
  }
  html.studio181-night .mobile-menu-top,
  html.studio181-night .mobile-menu-footer {
    border-color:rgba(241,238,232,.12)!important;
  }
  html.studio181-night .mobile-menu-nav a,
  html.studio181-night .mobile-menu-footer a,
  html.studio181-night .menu-close {
    color:#f1eee8!important;
  }
}

/* Cards, chapters and editorial dividers */
html.studio181-night .offer-card {
  border-color:#34312d!important;
  background:#0d0d0c;
}
html.studio181-night .portrait-selector-card,
html.studio181-night .portrait-selector-card:visited,
html.studio181-night .portrait-selector-card:hover,
html.studio181-night .portrait-selector-card:focus-visible,
html.studio181-night .portrait-selector-card h2,
html.studio181-night .portrait-selector-card p,
html.studio181-night .portrait-selector-card .portrait-selector-kicker {
  color:#f1eee8!important;
  background:transparent!important;
}
html.studio181-night .portrait-selector-card p { opacity:.58; }
html.studio181-night .portrait-selector-card:hover p,
html.studio181-night .portrait-selector-card:focus-visible p { opacity:.8; }
html.studio181-night .line,
html.studio181-night .footer-line,
html.studio181-night .instagram-title .line,
html.studio181-night hr {
  background:#34312d!important;
  border-color:#34312d!important;
}
html.studio181-night .about-values,
html.studio181-night .portrait-legacy,
html.studio181-night .project-brief,
html.studio181-night .commission-section,
html.studio181-night .usage-rights,
html.studio181-night .work-philosophy {
  border-color:#34312d!important;
}

/* Forms: deep neutral fields, high-end rather than "inverted website". */
html.studio181-night .contact-form input,
html.studio181-night .contact-form textarea,
html.studio181-night .contact-form select {
  background:#11110f!important;
  color:#f1eee8!important;
  border-color:#4a4640!important;
  caret-color:#f1eee8;
}
html.studio181-night .contact-form input:focus,
html.studio181-night .contact-form textarea:focus,
html.studio181-night .contact-form select:focus {
  border-color:#d8d3ca!important;
}
html.studio181-night .contact-form input::placeholder,
html.studio181-night .contact-form textarea::placeholder {
  color:#77736d!important;
}
html.studio181-night .contact-form select {
  background-image:linear-gradient(45deg,transparent 50%,#aaa59d 50%),linear-gradient(135deg,#aaa59d 50%,transparent 50%)!important;
}
html.studio181-night .contact-form button,
html.studio181-night .cta-button {
  background:#eeeae2!important;
  color:#111!important;
}
html.studio181-night .contact-form button:hover,
html.studio181-night .cta-button:hover { opacity:.82; }

/* Small text links retain hierarchy without becoming stark white. */
html.studio181-night .home-services p,
html.studio181-night .reference-strip p,
html.studio181-night .reference-names,
html.studio181-night .commission-details,
html.studio181-night .price,
html.studio181-night .legal-content,
html.studio181-night .form-privacy {
  color:#b9b3aa;
}
html.studio181-night .home-services a,
html.studio181-night .reference-strip a,
html.studio181-night .reference-names a,
html.studio181-night .text-cta,
html.studio181-night .legal-cookie-button {
  color:#e7e2da;
}

/* Third-party placeholders and legal controls */
html.studio181-night .third-party-placeholder {
  border-color:rgba(241,238,232,.18);
  color:#b9b3aa;
}

/* App bottom bar remains slightly lifted from the web night canvas. */
html.studio181-app-mode.studio181-night .studio181-app-nav {
  background:rgba(18,18,17,.92);
  border-color:rgba(255,255,255,.13);
  box-shadow:0 12px 32px rgba(0,0,0,.5);
}

@media (prefers-reduced-motion: reduce) {
  html.studio181-night body,
  html.studio181-night .site-header,
  html.studio181-night .site-footer,
  html.studio181-night .mobile-menu-inner,
  html.studio181-night .offer-card,
  html.studio181-night .project-brief,
  html.studio181-night .commission-section,
  html.studio181-night .contact-form input,
  html.studio181-night .contact-form textarea,
  html.studio181-night .contact-form select {
    transition:none!important;
  }
}