@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,700;1,300&family=Hanken+Grotesk:wght@400;500&display=swap");

.detail-projet {
    --acc: #A78BFA; /* couleur d'accent, mise à jour par le JS selon la zone */
    --serif: "Fraunces", Georgia, serif; --sans: "Hanken Grotesk", system-ui, sans-serif;
    position: relative; height: 100dvh; overflow: hidden;
    background: #09090B; color: #FAFAFA; font-family: var(--sans);
}
html:has(.detail-projet) { overflow: hidden; }
#scene-3d { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.voile { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0, 0, 0, .7)); }
.flash { position: absolute; inset: 0; z-index: 30; background: #e9e3ff; opacity: 0; pointer-events: none; }

/* texte de chaque zone : apparition floue, comme une mise au point */
.zone {
    position: absolute; z-index: 5; left: 6vw; bottom: 14vh; width: min(560px, 88vw); pointer-events: none;
    opacity: 0; filter: blur(14px); transform: translateY(30px) scale(.97);
    transition: opacity 1.2s cubic-bezier(.2, .8, .2, 1), filter 1.2s, transform 1.2s cubic-bezier(.2, .8, .2, 1);
}
.zone.active { opacity: 1; filter: none; transform: none; pointer-events: auto; }
.label { margin: 0 0 12px; color: var(--acc); font-weight: 500; transition: color .6s; }
h1, h2 { margin: 0; font-family: var(--serif); text-wrap: balance; }
h1 { font-size: clamp(48px, 9vw, 120px); line-height: .92; letter-spacing: -.03em; font-weight: 700; }
h2 { font-size: clamp(32px, 4.5vw, 56px); font-style: italic; font-weight: 300; margin-bottom: 18px; }
.date { display: block; margin-top: 18px; opacity: .65; }
.texte { margin: 0; font-size: 18px; line-height: 1.7; max-height: 38vh; overflow: auto; text-shadow: 0 2px 20px #000; }
.techs { display: flex; flex-wrap: wrap; gap: 10px; }
.techs span { padding: 9px 16px; border: 1px solid var(--acc); border-radius: 999px; background: rgba(0, 0, 0, .4); backdrop-filter: blur(8px); transition: border-color .6s; }
.galerie { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 18px; }
.galerie figure { margin: 0; height: 130px; border-radius: 10px; overflow: hidden; transition: transform .4s; }
.galerie figure:hover { transform: scale(1.05) rotate(-1.5deg); }
.galerie img { width: 100%; height: 100%; object-fit: cover; display: block; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }

.bouton {
    display: inline-flex; padding: 13px 26px; border-radius: 999px; cursor: pointer; text-decoration: none;
    color: #eef0f7; background: rgba(0, 0, 0, .5); border: 1px solid var(--acc);
    font: 500 15px var(--sans); backdrop-filter: blur(10px); transition: background .3s, color .3s, transform .3s, border-color .6s;
}
.bouton:hover { background: var(--acc); color: #05070d; transform: translateY(-2px); }
.bouton:focus-visible, .son:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.guide { position: absolute; z-index: 10; right: 6vw; bottom: 14vh; opacity: 0; pointer-events: none; transition: opacity 1s, background .3s, color .3s, transform .3s, border-color .6s; }
.guide.visible { opacity: 1; pointer-events: auto; }
.astuce { position: absolute; z-index: 10; left: 50%; bottom: 3.5vh; transform: translateX(-50%); margin: 0; font-size: 13px; opacity: 0; transition: opacity 1.4s; text-align: center; }
.astuce.visible { opacity: .55; }
.son { position: absolute; z-index: 10; bottom: 24px; right: 24px; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; color: #eef0f7; background: rgba(0, 0, 0, .4); border: 1px solid rgba(255, 255, 255, .25); font-size: 18px; }
.son.coupe { opacity: .55; }

@media (max-width: 700px) { .zone { bottom: 22vh; } .guide { right: 50%; transform: translateX(50%); bottom: 10vh; } .astuce { display: none; } }
@media (prefers-reduced-motion: reduce) { .zone { transition-duration: .01s; } }

/* le texte HTML reste lisible par les lecteurs d'écran, mais l'affichage est fait en 3D ; seuls les boutons restent visibles */
.zone > :not(.actions) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* HUD des actes : discret, dans un coin */
.actes { position: absolute; z-index: 10; left: 24px; bottom: 24px; display: flex; gap: 16px; align-items: center; font: 500 12px var(--sans); letter-spacing: .08em; }
.actes a, .actes button { color: #FAFAFA; background: none; border: 0; padding: 4px 0; cursor: pointer; opacity: .45; text-decoration: none; font: inherit; transition: opacity .4s, color .4s; }
.actes a:hover, .actes button:hover, .actes .on { opacity: 1; }
.actes .on { color: var(--acc); }
.skip { right: 76px; width: auto; border-radius: 999px; padding: 0 16px; font: 500 12px var(--sans); }

/* version simple (SKIP / reduced motion) : tout le contenu, sans animation */
html:has(.detail-projet.simple) { overflow: auto; }
.detail-projet.simple { height: auto; min-height: 100dvh; overflow: visible; }
.simple #scene-3d, .simple .voile, .simple .flash, .simple .guide, .simple .astuce { display: none; }
.simple .zone { position: relative; left: auto; bottom: auto; width: min(720px, 88vw); margin: 8vh auto; opacity: 1; filter: none; transform: none; pointer-events: auto; transition: none; }
.simple .zone > :not(.actions) { position: static !important; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
@media (max-width: 700px) { .actes button { display: none; } }