/* --- Page d'accueil : Étincelles de Quartz --- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    font-family: 'Lexend', sans-serif;
    color: #fff;
    background: #060d1a;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Ciel nocturne --- */
.ciel {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background:
        radial-gradient(ellipse 90% 55% at 18% 12%, rgba(10, 28, 42, 0.45) 0%, transparent 58%),
        radial-gradient(ellipse 75% 50% at 82% 18%, rgba(8, 22, 38, 0.35) 0%, transparent 52%),
        radial-gradient(ellipse 110% 70% at 50% 105%, #03060c 0%, transparent 48%),
        radial-gradient(ellipse 130% 100% at 50% 50%, transparent 35%, rgba(0, 0, 0, 0.55) 100%),
        linear-gradient(185deg, #000103 0%, #020408 38%, #040810 68%, #050a11 100%);
}

.ciel__profondeur {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    --opacite-cible: 0.7;
    background:
        radial-gradient(ellipse 60% 40% at 30% 60%, rgba(12, 35, 50, 0.25) 0%, transparent 65%),
        radial-gradient(ellipse 55% 35% at 72% 45%, rgba(15, 40, 55, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 100% 30% at 50% 0%, rgba(20, 50, 45, 0.08) 0%, transparent 70%);
    animation: apparition 0.8s ease-out both;
    pointer-events: none;
}

/* --- Champ d'étoiles --- */
.etoiles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.etoiles--arriere {
    z-index: 1;
}

.etoiles--avant {
    z-index: 3;
}

.etoile {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    opacity: 0;
    box-shadow: 0 0 calc(var(--s) * 2) rgba(255, 255, 255, calc(var(--o) * 0.35));
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: opacity, filter;
    animation:
        apparition 0.7s ease-out both,
        etoile-scintille var(--t) ease-in-out calc(0.7s + var(--d)) infinite alternate both;
    --opacite-cible: var(--o);
}

/* Avant-plan : plus grosses, plus lumineuses */
.etoile--proche {
    background: rgba(255, 255, 255, 1);
    box-shadow:
        0 0 calc(var(--s) * 2.5) rgba(255, 255, 255, calc(var(--o) * 0.65)),
        0 0 calc(var(--s) * 5) rgba(210, 240, 255, calc(var(--o) * 0.3));
    animation:
        apparition 0.8s ease-out both,
        etoile-scintille-proche var(--t) ease-in-out calc(0.8s + var(--d)) infinite alternate both;
}

/* — Arrière-plan (1px – 2px) — */
.etoiles--arriere .etoile:nth-child(1)  { --x: 6%;  --y: 9%;  --s: 1px;   --o: 0.42; --d: 0s;    --t: 3.6s; }
.etoiles--arriere .etoile:nth-child(2)  { --x: 14%; --y: 22%; --s: 1.5px; --o: 0.68; --d: -0.8s; --t: 4.8s; }
.etoiles--arriere .etoile:nth-child(3)  { --x: 23%; --y: 7%;  --s: 1px;   --o: 0.55; --d: -1.5s; --t: 5.4s; }
.etoiles--arriere .etoile:nth-child(4)  { --x: 31%; --y: 31%; --s: 2px;   --o: 0.75; --d: -2.2s; --t: 3.2s; }
.etoiles--arriere .etoile:nth-child(5)  { --x: 39%; --y: 14%; --s: 1px;   --o: 0.38; --d: -0.4s; --t: 6.1s; }
.etoiles--arriere .etoile:nth-child(6)  { --x: 47%; --y: 26%; --s: 1.5px; --o: 0.62; --d: -3.1s; --t: 4.2s; }
.etoiles--arriere .etoile:nth-child(7)  { --x: 54%; --y: 8%;  --s: 1px;   --o: 0.48; --d: -1.9s; --t: 5.8s; }
.etoiles--arriere .etoile:nth-child(8)  { --x: 62%; --y: 19%; --s: 2px;   --o: 0.82; --d: -2.7s; --t: 3.9s; }
.etoiles--arriere .etoile:nth-child(9)  { --x: 71%; --y: 33%; --s: 1px;   --o: 0.44; --d: -0.6s; --t: 6.5s; }
.etoiles--arriere .etoile:nth-child(10) { --x: 79%; --y: 11%; --s: 1.5px; --o: 0.58; --d: -3.8s; --t: 4.5s; }
.etoiles--arriere .etoile:nth-child(11) { --x: 88%; --y: 24%; --s: 1px;   --o: 0.35; --d: -1.2s; --t: 5.1s; }
.etoiles--arriere .etoile:nth-child(12) { --x: 95%; --y: 6%;  --s: 1.5px; --o: 0.52; --d: -2.5s; --t: 4.1s; }
.etoiles--arriere .etoile:nth-child(13) { --x: 4%;  --y: 41%; --s: 1px;   --o: 0.46; --d: -4.2s; --t: 5.6s; }
.etoiles--arriere .etoile:nth-child(14) { --x: 12%; --y: 53%; --s: 2px;   --o: 0.7;  --d: -0.9s; --t: 3.4s; }
.etoiles--arriere .etoile:nth-child(15) { --x: 21%; --y: 47%; --s: 1px;   --o: 0.4;  --d: -3.4s; --t: 6.8s; }
.etoiles--arriere .etoile:nth-child(16) { --x: 29%; --y: 62%; --s: 1.5px; --o: 0.6;  --d: -1.7s; --t: 4.6s; }
.etoiles--arriere .etoile:nth-child(17) { --x: 37%; --y: 38%; --s: 1px;   --o: 0.5;  --d: -2.9s; --t: 5.3s; }
.etoiles--arriere .etoile:nth-child(18) { --x: 45%; --y: 55%; --s: 1.5px; --o: 0.65; --d: -0.3s; --t: 3.8s; }
.etoiles--arriere .etoile:nth-child(19) { --x: 53%; --y: 44%; --s: 1px;   --o: 0.36; --d: -4.5s; --t: 6.2s; }
.etoiles--arriere .etoile:nth-child(20) { --x: 61%; --y: 58%; --s: 2px;   --o: 0.78; --d: -1.4s; --t: 4.3s; }
.etoiles--arriere .etoile:nth-child(21) { --x: 69%; --y: 41%; --s: 1px;   --o: 0.43; --d: -3.6s; --t: 5.9s; }
.etoiles--arriere .etoile:nth-child(22) { --x: 77%; --y: 52%; --s: 1.5px; --o: 0.56; --d: -2.1s; --t: 4.9s; }
.etoiles--arriere .etoile:nth-child(23) { --x: 85%; --y: 36%; --s: 1px;   --o: 0.48; --d: -0.7s; --t: 6.4s; }
.etoiles--arriere .etoile:nth-child(24) { --x: 93%; --y: 49%; --s: 1.5px; --o: 0.64; --d: -3.2s; --t: 3.7s; }
.etoiles--arriere .etoile:nth-child(25) { --x: 8%;  --y: 71%; --s: 1px;   --o: 0.39; --d: -4.8s; --t: 5.5s; }
.etoiles--arriere .etoile:nth-child(26) { --x: 18%; --y: 84%; --s: 1.5px; --o: 0.54; --d: -1.1s; --t: 4.4s; }
.etoiles--arriere .etoile:nth-child(27) { --x: 34%; --y: 76%; --s: 1px;   --o: 0.45; --d: -2.8s; --t: 6s; }
.etoiles--arriere .etoile:nth-child(28) { --x: 52%; --y: 82%; --s: 2px;   --o: 0.72; --d: -0.5s; --t: 3.5s; }
.etoiles--arriere .etoile:nth-child(29) { --x: 74%; --y: 74%; --s: 1px;   --o: 0.41; --d: -3.9s; --t: 5.7s; }
.etoiles--arriere .etoile:nth-child(30) { --x: 91%; --y: 88%; --s: 1.5px; --o: 0.5;  --d: -2.4s; --t: 4.7s; }

/* — Avant-plan (2px – 4px) — */
.etoiles--avant .etoile:nth-child(1)  { --x: 10%; --y: 16%; --s: 2.5px; --o: 0.78; --d: -0.5s;  --t: 4.2s; }
.etoiles--avant .etoile:nth-child(2)  { --x: 27%; --y: 5%;  --s: 3px;   --o: 0.92; --d: -2.3s;  --t: 5.6s; }
.etoiles--avant .etoile:nth-child(3)  { --x: 43%; --y: 21%; --s: 2px;   --o: 0.7;  --d: -1.1s;  --t: 3.9s; }
.etoiles--avant .etoile:nth-child(4)  { --x: 58%; --y: 34%; --s: 4px;   --o: 1;    --d: -3.7s;  --t: 6.3s; }
.etoiles--avant .etoile:nth-child(5)  { --x: 73%; --y: 15%; --s: 2.5px; --o: 0.85; --d: -0.9s;  --t: 4.8s; }
.etoiles--avant .etoile:nth-child(6)  { --x: 86%; --y: 42%; --s: 3px;   --o: 0.88; --d: -2.8s;  --t: 5.1s; }
.etoiles--avant .etoile:nth-child(7)  { --x: 3%;  --y: 28%; --s: 2px;   --o: 0.72; --d: -4.1s;  --t: 6.7s; }
.etoiles--avant .etoile:nth-child(8)  { --x: 17%; --y: 39%; --s: 3.5px; --o: 0.95; --d: -1.6s;  --t: 4.4s; }
.etoiles--avant .etoile:nth-child(9)  { --x: 33%; --y: 50%; --s: 2px;   --o: 0.68; --d: -3.3s;  --t: 5.9s; }
.etoiles--avant .etoile:nth-child(10) { --x: 49%; --y: 8%;  --s: 2.5px; --o: 0.82; --d: -0.2s;  --t: 3.6s; }
.etoiles--avant .etoile:nth-child(11) { --x: 65%; --y: 27%; --s: 3px;   --o: 0.9;  --d: -2.5s;  --t: 5.4s; }
.etoiles--avant .etoile:nth-child(12) { --x: 81%; --y: 63%; --s: 2px;   --o: 0.74; --d: -4.6s;  --t: 6.1s; }
.etoiles--avant .etoile:nth-child(13) { --x: 96%; --y: 35%; --s: 2.5px; --o: 0.8;  --d: -1.3s;  --t: 4.1s; }
.etoiles--avant .etoile:nth-child(14) { --x: 7%;  --y: 57%; --s: 4px;   --o: 0.98; --d: -3.9s;  --t: 5.7s; }
.etoiles--avant .etoile:nth-child(15) { --x: 24%; --y: 68%; --s: 2.5px; --o: 0.76; --d: -0.7s;  --t: 6.5s; }
.etoiles--avant .etoile:nth-child(16) { --x: 40%; --y: 43%; --s: 3px;   --o: 0.86; --d: -2.1s;  --t: 4.6s; }
.etoiles--avant .etoile:nth-child(17) { --x: 56%; --y: 61%; --s: 2px;   --o: 0.7;  --d: -4.3s;  --t: 5.2s; }
.etoiles--avant .etoile:nth-child(18) { --x: 70%; --y: 48%; --s: 3.5px; --o: 0.94; --d: -1.8s;  --t: 3.8s; }
.etoiles--avant .etoile:nth-child(19) { --x: 84%; --y: 78%; --s: 2.5px; --o: 0.8;  --d: -3.5s;  --t: 6.8s; }
.etoiles--avant .etoile:nth-child(20) { --x: 15%; --y: 12%; --s: 3px;   --o: 0.88; --d: -0.4s;  --t: 4.9s; }
.etoiles--avant .etoile:nth-child(21) { --x: 36%; --y: 33%; --s: 2px;   --o: 0.66; --d: -2.6s;  --t: 5.5s; }
.etoiles--avant .etoile:nth-child(22) { --x: 51%; --y: 72%; --s: 4px;   --o: 1;    --d: -1.5s;  --t: 4.3s; }
.etoiles--avant .etoile:nth-child(23) { --x: 67%; --y: 6%;  --s: 2.5px; --o: 0.84; --d: -4.8s;  --t: 6.2s; }
.etoiles--avant .etoile:nth-child(24) { --x: 78%; --y: 56%; --s: 3px;   --o: 0.9;  --d: -0.8s;  --t: 5.8s; }
.etoiles--avant .etoile:nth-child(25) { --x: 92%; --y: 18%; --s: 2px;   --o: 0.72; --d: -3.1s;  --t: 4.7s; }
.etoiles--avant .etoile:nth-child(26) { --x: 5%;  --y: 78%; --s: 3px;   --o: 0.86; --d: -2.4s;  --t: 6.4s; }
.etoiles--avant .etoile:nth-child(27) { --x: 22%; --y: 91%; --s: 2.5px; --o: 0.75; --d: -4.5s;  --t: 5.3s; }
.etoiles--avant .etoile:nth-child(28) { --x: 46%; --y: 85%; --s: 3.5px; --o: 0.96; --d: -1.2s;  --t: 4s; }
.etoiles--avant .etoile:nth-child(29) { --x: 63%; --y: 92%; --s: 2px;   --o: 0.68; --d: -3.6s;  --t: 6.6s; }
.etoiles--avant .etoile:nth-child(30) { --x: 88%; --y: 86%; --s: 3px;   --o: 0.92; --d: -2.9s;  --t: 5s; }

@keyframes etoile-scintille {
    0%   { filter: brightness(0.65); }
    100% { filter: brightness(1.25); }
}

@keyframes etoile-scintille-proche {
    0%   { opacity: calc(var(--o) * 0.35); filter: brightness(0.7); }
    100% { opacity: var(--o); filter: brightness(1.45); }
}

@keyframes apparition {
    0%   { opacity: 0; }
    100% { opacity: var(--opacite-cible, 1); }
}

/* --- Aurore boréale — majestueuse et nocturne --- */
.aurore {
    position: absolute;
    inset: 0;
    left: 0;
    right: 0;
    width: 100vw;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.aurore__voile {
    position: absolute;
    left: 0;
    right: 0;
    width: 100vw;
    filter: blur(65px);
    mix-blend-mode: screen;
    will-change: transform, opacity;
    opacity: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

.aurore__rideau,
.aurore__lueur {
    opacity: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

.aurore__voile--1 {
    height: 52%;
    top: -4%;
    --opacite-cible: 0.58;
    background: linear-gradient(
        90deg,
        transparent 0%,
        transparent 6%,
        rgba(15, 220, 125, 0.28) 12%,
        rgba(255, 250, 228, 0.22) 16%,
        rgba(255, 242, 185, 0.32) 20%,
        rgba(0, 255, 145, 0.42) 24%,
        rgba(20, 235, 130, 0.35) 27%,
        transparent 32%,
        transparent 40%,
        rgba(10, 210, 115, 0.25) 46%,
        rgba(255, 252, 238, 0.28) 50%,
        rgba(255, 245, 195, 0.34) 53%,
        rgba(0, 255, 140, 0.4) 56%,
        rgba(25, 220, 125, 0.3) 59%,
        transparent 64%,
        transparent 74%,
        rgba(15, 200, 110, 0.22) 80%,
        rgba(255, 248, 210, 0.26) 84%,
        rgba(0, 245, 150, 0.32) 87%,
        transparent 94%,
        transparent 100%
    );
    animation:
        aurore-respire-a 28s ease-in-out 0.6s infinite alternate both,
        apparition 0.6s ease-out both;
}

.aurore__voile--2 {
    height: 44%;
    top: 12%;
    --opacite-cible: 0.52;
    filter: blur(58px);
    background: linear-gradient(
        90deg,
        transparent 0%,
        transparent 8%,
        rgba(20, 215, 120, 0.24) 14%,
        rgba(255, 251, 235, 0.2) 18%,
        rgba(255, 244, 190, 0.3) 22%,
        rgba(0, 255, 138, 0.38) 26%,
        transparent 32%,
        transparent 44%,
        rgba(15, 205, 115, 0.22) 50%,
        rgba(255, 252, 240, 0.26) 53%,
        rgba(255, 246, 200, 0.32) 56%,
        rgba(10, 240, 130, 0.36) 59%,
        rgba(30, 210, 120, 0.28) 62%,
        transparent 67%,
        transparent 78%,
        rgba(0, 230, 125, 0.2) 84%,
        rgba(255, 250, 225, 0.22) 88%,
        transparent 95%,
        transparent 100%
    );
    animation:
        aurore-respire-b 32s ease-in-out -10s infinite alternate both,
        apparition 0.6s ease-out both;
}

.aurore__voile--3 {
    height: 40%;
    top: 22%;
    --opacite-cible: 0.48;
    filter: blur(72px);
    background: linear-gradient(
        90deg,
        transparent 0%,
        transparent 10%,
        rgba(25, 200, 115, 0.22) 18%,
        rgba(255, 249, 220, 0.2) 22%,
        rgba(255, 252, 235, 0.28) 26%,
        rgba(0, 255, 142, 0.35) 30%,
        rgba(40, 210, 130, 0.26) 33%,
        transparent 37%,
        transparent 50%,
        rgba(15, 220, 120, 0.2) 56%,
        rgba(255, 243, 190, 0.26) 59%,
        rgba(255, 250, 228, 0.3) 62%,
        rgba(0, 245, 135, 0.34) 65%,
        transparent 73%,
        transparent 84%,
        rgba(20, 190, 105, 0.18) 90%,
        transparent 100%
    );
    animation:
        aurore-respire-c 26s ease-in-out -18s infinite alternate both,
        apparition 0.6s ease-out both;
}

.aurore__voile--4 {
    height: 32%;
    top: 6%;
    --opacite-cible: 0.45;
    filter: blur(55px);
    background: linear-gradient(
        90deg,
        transparent 0%,
        transparent 12%,
        rgba(10, 230, 125, 0.26) 20%,
        rgba(255, 247, 205, 0.24) 24%,
        rgba(255, 253, 240, 0.3) 28%,
        rgba(0, 255, 140, 0.36) 32%,
        transparent 39%,
        transparent 52%,
        rgba(20, 215, 115, 0.18) 58%,
        rgba(255, 245, 195, 0.26) 61%,
        rgba(255, 252, 238, 0.28) 64%,
        rgba(15, 225, 120, 0.3) 67%,
        transparent 71%,
        transparent 82%,
        rgba(0, 240, 130, 0.2) 88%,
        transparent 100%
    );
    animation:
        aurore-respire-d 30s ease-in-out -22s infinite alternate both,
        apparition 0.6s ease-out both;
}

/* Rideaux — émeraude vibrant, cœurs crème-jaune, creux sombres */
.aurore__rideau {
    position: absolute;
    left: 0;
    right: 0;
    width: 100vw;
    top: -5%;
    height: 110%;
    filter: blur(60px);
    mix-blend-mode: screen;
    transform-origin: center center;
    will-change: transform;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 5%,
            rgba(15, 225, 125, 0.26) 10%,
            rgba(255, 244, 195, 0.28) 14%,
            rgba(0, 255, 140, 0.38) 17%,
            rgba(25, 220, 130, 0.3) 20%,
            transparent 24%,
            transparent 34%,
            rgba(10, 210, 115, 0.22) 40%,
            rgba(255, 248, 210, 0.26) 43%,
            rgba(255, 252, 238, 0.3) 46%,
            rgba(0, 245, 135, 0.34) 49%,
            transparent 53%,
            transparent 63%,
            rgba(20, 230, 125, 0.24) 69%,
            rgba(255, 246, 200, 0.28) 72%,
            rgba(0, 255, 145, 0.36) 75%,
            transparent 82%,
            transparent 90%,
            rgba(15, 200, 110, 0.18) 95%,
            transparent 100%
        ),
        linear-gradient(
            180deg,
            transparent 0%,
            transparent 15%,
            rgba(20, 215, 120, 0.2) 28%,
            rgba(255, 243, 185, 0.28) 38%,
            rgba(255, 252, 240, 0.32) 44%,
            rgba(255, 246, 200, 0.3) 48%,
            rgba(0, 255, 138, 0.34) 52%,
            rgba(25, 220, 125, 0.24) 56%,
            transparent 64%,
            transparent 76%,
            rgba(15, 190, 105, 0.12) 86%,
            transparent 100%
        );
}

.aurore__rideau--1 {
    --opacite-cible: 0.5;
    animation:
        rideau-respire 24s ease-in-out 0.6s infinite alternate both,
        apparition 0.6s ease-out both;
}

.aurore__rideau--2 {
    --opacite-cible: 0.45;
    filter: blur(68px);
    animation:
        rideau-respire 30s ease-in-out -8s infinite alternate both,
        apparition 0.6s ease-out both;
}

.aurore__rideau--3 {
    --opacite-cible: 0.42;
    animation:
        rideau-respire 22s ease-in-out -14s infinite alternate both,
        apparition 0.6s ease-out both;
}

.aurore__rideau--4 {
    --opacite-cible: 0.48;
    filter: blur(55px);
    animation:
        rideau-respire 28s ease-in-out -20s infinite alternate both,
        apparition 0.6s ease-out both;
}

/* Lueur à l'horizon */
.aurore__lueur {
    position: absolute;
    left: 0;
    right: 0;
    width: 100vw;
    height: 38%;
    top: 0;
    --opacite-cible: 0.5;
    filter: blur(70px);
    mix-blend-mode: screen;
    background: linear-gradient(
        90deg,
        transparent 0%,
        transparent 10%,
        rgba(15, 210, 115, 0.22) 18%,
        rgba(255, 244, 195, 0.24) 22%,
        rgba(255, 252, 240, 0.28) 26%,
        rgba(0, 255, 140, 0.36) 30%,
        transparent 38%,
        transparent 48%,
        rgba(20, 225, 125, 0.2) 54%,
        rgba(255, 246, 205, 0.26) 57%,
        rgba(255, 252, 238, 0.3) 60%,
        rgba(0, 245, 135, 0.34) 63%,
        transparent 68%,
        transparent 78%,
        rgba(10, 200, 110, 0.16) 84%,
        rgba(255, 248, 215, 0.2) 89%,
        transparent 96%,
        transparent 100%
    );
    animation:
        lueur-respire 26s ease-in-out -6s infinite alternate both,
        apparition 0.6s ease-out both;
}

@keyframes aurore-respire-a {
    0%   { transform: translateX(-22vw) scaleY(1); }
    100% { transform: translateX(20vw) scaleY(1.02); }
}

@keyframes aurore-respire-b {
    0%   { transform: translateX(18vw) scaleY(1.015); }
    100% { transform: translateX(-24vw) scaleY(0.985); }
}

@keyframes aurore-respire-c {
    0%   { transform: translateX(-20vw) scaleY(0.99); }
    100% { transform: translateX(22vw) scaleY(1.02); }
}

@keyframes aurore-respire-d {
    0%   { transform: translateX(16vw) scaleY(1); }
    100% { transform: translateX(-18vw) scaleY(1.015); }
}

@keyframes rideau-respire {
    0%   { transform: translateX(-26vw) scaleY(1); }
    100% { transform: translateX(24vw) scaleY(1.025); }
}

@keyframes lueur-respire {
    0%   { transform: translateX(-18vw); }
    100% { transform: translateX(20vw); }
}

/* --- Mots filigrane --- */
.filigrane {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.filigrane__mot {
    position: absolute;
    font-weight: 100;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.21);
    opacity: 0.68;
    transform: none;
}

.filigrane__mot--1 {
    top: 8%;
    left: -2%;
    font-size: clamp(3rem, 9vw, 7rem);
}

.filigrane__mot--2 {
    top: 22%;
    right: -4%;
    font-size: clamp(2.2rem, 6.5vw, 5rem);
}

.filigrane__mot--3 {
    top: 42%;
    left: 8%;
    font-size: clamp(1.8rem, 5vw, 3.8rem);
    opacity: 0.45;
}

.filigrane__mot--4 {
    bottom: 28%;
    right: 6%;
    font-size: clamp(2rem, 5.5vw, 4.2rem);
}

.filigrane__mot--5 {
    bottom: 12%;
    left: 15%;
    font-size: clamp(2.5rem, 7vw, 5.5rem);
    opacity: 0.38;
}

/* --- En-tête --- */
.entete {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 1.75rem 2rem;
}

.entete__logo {
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
}

/* --- Contenu principal --- */
.hero {
    position: relative;
    z-index: 5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5rem 1.5rem 3.5rem;
}

.hero__quartz-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.hero__quartz-wrap::before {
    content: '';
    position: absolute;
    width: clamp(140px, 28vw, 220px);
    height: clamp(140px, 28vw, 220px);
    border-radius: 50%;
    opacity: 0;
    --opacite-cible: 0.55;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.07) 0%,
        rgba(180, 255, 220, 0.05) 35%,
        rgba(120, 220, 180, 0.025) 55%,
        transparent 72%
    );
    filter: blur(22px);
    pointer-events: none;
    transform: translateZ(0);
    animation:
        cristal-respire 7s ease-in-out 0.5s infinite alternate both,
        apparition 0.5s ease-out both;
}

@keyframes cristal-respire {
    0%   { transform: translateZ(0) scale(1); }
    100% { transform: translateZ(0) scale(1.04); }
}

.hero__quartz {
    position: relative;
    width: clamp(160px, 30vw, 260px);
    height: auto;
    object-fit: contain;
    animation:
        levitation 5s ease-in-out 0.3s infinite both,
        etincelle-quartz 3s ease-in-out 0.3s infinite both;
}

@keyframes levitation {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

@keyframes etincelle-quartz {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.35))
                drop-shadow(0 0 18px rgba(80, 255, 170, 0.25))
                drop-shadow(0 0 32px rgba(40, 200, 130, 0.15));
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.5))
                drop-shadow(0 0 28px rgba(60, 255, 160, 0.38))
                drop-shadow(0 0 48px rgba(20, 220, 120, 0.22));
    }
}

/* --- Typographie --- */
.hero__titre {
    margin: 0 0 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.hero__titre-principal {
    font-weight: 600;
    font-size: clamp(1.35rem, 3.5vw, 2rem);
    letter-spacing: 0.04em;
    color: #fff;
}

.hero__titre-sous {
    font-weight: 300;
    font-size: clamp(1rem, 2.5vw, 1.35rem);
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.92);
}

/* --- Deux volets --- */
.volets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 3vw, 1.75rem);
    width: min(920px, 94vw);
    margin-top: 0.5rem;
}

@media (min-width: 769px) {
    .volets {
        width: min(1140px, 94vw);
        column-gap: clamp(5rem, 11vw, 9.5rem);
        row-gap: clamp(1rem, 3vw, 1.75rem);
    }
}

.volet {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(1.6rem, 4.2vw, 2.75rem) clamp(1.85rem, 5vw, 3.25rem);
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

@media (min-width: 769px) {
    .volet {
        padding: clamp(1.85rem, 3.8vw, 3rem) clamp(2rem, 4.5vw, 3.5rem);
    }
}

.volet--web {
    box-shadow: inset 0 0 0 1px rgba(60, 255, 180, 0.08);
}

.volet--sono {
    box-shadow: inset 0 0 0 1px rgba(255, 210, 120, 0.08);
}

.volet__titre {
    margin: 0 0 0.85rem;
    font-weight: 600;
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    letter-spacing: 0.04em;
    color: #fff;
}

.volet--web .volet__titre {
    color: rgba(180, 255, 220, 0.95);
}

.volet--sono .volet__titre {
    color: rgba(255, 230, 170, 0.95);
}

.volet__texte {
    margin: 0 0 1.15rem;
    font-weight: 300;
    font-size: clamp(0.78rem, 1.7vw, 0.88rem);
    line-height: 1.65;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.72);
    flex: 1;
}

.inscription--volet {
    width: 100%;
    margin-top: 0.15rem;
}

.inscription--volet .inscription__groupe {
    width: 100%;
}

.hero__instruction {
    margin: 0 0 1.25rem;
    font-weight: 300;
    font-size: clamp(0.78rem, 1.8vw, 0.9rem);
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.72);
}

/* --- Formulaire d'inscription --- */
.inscription {
    width: min(480px, 92vw);
}

.inscription__groupe {
    display: flex;
    align-items: stretch;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.inscription__groupe input {
    flex: 1;
    min-width: 0;
    padding: 0.85rem 1.25rem;
    border: none;
    background: transparent;
    font-family: inherit;
    font-weight: 300;
    font-size: 0.88rem;
    color: #fff;
    outline: none;
}

.inscription__groupe input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.inscription__groupe button {
    flex-shrink: 0;
    padding: 0.85rem 1.5rem;
    border: none;
    border-radius: 50px;
    background: #fff;
    color: #0a0f18;
    font-family: inherit;
    font-weight: 400;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.inscription__groupe button:hover,
.inscription__groupe button:focus-visible {
    background: rgba(255, 255, 255, 0.92);
    outline: none;
}

.inscription__groupe button:active {
    transform: scale(0.98);
}

.inscription__retour {
    margin: 0.85rem 0 0;
    font-size: 0.78rem;
    font-weight: 300;
    letter-spacing: 0.03em;
    color: rgba(140, 230, 180, 0.9);
}

.inscription__retour--erreur {
    color: rgba(255, 160, 160, 0.9);
}

.inscription__groupe button:disabled {
    opacity: 0.65;
    cursor: wait;
}

/* --- Badge hébergement vert --- */
.badge-hebergement {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 10;
    line-height: 0;
    opacity: 0.88;
    transition: opacity 0.3s ease;
}

.badge-hebergement:hover,
.badge-hebergement:focus-visible {
    opacity: 1;
    outline: none;
}

.badge-hebergement img {
    display: block;
    width: clamp(90px, 22vw, 130px);
    height: auto;
}

/* --- Étoile décorative --- */
.etincelle-decor {
    position: fixed;
    bottom: 1.75rem;
    left: 1.75rem;
    z-index: 10;
    opacity: 0;
    color: rgba(255, 255, 255, 0.28);
    animation: etincelle-decor-flash 5s ease-in-out 0.4s infinite alternate both;
}

@keyframes etincelle-decor-flash {
    0%   { opacity: 0; transform: scale(1); }
    12%  { opacity: 0.3; }
    50%  { opacity: 0.7; transform: scale(1.15); }
    100% { opacity: 0.3; transform: scale(1); }
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .volets {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .entete {
        padding: 1.25rem 1.25rem;
    }

    .inscription__groupe {
        flex-direction: column;
        border-radius: 28px;
        padding: 0.35rem;
        gap: 0.35rem;
    }

    .inscription__groupe input {
        text-align: center;
        padding: 0.75rem 1rem;
    }

    .inscription__groupe button {
        width: 100%;
        border-radius: 28px;
    }

    .filigrane__mot {
        opacity: 0.3;
    }

    .badge-hebergement {
        bottom: 1rem;
        right: 1rem;
    }

    .etincelle-decor {
        bottom: 1.25rem;
        left: 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__quartz {
        animation: none;
    }

    .hero__quartz-wrap::before,
    .aurore__voile,
    .aurore__rideau,
    .aurore__lueur,
    .ciel__profondeur {
        animation: none;
        opacity: var(--opacite-cible, 1);
    }

    .etoile,
    .etoile--proche {
        animation: none;
        opacity: var(--o);
    }

    .etincelle-decor {
        animation: none;
        opacity: 0.3;
    }
}