:root {
    --body-regular-font-family: "Space Grotesk", Helvetica;
    --body-regular-font-weight: 500;
    --body-regular-font-size: 18px;
    --body-regular-letter-spacing: 0;
    --body-regular-line-height: 25.200000762939453px;
    --body-regular-font-style: normal;
    --h-3-font-family: "Turret Road", Helvetica;
    --h-3-font-weight: 800;
    --h-3-font-size: 22px;
    --h-3-letter-spacing: 0;
    --h-3-line-height: normal;
    --h-3-font-style: normal;
    --body-light-font-family: "Space Grotesk", Helvetica;
    --body-light-font-weight: 400;
    --body-light-font-size: 15px;
    --body-light-letter-spacing: 0;
    --body-light-line-height: 25.200000762939453px;
    --body-light-font-style: normal;
    --h-1-font-family: "Turret Road", Helvetica;
    --h-1-font-weight: 800;
    --h-1-font-size: 53.75px;
    --h-1-letter-spacing: 0;
    --h-1-line-height: normal;
    --h-1-font-style: normal;
    --h-2-font-family: "Turret Road", Helvetica;
    --h-2-font-weight: 800;
    --h-2-font-size: 33px;
    --h-2-letter-spacing: 0;
    --h-2-line-height: normal;
    --h-2-font-style: normal;
    --h-4-font-family: "Turret Road", Helvetica;
    --h-4-font-weight: 800;
    --h-4-font-size: 18px;
    --h-4-letter-spacing: 0;
    --h-4-line-height: normal;
    --h-4-font-style: normal;
    --body-extra-light-font-family: "Space Grotesk", Helvetica;
    --body-extra-light-font-weight: 400;
    --body-extra-light-font-size: 12px;
    --body-extra-light-letter-spacing: 0;
    --body-extra-light-line-height: 25.200000762939453px;
    --body-extra-light-font-style: normal;
    --h-5-font-family: "Turret Road", Helvetica;
    --h-5-font-weight: 800;
    --h-5-font-size: 15px;
    --h-5-letter-spacing: 0;
    --h-5-line-height: normal;
    --h-5-font-style: normal;
    --h-6-font-family: "Turret Road", Helvetica;
    --h-6-font-weight: 800;
    --h-6-font-size: 12px;
    --h-6-letter-spacing: 0;
    --h-6-line-height: normal;
    --h-6-font-style: normal;
    --body-bold-font-family: "Space Grotesk", Helvetica;
    --body-bold-font-weight: 700;
    --body-bold-font-size: 18px;
    --body-bold-letter-spacing: 0;
    --body-bold-line-height: 25.200000762939453px;
    --body-bold-font-style: normal;
    --h1-mobile-font-family: "Turret Road", Helvetica;
    --h1-mobile-font-weight: 800;
    --h1-mobile-font-size: 28.75px;
    --h1-mobile-letter-spacing: 0;
    --h1-mobile-line-height: normal;
    --h1-mobile-font-style: normal;
    --body-regular-mobile-font-family: "Space Grotesk", Helvetica;
    --body-regular-mobile-font-weight: 500;
    --body-regular-mobile-font-size: 16px;
    --body-regular-mobile-letter-spacing: 0;
    --body-regular-mobile-line-height: 20.8px;
    --body-regular-mobile-font-style: normal;
    --h2-mobile-font-family: "Turret Road", Helvetica;
    --h2-mobile-font-weight: 800;
    --h2-mobile-font-size: 26.400001525878906px;
    --h2-mobile-letter-spacing: 0;
    --h2-mobile-line-height: normal;
    --h2-mobile-font-style: normal;
    --variable-collection-black-background: rgba(6, 5, 5, 1);
    --variable-collection-red-hover-applied: rgba(242, 19, 19, 1);
    --variable-collection-red-hover-4: rgba(245, 0, 8, 1);
    --variable-collection-red-hover-3: rgba(149, 92, 255, 1);
    --variable-collection-red-hover-2: rgba(242, 19, 19, 1);
    --variable-collection-purple-highlight: rgba(242, 27, 206, 1);
    --variable-collection-pink-secondary-applied: rgba(242, 15, 140, 1);
    --variable-collection-pink-secondary-4: rgba(255, 0, 9, 1);
    --variable-collection-pink-secondary-3: rgba(155, 105, 247, 1);
    --variable-collection-pink-secondary-2: rgba(242, 15, 140, 1);
    --variable-collection-main-texte-color-applied: rgba(242, 12, 96, 1);
    --variable-collection-main-texte-color-4: rgba(245, 0, 8, 1);
    --variable-collection-main-texte-color-3: rgba(174, 134, 249, 1);
    --variable-collection-main-texte-color-2: rgba(242, 12, 96, 1);
    --variable-collection-light-pink: rgba(0, 0, 0, 0.2);
    --variable-collection-background-transparent: rgba(14, 12, 12, 0.5);
    --variable-collection-background-ultratransparent: rgba(14, 12, 12, 0.01);
    --variable-collection-number: 0;
    --variable-collection-green-positive: rgba(19, 242, 158, 1);
    --variable-collection-green-flash: rgba(12, 242, 108, 1);
    --variable-collection-green-degrad: rgba(0, 0, 0, 0.2);
    --variable-collection-error-fluo: rgba(242, 222, 12, 1);
    --variable-collection-error-mat: rgba(242, 194, 19, 1);
    --variable-collection-pinklight: rgba(250, 163, 163, 1);
    --variable-collection-redlight-applied: rgba(255, 56, 59, 1);
    --variable-collection-redlight-4: rgba(245, 0, 8, 1);
    --variable-collection-redlight-3: rgba(156, 102, 255, 1);
    --variable-collection-redlight-2: rgba(255, 56, 59, 1);
    --gradient-main-color: linear-gradient(
        90deg,
        var(--variable-collection-pink-secondary-applied),
        var(--variable-collection-main-texte-color-applied)
    );
    --gradient-color-start: #f20f8c;
    --gradient-color-end: #f20c60;
    --glow-intensity: 0;
    --pulse-intensity: 1;
}
body {
    font-family: var(--body-regular-font-family);
    font-optical-sizing: auto;
    font-weight: var(--body-regular-font-weight);
    font-style: normal;
    font-variation-settings: "slnt" 0;
    font-size: var(--body-regular-font-size);
    line-height: 28.5px;
    margin: 0;
    background: var(--variable-collection-black-background);
    color: var(--variable-collection-main-texte-color-applied);
    overflow-x: hidden;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    background: var(--gradient-main-color);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
a {
    text-decoration: none;
}
span {
    font-weight: 700;
}
strong {
    font-weight: 900;
}
.body-light {
    font-size: var(--body-light-font-size);
    line-height: var(--body-light-line-height);
}
h1 {
    font-family: var(--h-1-font-family);
    font-size: var(--h-1-font-size);
    font-weight: var(--h-1-font-weight);
    line-height: var(--h-1-line-height);
}
h2 {
    font-family: var(--h-2-font-family);
    font-size: var(--h-2-font-size);
    font-weight: var(--h-2-font-weight);
    line-height: var(--h-2-line-height);
}
h3 {
    font-family: var(--h-3-font-family);
    font-size: var(--h-3-font-size);
    font-weight: var(--h-3-font-weight);
    line-height: var(--h-3-line-height);
}
.h3-style {
    font-family: var(--h-3-font-family);
    font-size: var(--h-3-font-size);
    font-weight: var(--h-3-font-weight);
    line-height: var(--h-3-line-height);
}
h5 {
    font-size: var(--h-5-font-size);
    font-weight: var(--h-5-font-weight);
    line-height: var(--h-5-line-height);
}
em {
    font-style: italic;
}
.margin-block-large {
    margin-block: 4rem;
}

#trigger-burger {
    display: none;
}
.video-wrapper-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: -1;
}
#background-video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    margin-bottom: -6rem;
    opacity: 0.3;
}
.lottie-container-left {
    /* Removed absolute positioning for audio page, kept for compatibility if used elsewhere or deprecated */
    position: absolute;
    top: -160px;
    left: 50%;
    margin-left: -572px;
    max-width: 40rem;
    z-index: 2;
}

.lottie-page-background {
    position: absolute;
    top: -40px;
    left: 50%;
    max-width: 40rem;
    z-index: 2;
}

.lottie-grid-container {
    grid-column: 2 / span 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lottie-grid-container lottie-player {
    width: 100%;
    max-width: 400px;
    transform: scale(2.8) translateY(20px);
    transform-origin: center center;
    pointer-events: none; /* Prevent blocking clicks */
}

.col-5-1-right.lottie-grid-container lottie-player {
    transform: scale(2.0) translateY(-10px) translateX(0px);
}

.col-5-1-right {
    grid-column: 7 / span 5;
    position: relative;
    z-index: 10; /* Ensure text is above the scaled Lottie */
}
.titre-accueil {
    text-align: center;
}
.introduction-accueil {
    margin-top: 4vh;
}

.titre-center {
    text-align: center;
    margin-top: 8rem;
}
.titre-page {
    text-align: center;
    margin-top: 8rem;
    font-family: var(--h-2-font-family);
  font-size: var(--h-2-font-size);
  font-weight: var(--h-2-font-weight);
  line-height: var(--h-2-line-height);
}
.titre-page-right {
    color: var(--dark);
    position: relative;
    z-index: 2;
    padding-top: 5rem;
    padding-bottom: 0rem; /* Removed padding */
margin-bottom: 2rem;
}
.titre-page-left {
    color: var(--dark);
    position: relative;
    z-index: 2;
    padding-top: 5rem;
    padding-bottom: 0;
    margin-bottom: 1rem;
}
.taches {
    position: absolute;
    width: 20rem;
    z-index: 1;
    top: 130px;
    left: 10px;
}
.titre-taches-left {
    grid-column: 3 / span 5;
    position: relative;
}
.titre-taches-right {
    grid-column: 7 / span 5;
    position: relative;
}
.container,
.container-audio > * + * {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    display: grid;
}
/* .container > * + *,
.container-audio > * + * {
    margin-top: 2rem;
} */
.container > a {
    justify-self: center;
}

.page-vertical-center {
    min-height: 80vh;
    align-content: center;
    padding-bottom: 4rem; /* Offsets the center upwards by ~2rem */
}
.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
    justify-content: center;
}
.texte-formulaire-contact {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
    justify-content: center;
}
.col-6-centered {
    grid-column: 4 / span 6;
}
.titre-actualites {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    text-align: center;
}
.col-5-1-left {
    grid-column: 2 / span 5;
}
/* .col-5-1-left p removed - was empty */
.texte-contact {
    grid-column: 2 / span 5;
}

/* .col-5-1-right p removed - was empty */
.image-gauche-textes {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
    justify-content: center;
    padding-top: 1rem;
    padding-bottom: 0;
    align-items: center;
}
.cadre-exp {
    grid-column: 3 / 11;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    border: 2px solid;
    border-image-slice: 1;
    border-width: 1px;
    border-image-source: linear-gradient(90deg, #f20f8c, #f20c60);
    align-items: center;
    padding: 1rem;
    margin: 2rem 0;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: transparent;
}
.image-projet-wrapper {
    position: relative;
    width: 100%;
    grid-column: 6 / 8;
    max-width: 266px;
    min-width: 200px;
    scale: 1.3;
    margin: 3rem 0;
}
.image-gauche-textes .image-projet-wrapper {
    grid-column: 2 / 3;
    max-width: 266px;
    min-width: 200px;
}
.image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}
.image-base {
    width: 100%;
    aspect-ratio: 1 / 1; /* Force square */
    object-fit: cover;
    height: auto; /* Allow height to adjust based on width */
}
.cadre-exp:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 0 10px #f20c60, 0 0 20px #f20c60, 0 0 30px #f20c60;
}
.image-droite-textes {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
    justify-content: center;
    padding-top: 1rem;
    padding-bottom: 0;
}
.image-droite-textes .textes-projet {
    grid-column: 1 / 5;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 10px 0;
    margin-left: 1rem;
}
.image-gauche-textes .textes-projet {
    margin-right: 1rem;
}
.textes-projet {
    grid-column: 4 / 9;
    display: flex;
    padding: 10px 0;
    flex-direction: column;
    gap: 12px;
}
.video-wrapper {
    display: flex;
    justify-content: center;
    min-width: 100px;
    padding-top: 4rem;
}
.video-accueil {
    max-width: 50%;
    height: auto;
}
.video-accueil-safari {
    max-width: 50%;
    height: auto;
}
.video-wrapper-safari {
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-top: 4rem;
}
.video-lottie-fond {
    top: -10rem;
    left: 45%;
}
.web-lottie-fond {
    top: -10rem;
    left: 47%;
    scale: 142%;
}
.logo-okto {
    width: 100%;
    max-width: 24rem;
    height: auto;
}
.bloc-contact {
    padding-top: 7rem;
    padding-bottom: 1rem;
}
.a-propos {
    grid-column: 2 / span 5;
    position: relative;
    align-items: center;
}
.a-propos h1 {
    font-size: var(--h-3-font-size);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 1rem;
}
.a-propos h1 img {
    top: -1px;
    position: relative;
}
.a-propos .logo-okto {
    display: none;
}
.a-propos .rs-icons-div {
    display: flex;
    gap: 1rem;
    padding-top: 2rem;
    margin: auto;
}
.a-propos .btn-portfolio {
    display: flex;
    margin: auto;
    margin-top: 2rem;
    padding-block: 0.3rem;
}
.texte-contact > * + * {
    margin-top: 2rem;
}
.logo-formulaire {
    grid-column: 8 / span 4;
    text-align: center;
}
.logo-formulaire .logo-okto {
    padding-bottom: 1rem;
}
.logo-formulaire h2 {
    padding-bottom: 2rem;
}
/* .container > * + *, .container-audio > * + * removed - was empty */
iframe {
    grid-column: 1 / 6;
}
.formulaire {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}
fieldset {
    border: medium none !important;
    margin: 0 0 10px;
    min-width: 100%;
    padding: 0;
    width: 100%;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
    width: 100%;
    margin: 0 0 5px;
    padding: 10px;
    background-color: var(--variable-collection-black-background);
    border: 2px solid;
    border-image: var(--gradient-main-color) 1;
    color: transparent;
    -webkit-text-fill-color: transparent;
    caret-color: white;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
    background-image: var(--gradient-main-color);
    background-clip: text;
    -webkit-background-clip: text;
}
#contact textarea {
    height: 100px;
    max-width: 100%;
    resize: none;
}
#contact input::placeholder,
#contact textarea::placeholder {
    background: var(--gradient-main-color);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    opacity: 0.6;
}
fieldset .bouton-1 .overlap-group {
    position: relative;
    width: 317px;
    height: 81px;
    top: -4px;
    left: -20px;
}

.bouton-1 {
    all: unset;
    display: inline-block;
    cursor: pointer;
}
.bouton-1 .overlap-group {
    position: relative;
    width: 317px;
    height: 81px;
    top: -4px;
    left: 0;
}
.bouton-1 .taches-titres {
    position: absolute;
    width: 155px;
    height: 81px;
    top: 0;
    left: 0;
    background-image: url(./assets/svg/taches-titres-1.svg);
    background-size: 100% 100%;
    opacity: 0;
    transition: opacity .3s ease-in-out;
}
.bouton-1:hover .taches-titres {
    opacity: 100%;
}
.bouton-1 .rectangle {
    position: absolute;
    width: 100%;
    height: 60%;
    top: 16px;
    left: 3px;
    background-color: var(--variable-collection-dark);
    transform: rotate(-.49deg);
    opacity: 0;
    transition: opacity .3s ease-in-out;
    box-shadow: inset 0 4px 8px rgba(0,0,0,.9);
}
.bouton-1:hover .rectangle {
    opacity: 100%;
}
.bouton-1 .frame {
    display: flex;
    width: 291px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    position: absolute;
    top: 21px;
    left: 14px;
}
.bouton-1 .icon {
    position: relative;
    width: 38px;
    height: 38px;
    fill: var(--variable-collection-dark);
    transition: fill .3s ease-in-out;
}
.bouton-1:hover .icon {
    fill: var(--variable-collection-white);
}
.bouton-1 .text-wrapper {
    position: relative;
    width: fit-content;
    font-weight: var(--h-4-font-weight);
    color: var(--variable-collection-dark);
    font-size: var(--h-4-font-size);
    line-height: var(--h-4-line-height);
    white-space: nowrap;
    font-style: var(--h-4-font-style);
    transition: color .3s ease-in-out;
}
.bouton-1:hover .text-wrapper {
    color: var(--variable-collection-white);
}
.lien-overlay {
    position: absolute;
    inset: 0;
    z-index: 999;
    text-decoration: none;
    pointer-events: auto;
}
.projet-question {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 7px;
    margin: auto;
    margin-top: 2rem;
    width: auto;
}
.projet-question h5 {
    color: var(--variable-collection-medium);
}
.condition-field {
    text-align: center;
}
.checkbox-container {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;
    font-size: 0.95rem;
}
.checkbox-container a {
    color: var(--variable-collection-main-texte-color-applied);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
    transition: all ease-in-out 3000ms;
}
.checkbox-container a:hover {
    opacity: 0.8;
    text-decoration-thickness: 2px;
}
.checkbox-container input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    left: 45px;
    margin-top: 10px;
}
.custom-checkbox {
    width: 16px;
    height: 16px;
    border: 2px solid var(--variable-collection-main-texte-color-applied);
    background-color: transparent;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}
.custom-checkbox::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    background-color: var(--variable-collection-main-texte-color-applied);
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.checkbox-container input[type="checkbox"]:checked + .custom-checkbox::after {
    opacity: 1;
    transform: scale(1);
}
.white-background {
    display: none;
    position: fixed;
    background-color: #fff;
    width: 10000px;
    height: 10000px;
    opacity: 0;
    z-index: 999;
}
.navbar {
    position: sticky;
    top: 0;
    width: 100%;
    height: 50px;
    background-color: white;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}
.navbar-content {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 23px;
    position: relative;
}
.nav-element {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}
.menu-icon {
    width: 22px;
}
.nav-item a {
    color: inherit;
    text-decoration: none;
    font-family: var(--h-3-font-family);
    font-weight: var(--h-3-font-weight);
}
.experiences-nav {
    align-self: stretch;
    text-align: right;
}
.experiences-nav a {
    font-family: var(--body-bold-font-family);
    font-size: var(--body-bold-font-size);
    font-weight: var(--body-bold-font-weight);
    display: block;
    padding-top: 10px;
}
.navbar {
    position: fixed;
    right: -250px;
    top: 5px;
    width: 200px;
    height: 852px;
    display: flex;
    flex-direction: column;
    background-color: var(--variable-collection-black-background);
    box-shadow: none;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transition: right 0.5s ease-in-out;
    border: 2px solid transparent;
    background-image: linear-gradient(
            var(--variable-collection-black-background),
            var(--variable-collection-black-background)
        ),
        var(--gradient-main-color);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}
.white-background {
    display: flex;
    position: fixed;
    background-color: var(--variable-collection-black-background);
    width: 10000px;
    height: 10000px;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
}
#trigger-burger:checked ~ .white-background {
    opacity: 0.8;
    transition: opacity 0.5s ease-in-out;
}
#trigger-burger:checked ~ .navbar {
    transition: right 0.5s ease-in-out;
    right: 10px;
}
.navbar-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
}
.burger-cross {
    display: block;
    width: 30px;
    position: relative;
    right: 0;
    top: 10px;
    cursor: pointer;
}
.burger-menu {
    display: block;
    width: 48px;
    position: fixed;
    right: 30px;
    top: 25px;
    z-index: 1000;
    cursor: pointer;
}
#trigger-burger {
    display: inline-block;
    position: fixed;
    top: 20px;
    right: 25px;
    width: 58px;
    height: 58px;
    z-index: 1001;
    opacity: 0;
}
.rs-icons-div {
    display: block;
    width: fit-content;
}
.rs-icons {
    display: block;
    margin-bottom: 10px;
    fill: var(--variable-collection-dark);
}
.lottie {
    width: 20px;
    height: 20px;
    margin-top: 4px;
}
.hidden {
    display: none;
}
.logo-img {
    height: 50px;
    width: auto;
    display: block;
}
/* .rs-icons-div removed - was empty */
.rs-icons {
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
    fill: var(--variable-collection-main-texte-color-applied);
}
.btn-experience,
.btn-portfolio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 5px 15px;
    background: transparent;
    color: var(--gradient-color-start);
    font-size: 18px;
    font-weight: bold;
    border: 1px solid;
    border-image: linear-gradient(
            90deg,
            var(--gradient-color-start),
            var(--gradient-color-end)
        )
        1;
    cursor: pointer;
    transition: all 0.3s ease;
    background-clip: padding-box;
    border-radius: 6px;
    font-family: var(--h-3-font-family);
    font-size: var(--h-3-font-size);
    width: fit-content;
}
.btn-experience .btn-icon,
.btn-portfolio .btn-icon {
    width: 20px;
    height: 20px;
    filter: brightness(1.2);
}
.btn-experience:hover,
.btn-portfolio:hover {
    background: linear-gradient(
        90deg,
        var(--gradient-color-start),
        var(--gradient-color-end)
    );
    color: #060505;
    box-shadow: 0 0 10px #f20f8caa, 0 0 20px #f20f8caa, 0 0 30px #f20f8caa;
}
.btn-experience:hover .btn-icon,
.btn-portfolio:hover .btn-icon {
    filter: brightness(0) saturate(100%) invert(9%) sepia(6%) saturate(602%)
        hue-rotate(354deg) brightness(95%) contrast(100%);
}
.btn-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 5px 15px;
    background: linear-gradient(
        90deg,
        var(--gradient-color-start),
        var(--gradient-color-end)
    );
    color: #060505;
    font-weight: bold;
    font-size: var(--h-3-font-size);
    font-family: var(--h-3-font-family);
    border: 1px solid transparent;
    justify-self: center;
    cursor: pointer;
    width: fit-content;
    transition: all 0.3s ease;
}
.btn-contact div {
    text-decoration: none;
}
.btn-contact .btn-icon {
    width: 20px;
    height: 20px;
    filter: brightness(0);
}
.btn-contact:hover {
    background: var(--variable-collection-black-background);
    color: var(--gradient-color-start);
    border-image: linear-gradient(
            90deg,
            var(--gradient-color-start),
            var(--gradient-color-end)
        )
        1;
    box-shadow: 0 0 10px #f20f8caa, 0 0 20px #f20f8caa, 0 0 30px #f20f8caa;
}
.btn-contact:hover .btn-icon {
    filter: brightness(1) saturate(100%) invert(29%) sepia(92%) saturate(1460%)
        hue-rotate(309deg) brightness(103%) contrast(95%);
}
.bouton-1 .rectangle {
    position: absolute;
    width: 100%;
    height: 60%;
    top: 16px;
    left: 3px;
    background-color: var(--variable-collection-dark);
    transform: rotate(-0.49deg);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.9);
}
.bouton-1:hover .rectangle {
    opacity: 100%;
}
.lien-overlay {
    position: absolute;
    inset: 0;
    z-index: 999;
    text-decoration: none;
    pointer-events: auto;
}
.lien-projet {
    text-decoration: none;
    color: inherit;
    display: block;
}
.boutons-projet {
    display: flex;
}
.boutons-projet-section {
    display: flex;
    margin: auto;
    gap: 1rem;
}
.image-projet-web {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
    padding: 2rem;
    text-align: center;
}
.image-projet-web h1 {
    font-size: 39.4px;
    color: var(--variable-collection-dark);
    padding-bottom: 1rem;
}
.accordions {
    padding-bottom: 2rem;
}
.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 1rem;
    border-radius: 5px;
    transition: background-color 0.3s;
}
.accordion-header:hover {
    background-color: var(--variable-collection-lightest);
}
.accordion-icon {
    transition: transform 0.3s ease;
    width: 20px;
    height: 20px;
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0 1rem;
}
.accordion-item.open .accordion-content {
    max-height: 100%;
    padding: 1rem;
}
.accordion-item.open .accordion-icon {
    transform: rotate(180deg);
}
.video-youtube {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
    padding: 2rem;
}
.video-embedded-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    height: 0;
}
.video-embedded {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 5px;
    display: block;
}
.audio-player {
    position: fixed;
    left: 20px;
    top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    background-color: transparent;
    border: 1px solid;
    border-image: linear-gradient(
            90deg,
            var(--gradient-color-start),
            var(--gradient-color-end)
        )
        1;
    border-radius: 6px;
    z-index: 999;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

@keyframes pulse-mute {
    0% {
        box-shadow: 0 0 0 0 rgba(242, 15, 140, 0.99);
        transform: scale(1);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(242, 15, 140, 0);
        transform: scale(1.1);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(242, 15, 140, 0);
        transform: scale(1);
    }
}

.btn-audio {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--gradient-color-start);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: all 0.3s ease;
}

@media (hover: hover) {
    .btn-audio:hover {
        background: var(--gradient-color-start);
        box-shadow: 0 0 15px var(--gradient-color-start);
        transform: scale(1.1);
    }
}

.btn-audio:active {
    background: var(--gradient-color-start);
    box-shadow: 0 0 15px var(--gradient-color-start);
    transform: scale(1.1);
}

.btn-audio img {
    width: 16px;
    height: 16px;
    filter: brightness(1.2);
    transition: filter 0.3s ease;
}

@media (hover: hover) {
    .btn-audio:hover img {
        filter: brightness(0);
    }
}

.btn-audio:active img {
    filter: brightness(0);
}

#mute-btn.is-muted {
    animation: pulse-mute 1s infinite;
}

@media (hover: hover) {
    #mute-btn:hover {
        animation: none;
    }

#mute-btn:active {
    animation: none;
}
}
.matrix-container {
    display: flex;
    justify-content: center;
    padding: 4rem;
}
.matrix-board {
    display: grid;
    grid-template-columns: repeat(3, 272.17px);
    grid-template-rows: repeat(3, auto);
    gap: 32px;
}
.matrix-box {
    background: transparent;
    padding: 0;
    text-align: left;
}
.album-cover {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    margin-bottom: 16px;
    cursor: pointer;
    position: relative;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(0, 0, 0, 0.3);
}
.album-cover > img {
    border-radius: 5px;
}
.album-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}
.album-link:hover .album-cover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4), 0 5px 10px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}
.album-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 5px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0) 60%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}
.album-link:hover .album-cover::after {
    opacity: 1;
}
.album-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--dark);
    margin: 0 0 6px 0;
    line-height: 1.4;
    text-align: left;
}
.album-date {
    font-size: 14px;
    color: var(--variable-collection-medium);
    margin: 0;
    font-weight: 400;
    text-align: left;
}
.texte-centre-projet {
    /* padding-top: 2rem; */
    grid-column: 2 / span 5;
}
.texte-centre-projet h1 {
    font-size: 39.4px;
}
.texte-centre-projet h2 {
    font-size: 27.36px;
}
.texte-centre-projet h3 {
    font-size: 22.8px;
}
.texte-centre-projet h1,
.texte-centre-projet h2,
.texte-centre-projet h3 {
    color: var(--variable-collection-dark);
    padding-bottom: 1rem;
}
.texte-centre-projet p {
    padding-bottom: 2rem;
}
.texte-centre-projet ul {
    padding-bottom: 2rem;
}
.gallery-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 105vh;
}
.gallery-in-grid-projet-image {
    grid-column: 7 / span 5;
}
.arrow {
    position: absolute;
    z-index: 999;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    transition: all 0.3s ease;
}
.arrow:hover {
    transform: scale(1.1);
}
.arrow-up:hover {
    transform: translateX(-50%) scale(1.1);
}
.arrow-up {
    transform: translateX(-50%);
}
.img-arrow-up {
    rotate: 90deg;
}
.container .arrow-down {
    margin-top: 4rem;
}
.arrow-down {
    display: flex;
    position: relative;
    left: 50%;
    animation: arrow-move 1s infinite ease-in-out;
}
@keyframes arrow-move {
    0% {
        top: 0;
    }
    50% {
        top: 5px;
    }
    100% {
        top: 0;
    }
}
.arrow-down img {
    rotate: 90deg;
    width: 30px;
}
.img-arrow-right {
    rotate: 180deg;
}
.arrow-down img:hover {
    transition: all 0.3s ease-in-out;
    scale: 1.1;
}
.arrow-down {
    display: flex;
    position: relative;
    left: 50%;
}
.carousel-wrapper {
    position: relative;
    width: 400px;
    height: 660px;
    perspective: 1200px;
    overflow: hidden;
}
.carousel {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.carousel-item {
    position: absolute;
    width: 300px;
    height: 300px;
    left: 50%;
    top: 50%;
    transform-origin: center center;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    cursor: pointer;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}
.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    transition: all 0.3s ease;
}
.carousel-item:hover img {
    transform: scale(1.05);
}
.carousel-item:nth-child(1) {
    transform: translate(-50%, -50%) translateZ(0) scale(1);
    z-index: 5;
}
.carousel-item:nth-child(2) {
    transform: translate(-50%, -50%) translateY(-120px) translateZ(-100px)
        scale(0.8);
    z-index: 4;
    opacity: 0.8;
}
.carousel-item:nth-child(3) {
    transform: translate(-50%, -50%) translateY(-240px) translateZ(-200px)
        scale(0.6);
    z-index: 3;
    opacity: 0.6;
}
.carousel-item:nth-child(4) {
    transform: translate(-50%, -50%) translateY(120px) translateZ(-100px)
        scale(0.8);
    z-index: 4;
    opacity: 0.8;
}
.carousel-item:nth-child(5) {
    transform: translate(-50%, -50%) translateY(240px) translateZ(-200px)
        scale(0.6);
    z-index: 3;
    opacity: 0.6;
}
.carousel.rotating-up .carousel-item:nth-child(1) {
    transform: translate(-50%, -50%) translateY(120px) translateZ(-100px)
        scale(0.8);
    z-index: 4;
    opacity: 0.8;
}
.carousel.rotating-up .carousel-item:nth-child(2) {
    transform: translate(-50%, -50%) translateZ(0) scale(1);
    z-index: 5;
}
.carousel.rotating-up .carousel-item:nth-child(3) {
    transform: translate(-50%, -50%) translateY(-120px) translateZ(-100px)
        scale(0.8);
    z-index: 4;
    opacity: 0.8;
}
.carousel.rotating-up .carousel-item:nth-child(4) {
    transform: translate(-50%, -50%) translateY(240px) translateZ(-200px)
        scale(0.6);
    z-index: 3;
    opacity: 0.6;
}
.carousel.rotating-up .carousel-item:nth-child(5) {
    transform: translate(-50%, -50%) translateY(-240px) translateZ(-200px)
        scale(0.6);
    z-index: 3;
    opacity: 0.6;
}
.carousel.transitioning .carousel-item {
    opacity: 0.3;
    transition: all 0.3s ease, opacity 0.3s ease;
}
.indicator {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 1000;
}
.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--variable-collection-lightest);
    opacity: 0.5;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    z-index: 999;
}
.dot.active {
    background: var(--variable-collection-dark);
    transform: scale(1.2);
    opacity: 1;
}
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    opacity: 0;
    transition: opacity 0.3s ease;
    overflow: auto;
}
.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}
.modal.show.zoomed {
    overflow: auto;
}
.modal-content {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-image {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
    cursor: zoom-in;
    transition: transform 0.3s ease;
}
.modal-image.zoomed {
    transform: scale(1.8);
    transition: transform 0.3s ease;
    cursor: zoom-out;
    margin-top: 46rem;
}
.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10001;
}
.modal-close:hover {
    background: white;
    transform: scale(1.1);
}
body.modal-open {
    overflow: hidden;
}
.container #lottie {
    margin-top: 5%;
}
.commands-desktop {
    display: flex;
}
.commands-mobile {
    display: none;
}
.bottom-menu {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1200px;
    background: var(--variable-collection-black-background);
    /* Transition max-height for smooth opening */
    transition: max-height 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 9999; /* Ensure it stays above almost everything except lightbox */
    cursor: pointer;
    margin-bottom: 20px;
    margin-bottom: 20px;
    padding: 0; 
    
    /* Flex Setup */
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* Default state is basically 'closed' dimensions logic applied via class */
    overflow: hidden; 
    will-change: max-height; /* Hint for smoother animation */
    /* Ensure padding is consistent to avoid jumps */
    padding-top: 8px; 
    padding-bottom: 2px;
}

/* RESTORED GRADIENT BORDER */
.bottom-menu::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 2px;
    background: linear-gradient(
        45deg,
        var(--gradient-color-start),
        var(--gradient-color-end)
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
    box-sizing: border-box;
    border-radius: inherit;
}

/* Ensure content is above border */
.bottom-menu > * {
    position: relative;
    z-index: 1;
}

.bottom-menu.closed {
    /* Use max-height for transition. */
    max-height: 120px;
    justify-content: center;
    /* Redundant padding removed as it's set on parent now */
    box-sizing: border-box;
}

.bottom-menu.open {
    /* Large max-height to allow expansion. */
    max-height: 80vh; 
    justify-content: flex-start;
    /* Redundant padding removed */
    box-sizing: border-box;
}

.arrow-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-top: 0;
}

.menu-header {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    
    font-size: 1.6rem;
    font-weight: bold;
    color: #ff0066;
    z-index: 10;
    pointer-events: none;
    transition: opacity 0.4s ease;
    margin: 0;
    line-height: 1.2;
}

.menu-content {
    /* Padding for the content inside */
    padding: 10px 40px 5px 40px;
    width: 100%;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease 0.1s;
    visibility: hidden;
    height: 0;
    box-sizing: border-box;
    
    /* Layout for children: Explanation (Left) and Commands (Right) */
    display: grid;
    grid-template-columns: 2fr 1fr; /* 2 parts description, 1 part commands */
    gap: 40px;
    align-items: start;
}

.bottom-menu.open .menu-content {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    height: auto;
    padding-bottom: 30px;
}

.explanation-section {
    /* Internal grid for text */
    display: block; 
    margin-bottom: 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

.explanation-text p {
    margin-bottom: 10px;
}
.explanation-text p:last-child {
    margin-bottom: 0.5rem;
}
.description-main {
    font-weight: bold; 
    margin-bottom: 0.5rem; 
    font-size: 1.1em;
}
.description-sub {
    font-size: 0.95em; 
    font-weight: normal;
}
.commands-section {
    /* No specific grid column needed if parent is grid */
    margin-top: 0;
}
.commands-section h3 {
    margin-bottom: 0.25rem;
    font-size: 1rem;
}
.commands-section p, .commands-section .commandes-content {
    background: var(--gradient-main-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-weight: bold; 
    margin: 0;
}
.arrow-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem;
}
.arrow-menu img {
    rotate: -90deg;
    width: 30px;
}
.bottom-menu.open .arrow-menu img {
    rotate: 90deg;
}
.menu-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 80px);
}
.menu-buttons button {
    height: 41px;
}
.menu-buttons button div {
    text-align: center;
}
.bottom-menu.clicked {
    transform: translateX(-50%) scale(1);
}
.menu-btn.button-clicked {
    transform: scale(1);
}
.line-wrapper {
    display: flex;
    justify-content: center;
    padding-bottom: 1rem;
}
.horizontal-line {
    height: 1px;
    width: 85%;
    background: linear-gradient(
        90deg,
        var(--gradient-color-start),
        var(--gradient-color-end)
    );
    margin: 20px 0;
    justify-self: center;
}
footer div:last-of-type {
    margin-bottom: 0.5rem;
}
.footer-text-1 {
    grid-column: 3 / span 3;
}
.footer-text-1 p,
.footer-text-2 p {
    padding-bottom: 0.5rem;
    font-size: 12px;
    line-height: 16.8px;
}
.footer-text-2 {
    grid-column: 7 / span 4;
}
.footer-text-3 {
    grid-column: 3 / span 2;
}
.footer-text-4 {
    grid-column: 5 / span 2;
}
.footer-text-5 {
    grid-column: 7 / span 2;
}
.footer-text-6 {
    grid-column: 9 / span 2;
}
.footer-text-3 div,
.footer-text-4 div,
.footer-text-5 div,
.footer-text-6 div {
    margin: 0;
}
.footer-text-3 div a,
.footer-text-4 div a,
.footer-text-5 div a,
.footer-text-6 div a {
    font-size: 12px;
    line-height: 16.8px;
    color: var(--variable-collection-pink-secondary-applied);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
}
footer .container > * + * {
    margin-top: 0;
}
#bg-video-404 {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    margin-bottom: -6rem;
}
.content-404-top {
    position: absolute;
    top: 38vh;
    left: 50%;
    color: var(--variable-collection-medium);
    z-index: 10;
    translate: -50%;
}
.content-404-bottom {
    position: absolute;
    top: 43vh;
    color: var(--variable-collection-medium);
    z-index: 10;
    left: 50%;
    translate: -50%;
}
html {
    overflow-x: hidden;
}
main#swup {
    overflow-x: hidden;
}
.content-404-top h1 {
    font-size: 2rem;
    margin: 0;
}
.content-404-bottom p {
    font-size: 1.5rem;
    margin: 5px 0 0 0;
}
.glow-hover {
    transition: all 0.3s ease;
}
.glow-hover * {
    transition: inherit;
}
.glow-hover:hover {
    filter: drop-shadow(0 3px 4px #f20f8caa) drop-shadow(0 3px 8px #f20c60aa);
}
.glow-hover:hover * {
    filter: none;
    text-shadow: 0 3px 6px #f20f8caa, 0 3px 10px #f20c60aa;
}
@keyframes glow-drop-shadow {
    0% {
        filter: drop-shadow(0 3px 4px #f20f8caa)
            drop-shadow(0 3px 8px #f20c60aa);
    }
    50% {
        filter: drop-shadow(0 6px 8px #f20f8caa)
            drop-shadow(0 6px 12px #f20c60aa);
    }
    100% {
        filter: drop-shadow(0 3px 4px #f20f8caa)
            drop-shadow(0 3px 8px #f20c60aa);
    }
}
.glow {
    animation: glow-drop-shadow 4s infinite ease-in-out;
}
@keyframes glow-drop-shadow-bigger {
    0% {
        filter: drop-shadow(0 0 30px #f20f8caa) drop-shadow(0 0 30px #f20c60aa);
    }
    50% {
        filter: drop-shadow(0 0 8px #f20f8caa) drop-shadow(0 0 12px #f20c60aa);
    }
    100% {
        filter: drop-shadow(0 0 30px #f20f8caa) drop-shadow(0 0 30px #f20c60aa);
    }
}
.glow-bigger {
    animation: glow-drop-shadow-bigger 4s infinite ease-in-out;
}
.galerie3d {
    padding-block: 16rem;
    margin-top: -2rem;
    overflow: hidden;
    margin-top: -8rem;
    margin-bottom: -15rem;
}
#galerie {
    position: relative;
    z-index: 10;
}
.scroll-wrapper {
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.video-outer {
    width: 100%;
    height: 100%;
    perspective: 1200px;
    overflow-y: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}
.video-inner {
    transform-style: preserve-3d;
}
video {
    width: 80vw;
    max-width: 100%;
    display: block;
    transform-origin: center;
}
@media (max-width: 950px) {
    body {
        font-family: var(--body-regular-mobile-font-family);
        font-optical-sizing: auto;
        font-weight: var(--body-regular-mobile-font-weight);
        font-style: normal;
        font-variation-settings: "slnt" 0;
        font-size: var(--body-regular-mobile-font-size);
        line-height: var(--body-regular-mobile-line-height);
        margin: 0;
        background: var(--variable-collection-black-background);
        color: var(--variable-collection-main-texte-color-applied);
    }
    h1 {
        font-family: var(--h1-mobile-font-family);
        font-size: var(--h1-mobile-font-size);
        font-weight: var(--h1-mobile-font-weight);
        line-height: var(--h1-mobile-line-height);
    }
    h2 {
        font-family: var(--h2-mobile-font-family);
        font-size: var(--h2-mobile-font-size);
        font-weight: var(--h2-mobile-font-weight);
        line-height: var(--h2-mobile-line-height);
    }
    h3 {
        font-family: var(--h-3-font-family);
        font-size: var(--h-3-font-size);
        font-weight: var(--h-3-font-weight);
        line-height: var(--h-3-line-height);
    }
    h5 {
        font-size: var(--h-5-font-size);
        font-weight: var(--h-5-font-weight);
        line-height: var(--h-5-line-height);
    }
    .body-light {
        font-size: 12px;
        line-height: 16.8px;
    }
    .grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        justify-content: center;
    }
    .margin-block-large {
        margin-block: 2rem;
    }

    #background-video {
        width: auto;
        height: 100vh;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0.3;
    }
    .texte-formulaire-contact {
        display: block;
    }
    .logo-container {
        left: 0;
        width: 90%;
        position: relative;
    }
    .lottie-container-left {
        left: 0;
        margin-left: 0;
        width: 90%;
        position: relative;
    }
    .video-lottie-fond {
        top: -8rem;
        left: -10%;
    }
    .web-lottie-fond {
        top: -5rem;
        left: -10%;
        scale: 1;
    }
    .contact-logo-fond {
        top: 1rem;
        left: -10%;
        scale: 1.2;
    }
    .container {
        padding: 0 2rem 0rem;
        justify-items: center;
    }
    .page-vertical-center {
    min-height: 80vh;
    align-content: center;
    padding-bottom: 8rem;
    }
    .container-audio {
        padding: 1rem;
        justify-items: center;
        width: 100%;
    }
    .container-audio grid {
        width: 100%;
    }
    .page-header {
        margin-top: -20rem;
    }
    .navbar {
        height:auto;
    }
    .col-6-centered {
        grid-column: 1 / -1;
        max-width: 500px;
    }
    .col-5-1-left {
        grid-column: 1 / -1;
        max-width: 500px;
    }
    .texte-contact {
        grid-column: 1 / 1;
        max-width: 500px;
        padding-bottom: 2rem;
    }
    .col-5-1-right {
        grid-column: 1 / -1;
        max-width: 500px;
        min-width: 0;
        overflow-wrap: break-word;
    }
    .video-wrapper {
        padding-top: 4rem;
        padding-bottom: 1rem;
    }
    .video-wrapper-safari {
        padding-top: 4rem;
        padding-bottom: 1rem;
    }
    .video-accueil {
        min-width: 360px;
    }
    .video-accueil-safari {
        min-width: 375px;
    }
    .titre-taches-left {
        grid-column: 1 / -1;
        max-width: 500px;
    }
    .titre-page-left {
        padding-bottom: 0;
        font-size: 3rem;
    font-weight: 600;
    }
    .titre-taches-right {
        grid-column: 1 / -1;
        max-width: 500px;
    }
    .bloc-contact {
        margin-top: 6rem;
    }
    .a-propos {
        grid-column: 1 / 6;
        max-width: 500px;
    }
    .a-propos h1 {
        font-size: var(--h-3-font-size);
    }
    .a-propos .btn-portfolio {
        margin-top: 0;
    }
    .a-propos .rs-icons-div {
        gap: 0.5rem;
    }
    .logo-formulaire {
        grid-column: 1 / 6;
        margin-block: 2rem;
    }
    .logo-okto {
        width: 15rem;
        margin: auto;
    }
    .logo-formulaire h2 {
        padding-bottom: 1rem;
    }
    .logo-formulaire .logo-okto {
        display: none;
    }
    .a-propos .logo-okto {
        display: flex;
        padding-bottom: 2rem;
    }
    iframe {
        grid-column: 1 / 6;
    }
    .titre-page-right {
        padding-bottom: 0;
        word-break: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
        margin-bottom: 3rem;
    }
    .cadre-exp {
        display: flex;
        align-items: center;
        padding: 20px 0;
        flex-direction: column;
        margin: 2rem 0 0 0;
    }
    .image-droite-textes .cadre-exp {
        flex-direction: column-reverse;
    }
    .image-gauche-textes,
    .image-droite-textes {
        display: flex;
        align-items: center;
        padding: 0 0;
    }
    .image-gauche-textes {
        flex-direction: column;
    }
    .image-droite-textes {
        flex-direction: column-reverse;
    }
    .image-projet-wrapper,
    .textes-projet {
        width: 100%;
    }
    .image-projet-wrapper {
        scale: 1;
        margin: 0;
    }
    .titre-accueil {
        font-size: var(--h1-mobile-font-size);
    }
    .textes-projet {
        padding-inline: 20px;
        align-items: center;
    }
    .image-droite-textes .textes-projet {
        padding-inline: 20px;
        margin-left: 0;
    }
    .image-gauche-textes .textes-projet {
        margin-right: 0;
    }
    .textes-projet h5 {
        margin-bottom: 10px;
        text-align: center;
    }
    .textes-projet p {
        max-width: 31rem;
    }
    .image-gauche-textes .image-projet-wrapper,
    .image-droite-textes .image-projet-wrapper,
    .image-droite-textes .textes-projet,
    .image-gauche-textes .textes-projet {
        grid-column: auto;
    }
    .image-projet-wrapper img {
        max-width: 266px;
        min-width: 200px;
    }
    .btn-experience {
        padding: 8px 10px;
    }
    .menu-buttons button {
        width: 270px;
    }
    .boutons-projet-section {
        display: block;
    }
    .boutons-projet-section .bouton-1 {
        display: block;
        padding-bottom: 0;
        scale: 0.8;
        gap: 0;
    }
    /* .video-embedded-container removed - was empty */
    .matrix-board {
        display: grid;
        grid-template-columns: repeat(2, 160px);
        gap: 24px;
    }
    .matrix-box:nth-child(1):nth-last-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
    }
    .texte-gauche-projet {
        order: 2;
        grid-column: 1 / -1;
    }
    .texte-centre-projet {
        grid-column: 1 / -1;
    }
    .gallery-container {
        flex-direction: row;
        height: 15rem;
        justify-content: center;
        align-items: center;
        order: 1;
        grid-column: 1 / -1;
        margin-top: 6rem;
    }
    .gallery-web {
        margin-top: -1rem;
    }
    .container .arrow-down {
        margin-top: 3rem;
    }
    .arrow-down {
        left: 0;
    }
    .arrow-left,
    .arrow-right {
        display: flex;
        position: absolute;
        z-index: 999;
        border: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: bold;
        color: #333;
        transition: all 0.3s ease;
        top: 50%;
        transform: translateY(-50%);
    }
    .arrow-left {
        left: -1rem;
    }
    .arrow-right {
        right: -1rem;
    }
    .arrow-left:hover,
    .arrow-right:hover {
        background: white;
        transform: translateY(-50%) scale(1.1);
    }
    .carousel-wrapper {
        width: 100vw;
        height: 370px;
        perspective: 1000px;
        overflow: hidden;
    }
    .carousel-item {
        width: 200px;
        height: 200px;
        left: 50%;
        top: 50%;
        transform-origin: center center;
    }
    .carousel-item:nth-child(1) {
        transform: translate(-50%, -50%) translateZ(0) scale(1);
        z-index: 5;
    }
    .carousel-item:nth-child(2) {
        transform: translate(-50%, -50%) translateX(-120px) translateZ(-80px)
            scale(0.8);
        z-index: 4;
        opacity: 0.8;
    }
    .carousel-item:nth-child(3) {
        transform: translate(-50%, -50%) translateX(-240px) translateZ(-160px)
            scale(0.6);
        z-index: 3;
        opacity: 0.6;
    }
    .carousel-item:nth-child(4) {
        transform: translate(-50%, -50%) translateX(120px) translateZ(-80px)
            scale(0.8);
        z-index: 4;
        opacity: 0.8;
    }
    .carousel-item:nth-child(5) {
        transform: translate(-50%, -50%) translateX(240px) translateZ(-160px)
            scale(0.6);
        z-index: 3;
        opacity: 0.6;
    }
    .indicator {
        bottom: 40px;
    }
    .modal-close {
        top: 20px;
        right: 20px;
        position: fixed;
    }
    .formulaire {
        max-width: 280px;
    }
    .projet-question {
        transform: scale(0.8);
        transform-origin: top center;
    }
    .bouton-1 .icon {
        fill: var(--variable-collection-white) !important;
    }
    .bouton-1 .text-wrapper {
        color: var(--variable-collection-white) !important;
    }
    .footer-text-1 {
        grid-column: 1 / span 5;
    }
    .footer-text-2 {
        grid-column: 1 / span 5;
        margin-top: 0;
    }
    .footer-text-3 {
        grid-column: 1 / span 5;
        margin-top: 0;
        margin-bottom: 0;
    }
    .footer-text-4 {
        grid-column: 1 / span 5;
    }
    .footer-text-5 {
        grid-column: 1 / span 5;
    }
    .footer-text-6 {
        grid-column: 1 / span 5;
    }
    footer div:last-of-type {
        margin-bottom: 0.5rem;
    }
    .bg-video-wrapper {
        width: 100vw;
        overflow-x: hidden;
        position: relative;
    }
    #bg-video-404 {
        width: 100vw;
        height: 100vh;
        object-fit: cover;
        margin-bottom: -6rem;
    }
    .content-404-top,
    .content-404-bottom {
        position: static;
        color: var(--variable-collection-medium);
    }
    .content-404-top {
        position: absolute;
        top: 40%;
        left: 50%;
        color: var(--variable-collection-medium);
        z-index: 10;
        translate: -50%;
        width: 302px;
    }
    .content-404-bottom {
        position: absolute;
        top: 50%;
        color: var(--variable-collection-medium);
        z-index: 10;
        left: 50%;
        translate: -50%;
        width: 246px;
    }
    .content-404-top h1 {
        font-size: 1.5rem;
    }
    .content-404-bottom p {
        font-size: 1.1rem;
    }
    .container #lottie {
        margin-top: 20vh;
    }
    /* Legacy bottom-menu block removed - moved to end of file */
    /* .menu-content {
        padding: 30px 20px 20px 20px;
    } */
    .explanation-section {
        grid-template-columns: 1fr;
        gap: 10px;
        font-size: 0.9rem;
    }
    .menu-buttons {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .menu-btn {
        width: 100%;
        max-width: 250px;
    }
    .menu-header {
        font-size: 1.5rem;
    }
    .explanation-text {
        grid-column: auto;
    }
    .commands-section {
        grid-column: auto;
    }
    .commands-desktop {
        display: none;
    }
    .commands-mobile {
        display: flex;
    }
    .galerie3d {
        padding-block: 5rem;
        overflow: hidden;
        margin-top: -5rem;
        margin-bottom: -10rem;
    }
    .scroll-wrapper {
        height: 30vh;
    }
    
    /* Touch target extension for mobile accessibility - PageSpeed fix */
    .navbar-content {
        gap: 32px;
    }
    .nav-element {
        padding: 6px 0;
    }
    .experiences-nav a {
        padding: 8px 0;
    }
}
@media (max-width: 480px) {
    :root {
        --h-1-font-size: 48.94px;
    }
    .titre-taches-left,
    .titre-taches-right {
        display: flex;
        padding-left: 0;
        justify-content: center;
        position: relative;
    }
    .matrix-board {
        grid-template-columns: 200px;
        justify-content: center;
    }
    .matrix-box:nth-child(9) {
        grid-column: auto;
    }
    .video-lottie-fond {
        top: -5rem;
    }
}

/* =========================================
   SWUP TRANSITIONS
   ========================================= */
.transition-fade {
    transition: opacity 0.4s ease-in-out;
    opacity: 1;
}

html.is-changing .transition-fade {
    opacity: 0;
}

/* =========================================
   EXPERIENCE PAGE OVERRIDES (JS CONTROLLED)
   ========================================= */
body.is-experience-page .audio-player {
    display: none !important;
}

body.is-experience-page .video-wrapper-background {
    display: none !important;
}

/* =========================================
   PRIVACY CONTENT LISTS
   ========================================= */
.privacy-content li,
.privacy-content strong {
    background: var(--gradient-main-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* =========================================
   GALERIE PAGE STYLES
   ========================================= */

.galerie-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 4rem;
    padding: 0 2rem;
}

.cadre-galerie {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    padding: 1rem; /* Reduced padding */
    
    /* Visual styles inherited from cadre-exp */
    border: 2px solid;
    border-image-slice: 1;
    border-width: 1px;
    border-image-source: linear-gradient(90deg, #f20f8c, #f20c60);
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    /* Blur effect */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: transparent;
}

.cadre-galerie:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 0 10px #f20c60, 0 0 20px #f20c60, 0 0 30px #f20c60;
}

.cadre-galerie h2 {
    margin-top: 0.5rem; /* Reduced margin */
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.lottie-container {
    width: 130%;
    flex: 1; /* Take remaining space */
    min-height: 0; /* Prevent overflow */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .galerie-grid {
        grid-template-columns: 1fr;
        padding: 0;
    margin-top: 2rem;
    }
    
    .cadre-galerie {
        max-width: 400px;
        margin: 0 auto;
    }
}

/* =========================================
   STICKY FOOTER
   ========================================= */
#swup {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

footer {
    margin-top: auto;
}

/* =========================================
   AUDIO PAGE STYLES
   ========================================= */

/* Background Lottie */
.lottie-container-left {
    position: absolute;
    top: -160px;
    left: 50%;
    margin-left: -572px;
    max-width: 40rem;
    z-index: 0; /* Behind content */
    pointer-events: none;
}

/* Page Header */
.page-header {
    position: relative;
    z-index: 1;
    margin-top: 5rem;
}

.titre-taches-right {
    grid-column: 7 / span 5;
    position: relative;
}

.titre-page-right {
    font-size: 3rem; /* Adjusted */
    font-weight: 600;
}

.col-5-1-right {
    grid-column: 7 / span 5;
}

.col-5-1-right p span {
    font-weight: 600;
    color: var(--variable-collection-pink-secondary-applied); /* Highlight color */
}

/* Matrix Grid */
.matrix-container {
    display: flex;
    justify-content: center;
    padding: 8rem 0 4rem 0; /* Increased top padding */
    position: relative;
    z-index: 1;
}

.matrix-board {
    display: grid;
    grid-template-columns: repeat(3, 272px);
    grid-template-rows: repeat(3, auto);
    gap: 32px;
}

.matrix-box {
    background: transparent;
    padding: 0;
    text-align: left;
}

.album-cover {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}

.album-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.album-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.album-link:hover .album-cover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 0 10px #f20c60, 0 0 20px #f20c60, 0 0 30px #f20c60; /* Site glow effect */
}

.album-title {
    font-size: 16px;
    font-weight: 600;
    margin: 1rem 0 -0.3rem 0;
    line-height: 1.4;
    text-transform: uppercase;
}

.album-date {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* Responsive */
@media (max-width: 950px) {
    .lottie-container-left {
        left: 0;
        margin-left: 0;
        width: 90%;
        top: 0;
    }
    
    .page-header .grid {
        display: flex;
        flex-direction: column;
    }

    .titre-taches-right {
        order: 1;
        grid-column: 1 / -1;
        text-align: center;
    }

    .lottie-grid-container {
        order: 2;
        grid-column: 1 / -1;
        margin-bottom: 2rem;
        overflow: visible;
    }
    
    .lottie-grid-container lottie-player {
        transform: scale(1.7); /* Reduce scale on mobile */
        max-width: 300px;
    }

    .col-5-1-right.lottie-grid-container lottie-player {
        transform: scale(1.5) translateY(0.5rem) translateX(0px);
    }

    .col-5-1-right {
        order: 3;
        grid-column: 1 / -1;
    }

    .col-5-1-right.lottie-grid-container {
        order: 1;
    }

    .col-5-1-left:not(.lottie-grid-container) {
        order: 2;
        grid-column: 1 / -1;
    }
    
    .matrix-board {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 0 2rem; /* Add padding for tablet width */
    }

    .matrix-container {
        padding-top: 1rem; /* Adjust top padding on mobile/tablet */
    }
}

@media (max-width: 600px) {
    .matrix-board {
        grid-template-columns: 1fr;
        padding: 0 2rem; /* Add padding to prevent full edge-to-edge width */
    }
    
    .matrix-box {
        max-width: 350px; /* Limit max width */
        margin: 0 auto; /* Center the box */
        width: 100%;
    }
}

@media (min-width: 951px) {
    .page-header-image,
    .page-header-video {
        margin-bottom: 2rem;
    }

    .projects-gallery .image-gauche-textes,
    .projects-gallery .image-droite-textes {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .projects-gallery > * + * {
        margin-top: 1rem;
    }
}


/* =========================================
   IMAGE ARTICLE PAGE STYLES
   ========================================= */

.article-image-page {
    padding-top: 5rem;
    padding-bottom: 3rem; /* Reduced to match gap */
    max-width: 1200px;
    margin: 0 auto;
}

.article-header {
    margin-bottom: 3rem;
    text-align: center;
}

.article-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.article-subtitle {
    font-size: 1.5rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.article-content {
    margin-bottom: 0; /* Removed to control gap via footer margin */
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.article-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.gallery-item {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.02);
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Carousel Styles */
.article-carousel-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 40px auto;
    display: block; /* Changed from flex to block for absolute positioning context */
}

.article-carousel {
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    position: relative;
    background: rgba(0,0,0,0.2); /* Subtle background */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); /* Lift it up */
}

.carousel-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* Smooth 'graceful' easing */
    width: 100%;
    will-change: transform;
    gap: 0 !important; /* Force no gap */
    margin: 0 !important;
    padding: 0 !important;
}

.carousel-slide {
    min-width: 100%;
    flex-shrink: 0; /* CRITICAL: Prevents slides from being squeezed together */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0 !important; /* Force no margin */
    border: none !important;
}

.carousel-slide img {
    max-width: 100%;
    max-height: 75vh; /* Taller display */
    width: auto; /* Maintain aspect ratio */
    height: auto;
    display: block;
    object-fit: contain;
}

/* Navigation Buttons */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 20;
    padding: 0;
    border: none;
    backdrop-filter: blur(4px);
}

/* Gradient Border using pseudo-element for opacity control */
.carousel-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    background: linear-gradient(90deg, var(--gradient-color-start), var(--gradient-color-end)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.2; /* 20% opacity normally */
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.carousel-btn:hover::before {
    opacity: 1; /* 100% opacity on hover */
}

.carousel-btn img {
    width: 24px;
    height: 24px;
    display: block;
    opacity: 1; /* Always 100% opacity */
    z-index: 2;
}

.prev-btn {
    left: 0;
}

.prev-btn img {
    transform: rotate(180deg);
}

.next-btn {
    right: 0;
}

/* Lightbox */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.lightbox.active {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    position: relative;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 90vh;
    display: block;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10001;
    padding: 10px;
    transition: transform 0.3s ease;
}

.lightbox-close:hover {
    transform: scale(1.1) rotate(90deg);
}

.lightbox-close img {
    width: 30px;
    height: 30px;
}

.carousel-image-trigger {
    cursor: zoom-in;
}


/* Fix for Safari iOS Grid Blowout 
   Switching to block layout prevents the grid from expanding 
   to fit the intrinsic size of iframe/carousel content.
*/
.container.article-image-page,
.news-section.container {
    display: block;
    width: 100%;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .article-image-page {
        padding-bottom: 2rem; /* Consistent spacing on mobile */
    }

    .article-carousel-container {
        margin: 20px auto;
    }
    
    .carousel-btn {
        width: 40px;
        height: 40px;
    }
    
    .carousel-btn img {
        width: 20px;
        height: 20px;
    }
    
    .prev-btn {
        left: 0;
    }

    .next-btn {
        right: 0;
    }
    
    .carousel-slide img {
        max-height: 50vh;
    }

    .article-footer {
        margin-top: 2rem; /* Consistent spacing on mobile */
    }
}

.article-footer {
    text-align: center;
    margin-top: 3rem; /* Matches padding-bottom */
}

/* Back Button - Matching .btn-experience exactly */
.btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 5px 15px; /* Matched btn-experience */
    background: transparent;
    color: var(--gradient-color-start); /* Matched color */
    font-size: 18px; /* Matched size */
    font-weight: bold;
    border: 1px solid;
    border-image: linear-gradient(90deg, var(--gradient-color-start), var(--gradient-color-end)) 1;
    border-radius: 6px; /* Matched radius */
    font-family: var(--h-3-font-family); /* Matched font */
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    background-clip: padding-box;
    width: fit-content;
}

.btn-back:hover {
    background: linear-gradient(90deg, var(--gradient-color-start), var(--gradient-color-end));
    color: #060505;
    box-shadow: 0 0 10px #f20f8caa, 0 0 20px #f20f8caa, 0 0 30px #f20f8caa;
}

.icon-back {
    width: 20px;
    height: 20px;
    filter: brightness(1.2);
    transition: transform 0.3s ease;
    transform: rotate(180deg); /* Point left */
}

.btn-back:hover .icon-back {
    filter: brightness(0) saturate(100%) invert(9%) sepia(6%) saturate(602%) hue-rotate(354deg) brightness(95%) contrast(100%);
    transform: rotate(180deg) translateX(5px); /* Move left slightly */
}

@media (max-width: 768px) {
    .article-title {
        font-size: 2rem;
        margin-top: 2rem;
    }
    
    .article-gallery {
        grid-template-columns: 1fr;
    }

    /* Increase title-date gap on mobile */
    .album-title {
        margin: 1rem 0 0.25rem 0;
    }
}

/* Hide standard Joomla custom fields output if appended automatically */
.article-image-page dl.article-info,
.article-image-page .fields-container {
    display: none !important;
}

/* Video Article Styles */
.article-video-page .article-video-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 2rem auto;
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.article-video-page .article-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Reduce gap between video and text */
/* Consistent text layout across Image, Video, and Audio articles */
/* Reverted to rely on correct HTML structure in templates */
.article-video-page .article-content {
    margin-top: 1rem;
}

/* WIP Styles */
.wip-container {
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
}

.wip-text {
    font-size: 0.6em;
    color: var(--variable-collection-red-hover-applied);
    margin-left: 10px;
    font-weight: bold;
    vertical-align: middle;
    display: inline-block;
    border: 1px solid var(--variable-collection-red-hover-applied);
    padding: 2px 6px;
    border-radius: 4px;
}

.wip-menu-item {
    text-decoration: line-through;
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
}

/* -------------------------------------------------------------------------- */
/* AUDIO ARTICLE STYLES                                                       */
/* -------------------------------------------------------------------------- */

.article-audio-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* gap: 3rem; */
    padding-bottom: 6rem;
}

/* Header & Date */
.audio-header {
    text-align: center;
    margin-top: 2rem;
}

.audio-release-date {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--variable-collection-main-texte-color-applied);
    opacity: 0.8;
    margin-top: -10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--body-regular-font-family);
    background: none;
    -webkit-text-fill-color: var(--variable-collection-main-texte-color-applied);
}

/* Cover Image - Clickable */
.audio-cover-container {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    transition: transform 0.3s ease;
    cursor: pointer; /* Clickable */
    overflow: hidden;
    border-radius: 4px;
}

.audio-cover-container:hover {
    transform: scale(1.02);
}

.audio-cover-image {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1/1;
    object-fit: cover;
}

/* Lightbox Styles */
.audio-lightbox {
    position: fixed;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.95);
    z-index: 20000; /* Extremely high z-index */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.audio-lightbox.active {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-content img {
    max-width: 90vw;
    max-height: 90vh;
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
    border-radius: 4px;
}

/* Close Button - Matching global style (burger-cross) */
.lightbox-close {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease;
    /* Use the same SVG as the menu close button if available, or build an X */
    /* Remove background-image to avoid double icon (img tag is present in HTML) */
    background: transparent;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease;
    display: flex; /* key for centering img */
    justify-content: center;
    align-items: center;
    padding: 0;
}

.lightbox-close:hover {
    transform: rotate(90deg);
}

.lightbox-close img {
    width: 20px; /* Force 'small' size requested by user */
    height: auto;
    pointer-events: none;
}

/* Player Section (Tabs) */
.audio-player-section {
    width: 100%;
    max-width: 800px;
    padding: 0; 
    display: flex;
    flex-direction: column;
    gap: 0; 
    margin: 2rem auto;
}

/* Tabs Navigation */
.audio-tabs-nav {
    display: flex;
    justify-content: center; /* Center horizontally */
    flex-wrap: wrap;
    padding: 0 1rem;
    position: relative;
    z-index: 10;
    top: 2px;
}

.audio-tab-btn {
    background: transparent;
    border: none;
    color: var(--variable-collection-main-texte-color-applied);
    padding: 0.8rem 1.5rem;
    cursor: pointer;
    font-family: var(--body-bold-font-family);
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-transform: uppercase;
    opacity: 0.6;
    position: relative;
    border-radius: 0; 
}

.audio-tab-btn:hover {
    opacity: 1;
}

.audio-tab-btn.active {
    opacity: 1;
    background: transparent; 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    border: 1px solid #f20f8c;
    border-bottom: none;
    
    padding-bottom: calc(0.8rem + 1px);
    margin-bottom: -1px;
    z-index: 20;
    background: rgba(0,0,0,0.3);
}

/* Icon (Hidden by default on Desktop) */
.audio-tab-icon {
    display: none;
    width: 24px;
    height: 24px;
    background: var(--gradient-main-color);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.tab-label {
    pointer-events: none;
    display: block;
}

/* Tabs Content */
.audio-tabs-content {
    width: 100%;
    position: relative;
}

.audio-tab-pane {
    display: none;
    width: 100%;
    animation: fadeIn 0.4s ease-in-out;
}

.audio-tab-pane.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Frame Style (.cadre-audio) */
.cadre-audio {
    border: 1px solid;
    border-image-slice: 1;
    border-width: 1px;
    border-image-source: linear-gradient(90deg, #f20f8c, #f20c60);
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    padding: 2rem;
    min-height: 200px;
    
    background-color: transparent;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Inside Frame */
.iframe-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

.iframe-wrapper iframe {
    width: 100%;
    border: none;
}

.audio-description {
    max-width: 800px;
    text-align: left; 
    margin: 3rem auto 0 auto;
    line-height: 1.6;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .audio-tab-btn {
        padding: 0.6rem 0.8rem; /* Compact padding */
    }
    
    .tab-label {
        display: none; 
    }
    
    .audio-tab-icon {
        display: block; 
        width: 20px; /* Smaller icon */
        height: 20px;
        margin: auto;
    }
    
    .audio-tabs-nav {
        /* Force single line */
        flex-wrap: nowrap;
        justify-content: center;
        gap: 0.5rem;
        /* Allow scroll if too many items, though 'center' might fight with it. 
           If items < width, center matches user request. 
           If items > width, we need scroll. 
           Best compromise: flex-wrap nowrap + overflow-x auto + mask for scroll bounds if needed.
           User asked "single line", assuming they fit. */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 5px; /* Space for scrollbar if any */
    }
    
    /* Active state adjustments for mobile - -6px overlap */
    .audio-tab-btn.active {
        margin-bottom: -6px; 
        padding-bottom: calc(0.6rem + 7px);
    }
}


/* Accessibility Utility */
.sr-only {
    position: absolute;
    width: 1px;
    overflow: hidden;
}

/* =========================================
   GLOBAL PAGE LOADER & TRANSITIONS
   ========================================= */

#global-page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; /* Fallback */
    height: 100%; /* Fallback */
    inset: 0; /* Modern full screen */
    z-index: 100000;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    opacity: 1;
    transition: opacity 0.8s ease-out;
    pointer-events: none;
}

#global-page-loader lottie-player {
    display: block;
    margin: auto;
}

/* Initially, content is hidden */
#swup {
    opacity: 0;
    transition: opacity 1s ease;
}

/* Page Loaded State */
body.page-loaded #global-page-loader {
    opacity: 0;
    visibility: hidden; /* Ensure it's not clickable/blocking */
    pointer-events: none;
    display: none; /* Completely remove from layout after transition */
}

body.page-loaded #swup {
    opacity: 1;
}

/* =========================================
   CONVERT FORMS ADAPTATION (NUCLEAR OVERRIDE)
   ========================================= */

/* CONTAINER RESET */
.formulaire .cf-form-wrap,
.formulaire form {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* HIDE DEFAULTS */
.formulaire .cf-label, 
.formulaire .cf-header {
    display: none !important; 
}

/* ---------------------------------------------------------
   INPUTS & TEXTAREA
   --------------------------------------------------------- */
.formulaire input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.formulaire textarea,
.formulaire select {
    width: 100% !important;
    margin: 0 0 0 !important;
    padding: 10px !important;
    background-color: var(--variable-collection-black-background) !important;
    border: 2px solid !important;
    border-image: var(--gradient-main-color) 1 !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    caret-color: white !important;
    background-image: var(--gradient-main-color) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    font-size: 1rem !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    height: auto !important;
}

/* AUTOFILL FIX: Override browser default yellow/white background */
/* AUTOFILL FIX: Override browser default yellow/white background */
/* Specificity Boost: Must match or exceed the main input rule's 4 attributes */
.formulaire input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):-webkit-autofill,
.formulaire input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):-webkit-autofill:hover,
.formulaire input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):-webkit-autofill:focus,
.formulaire textarea:-webkit-autofill,
.formulaire textarea:-webkit-autofill:hover,
.formulaire textarea:-webkit-autofill:focus,
.formulaire select:-webkit-autofill,
.formulaire select:-webkit-autofill:hover,
.formulaire select:-webkit-autofill:focus {
    /* Use box-shadow to force background color */
    -webkit-box-shadow: 0 0 0px 1000px var(--variable-collection-black-background) inset !important;
    box-shadow: 0 0 0px 1000px var(--variable-collection-black-background) inset !important;
    
    /* Force text color with HEX to avoid variable issues in shadow DOM */
    -webkit-text-fill-color: #f20c60 !important;
    color: #f20c60 !important;
    caret-color: #f20c60 !important;
    
    /* RESET BACKGROUND CLIP to allow solid text color to show */
    background-image: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    
    /* Ensure border remains correct */
    border: 2px solid !important;
    border-image: var(--gradient-main-color) 1 !important;
    
    /* Maintain font size */
    font-size: 1rem !important;
}

.formulaire textarea {
    height: 100px !important;
    resize: none !important;
    /* 
       Technical Fix: Gradient text (background-clip: text) is not supported 
       on scrolling textareas in most browsers (causes fixed text glitch).
       Using the main brand color instead to maintain design coherence.
    */
    background-image: none !important;
    background-color: var(--variable-collection-black-background) !important;
    -webkit-text-fill-color: initial !important;
    color: var(--variable-collection-main-texte-color-applied) !important; /* Brand Pink Variable */
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    
    /* Ensure selection is visible against pink text */
    caret-color: var(--variable-collection-main-texte-color-applied) !important;
}

/* PLACEHOLDERS */
.formulaire input::placeholder,
.formulaire textarea::placeholder {
    background: var(--gradient-main-color) !important; /* Specificity boost */
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    opacity: 0.6 !important;
}

/* ---------------------------------------------------------
   CHECKBOX FIX (Hide Native, Show Custom)
   --------------------------------------------------------- */
.formulaire .cf-terms-field,
.formulaire .cf-checkbox-group {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* Centering added */
    gap: 0.5em !important;
    margin-top: 2px !important;
    position: relative !important;
}

/* CENTER RECAPTCHA */
.formulaire .cf-recaptcha,
.formulaire .g-recaptcha,
.formulaire .grecaptcha-badge { 
    display: flex !important;
    justify-content: center !important;
    margin: 2px auto !important;
    position: relative !important; /* Override fixed if present */
    width: auto !important; /* Allow flex centering */
    right: auto !important; /* Override fixed right */
    box-shadow: none !important; /* Optional: Remove default shadow if it looks bad centralized */
}

/* Force Hide Native Checkbox */
.formulaire input[type="checkbox"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    z-index: -1 !important;
}

/* Reconstruct Box on LABEL::before */
.formulaire .cf-terms-field label,
.formulaire .cf-checkbox-group label {
    position: relative !important;
    padding-left: 24px !important;
    cursor: pointer !important;
    display: inline-block !important;
    font-size: 0.95rem !important;
    color: white !important;
    line-height: 1.2 !important;
}

/* Box */
.formulaire .cf-terms-field label::before,
.formulaire .cf-checkbox-group label::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid var(--variable-collection-main-texte-color-applied) !important;
    background-color: transparent !important;
    box-sizing: border-box !important;
}

/* Checkmark */
.formulaire .cf-terms-field label::after,
.formulaire .cf-checkbox-group label::after {
    content: "" !important;
    position: absolute !important;
    left: 4px !important;
    top: 50% !important;
    margin-top: -4px !important;
    width: 8px !important;
    height: 8px !important;
    background-color: var(--variable-collection-main-texte-color-applied) !important;
    opacity: 0 !important;
    transform: scale(0.5) !important;
    transition: all 0.2s ease !important;
}

/* Check Logic */
.formulaire input[type="checkbox"]:checked + label::after {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* LINK GRADIENT FIX */
.formulaire .cf-terms-field a, 
.formulaire .cf-checkbox-group a {
    display: inline-block !important;
    background: linear-gradient(90deg, #f20f8c, #f20c60) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    text-decoration: underline !important;
    text-decoration-color: var(--variable-collection-main-texte-color-applied) !important;
    font-weight: 500 !important;
}

/* ---------------------------------------------------------
   SUBMIT BUTTON FIX (Targeting Button Tag)
   --------------------------------------------------------- */
.formulaire button[type="submit"],
.formulaire input[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 5px 15px !important;
    background: linear-gradient(90deg, #f20f8c, #f20c60) !important;
    color: #060505 !important;
    font-weight: bold !important;
    font-size: var(--h-3-font-size) !important;
    font-family: var(--h-3-font-family) !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important; /* Force Square corners */
    cursor: pointer !important;
    width: fit-content !important;
    margin: 5px auto 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important; /* Added Transition */
}

/* Icon */
.formulaire button[type="submit"]::before {
    content: "" !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    background-color: #060505 !important;
    -webkit-mask: url(./assets/img/message.svg) no-repeat center / contain !important;
    mask: url(./assets/img/message.svg) no-repeat center / contain !important;
    margin-top: 2px !important;
    transition: all 0.3s ease !important; /* Added Transition */
}

/* Hover */
.formulaire button[type="submit"]:hover {
    background: var(--variable-collection-black-background) !important;
    color: var(--gradient-color-start) !important;
    border: 1px solid !important;
    border-image: linear-gradient(90deg, #f20f8c, #f20c60) 1 !important;
    box-shadow: 0 0 10px #f20f8caa, 0 0 20px #f20f8caa, 0 0 30px #f20f8caa !important; /* Hover: WITH shadow */
}

.formulaire button[type="submit"]:hover::before {
    background-color: var(--gradient-color-start) !important;
}



/* Helper class for Convert Forms field */
.gradient-text-fix a,
.gradient-text-fix label,
.gradient-text-fix span {
    background: linear-gradient(90deg, #f20f8c, #f20c60) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    display: inline-block !important; /* Ensure clip works */
}

.gradient-text-fix a {
    text-decoration: underline !important;
    text-decoration-color: var(--variable-collection-main-texte-color-applied) !important;
}

.gradient-text-fix span,
.gradient-text-fix label {
    text-decoration: none !important;
}

/* ---------------------------------------------------------
   SUCCESS MESSAGE STYLING (User Specified Selectors)
   --------------------------------------------------------- */
.convertforms.cf-success .cf-response,
.convertforms .cf-response {
    background-color: rgba(14, 12, 12, 0.5) !important; /* Semi-transparent dark */
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 2px solid !important;
    border-image: linear-gradient(90deg, #f20f8c, #f20c60) 1 !important;
    color: var(--variable-collection-main-texte-color-applied) !important;
    padding: 15px !important;
    margin-top: 20px !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    display: none; /* Keep original display logic (js toggles it) */
    text-align: center;
}

/* Ensure it displays block when success (if JS doesn't inline style it) */
.convertforms.cf-success .cf-response {
    display: block !important;
}

/* ---------------------------------------------------------
   LEGAL PAGES TYPOGRAPHY
   --------------------------------------------------------- */
.privacy-content h1,
.privacy-content h2,
.privacy-content h3 {
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

.privacy-content p {
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.privacy-content ul {
    margin-left: 0;
    padding-left: 2rem; /* Use padding for bullets space */
    list-style-type: disc !important;
    list-style-position: outside !important;
}

.privacy-content li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
    display: list-item !important; /* Force display list-item */
}

.privacy-content li::marker {
    color: var(--variable-collection-main-texte-color-applied) !important; /* Force visible color */
    font-size: 1.2em;
}

.privacy-content strong {
    font-weight: 700;
}

/* --- COOKIE CONSENT BANNER --- */
#cookie-consent-banner {
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    width: 360px; 
    max-width: 90vw;
    background: rgba(10, 10, 12, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    /* Gradient Border */
    border: 2px solid;
    border-image-slice: 1;
    border-width: 1px;
    border-image-source: var(--gradient-main-color);
    
    border-radius: 0; 
    padding: 1.5rem;
    z-index: 9999;
    flex-direction: column;
    gap: 0.5rem; 
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    
    /* Hidden state */
    opacity: 0;
    visibility: hidden; /* Key fix: ensures it captures NO events */
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
    
    font-family: 'Space Grotesk', sans-serif;
    color: var(--variable-collection-main-texte-color-applied);
    pointer-events: none;
}

#cookie-consent-banner.visible {
    opacity: 1;
    visibility: visible; /* Make visible */
    transform: translateY(0);
    pointer-events: auto; 
}

.cookie-title {
    font-family: 'Turret Road', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
    
    /* Gradient Text */
    background: var(--gradient-main-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.cookie-text {
    font-size: 0.95rem;
    line-height: 1.4;
    font-weight: 500;
    margin-bottom: 0.5rem;
    
    /* Gradient Text */
    background: var(--gradient-main-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.cookie-actions {
    display: flex;
    flex-direction: column; /* Stack them */
    align-items: center;
    gap: 0px; /* Gap handled by margin compensation */
    margin-top: 0;
}

/* Override .bouton-1 behaviors specifically for this banner if needed */
#cookie-consent-banner .bouton-1 {
    /* Compensation for scale(0.7) whitespace. 
       Height 81px --> Visual ~57px. 
       Margin bottom negative to pull them closer. */
    margin-top: -10px;
    margin-bottom: -10px;
}

/* Ensure hover text is visible (White as per original design) */
#cookie-consent-banner .bouton-1:hover .text-wrapper {
    color: white !important; /* Force white on hover */
    -webkit-text-fill-color: white !important;
    background: none !important; /* Remove gradient text effect if applied */
}

/* Adjust Icon color on hover */
#cookie-consent-banner .bouton-1:hover .icon path {
    stroke: white !important;
}

/* Banner Specific overrides for btn-portfolio */
.btn-cookie-size {
    font-size: 14px !important; /* Smaller than standard 18px */
    width: 100%;
    margin: 0.2rem;
}

/* Custom Accept Button: Filled Gradient, no drastic change on hover */
.btn-cookie-accept {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 5px 15px; /* Matches btn-contact padding */
    justify-self: center;
    cursor: pointer;
    width: 100%; /* Full width in banner */
    transition: all 0.3s ease;
    
    /* Filled Gradient Base */
    background: linear-gradient(
        90deg,
        var(--gradient-color-start),
        var(--gradient-color-end)
    );
    color: #060505;
    font-weight: bold;
    font-family: var(--h-3-font-family);
    
    /* Transparent border to match size of outlined buttons if needed, or none */
    border: 1px solid transparent; 

}

.btn-cookie-accept:hover {
    /* Keep same background on hover (User Request) */
    background: linear-gradient(
        90deg,
        var(--gradient-color-start),
        var(--gradient-color-end)
    );
    color: #060505; /* Keep dark text */
    
    /* Add Shadow Only */
    box-shadow: 0 0 10px #f20f8caa, 0 0 20px #f20f8caa, 0 0 30px #f20f8caa;
    
    /* Ensure no border change */
    border: 1px solid transparent;
}

.btn-cookie-accept .btn-icon {
    width: 20px;
    height: 20px;
    filter: brightness(0); /* Black icon */
}

/* Custom Refuse Button: Outline, no fill on hover */
.btn-cookie-refuse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 5px 15px;
    justify-self: center;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
    
    /* Transparent Base */
    background: transparent;
    color: var(--gradient-color-start); /* Default color matching portfolio btn */
    font-weight: bold;
    font-family: var(--h-3-font-family);
    
    /* Gradient Border */
    border: 1px solid;
    border-image: linear-gradient(
            90deg,
            var(--gradient-color-start),
            var(--gradient-color-end)
        )
        1;
    border-radius: 0; /* Border image prohibits radius usually, consistent with btn-portfolio */
}

.btn-cookie-refuse:hover {
    /* Keep transparent background */
    background: transparent;
    
    /* Keep text color (maybe slightly brighter or same?) - User said "pas de changement de couleur de fond" */
    color: var(--gradient-color-start); 
    
    /* Add Shadow Only */
    box-shadow: 0 0 10px #f20f8caa, 0 0 20px #f20f8caa, 0 0 30px #f20f8caa;
}

@media (max-width: 768px) {
    #cookie-consent-banner {
        /* Reset positioning for centering */
        bottom: 1rem;
        left: 50%;
        right: auto;
        transform: translateX(-50%) translateY(20px); /* Keep Y translate for animation, X for centering */
        
        /* Width adjustment */
        width: 90vw;
        max-width: 360px; /* Don't get too wide */
        
        /* Create centered box look */
        border: 2px solid;
        border-image-slice: 1;
        border-width: 1px;
        border-image-source: var(--gradient-main-color);
        /* borders were hidden before, now we want them visible on all sides */
        
        border-radius: 0;
    }
    
    #cookie-consent-banner.visible {
        /* Override transform to maintain X centering while resetting Y */
        transform: translateX(-50%) translateY(0);
    }
}

/* SAFARI SPECIFIC FIXES */
/* Safari can struggle with complex border-image gradients or position:fixed + backdrop-filter */
body.is-safari #cookie-consent-banner {
    /* Reinforce Fixed Positioning */
    position: fixed !important;
    bottom: 1rem !important;
    right: 1rem !important;
    display: flex !important; /* Force flex */
    
    /* Fallback Font */
    font-family: 'Space Grotesk', sans-serif !important;
    
    /* Fallback Border (Solid Color) if gradient fails */
    border: 1px solid var(--variable-collection-pink-secondary-applied) !important;
    
    /* Ensure Icon size is constrained by CSS too */
}
body.is-safari #cookie-consent-banner .btn-icon {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
}
/* Reduce complexity for Safari buttons if needed */
body.is-safari .btn-cookie-accept {
     /* Ensure background renders */
     background-color: #f20f8c; /* Fallback */
     background-image: linear-gradient(90deg, #f20f8c, #f20c60);
}

/* ---------------------------------------------------------
   EXPERIENCE CONTROLS (SEMA & OTHERS)
   --------------------------------------------------------- */
.exp-controls {
    position: absolute;
    top: 2rem; /* En haut */
    left: 2rem; /* A gauche */
    z-index: 100;
    background: rgba(10, 10, 12, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 1rem 1rem 0;
    border: 1px solid var(--variable-collection-pink-secondary-applied);
    
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    width: 250px;
}

.exp-controls-header {
    cursor: move; 
    padding-bottom: 0.5rem; 
    margin-bottom: 0.5rem; 
    border-bottom: 1px solid rgba(255,255,255,0.1); 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
}

.exp-controls h3 {
    margin-bottom: 0;
    font-size: 1rem;
    text-align: center;
    background: var(--gradient-main-color);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    pointer-events: none;
}

.control-group {
    margin-bottom: 1rem;
}

.control-group label {
    display: block;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

.control-group input[type=range] {
    width: 100%;
    accent-color: #f20f8c;
}

@media(max-width: 768px) {
    .exp-controls {
        bottom: auto;
        top: 1rem; /* En dessous du header */
        right: 1rem;
        width: 200px;
    }
    
    /* FIX FOR MOBILE BOTTOM MENU SPACING AND DIMENSIONS */
    .bottom-menu {
        width: 95%;
        margin-bottom: 10px;
    }
    
    /* Force single column stack overrides */
    .menu-content {
        grid-template-columns: 1fr;
        gap: 20px;
        /* Padding overrides: Standard specificity should work since this is after base styles */
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    .bottom-menu.open .menu-content {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    /* Ensure max-height logic works on mobile */
    .bottom-menu.open {
        max-height: 90vh; 
    }
    .explanation-text p:last-child {
    margin-bottom: 0rem;
}

    .commands-section {
        margin-top: 0;
    }

    /* RESPONSIVE SOCIAL ICONS (Burger Menu) */
    /* Layout: 3 icons top, 2 icons bottom, centered */
    .navbar .rs-icons-div {
        display: flex;
        flex-wrap: wrap;
        justify-content: right;
        width: 100%;
    }

    .navbar .rs-icons-div a {
        /* approx 1/3 width to fit 3 items, the rest wrap */
        width: 28%; 
        display: flex;
        justify-content: right;
        align-items: center;
        margin-bottom: 5px;
    }
}





/* Social Iframes Section */
.social-iframes-section {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.social-iframe-item {
    max-width: 100%;
    /* Elegant constraint */
    display: flex;
    justify-content: center;
}

/* Ensure iframes are responsive */
.social-iframe-item iframe {
    max-width: 100%;
    border-radius: 12px; /* Smooth corners */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Subtle shadow */
    transition: transform 0.3s ease;
}

.social-iframe-item iframe:hover {
    transform: translateY(-5px);
}

/* ---------------------------------------------------------
   WEBM MASONRY GRID & LIGHTBOX
   --------------------------------------------------------- */

.webm-masonry-grid {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    margin-top: 4rem;
    margin-bottom: 4rem;
    gap: 0; /* Column gap handled by padding */
}

/* Columns created by JS */
.masonry-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0; /* Fix flex overflow */
    padding: 0 0.75rem; /* Creates 1.5rem total gap between cols */
}

/* First and last col padding adjustment to align with container edges */
.masonry-col:first-child {
    padding-left: 0;
}
.masonry-col:last-child {
    padding-right: 0;
}

.webm-item {
    width: 100%;
    position: relative;
    border-radius: 1x;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Removed break-inside: avoid as no longer needed for flex */
}

.webm-item:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 30px rgba(242, 12, 96, 0.3); /* Subtle pink glow matching theme */
}

.webm-trigger {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Lightbox Specifics (Reusing some structure, customized for Video) */
#video-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(6, 5, 5, 0.95); /* Deep dark background */
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#video-lightbox.active {
    opacity: 1;
    pointer-events: auto;
}

#video-lightbox video {
    max-width: 90%;
    max-height: 90vh;
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
    border-radius: 4px;
    outline: none;
    margin: auto; /* Ensure centering if display block */
    display: block;
}

#video-lightbox .lightbox-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

#video-lightbox .lightbox-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10001;
    padding: 10px;
    transition: transform 0.2s ease;
}

#video-lightbox .lightbox-close:hover {
    transform: scale(1.1);
}

#video-lightbox .lightbox-close img {
    width: 40px;
    height: 40px;
}

@media (max-width: 600px) {
    .masonry-col {
        padding: 0 !important;
    }
    
    #video-lightbox video {
        width: 100%;
        max-height: 80vh;
    }
    
    #video-lightbox .lightbox-close {
        top: 1rem;
        right: 1rem;
    }
}

/* ===== SECTION ACTUALITÉS ===== */
.news-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
    position: relative;
    overflow-x: visible !important; /* Allow side articles to be visible globally */
}

.news-header-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 1rem; /* Reduced Gap */
}

.news-header-wrapper .titre-center {
    margin-bottom: 0; /* Override default */
}

/* Navigation Buttons Positioned Relative to Wrapper */
/* Navigation Buttons Positioned Relative to Wrapper */
.news-carousel-wrapper {
    /* Global Breakout */
    width: 100vw; 
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    position: relative;
    left: 0;
    
    /* Fix spacing to match Expérience section */
    margin-top: 0;
    
    /* Add padding to sides to make room for buttons and center content */
    padding: 0;
}

/* Navigation Buttons - Inherit from .carousel-btn, only position here */
.news-prev-btn, .news-next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px; /* Force size match */
    height: 40px;
    z-index: 10;
    /* Reset any specific btn-audio styles if they leak, but we switched class */
}

.news-prev-btn {
    left: 1rem;
}

.news-next-btn {
    right: 1rem;
}

.news-prev-btn:hover, .news-next-btn:hover {
    background: rgba(242, 12, 96, 0.2);
    box-shadow: 0 0 10px rgba(242, 12, 96, 0.4);
    /* No transform change on hover to avoid jumping */
}

.news-prev-btn img, .news-next-btn img {
    width: 14px;
    height: 14px;
    pointer-events: none;
    transition: filter 0.3s ease;
}

.news-prev-btn:hover img, .news-next-btn:hover img {
    filter: none; /* Keep original color on hover */
    opacity: 1;
}

.news-grid {
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    
    /* Center Content on Desktop: 
       Container approx 1100-1200px. 
       Formula: max(20px, (100vw - 1200px)/2)
    */
    padding: 30px max(4rem, calc(50vw - 600px)); 
    scroll-padding-left: max(4rem, calc(38vw - 600px)); /* FIXED: Align snap to content start */
    
    /* Hide scrollbar */
    scrollbar-width: none; 
    -ms-overflow-style: none;
}

/* Robust Centering for Few Items (Applied via PHP) */
.news-grid-center {
    justify-content: center;
}

/* Tablet Adjustment for Centered Grid to prevent clipping */
@media (max-width: 1024px) {
    .news-grid-center {
        /* Reduce side padding so 2 items (approx 90%) fit without clipping */
        padding-left: 10px;
        padding-right: 10px;
        scroll-padding-left: 10px;
    }
}

.news-grid::-webkit-scrollbar { 
    display: none; 
}

/* Card Styling with Pseudo-Border to fix glitch */
.news-card {
    display: flex;
    flex-direction: column;
    border: none;
    outline: none;
    background-color: var(--variable-collection-black-background);
    padding: 1rem;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-decoration: none;
    position: relative;
    /* Important: box-sizing */
    box-sizing: border-box;
    overflow: visible; 
    box-shadow: 0 0 15px rgba(242, 12, 96, 0.05);

    /* Flex Basis for Carousel on Desktop */
    flex: 0 0 380px; /* Fixed reasonable width for desktop */
    max-width: 380px;
    scroll-snap-align: start;
    
    /* Create Gradient Border via Pseudo-element */
    isolation: isolate; 
}

/* The Gradient Border */
.news-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 0; 
    padding: 1px; /* Border width */
    background: var(--gradient-main-color); 
    -webkit-mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude; 
    pointer-events: none;
    z-index: 1;
}

/* Hover Effect - Only transform, no layout change */
.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px rgba(242, 12, 96, 0.2);
}

/* Fix inner content stacking */
.news-image-wrapper, .news-content {
    z-index: 2;
    position: relative;
}

.news-image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1; /* SQUARE RATIO */
    overflow: hidden;
    margin-bottom: 1rem;

}

.news-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.news-card:hover .news-image {
    transform: scale(1.05);
}

.news-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
}

.news-date {
    font-size: 0.8rem;
    color: var(--variable-collection-main-texte-color-3);
    font-family: var(--body-regular-font-family);
    opacity: 0.8;
}

.news-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--variable-collection-white);
    line-height: 1.3;
    text-align: center;
}

/* RESPONSIVE */
/* Tablet */
@media (max-width: 1024px) {
    /* Ensure Breakout works on Tablet */
    .news-section {
        overflow-x: visible !important;
    }
    .news-carousel-wrapper {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        padding: 0; /* Removing side padding to allow full bleed */
    }
    .news-grid {
        gap: 1.5rem;
        /* Tablet Padding/Snap */
        padding: 20px 50px;
        scroll-padding-left: 50px;
    }
    .news-card {
        flex: 0 0 calc(45% - 0.75rem); /* 2 items visible approx */
    }
    .news-prev-btn { left: 10px; } 
    .news-next-btn { right: 10px; }
}
.titre-actualites {
    margin-top: 1rem;}

/* Mobile Refactor V4: Breakout Strategy */
@media (max-width: 768px) {
    /* 1. Container Safety: Keep padding so Header stays safe */
    .news-section {
        overflow-x: visible !important; /* Allow breakout */
        /* Do NOT zero padding here, let container handle header alignment */
    }

    /* 2. Header Fix: Robust Centering relative to container */
    .news-header-wrapper {
        display: block;
        width: 100%;
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .titre-center {
        display: block; /* Ensure it takes width */
        width: 100%;
        text-align: center;
        margin: 0 auto;
    }
    
    .titre-page {
        display: block;
        width: 100%;
        text-align: center;
        margin: 6rem auto 0 auto; /* Corrected top margin for mobile */
    }

    /* 3. Carousel Breakout: Force full viewport width ignoring parent padding */
    .news-carousel-wrapper {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding: 0;
        position: relative;
        left: 0;
    }

    /* 4. Grid: Horizontal Scroll */
    .news-grid {
        display: flex;
        flex-direction: row;        /* Explicit row */
        flex-wrap: nowrap;          /* Explicit nowrap to force scroll */
        gap: 1rem;
        
        /* Centering Padding: (100vw - 60vw) / 2 = 20vw */
        padding: 20px 20vw 30px 20vw;
        
        width: 100%;
        box-sizing: border-box;
        
        overflow-x: auto;           /* Enable Scroll */
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .news-grid::-webkit-scrollbar { display: none; }

    /* 5. Card: 60vw width */
    .news-card {
        flex: 0 0 60vw;
        width: 60vw;
        max-width: 60vw;            /* Force constraint */
        scroll-snap-align: center;

        /* Default: Fully Visible (Graceful Degradation) */
        opacity: 1;
        transform: scale(1);
        z-index: 2;
        
        transition: opacity 0.3s ease, transform 0.3s ease;
        margin: 0;
    }
    
    /* Only dim if JS says so */
    .news-card.is-inactive {
        opacity: 0.3;
        transform: scale(0.9);
        z-index: 1;
    }
    
    /* Hide Buttons */
    .news-prev-btn, .news-next-btn {
        display: none; 
    }

    /* FIX: On mobile, if 2 items, 'justify-content: center' breaks scroll/clipping */
    /* So we reset to flex-start for mobile, UNLESS it's a single item */
    .news-grid-center {
        justify-content: flex-start;
    }
    
    /* Center ONLY if single item on mobile */
    .news-grid-center > .news-card:only-child {
        margin-left: auto;
        margin-right: auto;
    }
}

/* --- OKTO RECORDER BUTTON STYLES --- */
.okto-btn-record {
    position: relative;
    width: 100%;
    padding: 8px 10px; /* Reduced padding */
    cursor: pointer;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.75rem; /* Slightly smaller font */
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    white-space: nowrap; /* Force single line */
    border: 1px solid transparent; 
    background: linear-gradient(to right, rgba(242, 15, 140, 0.1), rgba(242, 12, 96, 0.1));
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    z-index: 10;
    
    /* Flex Layout for Icon + Text */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.okto-btn-record::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 4px; 
    padding: 1px; 
    background: linear-gradient(90deg, #f20f8c, #f20c60); 
    -webkit-mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Specific class for the text gradient */
.okto-btn-record .btn-text {
    background: linear-gradient(90deg, #f20f8c, #f20c60);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Icon Styling */
.okto-btn-record {
    color: #f20f8c; /* Fallback/Base color for SVG currentColor */
}

.okto-btn-record .exp-icon {
    width: 20px;
    height: 20px;
    /* Remove explicit fill, rely on currentColor from parent */
    flex-shrink: 0;
}

.okto-btn-record:hover {
    box-shadow: 0 0 15px rgba(242, 12, 96, 0.2);
    transform: translateY(-1px);
}

.okto-btn-record.recording-active {
    background: rgba(40, 0, 0, 0.6);
    color: #ff4d4d; /* Update base color for active state */
}

.okto-btn-record.recording-active::before {
    background: linear-gradient(90deg, #ff4d4d, #ff0000);
}

.okto-btn-record.recording-active .btn-text {
    background: none;
    color: #ff4d4d;
    -webkit-text-fill-color: #ff4d4d;
}



.okto-btn-record.recording-active {
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(255, 0, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
}

/* --- RECORDING ACTIONS PANEL --- */
.recording-actions-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.recording-actions-panel--visible {
    opacity: 1;
    transform: translateY(0);
}

.recording-action-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    cursor: pointer;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    white-space: nowrap;
    border: none;
    background: linear-gradient(to right, rgba(242, 15, 140, 0.1), rgba(242, 12, 96, 0.1));
    transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.recording-action-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 4px;
    padding: 1px;
    background: linear-gradient(90deg, #f20f8c, #f20c60);
    -webkit-mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.recording-action-btn span {
    background: linear-gradient(90deg, #f20f8c, #f20c60);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.recording-action-btn .exp-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.recording-action-btn:hover {
    box-shadow: 0 0 15px rgba(242, 12, 96, 0.3);
    transform: translateY(-1px);
    background: linear-gradient(to right, rgba(242, 15, 140, 0.2), rgba(242, 12, 96, 0.2));
}

/* Redo button - subtle different styling */
.recording-action-btn--redo {
    color: rgba(255,255,255,0.7);
}

.recording-action-btn--redo::before {
    background: linear-gradient(90deg, rgba(255,255,255,0.3), rgba(255,255,255,0.2));
}

.recording-action-btn--redo span {
    background: linear-gradient(90deg, rgba(255,255,255,0.8), rgba(255,255,255,0.6));
    -webkit-background-clip: text;
    background-clip: text;
}

.recording-action-btn--redo:hover {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.15);
}

/* Download button - green accent */
.recording-action-btn--download {
    color: #13f29e;
}

.recording-action-btn--download::before {
    background: linear-gradient(90deg, #13f29e, #0cf26c);
}

.recording-action-btn--download span {
    background: linear-gradient(90deg, #13f29e, #0cf26c);
    -webkit-background-clip: text;
    background-clip: text;
}

.recording-action-btn--download:hover {
    box-shadow: 0 0 15px rgba(19, 242, 158, 0.3);
}

/* Share button - keep pink gradient */
.recording-action-btn--share {
    color: #f20f8c;
}

.recording-action-btn--share::before {
    background: linear-gradient(90deg, #f20f8c, #f20c60);
}

.recording-action-btn--share span {
    background: linear-gradient(90deg, #f20f8c, #f20c60);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Mobile responsive */
@media (max-width: 480px) {
    .recording-actions-panel {
        gap: 8px;
    }
    
    .recording-action-btn {
        padding: 8px 10px;
        font-size: 0.65rem;
    }
    
    .recording-action-btn .exp-icon {
        width: 14px;
        height: 14px;
    }
}

/* --- PHOTO FLASH EFFECT --- */
.sema-photo-flash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: white;
    opacity: 0;
    pointer-events: none;
    z-index: 99999;
    transition: opacity 0.1s ease-out;
}

.sema-photo-flash--active {
    opacity: 0.8;
}

/* --- SEMA PREVIEW (Video/Photo) --- */
.sema-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    z-index: 10;
}

/* --- EXPERIENCE CONTROLS (Shared) --- */
.exp-controls-header {
    cursor: move;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
}

.exp-toggle-btn {
    background: none;
    border: none;
    color: white;
    font-family: monospace;
    font-size: 1.2rem;
    cursor: pointer;
}

.exp-controls-title {
    margin: 0;
    font-size: 1rem;
    pointer-events: none;
    flex-grow: 1;
}

.exp-controls-grip {
    font-size: 1rem;
    opacity: 0.5;
    cursor: grab;
}

.exp-controls-body {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
    max-height: 500px;
    opacity: 1;
    margin-top: 10px;
}

.exp-controls.collapsed .exp-controls-body {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
}

.exp-record-group {
    margin-top: 15px;
    text-align: center;
}

/* --- SEMA SPECIFIC --- */
.sema-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.sema-error-msg {
    color: white;
    z-index: 10;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2rem;
    text-align: center;
}

/* --- EIDOLON SPECIFIC --- */
.eidolon-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.eidolon-controls-panel {
    pointer-events: auto;
    z-index: 100;
}

.exp-vol-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.exp-vol-value {
    font-size: 0.8rem;
    opacity: 0.8;
}

.eidolon-grid {
    position: absolute;
    top: 90px;
    bottom: 140px;
    left: 5%;
    right: 5%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(9, 1fr);
    z-index: 10;
    pointer-events: auto;
    touch-action: none;
}

.eidolon-grid-cell {
    position: relative;
}

.eidolon-ripple {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(6, 5, 5, 0.3) 20%, rgba(242, 12, 96, 0.15) 100%);
    border: 1px solid rgba(242, 12, 96, 0.1);
    box-shadow: 0 0 15px rgba(242, 12, 96, 0.05) inset;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

/* --- EXPERIENCE ICONS --- */
.exp-icon {
    width: 20px;
    height: 20px;
    display: block;
    fill: currentColor;
    flex-shrink: 0;
}

.exp-btn-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.exp-toggle-btn {
    /* Reset layout for SVG */
    display: flex;
    align-items: center;
    justify-content: center;
}

.exp-toggle-btn .exp-icon {
    width: 18px;
}

/* Animation pulsation des flèches pour attirer l'attention */
.exp-icon-pulse .arrow-tl {
    animation: arrow-pulse-tl 2s ease-in-out infinite;
    transform-origin: center center;
}

.exp-icon-pulse .arrow-br {
    animation: arrow-pulse-br 2s ease-in-out infinite;
    transform-origin: center center;
}

@keyframes arrow-pulse-tl {
    0%, 100% {
        transform: translate(2px, -2px);
    }
    50% {
        transform: translate(-1px, 1px);
    }
}

@keyframes arrow-pulse-br {
    0%, 100% {
        transform: translate(-2px, 2px);
    }
    50% {
        transform: translate(1px, -1px);
    }
}

/* Ensure okto-btn-record handles icon properly */
.okto-btn-record span {
    display: inline-flex !important; /* Override block for flex layout */
    align-items: center;
    gap: 8px;
}

/* =========================================
   IMAGE ARTICLE PAGE STYLES
   ========================================= */

.article-image-page {
    padding-top: 5rem;
    padding-bottom: 3rem; /* Reduced to match gap */
    max-width: 1200px;
    margin: 0 auto;
}

.article-header {
    margin-bottom: 3rem;
    text-align: center;
}

.article-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.article-subtitle {
    font-size: 1.5rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.article-content {
    margin-bottom: 0; /* Removed to control gap via footer margin */
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.article-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.gallery-item {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.02);
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Carousel Styles */
.article-carousel-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    min-width: 0; /* CRITICAL: Allows shrinking inside CSS Grid */
    margin: 40px auto;
    display: block; /* Changed from flex to block for absolute positioning context */
}

.article-carousel {
    width: 100%;
    overflow: hidden;
    border-radius: 1px;
    position: relative;
    background: rgba(0,0,0,0.2); /* Subtle background */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); /* Lift it up */
}

.carousel-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* Smooth 'graceful' easing */
    width: 100%;
    will-change: transform;
    gap: 0; /* Force no gap */
    margin: 0;
    padding: 0;
}

.carousel-slide {
    min-width: 100%;
    flex-shrink: 0; /* CRITICAL: Prevents slides from being squeezed together */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0; /* Force no margin */
    border: none;
}

.carousel-slide img {
    max-width: 100%;
    max-height: 75vh; /* Taller display */
    width: auto; /* Maintain aspect ratio */
    height: auto;
    display: block;
    object-fit: contain;
}

/* Navigation Buttons */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 20;
    padding: 0;
    border: none;
    backdrop-filter: blur(4px);
}

/* Gradient Border using pseudo-element for opacity control */
.carousel-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    background: linear-gradient(90deg, var(--gradient-color-start), var(--gradient-color-end)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.2; /* 20% opacity normally */
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.carousel-btn:hover::before {
    opacity: 1; /* 100% opacity on hover */
}

.carousel-btn img {
    width: 24px;
    height: 24px;
    display: block;
    opacity: 1; /* Always 100% opacity */
    z-index: 2;
}

.prev-btn {
    left: 0;
}

.prev-btn img {
    transform: rotate(180deg);
}

.next-btn {
    right: 0;
}

/* Lightbox */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.lightbox.active {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    position: relative;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 90vh;
    display: block;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10001;
    padding: 10px;
    transition: transform 0.3s ease;
}

.lightbox-close:hover {
    transform: scale(1.1) rotate(90deg);
}

.lightbox-close img {
    width: 30px;
    height: 30px;
}

.carousel-image-trigger {
    cursor: zoom-in;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .article-image-page {
        padding-bottom: 2rem; /* Consistent spacing on mobile */
    }

    .article-carousel-container {
        margin: 20px auto;
    }
    
    .carousel-btn {
        width: 40px;
        height: 40px;
    }
    
    .carousel-btn img {
        width: 20px;
        height: 20px;
    }
    
    .prev-btn {
        left: 0;
    }

    .next-btn {
        right: 0;
    }
    
    .carousel-slide img {
        max-height: 50vh;
    }

    .article-footer {
        margin-top: 2rem; /* Consistent spacing on mobile */
    }
}

.article-footer {
    text-align: center;
    margin-top: 3rem; /* Matches padding-bottom */
}

/* Back Button - Matching .btn-experience exactly */
.btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 5px 15px; /* Matched btn-experience */
    background: transparent;
    color: var(--gradient-color-start); /* Matched color */
    font-size: 18px; /* Matched size */
    font-weight: bold;
    border: 1px solid;
    border-image: linear-gradient(90deg, var(--gradient-color-start), var(--gradient-color-end)) 1;
    border-radius: 6px; /* Matched radius */
    font-family: var(--h-3-font-family); /* Matched font */
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    background-clip: padding-box;
    width: fit-content;
}

.btn-back:hover {
    background: linear-gradient(90deg, var(--gradient-color-start), var(--gradient-color-end));
    color: #060505;
    box-shadow: 0 0 10px #f20f8caa, 0 0 20px #f20f8caa, 0 0 30px #f20f8caa;
}

.icon-back {
    width: 20px;
    height: 20px;
    filter: brightness(1.2);
    transition: transform 0.3s ease;
    transform: rotate(180deg); /* Point left */
}

.btn-back:hover .icon-back {
    filter: brightness(0) saturate(100%) invert(9%) sepia(6%) saturate(602%) hue-rotate(354deg) brightness(95%) contrast(100%);
    transform: rotate(180deg) translateX(5px); /* Move left slightly */
}

@media (max-width: 768px) {
    .article-title {
        font-size: 2rem;
    }
    
    .article-gallery {
        grid-template-columns: 1fr;
    }

    .legal-page-container .titre-center {
        padding-top: 6rem;
    }
}

/* Hide standard Joomla custom fields output if appended automatically */
.article-image-page dl.article-info,
.article-image-page .fields-container {
    display: none !important;
}

/* =========================================
   CARROUSEL 3D CLOUD (Nuage d'images)
   ========================================= */

.galerie3d-cloud-wrapper {
    position: relative;
    width: 100%;
    height: 120vh; /* Increased from 100vh for more vertical space */
    max-height: 1200px;
    overflow: visible; /* Debug: show overflow to check for extra images */
    perspective: 1000px; /* Stronger perspective for concave feel */
    margin-bottom: -6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cloud-carousel {
    position: relative;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
}

.cloud-item {
    display: block;
    position: absolute;
    left: -125px; /* Half of base width to center */
    top: -125px;  /* Half of base height */
    width: 250px; /* Base width */
    height: 250px; /* Base height */
    /* Centering margins (moved from JS) */
    margin-top: -125px;
    margin-left: -125px;
    padding: 10px;
    box-sizing: border-box;
    will-change: transform, opacity; /* Perf hint */
    /* transition: opacity removed to avoid conflict with JS loop */
    backface-visibility: hidden; /* Hide back face if rotating */
}

.cloud-item img,
.cloud-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    background: #000;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Smooth pop */
}

.cloud-item:hover {
    z-index: 10000 !important; /* Bring to front immediately */
    cursor: pointer;
}

.cloud-item:hover img,
.cloud-item:hover video {
    transform: scale(1.15);
    box-shadow: 0 0 25px rgba(242, 15, 140, 0.6); /* Enhanced glow on hover */
    border-color: rgba(255, 255, 255, 0.8);
}

/* Sizing Classes */
.cloud-item.size-s {
    transform-origin: center center;
    width: 150px;
    height: 150px;
    left: -75px;
    top: -75px;
    z-index: 1;
}

.cloud-item.size-m {
    width: 250px;
    height: 250px;
    left: -125px;
    top: -125px;
    z-index: 2;
}

.cloud-item.size-l {
    width: 350px;
    height: 350px;
    left: -175px;
    top: -175px;
    z-index: 3;
}

/* Interaction */
.cloud-item:hover {
    cursor: pointer;
    z-index: 10; /* Bring to top? Might conflict with 3D */
}

.cloud-item:hover img,
.cloud-item:hover video {
    border-color: var(--variable-collection-pink-secondary-applied);
    box-shadow: 0 0 20px rgba(242, 15, 140, 0.6);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .galerie3d-cloud-wrapper {
        height: 180vh;
        margin-top: -12rem;
    margin-bottom: -12rem;
    }
    
    /* Reduce sizes on mobile by ~1/3 (Ratio preserved) */
    /* Base was 250px. New target ~170px. */
    .cloud-item {
        width: 170px;
        height: 170px;
        /* Rester centré : moitié de 170px */
        margin-top: -85px;
        margin-left: -85px;
    }
}

/* =========================================
   SHARE SECTION STYLES (Refined Layout)
   ========================================= */

.share-article-section {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    /* padding: 2rem 0 3rem 0; */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Right aligned logic as requested */

}

/* Header: Icon + Title */
.share-header-title {
    display: flex;
    align-items: center; /* Vertical Center */
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 500;
    /* Removed specific color override to inherit or default */
    opacity: 0.9;
}

.share-header-title svg {
    width: 20px;
    height: 20px;
    display: block; /* Removes any line-height gaps */
}

/* Icons Grid */
.share-network-grid {
    display: flex;
    align-items: center;

    flex-wrap: nowrap; /* Force single line */
    justify-content: flex-end;
}

.share-network-btn {
    display: flex;
    align-items: center;
    justify-content: right;
    width: 38px; /* Slightly smaller for density */
    height: 38px;
    border-radius: 50%;
    background: transparent; /* Transparent as requested */
    border: 1px solid rgba(0, 0, 0, 0.05); /* Very subtle border */
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    position: relative;
    padding: 0;
}

/* Icon size inside button */
.share-network-btn svg {
    width: 20px;
    height: 20px;
    display: block;
    /* Color is handled by url(#oktoGradient) in HTML */
}

/* Hover States: Subtle Scale & Shadow */
.share-network-btn:hover {
    transform: translateY(-2px);
    background: rgba(0, 0, 0, 0.02); /* Very faint hover bg */
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Copy Tooltip */
.copy-tooltip {
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background: #000;
    color: #fff;
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
    white-space: nowrap;
}

.copy-tooltip.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .share-article-section {
        padding-right: 20px;
        align-items: flex-end;
    }
    
    .share-network-grid {
        /* Ensure it doesn't break if screen is very narrow (iPhone SE) */
        max-width: 100%;
        overflow-x: auto; /* Allow scroll if extreme case, but try to fit */
        padding-bottom: 5px; /* Space for scrollbar if it appears */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Hide scrollbar Firefox */
    }
    
    .share-network-grid::-webkit-scrollbar {
        display: none; /* Hide scrollbar Chrome/Safari */
    }
}