/**
* Fonts, balises principales, messages d'alerte, popups
*
* CSS
*
* @category CSS
* @package  webroot/css
* @author   AMIOT Romain <webmaster@naboombu.fr>
* @license  http://opensource.org/licenses/gpl-license.php GNU Public License
* @link     http://naboombu.fr
*
*/

/*
* Déclaration des fonts
*/
@font-face {
    font-family:        'Caveat';
    src:                url('../fonts/carattere/Carattere-Regular.ttf') format('truetype'),
    font-weight:        normal;
    font-style:         normal;
}

@font-face {
    font-family:        'PlayfairDisplay-Regular';
    src:                url('../fonts/Comfortaa/Comfortaa-VariableFont_wght.ttf') format('truetype');
    font-weight:        normal;
    font-style:         normal;
}

@font-face {
    font-family:        'CormorantGaramond';
    src:                url('../fonts/righteous/Righteous-Regular.ttf') format('truetype'),
    font-weight:        normal;
    font-style:         normal;
}


/*
* Reset / balises de base
*/
* {
    margin:             0;
    padding:            0;
    border:             0;
    outline:            0;
    box-sizing:         border-box;
}

html{
    color:              #000000;
    font:               normal 1em "PlayfairDisplay-Regular", "Trebuchet MS", Arial, Helvetica, sans-serif;
    scroll-behavior:    smooth;
}

body{
    width:              100%;
    min-height:         100vh;
    margin:             0;
}


/*
* Animations (toutes les @keyframes regroupées ici)
*/
@keyframes slideRight{
    0% {
        opacity:        0;
        transform:      translate(150px, 70px);
    }
    100%{
        opacity:        1;
        transform:      translate(0px, 0px);
    }
}

@keyframes slideLeft{
    0% {
        opacity:        0;
        transform:      translate(-150px, 70px);
    }
    100%{
        opacity:        1;
        transform:      translate(0px, 0px);
    }
}

@keyframes navbarSlideOn{
    0% {
        opacity:        0;
        transform:      translateX(150px);
    }
    100%{
        opacity:        0.8;
        transform:      translateX(0px);
    }
}

@keyframes navbarSlideOff{
    0% {
        opacity:        0.8;
        transform:      translateX(0px);
    }
    100%{
        opacity:        0;
        transform:      translateX(-150px);
    }
}

@keyframes pulsation{
    0% {text-shadow: 0 0 10px  #fff;}
    100% {text-shadow: 0 0 30px #fff;}
}

@keyframes rotate_{
    0% {transform: rotate(20deg);}
    100% {transform: rotate(28deg);}
}

@keyframes arrondi {
    0% {border-radius: 20px;}
    50% {border-radius: 0;}
    100% {border-radius: 20px;}
}

@keyframes glassBlur {
    from {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    to {
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }
}

@keyframes borderReflection {
    from {background-position: 150% 0;}
    to {background-position: -50% 0;}
}

@keyframes borderGlow{
    from {
        border-color: rgba(255, 255, 255, 0.18);
        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.25);
    }
    to {
        border-color: rgba(255, 255, 255, 0.45);
        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.25),
            0 0 15px rgba(255, 255, 255, 0.08);
    }
}

@keyframes bounceArrow{
    0%, 100%{ transform: translateX(-50%) translateY(0); }
    50%{      transform: translateX(-50%) translateY(12px); }
}


/*
* Classes utilitaires
*/
.bounce{
    -webkit-transition: transform 0.2s ease;
    -moz-transition:    transform 0.2s ease;
    -ms-transition:     transform 0.2s ease;
    -o-transition:      transform 0.2s ease;
    transition:         transform 0.2s ease;
}

.bounce:hover{
    -webkit-transform:   scale(1.05);
    -moz-transform:      scale(1.05);
    -ms-transform:       scale(1.05);
    -o-transform:        scale(1.05);
    transform:           scale(1.05);
    cursor:              pointer;
}


/*
* Architecture générale du site
*/
#background-img{
    position:           fixed;
    top:                0;
    left:               0;
    z-index:            -1;
    width:              100%;
    min-height:         100vh;
    background:         url('../img/bkg1.jpg') top center / cover no-repeat fixed;
}

#background-img.background-bkg2 {
    background-image: url("../img/bkg2.jpg");
}

#header, #about, #plays, #agenda, #contact, #archives{
    display:            block;
    width:              100%;
    min-height:         100vh;
    min-height:         100dvh;
    position:           relative;
}

#about, #plays, #agenda, #contact, #archives{
    box-sizing:         border-box;
    padding:            clamp(70px, 8vw, 150px) 5% 40px;
}
#about{background-color: #e8e8e8;}
#agenda{background-color: #fd8455; padding-top: 0px;}
#plays{
    background-repeat: repeat-x, repeat;
    background-position: top center;
    padding-bottom: 10%;
}
#contact{
    padding-top:        12%;
    padding-bottom:     15%;
}
#archives{
    background-color: #e4e3ef;
    padding-top: 0;
    padding-bottom: 15%;
    overflow: hidden;
}

/* Rideau de transition (about / plays) */
#about, #plays{
    overflow:           hidden; /* évite tout débordement du calque */
}
#about::before, #plays::before{
    content:            "";
    position:           absolute;
    top:                0;
    left:               0;
    width:              100%;
    height:             clamp(90px, 8vw, 146px);
    background-repeat:  repeat-x;
    background-position: top center;
    background-size:    auto 100%;
    z-index:             1;
    pointer-events:      none;
}
#about::before{
    background-image:   url('../img/about-top.png');
}
#plays::before{
    background-image:   url('../img/plays-top.png');
}

.wrappers{
    position:           relative;
    z-index:            2;
    width:              min(100%, 1600px);
    margin:             0 auto;
}
.headband{
    background-position:center top;
    background-repeat:  repeat-x;
}
.thread{
    position:           absolute;
    width:              100%;
    height:             100%;
    background-position:30% 0px;
    background-repeat:  no-repeat;
    z-index:            1;
    overflow:           hidden;
    top:                0px;
    left:               0px;
}

.title{
    width:              auto;
    height:             auto;
    position:           relative;
    margin:             0px 0px 80px 0px;
}
.title h1{opacity:0;}
.title img{
    position:           absolute;
    width:              150px;
    left:               -30px;
    top:                -10px;
    opacity:            0;
}
.title-slide{
    animation:          slideRight 0.3s normal;
    animation-fill-mode:forwards;
}
.titleimg-slide{
    animation:          slideLeft 0.3s normal;
    animation-fill-mode:forwards;
}

/* Bandeaux décoratifs colorés (transition entre sections) */
.shape-overlay{
    position: absolute;
    width: 110%;
    height: 20%;
    overflow: hidden;
    top: -20%;
    left: -10%;
}

.shape{
    position: absolute;
    transform: rotate(-5deg);
    width: 110%;
    height: 100%;
    bottom: -52%;
    left:  1px;
    z-index: 2;
}

#agenda .shape{background-color: #fd8455;}
#contact .shape-overlay{
    top: 0;
}
#contact .shape{
    background-color: #fd8455;;
    transform: rotate(-5deg);
    bottom: 130px;
}
#archives .shape{background-color: #e4e3ef;}
#footer .shape{background-color: #191e21;}
#footer .shape-overlay{
    height: 50%;
    top:  -50%;
}

/* Effet "verre dépoli" réutilisé sur plusieurs sections */
.glassbox{
    animation: glassBlur 6s ease-in-out infinite alternate, borderGlow 3s ease-in-out infinite alternate;
    min-width: 0;
    padding: 1.5rem;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 25px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.25),
        inset 0 1px 1px rgba(255, 255, 255, 0.15);
}
.glassbox::before{
   content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        transparent 40%,
        rgba(255, 255, 255, 0.9) 50%,
        transparent 60%,
        transparent 100%
    );
    background-size: 300% 100%;
    animation: borderReflection 4s linear infinite;
    /* On ne garde que la bordure */
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
}


/*
* Navigation (desktop + mobile)
*/
#navbar{
    width:              auto;
    height:             auto;
    background:         #181f27 url('../img/logo.png') 10px 10px/30px no-repeat;
    position:           fixed;
    z-index:            10;
    right:              10px;
    top:                30px;
    border-radius:      5px;
    opacity:            0.8;
    padding:            10px 10px 10px 10px;
    color:              #fff;
    display:            none;
}
#navbar div{
    margin-bottom:      10px;
    padding-left:       35px;
    font-size:          1.4em;
    font-variant-caps:  small-caps;
}
#navbar a{
    display:            block;
    color:              #fff;
}
#navbar a:hover{background-color: #fff; color: #181f27;}
.navbar-slide-on{
    animation:          navbarSlideOn 0.3s normal;
    animation-fill-mode:forwards;
}
.navbar-slide-off{
    animation:          navbarSlideOff 0.3s normal;
    animation-fill-mode:forwards;
}

#actuality{
    z-index:            10;
    padding:            10px;
    border-radius:      5px;
    position:           fixed;
    bottom:             10px;
    right:              10px;
    background-color:   #c9dce4;
    color:              #327d9a;
    opacity:            0.5;
}

#smartphone-navbar-icon{
    display:            none;
    position:           fixed;
    top:                5px;
    left:               5px;
    background:         #181f21;
    border-radius:      4px;
    padding:            8px 14px;
    color:              #fff;
    font:               normal 1.2em 'PlayfairDisplay-Regular';
    z-index:            1001;
    cursor:             pointer;
}
#smartphone-navbar-icon::before{
    content:            "☰ Menu";
}
#smartphone-navbar-icon.menu-open::before{
    content:            "✕ Fermer";
}

#smartphone-navbar{
    display:            none;
    flex-direction:     column;
    align-items:        center;
    justify-content:    center;
    position:           fixed;
    top:                0;
    left:               0;
    width:              100vw;
    height:             100vh;
    background:         #181f21;
    z-index:            1000;
}
#smartphone-navbar-icon.menu-open #smartphone-navbar{
    display:            flex;
}

#smartphone-navbar a{
    display:            block;
    color:              #fff;
    padding:            12px;
    font-size:          1.4em;
}
#smartphone-navbar a:hover{
    background-color:   #fff;
    color:              #181f21;
}


/*
* Éléments HTML génériques
*/
h1{
    color:              #1C1E22;
    font-family:        'CormorantGaramond';
    font-size:          clamp(2rem, 6vw, 6rem);
    position:           relative;
    text-transform:     uppercase;
}
img{
    max-width:          100%;
    height:             auto;
}
a{text-decoration: none;}
.btn:hover, .plays-button:hover {
    cursor: pointer;
}
label{
    position:           relative;
    display:            block;
    color:              #fff;
    margin-top:         10px;
}
.input-wrapper{
    position: relative;
    margin-bottom: 20px;
}
input[type="text"], input[type="email"], textarea{
    border-radius:      3px;
    padding:            10px;
    background-color: transparent;
    border: 1px solid #000;
}
input[type="text"]:hover, input[type="text"]:focus, input[type="email"]:focus, input[type="email"]:hover, textarea:hover{background-color: #fff;}
input[type="text"], input[type="email"]{
    width:              100%;
    height:             30px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 30px;
    padding: 12px 45px 12px 15px;
    color: #000;
    font-size: 14px;
    outline: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}
textarea{
    min-width:          100%;
    min-height:         10vh;
    resize:             none;
    display:            block;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 30px;
    padding: 12px 45px 12px 15px;
    color: #000;
    font-size: 14px;
    outline: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}
.input-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    opacity: 0.6;
    pointer-events: none;
    filter: brightness(0) invert(1);
}
.textarea-wrapper .input-icon {
    top: 20px;
    transform: none;
}
.input-wrapper input:focus, .input-wrapper textarea:focus {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.45);
    box-shadow:
        0 0 15px rgba(255, 255, 255, 0.08),
        inset 0 0 10px rgba(255, 255, 255, 0.03);
}
input::placeholder, textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

blockquote{
    display:            inline-block;
    text-align:         justify;
    position:           relative;
    max-width:          90%;
    font-size:          clamp(0.9rem, 2.5vw, 1.1rem);
}

.btn, .plays-button{
    width:              95%;
    display:            block;
    font-size:          1.2em;
    color:              #000;
    text-align:         center;
    background-color: #fff;
    background-repeat:  no-repeat;
    background-position:center;
    background-size:    contain;
    min-height:         40px;
    margin: 0.5rem auto 5px auto;
    box-shadow: 3px 3px 0 #da666d;
    border-radius: 5px;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
    border:  none;
}
.btn:active, .plays-button:active{
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 #da666d;
}


/*
* Header
*/
#header{
    background-position:center -15vh;
    background-size:    cover;
    background-repeat:  no-repeat;
    width:              100%;
    background-image:   url('../img/header-bkg-back.png');
    position:           relative;
    text-align:         center;
}
#header-title{
    display:            block;
    position:           relative;
    font:               normal 10vw "Caveat", "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:          clamp(2.8rem, 13vw, 7rem);
    color:              #fff;
    padding-top:        10vh;
    text-align:         center;
    text-shadow:        #fff 1px 0 10px;
    animation:          pulsation 4s infinite alternate;
}
#header-title img{
    width:              10%;
    transform:          rotate(20deg);
    vertical-align:     middle;
    margin-right:       7px;
    animation:          rotate_ 4s infinite alternate;
}
.header-word-desktop, .header-word-mobile{
    padding:            20vh clamp(5%, 20vw, 30%) 0% clamp(5%, 20vw, 30%);
    display:            block;
    color:              #fff;
    position:           relative;
}
.header-word-mobile{display: none;}
#header-nav{
    position:           absolute;
    width:              94%;
    margin:             0 3% 0 3%;
    bottom:             10%;
}
#header-nav a{
    font:               normal 1.4em "CormorantGaramond", "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:          clamp(0.85rem, 2.2vw, 1.4em);
    display:            inline;
    color:              #fff;
    margin:             0 10px 0 10px;
    position:           relative;
    background:         linear-gradient(to top, #fff 2px, transparent 1px) no-repeat;
    background-size:    0 100%;
    transition:         background-size 0.3s;
}
#header-nav a:hover{background-size:100% 100%;}
#header-nav-icon{
    background:         url('../img/icons.png') 0px 0px no-repeat;
    display:            inline-block;
    width:              30px;
    height:             30px;
    vertical-align:     middle;
}
#scroll-arrow{
    display:             none;
    position:            absolute;
    bottom:              6%;
    left:                50%;
    transform:           translateX(-50%);
    width:               28px;
    height:              28px;
    z-index:             5;
    cursor:              pointer;
    animation:           bounceArrow 2.5s ease-in-out infinite;
}
#scroll-arrow::before{
    content:             "";
    position:            absolute;
    top:                 0;
    left:                0;
    width:               100%;
    height:              100%;
    border-right:        3px solid #fff;
    border-bottom:       3px solid #fff;
    transform:           rotate(45deg);
}


/*
* Page About
*/
#about-title{float: right;}
#blockquote-wrapper{
    display:            inline-block;
    text-align:         center;
    margin-bottom:      50px;
}
#about-team-wrapper{text-align:center; clear: both;}

.about-team-profil{
    box-sizing:         border-box;
    width:              25%;
    min-width:          155px;
    height:             auto;
    display:            inline-flex;
    flex-wrap:           wrap;
    margin:             0 2% 4% 2%;
    position:           relative;
    vertical-align:     top;
    text-align:         left;
    gap:                12px;
}
.about-team-profil img{
    flex:                1 1 0%;
    min-width:           0;
    aspect-ratio:        1 / 1;
    object-fit:          cover;
    border-radius:      20px;
    border:             1px #000 solid;
    animation:          arrondi 5s ease-in-out infinite;
}
.about-team-profil .team-name{
    flex:                0 0 auto;
    writing-mode:       tb-rl;
    text-orientation:   sideways;
    font-size:          1.6em;
    transform:          rotate(180deg);
}
.about-team-profil .team-txt{
    flex:                1 1 100%;
    text-align:         justify;
    font-size:           clamp(0.8rem, 2vw, 1rem);
}

.team-website a{color: #000;}
.team-website a:hover{text-decoration: underline;}


/*
* Page Pièces
*/
#plays h1{
    text-transform: uppercase;
    display: inline-block;
    padding: 0.5rem 4rem;
    background: linear-gradient(
        110deg,
        #6a0dad,
        #f15bb5,
        #ff8c42
    );
    color: #fff;
    border-radius: 999px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.6);
}
#plays-wrapper{
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    grid-auto-rows: auto;
    gap: 1.5rem;
    width: 80%;
    margin: 5vh auto;
    padding: 1.5rem;
}
.plays-intro{
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    text-align: justify;
    align-self: center;
    color: #fff;
}
.plays-grid {
    display: grid;
    grid-template-columns: 40% minmax(0, 60%);
    gap: 1.5rem;
    height: 100%;
    min-width: 0;
}
.plays-img {
    min-width: 0;
    height: 100%;
    overflow: hidden;
    border-radius: 12px;
}
.plays-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.plays-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.plays-name {
    font-size: 2.6em;
    text-transform: uppercase;
    font-variant-numeric: lining-nums;
    line-height: 0.9;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #fff;
}
.plays-text {
    line-height: 1.5;
    margin-bottom: 1.5rem;
    min-width: 0;
    overflow-wrap: break-word;
    font-size: clamp(0.85rem, 2.2vw, 1rem);
}
.plays-pdf{margin-top: auto;}
.plays-button{padding-top: 10px;}
.gallery-button, .newspapers-button{padding-top: 0;}


/*
* Page Agenda
*/
#agenda::before {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    top: 20%;
    left: 10%;
    border-radius: 50%;
    background: rgba(255, 220, 150, 0.45);
    filter: blur(100px);
    pointer-events: none;
}
#agenda::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    bottom: 25%;
    right: 10%;
    border-radius: 50%;
    background: rgba(180, 40, 20, 0.35);
    filter: blur(100px);
    pointer-events: none;
}
#agenda-title{float: right;}
#agenda h1{
    text-transform:     uppercase;
    color:              #fff;
}
#agenda-wrapper{
    display:            flex;
    width:              100%;
    gap:                5%;
}
#all-events-wrapper{
    display:            inline-block;
    width:              65%;
    vertical-align:     top;
    position:           relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.event-wrapper{
    position: relative;
    overflow: hidden;
    animation:
        glassBlur 6s ease-in-out infinite alternate,
        borderGlow 3s ease-in-out infinite alternate;
    min-width: 0;
    box-sizing: border-box;
    padding: 10px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.25),
        inset 0 1px 1px rgba(255, 255, 255, 0.2);
    text-align: center;
}
.event-date{
    text-transform:     uppercase;
    color:              #fff;
    position:           relative;
    margin-bottom:      10px;
    font-size:          1.6em;
    font-family:        "CormorantGaramond";
}
.event-hour{
    margin-bottom:      10px;
}
.event-date::after {
    content: "";
    position: absolute;
    width: 60%;
    height: 2px;
    background: white;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 10px;
}
.event-canceled::before {
    content: "ANNULÉ";
    position: absolute;
    z-index: 100;
    top: 30px;
    left: -50px;
    width: 220px;
    height: 40px;
    background: rgba(20, 160, 160, 0.65);
    color: white !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    transform: rotate(-45deg);
    padding-top: 5px;
    padding-left: 5px;
}
.event-description-title, #archived-event-title{
    color:              #000;
    font-size:          1.3em;
    text-overflow:      ellipsis;
    overflow:           hidden;
    white-space:        nowrap;
    margin-bottom:      10px;
    text-transform:     uppercase;
    font-weight:        bold;
}
.event-description-address, .event-description-price{
    font-size:          0.9em;
    text-overflow:      ellipsis;
    overflow:           hidden;
    white-space:        nowrap;
}

#archived-event-wrapper{
    display:            inline-block;
    background-color:   #F3F0EE;
    padding:            10px;
    border-radius:      5px;
    width:              25%;
    font-size:          0.9em;
    margin-top:         30px;
}
.archived-event span{
    color:              #68655f;
    font-style:         italic;
}


/*
* Page Contact
*/
#contact-title h1{
    display: inline-block;
    padding: 0.5rem 4rem;
    background: linear-gradient(
        110deg,
        #6a0dad,
        #f15bb5,
        #ff8c42
    );
    color: #fff;
    border-radius: 999px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.6);
}

#contact-box-wrapper {
    display: flex;
    gap: 40px;
    align-items: center;
    width: 80%;
    margin: auto;
    color: #fff;
}

#contact-box-1 {
    flex: 1;
}

#contact-box-2 {
    flex: 2;
}

.contact-box {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}
.contact-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;

    background: linear-gradient(
        90deg,
        #ff5a00,
        #ff0080
    );

    mask: center / contain no-repeat;
    -webkit-mask: center / contain no-repeat;
}
#contact-box-phone .contact-icon {
    mask-image: url('../img/phone.svg');
    -webkit-mask-image: url('../img/phone.svg');
}

#contact-box-mail .contact-icon {
    mask-image: url('../img/mail.svg');
    -webkit-mask-image: url('../img/mail.svg');
}

#contact-box-facebook .contact-icon {
    mask-image: url('../img/facebook.svg');
    -webkit-mask-image: url('../img/facebook.svg');
}
#contact-box-facebook{margin-bottom: 0;}
.contact-info {
    display: flex;
    flex-direction: column;
}
.contact-info p {
    margin: 0;
    font-size: 1.1em;
    font-weight: bold;
}

.contact-info span {
    margin-top: 3px;
}
#contact-form-wrapper{margin-top:40px;}

.telephone{
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

#contact-box-2 input[type="submit"] {
    width: 100%;
    margin-top: 10px;
    padding: 13px;
    border: none;
    border-radius: 15px;
    background: linear-gradient(
        90deg,
        #ff5a00,
        #ff0080
    );
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 5px 20px rgba(255, 60, 50, 0.25);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    font-size: 1.4em;
}
#contact-box-2 input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 25px rgba(255, 60, 50, 0.4);
}
#contact-box-2 input[type="submit"]:active {
    transform: translateY(2px) scale(0.98);
    box-shadow:
        0 2px 8px rgba(255, 60, 50, 0.25),
        0 0 20px rgba(255, 255, 255, 0.35);
}


/*
* Page Archives
*/
#archives::before {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    top: 20%;
    left: 10%;
    border-radius: 50%;
    background: rgba(40, 40, 40, 0.45);
    filter: blur(100px);
    pointer-events: none;
}
#archives::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    bottom: 25%;
    right: 10%;
    border-radius: 50%;
    background: rgba(50, 50, 50, 0.45);
    filter: blur(100px);
    pointer-events: none;
}
#archives-title{
    float: right;
    font-size: 2em;
}
#archives-flex {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 50px;
    width: 100%;
    text-align: center;
}
/* Une seule pièce */
#archives-flex:has(.archives-grid:only-child) {
    grid-template-columns: minmax(0, 60%);
    justify-content: center;
}
.archives-grid {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 30px;
    min-width: 0;
}
.archives-img {
    width: 100%;
    min-width: 0;
}
.archives-img img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}
.archives-name{
    font-size: 2em;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 20px;
}
.archives-season{
    margin-bottom: 5px;
}
.archives-text{
    margin-bottom: 15px;
}


/*
* Footer
*/
#footer{
    background-color:   #191E21;
    display:            block;
    text-align:         center;
    position:           relative;
    width:              100%;
    padding:            120px 0px 80px 0px;
}
#footer .shape-overlay{
    display:             none;
}
#footer::before{
    content:              "";
    position:             absolute;
    top:                  -140px;   /* était -80px */
    left:                 0;
    width:                100%;
    height:               140px;    /* était 80px */
    background-color:     #191e21;
    clip-path:            polygon(0% 100%, 100% 0%, 100% 100%);
    z-index:              1;
}
#footer-section-1, #footer-section-2, #footer-section-3{
    display:            inline-block;
    position:           relative;
    width:              25%;
    height:             auto;
    text-align:         left;
    vertical-align:     top;
    z-index:            2;
}
.footer-title{
    color:              #F7931E;
    font-size:          1.2em;
}
#footer-section-1 p, #footer-section-2 p, #footer-section-3 p{
    color:              #fff;
    font-size:          0.8em;
}
#footer-section-1{
    background:         url('../img/logo.png') left center no-repeat;
    padding-left:       90px;
    background-size: 70px 70px;
}
#footer-section-1 button{
    color:              #fff;
    font-size:          0.8em;
    font-family:        "CormorantGaramond";
    background-color:   transparent;
}
#footer-section-1 button:hover{text-decoration:underline;}
#button-legal-notice{all: unset;}
#button-legal-notice:hover{cursor: pointer;}
#footer a:hover{text-decoration: underline;}


/*
* Mentions légales
*/
#legal-notice{
    display:            none;
    position:           fixed;
    top:                4%;
    left:               4%;
    width:              90%;
    max-height:         90%;
    z-index:            1000;
    background-color:   #f8f4f1;
    border-radius:      5px;
    color:              #000;
    padding:            1rem;
    overflow-y:         auto;
    font-size:          1em;
    box-shadow:         0px 0px 6px 2px rgba(0,0,0,0.5);
}
#legal-notice h1{font-size: 3em;}
#legal-notice p{text-align: justify;}
#legal-notice h1 {
    font-size: 3em;
    margin-bottom: 1rem;
}
#legal-notice h2 {
    font-size: 1.8em;
    margin-top: 1.5rem;
    margin-bottom: 0.7rem;
}
#legal-notice h3 {
    font-size: 1.3em;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}
#legal-notice p {
    text-align: justify;
    margin-bottom: 0.8rem;
}


/*
* Messages
*/
.alert-message{
    display:            block;
    position:           fixed;
    padding:            10px;
    border-radius:      5px;
    font:               normal 1.2em 'CormorantGaramond';
    text-align:         justify;
    z-index:            100;
    top:                48%;
    left:               50%;
    transform:          translate(-50%, -50%);
    opacity:            0.8;
}
.alert-success{background-color:#5cb355;}
.alert-error{background-color:#e56a37;}


/**
 * ============================================================
 * MEDIA QUERIES
 * ============================================================
 */

/**
 * ============================================================
 * TABLETTES / PETITS DESKTOPS
 * ============================================================
 */
@media (max-width: 1200px) {

    .wrappers{ width: 94%; }

    /* Pièces : on passe à une seule colonne, le split image/texte
       interne (.plays-grid) reste en place pour l'instant */
    #plays-wrapper{
        grid-template-columns: 1fr;
        width: 90%;
    }

    /* Agenda : la grille de 3 colonnes dans 65% de largeur devient
       trop étroite, on passe à 2 colonnes */
    #all-events-wrapper{
        grid-template-columns: repeat(2, 1fr);
    }

    #contact-box-wrapper{width: 90%;}
    #archives-flex{width: 100%;}
}


/**
 * ============================================================
 * TABLETTES PORTRAIT / GRANDS MOBILES
 * ============================================================
 */
@media (max-width: 768px) {

    /* ---- Titres centrés ---- */
    #agenda-title, #about-title, #archives-title {
        float: none;
        text-align: center;
        margin: 0 0 50px 0;
    }

    /* ------------------------------------------------------
       HEADER
       ------------------------------------------------------ */
    #header-title{
        padding-top: clamp(80px, 14vh, 160px);
    }
    #header{background-position: center 20%;}
    .header-word-desktop{ display: none; }
    .header-word-mobile{ display: block; }
    #header-nav{display: none;}
    #smartphone-navbar-icon{display:block;}
    body.no-scroll{overflow: hidden;}
    #scroll-arrow{display: block;}

    /* ------------------------------------------------------
       ABOUT
       ------------------------------------------------------ */
    .about-team-profil{
        width:              45%;
        min-width:          140px;
    }

    /* ------------------------------------------------------
       CERCLES DE FOND (agenda / archives)
       trop grands une fois la colonne de contenu réduite
       ------------------------------------------------------ */
    #agenda::before, #agenda::after,
    #archives::before, #archives::after{
        width:              220px;
        height:             220px;
        filter:             blur(70px);
    }

    /* ------------------------------------------------------
       PIÈCES : image au-dessus du texte
       ------------------------------------------------------ */
    #plays-wrapper{
        width:              96%;
        padding:            0.5rem;
        margin-top:         0;
    }
    .plays-grid{
        grid-template-columns: 1fr;
    }
    .plays-img{
        height:             260px;
        margin-bottom:      1rem;
    }
    .plays-name{ font-size: 2em; }
    .glassbox{
        padding:            18px;
    }

    /* ------------------------------------------------------
       AGENDA : tout en colonne
       ------------------------------------------------------ */
    #agenda-wrapper{
        flex-direction:     column;
    }
    #all-events-wrapper{
        width:              100%;
        grid-template-columns: repeat(2, 1fr);
    }
    #archived-event-wrapper{
        width:              100%;
    }

    /* ------------------------------------------------------
       CONTACT : boîtes en colonne
       ------------------------------------------------------ */
    #contact .wrappers{padding-top: 35%; padding-bottom: 25%;}
    #contact-title{margin-bottom: 30px;}
    #contact-box-wrapper{
        flex-direction:     column;
        width:              90%;
    }
    #contact-box-1, #contact-box-2{
        flex:               none;
        width:              100%;
        padding:            16px;
    }
    .contact-box{
        width:              auto;
        font-size:          clamp(0.85rem, 2.8vw, 1.1em);
        margin-bottom:      15px;
    }
    #blockquote-wrapper{
        font-size:          clamp(0.85rem, 2.8vw, 1.1em);
        text-align:         justify;
        margin-bottom:      20px;
    }

    /* ------------------------------------------------------
       ARCHIVES : image au-dessus du texte, 1 colonne
       ------------------------------------------------------ */
    #archives .wrappers{padding-bottom: 50%;}
    #archives-flex{
        grid-template-columns: 1fr;
    }
    #archives-flex:has(.archives-grid:only-child){
        grid-template-columns: minmax(0, 90%);
    }
    .archives-grid{
        grid-template-columns: 1fr;
        text-align:         center;
    }
    .archives-img{
        max-width:          280px;
        margin:             0 auto;
    }

    /* ------------------------------------------------------
       FOOTER : sections empilées
       ------------------------------------------------------ */
    #footer-section-1, #footer-section-2, #footer-section-3{
        display:            block;
        width:              100%;
        text-align:         center;
        margin-bottom:      30px;
        padding-left:       0;
        background-position: center top;
        padding-top:        70px;
    }
}


/**
 * ============================================================
 * SMARTPHONES
 * ============================================================
 */
@media (max-width: 480px) {

    #about, #plays, #agenda, #contact, #archives{
        padding-left: 2%;
        padding-right: 2%;
    }
    .wrappers{ width: 96%; }
    #about blockquote{max-width: 100%;}

    /* About : une seule colonne */
    .about-team-profil{
        width:              80%;
        margin:             0 auto 6% auto;
        display:            inline-flex;
        flex-wrap:           wrap;
    }

    /* Cercles de fond encore plus discrets */
    #agenda::before, #agenda::after,
    #archives::before, #archives::after{
        width:              150px;
        height:             150px;
        filter:             blur(50px);
    }

    /* Glassbox : padding un peu plus généreux qu'à 380px mais
       plus raisonnable que les 25px du desktop */
    .glassbox, .event-wrapper{
        padding:            20px;
    }

    /* Bandeau "ANNULÉ" trop large pour les petites cartes */
    .event-canceled::before{
        width:              160px;
        height:             30px;
        font-size:          12px;
        top:                22px;
        left:               -40px;
    }
    #all-events-wrapper{
        grid-template-columns: 1fr;
    }

    /* Citations : les icônes décoratives débordent sur petit écran */
    blockquote::before, blockquote::after{
        display:            none;
    }

    /* Boutons / formulaire */
    button, input[type="submit"]{
        font-size:          1em;
    }

    #plays h1, #contact-title h1{
        font-size:          clamp(2.5rem, 7vw, 2.5rem);
        padding:            clamp(1rem, 5vw, 2rem);
    }

    #plays{padding-bottom: 30%;}
    #plays-title{margin-bottom: 20px;}
    .plays-img{margin-bottom: 0;}
    .plays-name{ font-size: 1.7em; text-align: center; }
    .archives-name{ font-size: 1.5em; }
}


/**
 * ============================================================
 * PETITS SMARTPHONES
 * ============================================================
 */
@media (max-width: 380px) {

    #header-title{ font-size: clamp(1.8rem, 12vw, 3rem); }

    .glassbox{ padding: 16px; }

    .about-team-profil{ width: 95%; }

    .plays-img{ height: 200px; }

    h1{ font-size: clamp(1.6rem, 8vw, 3rem); }
}