*{box-sizing:border-box}body{margin:0;background:#0b0b0f;color:#eee;font:17px/1.7 Arial,sans-serif}a{color:#d9b966}header,footer{background:#111116;border-bottom:1px solid #4d4028;padding:20px 5%}.wrap{max-width:1100px;margin:auto}header .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}.brand{font:28px Georgia,serif;letter-spacing:3px;text-decoration:none}nav{display:flex;gap:20px;flex-wrap:wrap}nav a{text-decoration:none}nav a:hover{text-decoration:underline}main{min-height:65vh}.hero{text-align:center;padding:85px 20px;background:radial-gradient(ellipse at top,#4b341b,#0b0b0f 70%)}h1,h2,h3{font-family:Georgia,serif;color:#e3c579;line-height:1.2}h1{font-size:clamp(40px,6vw,72px)}h2{font-size:36px}.intro{max-width:740px;margin:0 auto 30px}.btn{display:inline-block;background:#c9a85d;color:#111;padding:12px 24px;border-radius:5px;text-decoration:none;font-weight:bold}.btn:hover{background:#f1d790}.section{padding:65px 20px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.card{background:#19191f;border:1px solid #544528;border-radius:12px;overflow:hidden}.card img{width:100%;height:360px;object-fit:cover}.card div{padding:22px}.card h3{font-size:25px;margin:0}.detail{display:grid;grid-template-columns:340px 1fr;gap:50px;align-items:start;margin-bottom:70px}.detail img{width:100%;border-radius:10px}.detail p{margin:0 0 17px}.price{font-size:22px;color:#e3c579;font-weight:bold}.form{max-width:700px;margin:auto}label{display:block;margin:15px 0 5px}input,textarea,select{display:block;width:100%;background:#25252b;color:white;border:1px solid #8d7850;border-radius:5px;padding:13px;font:inherit}textarea{min-height:160px}button{cursor:pointer;border:0}.small{font-size:14px;color:#bbb}.message{padding:15px;border:1px solid #b39a60;border-radius:5px}.menu-button{display:none}footer{border-top:1px solid #4d4028;border-bottom:0;text-align:center}footer p{margin:5px} @media(max-width:760px){.cards{grid-template-columns:1fr}.detail{grid-template-columns:1fr}.detail img{max-width:430px}.menu-button{display:block;background:#c9a85d;padding:10px;border-radius:5px}nav{display:none;width:100%;flex-direction:column}nav.open{display:flex}header .wrap{justify-content:space-between}.hero{padding:65px 18px}}
/* Les dés magiques sur la page d'accueil */
.magic-dice {
    text-align: center;
    background: #101016;
    padding: 55px 15px;
}

.magic-dice h2 {
    color: #e3c579;
}

.magic-dice iframe {
    display: block;
    width: 100%;
    max-width: 1000px;
    height: 650px;
    margin: 25px auto 0;
    border: 0;
    border-radius: 12px;
    background: #fff;
}

@media (max-width: 600px) {
    .magic-dice iframe {
        height: 500px;
    }
}

/* Correction du centrage des dés magiques */
.magic-dice {
    width: 100%;
    text-align: center;
    overflow: hidden;
}

.magic-dice .wrap {
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.magic-dice iframe {
    display: block;
    width: 100%;
    max-width: 1000px;
    height: 650px;
    margin: 25px auto 0;
    border: none;
}

@media (max-width: 600px) {
    .magic-dice iframe {
        height: 500px;
    }
}


/* Correction du centrage des dés magiques */
.magic-dice {
    width: 100%;
    text-align: center;
    overflow: hidden;
}

.magic-dice .wrap {
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.magic-dice iframe {
    display: block;
    width: 100%;
    max-width: 1000px;
    height: 650px;
    margin: 25px auto 0;
    border: none;
}

@media (max-width: 600px) {
    .magic-dice iframe {
        height: 500px;
    }
}

EOFcat >> /var/www/the-magic/public/assets/style.css <<'EOF'

/* Affichage compact des dés magiques */
.magic-dice {
    text-align: center;
    overflow: hidden;
}

.magic-dice .wrap {
    max-width: 1100px;
    margin: 0 auto;
}

.magic-dice iframe {
    display: block;
    width: 100%;
    max-width: 650px;
    height: 850px;
    margin: 20px auto 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

@media (max-width: 700px) {
    .magic-dice iframe {
        width: 100%;
        max-width: 100%;
        height: 750px;
    }
}

/* Affichage compact des dés magiques */
.magic-dice {
    text-align: center;
    overflow: hidden;
}

.magic-dice .wrap {
    max-width: 1100px;
    margin: 0 auto;
}

.magic-dice iframe {
    display: block;
    width: 100%;
    max-width: 650px;
    height: 850px;
    margin: 20px auto 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

@media (max-width: 700px) {
    .magic-dice iframe {
        width: 100%;
        max-width: 100%;
        height: 750px;
    }
}

/* Ajustement du cadre Flitch */
.magic-dice iframe {
    display: block;
    width: 100%;
    max-width: 650px;
    height: 1000px;
    margin: 20px auto;
    border: none;
    border-radius: 0;
    overflow: hidden;
}

@media (max-width: 700px) {
    .magic-dice iframe {
        max-width: 100%;
        height: 850px;
    }
}

/* Réduire l'espace sous les dés magiques */
.magic-dice {
    padding-bottom: 10px !important;
}

.magic-dice iframe {
    margin-bottom: 0 !important;
}

/* Rapprocher la section des spectacles */
.magic-dice + .section {
    padding-top: 15px !important;
}

@media (max-width: 700px) {
    .magic-dice {
        padding-bottom: 5px !important;
    }

    .magic-dice + .section {
        padding-top: 15px !important;
    }
}


/* Ajustement des dés et de la section suivante */

.magic-dice {
    padding-top: 25px !important;
    padding-bottom: 0 !important;
}

.magic-dice iframe {
    height: 750px !important;
    margin-top: 15px !important;
    margin-bottom: 0 !important;
}

.magic-dice + .section {
    padding-top: 15px !important;
}

/* Version GSM */
@media (max-width: 700px) {
    .magic-dice {
        padding-top: 15px !important;
        padding-bottom: 0 !important;
    }

    .magic-dice iframe {
        height: 550px !important;
        margin-top: 10px !important;
        margin-bottom: 0 !important;
    }

    .magic-dice + .section {
        padding-top: 10px !important;
    }
}