/* =========================================================
   Morgane — Danse & Mouvement
   Thème "mystique / bohème" : vert profond, ivoire, rose poudré, or
   ========================================================= */

:root {
    --c-dark: #1c2116;
    --c-dark-soft: #232a1d;
    --c-cream: #f8f3ea;
    --c-cream-soft: #efe6d6;
    --c-rose: #c1897f;
    --c-rose-dark: #a66c62;
    --c-gold: #b3925a;
    --c-text: #2c2a22;
    --c-text-light: #f8f3ea;

    --font-display: 'Cormorant Garamond', serif;
    --font-script: 'Sacramento', cursive;
    --font-body: 'Poppins', sans-serif;
}

html {
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 15px;
    line-height: 1.7;
    color: var(--c-text);
    background-color: var(--c-cream);
    overflow-x: hidden;
    position: relative;
}

textarea {
    resize: vertical;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--c-rose-dark);
    transition: color 250ms ease-in-out;
}

a:hover,
a:focus {
    color: var(--c-gold);
}

.grecaptcha-badge {
    opacity: 0;
}

.error404 {
    text-align: center !important;
    padding: 90px 20px !important;
    font-family: var(--font-display);
    font-size: 22px;
}

/* ===== Edit mode ===== */
#editMode {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}
#editMode a {
    background-color: var(--c-dark);
    border-radius: 0 0 8px 0;
    display: block;
    padding: 10px 12px;
    opacity: 0.75;
    font-size: 13px;
    color: var(--c-text-light);
}
#editMode a:hover {
    opacity: 1;
    color: var(--c-text-light);
    text-decoration: none;
}

/* ===== Go top ===== */
@keyframes go-top-bounce {
    from { transform: translateY(0); }
    to   { transform: translateY(-10px); }
}
#go-top {
    display: none;
    position: fixed;
    right: 25px;
    bottom: 30px;
    cursor: pointer;
    z-index: 20;
    width: 48px;
    height: 48px;
}
#go-top:hover #go-top-content {
    animation: go-top-bounce 0.5s ease infinite alternate;
    background-color: var(--c-rose);
}
#go-top-content {
    background: var(--c-dark);
    color: var(--c-text-light);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(28, 33, 22, 0.35);
    transition: background-color 250ms ease-in-out;
}

/* Largeur/padding alignés sur templateWidth=1170 / templatePadding=30
   (convention observée sur tous les layouts existants — cf. THEME-MORGANE.md) */
.center {
    max-width: 1170px;
    padding: 0 30px;
    margin: 0 auto;
}

/* =========================================================
   Header
   ========================================================= */
#header {
    background-color: var(--c-dark);
    padding: 14px 0;
    position: relative;
    z-index: 30;
    transition: background-color 250ms ease-in-out, padding 200ms ease-in-out, box-shadow 250ms ease-in-out;
}

#header-content {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

#header.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

#header.sticky.scroll {
    padding: 8px 0;
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.5);
}

/* Page d'accueil (#tpl_home) : le header reste transparent tant qu'on n'a pas scrollé,
   pour laisser voir la photo du hero derrière le menu (cf. #hero dans tpl-home.css).
   .scroll est ajoutée par assets/js/front/front.js au-delà de 100px de scroll — déjà
   en place, aucun JS supplémentaire nécessaire. Sur les pages intérieures (#tpl_cms),
   le header reste toujours opaque.
   Scopé à .sticky : en dessous de 767px, front.js ne passe jamais le header en
   position:fixed (cf. "mobileWidth" dans front.js), donc il reste dans le flux normal
   au-dessus du hero au lieu de le survoler — sans ce scope, la transparence se voyait
   comme une simple bande grise sur le fond ivoire de la page plutôt que sur la photo. */
body:has(#tpl_home) #header.sticky:not(.scroll) {
    background-color: rgba(0, 0, 0, 0.32);
}

/* Logo (thème → texte, pas d'image : à remplacer par un logo réel si besoin) */
#logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--c-text-light);
}
#logo:hover {
    text-decoration: none;
    color: var(--c-text-light);
}

#logo-icon {
    display: inline-flex;
    align-items: center;
    color: var(--c-gold);
    font-size: 22px;
    transition: transform 600ms ease-in-out;
}
#logo:hover #logo-icon {
    transform: rotate(35deg);
}

#logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

#logo-name {
    font-family: var(--font-script);
    font-size: 34px;
    line-height: 1;
}

#logo-baseline {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--c-gold);
    margin-top: 4px;
}

#header.sticky.scroll #logo-name {
    font-size: 26px;
}

#header-button {
    display: none;
    order: 3;
}

#header-menu {
    display: flex;
    align-items: center;
    gap: 30px;
}

/* Navigation (flexnav — voir assets/js/front/jquery-flexnav.js) */
#navigation {
    display: flex;
}

ul.flexnav {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

#navigation .flexnav li {
    position: relative;
}

#navigation .flexnav li a {
    display: inline-block;
    padding: 8px 16px;
    color: var(--c-text-light);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    position: relative;
}

#navigation .flexnav li a:hover,
#navigation .flexnav li a:focus {
    color: var(--c-gold);
    text-decoration: none;
}

/* Sélectionné : on garde le texte blanc, seul le soulignement doré (::after ci-dessous) marque l'état actif */
#navigation .flexnav li a.selected {
    color: var(--c-text-light);
    text-decoration: none;
}

#navigation .flexnav li a::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 3px;
    height: 1px;
    background: var(--c-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease-in-out;
}

#navigation .flexnav li a:hover::after,
#navigation .flexnav li a.selected::after {
    transform: scaleX(1);
}

#navigation .flexnav li.item-with-ul > ul {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--c-dark);
    padding: 8px 0;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

/* Flèches injectées par flexnav.js (.touch-button) : masquées par défaut, gérées en mobile plus bas */
.touch-button {
    display: none;
}

#header-social {
    display: flex;
    align-items: center;
    gap: 14px;
    order: 2;
}

#header-social a,
#footer-social a {
    color: var(--c-text-light);
    font-size: 15px;
    display: inline-flex;
    text-decoration: none;
    transition: color 250ms ease-in-out, transform 250ms ease-in-out;
}

#header-social a:hover,
#footer-social a:hover {
    color: var(--c-gold);
    text-decoration: none;
    transform: scale(1.2);
}

.menu-button {
    position: relative;
    color: var(--c-text-light);
    background: transparent;
    border: 0;
    font-size: 20px;
    padding: 6px;
    margin: 0;
    line-height: 1;
}
.menu-button:hover {
    color: var(--c-gold);
}
.menu-button .fa-bars {
    transition: transform 250ms ease-in-out;
}
.menu-button.active .fa-bars {
    transform: rotate(90deg);
}

/* =========================================================
   Footer
   ========================================================= */
#footer {
    background-color: var(--c-dark);
    color: var(--c-text-light);
    padding: 40px 0;
}

#footer-content {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

#footer-social {
    display: flex;
    align-items: center;
    gap: 14px;
}

#footer-tagline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(248, 243, 234, 0.85);
    text-align: center;
}
#footer-tagline span:not(:first-child)::before {
    content: '·';
    margin: 0 12px;
    color: var(--c-gold);
}

#footer-moon {
    display: inline-flex;
    align-items: center;
    font-size: 22px;
    color: var(--c-gold);
    flex: 0 0 auto;
}

#sub-footer {
    background-color: #14180f;
    color: rgba(248, 243, 234, 0.6);
    text-align: center;
    padding: 10px 0;
    font-size: 10px;
    letter-spacing: 0.5px;
}
#sub-footer a {
    color: rgba(248, 243, 234, 0.85);
}
#sub-footer span.pulse {
    color: var(--c-rose);
}

/* =========================================================
   Typographie générique / contenu CMS
   ========================================================= */
h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--c-dark);
}

h1, .title_one {
    font-size: 52px;
    line-height: 1.15;
}

h2, .title {
    font-size: 34px;
    line-height: 1.2;
}

.title_one,
.title {
    padding-bottom: 18px;
}

.introduction {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--c-gold);
    padding-bottom: 10px;
}

.body {
    font-size: 15px;
    font-weight: 300;
    color: var(--c-text);
}

/* Place l'eyebrow (.introduction) au-dessus du titre sans changer le DOM généré par le CMS */
.block_entete_content,
.block_text,
.block_title {
    display: flex;
    flex-direction: column;
}
.block_entete_content .introduction,
.block_text .introduction,
.block_title .introduction {
    order: -1;
}

/* Bouton générique (lien de bloc / CTA) — dégradé rose foncé -> rose clair (comme la maquette).
   Au survol : le dégradé glisse (shimmer) + halo doux, plutôt qu'un déplacement vertical
   (effet "template" trop générique). */
.bt-learn-more,
.btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding: 13px 30px;
    background: linear-gradient(120deg, var(--c-rose-dark) 0%, var(--c-rose) 50%, var(--c-rose-dark) 100%);
    background-size: 220% auto;
    background-position: 0% 50%;
    border: 1px solid transparent;
    border-radius: 50px;
    color: var(--c-text-light) !important;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: center;
    transition: background-position 600ms ease-in-out, box-shadow 300ms ease-in-out;
}
.bt-learn-more::after {
    content: '\2192';
    display: inline-block;
    transition: transform 250ms ease-in-out;
}
.bt-learn-more:hover,
.bt-learn-more:focus,
.btn-submit:hover,
.btn-submit:focus {
    color: var(--c-text-light) !important;
    text-decoration: none;
    background-position: 100% 50%;
    box-shadow: 0 10px 24px -12px rgba(166, 108, 98, 0.65);
}
.bt-learn-more:hover::after {
    transform: translateX(4px);
}

.btn-submit {
    border: 0;
    cursor: pointer;
}

/* =========================================================
   Zones / colonnes / blocs (moteur CMS générique)
   ========================================================= */
/* Padding en haut uniquement par défaut : le bas de chaque Zone est géré par le haut de la
   suivante, pour éviter un double espace (et une bande vide) à chaque jonction de sections. */
.zone {
    position: relative;
    padding-top: 70px;
}

/* "full"/"center" est porté par la div interne à la Zone (voir Core/front/zones.html.twig :
   <div class="zone container-fluid ..."><div class="full row">...</div></div>), pas par .zone
   elle-même : le sélecteur doit cibler cette div, pas .zone.full. */
.full.row .col {
    padding-left: 0;
    padding-right: 0;
}

.summary {
    display: flex;
    flex-wrap: wrap;
}

.block {
    margin-bottom: 30px;
}
.col > .block:last-child {
    margin-bottom: 0;
}

.block_entete {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--c-dark);
    color: var(--c-text-light);
    min-height: 70vh;
    padding: 60px 20px;
}
.block_entete .title,
.block_entete h2 {
    color: var(--c-text-light);
}
.block_entete_background {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.block_entete_background::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 24, 15, 0.55) 0%, rgba(20, 24, 15, 0.75) 100%);
}
.block_entete_content {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    align-items: center;
}

/* Le bloc "Média" rend title -> visual_container -> body dans le DOM (media.html.twig) ; on
   remonte visuellement la photo en premier via flex/order, comme pour .block_entete_content /
   .block_text / .block_title plus haut. */
.block_media {
    display: flex;
    flex-direction: column;
    text-align: center;
}
.block_media .visual_container {
    order: -1;
    overflow: hidden;
}
.block_media .visual_container img {
    display: block;
    width: 100%;
    transition: transform 600ms ease-in-out;
}
.block_media .visual_container:hover img {
    transform: scale(1.06);
}

.block_separator {
    margin: 0;
}

.block_title {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 30px;
    align-items: center;
}
/* icône lotus (Font Awesome fa-spa) au-dessus du titre */
.block_title::before {
    content: '\f5bb';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    order: -2;
    display: block;
    line-height: 1;
    font-size: 28px;
    margin: 0 auto 14px;
    color: var(--c-gold);
}
/* traits fins de part et d'autre du titre ("— Mes disciplines —")
   width: 100% est nécessaire : .block_title a align-items:center (flex-direction column),
   donc sans largeur explicite le <h1> se réduit à la largeur de son texte (shrink-to-fit)
   et les traits (flex-grow) n'ont plus d'espace disponible pour s'étendre. */
.block_title .title_one,
.block_title .title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 100%;
}
.block_title .title_one::before,
.block_title .title_one::after,
.block_title .title::before,
.block_title .title::after {
    content: '';
    flex: 1 1 auto;
    max-width: 56px;
    height: 1px;
    background-color: var(--c-gold);
}

/* Animation générique au scroll (déclenchée par assets/js/front/front.js sur .animated-zone) */
.animated-zone {
    opacity: 0;
}
.animated-zone.animated {
    opacity: 1;
}

.zoom {
    transition: transform 800ms ease-in-out;
    transform-origin: 50% 50%;
}
.zoom:hover {
    transform: scale(1.08);
}

.pulse {
    display: inline-block;
    animation: pulse-heart 1.2s infinite cubic-bezier(0.66, 0, 0, 1);
}
@keyframes pulse-heart {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}

.breadcrumb {
    background-color: transparent;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* =========================================================
   Modules (Event / Gallery / Form)
   ========================================================= */
.event-teaser,
.event-index,
.gallery-teaser {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

.event-teaser .event,
.event-index .event,
.gallery-teaser .gallery {
    flex: 1 1 300px;
    max-width: 360px;
    background-color: #ffffff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 20px 40px -25px rgba(28, 33, 22, 0.4);
    transition: transform 300ms ease-in-out, box-shadow 300ms ease-in-out;
}
.event-teaser .event:hover,
.event-index .event:hover,
.gallery-teaser .gallery:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 44px -20px rgba(28, 33, 22, 0.45);
}

.event-teaser .visual_container,
.event-index .visual_container,
.gallery-teaser .visual_container {
    overflow: hidden;
}
.event-teaser .visual_container img,
.event-index .visual_container img,
.gallery-teaser .visual_container img {
    display: block;
    width: 100%;
    transition: transform 600ms ease-in-out;
}
.event-teaser .visual_container:hover img,
.event-index .visual_container:hover img,
.gallery-teaser .visual_container:hover img {
    transform: scale(1.06);
}

.event-teaser .detail,
.event-index .detail,
.gallery-teaser .gallery h2 {
    padding: 20px 22px;
}

.event-teaser .date,
.event-index .date {
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--c-gold);
    margin-bottom: 6px;
}

.event-teaser h2,
.event-index h2,
.gallery-teaser h2 {
    font-size: 22px;
    padding: 0 22px;
    margin: 0;
    color: var(--c-dark);
}

.gallery-teaser .bt-learn-more,
.event-teaser .bt-learn-more,
.event-index .bt-learn-more {
    margin: 0 22px 22px;
}

.form-view {
    max-width: 760px;
    margin: 0 auto;
    text-align: left;
}
.form-view fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 20px;
}
.form-view legend {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--c-dark);
    padding-bottom: 10px;
}
.form-view label {
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--c-dark);
}
.form-view .form-control {
    border: 1px solid var(--c-cream-soft);
    border-radius: 2px;
    background-color: #ffffff;
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: 14px;
}
.form-view .form-control:focus {
    border-color: var(--c-gold);
    box-shadow: none;
}

/* =========================================================
   Responsive
   ========================================================= */
@media screen and (max-width: 991px) {
    .zone {
        padding-top: 50px;
    }

    h1, .title_one { font-size: 40px; }
    h2, .title { font-size: 28px; }
}

@media screen and (max-width: 767.98px) {
    /* 30px de marge de chaque côté (pensés pour un container de 1170px) mangent une part
       importante d'un écran de ~375-430px — resserré pour toutes les zones non "pleine
       largeur" (disciplines-title/disciplines sur l'accueil, contenu des pages tpl-cms…). */
    .center {
        padding: 0 16px;
    }

    #header-content {
        flex-wrap: wrap;
        /* gap:30px (règle de base) vaut aussi comme espacement VERTICAL entre lignes une fois
           replié ici — on ne garde qu'un espacement horizontal réduit entre logo / social /
           bouton sur la 1ère ligne (30px est trop large pour 3 items sur un petit écran). */
        row-gap: 0;
        column-gap: 14px;
    }

    #header-button {
        display: block;
        /* La règle de base (hors media query) met order:3 ; on le repasse en position 3
           (après logo puis social) pour qu'il reste sur la 1ère ligne, à côté du logo. */
        order: 2;
    }

    /* #header-menu enveloppe #navigation ET #header-social (cf. layout.html.twig) : on le
       "dissout" avec display:contents pour que ses deux enfants deviennent des items flex
       directs de #header-content. #header-social passe en order:1 pour rester sur la 1ère
       ligne, entre le logo (order 0) et le bouton (order 2) ; #navigation garde son
       flex-basis:100% et un order plus élevé pour forcer sa propre ligne en dessous (repliée
       à ~0 de haut quand ul.flexnav est fermé). */
    #header-menu {
        display: contents;
    }

    #navigation {
        display: block;
        order: 3;
        flex: 1 0 100%;
        width: 100%;
    }

    #header-social {
        order: 1;
    }

    ul.flexnav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        background-color: var(--c-dark);
        margin-top: 14px;
    }
    ul.flexnav.flexnav-show {
        display: flex;
    }

    #navigation .flexnav li a {
        display: block;
        padding: 14px 25px;
    }
    /* En mobile, le lien est en display:block (pleine largeur) : le soulignement ::after
       (calé sur les bords de l'élément, cf. règle générique plus haut) s'étire alors sur
       toute la ligne au lieu de souligner le texte. On le désactive ici et on marque l'état
       sélectionné avec une barre verticale dorée, plus lisible sur un item pleine largeur. */
    #navigation .flexnav li a::after {
        content: none;
    }
    #navigation .flexnav li a.selected {
        padding-left: 22px;
        border-left: 3px solid var(--c-gold);
        background-color: rgba(179, 146, 90, 0.12);
    }
    #navigation .flexnav li.item-with-ul {
        position: relative;
    }
    #navigation .flexnav li.item-with-ul > ul {
        position: static;
        box-shadow: none;
        background: rgba(0, 0, 0, 0.15);
        display: none;
    }
    #navigation .flexnav li.item-with-ul > ul.flexnav-show {
        display: block;
    }
    #navigation .flexnav li.item-with-ul > .touch-button {
        display: block;
        position: absolute;
        top: 4px;
        right: 10px;
        padding: 10px;
        color: var(--c-text-light);
        cursor: pointer;
    }

    #footer {
        padding: 28px 0;
    }

    #footer-content {
        flex-direction: column;
        text-align: center;
        /* En flex-direction:column, l'espacement ENTRE les items empilés est piloté par
           row-gap (pas column-gap), même si visuellement ça "ressemble" à des lignes : le
           gap:30px de base donnait donc 2x30px de vide entre les 3 blocs du footer. */
        row-gap: 20px;
    }
}

@media screen and (max-width: 576px) {
    .block_entete {
        min-height: 60vh;
    }
    h1, .title_one { font-size: 32px; }
    h2, .title { font-size: 24px; }

    /* Sous ~340px, logo + icônes sociales + bouton (tous sur la même ligne, cf. layout.css
       max-width:767.98px) ne tiennent plus : on réduit le logo et les espacements. */
    #header-content {
        column-gap: 8px;
    }
    #logo {
        gap: 6px;
    }
    #logo-icon {
        font-size: 18px;
    }
    #logo-name {
        font-size: 24px;
    }
    #logo-baseline {
        font-size: 7px;
        letter-spacing: 1.5px;
    }
    #header-social {
        gap: 10px;
    }
    #header-social a {
        font-size: 13px;
    }
}

/* ===== Tarteaucitron ===== */
#tarteaucitronRoot * {
    font-family: var(--font-body) !important;
}
#tarteaucitronAlertBig #tarteaucitronCloseAlert,
#tarteaucitronAlertBig #tarteaucitronPersonalize,
#tarteaucitron #tarteaucitronPrivacyUrl,
#tarteaucitron #tarteaucitronPrivacyUrlDialog {
    background: var(--c-rose);
    border-radius: 2px;
}