/* Polices hébergées sur le site (aucun appel à Google Fonts) */
@font-face{font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 300; src: url(../fonts/manrope-cyrillic-ext-300-normal.woff2) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}
@font-face{font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 300; src: url(../fonts/manrope-cyrillic-300-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 300; src: url(../fonts/manrope-vietnamese-300-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 300; src: url(../fonts/manrope-latin-ext-300-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 300; src: url(../fonts/manrope-latin-300-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 400; src: url(../fonts/manrope-cyrillic-ext-400-normal.woff2) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}
@font-face{font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 400; src: url(../fonts/manrope-cyrillic-400-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 400; src: url(../fonts/manrope-vietnamese-400-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 400; src: url(../fonts/manrope-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 400; src: url(../fonts/manrope-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 500; src: url(../fonts/manrope-cyrillic-ext-500-normal.woff2) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}
@font-face{font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 500; src: url(../fonts/manrope-cyrillic-500-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 500; src: url(../fonts/manrope-vietnamese-500-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 500; src: url(../fonts/manrope-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 500; src: url(../fonts/manrope-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 600; src: url(../fonts/manrope-cyrillic-ext-600-normal.woff2) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}
@font-face{font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 600; src: url(../fonts/manrope-cyrillic-600-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 600; src: url(../fonts/manrope-vietnamese-600-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 600; src: url(../fonts/manrope-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 600; src: url(../fonts/manrope-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family: 'Cormorant Garamond'; font-style: normal; font-display: swap; font-weight: 400; src: url(../fonts/cormorant-garamond-cyrillic-ext-400-normal.woff2) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}
@font-face{font-family: 'Cormorant Garamond'; font-style: normal; font-display: swap; font-weight: 400; src: url(../fonts/cormorant-garamond-cyrillic-400-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family: 'Cormorant Garamond'; font-style: normal; font-display: swap; font-weight: 400; src: url(../fonts/cormorant-garamond-vietnamese-400-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family: 'Cormorant Garamond'; font-style: normal; font-display: swap; font-weight: 400; src: url(../fonts/cormorant-garamond-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family: 'Cormorant Garamond'; font-style: normal; font-display: swap; font-weight: 400; src: url(../fonts/cormorant-garamond-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family: 'Cormorant Garamond'; font-style: normal; font-display: swap; font-weight: 500; src: url(../fonts/cormorant-garamond-cyrillic-ext-500-normal.woff2) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}
@font-face{font-family: 'Cormorant Garamond'; font-style: normal; font-display: swap; font-weight: 500; src: url(../fonts/cormorant-garamond-cyrillic-500-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family: 'Cormorant Garamond'; font-style: normal; font-display: swap; font-weight: 500; src: url(../fonts/cormorant-garamond-vietnamese-500-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family: 'Cormorant Garamond'; font-style: normal; font-display: swap; font-weight: 500; src: url(../fonts/cormorant-garamond-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family: 'Cormorant Garamond'; font-style: normal; font-display: swap; font-weight: 500; src: url(../fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family: 'Cormorant Garamond'; font-style: normal; font-display: swap; font-weight: 600; src: url(../fonts/cormorant-garamond-cyrillic-ext-600-normal.woff2) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}
@font-face{font-family: 'Cormorant Garamond'; font-style: normal; font-display: swap; font-weight: 600; src: url(../fonts/cormorant-garamond-cyrillic-600-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family: 'Cormorant Garamond'; font-style: normal; font-display: swap; font-weight: 600; src: url(../fonts/cormorant-garamond-vietnamese-600-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family: 'Cormorant Garamond'; font-style: normal; font-display: swap; font-weight: 600; src: url(../fonts/cormorant-garamond-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family: 'Cormorant Garamond'; font-style: normal; font-display: swap; font-weight: 600; src: url(../fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family: 'Cormorant Garamond'; font-style: italic; font-display: swap; font-weight: 400; src: url(../fonts/cormorant-garamond-cyrillic-ext-400-italic.woff2) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}
@font-face{font-family: 'Cormorant Garamond'; font-style: italic; font-display: swap; font-weight: 400; src: url(../fonts/cormorant-garamond-cyrillic-400-italic.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family: 'Cormorant Garamond'; font-style: italic; font-display: swap; font-weight: 400; src: url(../fonts/cormorant-garamond-vietnamese-400-italic.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family: 'Cormorant Garamond'; font-style: italic; font-display: swap; font-weight: 400; src: url(../fonts/cormorant-garamond-latin-ext-400-italic.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family: 'Cormorant Garamond'; font-style: italic; font-display: swap; font-weight: 400; src: url(../fonts/cormorant-garamond-latin-400-italic.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family: 'Cormorant Garamond'; font-style: italic; font-display: swap; font-weight: 500; src: url(../fonts/cormorant-garamond-cyrillic-ext-500-italic.woff2) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}
@font-face{font-family: 'Cormorant Garamond'; font-style: italic; font-display: swap; font-weight: 500; src: url(../fonts/cormorant-garamond-cyrillic-500-italic.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family: 'Cormorant Garamond'; font-style: italic; font-display: swap; font-weight: 500; src: url(../fonts/cormorant-garamond-vietnamese-500-italic.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family: 'Cormorant Garamond'; font-style: italic; font-display: swap; font-weight: 500; src: url(../fonts/cormorant-garamond-latin-ext-500-italic.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family: 'Cormorant Garamond'; font-style: italic; font-display: swap; font-weight: 500; src: url(../fonts/cormorant-garamond-latin-500-italic.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* Concept : une entrée cinématographique (on pousse la porte du salon au défilement),
puis une sphère de portraits — chaque portrait ouvre son pack. Noir laqué, or champagne, ivoire. */
:root {
--noir: #070706;
--laque: #100f0d;
--ivoire: #f3ece0;
--ivoire-2: #b9b0a2;
--or: #d6b36f;
--or-clair: #f0d9a4;
--or-sombre: #8a6b33;
--ligne: rgba(214, 179, 111, 0.22);
--f-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
--f-texte: "Manrope", "Helvetica Neue", Arial, system-ui, sans-serif;
--ease: cubic-bezier(.2, .7, .1, 1);
color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { background: var(--noir); color: var(--ivoire); font-family: var(--f-texte); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.is-locked { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--or); color: var(--noir); }
:focus-visible { outline: 1px solid var(--or-clair); outline-offset: 4px; }
.kicker { font-family: var(--f-texte); font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--or); display: inline-flex; align-items: center; gap: 14px; }
.kicker::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .7; }
.titre { font-family: var(--f-display); font-weight: 400; line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; margin: 0; }
.titre em { font-style: italic; color: var(--or-clair); }
.wrap { width: min(1200px, 100%); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.btn { --b: var(--or); display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 52px; padding: 0 30px; border: 1px solid var(--b); color: var(--noir); background: linear-gradient(110deg, #b8924c, var(--or-clair) 45%, #c49f5c 70%, #e9cf92); background-size: 220% 100%; background-position: 100% 0; font: 600 12px/1 var(--f-texte); letter-spacing: .24em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-position .8s var(--ease), transform .4s var(--ease); }
.btn:hover { background-position: 0 0; transform: translateY(-2px); }
.btn--ligne { background: transparent; color: var(--ivoire); border-color: rgba(243, 236, 224, .35); }
.btn--ligne:hover { border-color: var(--or); color: var(--or-clair); }
.btn svg { width: 16px; height: 16px; }
/* ---------------- Chargement ---------------- */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--noir); display: grid; place-items: center; transition: opacity 1.1s var(--ease), visibility 1.1s; }
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__in { display: grid; justify-items: center; gap: 26px; text-align: center; padding-inline: 16px; }
.loader__mono { width: 120px; height: 120px; }
.loader__mono circle { stroke-dasharray: 340; stroke-dashoffset: 340; animation: trace 2.2s var(--ease) forwards; }
.loader__mono text { opacity: 0; animation: apparait 1.4s .9s var(--ease) forwards; }
.loader__nom { font: 400 clamp(26px, 6vw, 44px)/1 var(--f-display); letter-spacing: .42em; padding-left: .42em; }
.loader__nom span { display: inline-block; opacity: 0; transform: translateY(14px); animation: monte .9s var(--ease) forwards; }
.loader__nom .or { color: var(--or); }
.loader__barre { width: min(220px, 60vw); height: 1px; background: rgba(243,236,224,.12); position: relative; overflow: hidden; }
.loader__barre i { position: absolute; inset: 0; background: var(--or); transform-origin: left; transform: scaleX(0); transition: transform .4s var(--ease); }
.loader__pct { font: 500 11px/1 var(--f-texte); letter-spacing: .3em; color: var(--ivoire-2); font-variant-numeric: tabular-nums; }
.loader .btn { opacity: 0; transform: translateY(10px); transition: opacity .8s var(--ease), transform .8s var(--ease); pointer-events: none; }
.loader.is-ready .btn { opacity: 1; transform: none; pointer-events: auto; }
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes apparait { to { opacity: 1; } }
@keyframes monte { to { opacity: 1; transform: none; } }
/* ---------------- En-tête ---------------- */
.entete { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px clamp(16px, 4vw, 40px); transition: background .5s, backdrop-filter .5s, padding .5s; }
.entete.is-solid { background: rgba(7,7,6,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding-block: 12px; border-bottom: 1px solid var(--ligne); }
.logo { font: 500 18px/1 var(--f-display); letter-spacing: .38em; text-decoration: none; white-space: nowrap; }
.logo b { font-weight: 500; color: var(--or); }
.entete > nav:not(.navpanel) { display: flex; gap: 28px; }
.entete > nav:not(.navpanel) a { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; text-decoration: none; color: var(--ivoire-2); transition: color .3s; }
.entete > nav:not(.navpanel) a:hover { color: var(--or-clair); }
.entete .btn { min-height: 42px; padding: 0 20px; font-size: 10.5px; }
@media (max-width: 860px) { .entete > nav:not(.navpanel) { display: none; } }
@media (max-width: 420px) { .logo { letter-spacing: .26em; font-size: 15px; } .entete .btn { padding: 0 14px; letter-spacing: .16em; } }
/* ---------------- Le Seuil : entrée immersive pilotée au défilement (4 plans, une caméra virtuelle) ---------------- */
.entree.seuil { position: relative; height: 460vh; background: var(--noir); }
.seuil__scene { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #050404; perspective: 1400px; perspective-origin: 50% 55%; }
.seuil__plan { position: absolute; left: 0; top: 0; opacity: 0; transform-style: preserve-3d; will-change: transform, opacity; contain: layout paint; }
.seuil__plan[data-plan="3"] { opacity: 1; }
.seuil__plan img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.seuil__plan--portes { perspective: 1100px; }
.seuil__halo { position: absolute; left: 30%; top: 26%; width: 40%; height: 48%; background: radial-gradient(50% 50% at 50% 50%, rgba(255,226,160,.85), rgba(255,200,110,.25) 55%, transparent 75%); mix-blend-mode: screen; opacity: 0; pointer-events: none; }
.seuil__battant { position: absolute; top: 26.3%; height: 46.7%; transform-style: preserve-3d; backface-visibility: hidden; will-change: transform; }
.seuil__battant--g { left: 30.1%; width: 19.8%; transform-origin: 0% 50%; }
.seuil__battant--d { left: 49.9%; width: 19.6%; transform-origin: 100% 50%; }
.seuil__battant i { position: absolute; inset: 0; background-repeat: no-repeat; box-shadow: inset 0 0 0 1px rgba(214,179,111,.25); }
.seuil__battant::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.0), rgba(0,0,0,.55)); opacity: var(--ombre, 0); pointer-events: none; }
.seuil__battant--d::after { background: linear-gradient(270deg, rgba(0,0,0,.0), rgba(0,0,0,.55)); }
.seuil__poussiere { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.seuil__voile { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 95% at 50% 52%, transparent 42%, rgba(5,4,4,.62) 82%, rgba(5,4,4,.9)), linear-gradient(to bottom, rgba(5,4,4,.45), transparent 22%, transparent 68%, rgba(5,4,4,.7)); }
.seuil__flash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 50% 50%, rgba(255,232,180,.9), rgba(255,210,140,.25) 50%, transparent 72%); opacity: 0; mix-blend-mode: screen; }
.seuil__txt { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; text-align: center; opacity: 0; pointer-events: none; width: min(92vw, 900px); }
.seuil__txt--intro { bottom: clamp(112px, 19vh, 200px); opacity: 1; }
.seuil__txt--intro::before { content: ""; position: absolute; left: 50%; top: -40%; width: 200vw; height: 260%; transform: translateX(-50%); background: radial-gradient(45% 50% at 50% 55%, rgba(5,4,4,.62), transparent 75%); z-index: -1; }
.seuil__nom { margin: 0; font: 400 clamp(40px, 7vw, 96px)/1 var(--f-display); letter-spacing: .22em; padding-left: .22em; color: var(--ivoire); text-shadow: 0 6px 40px rgba(0,0,0,.85); }
.seuil__nom em { font-style: normal; color: var(--or-clair); }
.seuil__sous { margin: 16px 0 0; font: 500 clamp(11px, 1.3vw, 14px)/1.4 var(--f-texte, inherit); letter-spacing: .42em; padding-left: .42em; text-transform: uppercase; color: var(--or-clair); text-shadow: 0 2px 18px rgba(0,0,0,.9); }
.seuil__legende { bottom: clamp(110px, 18vh, 190px); font: italic 400 clamp(22px, 3.2vw, 40px)/1.2 var(--f-display); color: var(--or-clair); text-shadow: 0 4px 30px rgba(0,0,0,.95); }
.seuil__legende--grand { font-size: clamp(30px, 5vw, 64px); color: var(--ivoire); }
.seuil__legende em { font-style: italic; color: var(--or-clair); }
.seuil__fin { bottom: clamp(54px, 10vh, 110px); display: grid; justify-items: center; gap: 16px; }
.seuil__fin::before { content: ""; position: absolute; left: 50%; bottom: -120px; width: 240vw; height: 90vh; transform: translateX(-50%); background: linear-gradient(to top, rgba(5,4,4,.95), rgba(5,4,4,.7) 40%, transparent 80%); z-index: -1; }
.seuil__fin-titre { margin: 0; font: 400 clamp(34px, 5.6vw, 78px)/1.02 var(--f-display); color: var(--ivoire); }
.seuil__fin-titre em { color: var(--or-clair); }
.seuil__infos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 0; padding: 0; list-style: none; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ivoire-2); }
.seuil__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.seuil__btns .btn--ligne { background: rgba(7,7,6,.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.seuil__indic { position: absolute; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; color: var(--ivoire); text-decoration: none; font-size: 11px; letter-spacing: .36em; text-transform: uppercase; padding-left: .36em; }
.seuil__indic i { width: 1px; height: 38px; background: linear-gradient(var(--or-clair), transparent); position: relative; overflow: hidden; }
.seuil__indic i::after { content: ""; position: absolute; left: -3px; top: 0; width: 7px; height: 7px; border-right: 1px solid var(--or-clair); border-bottom: 1px solid var(--or-clair); transform: rotate(45deg); animation: seuil-fleche 1.8s ease-in-out infinite; }
@keyframes seuil-fleche { 0% { top: -8px; opacity: 0; } 30% { opacity: 1; } 100% { top: 34px; opacity: 0; } }
.seuil__progres { position: absolute; right: clamp(12px, 2vw, 28px); top: 50%; transform: translateY(-50%); display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.seuil__progres li { width: 6px; height: 6px; border-radius: 50%; border: 1px solid rgba(214,179,111,.7); transition: background .3s, transform .3s; }
.seuil__progres li.is-on { background: var(--or-clair); transform: scale(1.25); }
.seuil__progres b { position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: rgba(214,179,111,.22); transform: translateX(-50%); z-index: -1; }
.seuil__mention { position: absolute; left: 14px; top: calc(74px + env(safe-area-inset-top, 0px)); margin: 0; max-width: 46ch; font-size: 10px; line-height: 1.35; color: rgba(244,239,230,.55); letter-spacing: .02em; }
.seuil__passer { position: absolute; right: 14px; top: calc(66px + env(safe-area-inset-top, 0px)); font-size: 11px; color: rgba(244,239,230,.7); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: 8px 0; }
.seuil__passer:focus-visible, .seuil__indic:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 4px; }
@media (max-width: 760px) {
.entree.seuil { height: 420vh; }
.seuil__progres { right: 8px; gap: 10px; }
.seuil__mention { max-width: 50vw; font-size: 9px; top: calc(60px + env(safe-area-inset-top, 0px)); }
.seuil__passer { top: calc(54px + env(safe-area-inset-top, 0px)); font-size: 10px; max-width: 36vw; text-align: right; line-height: 1.3; }
.seuil__infos { font-size: 11px; gap: 4px 14px; }
.seuil__btns { flex-direction: column; width: min(320px, 92vw); }
.seuil__indic { bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
}
/* Mouvement réduit : pas de séquence, trois plans fixes lisibles et les boutons */
@media (prefers-reduced-motion: reduce) {
.entree.seuil { height: auto; }
.seuil__scene { position: relative; height: auto; perspective: none; display: grid; }
.seuil__plan { position: relative !important; width: 100% !important; height: 70vh !important; opacity: 1 !important; transform: none !important; left: 0 !important; top: 0 !important; overflow: hidden; }
.seuil__plan img { object-fit: cover; }
.seuil__plan[data-plan="5"], .seuil__plan[data-plan="6"], .seuil__battant, .seuil__ferme, .seuil__halo, .seuil__poussiere, .seuil__flash, .seuil__indic, .seuil__progres, .seuil__legende { display: none !important; }
.seuil__txt { position: relative !important; left: auto !important; top: auto !important; bottom: auto !important; opacity: 1 !important; pointer-events: auto !important; transform: none !important; margin: 28px auto; }
.seuil__txt--intro::before { display: none; }
.seuil__plan[data-plan="3"] { order: 1; } .seuil__txt--intro { order: 2; } .seuil__plan[data-plan="7"] { order: 4; } .seuil__fin { order: 5; } .seuil__mention { order: 6; } .seuil__passer { order: 7; }
.seuil__fin { position: relative; left: auto; transform: none !important; bottom: auto; margin: 32px auto 48px; }
.seuil__fin::before { display: none; }
.seuil__voile { display: none; }
.seuil__mention, .seuil__passer { position: relative; left: auto; right: auto; bottom: auto; margin: 0 16px 12px; }
}
/* ---------------- Entrée cinématographique ---------------- */
.entree { position: relative; height: 420vh; }
.scene { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--noir); }
.scene__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform, opacity, filter; }
.scene__facade { transform-origin: 50% 58%; }
.scene__kb { position: absolute; inset: 0; animation: kb 22s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.05); } }
.scene .scene__txt--hero { place-items: end center; padding-bottom: calc(clamp(70px, 11vh, 120px) + env(safe-area-inset-bottom, 0px)); }
.hero { gap: 14px !important; position: relative; }
.hero::before { content: ""; position: absolute; left: 50%; bottom: -160px; width: 220vw; height: 115vh; transform: translateX(-50%); background: linear-gradient(to top, rgba(7,7,6,.94) 0%, rgba(7,7,6,.72) 32%, rgba(7,7,6,.25) 62%, transparent 80%); z-index: -1; pointer-events: none; }
.hero .titre.hero__nom { font-size: clamp(46px, 7.4vw, 108px); letter-spacing: .06em; line-height: .95; }
.hero__slogan { margin: 0; font: italic 400 clamp(22px, 3vw, 38px)/1.2 var(--f-display) !important; color: var(--or-clair) !important; text-shadow: 0 4px 30px rgba(0,0,0,.8); max-width: 26ch !important; }
.hero__texte { text-shadow: 0 2px 16px rgba(0,0,0,.9); color: var(--ivoire) !important; }
.hero__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; pointer-events: auto; }
.hero__btns .btn--ligne { background: rgba(7,7,6,.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@media (max-width: 520px) { .hero__btns { flex-direction: column; width: min(320px, 100%); } }
@media (max-width: 600px) { .scene .scene__txt--hero { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } .scene__indic { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); } .scene__indic i { height: 26px; } }
.scene__interieur { opacity: 0; transform-origin: 50% 52%; }
.scene__voile { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 55%, transparent 30%, rgba(7,7,6,.55) 70%, var(--noir) 100%), linear-gradient(to bottom, rgba(7,7,6,.55), transparent 25%, transparent 65%, rgba(7,7,6,.85)); pointer-events: none; }
.scene__grain { position: absolute; inset: -50%; opacity: .09; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); animation: grain 1.2s steps(4) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 25% { transform: translate(-3%,2%); } 50% { transform: translate(2%,-3%); } 75% { transform: translate(-2%,-1%); } }
.scene__lumiere { position: absolute; left: 50%; top: 55%; width: 40vmax; height: 40vmax; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(240,217,164,.55), rgba(214,179,111,.12) 40%, transparent 70%); mix-blend-mode: screen; opacity: 0; pointer-events: none; }
.scene__txt { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding-inline: 16px; pointer-events: none; }
.scene__txt > div { opacity: 0; transform: translateY(24px); will-change: transform, opacity; display: grid; gap: 18px; justify-items: center; }
.scene__txt .titre { font-size: clamp(42px, 8.5vw, 120px); text-shadow: 0 10px 60px rgba(0,0,0,.6); }
.scene__txt p { margin: 0; color: var(--ivoire-2); font-size: clamp(14px, 1.6vw, 17px); max-width: 46ch; }
.scene__indic { position: absolute; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; display: grid; justify-items: center; gap: 10px; font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--ivoire-2); transition: opacity .4s; }
.scene__indic i { width: 1px; height: 46px; background: linear-gradient(var(--or), transparent); animation: descend 2s var(--ease) infinite; transform-origin: top; }
@keyframes descend { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.scene__adresse { position: absolute; left: clamp(16px, 4vw, 40px); bottom: calc(28px + env(safe-area-inset-bottom, 0px)); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--ivoire-2); }
.scene__adresse b { color: var(--or); font-weight: 500; }
@media (max-width: 600px) { .scene__adresse { display: none; } }
/* ---------------- Manifeste + wordmark WebGL ---------------- */
.manifeste { position: relative; padding-block: clamp(90px, 14vw, 180px) 40px; }
.manifeste__grille { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 90px); align-items: end; }
.manifeste__grille > * { min-width: 0; }
.manifeste .titre { font-size: clamp(38px, 5.6vw, 82px); margin-top: 22px; }
.manifeste p { color: var(--ivoire-2); font-size: 17px; max-width: 48ch; margin: 0 0 18px; }
.chiffres { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 54px); margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--ligne); }
.chiffres b { display: block; font: 500 clamp(30px, 3.6vw, 46px)/1 var(--f-display); color: var(--or-clair); font-variant-numeric: tabular-nums; }
.chiffres span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ivoire-2); }
@media (max-width: 860px) { .manifeste__grille { grid-template-columns: 1fr; } }
.wordmark { position: relative; height: clamp(220px, 34vw, 480px); margin-top: clamp(40px, 6vw, 80px); cursor: crosshair; }
.wordmark canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wordmark__lbl { position: absolute; left: 0; top: 0; pointer-events: none; white-space: nowrap; font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; color: var(--or); opacity: .6; }
.wordmark__fallback { position: absolute; inset: 0; display: grid; place-items: center; font: 500 clamp(54px, 13vw, 200px)/1 var(--f-display); letter-spacing: .06em; color: var(--or); }
.wordmark.has-gl .wordmark__fallback { display: none; }
/* ---------------- Les packs : sphère 3D ---------------- */
.packs { position: relative; padding-block: clamp(80px, 10vw, 140px) 0; }
.packs__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; }
.packs__tete .titre { font-size: clamp(40px, 6vw, 88px); margin-top: 18px; }
.packs__tete p { color: var(--ivoire-2); max-width: 38ch; margin: 0; }
.sphere { position: relative; height: 170vh; }
.sphere__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; perspective: var(--persp, 1150px); perspective-origin: 50% 50%; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.sphere__stage.is-drag { cursor: grabbing; }
#world { position: absolute; top: 50%; left: 50%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
#orb { position: absolute; top: 0; left: 0; width: 0; height: 0; transform-style: preserve-3d; }
#headline { position: absolute; top: 0; left: 0; width: var(--hw); margin: 0 0 0 calc(var(--hw) / -2); text-align: center; font: 400 clamp(30px, 4.6vw, 70px)/1.02 var(--f-display); letter-spacing: -.005em; color: var(--ivoire); text-shadow: 0 2px 34px rgba(0,0,0,.65); pointer-events: none; }
#headline .inner { position: absolute; top: 0; left: 0; width: 100%; transform: translateY(-50%); display: grid; gap: 12px; justify-items: center; }
#headline em { font-style: italic; color: var(--or-clair); }
#headline small { font: 500 10px/1 var(--f-texte); letter-spacing: .32em; text-transform: uppercase; color: var(--or); }
#headline .mot { display: inline-block; opacity: 0; transform: translateY(.42em); filter: blur(7px); transition: opacity 1.05s, transform 1.15s var(--ease), filter 1.05s; transition-delay: calc(.2s + var(--i) * .085s); }
.sphere.is-in #headline .mot { opacity: 1; transform: none; filter: blur(0); }
.carte { position: absolute; top: 0; left: 0; width: var(--cw); height: calc(var(--cw) * 1.34); margin-left: calc(var(--cw) / -2); margin-top: calc(var(--cw) * -0.67); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.carte.paysage { height: calc(var(--cw) / 1.5); margin-top: calc(var(--cw) / -3); }
.carte figure { position: absolute; inset: 0; margin: 0; overflow: hidden; border-radius: 3px; background: #0a0a0a; transition: transform .5s var(--ease); }
.carte[data-pack]:hover figure { transform: scale(1.045); }
.carte img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.carte figure::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,var(--d,0)); box-shadow: inset 0 0 0 1px rgba(214,179,111,.16); border-radius: 3px; pointer-events: none; }
.carte figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 22px 10px 9px; background: linear-gradient(transparent, rgba(7,7,6,.85)); font: 500 clamp(11px, 1.1vw, 14px)/1.1 var(--f-display); letter-spacing: .08em; }
.carte figcaption b { display: block; font: 600 9px/1 var(--f-texte); letter-spacing: .14em; color: var(--or); margin-top: 4px; font-variant-numeric: tabular-nums; }
.sphere__vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 88% 92% at 50% 50%, transparent 48%, rgba(0,0,0,.26) 80%, rgba(0,0,0,.72) 100%); }
.sphere__aide { position: absolute; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; display: flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: rgba(243,236,224,.5); white-space: nowrap; pointer-events: none; }
.sphere__aide s { position: relative; width: 44px; height: 1px; background: rgba(243,236,224,.28); overflow: hidden; }
.sphere__aide s::after { content: ""; position: absolute; inset: 0; background: var(--or); animation: balaie 2.6s var(--ease) infinite; }
@keyframes balaie { 0% { transform: translateX(-100%); } 55% { transform: translateX(0); } 100% { transform: translateX(100%); } }
.packs__bas { padding-top: 20px; }
.puces { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.puce { appearance: none; border: 1px solid var(--ligne); background: rgba(16,15,13,.6); color: var(--ivoire); font: 500 11px/1 var(--f-texte); letter-spacing: .16em; text-transform: uppercase; padding: 13px 16px; min-height: 44px; cursor: pointer; transition: border-color .3s, color .3s; }
.puce:hover { border-color: var(--or); color: var(--or-clair); }
:root { --hw: min(56vw, 640px); }
@media (max-width: 640px) { :root { --hw: min(84vw, 360px); } #headline { font-size: clamp(28px, 8vw, 40px); } .sphere__aide { display: none; } }
@media (max-width: 380px) { :root { --hw: min(88vw, 320px); } }
/* Curseur doré (pointeurs fins uniquement) */
#dot { position: fixed; left: 0; top: 0; z-index: 300; width: 19px; height: 19px; margin: -9.5px; border-radius: 50%; background: rgba(240,217,164,.9); mix-blend-mode: difference; border: 1px solid transparent; pointer-events: none; transition: width .35s, height .35s, margin .35s, background .35s, border-color .35s; }
#dot.wide { width: 52px; height: 52px; margin: -26px; background: rgba(214,179,111,.14); border-color: rgba(240,217,164,.75); }
@media (hover: none), (pointer: coarse) { #dot { display: none; } }
/* ---------------- Fiche pack (panneau) ---------------- */
.fiche { position: fixed; inset: 0; z-index: 80; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: rgba(7,7,6,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility .6s; }
.fiche.is-open { opacity: 1; visibility: visible; }
.fiche__photo { position: relative; overflow: hidden; clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--ease); }
.fiche.is-open .fiche__photo { clip-path: inset(0 0 0 0); }
.fiche__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transform: scale(1.12); transition: transform 1.6s var(--ease); }
.fiche.is-open .fiche__photo img { transform: scale(1); }
.fiche__photo figcaption { position: absolute; left: 16px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); font-size: 10px; letter-spacing: .14em; color: rgba(243,236,224,.6); }
.fiche__corps { background: var(--laque); border-left: 1px solid var(--ligne); overflow-y: auto; padding: calc(clamp(28px, 5vw, 70px) + env(safe-area-inset-top, 0px)) clamp(20px, 5vw, 70px) calc(clamp(28px, 5vw, 70px) + env(safe-area-inset-bottom, 0px)); display: grid; align-content: safe center; gap: 22px; transform: translateX(40px); opacity: 0; transition: transform 1s .15s var(--ease), opacity 1s .15s var(--ease); }
.fiche.is-open .fiche__corps { transform: none; opacity: 1; }
.fiche__fermer { position: absolute; top: calc(18px + env(safe-area-inset-top, 0px)); right: 18px; z-index: 2; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(243,236,224,.3); background: rgba(7,7,6,.6); color: var(--ivoire); cursor: pointer; display: grid; place-items: center; }
.fiche__fermer:hover { border-color: var(--or); color: var(--or-clair); }
.fiche .titre { font-size: clamp(38px, 5vw, 70px); }
.fiche__sous { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--or); margin: 0; }
.fiche__desc { color: var(--ivoire-2); margin: 0; max-width: 52ch; }
.fiche__meta { display: flex; flex-wrap: wrap; gap: 32px; padding-block: 20px; border-block: 1px solid var(--ligne); }
.fiche__meta dt { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--ivoire-2); }
.fiche__meta dd { margin: 6px 0 0; font: 500 30px/1 var(--f-display); color: var(--or-clair); font-variant-numeric: tabular-nums; }
.fiche__meta dd s { font-size: 18px; color: var(--ivoire-2); margin-left: 8px; }
.fiche ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.fiche li { display: flex; gap: 12px; align-items: baseline; font-size: 15px; }
.fiche li::before { content: ""; width: 14px; height: 1px; background: var(--or); flex: none; transform: translateY(-4px); }
.fiche__note { font-size: 12px; color: var(--ivoire-2); margin: 0; }
.fiche__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.fiche__nav { display: flex; gap: 10px; }
.fiche__nav button { appearance: none; background: none; border: 0; color: var(--ivoire-2); font: 500 11px/1 var(--f-texte); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; padding: 8px 0; }
.fiche__nav button:hover { color: var(--or-clair); }
@media (max-width: 860px) {
.fiche { grid-template-columns: 1fr; grid-template-rows: 42vh 1fr; }
.fiche__corps { border-left: 0; border-top: 1px solid var(--ligne); align-content: start; }
.fiche__photo { clip-path: inset(0 0 100% 0); }
}
/* ---------------- Savoir-faire ---------------- */
.savoir { position: relative; padding-block: clamp(90px, 12vw, 160px); }
.savoir__grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.savoir__grille > * { min-width: 0; }
.savoir__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; max-width: 100%; }
.savoir__photo img { position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; will-change: transform; }
.savoir .titre { font-size: clamp(36px, 4.6vw, 66px); margin: 20px 0 26px; }
.etapes { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: e; }
.etapes li { counter-increment: e; display: grid; grid-template-columns: 54px 1fr; gap: 6px 14px; padding-block: 22px; border-top: 1px solid var(--ligne); }
.etapes li::before { content: counter(e, decimal-leading-zero); grid-row: span 2; font: 400 28px/1 var(--f-display); color: var(--or); }
.etapes b { font: 500 22px/1.1 var(--f-display); }
.etapes span { color: var(--ivoire-2); font-size: 15px; }
@media (max-width: 860px) { .savoir__grille { grid-template-columns: 1fr; } .savoir__photo { aspect-ratio: 4 / 3; } }
/* ---------------- Tous les tarifs ---------------- */
.tarifs { padding-block: 40px clamp(90px, 12vw, 150px); }
.tarifs .titre { font-size: clamp(34px, 4.4vw, 60px); margin: 18px 0 34px; }
.tarifs__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 5vw, 70px); }
.ligne { display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; align-items: baseline; padding-block: 18px; border-bottom: 1px solid var(--ligne); text-decoration: none; transition: padding .4s var(--ease); }
.ligne:hover { padding-left: 8px; }
.ligne--btn { appearance: none; background: none; border: 0; border-bottom: 1px solid var(--ligne); color: inherit; text-align: left; cursor: pointer; font: inherit; width: 100%; }
.ligne strong { font: 500 20px/1.15 var(--f-display); letter-spacing: .03em; }
.ligne em { font-style: normal; font: 500 22px/1 var(--f-display); color: var(--or-clair); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ligne em s { color: var(--ivoire-2); font-size: 15px; margin-right: 6px; }
.ligne span { grid-column: 1 / -1; font-size: 13px; color: var(--ivoire-2); }
.tarifs__note { margin-top: 22px; font-size: 12px; color: var(--ivoire-2); }
@media (max-width: 760px) { .tarifs__liste { grid-template-columns: 1fr; } }
/* ---------------- Avis ---------------- */
.avis { position: relative; padding-block: clamp(80px, 10vw, 130px); text-align: center; border-block: 1px solid var(--ligne); background: radial-gradient(60% 80% at 50% 0%, rgba(214,179,111,.08), transparent 70%); }
.avis__note { font: 400 clamp(90px, 16vw, 210px)/.9 var(--f-display); color: var(--or-clair); font-variant-numeric: tabular-nums; }
.avis__note small { font-size: .32em; color: var(--ivoire-2); }
.etoiles { display: inline-flex; gap: 6px; margin: 18px 0 14px; color: var(--or); }
.etoiles svg { width: 20px; height: 20px; }
.avis__haut p { margin: 0; color: var(--ivoire-2); max-width: 54ch; }
.avis .rvw { text-align: start; }
/* ---------------- Visite ---------------- */
.visite { padding-block: clamp(80px, 10vw, 140px); }
.visite__grille { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.visite__grille > * { min-width: 0; }
.visite .titre { font-size: clamp(40px, 6vw, 92px); margin: 18px 0 28px; }
.infos { display: grid; gap: 22px; }
.infos div { display: grid; gap: 4px; }
.infos dt { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--or); }
.infos dd { margin: 0; font: 500 22px/1.3 var(--f-display); }
.visite__photo { aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid var(--ligne); max-width: 100%; }
.visite__photo img { width: 100%; height: 100%; object-fit: cover; }
.visite .fiche__actions { margin-top: 34px; }
@media (max-width: 860px) { .visite__grille { grid-template-columns: 1fr; } .visite__photo { aspect-ratio: 16 / 10; } }
/* ---------------- Pied de page ---------------- */
.pied { padding-block: 40px calc(40px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ligne); font-size: 12px; color: var(--ivoire-2); }
.pied .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 30px; }
.pied a { color: var(--ivoire-2); text-decoration: none; }
.pied a:hover { color: var(--or-clair); }
.pied__liens { display: flex; flex-wrap: wrap; gap: 18px; }
.mention { width: 100%; font-size: 11px; opacity: .8; }
/* Apparitions */
[data-rv] { opacity: 1; transform: none; transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js [data-rv]:not(.is-in) { opacity: .001; transform: translateY(36px); }
/* ---------- Verre (repris de NEURAL : bord dégradé masqué, chaud à gauche, champagne à droite) ---------- */
.btn--verre { position: relative; color: var(--ivoire); border: 0; border-radius: 999px; background:
linear-gradient(180deg, rgba(7,7,6,0) 45%, rgba(7,7,6,.14) 78%, rgba(7,7,6,.3) 100%),
linear-gradient(90deg, rgba(255,214,150,.20) 0%, rgba(255,230,190,.08) 22%, rgba(243,236,224,.03) 55%, rgba(240,217,164,.10) 100%),
linear-gradient(90deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.14) 12%, rgba(255,255,255,.08) 30%, rgba(255,255,255,.04) 60%, rgba(255,255,255,.05) 100%);
-webkit-backdrop-filter: blur(22px) saturate(.6); backdrop-filter: blur(22px) saturate(.6);
box-shadow: 0 -2px 20px rgba(255,214,150,.18), 0 0 30px rgba(240,217,164,.10), inset 0 1px 0 rgba(255,250,240,.4); }
.btn--verre::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
background: linear-gradient(180deg, rgba(255,250,240,.9) 0%, rgba(255,250,240,.2) 45%, rgba(255,250,240,0) 78%),
linear-gradient(90deg, rgba(240,200,130,.95) 0%, rgba(240,220,180,.7) 12%, rgba(230,226,220,.04) 32%, rgba(230,226,220,.03) 62%, rgba(240,217,164,.7) 90%, rgba(214,179,111,.95) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.btn--verre:hover { color: var(--or-clair); background-position: 0 0; }
/* ---------- Badge à liseré + puce de verre (repris de NovaAI) ---------- */
.badge { display: inline-block; border-left: 2px solid var(--or); background: rgba(243,236,224,.12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: 7px 12px; font: 500 11px/1.2 var(--f-texte); letter-spacing: .15em; text-transform: uppercase; }
/* ---------- Fin de l'entrée : composition éditoriale ---------- */
.final { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: calc(96px + env(safe-area-inset-top, 0px)) clamp(16px, 4vw, 48px) calc(36px + env(safe-area-inset-bottom, 0px)); opacity: 0; pointer-events: none; will-change: opacity, transform; }
.final__ombre { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(7,7,6,.7) 0%, rgba(7,7,6,.15) 30%, rgba(7,7,6,.1) 55%, rgba(7,7,6,.85) 100%); }
.final__haut, .final__bas { display: flex; flex-direction: column; gap: 22px; }
@media (min-width: 640px) { .final__haut { flex-direction: row; justify-content: space-between; align-items: flex-start; } }
@media (min-width: 900px) { .final__bas { flex-direction: row; justify-content: space-between; align-items: flex-end; } }
.services { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font: 500 11px/1.3 var(--f-texte); letter-spacing: .15em; text-transform: uppercase; color: rgba(243,236,224,.9); text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.final__intro { margin: 0; max-width: 30ch; font: 400 clamp(19px, 1.7vw, 24px)/1.45 var(--f-display); text-shadow: 0 2px 14px rgba(0,0,0,.7); }
@media (min-width: 640px) { .final__intro { text-align: right; } }
.final__titre { margin: 18px 0 0; font: 400 clamp(46px, 7.4vw, 108px)/1.02 var(--f-display); letter-spacing: -.01em; text-shadow: 0 6px 40px rgba(0,0,0,.6); }
.final__titre em { color: var(--or-clair); }
.feats { margin: 22px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.feats li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: rgba(243,236,224,.88); }
.feats svg { width: 8px; height: 14px; fill: none; stroke: var(--or); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.carte-verre { display: flex; align-items: center; gap: 16px; padding: 12px; border-radius: 14px; border: 1px solid rgba(243,236,224,.18); background: rgba(243,236,224,.12); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); max-width: 360px; }
.carte-verre img { width: 80px; height: 96px; border-radius: 9px; object-fit: cover; flex: none; }
.carte-verre div { display: grid; gap: 6px; padding-right: 6px; }
.carte-verre b { font: 500 16px/1.2 var(--f-texte); }
.carte-verre small { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: rgba(243,236,224,.6); }
.pastille { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: 4px; padding: 9px 16px; border-radius: 999px; background: var(--ivoire); color: var(--noir); font: 600 12px/1 var(--f-texte); text-decoration: none; transition: background .3s; }
.pastille:hover { background: var(--or-clair); }
.pastille svg { width: 13px; height: 13px; }
@media (max-height: 640px) and (max-width: 899px) { .carte-verre { display: none; } }
/* ---------- Menu burger vitré (repris de NEURAL, piloté par une case à cocher) ---------- */
.navtoggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.burger { display: none; width: 46px; height: 36px; border-radius: 999px; border: 1px solid rgba(243,236,224,.35); background: rgba(255,255,255,.04); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); align-items: center; justify-content: center; cursor: pointer; position: relative; }
.burger::after { content: ""; position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; transform: translate(-50%, -50%); }
.burger svg { width: 20px; fill: none; stroke: var(--ivoire); stroke-width: 1.4; stroke-linecap: round; }
.burger path { transform-box: fill-box; transform-origin: center; transition: transform .24s ease, opacity .18s ease; }
.navtoggle:checked ~ .burger .b1 { transform: translateY(6px) rotate(45deg); }
.navtoggle:checked ~ .burger .b2 { opacity: 0; }
.navtoggle:checked ~ .burger .b3 { transform: translateY(-6px) rotate(-45deg); }
.navtoggle:focus-visible ~ .burger { outline: 1px solid var(--or-clair); outline-offset: 3px; }
.scrim { display: none; position: fixed; inset: 0; z-index: -1; }
.navpanel { position: absolute; top: calc(100% + 8px); right: clamp(16px, 4vw, 40px); width: min(300px, 84vw); max-height: calc(100svh - 96px); overflow-y: auto; display: grid; gap: 2px; padding: 14px; border-radius: 22px;
background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)), linear-gradient(90deg, rgba(255,214,150,.07), rgba(240,217,164,.05)), linear-gradient(180deg, rgba(7,7,6,.72), rgba(7,7,6,.82));
-webkit-backdrop-filter: blur(22px) saturate(.6); backdrop-filter: blur(22px) saturate(.6); box-shadow: 0 14px 38px rgba(0,0,0,.5);
opacity: 0; transform: translateY(-8px) scale(.985); transform-origin: 100% 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.navpanel a { display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 0 14px; border-radius: 13px; font: 400 21px/1 var(--f-display); text-decoration: none; transition: background .15s; }
.navpanel a:hover { background: rgba(255,255,255,.07); }
.navpanel a svg { width: 8px; height: 14px; fill: none; stroke: var(--or); stroke-width: 1.5; }
.navpanel .btn { margin-top: 8px; justify-content: center; border-radius: 999px; font-size: 11px; }
@media (max-width: 860px) {
.burger { display: inline-flex; }
.entete > .btn { display: none; }
.navtoggle:checked ~ .scrim { display: block; }
.navtoggle:checked ~ .navpanel { opacity: 1; transform: none; pointer-events: auto; }
}
@media (min-width: 861px) { .navpanel { display: none; } }
/* ---------- Savoir-faire plein écran + panneau vitré (repris de NovaAI, section deux) ---------- */
.savoir2 { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: clamp(90px, 10vw, 130px) clamp(16px, 4vw, 48px) clamp(40px, 5vw, 64px); }
.savoir2__fond { position: absolute; inset: -12% 0; z-index: -1; }
.savoir2__fond img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.savoir2::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,7,6,.75), rgba(7,7,6,.25) 35%, rgba(7,7,6,.35) 60%, rgba(7,7,6,.9)); }
.savoir2__haut { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 640px) { .savoir2__haut { flex-direction: row; justify-content: space-between; align-items: flex-start; } }
.savoir2__haut p { margin: 0; max-width: 34ch; font: 400 clamp(19px, 1.7vw, 24px)/1.45 var(--f-display); text-shadow: 0 2px 14px rgba(0,0,0,.7); }
@media (min-width: 640px) { .savoir2__haut p { text-align: right; } }
.savoir2__bas { display: flex; flex-direction: column; gap: 40px; }
@media (min-width: 900px) { .savoir2__bas { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 64px; } }
.savoir2__bas > * { min-width: 0; }
.savoir2 .titre { font-size: clamp(44px, 6.4vw, 96px); text-shadow: 0 6px 40px rgba(0,0,0,.55); }
.savoir2__txt { margin: 22px 0 0; max-width: 46ch; color: rgba(243,236,224,.82); text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.panneau { width: 100%; max-width: 460px; border-radius: 18px; border: 1px solid rgba(243,236,224,.16); background: rgba(243,236,224,.09); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); padding: 0 22px; }
.panneau__ligne { display: flex; gap: 20px; padding-block: 20px; border-bottom: 1px solid rgba(243,236,224,.15); }
.panneau__ligne:last-child { border-bottom: 0; }
.panneau__ligne > span { font: 500 11px/1.6 var(--f-texte); letter-spacing: .15em; color: rgba(243,236,224,.55); font-variant-numeric: tabular-nums; }
.panneau__ligne b { display: flex; align-items: center; gap: 8px; font: 500 20px/1.2 var(--f-display); }
.panneau__ligne b svg { width: 8px; height: 13px; fill: none; stroke: rgba(243,236,224,.4); stroke-width: 1.5; transition: transform .3s, stroke .3s; }
.panneau__ligne:hover b svg { transform: translateX(3px); stroke: var(--or); }
.panneau__ligne p { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: rgba(243,236,224,.72); }
/* ---------- Inspirations plein écran avec sélecteur d'avatars (repris de Kollektiva) ---------- */
.insp { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
.insp__fonds { position: absolute; inset: 0; }
.insp__fond { position: absolute; inset: 0; background-size: cover; background-position: 50% 18%; opacity: 0; transition: opacity .7s ease-out; }
.insp__fond.is-on { opacity: 1; }
@media (min-width: 861px) { .insp__fonds { left: auto; width: 60%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%); mask-image: linear-gradient(90deg, transparent, #000 32%); } }
.insp::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(7,7,6,.55), rgba(7,7,6,.08) 35%, rgba(7,7,6,.1) 55%, rgba(7,7,6,.85)); }
.insp__contenu { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: calc(90px + env(safe-area-inset-top, 0px)) clamp(16px, 4vw, 64px) calc(24px + env(safe-area-inset-bottom, 0px)); }
.insp__haut { display: flex; flex-direction: column; gap: 22px; }
@media (min-width: 768px) { .insp__haut { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 64px; } }
.insp__haut .titre { max-width: 12ch; font-size: clamp(36px, 6vw, 92px); text-shadow: 0 6px 40px rgba(0,0,0,.55); }
.insp__desc { max-width: 32ch; margin: 0; font-size: 15px; font-weight: 500; line-height: 1.6; color: rgba(243,236,224,.85); text-shadow: 0 2px 12px rgba(0,0,0,.7); }
@keyframes fondu { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.fondu { animation: fondu .5s ease; }
.insp__bas { display: grid; gap: 22px; }
.avatars { display: flex; align-items: flex-end; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.avatars::-webkit-scrollbar { display: none; }
.avatar { appearance: none; border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; cursor: pointer; color: inherit; }
.avatar i { width: 4px; height: 4px; border-radius: 50%; background: var(--or); opacity: 0; transition: opacity .3s; }
.avatar.is-on i { opacity: 1; }
.avatar span { display: block; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; border: 1px solid rgba(243,236,224,.25); transition: border-color .3s; }
.avatar.is-on span { border-color: var(--or); }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
@media (min-width: 640px) { .avatar span { width: 60px; height: 60px; } .avatars { overflow: visible; } }
.insp__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 18px; border-top: 1px solid rgba(243,236,224,.2); font-size: 14px; font-weight: 500; }
.insp__meta .m2, .insp__meta .m3 { color: rgba(243,236,224,.7); }
.insp__meta button { appearance: none; background: none; border: 0; padding: 0; color: var(--or-clair); font: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.insp__meta button:hover { color: var(--ivoire); }
@media (max-width: 639px) { .insp__meta .m2 { display: none; } }
@media (max-width: 767px) { .insp__meta .m3 { display: none; } }
/* ---------- Titres qui s'ouvrent en volet (repris de NEURAL) ---------- */
.js [data-rv] .titre, .js .titre[data-rv] { clip-path: inset(-.35em 0 100% 0); transition: clip-path 1.15s cubic-bezier(.16,1,.3,1) .12s; }
.js [data-rv].is-in .titre, .js .titre[data-rv].is-in { clip-path: inset(-.35em -.2em -.35em -.2em); }
/* ---------- Tourbillon doré (adapté de « Tornado » d'Originkit, Three.js) ---------- */
.vortex { position: relative; height: 220vh; }
.vortex__scene { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: radial-gradient(60% 50% at 50% 55%, #1a140b, var(--noir) 70%); }
.vortex__scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vortex__txt { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: calc(100px + env(safe-area-inset-top, 0px)) clamp(16px, 4vw, 48px) calc(40px + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
.vortex__txt .titre { font-size: clamp(42px, 7vw, 108px); max-width: 11ch; text-shadow: 0 8px 40px rgba(0,0,0,.7); margin-top: 18px; }
.vortex__bas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }
.vortex__bas p { margin: 0; max-width: 40ch; color: rgba(243,236,224,.78); text-shadow: 0 2px 12px rgba(0,0,0,.8); }
.vortex__bas .btn { pointer-events: auto; }
.vortex__compteur { font: 500 11px/1 var(--f-texte); letter-spacing: .24em; text-transform: uppercase; color: var(--or); font-variant-numeric: tabular-nums; }
/* ---------- Photo à tuiles retournées (adapté de « Image Flipper » d'Originkit) ---------- */
.visite__photo { position: relative; }
.visite__photo canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* ---------- L'atelier : 20 univers animés ---------- */
.atelier { padding-block: clamp(90px, 11vw, 150px); border-top: 1px solid var(--ligne); }
.atelier__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 40px; }
.atelier__tete .titre { font-size: clamp(40px, 6vw, 88px); margin-top: 18px; }
.atelier__tete p { color: var(--ivoire-2); max-width: 42ch; margin: 0; }
.atelier__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.univers { position: relative; margin: 0; display: grid; grid-template-rows: auto auto; background: var(--laque); border: 1px solid var(--ligne); min-width: 0; }
.univers__scene { position: relative; aspect-ratio: 4 / 3; overflow: hidden; max-width: 100%; isolation: isolate; }
.univers__scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.univers figcaption { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--ligne); }
.univers figcaption span { font: 500 11px/1 var(--f-texte); color: var(--or); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.univers figcaption b { font: 500 19px/1.1 var(--f-display); }
.univers figcaption small { grid-column: 2 / 3; font-size: 12px; color: var(--ivoire-2); line-height: 1.4; }
.univers figcaption button { grid-row: 1 / 3; grid-column: 3; appearance: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ligne); background: none; color: var(--ivoire); cursor: pointer; display: grid; place-items: center; transition: border-color .3s, color .3s; }
.univers figcaption button:hover { border-color: var(--or); color: var(--or-clair); }
.univers figcaption svg { width: 16px; height: 16px; }
.univers:not(.is-vis) .univers__scene * { animation-play-state: paused !important; }
.plein { position: fixed; inset: 0; z-index: 90; background: var(--noir); display: grid; grid-template-rows: 1fr auto; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.plein.is-open { opacity: 1; visibility: visible; }
.plein__scene { position: relative; overflow: hidden; isolation: isolate; }
.plein__scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.plein__barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 16px clamp(16px, 4vw, 40px) calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ligne); background: var(--laque); }
.plein__barre b { font: 500 24px/1 var(--f-display); }
.plein__barre span { font-size: 11px; letter-spacing: .2em; color: var(--or); margin-right: 12px; }
.plein__nav { display: flex; gap: 8px; }
.plein__nav button { appearance: none; min-height: 44px; padding: 0 16px; border: 1px solid var(--ligne); background: none; color: var(--ivoire); font: 500 11px/1 var(--f-texte); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.plein__nav button:hover { border-color: var(--or); color: var(--or-clair); }
/* 02 Liquid Morph */
.u-liquid { position: absolute; inset: 0; background: #0d0a06; filter: url(#goo); }
.u-liquid i { position: absolute; width: 34%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fbe7b5, #d6b36f 45%, #8a6b33); animation: flotte 7s ease-in-out infinite; }
.u-liquid i:nth-child(1) { left: 12%; top: 20%; }
.u-liquid i:nth-child(2) { left: 48%; top: 38%; width: 28%; animation-duration: 9s; animation-delay: -3s; }
.u-liquid i:nth-child(3) { left: 30%; top: 52%; width: 22%; animation-duration: 6s; animation-delay: -1s; }
.u-liquid i:nth-child(4) { left: 62%; top: 12%; width: 18%; animation-duration: 8s; animation-delay: -5s; }
@keyframes flotte { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(28%, -18%) scale(1.15); } 66% { transform: translate(-22%, 20%) scale(.85); } }
.u-liquid-txt { position: absolute; inset: 0; display: grid; place-items: center; font: italic 400 clamp(26px, 7cqi, 64px)/1 var(--f-display); color: #fff8e6; mix-blend-mode: difference; container-type: inline-size; }
/* 03 Holographic */
.u-holo { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 120%, #1c1630, #07060b 70%); perspective: 800px; }
.u-holo__carte { width: 62%; aspect-ratio: 1.586; border-radius: 14px; position: relative; overflow: hidden; transform: rotateX(var(--rx, 8deg)) rotateY(var(--ry, -14deg)); transition: transform .2s ease-out; box-shadow: 0 30px 60px rgba(0,0,0,.6);
background: linear-gradient(115deg, #2b2b33, #15151c); }
.u-holo__carte::before { content: ""; position: absolute; inset: 0; background: conic-gradient(from var(--a, 0deg) at var(--mx, 30%) var(--my, 30%), #ff9de2, #9be7ff, #b8ffb0, #fff3a6, #ffb3a1, #c8a6ff, #ff9de2); mix-blend-mode: color-dodge; opacity: .55; animation: holo 6s linear infinite; }
.u-holo__carte::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(105deg, rgba(255,255,255,0) 0 6px, rgba(255,255,255,.08) 6px 7px); }
@property --a { syntax: ""; inherits: false; initial-value: 0deg; }
@keyframes holo { to { --a: 360deg; } }
.u-holo__carte b { position: absolute; left: 8%; bottom: 12%; z-index: 1; font: 500 clamp(14px, 3.4vw, 26px)/1 var(--f-display); letter-spacing: .3em; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.u-holo__carte small { position: absolute; left: 8%; top: 12%; z-index: 1; font: 600 9px/1 var(--f-texte); letter-spacing: .3em; color: rgba(255,255,255,.85); }
.u-holo__carte i { position: absolute; right: 8%; top: 12%; z-index: 1; width: 16%; aspect-ratio: 1.3; border-radius: 4px; background: linear-gradient(135deg, #f0d9a4, #8a6b33); }
/* 04 Neon Glow */
.u-neon { position: absolute; inset: 0; display: grid; place-content: center; gap: 6%; text-align: center; background: radial-gradient(circle at 50% 50%, #1a0a14, #050304 70%), repeating-linear-gradient(90deg, #0b0709 0 40px, #0e0a0c 40px 80px); container-type: inline-size; }
.u-neon b { font: 500 clamp(26px, 12cqi, 96px)/1 var(--f-display); font-style: italic; color: #ffe9f5; text-shadow: 0 0 4px #fff, 0 0 12px #ff4fb8, 0 0 28px #ff4fb8, 0 0 60px #ff2aa0; animation: neon 3.4s infinite; }
.u-neon span { font: 600 clamp(10px, 4cqi, 26px)/1 var(--f-texte); letter-spacing: .4em; color: #fff7d6; text-shadow: 0 0 4px #fff, 0 0 12px #ffcf5a, 0 0 30px #ffb020; animation: neon 5s infinite .7s; }
@keyframes neon { 0%,18%,22%,25%,53%,57%,100% { opacity: 1; } 20%,24%,55% { opacity: .35; } }
/* 06 Glassmorphism */
.u-verre { position: absolute; inset: 0; display: grid; place-items: center; background: #0b0910; overflow: hidden; container-type: inline-size; }
.u-verre i { position: absolute; border-radius: 50%; filter: blur(2px); animation: flotte 10s ease-in-out infinite; }
.u-verre i:nth-child(1) { width: 46%; aspect-ratio: 1; left: 6%; top: 8%; background: radial-gradient(circle at 30% 30%, #f0d9a4, #b0742f); }
.u-verre i:nth-child(2) { width: 36%; aspect-ratio: 1; right: 4%; bottom: 0; background: radial-gradient(circle at 30% 30%, #ff9fbf, #7a2c55); animation-delay: -4s; }
.u-verre i:nth-child(3) { width: 22%; aspect-ratio: 1; right: 30%; top: 4%; background: radial-gradient(circle at 30% 30%, #b3c7ff, #34407a); animation-delay: -7s; }
.u-verre__carte { position: relative; z-index: 1; width: 66%; padding: 6cqi; border-radius: 4cqi; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 20px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.4); display: grid; gap: 2.6cqi; }
.u-verre__carte small { font: 600 2.6cqi/1 var(--f-texte); letter-spacing: .25em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.u-verre__carte b { font: 500 7cqi/1 var(--f-display); }
.u-verre__carte span { font-size: 3.4cqi; color: rgba(255,255,255,.85); }
.u-verre__carte em { justify-self: start; font-style: normal; padding: 2cqi 4cqi; border-radius: 99px; background: rgba(255,255,255,.9); color: #111; font: 600 3cqi/1 var(--f-texte); }
/* 07 Kinetic Typography */
.u-kine { position: absolute; inset: 0; display: grid; place-content: center; gap: 2%; background: #0a0908; container-type: inline-size; overflow: hidden; }
.u-kine__ligne { display: flex; justify-content: center; font: 500 clamp(22px, 12cqi, 110px)/.95 var(--f-display); white-space: nowrap; }
.u-kine__ligne span { display: inline-block; animation: vague 2.4s cubic-bezier(.7,0,.3,1) infinite; animation-delay: calc(var(--i) * 60ms); }
.u-kine__ligne.or span { color: var(--or-clair); font-style: italic; animation-name: bascule; }
@keyframes vague { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-22%); } }
@keyframes bascule { 0%, 55%, 100% { transform: rotateX(0); opacity: 1; } 25% { transform: rotateX(90deg); opacity: .2; } }
.u-kine__defile { position: absolute; left: 0; bottom: 6%; white-space: nowrap; font: 600 3cqi/1 var(--f-texte); letter-spacing: .3em; color: rgba(243,236,224,.35); animation: defile 14s linear infinite; }
@keyframes defile { to { transform: translateX(-50%); } }
/* 09 Clay 3D */
.u-clay { position: absolute; inset: 0; background: linear-gradient(160deg, #f6e7da, #e8cfc0); display: grid; place-items: center; container-type: inline-size; }
.u-clay i { position: absolute; border-radius: 50%; box-shadow: inset -6cqi -6cqi 10cqi rgba(0,0,0,.18), inset 4cqi 4cqi 8cqi rgba(255,255,255,.55), 3cqi 6cqi 10cqi rgba(120,70,40,.25); animation: rebond 2.6s cubic-bezier(.5,0,.5,1) infinite; }
.u-clay i:nth-child(1) { width: 26cqi; height: 26cqi; left: 14%; top: 26%; background: #f2a7a0; }
.u-clay i:nth-child(2) { width: 18cqi; height: 18cqi; left: 46%; top: 44%; background: #f7d38b; animation-delay: -.8s; }
.u-clay i:nth-child(3) { width: 14cqi; height: 14cqi; left: 70%; top: 22%; background: #b9d7c4; animation-delay: -1.5s; }
.u-clay i:nth-child(4) { width: 40cqi; height: 9cqi; left: 30%; bottom: 10%; border-radius: 99px; background: #c9b7e6; animation: none; }
.u-clay b { position: absolute; left: 7%; top: 8%; font: 700 6cqi/1 var(--f-texte); letter-spacing: -.02em; color: #7a4a3a; }
@keyframes rebond { 0%, 100% { transform: translateY(0) scale(1, 1); } 45% { transform: translateY(-30%) scale(.95, 1.06); } 90% { transform: translateY(0) scale(1.12, .88); } }
/* 12 Comic Book */
.u-bd { position: absolute; inset: 0; background: #ffd23f; display: grid; grid-template-columns: 1fr 1fr; gap: 3%; padding: 4%; container-type: inline-size; }
.u-bd > div { position: relative; border: .9cqi solid #111; background: radial-gradient(#111 18%, transparent 19%) 0 0 / 2.2cqi 2.2cqi, #ff5d73; overflow: hidden; }
.u-bd > div:nth-child(2) { background: radial-gradient(#111 18%, transparent 19%) 0 0 / 2.2cqi 2.2cqi, #4cc9f0; }
.u-bd__boum { position: absolute; inset: 0; display: grid; place-items: center; }
.u-bd__boum b { display: grid; place-items: center; width: 80%; aspect-ratio: 1; clip-path: polygon(50% 0, 61% 26%, 92% 12%, 76% 40%, 100% 56%, 72% 64%, 80% 96%, 52% 76%, 26% 98%, 30% 68%, 0 62%, 24% 44%, 6% 14%, 38% 26%); background: #fff; color: #e5383b; font: 900 7cqi/1 "Arial Black", Impact, sans-serif; transform: rotate(-8deg); animation: boum 1.6s cubic-bezier(.3,1.6,.5,1) infinite; -webkit-text-stroke: .3cqi #111; }
@keyframes boum { 0% { transform: scale(.2) rotate(-30deg); } 30%, 80% { transform: scale(1) rotate(-8deg); } 100% { transform: scale(1.05) rotate(-6deg); } }
.u-bd__bulle { position: absolute; left: 8%; top: 8%; right: 8%; padding: 4cqi; background: #fff; border: .7cqi solid #111; border-radius: 50% / 40%; font: 800 3.6cqi/1.15 "Comic Sans MS", "Chalkboard SE", sans-serif; color: #111; text-align: center; }
.u-bd__bulle::after { content: ""; position: absolute; left: 30%; bottom: -5cqi; border: 2.6cqi solid transparent; border-top: 3.6cqi solid #111; }
.u-bd__ciseaux { position: absolute; bottom: 8%; left: 50%; translate: -50% 0; font-size: 16cqi; animation: coupe .5s steps(2) infinite; }
@keyframes coupe { 50% { transform: rotate(-14deg); } }
/* 13 Split-Flap */
.u-flap { position: absolute; inset: 0; background: #111; display: grid; place-content: center; gap: 1.6cqi; container-type: inline-size; padding: 4%; }
.u-flap__ligne { display: flex; gap: .7cqi; justify-content: center; }
.u-flap__c { position: relative; width: 6.6cqi; height: 9.6cqi; background: linear-gradient(#262626 50%, #1d1d1d 50%); border-radius: .6cqi; color: #f6e7b8; font: 600 6.4cqi/9.6cqi ui-monospace, Menlo, monospace; text-align: center; box-shadow: inset 0 -1px 0 #000; overflow: hidden; }
.u-flap__c::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #000; }
.u-flap__c.flip { animation: flapt .09s linear; }
@keyframes flapt { 50% { transform: scaleY(.1); filter: brightness(.6); } }
.u-flap small { text-align: center; font: 600 2.4cqi/1 var(--f-texte); letter-spacing: .3em; color: #f0b429; margin-top: 2cqi; }
/* 16 Bauhaus */
.u-bau { position: absolute; inset: 0; background: #efe6d2; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); container-type: inline-size; }
.u-bau > i { position: relative; display: block; }
.u-bau .r { background: #d62828; } .u-bau .j { background: #f7b801; } .u-bau .b { background: #1d4e89; } .u-bau .n { background: #111; }
.u-bau .cercle { border-radius: 50%; animation: tourne 6s cubic-bezier(.7,0,.3,1) infinite; }
.u-bau .demi { border-radius: 100% 0 0 0; animation: tourne 6s cubic-bezier(.7,0,.3,1) infinite -2s; }
.u-bau .tri { clip-path: polygon(0 100%, 100% 100%, 50% 0); animation: glisse 6s cubic-bezier(.7,0,.3,1) infinite -1s; }
.u-bau .barre { transform-origin: left; animation: etire 6s cubic-bezier(.7,0,.3,1) infinite -3s; }
.u-bau b { position: absolute; right: 4%; bottom: 6%; font: 800 5.6cqi/1 var(--f-texte); color: #111; letter-spacing: -.02em; }
@keyframes tourne { 0%, 20% { transform: rotate(0); } 40%, 70% { transform: rotate(180deg); } 90%, 100% { transform: rotate(360deg); } }
@keyframes glisse { 0%, 25% { transform: translateY(0); } 50%, 75% { transform: translateY(-40%); } 100% { transform: translateY(0); } }
@keyframes etire { 0%, 30% { transform: scaleX(1); } 50%, 80% { transform: scaleX(.3); } 100% { transform: scaleX(1); } }
/* 19 Art Deco */
.u-deco { position: absolute; inset: 0; background: radial-gradient(circle at 50% 110%, #1c1a12, #050505 70%); display: grid; place-items: center; }
.u-deco svg { width: 92%; height: 92%; }
.u-deco .trait { fill: none; stroke: #d6b36f; stroke-width: 1.1; stroke-dasharray: 400; stroke-dashoffset: 400; animation: trace-deco 6s ease-in-out infinite; }
@keyframes trace-deco { 0% { stroke-dashoffset: 400; } 40%, 75% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -400; } }
.u-deco text { fill: #f0d9a4; font-family: var(--f-display); letter-spacing: .3em; }
/* 20 Neo-Brutalism */
.u-brut { position: absolute; inset: 0; background: #fff4d6; display: grid; place-items: center; container-type: inline-size; font-family: "Arial Black", "Arial Bold", Arial, sans-serif; color: #000; font-weight: 900; }
.u-brut__carte { width: 72%; background: #fff; border: .8cqi solid #000; box-shadow: 2.4cqi 2.4cqi 0 #000; padding: 4.5cqi; display: grid; gap: 3cqi; transform: rotate(-2deg); animation: secoue 3s ease-in-out infinite; }
.u-brut__carte b { font-size: 7.6cqi; line-height: .95; text-transform: uppercase; color: #000; }
.u-brut__carte span { display: inline-block; justify-self: start; padding: 1.4cqi 2.4cqi; background: #ff5ab4; border: .6cqi solid #000; font-size: 3.4cqi; line-height: 1; text-transform: uppercase; color: #000; }
.u-brut__bouton { justify-self: start; padding: 2.4cqi 4.4cqi; background: #3df58b; border: .7cqi solid #000; box-shadow: 1.4cqi 1.4cqi 0 #000; font-size: 3.6cqi; line-height: 1; text-transform: uppercase; color: #000; animation: appuie 1.6s steps(1) infinite; }
.u-brut i { position: absolute; width: 14cqi; height: 14cqi; border: .8cqi solid #000; background: #ffd400; border-radius: 50%; right: 8%; top: 9%; animation: tourne 4s linear infinite; }
@keyframes secoue { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(1.5deg) translateY(-2%); } }
@keyframes appuie { 0%, 70% { transform: none; box-shadow: 1.4cqi 1.4cqi 0 #000; } 71%, 100% { transform: translate(1.4cqi, 1.4cqi); box-shadow: 0 0 0 #000; } }
@media (prefers-reduced-motion: reduce) {
.js [data-rv] .titre, .js .titre[data-rv] { clip-path: none; }
.entree { height: auto; }
.scene { position: relative; }
.scene__interieur, .scene__txt .t2, .final, .final__ombre, .scene__lumiere { display: none; }
.scene__txt .t1 { opacity: 1; transform: none; }
.scene__kb { animation: none !important; }
.scene__grain, .scene__indic { display: none; }
.js [data-rv]:not(.is-in) { opacity: 1; transform: none; }
* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* ---------------- Maison : photo de groupe ---------------- */
.excellence { padding-block: clamp(90px, 12vw, 160px) clamp(40px, 6vw, 80px); }
.excellence__tete, .prestations__tete { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(32px, 5vw, 60px); }
.excellence__tete > *, .prestations__tete > * { min-width: 0; }
.excellence .titre, .prestations .titre { font-size: clamp(38px, 5.4vw, 80px); margin-top: 18px; }
.excellence__tete p, .prestations__tete p { color: var(--ivoire-2); margin: 0; max-width: 48ch; }
.excellence__photo { position: relative; margin: 0; border-radius: 26px; overflow: hidden; border: 1px solid var(--ligne); box-shadow: 0 40px 100px -40px rgba(0,0,0,.9); aspect-ratio: 3 / 2; background: var(--laque); }
.excellence__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 1.6s var(--ease); }
.excellence__photo:hover img { transform: scale(1.025); }
.excellence__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,7,6,.45), transparent 35%); pointer-events: none; }
figure figcaption.leg, .excellence__photo figcaption, .vip__photo figcaption, .univers__photo figcaption { position: absolute; right: 14px; bottom: 12px; z-index: 2; font-size: 10px; letter-spacing: .14em; color: rgba(243,236,224,.7); text-shadow: 0 1px 6px rgba(0,0,0,.8); }
@media (max-width: 760px) { .excellence__tete, .prestations__tete { grid-template-columns: 1fr; } .excellence__photo { aspect-ratio: 4 / 3; border-radius: 18px; } }
/* ---------------- Prestations : cartes portrait ---------------- */
.prestations { padding-block: clamp(50px, 7vw, 100px) clamp(90px, 12vw, 150px); }
.pgrille { width: min(1200px, 100%); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.pcarte { position: relative; display: grid; grid-template-rows: auto 1fr; padding: 0; border: 1px solid var(--ligne); border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, #15130f, #0b0a08); color: inherit; text-align: left; font: inherit; cursor: pointer; transition: opacity 1s var(--ease), transform .6s var(--ease), border-color .4s, box-shadow .5s var(--ease); -webkit-tap-highlight-color: transparent; }
.pcarte:hover { transform: translateY(-6px); border-color: rgba(214,179,111,.55); box-shadow: 0 30px 70px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(214,179,111,.12); }
.pcarte:active { transform: translateY(-2px) scale(.99); }
.pcarte:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; }
.pcarte__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #1b1813; }
.pcarte__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: transform 1.2s var(--ease); }
.pcarte:hover .pcarte__photo img { transform: scale(1.05); }
.pcarte__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,7,6,.85), transparent 45%); }
.pcarte__num { position: absolute; left: 14px; top: 12px; z-index: 1; font: italic 400 15px/1 var(--f-display); color: var(--or-clair); text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.pcarte__promo { position: absolute; right: 12px; top: 12px; z-index: 1; padding: 6px 10px; border-radius: 999px; background: linear-gradient(110deg, #b8924c, var(--or-clair) 50%, #c49f5c); color: var(--noir); font: 600 9px/1 var(--f-texte); letter-spacing: .2em; text-transform: uppercase; }
.pcarte__prix { position: absolute; left: 16px; bottom: 14px; z-index: 1; font: 500 clamp(22px, 2vw, 28px)/1 var(--f-display); color: var(--or-clair); font-variant-numeric: tabular-nums; }
.pcarte__prix s { font-size: .62em; color: var(--ivoire-2); margin-right: 6px; }
.pcarte__corps { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: start; padding: 16px 16px 18px; }
.pcarte__nom { font: 500 clamp(18px, 1.5vw, 22px)/1.1 var(--f-display); letter-spacing: .04em; }
.pcarte__desc { grid-column: 1 / -1; margin: 0; font-size: 13px; line-height: 1.5; color: var(--ivoire-2); }
.pcarte__fleche { grid-row: 1; grid-column: 2; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ligne); display: grid; place-items: center; color: var(--or); transition: background .4s, color .4s, transform .5s var(--ease); }
.pcarte__fleche svg { width: 16px; height: 16px; }
.pcarte:hover .pcarte__fleche { background: var(--or); color: var(--noir); transform: rotate(-45deg); }
.pnav { display: none; }
@media (max-width: 1100px) { .pgrille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .pgrille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
.pgrille { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; gap: 12px; padding-bottom: 8px; scrollbar-width: none; overscroll-behavior-x: contain; }
.pgrille::-webkit-scrollbar { display: none; }
.pcarte { flex: 0 0 78%; scroll-snap-align: start; }
.pnav { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.pnav__btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--ligne); background: none; color: var(--or-clair); font-size: 18px; cursor: pointer; }
.pnav__compte { font-size: 12px; letter-spacing: .2em; color: var(--ivoire-2); font-variant-numeric: tabular-nums; }
}
/* ---------------- L'accueil ---------------- */
.vip { padding-block: clamp(90px, 12vw, 160px); }
.vip__grille { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.vip__grille > * { min-width: 0; }
.vip__photo { position: relative; margin: 0; border-radius: 26px; overflow: hidden; border: 1px solid var(--ligne); aspect-ratio: 1374 / 1145; box-shadow: 0 40px 100px -40px rgba(0,0,0,.9); }
.vip__photo img { width: 100%; height: 100%; object-fit: cover; }
.vip .titre { font-size: clamp(36px, 4.6vw, 68px); margin: 18px 0 20px; }
.vip__texte > p { color: var(--ivoire-2); max-width: 46ch; }
.vip__etapes { list-style: none; margin: 26px 0 30px; padding: 0; counter-reset: v; }
.vip__etapes li { counter-increment: v; display: grid; grid-template-columns: 44px 1fr; gap: 2px 12px; padding-block: 16px; border-top: 1px solid var(--ligne); }
.vip__etapes li::before { content: counter(v, decimal-leading-zero); grid-row: span 2; font: italic 400 22px/1 var(--f-display); color: var(--or); }
.vip__etapes b { font: 500 21px/1.15 var(--f-display); }
.vip__etapes span { font-size: 14px; color: var(--ivoire-2); }
@media (max-width: 860px) { .vip__grille { grid-template-columns: 1fr; } .vip__photo { border-radius: 18px; } }
/* ---------------- L'univers ---------------- */
.univers { position: relative; min-height: min(100svh, 920px); display: grid; align-items: end; overflow: hidden; }
.univers__photo { position: absolute; inset: 0; margin: 0; }
.univers__photo img { width: 100%; height: 115%; object-fit: cover; will-change: transform; }
.univers__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,7,6,.92), rgba(7,7,6,.2) 55%, rgba(7,7,6,.5)); }
.univers__photo figcaption { top: 14px; bottom: auto; }
.univers__contenu { position: relative; z-index: 1; padding-block: clamp(80px, 12vw, 140px) clamp(40px, 6vw, 80px); }
.univers__carte { max-width: 560px; padding: clamp(22px, 4vw, 40px); border-radius: 24px; border: 1px solid rgba(240,217,164,.22); background: rgba(10,9,8,.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); display: grid; gap: 16px; justify-items: start; }
.univers .titre { font-size: clamp(34px, 4.4vw, 62px); margin: 0; }
.univers__carte p { margin: 0; color: var(--ivoire-2); }
/* ---------------- Fiche : longueurs et cheveux ---------------- */
.fiche__options { display: grid; gap: 8px; }
.fiche__options[hidden] { display: none; }
.fiche__options legend { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--ivoire-2); margin-bottom: 8px; padding: 0; }
.fiche__options fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.opt { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; min-height: 52px; padding: 10px 16px; border: 1px solid var(--ligne); border-radius: 14px; cursor: pointer; transition: border-color .3s, background .3s; }
.opt:hover { border-color: rgba(214,179,111,.5); }
.opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--or); }
.opt:has(input:checked) { border-color: var(--or); background: rgba(214,179,111,.09); }
.opt span { font-size: 15px; }
.opt b { font: 500 20px/1 var(--f-display); color: var(--or-clair); white-space: nowrap; }
.opt small { color: var(--ivoire-2); font-size: 12px; margin-left: 8px; font-family: var(--f-texte); }
.fiche__cheveux { margin: 0; font-size: 14px; color: var(--ivoire); }
.fiche__cheveux[hidden] { display: none; }
.fiche__cheveux b { display: block; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--ivoire-2); font-weight: 500; margin-bottom: 6px; }
#fiche-resa[aria-disabled="true"] { opacity: .45; pointer-events: none; }
/* ---------------- Notre histoire ---------------- */
.histoire { position: relative; padding-block: clamp(90px, 12vw, 170px); overflow: hidden; }
.histoire::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 60% at 85% 10%, rgba(214,179,111,.10), transparent 70%); pointer-events: none; }
.histoire__tete { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: end; margin-bottom: clamp(44px, 6vw, 80px); }
.histoire__tete > * { min-width: 0; }
.histoire .titre { font-size: clamp(38px, 5.4vw, 80px); margin-top: 20px; }
.histoire__tete p { color: var(--ivoire-2); margin: 0; max-width: 50ch; }
.chapitres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ligne); }
.chapitre { position: relative; padding: 34px clamp(16px, 2vw, 28px) 30px 0; border-right: 1px solid var(--ligne); }
.chapitre + .chapitre { padding-left: clamp(16px, 2vw, 28px); }
.chapitre:last-child { border-right: 0; }
.chapitre__num { font: italic 400 15px/1 var(--f-display); color: var(--or); letter-spacing: .1em; }
.chapitre__gros { display: block; margin: 26px 0 14px; font: 400 clamp(54px, 6vw, 92px)/.9 var(--f-display); color: var(--or-clair); font-variant-numeric: tabular-nums; }
.chapitre b { display: block; font: 500 23px/1.15 var(--f-display); margin-bottom: 10px; }
.chapitre p { margin: 0; font-size: 15px; color: var(--ivoire-2); }
.histoire__note { margin-top: 30px; font-size: 12px; color: var(--ivoire-2); opacity: .8; }
@media (max-width: 960px) { .chapitres { grid-template-columns: repeat(2, minmax(0, 1fr)); } .chapitre:nth-child(2) { border-right: 0; } .chapitre:nth-child(3) { padding-left: 0; } .chapitre:nth-child(n+3) { border-top: 1px solid var(--ligne); } }
@media (max-width: 560px) { .histoire__tete { grid-template-columns: 1fr; } .chapitres { grid-template-columns: 1fr; } .chapitre, .chapitre + .chapitre { padding-left: 0; border-right: 0; } .chapitre + .chapitre { border-top: 1px solid var(--ligne); } }
.privilege { position: relative; padding-block: clamp(90px, 12vw, 160px); background: linear-gradient(180deg, transparent, rgba(214,179,111,.05) 40%, transparent); border-block: 1px solid var(--ligne); overflow: hidden; }
.privilege__grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 100px); align-items: center; }
.privilege__grille > * { min-width: 0; }
.privilege .titre { font-size: clamp(38px, 5.2vw, 76px); margin: 20px 0 22px; }
.privilege p { color: var(--ivoire-2); max-width: 48ch; }
.paliers { display: grid; gap: 0; margin: 28px 0 32px; padding: 0; list-style: none; }
.paliers li { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: baseline; padding-block: 16px; border-top: 1px solid var(--ligne); }
.paliers li:last-child { border-bottom: 1px solid var(--ligne); }
.paliers b { font: 500 26px/1 var(--f-display); color: var(--or-clair); font-variant-numeric: tabular-nums; white-space: nowrap; }
.paliers span { font-size: 15px; }
.privilege__note { font-size: 12px; color: var(--ivoire-2); margin-top: 18px; }
.carte3d { perspective: 1400px; display: grid; place-items: center; padding: 20px 0; }
.cartep { --rx: 8deg; --ry: -16deg; position: relative; width: min(440px, 100%); aspect-ratio: 1.586; border-radius: 22px; padding: clamp(18px, 4.5%, 28px); display: grid; grid-template-rows: auto 1fr auto; color: var(--ivoire);
background: radial-gradient(120% 140% at 0% 0%, #2a2418 0%, #0c0b09 46%, #050504 100%); border: 1px solid rgba(240,217,164,.35);
box-shadow: 0 50px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.6) inset, 0 1px 0 rgba(255,240,200,.18) inset;
transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .6s var(--ease); overflow: hidden; }
.cartep::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(240,217,164,.05) 0 1px, transparent 1px 7px); pointer-events: none; }
.cartep::after { content: ""; position: absolute; inset: -40%; background: linear-gradient(105deg, transparent 40%, rgba(255,236,190,.20) 50%, transparent 60%); transform: translateX(var(--reflet, -30%)); transition: transform .6s var(--ease); pointer-events: none; }
.cartep__haut { display: flex; justify-content: space-between; align-items: center; position: relative; }
.cartep__logo { font: 500 clamp(14px, 3.6vw, 18px)/1 var(--f-display); letter-spacing: .36em; }
.cartep__logo b { color: var(--or); font-weight: 500; }
.cartep__niveau { font: 600 9px/1 var(--f-texte); letter-spacing: .3em; text-transform: uppercase; color: var(--noir); background: linear-gradient(110deg, #b8924c, var(--or-clair) 50%, #c49f5c); padding: 6px 10px; border-radius: 999px; }
.cartep__puce { width: 44px; height: 34px; border-radius: 7px; margin-top: 18px; background: linear-gradient(135deg, #f0d9a4, #a7843f 60%, #e9cf92); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); position: relative; }
.cartep__puce::before { content: ""; position: absolute; inset: 8px 10px; border: 1px solid rgba(0,0,0,.28); border-radius: 3px; }
.cartep__bas { display: flex; justify-content: space-between; align-items: end; gap: 12px; position: relative; }
.cartep__nom { font: 400 clamp(20px, 5vw, 28px)/1 var(--f-display); }
.cartep__code { display: block; margin-top: 8px; font: 500 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .24em; color: var(--or); }
.cartep__pts { text-align: right; }
.cartep__pts b { display: block; font: 400 clamp(26px, 6vw, 38px)/1 var(--f-display); color: var(--or-clair); font-variant-numeric: tabular-nums; }
.cartep__pts small { font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--ivoire-2); }
@media (max-width: 860px) { .privilege__grille { grid-template-columns: 1fr; } .carte3d { order: -1; } }
/* ---------------- Contact ---------------- */
.contact { padding-block: clamp(90px, 12vw, 150px) 0; }
.contact__grille { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 6vw, 90px); align-items: start; }
.contact__grille > * { min-width: 0; }
.contact .titre { font-size: clamp(40px, 5.6vw, 84px); margin: 20px 0 22px; }
.contact__intro { color: var(--ivoire-2); max-width: 42ch; }
.canaux { display: grid; gap: 0; margin-top: 30px; }
.canal { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; padding-block: 18px; border-top: 1px solid var(--ligne); text-decoration: none; }
.canal:last-child { border-bottom: 1px solid var(--ligne); }
.canal small { grid-column: 1; font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--or); }
.canal span { grid-column: 1; font: 500 22px/1.2 var(--f-display); }
.canal svg { grid-column: 2; grid-row: 1 / span 2; width: 9px; height: 16px; fill: none; stroke: var(--or); stroke-width: 1.5; transition: transform .3s var(--ease); }
a.canal:hover svg { transform: translateX(4px); }
.formulaire { position: relative; padding: clamp(22px, 4vw, 44px); border: 1px solid var(--ligne); border-radius: 24px; background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.01)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.formulaire__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.champ { display: grid; gap: 8px; min-width: 0; }
.champ--large { grid-column: 1 / -1; }
.champ label, .champ .lbl { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--ivoire-2); }
.champ input, .champ select, .champ textarea { width: 100%; min-height: 50px; padding: 13px 16px; border: 1px solid rgba(243,236,224,.18); border-radius: 12px; background: rgba(0,0,0,.35); color: var(--ivoire); font: 400 16px/1.4 var(--f-texte); transition: border-color .3s; }
.champ textarea { min-height: 130px; resize: vertical; }
.champ select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--or) 50%), linear-gradient(135deg, var(--or) 50%, transparent 50%); background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px; background-size: 6px 6px; background-repeat: no-repeat; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--or); outline: none; }
.coche { grid-column: 1 / -1; display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 13px; color: var(--ivoire-2); cursor: pointer; }
.coche input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--or); }
.piege { position: absolute; inset-inline-start: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; }
.formulaire__bas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 6px; }
.formulaire__etat { font-size: 14px; color: var(--ivoire-2); }
.formulaire__etat.ok { color: var(--or-clair); }
.formulaire__etat.err { color: #e9a38f; }
.contact__rgpd { margin-top: 16px; font-size: 12px; color: var(--ivoire-2); opacity: .85; }
.boite { margin-top: 26px; padding: 22px; border: 1px dashed var(--ligne); border-radius: 18px; }
.boite[hidden] { display: none; }
.boite h3 { margin: 0 0 12px; font: 500 22px/1 var(--f-display); }
.boite ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; max-height: 360px; overflow: auto; }
.boite li { padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); font-size: 14px; }
.boite li small { display: block; color: var(--or); font-size: 11px; letter-spacing: .12em; margin-bottom: 4px; }
@media (max-width: 860px) { .contact__grille { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .formulaire__grille { grid-template-columns: 1fr; } }
/*
* Module d'avis NASER PARIS — blanc cassé, noir profond, or discret.
* Adapté de « Google Reviews Carousel Widget » (MIT, © 2025 Raynox) — voir LICENSES/google-review-widget-MIT.txt
*/
.rvw {
--rvw-fond: #f6f1e7; --rvw-carte: #fffdf8; --rvw-encre: #121110; --rvw-gris: #6d665c; --rvw-ligne: rgba(18, 17, 16, 0.1);
--rvw-or: #b8924c; --rvw-or-clair: #d9bd84; --rvw-ombre: 0 18px 40px -26px rgba(18, 17, 16, 0.45);
--rvw-titre: "Cormorant Garamond", Georgia, serif; --rvw-texte: "Manrope", system-ui, sans-serif;
background: var(--rvw-fond); color: var(--rvw-encre); border-radius: 28px; padding: clamp(20px, 4vw, 48px);
font-family: var(--rvw-texte); position: relative; isolation: isolate;
}
.rvw *, .rvw *::before, .rvw *::after { box-sizing: border-box; }
.rvw-corps { display: grid; gap: 22px; }
.rvw-statut { margin: 0; color: var(--rvw-gris); font-size: 15px; }
.rvw-squelette { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rvw-carte--vide { min-height: 220px; background: linear-gradient(100deg, #efe7d9 30%, #f8f3ea 50%, #efe7d9 70%); background-size: 300% 100%; animation: rvw-lueur 1.4s ease-in-out infinite; border-radius: 20px; }
@keyframes rvw-lueur { from { background-position: 100% 0; } to { background-position: 0 0; } }
.rvw-demo { margin: 0; padding: 12px 16px; border-radius: 14px; background: #121110; color: #f0d9a4; font-size: 13px; line-height: 1.5; }
.rvw-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 28px; }
.rvw-resume { display: grid; gap: 8px; }
.rvw-note { margin: 0; display: flex; align-items: baseline; gap: 6px; font-family: var(--rvw-titre); line-height: .9; }
.rvw-note b { font-size: clamp(54px, 7vw, 84px); font-weight: 500; }
.rvw-note span { font-size: 22px; color: var(--rvw-gris); }
.rvw-source { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--rvw-gris); }
.rvw-g { width: 18px; height: 18px; flex: none; }
.rvw-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.rvw-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--rvw-encre); background: transparent; color: var(--rvw-encre); font: 600 11px/1 var(--rvw-texte); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .3s, color .3s, transform .3s, border-color .3s; }
.rvw-btn:hover { background: var(--rvw-encre); color: #f6f1e7; transform: translateY(-1px); }
.rvw-btn:active { transform: scale(.98); }
.rvw-btn--plein { background: var(--rvw-encre); color: #f0d9a4; }
.rvw-btn--plein:hover { background: #2a2722; }
.rvw-btn:focus-visible, .rvw-puce:focus-visible, .rvw-lien:focus-visible, .rvw-fleche:focus-visible, .rvw select:focus-visible, .rvw-recherche:focus-visible, .rvw-liste:focus-visible { outline: 2px solid var(--rvw-or); outline-offset: 3px; }
.rvw-outils { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 10px; }
.rvw-recherche, .rvw select { width: 100%; min-height: 46px; padding: 0 16px; border: 1px solid var(--rvw-ligne); border-radius: 14px; background: var(--rvw-carte); color: var(--rvw-encre); font: 400 15px/1.2 var(--rvw-texte); }
.rvw select { appearance: none; padding-inline-end: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--rvw-or) 50%), linear-gradient(135deg, var(--rvw-or) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; }
[dir="rtl"] .rvw select { background-position: 20px 21px, 15px 21px; }
.rvw-choix { display: block; }
.rvw-visuel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rvw-puces { display: flex; flex-wrap: wrap; gap: 8px; }
.rvw-puce { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border: 1px solid var(--rvw-ligne); border-radius: 999px; background: var(--rvw-carte); color: var(--rvw-encre); font: 500 13px/1 var(--rvw-texte); cursor: pointer; transition: border-color .25s, background .25s, color .25s; }
.rvw-puce small { font-size: 11px; color: var(--rvw-gris); }
.rvw-puce:hover:not(:disabled) { border-color: var(--rvw-or); }
.rvw-puce[aria-pressed="true"] { background: var(--rvw-encre); border-color: var(--rvw-encre); color: #f0d9a4; }
.rvw-puce[aria-pressed="true"] small { color: #d9bd84; }
.rvw-puce:disabled { opacity: .45; cursor: default; }
.rvw-note-prestation, .rvw-resultat, .rvw-attribution { margin: 0; font-size: 12px; color: var(--rvw-gris); }
.rvw-attribution { text-align: end; }
.rvw-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rvw-carte { display: flex; flex-direction: column; gap: 14px; padding: 24px; background: var(--rvw-carte); border: 1px solid var(--rvw-ligne); border-radius: 20px; box-shadow: var(--rvw-ombre); transition: transform .35s ease, box-shadow .35s ease; animation: rvw-entree .55s cubic-bezier(.2,.7,.1,1) both; animation-delay: calc(var(--i, 0) * 60ms); min-width: 0; }
.rvw-carte:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -28px rgba(18, 17, 16, .55); }
@keyframes rvw-entree { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rvw-carte__tete { display: flex; align-items: center; gap: 12px; }
.rvw-avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex: none; background: #e8dfcf; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--rvw-carte), 0 0 0 3px var(--rvw-or-clair); }
.rvw-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rvw-avatar--ini { background: linear-gradient(135deg, hsl(var(--h, 40) 18% 16%), #121110); color: #f0d9a4; font: 500 17px/1 var(--rvw-titre); letter-spacing: .04em; }
.rvw-qui { flex: 1; min-width: 0; }
.rvw-auteur { margin: 0; display: block; font-weight: 600; font-size: 15px; color: var(--rvw-encre); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.rvw-auteur:hover { text-decoration: underline; text-underline-offset: 3px; }
.rvw-meta { margin: 2px 0 0; font-size: 13px; color: var(--rvw-gris); }
.rvw-g-wrap { flex: none; align-self: flex-start; }
.rvw-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rvw-etoiles { position: relative; display: inline-block; font-size: 19px; line-height: 1; letter-spacing: 2px; direction: ltr; }
.rvw-etoiles__fond { color: #e2d8c6; }
.rvw-etoiles__plein { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; width: calc(var(--r, 0) / 5 * 100%); color: var(--rvw-or); background: linear-gradient(110deg, #a7843f, #e3c78b 45%, #b8924c 70%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: rvw-remplir .9s cubic-bezier(.2,.7,.1,1) both; animation-delay: calc(var(--i, 0) * 60ms + .15s); }
@keyframes rvw-remplir { from { width: 0; } }
.rvw-tete .rvw-etoiles { font-size: 22px; }
.rvw-tag { padding: 4px 10px; border-radius: 999px; font-size: 11px; letter-spacing: .04em; background: #f1e8d6; color: #5c4a28; }
.rvw-tag--langue { background: transparent; border: 1px solid var(--rvw-ligne); color: var(--rvw-gris); }
.rvw-tag--demo { background: #121110; color: #f0d9a4; }
.rvw-texte { margin: 0; color: #3b3732; font-size: 15px; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; flex: 1; }
.rvw-carte.is-ouvert .rvw-texte { -webkit-line-clamp: unset; display: block; }
.rvw-texte:lang(ar), .rvw-texte:lang(fa), .rvw-texte:lang(ur), .rvw-texte:lang(he) { font-family: "Geeza Pro", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif; line-height: 1.8; }
.rvw-carte__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.rvw-lien { appearance: none; background: none; border: 0; padding: 4px 0; color: var(--rvw-encre); font: 600 12px/1.2 var(--rvw-texte); text-decoration: underline; text-decoration-color: var(--rvw-or); text-underline-offset: 4px; cursor: pointer; }
.rvw-traduit { font-size: 11px; color: var(--rvw-gris); font-style: italic; }
.rvw-reponse { padding: 12px 14px; border-inline-start: 2px solid var(--rvw-or); background: #f8f2e6; border-radius: 0 12px 12px 0; font-size: 13px; }
[dir="rtl"] .rvw-reponse { border-radius: 12px 0 0 12px; }
.rvw-reponse b { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #5c4a28; margin-bottom: 4px; }
.rvw-reponse p { margin: 0; color: #3b3732; }
.rvw-vide { grid-column: 1 / -1; display: grid; justify-items: center; gap: 14px; padding: 40px 16px; text-align: center; color: var(--rvw-gris); border: 1px dashed var(--rvw-ligne); border-radius: 20px; }
.rvw-vide p { margin: 0; }
.rvw-plus { justify-self: center; }
.rvw-plus[hidden], .rvw-nav[hidden] { display: none; }
.rvw-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rvw-fleche { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rvw-ligne); background: var(--rvw-carte); color: var(--rvw-encre); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.08); transition: border-color .2s, transform .2s; }
.rvw-fleche:hover { border-color: var(--rvw-or); }
.rvw-fleche:active { transform: scale(.95); }
.rvw-fleche svg { width: 20px; height: 20px; }
[dir="rtl"] .rvw-fleche svg { transform: scaleX(-1); }
.rvw-points { display: flex; gap: 6px; justify-content: center; flex: 1; }
.rvw-point { width: 22px; height: 3px; border-radius: 2px; background: #e0d6c4; transition: background .3s; }
.rvw-point.is-actif { background: var(--rvw-or); }
.rvw-points__texte { font-size: 12px; color: var(--rvw-gris); }
@media (max-width: 1000px) { .rvw-liste, .rvw-squelette { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rvw-outils { grid-template-columns: 1fr 1fr; } .rvw-recherche { grid-column: 1 / -1; } }
@media (max-width: 768px) {
.rvw { border-radius: 20px; padding: 18px 0; }
.rvw-corps > :not(.rvw-liste) { margin-inline: 16px; }
.rvw-squelette { grid-template-columns: 1fr; }
.rvw--carrousel .rvw-liste { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; padding: 6px 16px 18px; scrollbar-width: none; overscroll-behavior-x: contain; }
.rvw--carrousel .rvw-liste::-webkit-scrollbar { display: none; }
.rvw--carrousel .rvw-carte { flex: 0 0 calc(100% - 32px); scroll-snap-align: start; min-height: 300px; }
.rvw--carrousel .rvw-vide { flex: 1 0 calc(100% - 32px); }
.rvw-outils { grid-template-columns: 1fr 1fr; }
.rvw-recherche, .rvw select { font-size: 14px; min-height: 44px; }
.rvw select { padding-inline: 12px 28px; background-position: calc(100% - 16px) 20px, calc(100% - 11px) 20px; }
[dir="rtl"] .rvw select { background-position: 16px 20px, 11px 20px; }
.rvw-puces { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.rvw-puces::-webkit-scrollbar { display: none; }
.rvw-puce { flex: none; }
.rvw-tete { align-items: flex-start; }
.rvw-actions { width: 100%; }
.rvw-actions .rvw-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .rvw-carte, .rvw-etoiles__plein, .rvw-carte--vide { animation: none !important; } .rvw-carte:hover { transform: none; } }
/* ---------------- L'expérience NASER Paris (vidéo) ---------------- */
.xp { padding-block: clamp(70px, 10vw, 140px); background: radial-gradient(50% 60% at 75% 50%, rgba(214,179,111,.09), transparent 70%); }
.xp__grille { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.xp__texte { display: grid; gap: 20px; justify-items: start; }
.xp .titre { font-size: clamp(38px, 5.2vw, 78px); }
.xp__texte p { color: var(--ivoire-2); max-width: 46ch; margin: 0; }
.xp__media { position: relative; margin: 0; justify-self: center; width: min(390px, 100%); aspect-ratio: 9 / 16; border-radius: 30px; overflow: hidden; border: 1px solid rgba(240,217,164,.3); background: #0c0b09; box-shadow: 0 60px 120px -50px rgba(0,0,0,.95), 0 0 0 10px rgba(240,217,164,.035); }
.xp__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.xp__btn { position: absolute; right: 14px; bottom: 14px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(243,236,224,.35); background: rgba(7,7,6,.55); color: var(--ivoire); display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color .3s, transform .3s; }
.xp__btn:hover { border-color: var(--or); transform: scale(1.05); }
.xp__btn svg { width: 20px; height: 20px; }
.xp__i-pause { display: none; }
.xp__media.is-playing .xp__i-pause { display: block; }
.xp__media.is-playing .xp__i-play { display: none; }
@media (max-width: 860px) { .xp__grille { grid-template-columns: 1fr; } .xp__media { width: min(340px, 86%); } }
/* ---------------- Avis : en-tête et module ---------------- */
.avis { text-align: left; }
.avis__haut { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 18px; }
.avis__haut p { margin: 0 !important; }
.avis__langues { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--ligne); border-radius: 999px; }
.avis__langues button { appearance: none; border: 0; background: none; color: var(--ivoire-2); padding: 8px 14px; border-radius: 999px; font: 600 12px/1 var(--f-texte); letter-spacing: .1em; cursor: pointer; }
.avis__langues button[aria-pressed="true"] { background: var(--or); color: var(--noir); }
.avis__info { margin: 0 0 22px !important; max-width: none !important; font-size: 13px; color: var(--ivoire-2); }
.avis__info b { color: var(--or-clair); }
/* ---------------- Ambiance sonore ---------------- */
.amb { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 70; font-size: 12px; }
.amb__activer, .amb__panneau { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(240,217,164,.3); background: rgba(7,7,6,.72); color: var(--ivoire); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 14px 30px -18px rgba(0,0,0,.9); font: 500 12px/1 var(--f-texte); letter-spacing: .06em; }
.amb__activer { cursor: pointer; }
.amb__activer:hover { border-color: var(--or); }
.amb__activer[hidden], .amb__panneau[hidden] { display: none; }
.amb__panneau { padding: 0 8px 0 14px; gap: 4px; }
.amb__titre { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ivoire-2); margin-right: 6px; }
.amb__btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--or-clair); display: grid; place-items: center; cursor: pointer; }
.amb__btn:hover { background: rgba(255,255,255,.06); }
.amb__btn svg { width: 18px; height: 18px; }
.amb__i-pause, .amb__i-muet { display: none; }
.amb.is-playing .amb__i-pause { display: block; }
.amb.is-playing .amb__i-play { display: none; }
.amb.is-muted .amb__i-muet { display: block; }
.amb.is-muted .amb__i-son { display: none; }
.amb__volume input { width: 84px; accent-color: var(--or); }
.amb.no-volume .amb__volume { display: none; }
.amb__ondes { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.amb__ondes i { width: 2px; height: 30%; background: var(--or); border-radius: 1px; }
.amb.is-playing:not(.is-muted) .amb__ondes i { animation: amb-onde 1s ease-in-out infinite; }
.amb__ondes i:nth-child(2) { animation-delay: -.3s !important; } .amb__ondes i:nth-child(3) { animation-delay: -.6s !important; } .amb__ondes i:nth-child(4) { animation-delay: -.15s !important; }
@keyframes amb-onde { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.amb--deezer .amb__activer { flex-wrap: wrap; row-gap: 0; padding-block: 6px; text-align: left; }
.amb--deezer .amb__activer .amb__titre { flex-basis: 100%; padding-left: 24px; font-size: 11px; max-width: 230px; }
.amb--deezer.is-open .amb__ondes i { animation: amb-onde 1s ease-in-out infinite; }
.amb__deezer { width: min(340px, calc(100vw - 32px)); padding: 10px 10px 8px; border-radius: 18px; border: 1px solid rgba(240,217,164,.3); background: rgba(7,7,6,.9); color: var(--ivoire); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 18px 40px -18px rgba(0,0,0,.95); font: 400 12px/1.4 var(--f-texte); }
.amb__deezer[hidden] { display: none; }
.amb__deezer-haut { display: flex; align-items: center; gap: 8px; padding: 0 2px 8px 6px; }
.amb__deezer-haut .amb__titre { flex: 1; max-width: none; }
.amb__cadre { height: 150px; border-radius: 12px; overflow: hidden; background: #000; }
.amb__cadre iframe { display: block; width: 100%; height: 100%; border: 0; }
.amb__note { margin: 8px 4px 0; font-size: 10.5px; line-height: 1.45; color: var(--ivoire-2); }
.amb__note a { color: var(--or-clair); }
.amb__arret { margin: 6px 4px 0; padding: 0; border: 0; background: none; color: var(--ivoire-2); font: inherit; font-size: 11px; text-decoration: underline; cursor: pointer; }
.amb.is-reduit .amb__deezer { position: absolute; inset-inline-start: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
@media (max-width: 600px) {
.amb--deezer .amb__activer { width: 48px; height: 48px; min-height: 0; padding: 0; justify-content: center; border-radius: 50%; }
.amb--deezer .amb__activer .amb__lib, .amb--deezer .amb__activer .amb__titre { display: none; }
}
.faq__q { border-bottom: 1px solid rgba(214,179,111,.25); padding: 14px 0; } .faq__q summary { cursor: pointer; font-family: var(--f-display); font-size: 20px; color: var(--ivoire); list-style: none; } .faq__q summary::after { content: " +"; color: var(--or-clair); } .faq__q[open] summary::after { content: " −"; } .faq__q p { margin: 10px 0 0; color: var(--ivoire-2); }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; } .legal-nav a { padding: 8px 14px; border: 1px solid rgba(214,179,111,.45); border-radius: 999px; color: var(--ivoire); text-decoration: none; font: 600 11px/1.2 var(--f-texte); letter-spacing: .14em; text-transform: uppercase; } .legal-nav a[aria-current="page"] { background: rgba(214,179,111,.16); color: var(--or-clair); border-color: var(--or-clair); } .legal-texte h2 { margin: 34px 0 12px; padding-top: 18px; border-top: 1px solid rgba(214,179,111,.3); font: 400 clamp(22px, 3vw, 28px)/1.2 var(--f-display); color: var(--or-clair); } .legal-texte h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .legal-texte p, .legal-texte li { color: #e6dfd3; } .legal-texte ul { padding-inline-start: 20px; } .legal-texte li::marker { color: var(--or); } .legal-fiche span { color: var(--or-clair); } .legal-maj { margin-top: 30px; font-size: 12px; color: var(--ivoire-2); letter-spacing: .06em; }
.hist, .fin, .gav, .avc, .np-carte, .snd, .rit { --gold: var(--or); --gold-light: var(--or-clair); --gold-deep: #9b7a42; --ivory: var(--ivoire); --ivory-dim: var(--ivoire-2); --black: var(--noir); --line: var(--ligne); --line-strong: rgba(214,179,111,.4); --grey: #9a968f; --font-display: var(--f-display); --font-text: var(--f-texte); --gutter: clamp(20px, 5vw, 56px); --section: clamp(88px, 12vw, 168px); }
.btn--small { min-height: 42px; padding: 0 20px; font-size: 10.5px; } .gold-text { color: var(--or-clair); }
.navpanel a.navpanel__sous { padding-left: 22px; font-size: .86em; opacity: .85; }
.hist { position: relative; padding: var(--section) 0; background: radial-gradient(ellipse at 15% 30%, rgba(201,169,110,.10), transparent 55%), var(--black); overflow: hidden; }
.hist__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.hist__photo { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.9); }
.hist__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(10,10,11,.6)); box-shadow: inset 0 0 0 1px rgba(233,211,162,.22); }
.hist__photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 2.4s var(--ease); }
.hist__photo.is-in img, .hist__photo:hover img { transform: scale(1); }
.hist__titre { margin: 14px 0 26px; font: 500 clamp(32px, 4vw, 56px)/1.08 var(--font-display); }
.hist__titre em { color: var(--gold-light); font-style: italic; }
.hist__p { margin: 0 0 18px; color: var(--ivory-dim); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.75; max-width: 60ch; }
.hist__signature { margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--line); font: 500 clamp(20px, 1.8vw, 26px)/1.4 var(--font-display); color: var(--gold-light); }
@media (max-width: 900px) { .hist__grille { grid-template-columns: 1fr; } .hist__photo { aspect-ratio: 16 / 11; } }
.fin { position: relative; isolation: isolate; overflow: hidden; padding: clamp(110px, 14vw, 200px) 0; text-align: center; }
.fin__fond { position: absolute; inset: 0; z-index: -1; }
.fin__fond img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; filter: brightness(.42) saturate(1.1) sepia(.12); }
.fin__fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--black) 0%, rgba(10,10,11,.35) 30%, rgba(30,22,10,.25) 55%, rgba(10,10,11,.75) 85%, var(--black) 100%), radial-gradient(ellipse at 50% 55%, rgba(233,190,110,.20), transparent 60%); }
.fin__in { max-width: 860px; }
.fin__titre { margin: 0; font: 500 clamp(40px, 6vw, 84px)/1.02 var(--font-display); }
.fin__sous { margin: 18px 0 0; font: italic 500 clamp(22px, 2.4vw, 32px)/1.3 var(--font-display); color: var(--gold-light); }
.fin__texte { margin: 26px auto 0; max-width: 62ch; color: var(--ivory-dim); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.75; }
.fin__texte--or { margin-top: 14px; color: var(--ivory); }
.fin__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 40px; }
.gav { position: relative; overflow: hidden; isolation: isolate; padding: clamp(76px, 9vw, 120px) 0 clamp(64px, 8vw, 100px); background: #050505; color: var(--ivory); text-align: center; }
.gav__fond { position: absolute; inset: 0; z-index: -1; }
.gav__notice { margin: 28px auto 0; max-width: 70ch; font-size: 11.5px; line-height: 1.6; color: var(--grey); }
.gav__fond img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.28) saturate(1.1); }
.gav__fond::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, transparent 0%, rgba(0,0,0,.5) 70%), linear-gradient(180deg, rgba(0,0,0,.5), transparent 25%, transparent 60%, #050505); }
.gav__in { position: relative; width: min(1600px, 100%); margin: 0 auto; padding: 0 var(--gutter); }
.gav__kicker { margin: 0 0 14px; font-size: 13px; letter-spacing: .45em; padding-inline-start: .45em; color: var(--gold); text-transform: uppercase; }
.gav__titre { margin: 0; font: 500 clamp(36px, 5.6vw, 76px)/1.02 var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
.gav__titre em { color: var(--gold-light); font-style: italic; }
.gav__sous { margin: 16px auto 0; font-size: clamp(16px, 1.4vw, 20px); color: var(--ivory-dim); }
.gav__score { display: inline-flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); margin-top: 28px; }
.gav__g { display: inline-grid; width: clamp(56px, 6vw, 86px); height: clamp(56px, 6vw, 86px); }
.gav__g svg { width: 100%; height: 100%; }
.gav__g--petit { width: 44px; height: 44px; } .gav__g--mini { width: 22px; height: 22px; vertical-align: middle; }
.gav__sep { width: 1px; height: 64px; background: linear-gradient(transparent, rgba(233,211,162,.5), transparent); }
.gav__note { margin: 0; font: 500 clamp(56px, 6vw, 88px)/1 var(--font-display); color: var(--gold-light); }
.gav__note span { font-size: .5em; color: var(--gold); }
.gav__etoiles { display: inline-flex; gap: 6px; }
.gav__etoiles i { width: clamp(28px, 2.6vw, 38px); height: clamp(28px, 2.6vw, 38px); color: rgba(255,255,255,.14); position: relative; }
.gav__etoiles i svg { width: 100%; height: 100%; fill: currentColor; }
.gav__etoiles i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, #f6e3a8, #d5a94e 55%, #b88a35); -webkit-mask: var(--etoile) center / contain no-repeat; mask: var(--etoile) center / contain no-repeat; clip-path: inset(0 calc(100% - var(--rempli, 100%)) 0 0); }
[dir="rtl"] .gav__etoiles i::after { clip-path: inset(0 0 0 calc(100% - var(--rempli, 100%))); }
.gav__etoiles { --etoile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.8-4.9 4.5 1.3 6.5L12 17l-5.9 3.3 1.3-6.5-4.9-4.5 6.6-.8z'/%3E%3C/svg%3E"); }
@media (max-width: 520px) { .gav__score { gap: 12px; max-width: 100%; } .gav__etoiles { gap: 3px; } .gav__etoiles i { width: 20px; height: 20px; } }
.gav.is-vu .gav__etoiles i::after { animation: gav-etoile .7s var(--ease) both; }
.gav__etoiles i:nth-child(2)::after { animation-delay: .1s !important; } .gav__etoiles i:nth-child(3)::after { animation-delay: .2s !important; } .gav__etoiles i:nth-child(4)::after { animation-delay: .3s !important; } .gav__etoiles i:nth-child(5)::after { animation-delay: .4s !important; }
@keyframes gav-etoile { from { opacity: 0; transform: scale(.4) rotate(-20deg); } to { opacity: 1; transform: none; } }
.gav__nb { margin: 10px 0 0; font-size: clamp(15px, 1.3vw, 19px); }
.gav__source { margin: 12px 0 0; font-size: 11.5px; color: var(--grey); }
.gav__scene { position: relative; height: clamp(430px, 36vw, 500px); margin-top: clamp(26px, 3vw, 40px); perspective: 1700px; touch-action: pan-y; }
.gav__anneau { position: absolute; left: 50%; bottom: 6px; width: min(1500px, 96vw); height: 150px; transform: translateX(-50%); border-radius: 50%;
border: 2px solid rgba(240, 200, 120, .55); box-shadow: 0 0 30px rgba(240, 190, 100, .45), inset 0 0 40px rgba(240, 190, 100, .25); pointer-events: none;
background: radial-gradient(ellipse at 50% 50%, rgba(240,190,100,.10), transparent 70%); }
.gav__piste { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; transform-style: preserve-3d; }
.gav__carte { position: absolute; top: 0; left: 50%; width: clamp(270px, 22vw, 360px); margin-inline-start: calc(clamp(270px, 22vw, 360px) / -2); text-align: start;
transition: transform .9s var(--ease), opacity .7s, filter .7s; will-change: transform; cursor: pointer; }
[dir="rtl"] .gav__carte { margin-inline-start: 0; margin-inline-end: calc(clamp(270px, 22vw, 360px) / -2); left: auto; right: 50%; }
.gav__carte-in { display: grid; gap: 12px; min-height: clamp(300px, 25vw, 360px); padding: 22px 22px 20px; border-radius: 22px; border: 1px solid rgba(233, 211, 162, .22);
background: linear-gradient(160deg, #24201a, #0c0b0a); box-shadow: 0 30px 60px -30px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(8px); }
.gav__carte.is-centre .gav__carte-in { border-color: rgba(240, 205, 130, .85); box-shadow: 0 0 0 1px rgba(240,205,130,.25), 0 0 46px -12px rgba(240,190,100,.6), 0 30px 60px -28px rgba(0,0,0,.95); }
.gav__haut { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.gav__avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 1.5px solid rgba(233,211,162,.5); background: #2a241b; display: grid; place-items: center; font: 600 16px/1 var(--font-text); color: var(--gold-light); }
.gav__nom { margin: 0; font: 600 16px/1.2 var(--font-text); color: #fff; }
.gav__nom a { color: inherit; text-decoration: none; }
.gav__date { margin: 3px 0 0; font-size: 12.5px; color: var(--ivory-dim); }
.gav__carte .gav__g { width: 28px; height: 28px; }
.gav__mini-etoiles { display: inline-flex; gap: 3px; color: #e6bd62; }
.gav__mini-etoiles svg { width: 18px; height: 18px; fill: currentColor; }
.gav__mini-etoiles svg.vide { fill: rgba(255,255,255,.18); }
.gav__texte { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.88); display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.gav__bas { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-top: auto; font-size: 12px; }
.gav__bas button { border: 0; background: none; padding: 0; color: var(--gold-light); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.gav__bas a { color: var(--gold-light); }
.gav__traduit { color: var(--grey); }
.gav__attente { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); width: min(560px, 92%); padding: 34px 30px; border-radius: 24px; border: 1px solid rgba(240,205,130,.6);
background: linear-gradient(160deg, rgba(36,32,26,.92), rgba(12,11,10,.96)); box-shadow: 0 0 46px -12px rgba(240,190,100,.5); display: grid; justify-items: center; gap: 16px; }
.gav__attente p { margin: 0; color: var(--ivory-dim); line-height: 1.6; }
.gav__attente[hidden] { display: none; }
.gav__fleche { position: absolute; z-index: 30; top: 42%; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--gold);
background: rgba(0,0,0,.6); color: var(--gold-light); cursor: pointer; backdrop-filter: blur(6px); }
.gav__fleche svg { width: 24px; height: 24px; }
.gav__fleche--prec { inset-inline-start: 4px; } .gav__fleche--suiv { inset-inline-end: 4px; }
[dir="rtl"] .gav__fleche svg { transform: scaleX(-1); }
.gav__fleche[hidden] { display: none; }
.gav__fleche:focus-visible, .gav__cta:focus-visible, .gav__carte:focus-visible, .gav__bas button:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.gav__points { display: flex; justify-content: center; gap: 10px; min-height: 5px; margin-top: 28px; }
.gav__points i { width: 54px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.22); transition: background .3s; }
.gav__points i.is-on { background: var(--gold-light); }
.gav__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; }
.gav__cta { display: inline-flex; align-items: center; gap: 14px; min-height: 60px; padding: 0 34px; border-radius: 999px; border: 1.5px solid var(--gold); background: rgba(0,0,0,.55);
color: var(--ivory); font: 500 15px/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: background .3s; }
.gav__cta:hover { background: rgba(233,211,162,.12); }
.gav__cta--sec { border-color: rgba(233,211,162,.35); letter-spacing: .08em; font-size: 13px; min-height: 52px; }
@media (max-width: 700px) {
.gav__score { gap: 12px; } .gav__sep { height: 44px; }
.gav__carte { width: 78vw; margin-inline-start: -39vw; } [dir="rtl"] .gav__carte { margin-inline-end: -39vw; }
.gav__scene { height: 430px; } .gav__fleche { display: none !important; }
.gav__points i { width: 22px; }
.gav__cta { padding: 0 22px; letter-spacing: .08em; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .gav__carte { transition-duration: .01s; } .gav.is-vu .gav__etoiles i::after { animation: none; } }
.avc { --avc-or: #c9a45c; --avc-fond: #080808; position: relative; overflow: hidden; padding: clamp(80px, 9vw, 130px) 0 clamp(60px, 7vw, 96px); background: var(--avc-fond); color: var(--ivory, #f4efe6); text-align: center; isolation: isolate; }
.avc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 40% at 50% 0%, rgba(201,164,92,.16), transparent 70%), radial-gradient(40% 30% at 50% 100%, rgba(201,164,92,.08), transparent 70%); }
.avc__marque { margin: 0; font: 600 12px/1 var(--font-text); letter-spacing: .5em; padding-inline-start: .5em; color: var(--avc-or); }
.avc__titre { margin: 18px auto 0; max-width: 20ch; font: 500 clamp(34px, 5vw, 68px)/1.04 var(--font-display); }
.avc__etoiles { margin: 18px 0 0; display: flex; justify-content: center; gap: 6px; font-size: 22px; color: var(--avc-or); text-shadow: 0 0 18px rgba(201,164,92,.45); }
.avc__sous { margin: 14px 0 0; color: var(--ivory-dim, #ccc); font-size: clamp(15px, 1.2vw, 18px); }
.avc__stats { margin: 20px auto 0; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 8px; padding: 10px 18px; border: 1px solid rgba(201,164,92,.35); border-radius: 999px; font-size: 14px; color: var(--ivory-dim, #ccc); }
.avc__stats b { font: 500 22px/1 var(--font-display); color: var(--ivory, #f4efe6); }
.avc__stats small { width: 100%; font-size: 11px; color: var(--grey, #9a968f); }
.avc__demo { margin: 10px auto 0; max-width: 60ch; color: var(--grey, #9a968f); font-size: 11px; letter-spacing: .02em; }
.avc__demo[hidden] { display: none; }
.avc__scene { position: relative; margin-top: clamp(36px, 5vw, 60px); display: grid; gap: 18px; }
.avc__scene[hidden] { display: none; }
.avc__rangee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); touch-action: pan-y; cursor: grab; }
.avc__rangee[hidden] { display: none; }
.avc__rangee.is-glisse { cursor: grabbing; }
.avc__piste { --avc-l: 340px; display: flex; gap: 18px; margin: 0; padding: 8px 0 14px; list-style: none; width: max-content; will-change: transform; }
.avc__carte { flex: none; width: var(--avc-l); display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 18px; border-radius: 16px; text-align: start;
background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); border: 1px solid rgba(201,164,92,.28);
box-shadow: 0 18px 40px -28px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05); transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
opacity: 0; transform: translateY(10px); }
.avc.is-vu .avc__carte { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease), border-color .4s, box-shadow .4s; }
.avc__carte:hover { border-color: rgba(201,164,92,.7); box-shadow: 0 24px 50px -26px rgba(201,164,92,.35); transform: translateY(-3px); }
.avc__haut { display: flex; align-items: center; gap: 12px; }
.avc__photo { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(201,164,92,.5); }
.avc__qui { min-width: 0; flex: 1; }
.avc__nom { margin: 0; font: 600 14px/1.25 var(--font-text); color: var(--ivory, #f4efe6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avc__meta { margin: 2px 0 0; font-size: 11.5px; color: var(--grey, #9a968f); }
.avc__note { display: inline-flex; gap: 2px; color: var(--avc-or); font-size: 16px; letter-spacing: 0; line-height: 1; }
.avc__note .is-vide { color: rgba(201,164,92,.25); }
.avc__texte { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ivory-dim, #ddd); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.avc__carte.sans-photo .avc__texte { font-size: 15.5px; -webkit-line-clamp: 7; color: var(--ivory, #f4efe6); }
.avc__badge { align-self: flex-start; margin-top: auto; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--avc-or); border: 1px solid rgba(201,164,92,.35); }
.avc__badge--demo { border-style: dashed; }
.avc__fleche { position: absolute; top: 50%; z-index: 2; width: 46px; height: 46px; margin-top: -23px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(201,164,92,.5); background: rgba(8,8,8,.75); color: var(--avc-or); cursor: pointer; backdrop-filter: blur(6px); }
.avc__fleche svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.avc__fleche--prec { inset-inline-start: clamp(10px, 3vw, 40px); }
.avc__fleche--suiv { inset-inline-end: clamp(10px, 3vw, 40px); }
[dir="rtl"] .avc__fleche svg { transform: scaleX(-1); }
.avc__fleche:hover { background: var(--avc-or); color: #080808; }
.avc__fleche[hidden] { display: none; }
.avc__fleche:focus-visible, .avc__lien:focus-visible { outline: 2px solid var(--gold-light, #e9d3a2); outline-offset: 3px; }
.avc__pied { display: grid; justify-items: center; gap: 16px; margin-top: 26px; }
.avc__vide { margin: 0; max-width: 56ch; color: var(--ivory-dim, #ccc); }
.avc__vide[hidden] { display: none; }
.avc__lien { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px; background: linear-gradient(135deg, #f1e2bd, var(--avc-or)); color: #14110b; text-decoration: none; font-weight: 600; font-size: 13px; letter-spacing: .04em; }
.avc__notice { margin: 0; max-width: 70ch; font-size: 11.5px; line-height: 1.6; color: var(--grey, #9a968f); }
@media (max-width: 1100px) { .avc__piste { --avc-l: 320px; } }
@media (max-width: 700px) { .avc__fleche { display: none; } .avc__carte { padding: 18px 18px 16px; } }
@media (prefers-reduced-motion: reduce) {
.avc__rangee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; scroll-snap-type: x mandatory; cursor: auto; touch-action: auto; }
.avc__carte { scroll-snap-align: center; opacity: 1; transform: none; transition: none; }
.avc__piste { padding-inline: 16px; }
}
.np-carte { padding: var(--section) 0; background: radial-gradient(ellipse at 80% 20%, rgba(201,169,110,.10), transparent 55%), var(--black); }
.carte__tete { max-width: 760px; margin-bottom: clamp(22px, 3vw, 36px); }
.carte__titre { margin: 12px 0 0; font: 500 clamp(34px, 4.4vw, 60px)/1.05 var(--font-display); }
.carte__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); align-items: start; margin-top: clamp(22px, 3vw, 36px); }
.carte__panneau { padding: 26px 28px; border: 1px solid var(--line-strong); background: linear-gradient(160deg, rgba(36,32,26,.7), rgba(12,11,10,.9)); display: grid; gap: 10px; }
.carte__nom { margin: 0; font: 500 26px/1 var(--font-display); letter-spacing: .14em; }
.carte__panneau address { font-style: normal; color: var(--ivory); line-height: 1.6; }
.carte__horaires, .carte__tel { display: inline-flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--ivory-dim); text-decoration: none; font-size: 14px; }
.carte__transports { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.carte__st { margin: 0 0 10px; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.carte__transports ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; color: var(--ivory-dim); }
.carte__transports li { display: flex; align-items: center; gap: 10px; }
.carte__ligne { min-width: 30px; height: 26px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 13px; font: 700 12px/1 var(--font-text); }
.carte__ligne--m { background: #d5c900; color: #111; }
.carte__ligne--t { background: #6eca97; color: #0b2a1a; }
.carte__ligne--b { background: #b3247a; color: #fff; border-radius: 4px; }
.carte__ligne--np { background: linear-gradient(135deg, #f1e2bd, #b8925a); color: #120f0a; font-family: var(--font-display); }
.carte__itin { width: 100%; justify-content: center; gap: 10px; min-height: 54px; font-size: 13px; }
.carte__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.carte__btns .btn { flex: 1 1 auto; justify-content: center; }
@media (max-width: 900px) { .carte__grille { grid-template-columns: 1fr; } }
/* ---------- carte interactive ---------- */
.cx3 { position: relative; }
.cx3__vue { position: relative; aspect-ratio: 3 / 2; max-height: 82vh; overflow: hidden; border: 1px solid var(--line-strong); background: #0d0c0b;
box-shadow: 0 50px 90px -50px rgba(0,0,0,.95); overflow: clip; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; outline-offset: 4px; }
.cx3__vue.is-zoom { touch-action: none; }
.cx3__vue.is-drag { cursor: grabbing; }
.cx3__scene { position: absolute; inset: 0; perspective: 1600px; perspective-origin: 50% 30%; }
.cx3__monde { position: absolute; left: 0; top: 0; width: 1536px; height: 1024px; transform-origin: 0 0; will-change: transform; }
.cx3__plan { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cx3__trafic { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.cx3__voie { fill: none; stroke: none; }
.cx3__souterrain { fill: none; stroke: #f2de3a; stroke-width: 5; stroke-dasharray: 2 16; stroke-linecap: round; opacity: .75; animation: cx3-pointilles 1.4s linear infinite; }
@keyframes cx3-pointilles { to { stroke-dashoffset: -36; } }
.cx3__vehicule text { font: 800 17px/1 Manrope, system-ui, sans-serif; text-anchor: middle; }
.cx3__vehicule--bus rect:first-child { fill: #f5f2ea; stroke: #1b5e4f; stroke-width: 3; }
.cx3__vehicule--bus .cx3__vitres { fill: #20403a; }
.cx3__vehicule--bus text { fill: #b3247a; }
.cx3__vehicule--tram rect:first-child { fill: #e9f4ee; stroke: #2e9e6a; stroke-width: 3; }
.cx3__vehicule--tram .cx3__vitres { fill: #153b2b; }
.cx3__vehicule--tram text { fill: #1a7a4f; }
.cx3__vehicule--metro rect { fill: #f2de3a; }
.cx3__vehicule--metro circle { fill: #fff8c2; }
.cx3__vehicule--metro text { fill: #111; font-size: 15px; }
.cx3__repere { position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; padding: 0; border: 0; background: none; cursor: pointer; transform: scale(var(--inv, 1)); }
.cx3__puce { position: absolute; left: 50%; top: 50%; min-width: 40px; height: 40px; padding: 0 8px; display: grid; place-items: center; border-radius: 20px;
transform: translate(-50%, -50%); font: 800 13px/1 Manrope, system-ui, sans-serif; color: #111; box-shadow: 0 6px 18px rgba(0,0,0,.55), 0 0 0 3px rgba(255,255,255,.85); transition: transform .3s var(--ease); }
.cx3__repere:hover .cx3__puce, .cx3__repere[aria-expanded="true"] .cx3__puce, .cx3__repere:focus-visible .cx3__puce { transform: translate(-50%, -50%) scale(1.18); }
.cx3__onde { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; }
.cx3__onde::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid currentColor; animation: cx3-onde 2.2s ease-out infinite; }
@keyframes cx3-onde { from { transform: scale(1); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
.cx3__repere--salon .cx3__puce { background: linear-gradient(135deg, #f1e2bd, #b8925a); font-family: "Cormorant Garamond", Georgia, serif; font-size: 16px; }
.cx3__repere--salon { color: #e9d3a2; }
.cx3__repere--metro .cx3__puce { background: #d5c900; } .cx3__repere--metro { color: #f2de3a; }
.cx3__repere--tram .cx3__puce { background: #6eca97; } .cx3__repere--tram { color: #6eca97; }
.cx3__repere--bus .cx3__puce { background: #b3247a; color: #fff; border-radius: 6px; } .cx3__repere--bus { color: #e06aac; }
.cx3__outils { position: absolute; right: 12px; top: 12px; display: grid; gap: 6px; z-index: 3; }
.cx3__bouton { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(10,10,11,.78);
color: var(--ivory); font: 500 22px/1 var(--font-text); cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cx3__bouton:hover { border-color: var(--gold); color: var(--gold-light); }
.cx3__bouton--txt { font-size: 18px; }
.cx3__legende { position: absolute; left: 10px; bottom: 8px; z-index: 3; margin: 0; padding: 4px 8px; font-size: 11px; color: rgba(244,239,230,.8); background: rgba(10,10,11,.72); pointer-events: none; }
.cx3__info { position: absolute; left: 12px; top: 12px; z-index: 4; width: min(320px, calc(100% - 80px)); padding: 16px 18px; border: 1px solid var(--line-strong);
background: rgba(12,11,10,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 20px 40px rgba(0,0,0,.6); animation: cx3-entree .35s var(--ease); }
@keyframes cx3-entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cx3__info-titre { margin: 0 0 6px; display: flex; align-items: center; gap: 10px; font: 500 22px/1.1 var(--font-display); color: var(--ivory); }
.cx3__info-texte { margin: 0 0 12px; color: var(--ivory-dim); font-size: 14px; }
.cx3__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cx3__interieur { position: absolute; inset: 0; z-index: 5; overflow: hidden; background: #000; }
.cx3__interieur img { width: 100%; height: 100%; object-fit: cover; animation: cx3-dedans 8s var(--ease) both; }
@keyframes cx3-dedans { from { transform: scale(1.35); filter: brightness(.6) blur(4px); } 18% { filter: none; } to { transform: scale(1.05); } }
.cx3__accueil { position: absolute; inset: auto 0 0 0; padding: clamp(18px, 3vw, 34px); display: grid; gap: 14px; justify-items: start;
background: linear-gradient(180deg, transparent, rgba(5,5,6,.92) 60%); animation: cx3-entree .8s .6s var(--ease) both; }
.cx3__bienvenue { margin: 0; font: 500 clamp(26px, 3.6vw, 46px)/1.05 var(--font-display); color: var(--ivory); }
.cx3__puces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cx3__chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.03);
color: var(--ivory); font: 600 12.5px/1 var(--font-text); letter-spacing: .04em; cursor: pointer; }
.cx3__chip:hover { border-color: var(--gold); }
.cx3__chip span { min-width: 26px; height: 22px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 11px; font-size: 11px; font-weight: 800; }
.cx3__chip--salon span { background: linear-gradient(135deg, #f1e2bd, #b8925a); color: #120f0a; }
.cx3__chip--metro span { background: #d5c900; color: #111; } .cx3__chip--tram span { background: #6eca97; color: #0b2a1a; } .cx3__chip--bus span { background: #b3247a; color: #fff; border-radius: 4px; }
.cx3__aide { margin: 10px 0 0; font-size: 12.5px; color: var(--ivory-dim); }
@media (max-width: 700px) {
.cx3__vue { aspect-ratio: 4 / 5; }
.cx3__info { left: 8px; right: 8px; top: auto; bottom: 34px; width: auto; }
.cx3__bouton { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
.cx3__souterrain, .cx3__onde::after, .cx3__interieur img, .cx3__accueil, .cx3__info { animation: none; }
}
.snd { position: fixed; z-index: 60; inset-inline-start: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 10px; pointer-events: none; }
.snd__btn { pointer-events: auto; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(233, 211, 162, 0.55);
background: radial-gradient(120% 120% at 30% 20%, #1c1a16 0%, #050505 70%); color: var(--gold-light, #e9d3a2); cursor: pointer;
box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.08); transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s; }
.snd__btn:hover { border-color: var(--gold, #c9a96e); transform: translateY(-1px); }
.snd__btn:focus-visible { outline: 2px solid var(--gold-light, #e9d3a2); outline-offset: 3px; }
.snd__btn svg { width: 20px; height: 20px; }
.snd__ico--on { display: none; }
.snd.is-on .snd__ico--on { display: block; } .snd.is-on .snd__ico--off { display: none; }
.snd.is-on .snd__btn { box-shadow: 0 0 0 4px rgba(233, 211, 162, 0.06), 0 0 22px -6px rgba(233, 211, 162, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.snd.is-on .snd__onde1 { animation: snd-onde 2.4s ease-in-out infinite; } .snd.is-on .snd__onde2 { animation: snd-onde 2.4s ease-in-out 0.4s infinite; }
@keyframes snd-onde { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.snd__invite { pointer-events: auto; margin: 0; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(233, 211, 162, 0.3); background: rgba(5, 5, 5, 0.78);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--ivory, #f4efe6); font: 500 12px/1.2 var(--font-text); letter-spacing: 0.06em; white-space: nowrap;
animation: snd-in 0.8s var(--ease, ease) both; }
.snd__invite[hidden] { display: none; }
@keyframes snd-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
[dir="rtl"] .snd__invite { animation-name: snd-in-rtl; } @keyframes snd-in-rtl { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .snd.is-on .snd__onde1, .snd.is-on .snd__onde2, .snd__invite { animation: none; } }
@media (max-width: 560px) { .snd__invite { max-width: calc(100vw - 150px); white-space: normal; } }
.avc { --gold: var(--or); --ivory: var(--ivoire); --ivory-dim: var(--ivoire-2); --grey: #9a968f; --font-display: var(--f-display); --font-text: var(--f-texte); --ease: cubic-bezier(0.22, 1, 0.36, 1); }
.avc { --avc-or: #c9a45c; --avc-fond: #080808; position: relative; overflow: hidden; padding: clamp(80px, 9vw, 130px) 0 clamp(60px, 7vw, 96px); background: var(--avc-fond); color: var(--ivory, #f4efe6); text-align: center; isolation: isolate; }
.avc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 40% at 50% 0%, rgba(201,164,92,.16), transparent 70%), radial-gradient(40% 30% at 50% 100%, rgba(201,164,92,.08), transparent 70%); }
.avc__marque { margin: 0; font: 600 12px/1 var(--font-text); letter-spacing: .5em; padding-inline-start: .5em; color: var(--avc-or); }
.avc__titre { margin: 18px auto 0; max-width: 20ch; font: 500 clamp(34px, 5vw, 68px)/1.04 var(--font-display); }
.avc__etoiles { margin: 18px 0 0; display: flex; justify-content: center; gap: 6px; font-size: 22px; color: var(--avc-or); text-shadow: 0 0 18px rgba(201,164,92,.45); }
.avc__sous { margin: 14px 0 0; color: var(--ivory-dim, #ccc); font-size: clamp(15px, 1.2vw, 18px); }
.avc__stats { margin: 20px auto 0; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 8px; padding: 10px 18px; border: 1px solid rgba(201,164,92,.35); border-radius: 999px; font-size: 14px; color: var(--ivory-dim, #ccc); }
.avc__stats b { font: 500 22px/1 var(--font-display); color: var(--ivory, #f4efe6); }
.avc__stats small { width: 100%; font-size: 11px; color: var(--grey, #9a968f); }
.avc__demo { margin: 10px auto 0; max-width: 60ch; color: var(--grey, #9a968f); font-size: 11px; letter-spacing: .02em; }
.avc__demo[hidden] { display: none; }
.avc__scene { position: relative; margin-top: clamp(36px, 5vw, 60px); display: grid; gap: 18px; }
.avc__scene[hidden] { display: none; }
.avc__rangee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); touch-action: pan-y; cursor: grab; }
.avc__rangee[hidden] { display: none; }
.avc__rangee.is-glisse { cursor: grabbing; }
.avc__piste { --avc-l: 340px; display: flex; gap: 18px; margin: 0; padding: 8px 0 14px; list-style: none; width: max-content; will-change: transform; }
.avc__carte { flex: none; width: var(--avc-l); display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 18px; border-radius: 16px; text-align: start;
background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); border: 1px solid rgba(201,164,92,.28);
box-shadow: 0 18px 40px -28px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05); transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
opacity: 0; transform: translateY(10px); }
.avc.is-vu .avc__carte { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease), border-color .4s, box-shadow .4s; }
.avc__carte:hover { border-color: rgba(201,164,92,.7); box-shadow: 0 24px 50px -26px rgba(201,164,92,.35); transform: translateY(-3px); }
.avc__haut { display: flex; align-items: flex-start; gap: 10px 12px; }
.avc__photo { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(201,164,92,.5); }
.avc__qui { min-width: 0; flex: 1; }
.avc__nom { margin: 0; font: 600 14px/1.25 var(--font-text); color: var(--ivory, #f4efe6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avc__meta { margin: 2px 0 0; font-size: 11.5px; color: var(--grey, #9a968f); }
.avc__note { display: inline-flex; gap: 2px; color: var(--avc-or); font-size: 16px; letter-spacing: 0; line-height: 1; }
.avc__note .is-vide { color: rgba(201,164,92,.25); }
.avc__texte { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ivory-dim, #ddd); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.avc__carte.sans-photo .avc__texte { font-size: 15.5px; -webkit-line-clamp: 7; color: var(--ivory, #f4efe6); }
.avc__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
/* badge de provenance : émeraude profond et or (Google, vérifié), bleu nuit et or (avis client) */
.avc__badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 5px; border-radius: 999px; font: 600 11px/1.2 var(--font-text); letter-spacing: .04em; white-space: nowrap;
color: #f1e2bd; background: linear-gradient(135deg, #0f3d2e, #0a2a20); border: 1px solid rgba(201,164,92,.75); box-shadow: 0 0 0 1px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08); }
.avc__badge i { display: grid; place-items: center; width: 17px; height: 17px; flex: none; border-radius: 50%; background: linear-gradient(135deg, #f1e2bd, var(--avc-or)); }
.avc__badge svg { width: 11px; height: 11px; fill: none; stroke: #0f2a20; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.avc__badge--client { background: linear-gradient(135deg, #14233f, #0c162b); }
.avc__badge--client svg { stroke: #14233f; }
.avc__nav { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 22px; }
.avc__nav[hidden] { display: none; }
.avc__progres { position: relative; width: min(220px, 40vw); height: 3px; border-radius: 3px; background: rgba(201,164,92,.18); overflow: hidden; }
.avc__progres span { position: absolute; inset: 0 auto 0 0; width: 20%; border-radius: 3px; background: linear-gradient(90deg, #f1e2bd, var(--avc-or)); transition: transform .85s cubic-bezier(.22,1,.36,1), width .3s; }
[dir="rtl"] .avc__progres span { inset: 0 0 0 auto; }
.avc__g { width: 18px; height: 18px; margin-inline-end: 10px; flex: none; }
.avc__notice { display: flex; gap: 12px; align-items: flex-start; text-align: start; }
.avc__notice svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--avc-or); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.avc__notice p { margin: 0; }
.avc__fleche { position: relative; z-index: 2; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(201,164,92,.5); background: rgba(8,8,8,.75); color: var(--avc-or); cursor: pointer; backdrop-filter: blur(6px); }
.avc__fleche svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .avc__fleche svg { transform: scaleX(-1); }
.avc__fleche:hover { background: var(--avc-or); color: #080808; }
.avc__fleche[hidden] { display: none; }
.avc__fleche:focus-visible, .avc__lien:focus-visible { outline: 2px solid var(--gold-light, #e9d3a2); outline-offset: 3px; }
.avc__pied { display: grid; justify-items: center; gap: 16px; margin-top: 26px; }
.avc__vide { margin: 0; max-width: 56ch; color: var(--ivory-dim, #ccc); }
.avc__vide[hidden] { display: none; }
.avc__liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.avc__lien--contour { background: none !important; color: var(--avc-or) !important; border: 1px solid rgba(201,164,92,.5); }
.avc__notice a { color: var(--avc-or); text-underline-offset: 3px; }
.avc__lien { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px; background: linear-gradient(135deg, #f1e2bd, var(--avc-or)); color: #14110b; text-decoration: none; font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.avc__notice { margin: 0; max-width: 64ch; font-size: 12.5px; line-height: 1.6; color: var(--ivory-dim, #c9c3b8); }
@media (max-width: 1100px) { .avc__piste { --avc-l: 320px; } }
@media (max-width: 700px) { .avc__carte { padding: 18px 18px 16px; } }
@media (prefers-reduced-motion: reduce) {
.avc__rangee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; scroll-snap-type: x mandatory; cursor: auto; touch-action: auto; }
.avc__carte { scroll-snap-align: center; opacity: 1; transform: none; transition: none; }
.avc__piste { padding-inline: 16px; }
}
.cine, .studio, .arc { --gold: var(--or); --gold-light: var(--or-clair); --gold-deep: #9b7a42; --ivory: var(--ivoire); --ivory-dim: var(--ivoire-2); --ink: #111; --font-display: var(--f-display); --font-text: var(--f-texte); --header-h: 72px; --gold-grad: linear-gradient(135deg, #f1e2bd 0%, #d8bb83 28%, #b8925a 58%, #e7cf9c 82%, #a8834b 100%); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cine { --mx: 0; --img-x: 0px; --img-y: 0px; --img-s: 1.04; --title-y: 0px; --title-s: 1; --title-o: 1; --o1: 0; --y1: 80px; --o2: 0; --y2: 80px; --o3: 0; --y3: 80px;
position: relative; background: #0c0b09; color: var(--ivory); }
.cine__world { position: relative; overflow: hidden; height: 100svh; min-height: 560px; background: #17120d; isolation: isolate; }
.cine__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 54%; filter: saturate(0.85) contrast(1.05);
transform: translate3d(var(--img-x), var(--img-y), 0) scale(var(--img-s)); will-change: transform; pointer-events: none; user-select: none; }
.cine__wash { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(9,7,5,.55), rgba(9,7,5,.08) 35%, rgba(9,7,5,.25) 58%, rgba(9,7,5,.82)); }
.cine__shade { position: absolute; inset: 0; z-index: 3; background: radial-gradient(ellipse at 50% 45%, transparent 0%, rgba(0,0,0,.14) 56%, rgba(0,0,0,.56) 100%); }
.cine__dim { position: absolute; inset: 0; z-index: 6; background: rgba(8,7,6,.72); opacity: var(--dim, 0); pointer-events: none; }
.cine:not(.is-cinema) .cine__dim { display: none; }
.cine__mark { position: absolute; z-index: 2; left: 50%; top: 43%; transform: translate(-50%, -50%); font: 500 min(52vw, 660px)/.7 var(--font-display); color: rgba(248,238,223,.045); }
.cine__eyebrow { position: absolute; z-index: 4; top: 26%; left: 50%; transform: translateX(-50%); margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .38em; white-space: nowrap; color: var(--gold); opacity: var(--title-o); }
.cine__title { position: absolute; z-index: 4; left: 50%; top: 33%; width: 95vw; margin: 0; font: 500 clamp(4.3rem, 14.5vw, 15rem)/.77 var(--font-display); letter-spacing: .045em; text-align: center;
text-shadow: 0 8px 45px rgba(0,0,0,.35); transform: translate3d(-50%, var(--title-y), 0) scale(var(--title-s)); opacity: var(--title-o); will-change: transform, opacity; }
.cine__title span { display: block; margin-top: 24px; font: 500 clamp(1rem, 2.3vw, 2.25rem)/1 var(--font-text); letter-spacing: .62em; padding-inline-start: .62em; color: var(--gold-light); }
.cine__bottom { position: absolute; z-index: 4; inset-inline: 0; bottom: 7.5%; display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 0 5vw; opacity: var(--title-o); }
.cine__copy { margin: 0; font: 500 clamp(1.25rem, 2.1vw, 2rem)/1.18 var(--font-display); }
.cine__cue { display: flex; align-items: center; gap: 20px; padding-bottom: 9px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; border-bottom: 1px solid rgba(248,238,223,.65); }
.cine__cue b { font-size: 18px; color: var(--gold); font-weight: 400; }
.cine__corner { position: absolute; z-index: 4; inset-inline-end: 4.5vw; top: 52%; writing-mode: vertical-rl; font-size: 9px; letter-spacing: .28em; color: rgba(248,238,223,.62); }
.cine__credit { position: absolute; z-index: 5; inset-inline-end: 12px; top: 12px; padding: 3px 8px; border-radius: 99px; background: rgba(0,0,0,.45); font-size: 10px; color: var(--ivory-dim); }
.cine__panel { position: relative; z-index: 8; width: min(850px, calc(100vw - 44px)); margin: 0 auto; padding: 72px 0; text-align: center; }
.cine__kicker { display: block; margin-bottom: 24px; font-size: 10px; font-weight: 700; letter-spacing: .3em; color: var(--gold); text-transform: uppercase; }
.cine__panel h2 { text-shadow: 0 4px 30px rgba(0,0,0,.5); margin: 0; font: 500 clamp(2.8rem, 7.5vw, 7.4rem)/.95 var(--font-display); letter-spacing: -.02em; }
.cine__panel h2 em { color: var(--gold-light); }
.cine__panel > p { max-width: 580px; margin: 25px auto 0; color: var(--ivory-dim); font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.65; }
.cine__pills { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 32px 0 0; padding: 0; list-style: none; }
.cine__pills li { display: inline-flex; align-items: center; min-height: 40px; padding: 0 20px; border: 1px solid rgba(248,238,223,.34); border-radius: 99px; background: rgba(20,16,12,.4);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.cine__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 680px; margin: 56px auto 0; padding: 26px 0 0; border-top: 1px solid rgba(248,238,223,.22); list-style: none; }
.cine__stats li { display: flex; flex-direction: column; gap: 12px; }
.cine__stats strong { font: 500 clamp(2.4rem, 4vw, 4rem)/1 var(--font-display); color: var(--gold); }
.cine__stats span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ivory-dim); }
.cine__cta { text-decoration: none; }
.cine__cta { display: inline-flex; align-items: center; gap: 30px; min-height: 48px; margin-top: 34px; padding: 15px 24px; background: var(--ivory); color: var(--ink); border-radius: 99px;
font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: transform .25s, background .25s; }
.cine__cta:hover { transform: translateY(-3px); background: #fff8ed; }
.cine__cta b { font-size: 19px; color: var(--gold-deep); }
.cine__foot { display: block; margin-top: 35px; font-size: 9px; letter-spacing: .25em; color: rgba(248,238,223,.72); text-transform: uppercase; }
/* Mode cinéma (JavaScript actif, animations autorisées) : scène fixe pendant le défilement */
.cine.is-cinema { height: calc(100svh + 3700px); }
.cine.is-cinema .cine__stage { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; }
.cine.is-cinema .cine__world { position: absolute; inset: 0; height: auto; min-height: 0; }
.cine.is-cinema .cine__panel { position: absolute; left: 50%; padding: 0; will-change: transform, opacity; }
.cine.is-cinema .cine__panel--1 { top: 15%; transform: translate3d(-50%, var(--y1), 0); opacity: var(--o1); }
.cine.is-cinema .cine__panel--2 { top: 50%; transform: translate3d(-50%, calc(-50% + var(--y2)), 0); opacity: var(--o2); }
.cine.is-cinema .cine__panel--3 { top: 50%; transform: translate3d(-50%, calc(-50% + var(--y3)), 0); opacity: var(--o3); }
.cine.is-cinema .cine__panel[data-off] { pointer-events: none; }
@media (max-width: 1000px) { .cine__title { top: 36%; } .cine__eyebrow { top: 28%; } .cine.is-cinema .cine__panel--1 { top: 13%; } }
@media (max-width: 640px) {
.cine.is-cinema { height: calc(100svh + 3100px); }
.cine__img { object-position: 50% center; }
.cine__eyebrow { top: 30%; font-size: 8px; letter-spacing: .22em; }
.cine__title { top: 38%; font-size: clamp(3.6rem, 17vw, 7rem); letter-spacing: .015em; }
.cine__title span { margin-top: 18px; font-size: 1rem; letter-spacing: .45em; padding-inline-start: .45em; }
.cine__bottom { bottom: 6%; display: block; padding: 0 24px; }
.cine__copy { font-size: 1.4rem; }
.cine__cue { width: max-content; margin-top: 24px; font-size: 9px; }
.cine__corner { display: none; }
.cine__panel { width: calc(100vw - 36px); }
.cine.is-cinema .cine__panel--1 { top: 11%; }
.cine__kicker { font-size: 8px; letter-spacing: .22em; margin-bottom: 18px; }
.cine__panel h2 { font-size: clamp(2.5rem, 11vw, 4.4rem); }
.cine__panel > p { font-size: .95rem; line-height: 1.55; margin-top: 18px; }
.cine__pills { gap: 7px; margin-top: 22px; }
.cine__pills li { min-height: 34px; padding: 0 12px; font-size: 8.5px; }
.cine__stats { gap: 12px; margin-top: 32px; padding-top: 18px; }
.cine__stats strong { font-size: 2.3rem; }
.cine__stats span { font-size: 8.5px; line-height: 1.5; }
.cine__cta { gap: 18px; margin-top: 24px; font-size: 10px; }
}
.studio { --cap: 0; --n: 9; --cx: 50%; --cy: 80%; --glass-x: 24%; --glass-y: 8%; --ease: cubic-bezier(.22, 1, .36, 1); --slow: cubic-bezier(.65, 0, .35, 1); background: #000; color: #fff; }
.studio__stage { position: relative; isolation: isolate; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; }
.studio__base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.studio__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25) 40%, rgba(0,0,0,.7)); }
/* Portraits : ouverture circulaire depuis le bouton choisi (pas de fondu entre deux scènes) */
.studio__layer { position: absolute; inset: 0; z-index: 2; margin: 0; visibility: hidden; background: #0b0a09;
clip-path: circle(0% at var(--cx) var(--cy)); transition: clip-path 1100ms var(--slow), visibility 0s linear 1100ms; }
.studio__layer.is-open { visibility: visible; clip-path: circle(150% at var(--cx) var(--cy)); transition: clip-path 1100ms var(--slow), visibility 0s; }
.studio__fond { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(34px) brightness(.45) saturate(1.1); }
.studio__portrait { position: absolute; inset-block: 0; inset-inline-end: 0; width: min(56vw, 100%); height: 100%; object-fit: cover; object-position: center 22%;
transform: scale(1.1); transition: transform 1400ms var(--ease);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); }
[dir="rtl"] .studio__portrait { -webkit-mask-image: linear-gradient(270deg, transparent, #000 22%); mask-image: linear-gradient(270deg, transparent, #000 22%); }
.studio__layer.is-open .studio__portrait { transform: scale(1); }
.studio__hero { position: absolute; z-index: 10; inset-inline: 0; top: 24%; text-align: center; pointer-events: none; padding: 0 24px; }
.studio__kicker { text-shadow: 0 1px 10px rgba(0,0,0,.6); margin: 0 0 22px; font-size: 11px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
.studio__title { margin: 0 auto; max-width: 980px; font: 500 clamp(52px, 7vw, 108px)/.9 var(--font-display); letter-spacing: -.02em; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.studio__title span { display: inline-block; margin-inline: .12em; transition: opacity 900ms var(--ease), filter 900ms var(--ease), transform 900ms var(--ease); }
.studio__title span:nth-child(2) { transition-delay: 90ms; } .studio__title span:nth-child(3) { transition-delay: 180ms; } .studio__title span:nth-child(n+4) { transition-delay: 240ms; }
.studio.is-busy .studio__title span, .studio.is-selected .studio__title span { opacity: 0; filter: blur(12px); transform: translateY(-10px); }
.studio.is-busy .studio__kicker, .studio.is-selected .studio__kicker { opacity: 0; transition: opacity 500ms; }
.studio__kicker { transition: opacity 700ms; }
/* Fiche de la prestation */
.studio__info { text-shadow: 0 1px 14px rgba(0,0,0,.55); position: absolute; z-index: 10; inset-inline-start: 5vw; top: 50%; transform: translateY(-50%); width: min(460px, 38vw); pointer-events: none; }
.studio__fiche { opacity: 0; transform: translateY(14px); filter: blur(8px); transition: opacity 600ms var(--ease), transform 700ms var(--ease), filter 600ms var(--ease); }
.studio__fiche.is-on { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.studio__cat { margin: 0 0 14px; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.studio__nom { margin: 0; font: 500 clamp(40px, 4.6vw, 76px)/.95 var(--font-display); letter-spacing: -.01em; }
.studio__prix { margin: 22px 0 0; font-size: 16px; color: var(--ivory-dim); }
.studio__prix b { font: 500 30px/1 var(--font-display); color: var(--gold-light); }
.studio__prix s { opacity: .6; margin-inline-end: 6px; }
.studio__liens { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.studio__liens a { text-decoration: none; }
.studio__liens a { display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid rgba(255,255,255,.55); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; transition: background .3s, color .3s; }
.studio__liens a:last-child { background: var(--gold-grad); color: #111; border-color: transparent; }
.studio__liens a:hover, .studio__liens a:focus-visible { background: #fff; color: #0b0a09; }
/* Contrôleur en verre */
.studio__ctrl { position: absolute; z-index: 20; left: 50%; bottom: 9%; transform: translateX(-50%); width: min(1160px, calc(100vw - 48px)); height: 68px; }
.studio__cells { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), 1fr); align-items: center; }
.studio__cell { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 6px; font: 400 clamp(12px, 1.15vw, 16px)/1.15 var(--font-text); letter-spacing: -.01em; color: #fff; text-align: center;
transition: opacity 420ms var(--ease), filter 420ms var(--ease), transform 980ms var(--slow); }
.studio__lbl { font-size: clamp(11px, 1vw, 14px); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.85); transition: opacity 300ms; }
.studio__btn { background: transparent; border: 0; border-radius: 999px; cursor: pointer; }
.studio__btn:disabled { cursor: default; }
.studio__btn:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.studio.is-hover .studio__lbl { opacity: .5; }
.studio__verre { position: absolute; border-radius: 999px; pointer-events: none; }
.studio__track { top: 4px; left: 0; width: 100%; height: 60px; background: rgb(24 20 14 / .34); border: 1px solid rgb(255 255 255 / .2);
backdrop-filter: blur(9px) saturate(126%) contrast(108%) brightness(103%); -webkit-backdrop-filter: blur(9px) saturate(126%) contrast(108%) brightness(103%);
box-shadow: 0 14px 38px rgb(0 0 0 / .22), 0 2px 7px rgb(0 0 0 / .12), inset 1px 1px 0 rgb(255 255 255 / .42), inset -1px -1px 0 rgb(40 30 15 / .16);
transition: left 980ms var(--slow), width 980ms var(--slow), opacity 400ms linear; }
.studio__cap { top: 0; height: 68px; left: calc(var(--cap) * 100% / var(--n)); width: calc(100% / var(--n));
background: rgb(255 248 236 / .2); border: 1px solid rgb(255 255 255 / .28);
backdrop-filter: blur(13px) saturate(128%) contrast(107%) brightness(105%); -webkit-backdrop-filter: blur(13px) saturate(128%) contrast(107%) brightness(105%);
box-shadow: 0 11px 28px rgb(0 0 0 / .2), 0 2px 6px rgb(0 0 0 / .1), inset 1px 1px 0 rgb(255 255 255 / .6), inset -1px -1px 0 rgb(40 30 15 / .2), inset 0 0 12px rgb(255 255 255 / .05);
transition: left 620ms var(--ease), width 620ms var(--ease), background 600ms; }
.studio__verre::before, .studio__verre::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.studio__verre::before { background: radial-gradient(120% 150% at var(--glass-x) var(--glass-y), rgb(255 255 255 / .25), rgb(255 255 255 / 0) 53%), linear-gradient(115deg, rgb(255 255 255 / .1), rgb(255 255 255 / 0) 42%); }
.studio__verre::after { padding: 1px; background: conic-gradient(from 225deg, #f1e2bd, rgb(255 255 255 / .35), #fff, #e9c58e, rgb(255 255 255 / .35), #f1e2bd);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude; opacity: .3; }
/* Repli : une seule capsule centrée « Revenir » */
.studio.is-collapsed .studio__cap { left: calc(50% - 100px); width: 200px; background: rgb(255 248 236 / .14); transition: left 980ms var(--slow), width 980ms var(--slow), background 600ms; }
.studio.is-collapsed .studio__track { left: calc(50% - 96px); width: 192px; opacity: 0; transition: left 980ms var(--slow), width 980ms var(--slow), opacity 400ms linear 650ms; }
.studio.is-collapsed .studio__cell { opacity: 0; filter: blur(10px); transform: scale(.94); pointer-events: none; }
.studio__retour { position: absolute; left: calc(50% - 100px); top: 0; width: 200px; height: 68px; border: 0; border-radius: 999px; background: transparent; color: #fff; cursor: pointer;
font: 500 18px/1 var(--font-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; opacity: 0; pointer-events: none; }
.studio.is-selected .studio__retour { opacity: 1; pointer-events: auto; animation: studio-rev 520ms var(--ease); }
.studio__retour:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@keyframes studio-rev { from { opacity: 0; filter: blur(10px); } to { opacity: 1; filter: none; } }
.studio__credit { position: absolute; z-index: 25; inset-inline-end: 12px; top: 12px; padding: 3px 8px; border-radius: 99px; background: rgba(0,0,0,.45); font-size: 10px; color: var(--ivory-dim); }
@media (max-width: 900px) {
.studio__cell { font-size: 12px; }
.studio__info { width: min(420px, 46vw); }
}
@media (max-width: 700px) {
.studio__stage { min-height: 720px; }
.studio__portrait { width: 100%; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
[dir="rtl"] .studio__portrait { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.studio__hero { top: 13%; }
.studio__title { font-size: clamp(42px, 12vw, 60px); }
.studio__ctrl { bottom: 84px; width: calc(100vw - 32px); height: 252px; }
.studio__track { top: 0; height: 252px; border-radius: 28px; }
.studio__cap { opacity: 0; }
.studio__cells { grid-template-columns: 1fr 1fr; grid-template-rows: 48px repeat(4, 51px); }
.studio__lbl { grid-column: 1 / -1; border-bottom: 1px solid rgb(255 255 255 / .12); }
.studio__btn { border-radius: 0; font-size: 15px; border-bottom: 1px solid rgb(255 255 255 / .12); }
.studio__btn:nth-child(even) { border-inline-end: 1px solid rgb(255 255 255 / .12); }
.studio__btn:nth-last-child(-n+2) { border-bottom: 0; }
.studio__btn:active { background: rgb(255 255 255 / .1); }
.studio.is-collapsed .studio__track { left: calc(50% - 96px); width: 192px; height: 60px; top: auto; bottom: 4px; border-radius: 999px; }
.studio.is-collapsed .studio__cap { opacity: 1; top: auto; bottom: 0; height: 68px; }
.studio__retour { top: auto; bottom: 0; }
.studio__info { inset-inline: 20px; width: auto; top: auto; bottom: 168px; transform: none; }
.studio__nom { font-size: clamp(34px, 10vw, 46px); }
.studio__prix b { font-size: 24px; }
.studio__liens { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
.studio__layer, .studio__layer.is-open, .studio__portrait, .studio__cap, .studio__track, .studio__cell, .studio__title span, .studio__fiche, .studio.is-collapsed .studio__cap, .studio.is-collapsed .studio__track { transition-duration: 1ms !important; transition-delay: 0s !important; }
.studio__title span, .studio__fiche, .studio__cell { filter: none !important; }
.studio.is-selected .studio__retour { animation: none; }
}
.arc { --slide: 0; --outro: 0; --wrap-y: 0px; position: relative; background: #000; color: #fff; user-select: none; }
.arc__stage { position: relative; }
.arc__hero { position: relative; height: 70vh; overflow: hidden; }
.arc__hero img { width: 100%; height: 100%; object-fit: cover; }
.arc__ui { position: absolute; inset: 0; height: 70vh; z-index: 20; pointer-events: none; mix-blend-mode: exclusion; padding: calc(var(--header-h) + 24px) 32px 32px; }
.arc__kicker { margin: 0; font: 500 clamp(28px, 4.6vw, 64px)/.95 var(--font-display); letter-spacing: -.01em; max-width: 9ch; }
.arc__caption { margin: 18px 0 0; max-width: 420px; font-size: 12px; line-height: 1.4; letter-spacing: -.01em; }
.arc__info { position: absolute; inset-inline-end: 32px; bottom: 40px; width: min(330px, 80vw); display: flex; flex-direction: column; align-items: center; text-align: center; }
.arc__rond { position: relative; width: 30px; height: 30px; align-self: flex-start; margin-bottom: 14px; }
.arc__rond svg { width: 100%; height: 100%; }
.arc__rond b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-weight: 500; }
.arc__cta { text-decoration: none; }
.arc__titre { margin: 0; font: 500 30px/1 var(--font-text); letter-spacing: -.04em; text-transform: uppercase; }
.arc__nb { margin: 8px 0 0; font: 500 80px/1 var(--font-text); letter-spacing: -.04em; }
.arc__panel { position: relative; z-index: 10; background: #000; }
.arc__wrap { padding: 56px 16px 80px; }
.arc__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.arc__card { aspect-ratio: 2 / 3; overflow: hidden; background: #111; }
.arc__card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.arc__blanc, .arc__cta, .arc__pied { display: none; }
/* Mode défilement (JavaScript actif, animations autorisées) */
.arc.is-live .arc__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.arc.is-live .arc__hero, .arc.is-live .arc__ui { position: absolute; inset: 0; height: auto; }
.arc.is-live .arc__panel { position: absolute; inset: 0; transform: translate3d(0, calc((1 - var(--slide)) * 100%), 0); will-change: transform; }
.arc.is-live .arc__wrap { padding: min(400px, 40vh) 0 0; transform: translate3d(0, var(--wrap-y), 0); will-change: transform; }
.arc.is-live .arc__grid { gap: 0; }
.arc.is-live .arc__card { transform: scale(0); will-change: transform; background: transparent; }
.arc.is-live .arc__card[data-vide] { visibility: hidden; }
.arc.is-live .arc__info { transform: translateY(calc(var(--outro) * -166px)); }
.arc.is-live .arc__blanc { display: block; position: absolute; inset: 0; z-index: 12; background: #fff; opacity: var(--outro); pointer-events: none; }
.arc.is-live .arc__cta { display: flex; position: absolute; z-index: 21; inset-inline-end: 32px; bottom: 32px; width: 330px; height: 174px; align-items: center; justify-content: center;
border-radius: 1335px; background: #fff; mix-blend-mode: exclusion; transform-origin: right bottom; transform: scale(var(--outro)); pointer-events: none; }
[dir="rtl"] .arc.is-live .arc__cta { transform-origin: left bottom; }
.arc.is-live .arc__cta span { font: 500 clamp(40px, 4.6vw, 72px)/1 var(--font-text); letter-spacing: -.04em; color: #fff; mix-blend-mode: exclusion; }
.arc.is-live.is-outro .arc__cta { pointer-events: auto; }
.arc__cta:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.arc.is-live .arc__pied { display: flex; gap: 80px; position: absolute; z-index: 21; inset-inline-start: 16px; bottom: 32px; margin: 0; mix-blend-mode: exclusion; opacity: var(--outro);
font-size: 13px; font-weight: 500; letter-spacing: -.02em; text-transform: uppercase; pointer-events: none; }
@media (min-width: 640px) {
.arc__grid { grid-template-columns: repeat(3, 1fr); }
.arc__caption { width: calc(50vw - 48px); }
}
@media (min-width: 1024px) {
.arc__grid { grid-template-columns: repeat(4, 1fr); }
.arc__ui { padding: calc(var(--header-h) + 28px) 32px 32px; }
.arc__caption { width: 520px; }
}
@media (max-width: 639px) {
.arc__ui { padding: calc(var(--header-h) + 16px) 16px 16px; }
.arc__info { inset-inline: 0; bottom: 48px; width: auto; }
.arc__rond { align-self: center; width: 20px; height: 20px; }
.arc__titre { font-size: 20px; }
.arc__nb { font-size: 60px; }
.arc.is-live .arc__info { transform: translateY(calc(var(--outro) * -132px)); }
.arc.is-live .arc__cta { inset-inline: 16px; bottom: 60px; width: auto; height: 100px; transform-origin: center bottom; }
.arc.is-live .arc__pied { inset-inline: 72px 16px; bottom: 24px; justify-content: space-between; gap: 0; font-size: 11px; }
}
.rn { --gold: var(--or); --ivory: var(--ivoire); --ivory-dim: var(--ivoire-2); --grey: #9a968f; --font-display: var(--f-display); --font-text: var(--f-texte); }
.rn { --or: #c9a45c; --or-clair: #e9d3a2; --ligne: rgba(201,164,92,.3); position: relative; overflow: clip; padding: clamp(56px, 7vw, 96px) clamp(14px, 3vw, 40px) clamp(40px, 5vw, 64px);
background: radial-gradient(55% 45% at 50% 32%, #22170d 0%, #0a0806 60%, #070605 100%); color: var(--ivory, #f4efe6); }
.rn button { font: inherit; color: inherit; }
.rn [hidden] { display: none !important; }
.rn__haut { display: grid; grid-template-columns: minmax(250px, 340px) minmax(0, 1fr) 96px; gap: clamp(16px, 2.5vw, 36px); align-items: start; max-width: 1320px; margin: 0 auto; }
.rn__kicker { display: flex; align-items: center; gap: 16px; margin: 30px 0 0; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--or); }
.rn__kicker i { width: 46px; height: 1px; background: var(--or); }
.rn__titre { margin: 22px 0 0; font: 400 clamp(36px, 4vw, 58px)/1.06 var(--font-display); }
.rn__sous { margin: 18px 0 0; max-width: 30ch; font-size: 16px; line-height: 1.6; color: var(--ivory-dim, #d6cfc2); }
.rn__cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; min-height: 52px; padding: 0 26px; border: 0; border-radius: 6px; cursor: pointer;
background: linear-gradient(135deg, #f1e2bd, #c9a45c 60%, #b38b48); color: #17120b !important; font-weight: 600; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 10px 30px -12px rgba(201,164,92,.7); }
.rn__etapes-bloc { margin-top: 34px; }
.rn__etapes-bloc summary { display: none; }
.rn__etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; position: relative; }
.rn__etapes::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 1px; background: var(--ligne); }
.rn__etapes button { position: relative; display: flex; align-items: center; gap: 16px; width: 100%; min-height: 40px; padding: 2px 0; border: 0; background: none; cursor: pointer; font-size: 15px; text-align: start; color: var(--ivory-dim, #cfc8bb); }
.rn__etapes button span { display: grid; place-items: center; flex: none; width: 31px; height: 31px; border-radius: 50%; border: 1px solid var(--ligne); background: #0b0907; font-size: 11px; color: var(--or); }
.rn__etapes button[aria-pressed="true"] { color: var(--or-clair); }
.rn__etapes button[aria-pressed="true"] span { background: linear-gradient(135deg, #f1e2bd, var(--or)); color: #17120b; border-color: transparent; box-shadow: 0 0 16px rgba(201,164,92,.5); }
.rn__etape-detail { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--ligne); border-radius: 12px; background: rgba(255,255,255,.02); }
.rn__etape-detail p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ivory-dim, #d6cfc2); }
.rn__texture { display: block; width: 100%; max-height: 140px; object-fit: cover; margin-top: 12px; border-radius: 8px; }
.rn__scene { min-width: 0; }
.rn__cadre { position: relative; height: clamp(520px, 72vh, 760px); overflow: hidden; border-radius: 20px; touch-action: none; cursor: grab; outline: none;
background: radial-gradient(50% 42% at 50% 45%, rgba(201,164,92,.13), transparent 70%); }
.rn__cadre:focus-visible { box-shadow: inset 0 0 0 2px var(--or-clair); }
.rn__plateau { position: absolute; inset: 0; transform-origin: 50% 50%; transition: transform .25s ease; }
.rn__toile { position: absolute; left: 50%; top: 0; height: 100%; width: auto; max-width: 100%; transform: translateX(-50%); transition: opacity .32s ease; }
.rn__toile[data-cache] { opacity: 0; }
.rn__repere { position: absolute; left: 0; top: 0; z-index: 2; display: flex; align-items: flex-start; gap: 10px; pointer-events: none; transition: opacity .35s, transform .35s; }
.rn__repere i { position: relative; flex: none; width: 12px; height: 12px; margin-top: 3px; border-radius: 50%; background: radial-gradient(circle, #fff3cf, var(--or) 60%); box-shadow: 0 0 14px 3px rgba(233,200,130,.75); }
.rn__repere i::after { content: ""; position: absolute; left: 12px; top: 5px; width: clamp(28px, 4vw, 60px); height: 1px; background: var(--or); }
.rn__repere span { margin-inline-start: clamp(34px, 4.6vw, 66px); font-size: 12px; line-height: 1.4; color: var(--ivory-dim, #d6cfc2); white-space: nowrap; text-shadow: 0 1px 8px #000; }
.rn__repere b { display: block; font-weight: 500; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--or-clair); }
.rn__repere.is-actif i { box-shadow: 0 0 22px 7px rgba(233,200,130,.9); }
.rn__repere.is-attenue { opacity: .35; }
.rn__ciseaux { position: absolute; left: 0; top: 0; z-index: 3; width: 56px; height: 56px; margin: -28px 0 0 -54px; pointer-events: none; filter: drop-shadow(0 2px 6px rgba(0,0,0,.8)); }
.rn__ciseaux path { fill: #f0dca6; stroke: #8d6b2e; stroke-width: .8; }
.rn__ciseaux circle, .rn__ciseaux .manche { fill: none; stroke: #e2c27f; stroke-width: 3; stroke-linecap: round; }
.rn__ciseaux .lame { transform-origin: 30px 32px; transition: transform .09s; }
.rn__ciseaux.is-ferme .lame--a { transform: rotate(9deg); } .rn__ciseaux.is-ferme .lame--b { transform: rotate(-9deg); }
.rn__partage { position: absolute; top: 0; bottom: 0; z-index: 2; width: 2px; margin-left: -1px; background: linear-gradient(transparent, var(--or), transparent); pointer-events: none; }
.rn__partage span { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px; border-radius: 50%; border: 1px solid var(--or); background: rgba(8,8,8,.8); }
.rn__voile { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 14px; background: #0a0806; font-size: 13px; letter-spacing: .1em; color: var(--ivory-dim, #cfc8bb); transition: opacity .5s; }
.rn__voile span { width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(201,164,92,.25); border-top-color: var(--or); animation: rn-tour 1s linear infinite; }
.rn__voile.is-cache { opacity: 0; pointer-events: none; }
@keyframes rn-tour { to { transform: rotate(360deg); } }
.rn__mesure { position: absolute; left: 14px; bottom: 12px; z-index: 2; margin: 0; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--ligne); background: rgba(8,8,8,.65); font-size: 12px; color: var(--or-clair); }
.rn__comparaison { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; }
.rn__comparaison input { width: min(220px, 50vw); accent-color: var(--or); }
.rn__mention { margin: 10px auto 0; max-width: 62ch; text-align: center; font-size: 11.5px; line-height: 1.5; color: var(--grey, #9a968f); }
.rn__commandes { display: grid; gap: 14px; justify-items: center; padding-top: 10px; }
.rn__cmd { display: grid; justify-items: center; gap: 6px; border: 0; background: none; cursor: pointer; padding: 0; }
.rn__rond { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; border: 1px solid rgba(201,164,92,.55); background: rgba(10,8,6,.7); color: var(--or-clair); transition: background .2s, box-shadow .2s; }
.rn__rond svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rn__cmd--360 .rn__rond { width: 76px; height: 76px; border-width: 1.5px; box-shadow: 0 0 22px rgba(201,164,92,.35); display: grid; align-content: center; gap: 0; }
.rn__cmd--360 b { font: 500 22px/1 var(--font-text); color: var(--ivory, #fff); }
.rn__cmd--360 svg { width: 34px; height: 10px; }
.rn__cmd small { font-size: 12px; color: var(--ivory-dim, #d6cfc2); white-space: nowrap; }
.rn__cmd:hover .rn__rond, .rn__cmd[aria-pressed="true"] .rn__rond { background: rgba(201,164,92,.18); box-shadow: 0 0 18px rgba(201,164,92,.4); }
.rn__vues { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); max-width: 1320px; margin: 18px auto 0; border: 1px solid var(--ligne); border-radius: 12px; overflow: hidden; background: #0b0907; }
.rn__vues button { position: relative; display: grid; border: 0; border-inline-end: 1px solid var(--ligne); background: none; cursor: pointer; padding: 0; }
.rn__vues button:last-child { border: 0; }
.rn__vignette { width: 100%; height: auto; aspect-ratio: 96 / 132; object-fit: cover; display: block; }
.rn__vues span { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 4px 8px; display: grid; gap: 2px; text-align: center; font-size: 12px; color: var(--ivory-dim, #d6cfc2); background: linear-gradient(transparent, rgba(0,0,0,.9)); }
.rn__vues b { font-weight: 500; color: var(--ivory, #fff); }
.rn__vues button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--or); }
.rn__vues button[aria-pressed="true"] b { color: var(--or-clair); }
.rn__onglets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 920px; margin: 28px auto 0; }
.rn__onglets button { min-height: 46px; border-radius: 999px; border: 1px solid rgba(255,255,255,.08); background: #0e0c0a; cursor: pointer; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ivory-dim, #d6cfc2); }
.rn__onglets button[aria-selected="true"] { background: linear-gradient(135deg, #f1e2bd, var(--or)); color: #17120b; border-color: transparent; font-weight: 600; }
.rn__pan { max-width: 1320px; margin: 18px auto 0; }
.rn__pan--coupe { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr); gap: 16px; }
.rn__bloc { border: 1px solid var(--ligne); border-radius: 14px; padding: 16px; background: rgba(255,255,255,.015); min-width: 0; }
.rn__bloc summary { display: none; }
.rn__h { margin: 0 0 12px; font: 500 16px/1.2 var(--font-text); color: var(--or-clair); }
.rn__techniques, .rn__coiffures { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.rn__coiffures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rn__techniques button, .rn__coiffures button { display: grid; gap: 6px; padding: 6px 6px 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,.08); background: #0d0b09; cursor: pointer; font-size: 12.5px; text-align: center; }
.rn__techniques canvas, .rn__coiffures canvas { width: 100%; height: auto; aspect-ratio: 104 / 120; border-radius: 6px; background: #0a0806; }
.rn__techniques button[aria-pressed="true"], .rn__coiffures button[aria-pressed="true"] { border-color: var(--or); background: rgba(201,164,92,.1); box-shadow: 0 0 0 1px var(--or); }
.rn__techniques button:disabled { cursor: not-allowed; opacity: .45; }
.rn__techniques button:disabled canvas { background: repeating-linear-gradient(45deg, #0d0b09 0 6px, #14110d 6px 12px); }
.rn__note { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--grey, #9a968f); }
.rn__curseur { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-bottom: 14px; font-size: 13.5px; color: var(--ivory-dim, #d6cfc2); }
.rn__curseur output { color: var(--or-clair); font-size: 13px; }
.rn__curseur input { grid-column: 1 / -1; width: 100%; accent-color: var(--or); min-height: 26px; }
.rn__aide { display: block; margin: -10px 0 14px; font-size: 11.5px; color: var(--grey, #9a968f); }
.rn__groupe { border: 0; padding: 0; margin: 0 0 14px; }
.rn__groupe legend { margin-bottom: 8px; font-size: 13.5px; color: var(--ivory-dim, #d6cfc2); }
.rn__seg { display: flex; flex-wrap: wrap; gap: 6px; }
.rn__seg button { flex: 1 1 auto; min-height: 40px; padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.1); background: #0e0c0a; cursor: pointer; font-size: 12.5px; }
.rn__seg button[aria-pressed="true"] { border-color: var(--or); background: rgba(201,164,92,.16); color: var(--or-clair); }
.rn__interrupteur { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin-bottom: 8px; font-size: 13.5px; color: var(--ivory-dim, #d6cfc2); cursor: pointer; }
.rn__interrupteur input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rn__interrupteur i { position: relative; flex: none; width: 46px; height: 26px; border-radius: 999px; background: #2a2520; transition: background .2s; }
.rn__interrupteur i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #f4efe6; transition: transform .2s; }
.rn__interrupteur input:checked + i { background: linear-gradient(135deg, #f1e2bd, var(--or)); }
.rn__interrupteur input:checked + i::after { transform: translateX(20px); }
.rn__interrupteur input:focus-visible + i { outline: 2px solid var(--or-clair); outline-offset: 2px; }
.rn__actions-coupe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.rn__couleurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.rn__couleurs button { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.08); background: #0d0b09; cursor: pointer; font-size: 13px; text-align: start; }
.rn__couleurs i { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); }
.rn__couleurs button[aria-pressed="true"] { border-color: var(--or); box-shadow: 0 0 0 1px var(--or); }
.rn__perso { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 13.5px; color: var(--ivory-dim, #d6cfc2); }
.rn__perso input { width: 54px; height: 38px; padding: 2px; border-radius: 8px; border: 1px solid var(--ligne); background: none; cursor: pointer; }
.rn__styles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.rn__styles li { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--ligne); border-radius: 12px; }
.rn__styles img { width: 64px; height: 80px; object-fit: cover; border-radius: 6px; }
.rn__styles p { margin: 0 0 6px; font-size: 13px; }
.rn__styles div div { display: flex; gap: 6px; }
.rn__barre { display: grid; grid-template-columns: repeat(4, auto) 1fr; gap: 12px; align-items: center; max-width: 1320px; margin: 22px auto 0; }
.rn__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: 999px; border: 1px solid rgba(201,164,92,.45); background: rgba(10,8,6,.6); cursor: pointer; text-decoration: none;
font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ivory, #f4efe6); white-space: nowrap; }
.rn__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.rn__btn:disabled { opacity: .4; cursor: not-allowed; }
.rn__btn[aria-pressed="true"] { background: rgba(201,164,92,.18); border-color: var(--or); }
.rn__btn--or { border-color: var(--or); color: var(--or-clair); }
.rn__btn--plein { justify-self: end; border: 0; border-radius: 8px; background: linear-gradient(135deg, #f1e2bd, #c9a45c 60%, #b38b48); color: #17120b; font-weight: 600; }
.rn__mini { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ligne); background: none; cursor: pointer; font-size: 20px; color: var(--or-clair); }
.rn__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; max-width: 1320px; margin: 16px auto 0; }
.rn__historique { font-size: 13px; color: var(--ivory-dim, #ccc); }
.rn__historique summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; color: var(--or-clair); }
.rn__historique ol { margin: 6px 0 0; padding-inline-start: 22px; display: grid; gap: 2px; }
.rn__historique button { border: 0; background: none; cursor: pointer; padding: 4px 0; text-align: start; color: var(--ivory-dim, #ccc); }
.rn__historique button[aria-current="step"] { color: var(--or-clair); font-weight: 600; }
.rn__rdv { display: inline-flex; align-items: center; min-height: 44px; color: var(--or-clair); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; text-underline-offset: 4px; }
.rn__resultat { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60; display: flex; gap: 14px; align-items: center; width: min(560px, calc(100% - 24px)); padding: 12px; border-radius: 16px; background: #0d0b09; border: 1px solid var(--or); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.rn__resultat img { width: 80px; height: 100px; object-fit: cover; border-radius: 8px; flex: none; }
.rn__resultat p { margin: 0 0 8px; font-size: 13.5px; }
.rn button:focus-visible, .rn a:focus-visible, .rn input:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 2px; }
.rn.is-occupe [data-rn-couper] { opacity: .5; pointer-events: none; }
@media (max-width: 1180px) {
.rn__haut { grid-template-columns: minmax(0, 1fr) 84px; }
.rn__gauche { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; align-items: start; }
.rn__gauche > :not(.rn__etapes-bloc) { grid-column: 1; }
.rn__etapes-bloc { grid-column: 2; grid-row: 1 / span 4; margin-top: 30px; }
.rn__rond { width: 54px; height: 54px; } .rn__cmd--360 .rn__rond { width: 64px; height: 64px; }
.rn__techniques { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rn__pan--coupe { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
.rn { padding-inline: 12px; }
.rn__haut { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.rn__gauche { display: block; }
.rn__kicker { margin-top: 0; }
.rn__titre { font-size: clamp(32px, 9vw, 40px); }
.rn__sous { font-size: 15px; }
.rn__cta { width: 100%; justify-content: center; }
.rn__etapes-bloc { margin-top: 18px; border: 1px solid var(--ligne); border-radius: 12px; padding: 0 12px; }
.rn__etapes-bloc summary { display: flex; align-items: center; min-height: 48px; cursor: pointer; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--or-clair); }
.rn__etapes-bloc[open] { padding-bottom: 12px; }
.rn__cadre { height: min(132vw, 600px); border-radius: 14px; }
.rn__repere span { display: none; }
.rn__repere b { display: none; }
.rn__commandes { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 0; }
.rn__rond, .rn__cmd--360 .rn__rond { width: 44px; height: 44px; }
.rn__cmd--360 b { font-size: 13px; } .rn__cmd--360 svg { display: none; }
.rn__rond svg { width: 20px; height: 20px; }
.rn__cmd small { font-size: 10px; white-space: normal; text-align: center; line-height: 1.15; }
.rn__vues { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rn__vues button:nth-child(4) { border-inline-end: 0; }
.rn__vues button:nth-child(-n+4) { border-bottom: 1px solid var(--ligne); }
.rn__vues span { font-size: 10.5px; }
.rn__onglets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rn__bloc { padding: 0 12px; }
.rn__bloc summary { display: flex; align-items: center; min-height: 50px; cursor: pointer; font-size: 14px; color: var(--or-clair); }
.rn__bloc[open] { padding-bottom: 14px; }
.rn__bloc .rn__h { display: none; }
.rn__techniques, .rn__coiffures { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rn__barre { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rn__btn { min-height: 50px; padding: 0 10px; font-size: 11.5px; letter-spacing: .06em; white-space: normal; text-align: center; }
.rn__btn--plein { grid-column: 1 / -1; justify-self: stretch; }
.rn__resultat { bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) { .rn__voile span { animation: none; } .rn__toile, .rn__plateau { transition: none; } }
.sc, .lea { --gold: var(--or); --gold-light: var(--or-clair); --gold-deep: #9b7a42; --ivory: var(--ivoire); --ivory-dim: var(--ivoire-2); --ink: #111; --grey: #9a968f; --font-display: var(--f-display); --font-text: var(--f-texte); --gutter: clamp(20px, 5vw, 56px); --ease: cubic-bezier(0.22, 1, 0.36, 1); }
.sc { position: relative; overflow: hidden; isolation: isolate; padding: clamp(80px, 10vw, 128px) 0 clamp(64px, 8vw, 96px); background: #070707; color: var(--ivory); }
.sc__fond { position: absolute; inset: 0; z-index: -1; }
.sc__fond img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.32) saturate(1.05) blur(1px); transform: scale(1.04); }
.sc__fond::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 35%, transparent, rgba(0,0,0,.55) 70%), linear-gradient(180deg, rgba(0,0,0,.35), transparent 30%, transparent 62%, #060606 100%); }
.sc__in { position: relative; width: min(1640px, 100%); margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
.sc__kicker { margin: 0 0 16px; font-size: 13px; letter-spacing: .5em; padding-inline-start: .5em; color: var(--gold); }
.sc__titre { margin: 0; font: 500 clamp(40px, 7vw, 96px)/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase;
background: linear-gradient(180deg, #fff 30%, #e9d3a2 120%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sc__sous { margin: 14px auto 0; max-width: 640px; font: 400 clamp(16px, 1.5vw, 21px)/1.4 var(--font-display); color: var(--ivory-dim); }
.sc__script { position: absolute; inset-inline-end: max(var(--gutter), 2vw); top: 236px; margin: 0; font: italic 500 clamp(22px, 2.4vw, 34px)/1 var(--font-display); color: var(--gold); transform: rotate(-12deg); pointer-events: none; }
.sc__script span { font-style: normal; }
.sc__onglets { display: inline-flex; gap: 16px; margin-top: 28px; }
.sc__onglet { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 184px; min-height: 54px; padding: 0 26px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18);
background: rgba(10,10,10,.6); color: var(--ivory); font: 500 18px/1 var(--font-display); cursor: pointer; transition: border-color .3s, box-shadow .3s, color .3s; backdrop-filter: blur(6px); }
.sc__onglet svg { width: 22px; height: 22px; }
.sc__onglet[aria-selected="true"] { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(233,211,162,.25), 0 0 26px -6px rgba(233,211,162,.6), inset 0 0 18px -8px rgba(233,211,162,.5); }
.sc__onglet:focus-visible, .sc__fleche:focus-visible, .sc__cta:focus-visible, .sc__liste:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.sc__scene { position: relative; margin: clamp(28px, 4vw, 44px) calc(-1 * var(--gutter)) 0; }
.sc__liste { display: flex; justify-content: safe center; gap: clamp(14px, 1.6vw, 26px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scroll-padding-inline: 76px; padding: 18px 76px 120px; margin: 0 0 -100px; list-style: none;
scrollbar-width: none; overscroll-behavior-x: contain; perspective: 1400px; }
.sc__liste::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .sc__liste { scroll-behavior: auto; } }
.sc-card { flex: none; width: clamp(196px, 15.5vw, 222px); scroll-snap-align: center; }
.sc-tel { position: relative; aspect-ratio: 9 / 18.6; border-radius: 34px; padding: 7px; background: linear-gradient(145deg, #3a3326 0%, #0e0d0b 28%, #1b1812 60%, #6b5732 100%);
box-shadow: 0 0 0 1px rgba(233,211,162,.38), 0 30px 60px -28px rgba(0,0,0,.95), inset 0 0 0 1.5px rgba(255,255,255,.08);
-webkit-box-reflect: below 10px linear-gradient(transparent 72%, rgba(255,255,255,.16)); transition: transform .5s var(--ease); }
.sc-card.is-actif .sc-tel { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(233,211,162,.7), 0 40px 70px -26px rgba(0,0,0,.95), 0 0 40px -18px rgba(233,211,162,.8); }
.sc-ecran { position: relative; height: 100%; overflow: hidden; border-radius: 28px; background: #111; }
.sc-ecran > img, .sc-ecran > video, .sc-ecran > iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.sc-card.is-sans-image .sc-ecran { background: radial-gradient(120% 80% at 30% 10%, #3a2d18 0%, #120f0b 55%, #050505 100%); }
.sc-card.is-sans-image .sc-ecran::before { content: ""; position: absolute; inset: 22% 22% auto; aspect-ratio: 1; border-radius: 28%; border: 1.5px solid rgba(233,211,162,.35); background: rgba(233,211,162,.04); }
.sc-card[data-reseau="tiktok"].is-sans-image .sc-ecran { background: radial-gradient(120% 80% at 70% 10%, #1d2a2e 0%, #0f0d10 55%, #050505 100%); }
.sc-marque { position: absolute; z-index: 1; top: 30%; left: 50%; transform: translateX(-50%); width: 34%; color: rgba(233,211,162,.75); }
.sc-card[data-reseau="tiktok"] .sc-marque { color: rgba(255,255,255,.7); }
.sc-compte { position: absolute; z-index: 1; top: 51%; left: 0; right: 0; text-align: center; font: 500 13px/1 var(--font-text); letter-spacing: .08em; color: rgba(244,239,230,.7); }
.sc-card.is-sans-image .sc-play { top: 66%; }
.sc-encoche { position: absolute; z-index: 3; top: 7px; left: 50%; transform: translateX(-50%); width: 34%; height: 18px; border-radius: 0 0 12px 12px; background: #050505; }
.sc-voile { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 22%, transparent 55%, rgba(0,0,0,.82)); pointer-events: none; }
.sc-badge { position: absolute; z-index: 3; top: 16px; inset-inline-start: 14px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: rgba(0,0,0,.5); color: #fff; }
.sc-card[data-reseau="instagram"] .sc-badge { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.sc-badge svg { width: 19px; height: 19px; }
.sc-ext { position: absolute; z-index: 3; top: 16px; inset-inline-end: 14px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(0,0,0,.35); }
.sc-ext svg { width: 18px; height: 18px; }
.sc-play { position: absolute; z-index: 3; top: 50%; left: 50%; width: 56px; height: 56px; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%;
border: 1.5px solid rgba(255,255,255,.85); background: rgba(0,0,0,.28); color: #fff; cursor: pointer; backdrop-filter: blur(4px); transition: opacity .35s, transform .35s; }
.sc-play svg { width: 22px; height: 22px; }
.sc-card.is-lecture .sc-play { opacity: 0; }
.sc-card.is-lecture .sc-play:focus-visible, .sc-card.is-lecture:hover .sc-play { opacity: 1; }
.sc-play:focus-visible, .sc-son:focus-visible, .sc-ext:focus-visible, .sc-voir:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.sc-son { position: absolute; z-index: 3; bottom: 108px; inset-inline-end: 12px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 0; background: rgba(0,0,0,.45); color: #fff; cursor: pointer; }
.sc-son svg { width: 17px; height: 17px; }
.sc-bas { position: absolute; z-index: 3; inset-inline: 14px; bottom: 14px; text-align: start; }
.sc-cat { display: inline-block; margin-bottom: 6px; padding: 3px 9px; border-radius: 99px; background: rgba(233,211,162,.18); color: var(--gold-light); font-size: 10.5px; letter-spacing: .06em; }
.sc-vues { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 13px; }
.sc-vues svg { width: 16px; height: 16px; }
.sc-legende { margin: 0; font: 500 14px/1.3 var(--font-text); color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.sc-voir { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11px; color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }
.sc-accord { position: absolute; z-index: 6; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 22px; background: rgba(5,5,5,.9); text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--ivory-dim); }
.sc-accord p { margin: 0; }
.sc-accord-ok { min-height: 42px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #f1e2bd, #c9a96e); color: #14110b; font: 600 12.5px/1 var(--font-text); cursor: pointer; }
.sc-accord a { color: var(--gold-light); }
.sc-demo-tag { position: absolute; z-index: 3; top: 56px; inset-inline-start: 14px; padding: 2px 8px; border-radius: 99px; background: rgba(0,0,0,.6); font-size: 10px; color: var(--ivory-dim); }
.sc__fleche { position: absolute; z-index: 5; top: calc(50% - 60px); width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--gold);
background: rgba(0,0,0,.55); color: var(--gold-light); cursor: pointer; backdrop-filter: blur(6px); transition: background .3s, opacity .3s; }
.sc__fleche:hover { background: rgba(233,211,162,.14); }
.sc__fleche:disabled { opacity: .3; cursor: default; }
.sc__fleche svg { width: 24px; height: 24px; }
.sc__fleche--prec { inset-inline-start: 8px; } .sc__fleche--suiv { inset-inline-end: 8px; }
[dir="rtl"] .sc__fleche svg { transform: scaleX(-1); }
.sc__points { display: flex; justify-content: center; gap: 10px; margin-top: 26px; }
.sc__points i { width: 62px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.22); transition: background .3s; }
.sc__points i.is-on { background: var(--gold); }
.sc__vide, .sc__demo { margin: 20px auto 0; max-width: 560px; color: var(--ivory-dim); font-size: 15px; }
.sc__demo { font-size: 12px; letter-spacing: .04em; color: var(--gold-light); }
.sc__cta { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-width: min(540px, 100%); min-height: 62px; margin-top: 34px; padding: 0 32px; border-radius: 999px;
border: 1.5px solid var(--gold); background: rgba(0,0,0,.55); color: var(--ivory); font: 500 clamp(17px, 1.6vw, 21px)/1 var(--font-display); text-decoration: none; transition: background .3s; }
.sc__cta:hover { background: rgba(233,211,162,.12); }
.sc__cta svg { width: 22px; height: 22px; }
@media (max-width: 1100px) { .sc__script { display: none; } }
@media (max-width: 900px) { .sc__fleche { display: none; } .sc__liste { padding-inline: 18vw; scroll-padding-inline: 0; justify-content: flex-start; } }
@media (max-width: 560px) {
.sc__onglets { display: flex; width: 100%; } .sc__onglet { flex: 1; min-width: 0; padding: 0 12px; font-size: 16px; }
.sc-card { width: 64vw; } .sc__points i { width: 28px; }
}
.lea { --lea-or: var(--gold, #c9a96e); --lea-or-clair: var(--gold-light, #e9d3a2); --lea-fond: #0b0b0c; --lea-carte: #151517; --lea-ligne: rgba(233, 211, 162, 0.18); font-family: var(--font-text); }
.lea__bouton { position: fixed; z-index: 70; inset-inline-end: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px 0 8px;
border-radius: 999px; border: 1px solid rgba(233, 211, 162, 0.45); background: radial-gradient(120% 140% at 20% 0%, #2a2418 0%, #0d0c0b 60%); color: var(--lea-or-clair); cursor: pointer;
box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.12); font: 600 13px/1 var(--font-text); letter-spacing: 0.22em; transition: transform 0.35s var(--ease), border-color 0.3s; }
.lea__bouton:hover { transform: translateY(-2px); border-color: var(--lea-or); }
.lea__bouton:focus-visible { outline: 2px solid var(--lea-or-clair); outline-offset: 3px; }
.lea__mono { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(233, 211, 162, 0.08); }
.lea__mono svg { width: 30px; height: 30px; }
.lea.is-open .lea__bouton { opacity: 0; pointer-events: none; transform: scale(0.9); }
.lea__panneau { position: fixed; z-index: 95; inset-inline-end: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(410px, calc(100vw - 32px)); height: min(680px, calc(100dvh - 32px));
display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; border: 1px solid var(--lea-ligne); background: linear-gradient(180deg, #121112 0%, var(--lea-fond) 40%); color: var(--ivory, #f4efe6);
box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.06); transform-origin: bottom right; animation: lea-in 0.42s var(--ease); }
[dir="rtl"] .lea__panneau { transform-origin: bottom left; }
.lea__panneau[hidden] { display: none; }
@keyframes lea-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
.lea__haut { display: flex; align-items: center; gap: 12px; padding: 14px 12px 12px 16px; border-bottom: 1px solid var(--lea-ligne); }
.lea__haut .lea__mono { flex: none; color: var(--lea-or-clair); }
.lea__ident { flex: 1; min-width: 0; }
.lea__titre { margin: 0; font: 500 22px/1.05 var(--font-display); color: var(--ivory, #f4efe6); }
.lea__sous { margin: 2px 0 0; font-size: 12px; line-height: 1.3; color: var(--ivory-dim, #ccc); }
.lea__note { margin: -4px 0 0; font-size: 11px; line-height: 1.45; color: var(--grey, #9a968f); }
.lea__titre { letter-spacing: 0.08em; }
.lea__badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lea-or); }
.lea__badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #7fd49a; box-shadow: 0 0 8px #7fd49a; }
.lea__badge.is-off::before { background: #9a968f; box-shadow: none; }
.lea__icone { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ivory-dim, #ccc); cursor: pointer; }
.lea__icone:hover, .lea__icone[aria-pressed="true"] { background: rgba(233, 211, 162, 0.1); color: var(--lea-or-clair); }
.lea__icone:focus-visible, .lea__puce:focus-visible, .lea__envoyer:focus-visible, .lea__micro:focus-visible, .lea__action:focus-visible { outline: 2px solid var(--lea-or-clair); outline-offset: 2px; }
.lea__icone svg { width: 18px; height: 18px; }
.lea__fil { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; scrollbar-width: thin; }
.lea__msg { max-width: 88%; padding: 11px 14px; border-radius: 16px; font-size: 14px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.lea__msg--lea { align-self: flex-start; background: var(--lea-carte); border: 1px solid rgba(255, 255, 255, 0.06); border-end-start-radius: 4px; }
.lea__msg--vous { align-self: flex-end; background: linear-gradient(135deg, #e9d3a2, #b8925a); color: #15120c; border-end-end-radius: 4px; }
.lea__msg--info { align-self: stretch; max-width: none; background: rgba(233, 211, 162, 0.06); border: 1px dashed var(--lea-ligne); font-size: 12.5px; color: var(--ivory-dim, #ccc); }
.lea__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-size: 11px; color: var(--grey, #9a968f); }
.lea__meta a { color: var(--lea-or-clair); }
.lea__lire { margin-inline-start: auto; border: 0; background: none; color: var(--lea-or); font: inherit; cursor: pointer; padding: 2px 0; text-decoration: underline; }
.lea__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lea__action { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(233, 211, 162, 0.4); color: var(--lea-or-clair); font-size: 12px; text-decoration: none; letter-spacing: 0.04em; }
.lea__action--or { background: linear-gradient(135deg, #f1e2bd, #c9a96e); color: #14110b; border-color: transparent; font-weight: 600; }
.lea__attente { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ivory-dim, #ccc); }
.lea__points { display: inline-flex; gap: 4px; }
.lea__points i { width: 6px; height: 6px; border-radius: 50%; background: var(--lea-or); animation: lea-pt 1.1s ease-in-out infinite; }
.lea__points i:nth-child(2) { animation-delay: 0.15s; } .lea__points i:nth-child(3) { animation-delay: 0.3s; }
@keyframes lea-pt { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.lea__suggestions { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 10px; scrollbar-width: none; }
.lea__suggestions::-webkit-scrollbar { display: none; }
.lea__suggestions.is-grille { flex-wrap: wrap; overflow-y: auto; max-height: 42%; padding-top: 2px; }
.lea__puce { flex: none; min-height: 36px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--lea-ligne); background: rgba(255, 255, 255, 0.03); color: var(--ivory, #f4efe6); font: 500 12.5px/1.2 var(--font-text); cursor: pointer; text-align: start; }
.lea__puce:hover { border-color: var(--lea-or); color: var(--lea-or-clair); }
.lea__micro-etat { margin: 0 16px 8px; padding: 8px 12px; border-radius: 12px; background: rgba(230, 120, 110, 0.12); border: 1px solid rgba(230, 120, 110, 0.4); color: #f2c0b8; font-size: 12.5px; display: flex; align-items: center; gap: 8px; }
.lea__micro-etat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ef6f62; animation: lea-rec 1s ease-in-out infinite; }
.lea__micro-etat[hidden] { display: none; }
@keyframes lea-rec { 50% { opacity: 0.3; } }
.lea__etat { display: flex; align-items: center; gap: 10px; margin: 0 16px 8px; padding: 8px 10px 8px 12px; border-radius: 12px; border: 1px solid var(--lea-ligne); background: rgba(233,211,162,.06); font-size: 12.5px; color: var(--lea-or-clair); }
.lea__etat[hidden] { display: none; }
.lea__etat span { flex: 1; }
.lea__etat-ondes { display: inline-flex; align-items: center; gap: 3px; height: 16px; }
.lea__etat-ondes b { width: 3px; height: 40%; border-radius: 2px; background: currentColor; animation: lea-onde .9s ease-in-out infinite; }
.lea__etat-ondes b:nth-child(2) { animation-delay: .15s; } .lea__etat-ondes b:nth-child(3) { animation-delay: .3s; }
.lea__etat[data-etat="ecoute"] { color: #f2c0b8; border-color: rgba(230,120,110,.4); }
.lea__etat[data-etat="reflexion"] .lea__etat-ondes b { animation-duration: 1.6s; }
@keyframes lea-onde { 0%, 100% { height: 30%; } 50% { height: 100%; } }
.lea__etat-texte { border: 0; background: none; color: var(--ivory-dim); font: inherit; text-decoration: underline; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .lea__etat-ondes b { animation: none; height: 70%; } }
.lea__form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 10px 14px; border-top: 1px solid var(--lea-ligne); background: rgba(0, 0, 0, 0.3); }
.lea__saisie { flex: 1; min-height: 44px; max-height: 120px; resize: none; padding: 11px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.1); background: #0f0f10; color: var(--ivory, #f4efe6); font: 14px/1.4 var(--font-text); }
.lea__saisie:focus { outline: none; border-color: var(--lea-or); }
.lea__micro, .lea__envoyer { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--lea-ligne); background: transparent; color: var(--lea-or-clair); cursor: pointer; }
.lea__envoyer { background: linear-gradient(135deg, #f1e2bd, #c9a96e); color: #14110b; border: 0; }
.lea__envoyer:disabled { opacity: 0.45; cursor: default; }
.lea__micro[aria-pressed="true"] { background: #ef6f62; color: #fff; border-color: transparent; }
.lea__micro svg, .lea__envoyer svg { width: 19px; height: 19px; }
[dir="rtl"] .lea__envoyer svg { transform: scaleX(-1); }
.lea__pied { padding: 0 16px 12px; font-size: 10.5px; line-height: 1.45; color: var(--grey, #9a968f); background: rgba(0, 0, 0, 0.3); }
.lea__pied a { color: var(--lea-or); }
.lea__vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* barre d'appel : appeler le salon ou appel vocal avec l'hôtesse IA */
.lea__appels { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--lea-ligne); }
.lea__appel { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; align-items: center; min-height: 48px; padding: 7px 10px; border-radius: 14px; border: 1px solid var(--lea-ligne);
background: rgba(255,255,255,.03); color: var(--ivory, #f4efe6); font: 600 12px/1.2 var(--font-text); text-align: start; text-decoration: none; cursor: pointer; }
.lea__appel svg { grid-row: span 2; width: 20px; height: 20px; color: var(--lea-or-clair); }
.lea__appel small { font-weight: 400; font-size: 10.5px; color: var(--grey, #9a968f); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lea__appel--ia { background: radial-gradient(120% 140% at 0% 0%, rgba(233,211,162,.16), rgba(233,211,162,.02)); border-color: rgba(233,211,162,.4); }
.lea__appel:hover { border-color: var(--lea-or); }
.lea__appel:focus-visible, .lea__appel-go:focus-visible, .lea__appel-fin:focus-visible, .lea__appel-parler:focus-visible { outline: 2px solid var(--lea-or-clair); outline-offset: 2px; }
.lea__appel[hidden] { display: none; }
/* relances : nouvelles questions après chaque réponse */
.lea__relances { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lea__relances-titre { width: 100%; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--lea-or); }
.lea__relances .lea__puce { min-height: 32px; font-size: 12px; animation: lea-in .4s var(--ease) both; }
.lea__relances .lea__puce:nth-child(3) { animation-delay: .06s; } .lea__relances .lea__puce:nth-child(4) { animation-delay: .12s; }
.lea__web { padding: 1px 6px; border-radius: 6px; border: 1px solid var(--lea-ligne); }
/* écran d'appel */
.lea__appel-ecran { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 20px calc(18px + env(safe-area-inset-bottom, 0px));
overflow-y: auto; background: radial-gradient(120% 80% at 50% 0%, #2a2116 0%, #0b0b0c 60%); text-align: center; animation: lea-in .35s var(--ease); }
.lea__appel-titre { margin: 0; font: 500 13px/1 var(--font-text); letter-spacing: .24em; text-transform: uppercase; color: var(--lea-or-clair); }
.lea__appel-statut { margin: 0; min-height: 2.6em; max-width: 30ch; font: 500 17px/1.3 var(--font-display); color: var(--ivory, #f4efe6); }
.lea__appel-note { margin: 0; max-width: 40ch; font-size: 12px; line-height: 1.5; color: var(--ivory-dim, #ccc); }
.lea__appel-note.is-petite { font-size: 10.5px; color: var(--grey, #9a968f); }
.lea__appel-boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
.lea__appel-go, .lea__appel-parler, .lea__appel-fin { min-height: 48px; padding: 0 20px; border-radius: 999px; border: 0; font: 600 13px/1 var(--font-text); letter-spacing: .04em; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.lea__appel-go { background: linear-gradient(135deg, #f1e2bd, #c9a96e); color: #14110b; }
.lea__appel-parler { background: rgba(233,211,162,.12); color: var(--lea-or-clair); border: 1px solid var(--lea-ligne); }
.lea__appel-parler[hidden] { display: none; }
.lea__appel-fin { background: #c0392b; color: #fff; }
.lea__appel-fin svg { width: 20px; height: 20px; }
.lea__appel-salon { margin-top: auto; font-size: 12px; color: var(--lea-or-clair); }
/* hôtesse virtuelle (SVG illustré, src/scripts/hotesse.ts) */
.hx { --bouche: 0; position: relative; margin: 4px 0 0; width: min(240px, 62vw); }
.hx svg { display: block; width: 100%; height: auto; overflow: visible; }
.hx::after { content: ""; position: absolute; inset: 4% 4% 10%; border-radius: 50%; border: 1.5px solid rgba(233,211,162,.35); opacity: 0; transition: opacity .3s, border-color .3s; pointer-events: none; }
.hx[data-etat="ecoute"]::after { opacity: 1; border-color: rgba(239,111,98,.7); animation: hx-pulse 1.6s ease-in-out infinite; }
.hx[data-etat="parle"]::after { opacity: 1; border-color: rgba(233,211,162,.7); animation: hx-pulse 1.1s ease-in-out infinite; }
.hx__legende { margin-top: 4px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--grey, #9a968f); }
.hx .hx-corps { transform-origin: 100px 230px; animation: hx-souffle 5s ease-in-out infinite; }
.hx .hx-tete, .hx .hx-chev-av { transform-origin: 100px 170px; transition: transform .6s var(--ease); }
.hx .hx-chev-arr { transform-origin: 100px 70px; animation: hx-cheveux 6s ease-in-out infinite; }
.hx .hx-meche-g { transform-origin: 70px 92px; animation: hx-meche 4.6s ease-in-out infinite; }
.hx .hx-meche-d { transform-origin: 134px 92px; animation: hx-meche 5.2s ease-in-out infinite reverse; }
.hx .hx-yeux { transform-box: fill-box; transform-origin: center; transform: scale(1.12); }
.hx .hx-oeil { transform-box: fill-box; transform-origin: center; animation: hx-cligne 4.8s infinite; }
.hx .hx-iris { transition: transform .5s var(--ease); }
.hx .hx-ouverte { transform-box: fill-box; transform-origin: top center; transform: scaleY(calc(.15 + var(--bouche) * 2.6)); }
.hx .hx-levre-bas { transform: translateY(calc(var(--bouche) * 5px)); }
.hx .hx-reflet { animation: hx-reflet 4s ease-in-out infinite; }
.hx .hx-pensee { fill: rgba(233,211,162,.6); transition: opacity .4s; }
.hx[data-etat="ecoute"] .hx-tete, .hx[data-etat="ecoute"] .hx-chev-av { transform: rotate(-4deg); }
.hx[data-etat="reflexion"] .hx-iris { transform: translate(1.5px, -2px); }
.hx[data-etat="reflexion"] .hx-tete, .hx[data-etat="reflexion"] .hx-chev-av { transform: rotate(3deg); }
.hx[data-etat="reflexion"] .hx-pensee { opacity: 1; animation: hx-pensee 1.4s ease-in-out infinite; }
.hx[data-etat="parle"] .hx-sourcil { animation: hx-sourcil 2.2s ease-in-out infinite; }
@keyframes hx-souffle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
@keyframes hx-cheveux { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(.8deg) skewX(.6deg); } }
@keyframes hx-meche { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(2deg); } }
@keyframes hx-cligne { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes hx-reflet { 0%, 100% { opacity: .35; } 50% { opacity: .8; } }
@keyframes hx-pensee { 50% { transform: translateY(-3px); } }
@keyframes hx-sourcil { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
@keyframes hx-pulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.04); opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
.hx *, .hx::after, .lea__relances .lea__puce, .lea__appel-ecran { animation: none !important; }
}
@media (max-width: 560px) {
.lea__bouton { padding: 0 6px; min-height: 52px; width: 52px; justify-content: center; }
.lea__bouton-txt { display: none; }
.lea__panneau { inset: 0; width: 100%; height: 100dvh; border-radius: 0; border: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
}
@media (prefers-reduced-motion: reduce) { .lea__panneau { animation: none; } .lea__points i, .lea__micro-etat::before { animation: none; } }
.site-footer, .nl { --gold: var(--or); --gold-light: var(--or-clair); --ivory: var(--ivoire); --ivory-dim: var(--ivoire-2); --grey: #9a968f; --line: var(--ligne); --font-display: var(--f-display); --font-text: var(--f-texte); }
.site-footer { background: #070708; border-top: 1px solid var(--line); padding-top: clamp(64px, 8vw, 104px); }
.site-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 56px; }
.site-footer__brand { display: grid; gap: 18px; align-content: start; }
.site-footer__h { font-family: var(--font-text); font-size: 11px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
address { font-style: normal; color: var(--ivory-dim); margin-bottom: 12px; }
.site-footer__phone { display: inline-flex; gap: 8px; align-items: center; text-decoration: none; color: var(--ivory); min-height: 44px; }
.site-footer__social { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.site-footer__social a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; text-decoration: none; color: var(--ivory-dim); }
.site-footer__social a:hover { color: var(--gold-light); }
.site-footer__nl { padding-bottom: 48px; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; padding-block: 28px 40px; }
.site-footer__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13px; }
.site-footer__legal a, .linklike { color: var(--grey); text-decoration: none; background: none; border: 0; padding: 6px 0; cursor: pointer; font-size: 13px; }
.site-footer__legal a:hover, .linklike:hover { color: var(--ivory); }
@media (max-width: 900px) { .site-footer__top { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .site-footer__top { grid-template-columns: 1fr; } }
.nl { display: grid; gap: 12px; max-width: 520px; }
.nl .site-footer__h { margin-bottom: 0; }
.nl__texte, .nl__rgpd { margin: 0; }
.nl__ligne { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.nl input[type="text"], .nl input[type="email"] { min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: #0f0f10; color: var(--ivory); font: inherit; }
.nl input:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 1px; }
.nl__accord { align-items: flex-start; }
.nl .btn { justify-self: start; }
.nl__statut { margin: 0; color: var(--gold-light); }
.nl__statut[data-etat="erreur"] { color: #f2c0b8; }
.nl__rgpd a { color: var(--gold-light); }
@media (max-width: 520px) { .nl__ligne { grid-template-columns: 1fr; } }
.site-footer .rule { border: 0; border-top: 1px solid var(--ligne); margin: 0; } .site-footer address { line-height: 1.7; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.legal-dlg { width: min(860px, calc(100vw - 32px)); max-height: 86vh; padding: 0; border: 1px solid var(--ligne); border-radius: 18px; background: #0d0c0b; color: var(--ivoire); }
.legal-dlg::backdrop { background: rgba(0,0,0,.7); } .legal-dlg__corps { padding: 28px clamp(18px, 4vw, 44px) 36px; overflow: auto; max-height: 86vh; font-size: 14.5px; line-height: 1.7; }
.legal-dlg__corps table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .legal-dlg__corps td, .legal-dlg__corps th { border: 1px solid var(--ligne); padding: 6px 8px; vertical-align: top; }
.legal-dlg__corps a { color: var(--or-clair); } .legal-dlg__x { position: sticky; top: 10px; float: right; margin: 10px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ligne); background: #000; color: var(--ivoire); font-size: 22px; cursor: pointer; }
/* éléments masqués de la concierge (lecture vocale désactivée) */ .lea [hidden] { display: none !important; }
.npc { position: fixed; z-index: 90; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 16px); width: min(560px, calc(100vw - 24px)); box-sizing: border-box; padding: 18px 18px 16px; border: 1px solid rgba(214,179,111,.38); border-radius: 18px; background: rgba(10,9,7,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--ivoire, #f4efe6); box-shadow: 0 30px 80px -30px rgba(0,0,0,.95); opacity: 0; transition: opacity .45s ease, transform .45s ease; font-family: var(--f-texte); }
.npc.is-on { opacity: 1; transform: translate(-50%, 0); }
.npc[hidden] { display: none; }
.npc__titre { margin: 0 0 6px; font: 500 12px/1.3 var(--f-texte); letter-spacing: .22em; text-transform: uppercase; color: var(--or-clair, #e9d3a2); }
.npc__texte { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: rgba(244,239,230,.86); }
.npc__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.npc__btn { min-height: 46px; padding: 0 14px; border-radius: 999px; font: 600 12px/1.2 var(--f-texte); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; border: 1px solid var(--or, #d6b36f); }
.npc__btn--non { background: transparent; color: var(--ivoire, #f4efe6); }
.npc__btn--oui { background: var(--or, #d6b36f); color: #0b0a08; }
.npc__btn:focus-visible, .npc__plus:focus-visible { outline: 2px solid var(--or-clair, #e9d3a2); outline-offset: 3px; }
.npc__plus { display: inline-block; margin-top: 12px; font-size: 12.5px; color: var(--or-clair, #e9d3a2); background: none; border: 0; padding: 4px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-family: inherit; }
html.est-rtl .npc { text-align: right; }
@media (max-width: 420px) { .npc { padding: 16px 14px 14px; } .npc__texte { font-size: 13px; } .npc__btn { letter-spacing: .06em; } }
@media (prefers-reduced-motion: reduce) { .npc { transition: none; } }
/* ---------------- Sélecteur de langues (à côté du logo) ---------------- */
.np-langues { position: relative; display: inline-flex; margin-inline-start: 14px; z-index: 60; }
.np-langues__btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; border: 1px solid rgba(214,179,111,.55); border-radius: 999px; background: rgba(7,7,6,.45); color: var(--ivoire); font: 600 11px/1 var(--f-texte); letter-spacing: .14em; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.np-langues__btn:hover, .np-langues__btn[aria-expanded="true"] { border-color: var(--or-clair); }
.np-langues__btn:focus-visible, .np-langues__panneau button:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 2px; }
.np-langues__btn svg { width: 9px; height: 6px; }
.np-langues__btn .np-langues__drapeau { font-size: 15px; letter-spacing: 0; }
.np-langues__panneau { position: absolute; inset-inline-start: 0; top: calc(100% + 10px); width: min(330px, calc(100vw - 32px)); max-height: min(70vh, 520px); overflow: auto; overscroll-behavior: contain; padding: 8px; border: 1px solid rgba(214,179,111,.45); border-radius: 16px; background: rgba(10,9,8,.97); box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.np-langues__panneau ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.np-langues__panneau button { width: 100%; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 10px 10px; border: 0; border-radius: 10px; background: none; color: var(--ivoire); font: 500 14px/1.25 var(--f-texte); text-align: start; cursor: pointer; }
.np-langues__panneau button:hover { background: rgba(214,179,111,.1); }
.np-langues__panneau button[aria-current="true"] { background: rgba(214,179,111,.16); color: var(--or-clair); }
.np-langues__panneau .np-langues__drapeau { font-size: 19px; line-height: 1; font-weight: 600; font-size: 13px; color: var(--or-clair); }
.np-langues__panneau .np-langues__drapeau:not(:empty) { font-size: 19px; }
.np-langues__fr { font-size: 11px; color: var(--ivoire-2); letter-spacing: .04em; }
@media (max-width: 760px) { .np-langues { margin-inline-start: 8px; } .np-langues__btn { height: 30px; padding: 0 9px; gap: 5px; font-size: 10px; } .np-langues__panneau { position: fixed; left: 16px; right: 16px; top: 64px; width: auto; } }
/* Lecture de droite à gauche (arabe, ourdou, persan) */
html.est-rtl body { text-align: start; }
html.est-rtl .seuil__progres { right: auto; left: clamp(12px, 2vw, 28px); }
html.est-rtl .seuil__passer { right: auto; left: 14px; text-align: left; }
html.est-rtl svg[viewBox="0 0 11 20"], html.est-rtl .pastille svg { transform: scaleX(-1); }
html.est-rtl .np-langues__panneau button { text-align: right; }