/*
Theme Name: Ville Bleue
Author: Mathis
Description: Thème custom pour mon site vitrine.
Version: 1.0
*/

/* Base / reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
    height: 100%;
    overflow: hidden;
}
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #fff;
}

/* Hero en plein écran */
.hero {
    position: relative;
    min-height: 100vh;
    background: radial-gradient(circle at 50% 30%, #16335c 0%, #0a1626 70%, #050b15 100%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Décor ville en fond */
.bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    image-rendering: auto;
}

/* Barre du haut */
.site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
}

/* Barre d'admin WordPress */
body.admin-bar .site-header {top: 32px}
body.admin-bar .presentation {height: calc(100vh - 32px);}

@media screen and (max-width: 782px) {
    body.admin-bar .site-header {top: 46px}
    body.admin-bar .presentation {height: calc(100vh - 46px)}
}
.logo {justify-self: start;}
.menu {justify-self: center;}
.sound{justify-self: end;}

/* LIQUID GLASS */

/* Logo rond */
.logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255,255,255,0.62), rgba(255,255,255,0.46));
    padding: 8px 14px;
    border-radius: 18px;
    text-decoration: none;
    flex-shrink: 0;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.5);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
}
.logo img {
    height: 48px;
    width: auto;
    display: block;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Menu flotant */
.menu {
    display: flex;
    gap: 2px;
    padding: 4px 8px;
    background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05)), rgba(12, 22, 42, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    position: relative;
}
.menu__item:nth-of-type(2) {
    margin-left: 16px;
}
.menu__item {
    position: relative;
    z-index: 1;
    padding: 6px 22px;
    border-radius: 999px;
    color: #fff;
    text-decoration:none;
    font-size: 15px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    
}
.menu__item.is-active {
    font-weight: 600;
}
.menu__item--soon {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    opacity: .55;
    cursor: default;
    pointer-events: none;
}
.menu__soon {
    font-style: normal;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.3);
    text-shadow: none;
}
.menu__pill {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 0;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
    pointer-events: none;
    opacity: 0;
    z-index: 0;
    transition: left 0.3s cubic-bezier(0.22,1,0.36,1),
                width 0.3s cubic-bezier(0.22,1,0.36,1),
                opacity 0.25s ease;
}

/* Bouton de son en rond */
.sound {
width: 64px; 
height: 64px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.22);
background: linear-gradient(135deg, rgba(255,255,255,0.18),rgba(255,255,255,0.05)),rgba(12,22,42,0.18);
color: #fff;
font-size: 22px;
cursor: pointer;
flex-shrink: 0;
text-shadow: 0 1px 3px rgba(0,0,0,0.35);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
box-shadow: 0 8px 30px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.35);
transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

/* fin liquid glass */

/* Animations au survol */

/* Logo : se souléve legerement */
.logo:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 12px 34px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.7);
}

/* Bouton son : grossit au survol, se réduit au clic */
.sound:hover {
    transform: scale(1.08);
    box-shadow: 0 12px 34px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
}
.sound:active {
    transform: scale(0.96);
}

/* Zone centrale */ 
.hero__stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 5;
}
.hero__placeholder {
    opacity: 0.5;
    font-size: 14px;
    letter-spacing: 0.05em;
}

/* Fenêtre qui clignote */
#flicker-window {
    animation: clignote 6s infinite;
    transform-box: fill-box;
}
@keyframes clignote {
    0%, 100% {opacity: 1; }
    8% {opacity: 0.2; }
    10% {opacity: 1; }
    22% {opacity: 0.45; }
    24% {opacity: 1; }
    56% {opacity: 0.15; }
    59% {opacity: 1; }
    86% {opacity: 0.35; }
    88% {opacity: 1; }
}

/* Respecte les gens qui n'aiment pas les animations */
@media (prefers-reduced-motion: reduce) {
    #flicker-window {animation: none; }
}

/* Bouton son en lecture */
.sound.is-playing {
    animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% {box-shadow: 0 8px 30px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.35), 0 0 0 0 rgba(255,255,255,0.45);}
    50% {box-shadow: 0 8px 30px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.35), 0 0 0 16px rgba(255,255,255,0);}
}

/* Page de présentation */
.presentation {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    padding: 130px 40px 70px;
    background: radial-gradient(circle at 50% 0%,#16335c 0%,#0a1626 55%,#050b15 100%);
    display: flex;
    flex-direction: column;
}

.presentation__title {
    text-align:center;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 50px;
}
.presentation__title,
.card {
    position: relative;
    z-index: 2;
}

/* Grille de cartes */
.cards {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    flex: 1;
    min-height: 0;
    grid-auto-rows: 1fr;
}

/* Une carte */
.card {
    display: flex;
    flex-direction: column;
}

/* Zone du haut : le perso 3D */
.card__media {
    position: relative;
    flex: 1;
    min-height: 540px;
}

/* Panneau info */
.info {
    position: absolute;
    left: 50%; top: 53%; width: 84%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.04)), rgba(8,18,36n.5);
    border: 1px solid rgba(120,200,255,.4);
    border-radius: 12px;
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    box-shadow:0 10px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255.28);
    padding: 11px 13px;
}
.info .code {
    font-family: ui-monospace,Melo,monospace;
    font-size: 11px;
    letter-spacing: .14em;
    color:#7fe3ff;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}
.info .code::before{
    content: ""; 
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #7fe3ff;
    box-shadow: 0 0 8px #7fe3ff;
}
.info .name {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.1;
}
.info .role {
    font-size: 12.5px;
    opacity: .85;
    margin-top: 1px;
}
.info .line {
    font-size: 12px; font-style: italic;
    opacity: .65;
    margin-top: 7px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 7px;
}

/* Bloc "Qui sommes-nous" */
.about {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    max-width: 760px;
    margin: 20px auto 0;
    padding: 16px 26px;
    text-align: center;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.04)), rgba(8,16,36,.5);
    border: 1px solid rgba(120,200,255,.4);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    box-shadow: 0 12px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.28);
}
.about__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #7fe3ff;
    margin-bottom: 8px;
}
.about__label::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #7fe3ff;
    box-shadow: 0 0 8px #7fe3ff;
}
.about__manifesto {
    font-size: clamp(14px, 1.45vw, 18px);
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
    text-wrap: balance;
}
.about__cta { color: #7fe3ff; font-size: 1.1em; }

/* Page actu - tableau d'enquêteur 3D */
.actu {
    position: relative;
    overflow: hidden;
    height: 100vh;
}
#actu-scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.board3d {
    position: relative;
    z-index: 2;
    flex: 1;
    min-height: 0;
    width: 100%;
    background: transparent;
}

/* Fiche "coups" */
.clue {
    display: block;
    width: 150px;
    padding: 12px 14px;
    text-decoration: none;
    color: #fff;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.4)), rgba(8,18,36,.6);
    border: 1px solid rgba(120,200,255,.4);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    backdrop-filter: blur(10px) saturate(160%);
    box-shadow: 0 10px 24px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.25);
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity .4s ease, transform .4s ease;
}
.clue__tag {
    display: block;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #7fe3ff;
    margin-bottom: 5px;
}
.clue__title {
    font-size: 13px; font-weight: 700; 
    line-height: 1.25;
    width: 150px;
    padding: 12px 14px;
    text-decoration: none;
    color: #fff;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.04)), rgba(8,18,36,.6);
    border: 1px solid rgba(120,200,255,.4);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    backdrop-filter: blur(10px) saturate(160%);
    box-shadow: 0 10px 24px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.25);
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity .4s ease, transform .4s ease;
}

/* Bouton fermer */
.board-close {
    position: absolute;
    top: 110px; right: 44px;
    z-index: 6;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.22);
    background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.05)), rgba(12,22,42,.3);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease, trasform .2s ease;
}
.board-close:hover {transform: scale(1.08);}
.board3d {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: transparent;
}

/* HUD page actu */
.examine {
    position: fixed;
    left: 50%;
    bottom: 9vh;
    transform: translateX(-50%);
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    border: 1px solid rgba(120,200,255,.5); border-radius: 999px;
    background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.04)), rgba(8,18,36,.55);
    -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
    box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.3);
    transition: opacity .4s ease, transfom .2s ease;
}
.examine::before { 
    content: ""; 
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #7fe3ff;
    box-shadow: 0 0 10px #7fe3ff;
}
.examine:hover { transform: translateX(-50%) scale(1.05);}
.actu.board-open .examine { opacity: 0; pointer-events: none;}
.dossier {
    position: fixed;
    inset: 0;
    z-index: 45;
    display: flex;
    align-items: center; 
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease;
}
.actu.board-open .dossier { opacity: 1; pointer-events: auto;}
.dossier__grid { display: grid; grid-template-columns: repeat(2, minmax(230px, 300px)); gap: 28px 32px;}
.coup {
    --rot: 0deg;
    position: relative;
    display: block;
    min-height: 120px;
    padding: 28px 20px 18px;
    text-decoration: none;
    color: #23201b;
    background: linear-gradient(180deg, #fbf9f3, #f3efe4);
    border: 1 solid rgba(60, 50, 30,.12);
    border-radius: 3px;
    box-shadow: 
    0 12px 24px rgba(0,0,0,.45),
    0 2px 5px rgba(0,0,0,.30),
    inset 0 0 30px rgba(120,95,50,.06);

    transform: translateY(14px) rotate(var(--rot)); 
    transition: transform .35s ease, box-shadow .25s ease;
}
/* trombone métal */
.coup::before {
    content: "";
    position: absolute;
    top: -19px;
    left: 50%;
    margin-left: -11px;
    width: 22px;
    height: 46px;
    background: url("assets/paperclip.svg") center / contain no-repeat;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.4));
}

/* inclinaisons + position du trombone */
.coup:nth-child(1) {--rot: -1.6deg;}
.coup:nth-child(2) {--rot: 1.3deg;}
.coup:nth-child(3) {--rot: 0.9deg;}
.coup:nth-child(4) {--rot: -1.1deg;}

.coup:nth-child(2)::before {left: auto; right: 26px; margin-left: 0;}
.coup:nth-child(3)::before {left: 30px; margin-left: 0;}
.actu.board-open .coup {
    transform: translateY(0) rotate(var(--rot));
}
.coup__tag {
    display: block;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #b4402f;
    padding-bottom: 7px;
    margin-bottom: 9px;
    border-bottom: 1px solid rgba(60,50,30,.18);
}
.coup__title {
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #23201b;
}
.dossier__close {
    position: fixed;
    left: 50%;
    bottom: 9vh;
    transform: translateX(-50%);
    z-index: 46;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    border: 1px solid rgba(120,200,255,.5);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.04)), rgba(8,18,36,.55);
    -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
    box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.3);
    transition: transform .2s ease, box-shadow .2s ease;
}
.dossier__close:hover { transform: translateX(-50%) scale(1.05);}


/* État dossier ouvert */
.actu.is-open .examine {opacity: 0; pointer-events: none;}
.actu.is-open .clue {opacity: 1; pointer-events: auto; transform: translateY(0);}
.actu.is-open .board-close {opacity: 1; pointer-events: auto;}

/* Page contact */
.contact {
    position: relative;
    overflow: hidden;
    height: 100vh;
}
body.admin-bar .contact {height: calc(100vh - 32px);}
#contact-scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
/* révélation contact */
.contact-reveal {
    position: fixed;
    left: 50%;
    bottom: 12vh;
    transform: translateX(-50%) translateY(12px);
    z-index: 45;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 26px 18px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.04)), rgba(40,14,16,.6);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 16px 44px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease, transform .4s ease;
}
.contact.reveal-open .contact-reveal {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.contact-reveal__tag {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #ffce6a;
}
.contact-reveal__line {font-size: 16px;}
.contact-reveal__line a {color: #ffd98a; text-decoration: none;}
.contact-reveal__close {
    position: absolute;
    top: 8px; right: 10px; width: 26px; height: 26px;
    border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.08);
    color: #fff;
    cursor: pointer;
    font-size: 13px;
}
/* text du clown */
.clown-speech { 
    position: fixed;
    left: 25vw; top: 30vh;
    z-index: 44;
    max-width: min(30vw, 380px);
    padding: 18px 22px;
    background: #fbf4e2;
    border: 3px solid #b0202a; border-radius: 20px;
    color: #2a1a14;
    font-family: Georgia, "Times New Roman", serif; font-size: 17px;
    line-height: 1.5;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
    opacity: 0;
    transform: translateY(10px) scale(.97);
    pointer-events: none;
    transition: opacity .45s ease, transform .45s ease;
}
.clown-speech.on { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; cursor: pointer; }
.clown-speech::after {
    content: '';
    position: absolute;
    right: 28px; width: 0; height: 0;
    bottom: -24px;
    border-left: 24px solid transparent; border-right: 8px solid transparent; border-top: 28px solid #b0202a;
}   
.clown-speech::before {
    content: '';
    position: absolute;
    right: 33px; width: 0; height: 0;
    bottom: -17px;
    border-left: 17px solid transparent; border-right: 5px solid transparent; border-top: 20px solid #fbf4e2;
    z-index: 1;
}   
.clown-speech__txt { margin: 0; min-height: 3em; }
.code-form {
    position: fixed;
    left: 50%;
    bottom: 12vh;
    transform: translateX(-50%) translateY(10px);
    z-index: 46;
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px; border: 1px solid rgba(255, 200, 120, .5);
    background: linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04)),rgba(40,14,16,.6);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
}
.code-form.on { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.code-form__input {
    width: 150px;
    padding: 10px 14px;
    font-size: 20px;
    letter-spacing: .3em;
    text-align: center;
    color: #fff;
    background: rgba(0,0,0,.3);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 10px;
    outline: none;
    font-family: ui-monospace, Menlo, monospace;
}
.code-form__input::placeholder { color:rgba(255,255,255,.35); }
.code-form__ok {
    padding: 10px 18px;
    font-size: 15px;
    color: #fff;
    cursor: pointer;
    border: 1px solid rgba(255, 200, 120, .5); border-radius: 10px;
    background: linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.04)),rgba(60,20,20,.6);
}
.code-form__ok:hover { filter: brightness(1.15); }

/* Affiche cirque secret */
.agence {
    min-height: 100vh;
    background: radial-gradient(120% 85% at 50% 0%,rgba(255,255,255,.28),transparent 60%), linear-gradient(to bottom,#e6cf5e 0%,#d9cf95 28%,#b7bfa0 58%,#84999c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 90px 16px 30px;
}

body.admin-bar .agence { min-height: calc(100vh - 32px); }
.affiche {
    position: relative;
    width: min(94vw, 600px);
    padding: 34px 30px 26px;
    text-align: center;
    color: #2a1a12;
    background-color: #f4ecce; background-image: radial-gradient(rgba(120, 90, 40, .06) 1px, transparent 1.5px); background-size: 4px 4px;
    border: 3px solid #b0202a;
    box-shadow: 0 0 0 4px #f4ecce, 0 0 0 7px #c8a24a, 0 0 0 9px #7a1118, 0 28px 60px rgba(0, 0, 0, .4);
}
.affiche::before,
.affiche::after {
    content: '★  ★  ★';
    position: absolute;
    left: 0; right: 0;
    font-size: 12px;
    letter-spacing: .4em;
    color: #b0202a;
    opacity: .7;
}
.affiche::before { top: 10px; }
.affiche::after  { bottom: 8px; }
.affiche__top {
    font-family: Georgia, serif;
    font-size: 14px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #7a1118;
    margin: 8px 0 4px;
}
.affiche__top span { display: block; font-size: 11px; opacity: .7; letter-spacing: .18em; }
.affiche__title {
    font-family: 'Rye', Georgia, serif;
    font-size: clamp(36px, 7vw, 58px);
    line-height: .98;
    margin: 8px 0 10px;
    color: #f4ecce;
    white-space: nowrap;
    -webkit-text-stroke: 2px #7a1118;
    text-shadow: 4px 5px 0 rgba(122, 17, 24, .45), 0 2px 0 #b0202a;
}
.affiche__title em {
    font-style: normal;
    color: #b0202a;
    -webkit-text-stroke: 2px #5e0e13;
}
.affiche__sub {
    font-family: Georgia, serif;
    font-style: italic; font-size: 14px;
    color: #6a4a32;
    margin: 0 0 22px;
    margin: 0 auto;
}
.affiche__form {
    display: flex;
    flex-direction: column;
    gap: 11px;
    max-width: 440px;
    margin: 0 auto;
}
.affiche__form input,
.affiche__form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 16px;
    font-family: Georgia, "Times New Roman", serif; font-size: 16px;
    color: #5e3a1e;                       
    background-color: #fbf3d6; background-image: radial-gradient(rgba(120, 90, 40, .05) 1px, transparent 1.5px); background-size: 4px 4px;             
    border: 2px solid #c8a24a; border-radius: 4px;
    box-shadow: inset 0 2px 6px rgba(120, 80, 30, .14), 0 1px 0 rgba(255, 255, 255, .6);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.affiche__form button {
    width: 100%;
    box-sizing: border-box;
}
.affiche__form input::placeholder,
.affiche__form textarea::placeholder { color: #b39a66;font-style: italic;}
.affiche__form input:focus,
.affiche__form textarea:focus { border-color:#b0202a; background-color:#fffdf2; box-shadow: inset 0 2px 6px rgba(120,80,30,.16), 0 0 0 3px rgba(200,162,74,.45);}
.affiche__form button {
    margin-top: 6px;
    padding: 13px;
    font-family: 'Rye', Georgia, serif;
    font-size: 18px;
    letter-spacing: .03em;
    color: #f4ecce;
    background: #b0202a;
    border: 2px solid #7a1118;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 4px 0 #7a1118;
}
.affiche__form button:hover { background:#97181f; transform: translateY(1px); box-shadow: 0 3px 0#7a1118; }
.affiche__form button:disabled { opacity: .5; }
.affiche__done { display: none; margin: 8px 0 0; color: #1f7a3a; font-weight: 600; font-family:Georgia, serif; }
.affiche__done.on { display: block; }
.affiche__foot {
    font-family: 'Rye', Georgia, serif;
    font-size: clamp(17px, 2.6vw, 25px);
    line-height: 1.3;
    color: #7a1118;
    margin: 22px 0 4px;
}
.affiche__key { color: #c8932a; }   /* "déchiffre" en doré (couleur différente) */

/* Page Boutique */
.boutique {
    position: relative;
    overflow: hidden;
    height: 100vh;
}
body.admin-scene { height: calc(100vh - 32px);}
#boutique-scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
/* bulle du marchand */
.mer-speech {
    position: fixed;
    left: 20vw; top: 25vh;
    z-index: 44;
    max-width: min(32vw, 400px);
    padding: 16px 20px;
    border-radius: 12px; border: 1px solid rgba(47,230,214,.45);
    background: linear-gradient(135deg, rgba(47,230,214,.10), rgba(255,255,255,.03)),rgba(10,18,22,.85);
    color: #dff3f0;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 15px;
    line-height: 1.5;
    box-shadow: 0 16px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(47,230,214,.15);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
    opacity: 0;
    transform: translateY(8px) scale(.97);
    pointer-events: none;
    transition: opacity .4s ease, transform .4s ease;
}
.mer-speech.on { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; cursor: pointer;}
.mer-speech::after {
    content: '';
    position: absolute;
    left: 26px; bottom: -22px;
    border-left: 8px solid transparent; border-right: 22px solid transparent; border-top: 24px solid rgba(47,230,214,.45);
}
.mer-speech__txt { margin: 0; min-height: 3em; }

/* catalogue de gadgets */
.catalog {
    position: fixed;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%) scale(.96);
    z-index: 45;
    width: min(92vw, 720px);
    max-height: 80vh;
    overflow-y: auto;
    padding: 26px 28px;
    border-radius: 16px; border: 1px solid rgba(47,230,214,.4);
    background: linear-gradient(135deg, rgba(47,230,214,.08), rgba(255,255,255,.02)),rgba(10,16,20,.93);
    box-shadow: 0 24px 70px rgba(0,0,0,.6);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
    color: #dff3f0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease, transform .4s ease;
}
.boutique.catalog-open .catalog { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%)
scale(1); }
.catalog__title {
    font-family: ui-monospace, Menlo, monospace; text-transform: uppercase;
    letter-spacing: .14em;
    color: #2fe6d6;
    font-size: 18px;
    text-align: center;
    margin: 0 0 18px;
}
.catalog__close {
    position: absolute; top: 12px; right: 14px;
    width: 30px; height: 30px;
    border-radius: 50%; border: 1px solid rgba(47,230,214,.4);
    background: rgba(47,230,214,.08);
    color: #dff3f0; cursor: pointer; font-size: 14px;
}
.catalog__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));                    
    gap: 12px;
}
.gad {
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(47,230,214,.22);
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.gad:hover { transform: translateY(-2px); border-color: rgba(47,230,214,.6); background:rgba(47,230,214,.08); }
.gad__tag  { font-family: ui-monospace, Menlo, monospace; font-size: 10px; letter-spacing: .14em; color: #2fe6d6; }
.gad__name { font-size: 15px; font-weight: 700; color: #fff; }
.gad__desc { font-size: 13px; color: #9fc4c0; }

/* info-bulle gadget */
.gad-tip {
    position: fixed;
    z-index: 46;
    transform: translate(-50%, -100%);
    margin-top: -12px;
    min-width: 150px; max-width: 240px;
    padding: 9px 13px;
    border-radius: 9px; border: 1px solid rgba(47, 230, 214, .5);
    background: rgba(10, 16, 20, .92);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
}
.gad-tip.on { opacity: 1; }
.gad-tip::after {
    content: '';
    position: absolute;
    left: 50%; bottom: -7px;
    width: 12px; height: 12px;
    transform: translateX(-50%) rotate(45deg);
    background: rgba(10, 16, 20,.92);
    border-right: 1px solid rgba(47, 230, 214,.5); border-bottom: 1px solid rgba(47,230,214,.5);
}
.gad-tip__name {
    display: block;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 14px; font-weight: 700;
    color: #2fe6d6;
}
.gad-tip__desc {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    color: #c7dedb;
    line-height: 1.35;
}

/* bouton retour */
.gad-back {
    position: fixed;
    left: 50%; bottom: 28px;
    transform: translateX(-50%) translateY(14px);
    z-index: 46;
    padding: 11px 22px;
    border-radius: 999px; border: 1px solid rgba(47,230,214,.45);
    background: rgba(10, 18, 22, .82);
    color: #dff3f0;
    font-family: ui-monospace, Menlo, monospace; font-size: 14px; letter-spacing: .04em;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: opacity .35s ease, transform .35s ease, background .2s ease;
}
.boutique.zoom-open .gad-back { opacity: 1; pointer-events: auto; transform: translateX(-50%)
translateY(0); }
.gad-back:hover { background: rgba(47,230,214,.14); border-color: rgba(47,230,214,.8); }

/* navigation des étages de l'armoire-vitrine */
.floor-nav {
    position: fixed;
    right: 26px; top: 50%;
    transform: translateY(-50%) translateX(12px);
    z-index: 46;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    width: 168px; padding: 14px;
    border-radius: 16px; border: 1px solid rgba(47, 230, 214, .4);
    background: rgba(10, 16, 20, .78);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .5), 0 0 26px rgba(47, 230, 214, .08);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    opacity: 0; pointer-events: none;
    transition: opacity .5s ease, transform .5s ease;
}
.boutique.zoom-open .floor-nav { opacity: 1; pointer-events: auto; transform: translateY(-50%) translateX(0); }
.floor-nav__btn {
    width: 46px; height: 36px;
    border-radius: 10px; border: 1px solid rgba(47, 230, 214, .45);
    background: rgba(20, 30, 34, .7);
    color: #6ff0e2; font-size: 16px; cursor: pointer;
    transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.floor-nav__btn:hover { background: rgba(47, 230, 214, .16); border-color: rgba(47, 230, 214, .85); }
.floor-nav__btn:disabled { opacity: .3; cursor: default; }
.floor-nav__info { text-align: center; min-height: 3.4em; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.floor-nav__label { font-family: ui-monospace, Menlo, monospace; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: #2fe6d6; }
.floor-nav__items { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; line-height: 1.4; color: #c7dedb; }
@media (max-width: 760px) {
    .floor-nav { right: 12px; width: 132px; padding: 10px; transform: translateY(-50%) scale(.9); }
    .boutique.zoom-open .floor-nav { transform: translateY(-50%) scale(.9); }
}

/* Responsive */
@media (max-width: 1000px) {
    .cards {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 560px) {
    .cards {grid-template-columns: 1fr;}
    .presentation {padding: 110px 20px 50px;}
}

/* ===== fiche d'enquête = dossier d'archive (page actu) ===== */
.coup { cursor: pointer; }

.case-file {
    position: fixed;
    inset: 0;
    z-index: 60;
    overflow-y: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6vh 16px 9vh;
    background: rgba(6, 9, 16, .8);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
}
.case-file.open { opacity: 1; pointer-events: auto; }

/* la chemise cartonnée du dossier */
.cf__inner {
    position: relative;
    width: min(94vw, 780px);
    padding: 52px 50px 56px;
    color: #2c261d;
    background-color: #f1e8d2;
    background-image: radial-gradient(rgba(120, 90, 40, .07) 1px, transparent 1.6px);
    background-size: 4px 4px;
    border-radius: 2px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 0 70px rgba(120, 95, 50, .09);
    font-family: Georgia, "Times New Roman", serif;
}
.cf__inner::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 9px;
    background: repeating-linear-gradient(45deg, #b0202a 0 13px, #7a1118 13px 26px);
    border-radius: 2px 2px 0 0;
}

.cf__close {
    position: fixed;
    top: 18px; right: 22px;
    z-index: 2;
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(18, 22, 32, .72);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background .2s, transform .2s;
}
.cf__close:hover { background: rgba(176, 32, 42, .6); transform: scale(1.06); }

.cf__head {
    position: relative;
    border-bottom: 2px solid rgba(60, 50, 30, .25);
    padding-bottom: 16px;
    margin-bottom: 26px;
}
.cf__head::after {
    content: "ARCHIVES · CYPHER & CO";
    position: absolute;
    top: -22px; right: -4px;
    transform: rotate(-7deg);
    font-family: ui-monospace, Menlo, monospace;
    font-size: 11px;
    letter-spacing: .12em;
    color: rgba(176, 32, 42, .42);
    border: 2px solid rgba(176, 32, 42, .32);
    border-radius: 4px;
    padding: 4px 8px;
    pointer-events: none;
}
.cf__tag {
    display: inline-block;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #b0202a;
    margin-bottom: 12px;
}
.cf__title { margin: 0 0 8px; font-size: clamp(26px, 4vw, 38px); line-height: 1.1; font-weight: 700; color: #211b13; }
.cf__sub  { margin: 0 0 12px; font-size: 17px; font-style: italic; color: #6a5a3e; }
.cf__meta { margin: 0; font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: #8a7a58; }

.cf__body { font-size: 16.5px; line-height: 1.7; color: #2c261d; }
.cf__body h3 {
    margin: 32px 0 10px;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 15px;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #b0202a;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(176, 32, 42, .22);
}
.cf__body p { margin: 0 0 15px; }
.cf__body strong { color: #211b13; }
.cf__body em { color: #5e4a2e; }
.cf__body code {
    font-family: ui-monospace, Menlo, monospace;
    font-size: .88em;
    background: rgba(60, 50, 30, .1);
    color: #7a1118;
    padding: 1px 5px;
    border-radius: 3px;
}
.cf-lead { font-size: 18px; font-style: italic; color: #3a3225; border-left: 3px solid #b0202a; padding-left: 16px; }

.cf-fig { margin: 26px 0; text-align: center; }
.cf-fig img {
    width: 100%;
    max-width: 680px;
    background: #fff;
    padding: 8px;
    border: 1px solid rgba(60, 50, 30, .3);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
}
.cf-fig figcaption { margin-top: 9px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: #8a7a58; }

.cf-clues { list-style: none; padding: 0; margin: 10px 0 16px; }
.cf-clues li {
    position: relative;
    padding: 9px 14px 9px 36px;
    margin-bottom: 7px;
    background: rgba(176, 32, 42, .05);
    border-left: 3px solid #b0202a;
}
.cf-clues li::before { content: "\25B8"; position: absolute; left: 14px; top: 9px; color: #b0202a; }
.cf-clues b { color: #7a1118; }

.cf-svg {
    display: block;
    width: 100%;
    max-width: 460px;
    margin: 22px auto;
    background: #141d33;
    border: 1px solid rgba(60, 50, 30, .35);
    border-radius: 3px;
    padding: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}
.cf-sources {
    margin-top: 26px;
    padding-top: 14px;
    border-top: 1px dashed rgba(60, 50, 30, .35);
    font-size: 13px;
    color: #6a5a3e;
}
.cf-sources b { color: #7a1118; }


/* ===== Crédit de la musique =====
   Les musiques sont de Kevin MacLeod, sous licence CC BY 4.0 : libres, à
   condition de nommer l'auteur, la source et la licence. Le crédit est posé
   sous le bouton son : il apparaît au survol du bouton, et reste affiché tant
   que la musique joue. */
.credit-musique {
    position: absolute;
    top: calc(100% - 16px);
    right: 32px;
    margin: 0;
    max-width: calc(100vw - 64px);
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(12,22,42,0.55);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: rgba(255,255,255,0.85);
    font: 12px/1.4 ui-monospace, Menlo, monospace;
    letter-spacing: .02em;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    /* visibility attend la fin du fondu pour disparaître : on a le temps de
       glisser du bouton jusqu'au crédit pour cliquer sur ses liens */
    transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
.credit-musique a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sound:hover ~ .credit-musique,
.sound:focus-visible ~ .credit-musique,
.sound.is-playing ~ .credit-musique,
.credit-musique:hover {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .3s ease, transform .3s ease, visibility 0s;
}
@media (max-width: 560px) {
    .credit-musique { white-space: normal; border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .credit-musique { transition: none; }
}