/* Deux demi-fondus de 400 ms ; aucun masquage si JavaScript est désactivé. */
html.page-arriving::after,
html.page-leaving::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: #111113;
  pointer-events: none;
}
html.page-arriving::after { animation: sunhee-arrive 400ms ease-out both; }
html.page-leaving::after { animation: sunhee-leave 400ms ease-in both; }
@keyframes sunhee-arrive { from { opacity: 1; } to { opacity: 0; } }
@keyframes sunhee-leave { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html.page-arriving::after, html.page-leaving::after { display: none; }
}

/* Suit automatiquement les préférences de l’appareil, y compris leurs changements. */

html[data-theme="dark"] { color-scheme: dark; background: #111113; }
html[data-theme="dark"] body { background: #111113; color: #d0cbc5; }
html[data-theme="dark"] p, html[data-theme="dark"] .service-list li, html[data-theme="dark"] .image-note, html[data-theme="dark"] figcaption, html[data-theme="dark"] .product-photo figcaption { color: #d0cbc5; }
html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] .section-title, html[data-theme="dark"] .contact h2, html[data-theme="dark"] .service-card h2, html[data-theme="dark"] .footer h2, html[data-theme="dark"] .footer .footer-brand { color: #f6f4f1; }
html[data-theme="dark"] .section-title span, html[data-theme="dark"] .section-subtitle, html[data-theme="dark"] .service-number { color: #c5a643; }
html[data-theme="dark"] .footer, html[data-theme="dark"] .consultation-section, html[data-theme="dark"] .products-intro, html[data-theme="dark"] .product-new, html[data-theme="dark"] .booking-section, html[data-theme="dark"] .diagnostic, html[data-theme="dark"] .product-photo-packshot { background: #1b1b1e; }
html[data-theme="dark"] .footer p, html[data-theme="dark"] .footer a { color: #d0cbc5; }
html[data-theme="dark"] .footer a:hover, html[data-theme="dark"] .contact a:not(.button-1):not(.button-4):hover { color: #c5a643; }
html[data-theme="dark"] .footer-bottom, html[data-theme="dark"] .service-card, html[data-theme="dark"] .service-list li, html[data-theme="dark"] .hours div, html[data-theme="dark"] .product-feature, html[data-theme="dark"] .product-photo-packshot { border-color: #3d3b38; }
html[data-theme="dark"] .diagnostic { border-left-color: #c5a643; }
html[data-theme="dark"] .salon-map { background: #111113; }
html[data-theme="dark"] .map-frame { background: #111113; }
html[data-theme="dark"] .map-frame iframe { filter: grayscale(1) invert(.9) brightness(.85) contrast(.95); }
html[data-theme="dark"] .nav-scroll { background: #171719; }
html[data-theme="dark"] .nav-scroll .navbar-nav .nav-link, html[data-theme="dark"] .nav-scroll .navbar-toggler-icon, html[data-theme="dark"] .nav-scroll .icon-bar { color: #f6f4f1; }
html[data-theme="dark"] .navbar .navbar-nav .nav-link[aria-current], html[data-theme="dark"] .navbar .navbar-nav .nav-link:hover { color: #c5a643; }
html[data-theme="dark"] #bookingform label { color: #f6f4f1; }
html[data-theme="dark"] #bookingform input, html[data-theme="dark"] #bookingform select, html[data-theme="dark"] #bookingform textarea {
    background: #111113; color: #f6f4f1; border-color: #77716a;
  }
html[data-theme="dark"] #bookingform textarea::placeholder, html[data-theme="dark"] #bookingform input::placeholder { color: #aaa49d; }
html[data-theme="dark"] #bookingform .button-1 { background: #c5a643; color: #0b0b0d; }
html[data-theme="dark"] .contact p, html[data-theme="dark"] .contact p a { color: #d0cbc5; }
html[data-theme="dark"] .nav-scroll .logo-img { content: url("../img/logo.png"); }
html[data-theme="dark"] .button-4, html[data-theme="dark"] .button-4 span { color: #0b0b0d; }
html[data-theme="dark"] .button-4:hover, html[data-theme="dark"] .button-4:hover span { color: #f6f4f1; }
html[data-theme="dark"] .skip-link { background: #171719; color: #f6f4f1; }
html[data-theme="dark"] .product-badge { color: #0b0b0d; }
html[data-theme="dark"] .team .text .name, html[data-theme="dark"] .team .text .position { color: #fff; }
@media (max-width: 1199px) {
html[data-theme="dark"] .navbar .navbar-collapse { background: #171719; }
html[data-theme="dark"] .navbar .navbar-nav .nav-link { color: #f6f4f1; }
html[data-theme="dark"] .navbar .navbar-nav .nav-link[aria-current] { color: #c5a643; }
  }

@media (prefers-color-scheme: dark) {

html:not([data-theme]) { color-scheme: dark; background: #111113; }
html:not([data-theme]) body { background: #111113; color: #d0cbc5; }
html:not([data-theme]) p, html:not([data-theme]) .service-list li, html:not([data-theme]) .image-note, html:not([data-theme]) figcaption, html:not([data-theme]) .product-photo figcaption { color: #d0cbc5; }
html:not([data-theme]) h2, html:not([data-theme]) h3, html:not([data-theme]) h4, html:not([data-theme]) .section-title, html:not([data-theme]) .contact h2, html:not([data-theme]) .service-card h2, html:not([data-theme]) .footer h2, html:not([data-theme]) .footer .footer-brand { color: #f6f4f1; }
html:not([data-theme]) .section-title span, html:not([data-theme]) .section-subtitle, html:not([data-theme]) .service-number { color: #c5a643; }
html:not([data-theme]) .footer, html:not([data-theme]) .consultation-section, html:not([data-theme]) .products-intro, html:not([data-theme]) .product-new, html:not([data-theme]) .booking-section, html:not([data-theme]) .diagnostic, html:not([data-theme]) .product-photo-packshot { background: #1b1b1e; }
html:not([data-theme]) .footer p, html:not([data-theme]) .footer a { color: #d0cbc5; }
html:not([data-theme]) .footer a:hover, html:not([data-theme]) .contact a:not(.button-1):not(.button-4):hover { color: #c5a643; }
html:not([data-theme]) .footer-bottom, html:not([data-theme]) .service-card, html:not([data-theme]) .service-list li, html:not([data-theme]) .hours div, html:not([data-theme]) .product-feature, html:not([data-theme]) .product-photo-packshot { border-color: #3d3b38; }
html:not([data-theme]) .diagnostic { border-left-color: #c5a643; }
html:not([data-theme]) .salon-map { background: #111113; }
html:not([data-theme]) .map-frame { background: #111113; }
html:not([data-theme]) .map-frame iframe { filter: grayscale(1) invert(.9) brightness(.85) contrast(.95); }
html:not([data-theme]) .nav-scroll { background: #171719; }
html:not([data-theme]) .nav-scroll .navbar-nav .nav-link, html:not([data-theme]) .nav-scroll .navbar-toggler-icon, html:not([data-theme]) .nav-scroll .icon-bar { color: #f6f4f1; }
html:not([data-theme]) .navbar .navbar-nav .nav-link[aria-current], html:not([data-theme]) .navbar .navbar-nav .nav-link:hover { color: #c5a643; }
html:not([data-theme]) #bookingform label { color: #f6f4f1; }
html:not([data-theme]) #bookingform input, html:not([data-theme]) #bookingform select, html:not([data-theme]) #bookingform textarea {
    background: #111113; color: #f6f4f1; border-color: #77716a;
  }
html:not([data-theme]) #bookingform textarea::placeholder, html:not([data-theme]) #bookingform input::placeholder { color: #aaa49d; }
html:not([data-theme]) #bookingform .button-1 { background: #c5a643; color: #0b0b0d; }
html:not([data-theme]) .contact p, html:not([data-theme]) .contact p a { color: #d0cbc5; }
html:not([data-theme]) .nav-scroll .logo-img { content: url("../img/logo.png"); }
html:not([data-theme]) .button-4, html:not([data-theme]) .button-4 span { color: #0b0b0d; }
html:not([data-theme]) .button-4:hover, html:not([data-theme]) .button-4:hover span { color: #f6f4f1; }
html:not([data-theme]) .skip-link { background: #171719; color: #f6f4f1; }
html:not([data-theme]) .product-badge { color: #0b0b0d; }
html:not([data-theme]) .team .text .name, html:not([data-theme]) .team .text .position { color: #fff; }
@media (max-width: 1199px) {
html:not([data-theme]) .navbar .navbar-collapse { background: #171719; }
html:not([data-theme]) .navbar .navbar-nav .nav-link { color: #f6f4f1; }
html:not([data-theme]) .navbar .navbar-nav .nav-link[aria-current] { color: #c5a643; }
  }

}

/* Choix du thème, discret à côté des langues. */
.theme-picker{position:relative;order:3;margin-left:6px;flex-shrink:0;color:#f6f4f1}
.theme-picker summary{list-style:none;width:36px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:20px}
.theme-picker summary::-webkit-details-marker{display:none}
.theme-picker summary:hover,.theme-picker[open] summary{color:#c5a643}
.theme-picker summary:focus-visible{outline:2px solid #7f9fc6;outline-offset:2px}
.theme-picker svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* Mode clair : soleil visible, lune masquée */
.theme-picker .theme-sun { display: block; }
.theme-picker .theme-moon { display: none; }

/* Mode sombre : lune visible, soleil masqué */
html[data-theme="dark"] .theme-picker .theme-moon {
  display: block;
}
html[data-theme="dark"] .theme-picker .theme-sun {
  display: none;
}
.nav-scroll .theme-picker{color:#171719}
html[data-theme="dark"] .nav-scroll .theme-picker{color:#f6f4f1}
/* Compact panel: top-right corner stays square. */
.theme-options{position:absolute;right:0;top:calc(100% + 6px);width:164px;max-width:calc(100vw - 24px);margin:0;padding:10px 8px 8px;background:#f6f4f1;color:#171719;border:1px solid #c5a64366;border-radius:18px 0 18px 18px;box-shadow:0 8px 24px #0002;z-index:1100;box-sizing:border-box}
.theme-options-heading{font:500 10px/1.5 Outfit,sans-serif;letter-spacing:1.2px;text-transform:uppercase;padding:2px 10px 7px;color:#777068}
.theme-options label{display:flex;gap:9px;align-items:center;margin:0;padding:8px 10px;min-height:36px;cursor:pointer;font:400 13px/1.4 Outfit,sans-serif;border-radius:10px 0 10px 10px;white-space:nowrap}
.theme-options label:hover{background:#e9e3d5}
.theme-options label:has(input:checked){background:#c5a64326;color:#171719}
.theme-options label:focus-within{outline:2px solid #927b30;outline-offset:-2px}
.theme-options input{accent-color:#927b30;width:14px;height:14px;margin:0;flex-shrink:0}
html[data-theme="dark"] .theme-options{background:#1b1b1e;color:#f6f4f1}
html[data-theme="dark"] .theme-options-heading{color:#b8b0a3}
html[data-theme="dark"] .theme-options label:hover{background:#30302e}
html[data-theme="dark"] .theme-options label:has(input:checked){background:#c5a64326;color:#e9d99e}
@media(pointer:coarse){.theme-options label{min-height:44px}}
@media(max-width:1199px){.language-switch{margin-right:0}.theme-picker{order:2;margin-left:3px;margin-right:4px}.navbar .navbar-toggler{order:3}.navbar .navbar-collapse{order:4}}
@media(max-width:380px){.navbar .logo-img{max-width:100px}.theme-picker summary{width:32px}}