/* Normalisation */
*, *::before, *::after { box-sizing: border-box; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }

/* Thèmes et variables */
/* Papier, encre, bronze. Les couleurs des composants viennent de ces tokens. */
:root {
    color-scheme: light dark;
    --color-bg: #f1eadc;
    --color-bg-secondary: #e5d8c2;
    --color-surface: #f8f2e7;
    --color-text: #282017;
    --color-text-muted: #64513e;
    --color-gold: #76532c;
    --color-bronze: #806242;
    --color-border: #ad9472;
    --color-ornament: #92704b;
    --color-shadow: #28201718;
    --color-grain: #67523b0a;
    --color-button: #332619;
    --color-button-text: #fbf4e8;
    --color-hover: #60482f;
    --color-focus: #745020;
    --color-sign-bg: #13100d;
    --color-sign-text: #e1bf93;
    --color-sign-muted: #be9c73;
    --color-sign-border: #67523b;
    --color-texture-fibre: #80624204;
    --color-texture-grain: #80624205;
    --color-texture-glow: #fff4dc32;
    --color-texture-edge: #4530180c;
    --color-art-bg: #e8dcc6;
    --color-art-text: #82603b;
    --color-art-border: #ad9472;
    --frame-watermark-opacity: .05;
    --font-display: Georgia, "Times New Roman", serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --page-gutter: clamp(1.125rem, 4.4vw, 3.5rem);
    --frame-margin: 4px;
    --section-space: clamp(3rem, 6vw, 6rem);
}
@media (prefers-color-scheme: dark) {
:root {
        --color-bg: #070605;
        --color-bg-secondary: #13100d;
        --color-surface: #19140f;
        --color-text: #f0e4d3;
        --color-text-muted: #beac95;
        --color-gold: #e1bf93;
        --color-bronze: #be9c73;
        --color-border: #67523b;
        --color-ornament: #8d7559;
        --color-shadow: #00000040;
        --color-grain: #be9c7308;
        --color-button: #e1bf93;
        --color-button-text: #19140f;
        --color-hover: #f0d3ad;
        --color-focus: #f0d3ad;
        --color-texture-fibre: #be9c7303;
        --color-texture-grain: #be9c7303;
        --color-texture-glow: #67523b1b;
        --color-texture-edge: #00000035;
        --color-art-bg: #100d09;
        --color-art-text: #9b7c56;
        --color-art-border: #564330;
        --frame-watermark-opacity: .065;
    }
}

:root { --color-backdrop: #13100d99; }

/* Texte, liens et accessibilité */
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
    margin: 0;
    padding-inline: max(0px, calc(env(safe-area-inset-left, 0px) - var(--frame-margin))) max(0px, calc(env(safe-area-inset-right, 0px) - var(--frame-margin)));
    background-color: var(--color-bg);
    color: var(--color-text);
    font: 1rem/1.65 var(--font-body);
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: .3em; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, summary:focus-visible, button:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 5px;
    border-radius: 2px;
}
main:focus { outline: none; }
::selection { background: var(--color-button); color: var(--color-button-text); }
h1, h2 { font-weight: 400; text-wrap: balance; }
section[id], footer[id] { scroll-margin-top: 5rem; }
.skip-link {
    position: absolute;
    z-index: 5;
    inset: .6rem auto auto .6rem;
    padding: .75rem 1rem;
    background: var(--color-button);
    color: var(--color-button-text);
    transform: translateY(-180%);
}
.skip-link:focus { transform: none; }

[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Structure et safe areas */
/* Le retrait extérieur tient compte de toutes les safe areas, sans détection d’appareil. */
.poster-frame {
    position: relative;
    width: calc(100% - 2 * var(--frame-margin));
    max-width: 1560px;
    margin: max(var(--frame-margin), env(safe-area-inset-top, 0px)) auto max(var(--frame-margin), env(safe-area-inset-bottom, 0px));
    border: 1px solid var(--color-border);
    isolation: isolate;
}
.site-header, main, .site-footer { position: relative; z-index: 1; }
main { padding-inline: max(var(--page-gutter), env(safe-area-inset-left, 0px)) max(var(--page-gutter), env(safe-area-inset-right, 0px)); }

/* Header, footer et commandes réutilisables */
.site-header { margin-inline: max(var(--page-gutter), env(safe-area-inset-left, 0px)) max(var(--page-gutter), env(safe-area-inset-right, 0px)); border-bottom: 1px solid var(--color-border); }
.header-note {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding-block: 1.5rem .4rem;
    color: var(--color-text-muted);
    font-size: .7rem;
    letter-spacing: .07em;
    text-align: center;
}
.note-dot { color: var(--color-bronze); margin-inline: .4rem; }
.header-socials { display: flex; gap: .5rem; }
.social-icon { width: 24px; height: 24px; flex-shrink: 0; }
.social-label { display: none; }
.header-socials a { display: inline-flex; min-width: 48px; min-height: 48px; align-items: center; justify-content: center; gap: .5rem; }
.header-socials a:hover { color: var(--color-gold); }
.desktop-masthead { display: grid; align-items: center; }
.brand {
    display: block;
    position: relative;
    width: 100%;
    max-width: 340px;
    justify-self: center;
    padding-block: .5rem 1.2rem;
    text-decoration: none;
    text-align: center;
}
.brand-cartouche {
    display: block;
    padding: .7rem .8rem;
    background: var(--color-sign-bg);
    border: 1px solid var(--color-sign-border);
    outline: 1px solid var(--color-sign-border);
    outline-offset: -5px;
    border-radius: 0;
    box-shadow: 0 7px 20px var(--color-shadow);
    position: relative;
}
.brand-cartouche::before, .brand-cartouche::after { content: ""; position: absolute; width: 11px; height: 11px; border: 1px solid var(--color-sign-muted); pointer-events: none; }
.brand-cartouche::before { left: 4px; top: 4px; border-right: 0; border-bottom: 0; }
.brand-cartouche::after { right: 4px; bottom: 4px; border-left: 0; border-top: 0; }
.brand-logo { width: 100%; height: auto; }
.brand-caption { padding-top: .3rem; display: block; margin-top: .3rem; font-size: .65rem; text-transform: uppercase; letter-spacing: .17em; }
.brand-caption span { margin-inline: .55rem; color: var(--color-bronze); }
.desktop-nav { display: none; }
.nav-list a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-size: 1rem; }
.nav-list a:hover, .nav-list a[aria-current="page"] { color: var(--color-gold); text-decoration: underline; }
.mobile-call { display: flex; justify-content: space-between; min-height: 44px; align-items: center; margin-top: .6rem; color: var(--color-gold); font-size: .85rem; }
.button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.3rem;
    min-height: 50px;
    padding: .7rem 1.1rem;
    border: 1px solid var(--color-bronze);
    text-decoration: none;
    font-size: .85rem;
    font-weight: 600;
    transition: background-color .15s, color .15s;
}
.button-primary { background: var(--color-button); color: var(--color-button-text); border-color: var(--color-button); }
.button-primary:hover { background: var(--color-hover); border-color: var(--color-hover); }
.button-secondary:hover { background: var(--color-surface); }
.button span { font-size: 1.1rem; }
.text-link { display: inline-flex; align-items: center; gap: 1rem; min-height: 44px; color: var(--color-gold); font-size: .85rem; font-weight: 600; }
.text-link:hover { text-decoration-thickness: 2px; }
.site-footer { margin-top: var(--section-space); padding: var(--section-space) max(var(--page-gutter), env(safe-area-inset-right, 0px)) 1.5rem max(var(--page-gutter), env(safe-area-inset-left, 0px)); background: var(--color-bg-secondary); }
.footer-grid { display: grid; gap: 2.5rem; }
.footer-address h2 { margin-top: .8rem; font: clamp(1.6rem, 3vw, 2.4rem)/1.35 var(--font-display); letter-spacing: -.035em; }
.footer-brand { margin-top: 1.5rem; font-weight: 600; font-size: .9rem; }
address { font-style: normal; margin-top: .5rem; color: var(--color-text-muted); font-size: .9rem; }
.phone-link { display: block; width: fit-content; margin-top: .8rem; padding-block: .6rem; font-size: 1.05rem; font-weight: 600; }
.footer-title { font: 600 1rem/1.6 var(--font-body); }
.hours-note { margin-block: .25rem 1rem; color: var(--color-text-muted); font-size: .8rem; }
.hours-row { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .3rem; padding-block: .6rem; border-bottom: 1px solid var(--color-border); font-size: .8rem; }
.hours-row dt { color: var(--color-text-muted); }
.hours-row dd { text-align: right; font-variant-numeric: tabular-nums; }
.hours-interval { display: inline-block; white-space: nowrap; }
.hours-separator { display: inline-block; margin-inline: .1rem; color: var(--color-text-muted); }
.hours-continuous { display: inline-block; color: var(--color-gold); font-size: .65rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.footer-address .text-link { margin-top: .6rem; }
.footer-links { display: grid; gap: 2rem; padding-top: 2rem; margin-top: 2.5rem; border-top: 1px solid var(--color-border); }
.footer-link-list { margin-top: .6rem; }
.footer-link-list a { display: inline-flex; align-items: center; gap: .7rem; min-height: 44px; font-size: .85rem; text-decoration: none; }
.footer-link-list a:hover { text-decoration: underline; color: var(--color-gold); }
.footer-link-list span { color: var(--color-gold); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--color-border); font-size: .7rem; color: var(--color-text-muted); }
.footer-bottom p, .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; gap: .6rem; }
/* Une seule commande d’itinéraire, deux destinations natives accessibles. */
.directions-menu { position: relative; min-width: 150px; width: fit-content; }
.directions-menu summary { display: flex; align-items: center; justify-content: space-between; gap: 1.3rem; min-height: 50px; padding: .7rem 1.1rem; border: 1px solid var(--color-bronze); cursor: pointer; font-size: .85rem; font-weight: 600; list-style: none; }
.directions-menu summary::-webkit-details-marker { display: none; }
.directions-menu[open] summary { background: var(--color-surface); }
.directions-menu nav { display: grid; min-width: 180px; padding: .3rem .8rem; border: 1px solid var(--color-border); background: var(--color-surface); margin-top: .4rem; }
.directions-menu nav a { display: flex; justify-content: space-between; align-items: center; gap: .8rem; min-height: 48px; font-size: .85rem; }
.footer-address .directions-menu { margin-top: 1rem; }
@media (min-width: 600px) {
.header-note { flex-direction: row; justify-content: space-between; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 3rem 2rem; }
.footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
.header-note { padding-block: .75rem; border-bottom: 1px solid var(--color-border); }
.social-label { display: inline; }
.header-socials { gap: 1rem; }
.desktop-masthead { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(.6rem, 1.2vw, 1.5rem); padding-block: 1.4rem; }
.brand { padding: 0; width: clamp(280px, 25vw, 360px); }
.brand-cartouche { padding: .9rem 1rem; }
.desktop-nav { display: block; }
.desktop-nav .nav-list { display: flex; gap: clamp(.75rem, 1.4vw, 1.7rem); }
.desktop-nav .nav-list a { font-size: clamp(1rem, 1.25vw, 1.2rem); font-weight: 500; min-height: 50px; }
.desktop-nav-end .nav-list { justify-content: flex-end; }
.footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; }
.footer-links { grid-template-columns: 1.15fr 1fr 1fr; gap: 2.5rem; }
}

/* Accessible native modal; without JS the mobile navigation stays in the page. */
.mobile-fallback summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; border-top: 1px solid var(--color-border); padding: .5rem 0; font-size: 1rem; cursor: pointer; list-style: none; }
.mobile-fallback summary::-webkit-details-marker { display: none; }
.mobile-fallback summary svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.mobile-fallback .nav-list { display: grid; grid-template-columns: 1fr 1fr; }
.navigation-ready .mobile-fallback { display: none; }
.menu-trigger, .menu-close { display: flex; align-items: center; justify-content: space-between; min-height: 48px; border: 0; background: transparent; cursor: pointer; }
.menu-trigger svg, .menu-close svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.site-header > .menu-trigger { width: 100%; border-top: 1px solid var(--color-border); padding: .5rem 0; font-size: 1rem; }
.menu-close { min-width: 48px; justify-content: center; }
.menu-panel { width: min(620px, calc(100% - 32px)); max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); margin: max(16px, env(safe-area-inset-top, 0px)) auto; padding: clamp(1.2rem, 4vw, 2rem); color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-bronze); outline: 1px solid var(--color-border); outline-offset: -6px; }
.menu-panel:not([open]) { display: none; }
.menu-panel::backdrop { background: var(--color-backdrop); }
.menu-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); }
.menu-panel-heading h2 { font: 1.5rem/1.25 var(--font-display); }
.menu-panel .nav-list { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding-top: 1rem; }
.menu-panel .nav-list a { min-height: 48px; }
.compact-nav { position: fixed; z-index: 10; top: max(8px, env(safe-area-inset-top, 0px)); left: max(8px, env(safe-area-inset-left, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); width: auto; max-width: 780px; margin-inline: auto; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 2px; padding: 3px 4px; background: var(--color-bg-secondary); color: var(--color-text); border: 1px solid var(--color-bronze); visibility: hidden; transform: translateY(-150%); pointer-events: none; }
.compact-nav.is-visible { visibility: visible; transform: none; pointer-events: auto; transition: transform .16s ease-out; }
.compact-nav > a { display: flex; align-items: center; justify-content: center; min-height: 48px; min-width: 48px; font-size: clamp(.72rem, 1.5vw, .9rem); font-weight: 600; text-decoration: none; }
.compact-nav .compact-brand { width: 64px; padding: 4px; background: var(--color-sign-bg); border: 1px solid var(--color-sign-border); }
.compact-logo { width: 100%; height: auto; }
.compact-menu-trigger { min-width: 48px; justify-content: center; }
@media (min-width: 600px) { .compact-nav { padding-inline: 1rem; gap: .5rem; }.compact-nav .compact-brand { width: 115px; } }
@media (min-width: 1000px) { .mobile-fallback, .site-header > .menu-trigger { display: none; } }

/* Static lines/SVG, no full-page masks or procedural repeating gradients. */
.poster-frame {
    background-image: url("../images/decor/abdel-barber-grain-light.webp"), linear-gradient(90deg, var(--color-texture-edge), transparent 16% 84%, var(--color-texture-edge));
    background-size: 128px 128px, auto;
}
@media (prefers-color-scheme: dark) {
    .poster-frame { background-image: url("../images/decor/abdel-barber-grain-dark.webp"), linear-gradient(90deg, var(--color-texture-edge), transparent 16% 84%, var(--color-texture-edge)); }
}
.frame-decoration { position: absolute; inset: 0; z-index: 2; color: var(--color-ornament); pointer-events: none; }
.frame-decoration * { pointer-events: none; }
.ornament-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.frame-filet { position: absolute; inset: 5px; }
.frame-filet-inner { inset: 10px; }
.frame-line { position: absolute; display: block; background: currentColor; opacity: .4; }
.frame-filet-inner .frame-line { opacity: .2; }
.frame-line-top, .frame-line-bottom { left: 0; right: 0; height: 1px; }
.frame-line-left, .frame-line-right { top: 0; bottom: 0; width: 1px; }
.frame-line-top { top: 0; }.frame-line-bottom { bottom: 0; }.frame-line-left { left: 0; }.frame-line-right { right: 0; }
.frame-corner { position: absolute; display: block; width: 26px; height: 26px; opacity: .9; }
.frame-corner svg { width: 100%; height: 100%; }
.corner-desktop { display: none; }
.frame-corner-tl { top: 0; left: 0; }.frame-corner-tr { top: 0; right: 0; transform: scaleX(-1); }
.frame-corner-bl { bottom: 0; left: 0; transform: scaleY(-1); }.frame-corner-br { bottom: 0; right: 0; transform: scale(-1); }
.frame-flourish { position: absolute; left: 50%; width: 70px; height: 12px; margin-left: -35px; opacity: .7; }
.frame-flourish-top { top: 0; }.frame-flourish-bottom { bottom: 0; transform: rotate(180deg); }
.frame-watermark { display: none; }
@media (min-width: 768px) {
    :root { --frame-margin: 12px; }
    .frame-corner { width: 58px; height: 58px; opacity: .8; }
    .frame-filet { inset: 7px; }.frame-filet-inner { inset: 14px; }
    .frame-filet-inner .frame-line { opacity: .3; }
    .header-note { padding-top: 1.6rem; }
    .frame-flourish { width: 110px; height: 18px; margin-left: -55px; }
}
@media (min-width: 1200px) {
    :root { --page-gutter: clamp(5.5rem, 6.2vw, 6rem); --frame-margin: 24px; }
    .frame-filet { inset: 12px; }.frame-filet-inner { inset: 21px; }
    .frame-line-top, .frame-line-bottom { left: 50px; right: 50px; }.frame-line-left, .frame-line-right { top: 50px; bottom: 50px; }
    .frame-filet .frame-line { opacity: .65; }.frame-filet-inner .frame-line { opacity: .35; }
    .frame-corner { width: 104px; height: 104px; opacity: .8; }
    .corner-mobile { display: none; }.corner-desktop { display: block; }
    .frame-flourish { width: 160px; height: 26px; margin-left: -80px; }
    .frame-watermark { position: absolute; display: block; width: 28px; height: 110px; opacity: var(--frame-watermark-opacity); }
    .frame-watermark-left { top: 25%; left: 32px; }.frame-watermark-right { top: 53%; right: 32px; }
    .site-header { padding-top: 14px; }.header-note { padding-block: 1rem; font-size: .75rem; }.desktop-masthead { padding-block: 1.5rem; }
}

/* Composition de la homepage */
.eyebrow { color: var(--color-gold); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.hero { display: grid; gap: 2.5rem; padding-block: var(--section-space); }
.hero--home { --hero-photo: url("../images/salon/abdel-barber-devanture-hero-background.webp"); }
.hero-copy { min-width: 0; }
.hero-district { margin-top: .65rem; color: var(--color-text-muted); font-size: .8rem; }
.hero-district span { margin-inline: .4rem; color: var(--color-bronze); }
h1 { margin-top: 1.4rem; font: clamp(2.5rem, 5.1vw, 4.8rem)/1.08 var(--font-display); letter-spacing: -.045em; }
h1 span { color: var(--color-gold); }
.small-ornament { display: flex; align-items: center; gap: .8rem; width: 120px; margin-block: 1.6rem; color: var(--color-ornament); pointer-events: none; }
.small-ornament::before, .small-ornament::after { content: ""; flex: 1; height: 1px; background: var(--color-ornament); }
.small-ornament span { font-size: .8rem; }
.hero-intro { max-width: 38ch; font-size: clamp(1rem, 1.5vw, 1.1rem); }
.hero-detail { max-width: 43ch; margin-top: .7rem; color: var(--color-text-muted); font-size: .9rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
.hero-social { margin-top: .9rem; }
.salon-photo { margin: 0; padding: 8px; border: 1px solid var(--color-border); width: 100%; max-width: 490px; justify-self: center; background: var(--color-bg-secondary); box-shadow: 0 15px 35px var(--color-shadow); }
.salon-photo-window { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--color-ornament); }
.salon-photo-window::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--color-border); pointer-events: none; }
.salon-photo picture, .salon-interior picture { display: block; width: 100%; height: 100%; }
.hero-contact-links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: .6rem; }
.hero-contact-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-text-muted); font-size: .85rem; }
.hero-contact-links a:hover { color: var(--color-gold); }
.salon-interior { grid-column: 1 / -1; margin: .5rem 0 0; padding: 8px; background: var(--color-bg-secondary); border: 1px solid var(--color-border); }
.salon-interior-window { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--color-ornament); }
.salon-interior-window::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--color-border); pointer-events: none; }
.salon-interior img { width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
.salon-interior figcaption { color: var(--color-text-muted); font-size: .75rem; padding: .8rem .5rem .3rem; }
@media (min-width: 768px) {
.salon-interior-window { aspect-ratio: 16 / 9; }
}
.salon-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.salon-photo figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; padding: .8rem .5rem .3rem; color: var(--color-text-muted); font-size: .7rem; }
.reassurance { margin-bottom: var(--section-space); border-block: 1px solid var(--color-border); }
.reassurance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reassurance-grid li { position: relative; padding: 1.2rem .7rem 1.2rem 0; border-bottom: 1px solid var(--color-border); }
.reassurance-grid li:nth-child(even) { border-left: 1px solid var(--color-border); padding-left: .7rem; padding-right: 0; }
.reassurance-grid li:nth-last-child(-n+2) { border-bottom: 0; }
.reassurance h2 { font: 600 clamp(.85rem, 1.1vw, .95rem)/1.4 var(--font-body); }
.reassurance p { font-size: .8rem; margin-top: .4rem; color: var(--color-text-muted); }
.services-section {
    position: relative;
    display: grid;
    gap: 1.8rem;
    padding: clamp(1.2rem, 3.2vw, 3rem);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}
.section-heading h2, .salon-heading h2 { margin-top: .75rem; font: clamp(1.6rem, 3vw, 2.4rem)/1.35 var(--font-display); letter-spacing: -.035em; }
.section-heading > p:last-child { margin-top: .8rem; color: var(--color-text-muted); font-size: .85rem; }
.services-list { display: grid; min-width: 0; }
.service-row { display: flex; justify-content: space-between; align-items: center; gap: .8rem; border-bottom: 1px solid var(--color-border); padding-block: 1rem; }
.service-row:last-child { border-bottom: 0; }
.service-row dt { display: flex; align-items: center; gap: .8rem; font-size: .9rem; font-weight: 500; }
.service-number { color: var(--color-text-muted); font-size: .65rem; font-weight: 400; }
.service-row dd { flex-shrink: 0; color: var(--color-gold); font-size: 1.8rem; font-weight: 500; line-height: 1.3; font-variant-numeric: tabular-nums; letter-spacing: -.05em; }
.service-row dd span { font-size: 1rem; letter-spacing: 0; }
.salon-section { display: grid; gap: 1.5rem; padding-block: var(--section-space); }
.salon-copy { max-width: 52ch; }
.salon-copy p { color: var(--color-text-muted); font-size: .95rem; }
.salon-copy p + p { margin-top: .8rem; }
.salon-copy .text-link { margin-top: .9rem; }
.products-note { display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem 0; border-block: 1px solid var(--color-border); }
.products-mark { color: var(--color-gold); font-size: 1.4rem; pointer-events: none; }
.products-note h2 { font: 600 .95rem/1.6 var(--font-body); }
.products-note p { max-width: 72ch; margin-top: .3rem; font-size: .85rem; color: var(--color-text-muted); }
.products-end { display: none; }
.review-invitation { display: grid; gap: 1rem; padding-top: var(--section-space); }
.review-invitation h2 { margin-top: .6rem; font: clamp(1.5rem, 2.5vw, 2rem)/1.3 var(--font-display); }
.review-invitation p:not(.eyebrow) { margin-top: .65rem; color: var(--color-text-muted); font-size: .9rem; }
.review-actions { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
.section-anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; scroll-margin-top: 1.5rem; pointer-events: none; }
.reassurance h2 { color: var(--color-gold); text-transform: uppercase; letter-spacing: .035em; font-size: clamp(.75rem, .95vw, .9rem); }
.practical-section { margin-bottom: var(--section-space); padding: clamp(1.2rem, 3vw, 2.5rem); border: 1px solid var(--color-border); background: var(--color-surface); }
.practical-heading h2 { margin-top: .6rem; font: clamp(1.6rem, 3vw, 2.4rem)/1.35 var(--font-display); }
.practical-heading > p:last-child { max-width: 75ch; margin-top: .75rem; font-size: .9rem; color: var(--color-text-muted); }
.amenities-list { display: grid; gap: .7rem 1.5rem; padding-block: 1.5rem; font-size: .85rem; }
.amenities-list li { border-left: 1px solid var(--color-bronze); padding-left: .8rem; }
.practical-details { display: grid; gap: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border); }
.practical-details h3 { font: 600 .9rem/1.5 var(--font-body); }
.practical-details p { color: var(--color-text-muted); font-size: .8rem; margin-top: .5rem; }
@media (min-width: 600px) {
.amenities-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 600px) {
.services-list { grid-template-columns: 1fr 1fr; gap: 0 2rem; }
.service-row:nth-child(3) { border-bottom: 0; }
.products-note { align-items: center; }
.products-end { display: block; margin-left: auto; flex-shrink: 0; color: var(--color-text-muted); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.reassurance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reassurance-grid li { padding: 1.4rem; }
.reassurance-grid li:nth-last-child(-n+2) { border-bottom: 0; }
.reassurance-grid li:nth-child(even) { border-left: 1px solid var(--color-border); }
}
@media (min-width: 1000px) {
.hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 4rem; }
.services-section { grid-template-columns: minmax(0, .9fr) minmax(0, 2fr); align-items: center; gap: 2.5rem; }
.salon-section { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: center; }
.reassurance-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.reassurance-grid li { border-bottom: 0; border-left: 1px solid var(--color-border); padding: 1.6rem 1.2rem; }
.reassurance-grid li:first-child { border-left: 0; padding-left: 0; }
}

/* Small pre-blurred image: no runtime blur, no scrolling background animation. */
.hero-copy { position: relative; isolation: isolate; }
.hero-copy::before { content: ""; position: absolute; z-index: -1; inset: -1rem; background: var(--hero-photo) center / cover no-repeat; opacity: .07; pointer-events: none; }
@media (prefers-color-scheme: dark) { .hero-copy::before { opacity: .08; } }
[data-reveal].is-waiting { opacity: 0; transform: translateY(10px); }
[data-reveal].is-revealed { opacity: 1; transform: none; transition: opacity .24s ease-out, transform .24s ease-out; }
[data-reveal]:focus-within, [data-reveal]:target { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal].is-waiting { opacity: 1; transform: none; } }

/* FAQ native et pages de lecture, composants communs aux trois pages. */
.content-page { padding-block: clamp(1.5rem, 4vw, 3rem) var(--section-space); }
.content-heading h2 { margin-top: .65rem; font: clamp(1.6rem, 3vw, 2.4rem)/1.3 var(--font-display); }
.content-heading > p:last-child { max-width: 70ch; margin-top: 1rem; color: var(--color-text-muted); }
.content-page h1 { max-width: 22ch; font-size: clamp(2rem, 4.5vw, 3.7rem); overflow-wrap: break-word; }
.breadcrumb-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 2rem; color: var(--color-text-muted); font-size: .85rem; }
.breadcrumb-list li + li::before { content: "›"; padding-right: .4rem; color: var(--color-bronze); }
.breadcrumb-list a { display: inline-flex; min-height: 44px; align-items: center; }
.breadcrumb-list li { display: inline-flex; align-items: center; }
.faq-section { padding-block: var(--section-space); }
.faq-list { margin-block: 1.75rem; }
.faq-list details { border-block: 1px solid var(--color-border); margin-top: .9rem; }
.faq-list summary { display: flex; align-items: baseline; gap: 1.25rem; justify-content: space-between; padding: clamp(1.25rem, 1.8vw, 1.75rem) .5rem; min-height: 48px; cursor: pointer; font-size: clamp(1.25rem, 1.08rem + .7vw, 1.8rem); font-weight: 600; line-height: 1.6; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-question { min-width: 0; }
.faq-indicator { flex: 0 0 1em; text-align: center; color: var(--color-bronze); }
.faq-indicator::before { content: "+"; }
.faq-list details[open] .faq-indicator::before { content: "−"; }
.faq-list details[open] summary { color: var(--color-gold); }
.faq-list details p { max-width: 65ch; padding: .65rem .5rem clamp(1.6rem, 2vw, 1.9rem); color: var(--color-text-muted); font-size: clamp(1.0625rem, .98rem + .25vw, 1.1875rem); line-height: 1.7; }
.faq-page .faq-section, .faq-page > .content-heading { max-width: 68rem; margin-inline: auto; }
.faq-page .faq-list details { margin-top: 1.1rem; }
.faq-page .faq-list summary { padding-block: clamp(1.4rem, 2vw, 2rem); }
.faq-page .faq-list details p { padding-bottom: clamp(1.7rem, 2.4vw, 2.2rem); }
.faq-category + .faq-category { margin-top: clamp(3.25rem, 6vw, 5.25rem); }
.content-return { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.legal-section { max-width: 85ch; padding-top: 2rem; margin-top: 2rem; border-top: 1px solid var(--color-border); }
.legal-section h2 { margin-bottom: 1rem; font: clamp(1.3rem, 2.4vw, 1.8rem)/1.4 var(--font-display); }
.legal-section p + p { margin-top: 1rem; }
.legal-section p, .legal-facts dd { color: var(--color-text-muted); }
.legal-section a { overflow-wrap: anywhere; }
.legal-facts > div { padding-block: .65rem; }
.legal-facts dt { font-weight: 600; margin-bottom: .25rem; }
.legal-facts dd { overflow-wrap: anywhere; }
.legal-pending { padding: 1rem; border-left: 2px solid var(--color-bronze); background: var(--color-surface); }
.footer-page-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; padding-top: 1.5rem; }
.footer-page-links a { display: inline-flex; min-height: 44px; align-items: center; font-size: .85rem; }
@media (min-width: 768px) {
    .legal-facts > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1rem; }
}

/* One shared stylesheet for all locales. Language controls are links without JS. */
.language-switch { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .8rem; padding-block: .4rem; }
.language-switch a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .45rem; font-size: .85rem; text-decoration: none; }
.language-switch a[aria-current] { color: var(--color-gold); text-decoration: underline; }
.language-switch-desktop { display: none; }
.language-prompt { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem 1rem; padding: .6rem var(--page-gutter); border-bottom: 1px solid var(--color-bronze); background: var(--color-surface); font-size: .85rem; }
.language-prompt-message { max-width: 65ch; }
.language-prompt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.language-prompt-link, .language-prompt-dismiss { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .4rem .7rem; border: 1px solid var(--color-border); background: transparent; text-decoration: none; font: inherit; cursor: pointer; }
.language-prompt-link { color: var(--color-gold); }
.spoken-languages { margin-top: .9rem; font-size: .9rem; color: var(--color-text-muted); max-width: 75ch; }
/* Home FAQ: six small editorial panels; the full FAQ retains its approved style. */
.home-faq .faq-list { display: grid; gap: 1rem; align-items: start; }
.home-faq .faq-list details { position: relative; margin: 0; padding-inline: 1rem; border: 1px solid var(--color-border); background: var(--color-bg-secondary); }
.home-faq .faq-list details::before { content: ""; position: absolute; inset-block-start: 5px; inset-inline-start: 5px; width: 8px; height: 8px; border-block-start: 1px solid var(--color-bronze); border-inline-start: 1px solid var(--color-bronze); pointer-events: none; }
.home-faq .faq-list summary { gap: .85rem; font-size: clamp(1.125rem, 1.02rem + .45vw, 1.4375rem); line-height: 1.5; padding: 1.4rem 0; }
.home-faq .faq-list details p { font-size: clamp(1rem, .95rem + .2vw, 1.125rem); padding: .2rem 0 1.5rem; line-height: 1.7; }
.home-faq > .text-link { border-bottom: 1px solid var(--color-bronze); }
.error-languages { justify-content: center; margin-top: .8rem; }
.error-shell { position: relative; max-width: 48rem; margin: max(1rem, env(safe-area-inset-top)) auto; padding: clamp(1.5rem, 5vw, 4rem); border: 1px solid var(--color-bronze); outline: 1px solid var(--color-border); outline-offset: -7px; text-align: center; }
.error-shell::before, .error-shell::after { content: ""; position: absolute; width: 20px; height: 20px; border-block-start: 1px solid var(--color-bronze); border-inline-start: 1px solid var(--color-bronze); pointer-events: none; }
.error-shell::before { inset-block-start: 11px; inset-inline-start: 11px; }
.error-shell::after { inset-block-end: 11px; inset-inline-end: 11px; transform: rotate(180deg); }
.error-brand { display: block; width: min(100%, 320px); margin-inline: auto; padding: .8rem; background: var(--color-sign-bg); border: 1px solid var(--color-sign-border); }
.error-code { margin-top: 2rem; color: var(--color-gold); font: 3.5rem/1.2 var(--font-display); }
.error-shell h1 { font: clamp(1.8rem, 4vw, 3rem)/1.3 var(--font-display); margin-block: 1rem; }
.error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 2rem; }
/* Numeric runs remain LTR; spatial relationships follow the reading direction. */
.hours-row dd { text-align: end; }
[dir="rtl"] .eyebrow, [dir="rtl"] .brand-caption, [dir="rtl"] .reassurance h2 { letter-spacing: normal; }
[dir="rtl"] h1, [dir="rtl"] h2 { letter-spacing: normal; }
[dir="rtl"] .hours-row { grid-template-columns: 5.5rem minmax(0, 1fr); }
[dir="rtl"] .reassurance-grid li:nth-child(even) { border-left: 0; border-inline-start: 1px solid var(--color-border); padding-inline-start: .7rem; padding-inline-end: 0; }
[dir="rtl"] .amenities-list li { border-left: 0; border-inline-start: 1px solid var(--color-bronze); padding-left: 0; padding-inline-start: .8rem; }
[dir="rtl"] .products-end { margin-left: 0; margin-inline-start: auto; }
[dir="rtl"] .legal-pending { border-left: 0; border-inline-start: 2px solid var(--color-bronze); }
[dir="rtl"] .text-link > span { transform: scaleX(-1); }
@media (min-width: 768px) { .home-faq .faq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .language-switch-desktop { display: flex; justify-content: flex-end; border-bottom: 1px solid var(--color-border); } [dir="rtl"] .reassurance-grid li { border-left: 0; border-inline-start: 1px solid var(--color-border); padding-inline: 1.2rem; } [dir="rtl"] .reassurance-grid li:first-child { border-inline-start: 0; padding-inline-start: 0; } }

/* Catalogue, portfolio and their two discreet navigation links. Shared across locales. */
.catalogue-navigation { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem 2rem; padding-block: .35rem; border-block-start: 1px solid var(--color-border); }
.catalogue-navigation a { display: inline-flex; align-items: center; min-height: 48px; padding-inline: .5rem; color: var(--color-gold); font-size: 1rem; }
.catalogue-page { max-width: 1280px; }
.catalogue-page .content-heading { max-width: 52rem; }
.catalogue-empty { padding: clamp(2rem, 5vw, 4rem); border-block: 1px solid var(--color-border); max-width: 54rem; margin-block: 2rem 3rem; }
.catalogue-empty h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-block: .75rem 1rem; }
.catalogue-empty p { max-width: 45ch; line-height: 1.75; }
.catalogue-empty a { display: inline-flex; align-items: center; min-height: 48px; margin-block-start: .75rem; }
.empty-ornament { color: var(--color-bronze); font-size: 1.5rem; }
.catalogue-search { max-width: 48rem; margin-block: 2rem; }
.catalogue-search label { display: block; font-weight: 600; margin-block-end: .75rem; }
.catalogue-search-controls { display: flex; gap: .5rem; }
.catalogue-search input { min-width: 0; width: 100%; min-height: 52px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); padding: .85rem 1rem; border-radius: 0; font: inherit; }
.catalogue-search button, .gallery-controls button { min-height: 48px; padding: .6rem .8rem; border: 1px solid var(--color-border); background: var(--color-bg-secondary); color: var(--color-text); font: inherit; cursor: pointer; }
.catalogue-search-status { color: var(--color-text-muted); min-height: 1.5em; margin-block-start: .75rem; }
.catalogue-grid { display: grid; gap: 2.75rem 2.5rem; grid-template-columns: minmax(0, 1fr); margin-block: 3rem; }
.catalogue-card { min-width: 0; }
.collection-link, .product-link { display: block; color: var(--color-text); text-decoration: none; }
.catalogue-card h2, .catalogue-card h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.45rem, 2.5vw, 1.9rem); margin-block: 1.25rem .6rem; }
.catalogue-card p { line-height: 1.65; max-width: 46ch; }
.catalogue-card a:hover h2, .catalogue-card a:hover h3 { color: var(--color-gold); }
.photo-stack { position: relative; margin: 1rem .85rem 1.6rem; aspect-ratio: 4 / 3; }
.stack-photo { position: absolute; inset: 0; padding: .35rem; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: 0 3px 9px var(--color-shadow); }
.stack-photo-0 { z-index: 3; }
.stack-photo-1 { transform: translate(-.4rem, -.2rem) rotate(-4deg); z-index: 1; }
.stack-photo-2 { transform: translate(.4rem, -.2rem) rotate(4deg); z-index: 2; }
.stack-photo picture, .stack-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-photo { aspect-ratio: 4 / 3; background: var(--color-surface); border: 1px solid var(--color-border); padding: .75rem; }
.product-photo picture, .product-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.product-availability { color: var(--color-gold); font-weight: 600; }
.product-detail { display: grid; gap: 2rem; }
.product-detail-copy { min-width: 0; }
.product-detail-copy p { line-height: 1.75; max-width: 55ch; margin-block: 1rem; }
.product-price { font-size: 1.75rem; }
.product-facts > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); padding-block: .8rem; gap: 1rem; border-block-end: 1px solid var(--color-border); }
.product-facts dt { color: var(--color-text-muted); }
.product-facts dd { margin: 0; }
.product-editorial { margin-block: 2rem; }
.product-editorial h2 { font-size: 1.4rem; }
.product-editorial ul { padding-inline-start: 1.25rem; line-height: 1.75; }
.product-shop-label { font-weight: 600; color: var(--color-gold); }
.catalogue-tags { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin-block: 1.5rem; }
.catalogue-tags li { padding: .3rem .65rem; border: 1px solid var(--color-border); font-size: .95rem; }
.gallery-thumbnails { display: flex; flex-wrap: wrap; gap: .7rem; margin-block: 1.5rem; }
.gallery-thumbnails a { width: 76px; height: 64px; border: 1px solid var(--color-border); padding: 3px; }
.gallery-thumbnails picture, .gallery-thumbnails img { display: block; width: 100%; height: 100%; object-fit: cover; }
.catalogue-gallery { display: grid; gap: 2rem; }
.catalogue-gallery figure { margin: 0; scroll-margin-block-start: 7rem; }
.catalogue-gallery picture, .catalogue-gallery img { display: block; width: 100%; height: auto; }
.catalogue-gallery figcaption { margin-block: .75rem; font-size: .95rem; color: var(--color-text-muted); }
.gallery-dialog { width: min(94vw, 1200px); max-height: 94vh; padding: 1rem; border: 1px solid var(--color-bronze); background: var(--color-bg); color: var(--color-text); }
.gallery-dialog::backdrop { background: var(--color-backdrop); }
.gallery-controls { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-block-end: 1rem; }
[data-gallery-stage] img { display: block; max-width: 100%; max-height: 70vh; object-fit: contain; margin-inline: auto; }
.collection-pagination { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-block: 2rem; }
.collection-pagination a { display: inline-flex; align-items: center; min-height: 48px; }
.catalogue-visit { padding-block: 2rem; border-block-start: 1px solid var(--color-border); margin-block-start: 3rem; }
.catalogue-visit .hero-actions { flex-wrap: wrap; }
.catalogue-preview { margin: var(--section-space) var(--page-gutter); }
.catalogue-preview .catalogue-card h2, .catalogue-card h3 { font-size: 1.5rem; }
.catalogue-preview > .text-link { min-height: 48px; display: inline-flex; align-items: center; }
.catalogue-card[hidden], .catalogue-search-status[hidden] { display: none; }
@media (min-width: 768px) { .catalogue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .catalogue-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .product-detail { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; } }
@media (prefers-reduced-motion: reduce) { .catalogue-gallery figure { scroll-behavior: auto; } }

.catalogue-search input:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }