/*
Theme Name: Minimalio Child
Template: minimalio
*/

/* ===============================
   RESET DE BASE
   =============================== */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff; /* FOND BLANC */
    color: #000;      /* TEXTE NOIR */
    font-family: 'Courier New', monospace;
}

/* ===============================
   🔊 AUDIO TOPBAR
   =============================== */
#audio-topbar {
    position: fixed;
    top: 60px; /* ↓ baisse légèrement */
    left: 50%; /* centre horizontalement */
    transform: translateX(-50%); /* vrai centrage */
    z-index: 50;
    opacity: 0.6;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
}

#audio-topbar:hover {
    opacity: 1;
}



#audio-icon {
    width: 32px;
    height: 32px;
    cursor: pointer;
}

#audio-status {
    font-size: 14px;
    letter-spacing: 1px;
}

/* ===============================
   👋 INTRO TEXT
   =============================== */
#intro-text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    text-align: center;
    z-index: 9999; /* 🔥 au-dessus de tout */
    pointer-events: none;
    white-space: pre-wrap; /* 🔥 permet les retours à la ligne */
}
/* ===============================
   🎛️ FX UI (DESKTOP)
   =============================== */
#fx-center-wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 30;
    display: none; /* visible seulement quand un FX est actif */
}

#fx-label {
    font-size: 24px;
    margin-bottom: 10px;
}

#fx-gauge {
    width: 200px;
    height: 10px;
    background: rgba(255,255,255,0.2);
    border-radius: 5px;
    overflow: hidden;
}

#fx-gauge-fill {
    width: 0%;
    height: 100%;
    background: #fff;
}

/* ===============================
   🎨 CANVAS
   =============================== */
#bg-anim {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
}

/* ===============================
   🔤 LETTRES ALÉATOIRES
   =============================== */
#typed-letters {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 25;
}

.typed-letter {
    position: absolute;
    font-size: 24px;
    opacity: 1;
    animation: fadeOut 1.2s forwards;
}

@keyframes fadeOut {
    to { opacity: 0; transform: translateY(-20px); }
}

/* ===============================
   🚪 ENTER SITE
   =============================== */
#enter-site {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
}

#enter-button {
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    padding: 10px 20px;
    transition: 0.2s;

    border: 2px solid #fff; /* ← vrai border */
    display: inline-block;
}


#enter-button:hover {
    background: #fff;
    color: #000;
}

/* ===============================
   🖥️ FX ZONES (DESKTOP)
   =============================== */
.fx-zone {
    position: fixed;
    width: 50vw;
    height: 50vh;
    z-index: 10;
    pointer-events: auto;
}

#zone-hg { top: 0; left: 0; }
#zone-hd { top: 0; right: 0; }
#zone-bg { bottom: 0; left: 0; }
#zone-bd { bottom: 0; right: 0; }

/* ===============================
   📱 FX UI MOBILE
   =============================== */
#mobile-fx {
    display: none; /* on activera plus tard via media queries */
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    text-align: center;
}

#fx-buttons button {
    margin: 5px;
    padding: 10px 15px;
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
}

#fx-slider {
    width: 200px;
    margin-top: 10px;
}


/* Curseur clignotant */
.cursor {
    display: inline-block;
    width: 10px;
    height: 20px;
    background: #000;
    margin-left: 4px;
    vertical-align: bottom;
    animation: blink 0.7s infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}
/* ===============================
   🎚️ CENTRAGE DES FX ZONES
   =============================== */

.fx-info {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* centrage parfait */
    text-align: center;
    color: #000;
    font-family: 'Courier New', monospace;
    pointer-events: none;
    z-index: 20;
}

.fx-name {
    font-size: 16px;
    margin-bottom: 6px;
    opacity: 0.9;
}

.fx-bar {
    width: 140px;
    height: 8px;
    background: rgba(0,0,0,0.2);
    margin: 6px auto;
    border-radius: 4px;
    overflow: hidden;
}

.fx-fill {
    width: 0%;
    height: 100%;
    background: #000;
    transition: width 0.1s linear;
}

.fx-value {
    font-size: 14px;
    opacity: 0.8;
    margin-top: 4px;
    display: block;
}
/* ============================================
   🖤🤍 DOUBLE CONTOUR : BLANC + NOIR
   ============================================ */

.double-stroke,
.fx-info,
.fx-name,
.fx-value,
#intro-text,
#audio-status,
#audio-label,
#enter-site {
    color: #000; /* remplissage noir */
    -webkit-text-stroke: 3px #fff; /* contour externe blanc */
    text-stroke: 3px #fff;
    paint-order: stroke fill;

    /* Contour interne noir (shadow hack) */
    text-shadow:
        0 0 1px #000,
        0 0 2px #000,
        0 0 3px #000;
}

/* ============================================
   🎚️ Jauge : GRADIENT ANIMÉ
   ============================================ */

.fx-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffffff, #dcdcdc, #ffffff);
    background-size: 200% 100%;
    animation: gaugeGradient 3s ease-in-out infinite;
    border-radius: 4px;
}

@keyframes gaugeGradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/*responsive----------------------------------------------------*/
/* ===============================
   📱 TYPEWRITER RESPONSIVE
   =============================== */
@media (max-width: 480px) {
    #intro-text {
        font-size: 17px;   /* avant : 20–24px */
        line-height: 1.3;
        max-width: 90%;
        margin: 0 auto;
    }
}
@media (max-width: 480px) {
    #enter-site {
        font-size: 17px;
        padding: 6px 14px;
        border-width: 2px;
    }

    #bottom-ui {
        bottom: 20px;
        gap: 16px;
        flex-wrap: wrap; /* évite le chevauchement */
    }
}
/* ===============================
   📱 DOUBLE CONTOUR — VERSION MOBILE
   =============================== */
@media (max-width: 480px) {

    .double-stroke,
    .fx-info,
    .fx-name,
    .fx-value,
    #intro-text,
    #audio-status,
    #audio-label,
    #enter-site {
        -webkit-text-stroke: 1px #fff; /* avant : 3px */
        text-stroke: 1px #fff;

        text-shadow:
            0 0 1px #000,
            0 0 1px #000; /* réduit aussi l’inner stroke */
    }

    #enter-site,
    #audio-label {
        border-width: 1.5px; /* avant : 3px */
        padding: 5px 10px;
        font-size: 13px;
    }
}




@media (max-width: 480px) {
    #enter-button {
        font-size: 14px;      /* ↓ plus petit */
        padding: 5px 10px;    /* ↓ plus compact */
        border-width: 1.5px;  /* ↓ contour plus fin */
    }
}


/* Masquer le titre du site uniquement sur la front-page */
body.home #wrapper-header .header__container > *:first-child {
    display: none !important;
}

@media (max-width: 480px) {
    #enter-button {
        font-size: 10px !important;
        padding: 6px 12px !important;
        border-width: 1px !important;
    }

    #enter-button.double-stroke {
        -webkit-text-stroke: 0.5px #fff !important;
        text-stroke: 0.5px #fff !important;
        text-shadow:
            0 0 1px #000 !important;
    }
}


@media (max-width: 480px) {
    #enter-site {
        border: none !important;
        background: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
}
/* Masquer le bouton burger uniquement sur la front-page */
body.home button[aria-controls="primary-menu"],
body.home .mobile-menu__toggle,
body.home .mobile-menu-toggle {
    display: none !important;
}


/*formulaire contact*/

.mtz-contact-form{
  max-width:700px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.mtz-row{
  display:flex;
  gap:16px;
}

.mtz-contact-form input,
.mtz-contact-form textarea{
  width:100%;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,0.12);
  background:transparent;
  color:inherit;
  border-radius:10px;
  outline:none;
  transition:0.2s ease;
}

.mtz-contact-form input:focus,
.mtz-contact-form textarea:focus{
  border-color:#fff;
}

.mtz-contact-form button{
  padding:14px 18px;
  background:#fff;
  color:#000;
  border:none;
  border-radius:12px;
  font-weight:600;
  cursor:pointer;
  transition:0.2s ease;
}

.mtz-contact-form button:hover{
  transform:translateY(-2px);
}