/*
Theme Name: Cie l'échauguette 2026 - Aurore GERMAIN
Theme URI: 
Author: Aurore GERMAIN
Author URI: 
Description: Conception du site par Aurore GERMAIN dans le cadre du projet Gobelins
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cie-lechauguette-2026-aurore-germain
Tags: 
*/

@font-face {
    font-family: 'Bebas Neue';
    src: url('./fonts/BebasNeue-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('./fonts/PlayfairDisplay-VariableFont_w.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('./fonts/PlayfairDisplay-Italic-VariableF.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('./fonts/Poppins-Medium (1).woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('./fonts/Poppins-Light (1).woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('./fonts/Poppins-Italic (1).woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

a {
    text-decoration: none;
}

a,
a:hover,
a:visited,
a:focus {
    text-decoration: none !important;
}

.carte-metteur {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
}

.overlay-metteur {
    background: rgba(36, 1, 1, 0.8);
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.carte-metteur:hover .overlay-metteur {
    opacity: 1;
    transform: translateX(0);
}

.carte-metteur.is-active .overlay-metteur {
    opacity: 1;
    transform: translateX(0);
}

.carte-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #590E1F;
    font-size: 18px;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 2;
}

.carte-metteur:hover .carte-plus {
    transform: translateX(4px);
}

.carte-metteur.is-active .carte-plus {
    opacity: 0;
}

.carte-metteur:hover .carte-plus,
.carte-metteur.is-active .carte-plus {
    opacity: 0;
}

.carte-atelier {
    background-color: #CCE1F0;
    background-image: url("img/Border-blue-illustration.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 32px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
    aspect-ratio: 1 / 1;
    height: 100%;
    width: 100%;
}

.carte-atelier:hover .overlay-atelier {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.overlay-carte-atelier {
    background: #0092CC;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.carte-atelier:hover .overlay-carte-atelier {
    opacity: 1;
    transform: translateX(0);
}

.carte-atelier.is-active .overlay-carte-atelier {
    opacity: 1;
    transform: translateX(0);
}

.carte-atelier-grid {
    grid-template-rows: 1fr 1fr;
    align-items: stretch;
}

.carte-atelier-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #0092CC;
    color: white;
    font-size: 18px;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 2;
}

.carte-atelier:hover .carte-atelier-plus {
    transform: translateX(4px);
}

.carte-atelier.is-active .carte-atelier-plus {
    opacity: 0;
}

.carte-atelier-ado {
    background-color: #CCE1F0;
    background-image: url("img/Border-framboise-illustration.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 32px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 1 / 1;
    height: 100%;
    width: 100%;
}

.carte-atelier-ado:hover .overlay-atelier-ado {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.overlay-carte-atelier-ado {
    background: #0092CC;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.carte-atelier-ado:hover .overlay-carte-atelier-ado {
    opacity: 1;
    transform: translateX(0);
}

.carte-atelier-ado.is-active .overlay-carte-atelier-ado {
    opacity: 1;
    transform: translateX(0);
}

.carte-atelier-ado-grid {
    grid-template-rows: 1fr 1fr;
    align-items: stretch;
}

.carte-atelier-ado-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #0092CC;
    color: white;
    font-size: 18px;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 2;
}

.carte-atelier-ado:hover .carte-atelier-ado-plus {
    transform: translateX(4px);
}

.carte-atelier-ado.is-active .carte-atelier-ado-plus {
    opacity: 0;
}


.gspb_container-gsbp-212b2e {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
    height: 100%;
}


.badge-essai {
    width: fit-content;
    border: 1px solid #150007;
    border-radius: 3px;
    padding: 8px 10px;
    letter-spacing: 1px;
    font-size: 12px;
    font-family: Poppins, sans-serif;
    text-transform: uppercase;
    margin: 0 auto 24px auto;
}

.faq-container {
    position: relative;
    overflow: visible;
    max-width: 800px;
    margin: 0 auto;
}

.swiper-pagination {
    right: 40px !important;
    left: auto !important;
}

.mfb-couleur-fond,
.mfb-couleur-bouton,
.mfb-couleur-numero {
    display: none;
}

.titre_publication_acf {
    font-size: 27px;
    color: #240101;
}

.mfb_date_heure {
    font-size: 18px;
    font-weight: 600;
    color: #240101;
}

.mfb_metteur_en_scene {
    font-weight: 200;
    color: #240101;
}

.mfb_distribution {
    font-size: 14px;
    font-weight: 200;
    list-style: disc;
}

.mfb_distribution p,
.mfb_distribution ul {
    column-count: 2;
    column-gap: 16px;
}

.boucle_mfb {
    width: 1200px !important;
}

/* En-tête de la grille */
.grille-header {
    display: flex;
    justify-content: flex-end;
    gap: 40px;
    padding: 8px 0;
    border-bottom: 1px solid #150007;
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
}

/* Ligne spectacle */
.grille-ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid #e0d8cc;
}

.grille-jour {
    font-size: 14px;
    margin: 0;
}

.grille-piece {
    font-size: 15px;
    margin: 4px 0;
}

.grille-desc {
    font-size: 13px;
    color: #555;
    margin: 0;
}

/* Champ radio aligné en ligne */
.forminator-col.radio-grille .forminator-field {
    display: flex !important;
    gap: 32px;
    justify-content: flex-end;
}

.forminator-col.radio-grille .forminator-radio-label {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
}

.forminator-col.radio-grille .forminator-label {
    display: none;
    /* cache le label du champ, géré par le HTML au-dessus */
}

.hero-photo-1,
.hero-photo-2,
.hero-photo-3,
.hero-photo-4,
.hero-photo-5,
.hero-photo-6 {
  width: clamp(110px, 12vw, 250px);
  height: auto;
  opacity: 0;
  filter: blur(12px);
  transition: opacity 0.8s ease, filter 0.8s ease, transform 0.8s ease;
}

/* Colonne gauche */
.hero-photo-3 {
  transform: rotate(4deg) scale(0.95);
  margin-top: 50px;
  margin-bottom: -10px;
  align-self: flex-start;
  margin-left: 55%; /* était 15% — pousse vers le centre */
}

.hero-photo-2 {
  transform: rotate(-6deg) scale(0.95);
  margin-bottom: -10px;
  align-self: flex-start;
  margin-left: 5%;
}
.hero-photo-1 {
  transform: rotate(-3deg) scale(0.95);
  align-self: flex-end;
  margin-left: 20%;
}

/* Colonne droite */

.hero-photo-4 {
  transform: rotate(-4deg) scale(0.95);
  margin-top: 40px; /* était 20px — descend */
  margin-bottom: -10px;
  align-self: flex-end;
  margin-right: 55%; /* était 15% — pousse vers le centre */
}
.hero-photo-5 {
  transform: rotate(-6deg) scale(0.95);
  margin-bottom: -10px;
  align-self: flex-end;
  margin-right: 15%; /* était 0% */
}
.hero-photo-6 {
  transform: rotate(5deg) scale(0.95);
  align-self: flex-start;
  margin-bottom: -10px;
  margin-right: 10%;
}

/* États visibles */
.hero-photo-1.is-visible { opacity: 1; filter: blur(0); transform: rotate(-3deg) scale(1); }
.hero-photo-2.is-visible { opacity: 1; filter: blur(0); transform: rotate(-6deg) scale(1); }
.hero-photo-3.is-visible { opacity: 1; filter: blur(0); transform: rotate(4deg)  scale(1); }
.hero-photo-4.is-visible { opacity: 1; filter: blur(0); transform: rotate(-4deg) scale(1); }
.hero-photo-5.is-visible { opacity: 1; filter: blur(0); transform: rotate(-6deg) scale(1); }
.hero-photo-6.is-visible { opacity: 1; filter: blur(0); transform: rotate(5deg)  scale(1); }

@media (max-width: 640px) {
  .hero-photo-1,
  .hero-photo-2,
  .hero-photo-3,
  .hero-photo-4,
  .hero-photo-5,
  .hero-photo-6 { display: none; }
}

@media (max-width: 768px) {
    .gspb_col-id-gsbp-218abc8 {
        width: auto !important;
        min-width: 20px !important;
        overflow: visible !important;
    }

    .gspb_text-id-gsbp-967f5ae {
        width: auto !important;
        overflow: visible !important;
        line-height: normal !important;
    }
}

html {
    scroll-behavior: smooth;
}

.heading-trait-apres,
.heading-trait-avant {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: flex-end;
}

.heading-trait-apres::after {
    content: '';
    flex: 1;
    height: 2px;
    background-color: #150007;
    margin-bottom: 14px;
}

.heading-trait-avant::before {
    content: '';
    height: 2px;
    flex: 1;
    background-color: #150007;
    margin-bottom: 14px;
    flex-shrink: 0;
}

.valeur-mot {
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 1s ease, transform 1s ease;
}

.valeur-mot.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Champs input */
.forminator-custom-form input[type="text"],
.forminator-custom-form input[type="email"],
.forminator-custom-form input[type="tel"] {
    background: transparent;
    border: none;
    border-bottom: 1px solid #F46969;
    border-radius: 0;
    padding: 8px 0;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #150007;
    width: 100%;
}

/* Placeholder */
.forminator-custom-form input::placeholder {
    color: #5D1212;
    opacity: 0.7;
    font-style: italic;
}

/* Labels */
.forminator-custom-form .forminator-label {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #5D1212;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Boutons radio */
.forminator-custom-form .forminator-radio input[type="radio"] {
    accent-color: #5D1212;
}

/* Encadré instructions */
.forminator-custom-form .forminator-html p {
    border-left: 3px solid #5D1212;
    padding-left: 16px;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
}

/* Bouton submit */
.forminator-custom-form .forminator-btn-submit {
    background-color: #5D1212;
    color: #FAF6EE;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    border: none;
    padding: 12px 32px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.forminator-custom-form .forminator-btn-submit:hover {
    background-color: #F46969;
}

/* Focus */
.forminator-custom-form input:focus {
    outline: none;
    border-bottom: 2px solid #5D1212;
}

.forminator-ui .titre-section-form .forminator-title {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 47px;
    color: #5D1212;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #5D1212;
    padding-bottom: 8px;
    padding-top: 30px !important;
    margin-top: 24px;
}

.forminator-ui .f-input .forminator-input {
    background: transparent;
    border: none;
    border-top: 1px solid #F46969;
    border-bottom: 1px solid #F46969;
    border-radius: 7px;
    padding: 8px 12px;
    box-shadow: none;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #150007;
}

.forminator-ui .f-input .forminator-input:focus {
    outline: none;
    border-top: 2px solid #F46969;
    border-bottom: 2px solid #F46969;
    box-shadow: none;
}

.forminator-ui .f-input .forminator-input::placeholder {
    color: #5D1212;
    opacity: 0.6;
    font-style: italic;
}

.forminator-custom-form input.forminator-input {
    background: transparent !important;
    border: none !important;
    border-top: 1px solid #F46969 !important;
    border-bottom: 1px solid #F46969 !important;
    border-radius: 7px !important;
    padding: 8px 12px !important;
    box-shadow: none !important;
}

.f-encadre {
    background: #FFFFFF;
    border-left: 3px solid #590E1F;
    border-radius: 7px;
    padding: 32px;
}

.f-grille-header .grille-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid #F46969;
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.f-grille-header .grille-header-droite {
    display: flex;
    gap: 120px;
}

.f-grille-header .grille-header-label {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #150007;
}

.f-radio-ligne .forminator-field {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-bottom: 1px solid #F46969;
    padding: 16px 0;
}

.f-radio-ligne .forminator-radio {
    display: flex;
    justify-content: flex-end;
}

.f-radio-ligne .forminator-radio-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.f-radio-ligne div[role="radiogroup"] {
    gap: 40px;
}


.f-radio-ligne .forminator-radio-inline {
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: center !important;
    gap: 30px;
}

.f-radio-ligne .forminator-radio-bullet {
    order: 1;
}

.f-radio-ligne .forminator-radio-label {
    order: 2;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #150007;
    text-align: center;
}

.f-radio-ligne .forminator-radio-bullet~span {
    margin-left: 0 !important;
}

/* Formulaire contact - override spécifique */
#forminator-module-2251 input.forminator-input {
    background: #FAF6EE !important;
    border: none !important;
    border-radius: 7 !important;
    padding: 10px !important;
    box-shadow: none !important;
}

/* ==========================================================================
   CARROUSEL SPECTACLES
   ========================================================================== */

.carrousel-spectacles {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}


.carrousel-viewport {
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

/* Override contrainte WordPress */
[class*="wp-container-core-query-is-layout"],
.carrousel-spectacles .wp-block-query {
    max-width: 800px !important;
    width: 100% !important;
}

ul.wp-block-post-template.columns-7 {
    display: flex !important;
    flex-wrap: nowrap !important;
    transition: transform 0.4s ease !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
}

ul.wp-block-post-template.columns-7>li {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.carrousel-btn {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #590e1f;
    background: transparent;
    color: #590e1f;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, color 0.3s ease;
}

.carrousel-btn:hover {
    background: #590e1f;
    color: #FAF6EE;
}

.carrousel-btn--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.carrousel-btn svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 768px) {
    .carrousel-spectacles {
        gap: 8px;
    }

    .carrousel-btn {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }

    .carrousel-btn svg {
        width: 16px;
        height: 16px;
    }
}

/* Contrainte largeur section carrousel */

@media (max-width: 768px) {
    .carrousel-spectacles {
        padding: 0 8px;
    }
}