:root {
    color-scheme: light;
    --color-background: #F8F9FA;
    --color-background-alt: #FFFFFF;
    --color-surface: #ffffff;
    --color-text: #212529;
    --color-text-muted: #6C757D;
    --color-border: #DEE2E6;
    --color-accent: #000000;
    --color-accent-darker: #000000;
    --color-accent-light: #000000;
    --color-red-action: #ff0000;
    --color-red-action-hover: #b71c1c;
    --color-neutral-button-bg: #E0E0E0;
    --color-neutral-button-text: var(--color-text);
    --primary-color: var(--color-background);
    --secondary-color: var(--color-background-alt);
    --accent-color: var(--color-accent);
    --text-white: white;
    --text-light: var(--color-text);
    --border-color: var(--border-color);
    --background-color: var(--color-background);
    --primary-color-dark: #E0E0E0;
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-primary: var(--font-display);
    --font-secondary: var(--font-body);
    --header-height: 90px;
    --navbar-height: var(--header-height);
    --section-padding: 8rem 0;
    --border-radius-main: 12px;
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.08);
    --shadow-accent: 0 15px 40px rgba(99, 198, 230, 0.25);
    --plyr-color-main: var(--color-accent);
    --plyr-control-radius: 8px;
    --plyr-control-spacing: 15px;
    --plyr-video-control-background: transparent;
    --plyr-video-control-color: #ffffff;
    --plyr-video-range-track-background: rgba(255, 255, 255, 0.25);
    --plyr-video-progress-buffered-background: rgba(255, 255, 255, 0.35);
    --plyr-range-thumb-background: var(--accent-color);
    --plyr-range-fill-background: var(--accent-color)
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    font-size: 16px
}

body {
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden
}

.container {
    width: 92%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem
}

h1,
h2,
h3,
h5 {
    font-family: var(--font-display);
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em
}

p {
    font-family: var(--font-body);
    line-height: 1.8;
    font-size: 1.125rem;
    color: var(--color-text-muted);
    max-width: 65ch
}

.section {
    padding: var(--section-padding)
}

p.animate-on-scroll {
    font-size: 40px
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translate(-50%, 0)
    }

    40% {
        transform: translate(-50%, -25px)
    }

    60% {
        transform: translate(-50%, -15px)
    }
}

@keyframes bounce-subtle {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translate(-50%, 0)
    }

    40% {
        transform: translate(-50%, -15px)
    }

    60% {
        transform: translate(-50%, -7px)
    }
}

@keyframes punch-in {
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes typing {
    from {
        width: 0
    }

    to {
        width: calc(var(--char-count) * 1ch)
    }
}

@keyframes blink-caret {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: rgba(255, 255, 255, 0.8)
    }
}

.navbar-custom {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    z-index: 1000;
    display: flex;
    align-items: center;
    transition: background-color .4s ease, height .4s ease, box-shadow .4s ease, backdrop-filter .4s ease
}

.navbar-custom .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%
}

.navbar-custom .navbar-brand img {
    height: 70px;
    transition: height .4s ease
}

.navbar-custom.scrolled .navbar-brand img {
    height: 45px
}

.navbar-custom .navbar-collapse {
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.navbar-custom .navbar-nav {
    display: flex;
    gap: 15px;
    margin: 0;
    padding: 0
}

.navbar-custom {
    background: var(--color-background-alt)
}

.navbar-custom.scrolled {
    height: 75px;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: var(--shadow-md)
}

.navbar-custom .navbar-nav .nav-link {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 500;
    text-decoration: none;
    padding: .7rem .5rem;
    transition: color .2s ease
}

.navbar-custom .dropdown-menu {
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    border-radius: var(--border-radius-main)
}

.navbar-custom .dropdown-item {
    color: var(--color-text)
}

.navbar-custom .dropdown-item:hover {
    color: var(--color-accent);
    background-color: var(--color-background)
}

body.dark-theme-component .navbar-custom {
    background: transparent
}

body.dark-theme-component .navbar-brand img {
    filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.6))
}

body.dark-theme-component .navbar-custom.scrolled .navbar-brand img {
    filter: none
}

body.dark-theme-component .navbar-custom .navbar-nav .nav-link {
    color: var(--text-white);
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7)
}

.navbar-custom .navbar-nav .nav-link:hover,
.navbar-custom .navbar-nav .nav-link:focus {
    color: var(--color-accent);
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important
}

body.dark-theme-component .navbar-custom .navbar-nav .nav-link:hover,
body.dark-theme-component .navbar-custom .navbar-nav .nav-link:focus {
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important
}

body.dark-theme-component .navbar-custom.scrolled {
    background-color: rgba(20, 20, 20, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2)
}

body.dark-theme-component .navbar-custom .dropdown-menu {
    background-color: #181818;
    border-color: rgba(255, 255, 255, 0.15)
}

body.dark-theme-component .navbar-custom .dropdown-item {
    color: rgba(255, 255, 255, 0.8)
}

body.dark-theme-component .navbar-custom .dropdown-item:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1)
}

.navbar-custom .navbar-nav .nav-link.active,
.navbar-custom .navbar-nav .nav-link[aria-current=page] {
    font-weight: 700;
    border-bottom: 2.5px solid
}

.navbar-custom .dropdown-menu {
    padding: .5rem 0;
    min-width: 180px;
    left: 50% !important;
    transform: translateX(-50%) !important
}

.navbar-custom .dropdown-item {
    font-family: var(--font-display);
    font-size: .95rem;
    padding: .5rem 1.5rem;
    transition: background-color .3s ease, color .3s ease, transform .3s ease
}

.navbar-custom .dropdown-item:hover {
    transform: translateX(5px)
}

.navbar-custom .dropdown-item.active,
.navbar-custom .dropdown-item[aria-current=page] {
    font-weight: 700;
    background: none !important;
    border-left: 3px solid;
    box-shadow: none
}

.site-footer {
    padding: 6rem 0 3rem;
    background-color: #000;
    color: var(--color-text);
    position: relative;
    overflow: hidden
}

.footer-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .3;
    z-index: 0;
    pointer-events: none
}

.site-footer .container {
    position: relative;
    z-index: 1
}

.footer-grid {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 3rem;
    margin-bottom: 4rem;
    text-align: left
}

.footer-grid>div {
    flex: 1 1 0;
    min-width: 180px
}

.footer-grid>div:first-child {
    flex: 1.2 1 0;
    min-width: 220px;
    max-width: 300px
}

.footer-logo img {
    height: 70px;
    margin-bottom: 1rem;
    opacity: .9
}

.footer-logo p {
    color: #6c757d !important
}

.footer-grid h5 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #fff
}

.footer-grid ul {
    list-style: none;
    padding: 0;
    color: #6c757d !important
}

.footer-grid ul li {
    margin-bottom: .5rem;
    color: #6c757d !important
}

.footer-grid>div>ul>li {
    margin-bottom: .5rem
}

.footer-grid>div>ul>li:has(.footer-submenu) {
    margin-bottom: 0
}

.footer-grid ul a {
    color: #6c757d !important;
    text-decoration: none;
    font-weight: 500;
    transition: color .3s ease
}

.footer-grid ul a:hover {
    color: white
}

.footer-grid ul .footer-submenu {
    padding-left: 0;
    margin-top: .5rem;
    margin-bottom: 1rem
}

.footer-grid ul .footer-submenu li {
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: .25rem
}

.footer-grid ul .footer-submenu li::before {
    content: '—';
    position: absolute;
    left: .5rem;
    color: var(--color-text-muted)
}

.footer-bottom {
    text-align: center;
    padding-top: 3rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin-top: 3rem
}

.footer-bottom p {
    font-size: .9rem;
    color: #6c757d !important;
    max-width: none
}

.footer-bottom .fa-heart {
    color: var(--accent-color-light)
}

.footer-credit-link {
    color: var(--text-muted);
    text-decoration: underline;
    text-decoration-color: var(--accent-color-light);
    transition: color .3s ease
}

.footer-credit-link:hover {
    color: var(--color-accent)
}

.footer-bce {
    margin-top: .5rem;
    font-size: .8rem;
    color: var(--text-muted)
}

.footer-social-links {
    display: flex;
    gap: .8rem;
    margin-top: 1.5rem
}

.footer-grid div:last-child .footer-social-links {
    margin-top: 1rem
}

.footer-social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-white);
    font-size: 1rem;
    text-decoration: none;
    transition: all .3s ease
}

.footer-social-links a:hover {
    background-color: var(--color-red-action);
    color: var(--text-white);
    transform: translateY(-3px)
}

.footer-heading-socials {
    margin-top: 2rem
}

.site-footer--light {
    background: #fff !important
}

.site-footer--light .footer-grid h5,
.site-footer--light .footer-grid ul a,
.site-footer--light .footer-bottom p,
.site-footer--light .footer-logo p,
.site-footer--light .footer-grid ul li,
.site-footer--light .footer-grid ul,
.site-footer--light .footer-grid {
    color: #6c757d !important
}

.site-footer--light .footer-logo img {
    filter: none !important
}

.site-footer--light .footer-grid ul a:hover {
    color: #000 !important
}

.site-footer--light .footer-logo img {
    height: 50px;
    filter: none !important
}

.footer-modern {
    background-color: var(--secondary-color);
    color: var(--text-muted);
    padding: 100px 0 0;
    border-top: 1px solid var(--border-color);
    position: relative;
    overflow: hidden
}

.footer-modern::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(assets/img/planches.jpg);
    background-size: cover;
    background-position: center;
    opacity: .3;
    z-index: 0;
    pointer-events: none
}

.footer-modern .footer-top,
.footer-modern .footer-bottom {
    position: relative;
    z-index: 1
}

.footer-modern .footer-logo img {
    max-height: 50px;
    margin-bottom: 1.5rem
}

.footer-modern .footer-slogan {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 350px
}

.footer-modern h5 {
    font-family: var(--font-secondary);
    color: var(--color-surface);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px
}

.footer-modern ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.footer-modern ul li {
    margin-bottom: .8rem
}

.footer-modern ul li a {
    color: var(--text-muted);
    text-decoration: none;
    transition: all .3s ease;
    display: inline-block
}

.footer-modern ul li a:hover {
    color: var(--accent-color);
    transform: translateX(5px)
}

.footer-modern .footer-contact li {
    display: flex;
    align-items: center
}

.footer-modern .footer-contact li a {
    text-decoration: none
}

.footer-modern .footer-contact li i {
    color: var(--accent-color);
    margin-right: 10px;
    width: 20px;
    text-align: center
}

.footer-modern .social-links {
    margin-top: 2rem;
    display: flex;
    gap: 1rem
}

.footer-modern .social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: .9rem;
    text-decoration: none;
    transition: all .3s ease
}

.footer-modern .social-links a:hover {
    background-color: var(--accent-color);
    color: var(--primary-color);
    border-color: var(--accent-color);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(110, 200, 242, 0.2)
}

.footer-modern .footer-bottom {
    padding: 1.5rem 0;
    margin-top: 60px;
    border-top: 1px solid var(--border-color);
    text-align: center
}

.footer-modern .footer-bottom p {
    margin: 0;
    font-size: .9rem
}

.site-footer.site-footer--light .footer-social-links a {
    background-color: var(--color-background);
    color: var(--color-text-muted)
}

.site-footer.site-footer--light .footer-social-links a:hover {
    background-color: var(--color-accent);
    color: var(--text-white)
}

.nav-button {
    background-color: var(--color-accent);
    color: white;
    padding: .7rem 1.4rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-family: var(--font-display);
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    margin-left: 20px;
    transition: all .3s ease
}

.btn-modern {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid var(--accent-color);
    border-radius: 10px;
    background: transparent;
    color: var(--accent-color);
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 1px;
    transition: all .3s ease
}

.btn-modern:hover {
    background-color: var(--accent-color);
    color: var(--text-white);
    transform: translateY(-3px)
}

.btn-modern-white {
    display: inline-block;
    padding: 12px 30px;
    border: 1px solid var(--text-white);
    color: var(--text-white);
    background: transparent;
    font-weight: 500;
    text-decoration: none;
    border-radius: 50px;
    transition: all .3s ease;
    letter-spacing: 1px
}

.btn-modern-white:hover {
    background-color: var(--text-white);
    color: var(--color-accent);
    transform: translateY(-3px)
}

.btn-modern-white i {
    margin-right: 8px
}

.btn-red-wide {
    display: block;
    width: 100%;
    padding: 1.1rem 0;
    font-size: 1.25rem;
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    background: var(--color-red-action);
    border: none;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 6px 24px rgba(229, 57, 53, 0.18);
    transition: background .2s, box-shadow .2s, transform .2s;
    letter-spacing: .04em
}

.btn-red-wide:hover,
.btn-red-wide:focus {
    background: var(--color-red-action-hover);
    color: #fff;
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 12px 32px rgba(183, 28, 28, 0.18)
}

.hover-reserve-button {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    text-decoration: none;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity .4s ease, transform .4s ease
}

.feature-section .row:hover .hover-reserve-button {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto
}

.hover-reserve-button .button-content {
    display: block;
    padding: 16px 0;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-white);
    transition: transform .5s cubic-bezier(0.77, 0, 0.175, 1)
}

.hover-reserve-button .button-content.original {
    background-color: var(--color-red-action);
    transform-origin: top center
}

.hover-reserve-button .button-content.on-hover {
    background-color: var(--color-accent);
    color: var(--text-white);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform-origin: bottom center;
    transform: rotateX(-90deg)
}

.hover-reserve-button:hover .button-content.original {
    transform: rotateX(90deg)
}

.hover-reserve-button:hover .button-content.on-hover {
    transform: rotateX(0)
}

.form-floating-group {
    position: relative;
    margin-bottom: 2.5rem
}

.form-floating-group input,
.form-floating-group textarea,
.form-floating-group select {
    width: 100%;
    padding: 10px 0;
    font-size: 1rem;
    font-family: var(--font-display);
    color: var(--text-light);
    background-color: transparent;
    border: none;
    border-bottom: 2px solid var(--border-color);
    outline: none;
    position: relative;
    z-index: 1;
    border-radius: 0
}

.form-floating-group textarea {
    resize: vertical
}

.form-floating-group select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer
}

.form-floating-group:has(select)::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 5px;
    top: 10px;
    color: var(--text-muted);
    pointer-events: none;
    z-index: 2;
    transition: transform .2s ease
}

.form-floating-group label {
    position: absolute;
    top: 10px;
    left: 0;
    font-size: 1rem;
    color: var(--text-muted);
    pointer-events: none;
    transition: all .2s ease-in-out;
    z-index: 0
}

.form-floating-group input:focus,
.form-floating-group textarea:focus,
.form-floating-group select:focus {
    border-bottom-color: var(--accent-color)
}

.form-floating-group input:focus+label,
.form-floating-group input:not(:placeholder-shown)+label,
.form-floating-group textarea:focus+label,
.form-floating-group textarea:not(:placeholder-shown)+label,
.form-floating-group select:focus+label,
.form-floating-group select:valid+label {
    top: -16px;
    font-size: .8rem;
    color: var(--accent-color)
}

.btn-modern-submit {
    display: inline-block;
    width: 100%;
    padding: 16px 40px;
    border: none;
    border-radius: 50px;
    background: var(--accent-color);
    color: var(--secondary-color) !important;
    font-family: var(--font-secondary);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    cursor: pointer;
    transition: all .3s ease
}

.btn-modern-submit:hover {
    transform: translateY(-5px) scale(1.02)
}

.testimonial-card {
    height: 100%;
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-main);
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease
}

.testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md)
}

.testimonial-card .quote-icon {
    position: relative;
    z-index: 1;
    font-size: 1.5rem;
    color: var(--color-text);
    margin-bottom: 1rem
}

.testimonial-card .testimonial-text {
    position: relative;
    z-index: 1;
    font-style: italic;
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 2rem;
    flex-grow: 1
}

.testimonial-card .testimonial-author {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    margin-top: auto;
    border-top: 1px solid var(--border-color);
    padding-top: 1.5rem
}

.testimonial-card .author-info h5 {
    margin: 0;
    font-family: var(--font-secondary);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-light)
}

.testimonial-card .author-info p {
    margin: 0;
    font-size: .9rem;
    color: var(--accent-color)
}

.team-card {
    background-color: var(--secondary-color);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .3s ease, box-shadow .3s ease
}

.team-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2)
}

.team-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center
}

.team-card-body {
    padding: 1.5rem;
    flex-grow: 1
}

.team-card-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--text-light);
    margin-bottom: .25rem
}

.team-card-role {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--accent-color);
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 1rem
}

.team-card-text {
    font-size: .95rem;
    color: var(--text-muted);
    line-height: 1.6
}

.modal-backdrop.show {
    opacity: .5;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px)
}

#arnaudMartinyModal.fade .modal-dialog {
    transition: transform .3s ease-out;
    transform: scale(.9) translateY(-20px)
}

#arnaudMartinyModal.show .modal-dialog {
    transform: scale(1) translateY(0)
}

.arnaud-martiny-modal {
    background-color: var(--primary-color);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    padding: 2rem 1.5rem;
    max-width: 450px;
    margin: auto;
    position: relative;
    overflow: hidden
}

.btn-close-modal {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: rgba(45, 55, 72, 0.08);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: .9rem;
    transition: all .2s ease-in-out
}

.btn-close-modal:hover {
    background-color: var(--accent-color-light);
    color: var(--text-light);
    transform: rotate(90deg)
}

.modal-profile-pic {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1.5rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1)
}

.modal-title-name {
    font-family: var(--font-secondary);
    font-weight: 700;
    font-size: 1.8rem;
    color: var(--text-light);
    margin-bottom: .25rem
}

.modal-subtitle-job {
    font-family: var(--font-primary);
    font-weight: 500;
    color: var(--accent-color);
    margin-bottom: 1.5rem
}

.modal-presentation {
    color: var(--text-muted);
    line-height: 1.6;
    font-size: .95rem;
    max-width: 90%;
    margin: 0 auto 2rem auto
}

.modal-social-links {
    display: flex;
    justify-content: center;
    gap: 1.2rem
}

.modal-social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(45, 55, 72, 0.05);
    color: var(--text-muted);
    font-size: 1rem;
    text-decoration: none;
    transition: all .3s cubic-bezier(0.25, 0.8, 0.25, 1)
}

.modal-social-links a:hover {
    background-color: var(--accent-color);
    color: var(--text-white);
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(110, 200, 242, 0.3)
}

.feature-image-wrapper .plyr--video {
    border-radius: var(--border-radius-main);
    overflow: hidden;
    width: 100%;
    height: auto
}

.feature-image-wrapper .plyr__video-wrapper {
    position: relative;
    padding-top: 56.25%;
    height: auto
}

.feature-image-wrapper .plyr__video-embed,
.feature-image-wrapper .plyr__video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.hero {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-background);
    padding-top: var(--header-height)
}

.hero-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    filter: sepia(50%) brightness(80%)
}

.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
    z-index: 2
}

.hero-content-wrapper {
    position: relative;
    z-index: 3;
    width: 90%;
    max-width: 1200px;
    padding: 2rem;
    text-align: center
}

.hero-content-wrapper h1 {
    font-size: clamp(3.2rem, 9.6vw, 6.4rem);
    color: var(--color-background);
    margin-bottom: 2rem;
    text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
    line-height: 1.1
}

.hero-subtitle {
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    font-family: var(--font-body);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
    max-width: 600px;
    margin: 0 auto
}

.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    animation: bounce 3s infinite ease-in-out;
    cursor: pointer
}

.scroll-indicator i {
    font-size: 2.2rem;
    color: var(--color-background);
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5)
}

.page-title-section {
    background-color: var(--secondary-color);
    padding: 3rem 1.5rem;
    padding-top: calc(3rem + 75px);
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100px
}

.page-title-section h1,
.page-title-section .lead,
.page-title-section .page-subtitle-secondary {
    margin-left: auto;
    margin-right: auto;
    max-width: 90%
}

.feature-section {
    padding: 120px 0;
    overflow: hidden
}

.feature-section .row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch
}

.feature-section .row>[class*=col-] {
    display: flex;
    flex-direction: column
}

.content-page .feature-section {
    padding: 100px 0
}

.content-page .text-center h1 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5.5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-light)
}

.content-page .feature-content h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-light);
    margin-bottom: 1.5rem
}

.content-page .feature-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    max-width: 550px;
    margin-bottom: 2rem;
    color: var(--text-light)
}

.feature-content {
    flex-grow: 1
}

.content-page .feature-image-wrapper {
    width: 100%;
    height: 100%;
    background-color: var(--secondary-color);
    border-radius: var(--border-radius-main);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transition: transform .4s ease, box-shadow .4s ease;
    position: relative;
    perspective: 800px
}

.content-page .feature-image-wrapper.video-wrapper {
    width: 100%
}

.content-page .feature-image-wrapper:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.25)
}

.content-page .feature-image-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.content-page .feature-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.feature-image {
    display: block;
    width: 100%;
    max-width: 1200px;
    height: auto;
    margin-left: auto;
    margin-right: auto
}

#contact-cta.feature-section .feature-content,
#press-kit-cta.feature-section .feature-content {
    text-align: center
}

#contact-cta.feature-section .feature-content h2,
#contact-cta.feature-section .feature-content p,
#press-kit-cta.feature-section .feature-content h2,
#press-kit-cta.feature-section .feature-content p {
    margin-left: auto;
    margin-right: auto
}

.final-cta {
    padding: 6rem 0;
    text-align: center;
    background: var(--color-background)
}

.final-cta h2 {
    font-weight: 700;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    color: var(--color-text);
    text-transform: none;
    letter-spacing: normal;
    margin: 0 auto 3.5rem auto;
    max-width: 700px
}

.cta-buttons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap
}

.final-cta .cta-link {
    display: inline-block;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    border: 2px solid transparent;
    transition: all .3s ease
}

.final-cta .cta-link.primary {
    background: var(--color-accent);
    color: white;
    box-shadow: var(--shadow-accent)
}

.final-cta .cta-link.primary:hover {
    background: var(--color-accent-darker);
    transform: translateY(-3px);
    box-shadow: 0 18px 45px rgba(99, 198, 230, 0.3)
}

.final-cta .cta-link.secondary {
    background: transparent;
    color: var(--color-accent);
    border-color: var(--color-accent)
}

.final-cta .cta-link.secondary:hover {
    background: var(--color-accent);
    color: white;
    transform: translateY(-3px)
}

.final-cta.dark-theme {
    background-color: #212529
}

.final-cta.dark-theme h2 {
    color: var(--text-white)
}

.final-cta.dark-theme .cta-link.primary {
    background: var(--text-white);
    color: var(--color-text);
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.1)
}

.final-cta.dark-theme .cta-link.primary:hover {
    background: #e9ecef;
    box-shadow: 0 15px 30px rgba(255, 255, 255, 0.15)
}

.final-cta.dark-theme .cta-link.secondary {
    color: var(--text-white);
    border-color: var(--text-white)
}

.final-cta.dark-theme .cta-link.secondary:hover {
    background: var(--text-white);
    color: var(--color-text)
}

.hero-content-wrapper h1 span {
    opacity: 0;
    transform: translateY(20px);
    display: block;
    width: 100%;
    margin-bottom: .15em;
    animation: punch-in .6s forwards cubic-bezier(0.2, 0.9, 0.3, 1.2)
}

.hero-content-wrapper h1 .h1-line-1 {
    animation-delay: .2s
}

.hero-content-wrapper h1 .h1-line-2 {
    animation-delay: 1.2s
}

.hero-content-wrapper h1 .h1-line-3 {
    animation-delay: 2.2s
}

.hero-subtitle.typewriter {
    --char-count: 42;
    --typing-speed: 2.5s;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid rgba(255, 255, 255, 0.8);
    animation: typing var(--typing-speed) steps(var(--char-count)) 3.5s forwards, blink-caret .75s step-end infinite
}

.activity-ecoles-redesign {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow: hidden
}

.activity-ecoles-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    z-index: 2
}

.activity-ecoles-center {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px
}

.activity-ecoles-title {
    color: #fff;
    font-size: 3rem;
    font-family: var(--font-display);
    text-align: center;
    text-shadow: 2px 2px 12px rgba(0, 0, 0, 0.45);
    letter-spacing: .05em;
    font-weight: 700;
    margin: 0
}

.activity-ecoles-bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    padding: 0 5% 3% 5%;
    box-sizing: border-box
}

.activity-ecoles-bottom-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 40%
}

.activity-ecoles-subtitle {
    color: #fff;
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4)
}

.activity-ecoles-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%
}

.activity-ecoles-bottom-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    max-width: 45%;
    width: 45%
}

.activity-ecoles-comments {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    width: 100%
}

.activity-ecoles-comment {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    padding: 1.2rem 1.5rem;
    color: var(--color-text);
    font-size: 1.05rem;
    font-family: var(--font-body)
}

.activity-ecoles-comment blockquote {
    margin: 0 0 .5rem 0;
    font-style: italic;
    color: var(--color-text);
    font-size: 1.05rem;
    line-height: 1.5
}

.activity-ecoles-comment footer {
    color: var(--color-text-muted);
    font-size: .95rem;
    text-align: right
}

.redesigned-activity-section {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    color: #fff
}

.redesigned-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1
}

.redesigned-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 2
}

.redesigned-title-zone {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 100%;
    text-align: center;
    padding: 0 1rem
}

.redesigned-title-zone h2 {
    font-size: clamp(2.8rem, 6vw, 5rem);
    margin: 0;
    color: #fff;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em
}

.redesigned-bottom-zone {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    text-align: center;
    display: inline-block;
    width: auto;
    padding-bottom: 8rem;
    padding-left: 1rem;
    padding-right: 1rem
}

.redesigned-subtitle {
    font-size: 40px;
    color: #fff;
    margin-bottom: 2rem;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
    white-space: nowrap
}

.redesigned-buttons-wrapper {
    display: flex;
    gap: 1.5rem;
    width: 100%
}

.redesigned-btn-activity {
    text-decoration: none;
    position: relative;
    perspective: 800px;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
    transition: transform .3s ease;
    flex-grow: 1;
    flex-basis: 0
}

.redesigned-btn-activity:hover {
    transform: translateY(-5px)
}

.redesigned-btn-activity .button-face {
    display: block;
    padding: .9rem 2rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
    transition: transform .5s cubic-bezier(0.77, 0, 0.175, 1);
    backface-visibility: hidden;
    box-sizing: border-box;
    border: 2px solid transparent
}

.redesigned-btn-activity .button-face.original {
    transform-origin: top center;
    background: transparent;
    color: #fff;
    border: 2px solid #fff
}

.redesigned-btn-activity .button-face.on-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: bottom center;
    transform: rotateX(-90deg);
    background: var(--color-red-action);
    color: #fff;
    border: 2px solid var(--color-red-action)
}

.redesigned-btn-activity:hover .button-face.original {
    transform: rotateX(90deg)
}

.redesigned-btn-activity:hover .button-face.on-hover {
    transform: rotateX(0)
}

#formations-new .redesigned-bottom-zone {
    display: block;
    width: 900px;
    max-width: 90%
}

#formations-new .redesigned-subtitle {
    white-space: normal
}

.activity-section {
    min-height: 100vh;
    width: 100vw;
    position: relative;
    display: flex;
    flex-direction: column;
    color: white;
    padding: 0;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    text-align: center
}

.activity-section .section-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: 1;
    background-attachment: fixed
}

.page-content {
    position: relative;
    z-index: 3;
    max-width: 1200px
}

.page-content h2 {
    font-size: clamp(2.8rem, 6vw, 5rem);
    margin-bottom: 1rem;
    color: #fff;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8)
}

.page-content p {
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 2rem;
    max-width: 60ch;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8)
}

.page-content .page-link {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    font-size: 1.1rem;
    border: 2px solid rgba(255, 255, 255, 0.9);
    padding: .8rem 2rem;
    border-radius: 50px;
    transition: all .3s ease;
    display: inline-block;
    margin-bottom: 3rem;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
    background-color: rgba(0, 0, 0, 0.2)
}

.activity-link-wrapper:hover .page-link {
    background-color: #fff;
    color: #000;
    transform: scale(1.05);
    text-shadow: none
}

.activity-section .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    width: 100%;
    max-width: 1100px
}

.activity-section .testimonial-item {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 1.5rem;
    border-radius: .5rem;
    font-style: italic;
    font-size: .95rem;
    text-align: left;
    color: #fff
}

.activity-section .testimonial-item footer {
    margin-top: 1rem;
    font-style: normal;
    font-weight: bold;
    color: #fff;
    opacity: .85
}

.activity-section.position-top-left {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left
}

.activity-section.position-top-right {
    align-items: flex-end;
    justify-content: flex-start;
    text-align: right
}

.activity-section.position-bottom-left {
    align-items: flex-start;
    justify-content: flex-end;
    text-align: left
}

.activity-section.position-bottom-right {
    align-items: flex-end;
    justify-content: flex-end;
    text-align: right
}

.activity-section .page-content p,
.activity-section .testimonials-grid {
    margin-left: auto;
    margin-right: auto
}

.activity-section.position-top-left .page-content p,
.activity-section.position-bottom-left .page-content p,
.activity-section.position-top-left .testimonials-grid,
.activity-section.position-bottom-left .testimonials-grid {
    margin-left: 0;
    margin-right: auto
}

.activity-section.position-top-right .page-content p,
.activity-section.position-bottom-right .page-content p,
.activity-section.position-top-right .testimonials-grid,
.activity-section.position-bottom-right .testimonials-grid {
    margin-left: auto;
    margin-right: 0
}

.activity-section .activity-link-wrapper {
    display: flex;
    flex-direction: column;
    align-items: inherit;
    justify-content: inherit;
    text-decoration: none;
    color: white;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 3;
    padding: 2rem
}

.activity-section.layout-absolute {
    position: relative;
    display: block
}

.activity-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 2
}

.layout-zone {
    position: absolute;
    z-index: 3;
    box-sizing: border-box;
    padding: 3rem 5%
}

.layout-zone.zone-center {
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    padding: 0 5%
}

.layout-zone.zone-center h2 {
    margin: 0;
    font-size: clamp(2.8rem, 6vw, 5rem)
}

.layout-zone.zone-bottom-left {
    bottom: 0;
    left: 0;
    max-width: 1200px;
    width: 90%;
    text-align: left
}

.layout-zone.zone-bottom-left p {
    margin-bottom: 1.5rem;
    max-width: 100%;
    color: #fff;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8)
}

.layout-zone.zone-bottom-right {
    bottom: 0;
    right: 0;
    max-width: 580px
}

.content-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    max-width: 100%
}

.layout-buttons {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    width: 100%
}

.layout-buttons .btn-activity-layout {
    flex: 1;
    width: 100%;
    min-width: 0
}

.btn-activity-layout {
    text-decoration: none;
    position: relative;
    perspective: 800px;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
    transition: transform .3s ease
}

.btn-activity-layout:hover {
    transform: translateY(-5px)
}

.btn-activity-layout .button-face {
    display: block;
    padding: .9rem 2rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
    transition: transform .5s cubic-bezier(0.77, 0, 0.175, 1);
    backface-visibility: hidden;
    box-sizing: border-box;
    border: 2px solid transparent
}

.btn-activity-layout .button-face.original {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
    transform-origin: top center
}

.btn-activity-layout .button-face.on-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: bottom center;
    transform: rotateX(-90deg);
    background: var(--color-red-action);
    color: #fff;
    border: 2px solid var(--color-red-action)
}

.btn-activity-layout:hover .button-face.original {
    transform: rotateX(90deg)
}

.btn-activity-layout:hover .button-face.on-hover {
    transform: rotateX(0)
}

.btn-activity-layout.btn-activity-red .button-face.original {
    background: transparent;
    color: #fff;
    border: 2px solid #fff
}

.btn-activity-layout.btn-activity-red .button-face.on-hover {
    background: var(--color-red-action);
    color: #fff;
    border: 2px solid var(--color-red-action)
}

.btn-activity-layout.btn-activity-white .button-face.original {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
    transform-origin: bottom center
}

.btn-activity-layout.btn-activity-white .button-face.on-hover {
    background: #fff;
    color: var(--color-red-action);
    border: 2px solid #fff;
    transform-origin: top center;
    transform: rotateX(90deg)
}

.btn-activity-layout.btn-activity-white:hover .button-face.original {
    transform: rotateX(-90deg)
}

.btn-activity-layout.btn-activity-white:hover .button-face.on-hover {
    transform: rotateX(0)
}

.btn-activity-layout.btn-activity-special .button-face.original {
    background: transparent;
    color: #fff;
    border: 2px solid #fff
}

.btn-activity-layout.btn-activity-special .button-face.on-hover {
    background: var(--color-red-action);
    color: #fff;
    border: 2px solid var(--color-red-action)
}

.btn-activity-layout:not(.btn-activity-red):not(.btn-activity-white):not(.btn-activity-special) .button-face.original {
    background: var(--color-red-action);
    color: #fff;
    border: 2px solid var(--color-red-action)
}

.btn-activity-layout:not(.btn-activity-red):not(.btn-activity-white):not(.btn-activity-special) .button-face.on-hover {
    background: #141414;
    color: #fff;
    border: 2px solid #141414
}

#formations .layout-zone.zone-bottom-left .content-block {
    display: block;
    width: fit-content;
    max-width: 100%
}

#formations .layout-buttons .btn-activity-layout {
    width: 450px;
    min-width: 0;
    max-width: 100%;
    flex: none
}

#formations .layout-buttons {
    justify-content: flex-start;
    gap: 1rem
}

.contact-section-wow {
    padding: 80px 0
}

.contact-wrapper {
    background-color: var(--secondary-color);
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(45, 55, 72, 0.15);
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    overflow: hidden;
    border: 1px solid var(--border-color)
}

.contact-info {
    padding: clamp(2rem, 5vw, 4rem);
    background-color: var(--accent-color);
    color: var(--text-white)
}

.contact-info h2 {
    font-family: var(--font-secondary);
    font-weight: 700;
    margin-bottom: 1rem
}

.contact-info p {
    color: var(--text-white);
    opacity: .9;
    line-height: 1.7;
    margin-bottom: 2.5rem
}

.contact-details {
    list-style: none;
    padding: 0;
    margin: 0 0 3rem 0
}

.contact-details li {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    font-size: 1.05rem
}

.contact-details i {
    font-size: 1.2rem;
    width: 30px;
    opacity: .8;
    margin-right: 15px
}

.contact-details a,
.contact-details span {
    color: var(--text-white);
    text-decoration: none;
    font-weight: 500;
    transition: opacity .2s ease
}

.contact-details a:hover {
    opacity: .8
}

.contact-info h3 {
    font-family: var(--font-secondary);
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 2rem
}

.social-links-contact {
    display: flex;
    gap: 1rem
}

.social-links-contact a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--text-white);
    transition: all .3s ease
}

.social-links-contact a:hover {
    background-color: var(--text-white);
    color: var(--accent-color);
    transform: translateY(-3px)
}

.contact-form {
    padding: clamp(2rem, 5vw, 4rem)
}

.contact-form h2 {
    font-family: var(--font-secondary);
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 2.5rem
}

.team-section {
    padding: 4rem 0;
    background-color: var(--background-color)
}

.team-section h2 {
    text-align: center;
    margin-bottom: 3rem
}

.support-box {
    background-color: var(--primary-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-main);
    padding: 2.5rem;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform .3s ease, box-shadow .3s ease
}

.support-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(45, 55, 72, 0.1)
}

.support-box-icon {
    font-size: 2.5rem;
    color: var(--accent-color);
    margin-bottom: 1.5rem
}

.support-box h3 {
    font-family: var(--font-secondary);
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 1rem
}

.support-box p {
    color: var(--text-muted);
    flex-grow: 1
}

.donation-details {
    background-color: var(--secondary-color);
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1.5rem;
    text-align: left;
    font-family: monospace;
    font-size: .95rem;
    width: 100%;
    line-height: 1.6
}

.content-page .highlight {
    position: relative;
    color: var(--accent-color);
    font-weight: 700;
    padding-bottom: 5px
}

.content-page .highlight::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--accent-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.content-page .highlight:hover::after {
    transform: scaleX(1)
}

.content-page .feature-list {
    list-style: none;
    padding-left: 0
}

.content-page .feature-list li {
    font-size: 1.05rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center
}

.content-page .feature-list i {
    color: var(--accent-color);
    margin-right: 15px;
    font-size: 1.2rem;
    width: 25px;
    text-align: center
}

.logistics-section-pro {
    padding: 80px 0;
    background-color: var(--background-color)
}

.logistics-dual-pane-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    align-items: flex-start;
    gap: 2.5rem
}

.logistics-sticky-pane {
    position: sticky;
    top: 120px
}

.sticky-content {
    background-color: var(--color-accent);
    color: var(--text-white);
    padding: 2rem 1.75rem;
    border-radius: 16px
}

.sticky-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    opacity: .5
}

.sticky-content h2 {
    font-family: var(--font-secondary);
    font-size: 1.8rem;
    margin-bottom: .75rem;
    color: var(--text-white)
}

.sticky-content>p {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    max-width: 100%
}

.logistics-cta-box {
    margin-top: 2rem;
    padding: 1.25rem;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px
}

.logistics-cta-box h5 {
    font-family: var(--font-secondary);
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: .25rem
}

.logistics-cta-box p {
    font-size: .9rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1rem;
    max-width: 100%
}

.logistics-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem
}

.logistics-info-card {
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease
}

.logistics-info-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent)
}

.logistics-info-card .card-icon {
    font-size: 1.8rem;
    color: var(--accent-color-light);
    margin-bottom: .75rem;
    transition: color .3s ease
}

.logistics-info-card:hover .card-icon {
    color: var(--color-accent)
}

.logistics-info-card h5 {
    font-family: var(--font-secondary);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: .4rem
}

.logistics-info-card p {
    color: var(--text-muted);
    font-size: .95rem;
    line-height: 1.6;
    margin: 0;
    max-width: 100%
}

.tech-sheet-section {
    padding: 100px 0
}

.tech-sheet-card {
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(45, 55, 72, 0.07);
    overflow: hidden
}

.tech-sheet-header {
    padding: 1.5rem 2rem;
    background-color: var(--primary-color);
    border-bottom: 1px solid var(--border-color)
}

.tech-sheet-header h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin: 0
}

.tech-sheet-list {
    list-style: none;
    padding: 0;
    margin: 0
}

.tech-sheet-item {
    display: flex;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border-color);
    transition: background-color .2s ease
}

.tech-sheet-item:last-child {
    border-bottom: none
}

.tech-sheet-item:hover {
    background-color: #f8fbfd
}

.tech-sheet-label {
    display: flex;
    align-items: center;
    flex-basis: 35%;
    flex-shrink: 0;
    font-family: var(--font-secondary);
    font-weight: 600;
    font-size: .9rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .5px
}

.tech-sheet-label i {
    font-size: 1.1rem;
    color: var(--accent-color);
    margin-right: 1rem;
    width: 20px
}

.tech-sheet-details {
    font-size: 1rem;
    color: var(--text-light);
    font-weight: 500
}

.tech-sheet-footer {
    padding: 1.5rem 2rem;
    background-color: var(--primary-color);
    border-top: 1px solid var(--border-color);
    text-align: center
}

.tech-sheet-footer p {
    margin: 0;
    color: var(--text-muted)
}

.tech-sheet-footer a {
    font-weight: 600;
    color: var(--accent-color);
    text-decoration: none
}

.testimonials-section,
.testimonials-section-simple {
    padding: 100px 0
}

.testimonials-section .section-title,
.testimonials-section-simple .section-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    text-align: center;
    margin-bottom: 1rem
}

.testimonials-section .section-subtitle,
.testimonials-section-simple .section-subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 4rem auto
}

.testimonials-section .testimonials-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem
}

.testimonials-grid>.testimonial-card {
    flex: 0 1 340px
}

.testimonials-section .container {
    max-width: 3000px
}

#avis-senior .testimonial-exergue {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--accent-color);
    line-height: 1.3;
    margin: 0 0 1.5rem 0
}

@media (min-width:1200px) {
    .testimonial-card {
        padding: 2rem 1.5rem
    }

    .testimonial-card .testimonial-text {
        font-size: .95rem;
        margin-bottom: 1.5rem
    }
}

@media (max-width:768px) {
    .hero-subtitle.typewriter {
        animation: none;
        width: auto;
        white-space: normal;
        border-right: none;
        margin: 0 auto;
        opacity: 0;
        animation: fadeInDown 1s forwards;
        animation-delay: 3.5s
    }

    .redesigned-activity-section {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 5rem;
        padding-bottom: 3rem
    }

    .redesigned-title-zone,
    .redesigned-bottom-zone {
        position: static;
        transform: none;
        padding-bottom: 0;
        display: block;
        width: 100%
    }

    .redesigned-title-zone {
        margin-bottom: 10vh
    }

    .redesigned-subtitle {
        font-size: 28px;
        white-space: normal
    }

    .redesigned-buttons-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 1rem
    }

    .redesigned-btn-activity {
        width: 100%;
        max-width: 350px;
        flex-grow: 0
    }

    .activity-section .section-bg-image {
        background-attachment: scroll
    }

    .footer-grid {
        text-align: center
    }
}

@media (max-width:600px) {
    .activity-ecoles-title {
        font-size: 2rem
    }

    .activity-ecoles-subtitle {
        font-size: 1rem
    }

    .btn-red-wide {
        font-size: 1rem;
        padding: .8rem 0
    }

    .activity-ecoles-comment {
        font-size: .98rem;
        padding: 1rem 1rem
    }
}

@media (max-width:576px) {
    .arnaud-martiny-modal {
        max-width: 92vw;
        padding: 1.5rem 1rem
    }

    .modal-profile-pic {
        width: 80px;
        height: 80px;
        margin-bottom: 1rem
    }

    .modal-title-name {
        font-size: 1.5rem
    }

    .modal-presentation {
        font-size: .9rem
    }

    .modal-social-links a {
        width: 40px;
        height: 40px
    }
}

body.dark-theme-component .arnaud-martiny-modal {
    background-color: #1c1c1c;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5)
}

body.dark-theme-component .btn-close-modal {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7)
}

body.dark-theme-component .btn-close-modal:hover {
    background-color: var(--color-red-action);
    color: var(--text-white)
}

body.dark-theme-component .modal-title-name {
    color: var(--text-white)
}

body.dark-theme-component .modal-subtitle-job {
    color: var(--color-red-action)
}

body.dark-theme-component .modal-presentation {
    color: rgba(255, 255, 255, 0.7)
}

body.dark-theme-component .modal-social-links a {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7)
}

body.dark-theme-component .modal-social-links a:hover {
    background-color: var(--color-red-action);
    color: var(--text-white);
    box-shadow: 0 10px 20px rgba(255, 0, 0, 0.2)
}

#nos-partenaires {
    background-color: var(--color-background-alt)
}

#nos-partenaires .team-section h2 {
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 4rem
}

#nos-partenaires .team-card {
    background-color: #fff;
    border: none;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 2.5rem 2rem;
    transition: all .3s ease-in-out
}

#nos-partenaires .partner-link:hover .team-card {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12)
}

#nos-partenaires .team-card-img {
    height: 90px;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: center
}

#nos-partenaires .team-card-img img {
    max-height: 100%;
    max-width: 90%;
    width: auto;
    height: auto;
    object-fit: contain
}

#nos-partenaires .team-card-body {
    padding: 0
}

#nos-partenaires .team-card-title {
    color: #0056b3;
    text-decoration: underline;
    font-size: 1.25rem;
    font-weight: 600;
    font-family: var(--font-body)
}

#nos-partenaires .team-card-role {
    color: #000;
    font-weight: 900;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid #000;
    display: inline-block;
    padding-bottom: 4px;
    margin-top: .75rem;
    margin-bottom: 1.25rem
}

#nos-partenaires .team-card-text {
    color: #0056b3;
    text-decoration: underline;
    font-size: 1rem;
    line-height: 1.6
}

.partner-link,
.partner-link:hover {
    text-decoration: none
}

.youtube-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--border-radius-main);
    box-shadow: var(--shadow-md);
    background-color: #000
}

.youtube-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#nos-partenaires .team-card {
    text-align: center;
    border: 1px solid var(--border-color);
    box-shadow: none;
    padding: 2.5rem 2rem;
    transition: transform .3s ease, box-shadow .3s ease
}

#nos-partenaires .team-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md)
}

#nos-partenaires .team-card-img {
    height: 90px;
    margin-bottom: 1.5rem
}

#nos-partenaires .partner-title-link {
    text-decoration: none !important;
    color: inherit
}

#nos-partenaires .team-card-title {
    color: #000;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: .75rem
}

#nos-partenaires .partner-title-link:hover .team-card-title {
    color: #000
}

#nos-partenaires .team-card-role {
    color: #000;
    font-weight: 600;
    text-transform: uppercase;
    font-size: .8rem;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 1.25rem
}

#nos-partenaires .team-card-text {
    color: #000;
    font-size: 1rem;
    line-height: 1.6;
    text-decoration: none !important
}

.navbar-custom .navbar-nav .dropdown:has(.dropdown-item.active)>.dropdown-toggle {
    font-weight: 700;
    border-bottom: 2.5px solid
}

.hover-reserve-button .button-content.original {
    background-color: var(--color-red-action)
}

.hover-reserve-button .button-content.on-hover {
    background-color: var(--color-accent);
    color: var(--text-white)
}

.navbar-custom .navbar-nav .nav-link,
.navbar-custom .dropdown-item {
    font-family: var(--font-display)
}

.btn-modern-submit:focus,
.support-form button[type=submit]:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.2)
}

#nos-partenaires .team-card-title {
    color: #000;
    text-decoration: none
}

#nos-partenaires .team-card-text {
    color: #555;
    text-decoration: none
}

#nos-partenaires .partner-title-link:hover .team-card-title {
    color: #000
}

@media (max-width:1200px) {
    .testimonials-section .testimonials-grid {
        gap: 1rem
    }

    .testimonials-grid>.testimonial-card {
        font-size: .95rem;
        padding: 1.2rem .8rem
    }
}

@media (max-width:991px) {
    .testimonials-section .testimonials-grid {
        overflow-x: auto;
        display: flex;
        flex-wrap: nowrap
    }

    .testimonials-grid>.testimonial-card {
        min-width: 250px;
        flex: 0 0 auto
    }
}

.btn-internal-flip {
    text-decoration: none;
    position: relative;
    perspective: 800px;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    transition: transform .3s ease;
    flex-grow: 1;
    flex-basis: 0;
    border: 2px solid var(--color-accent)
}

.btn-internal-flip:hover {
    transform: translateY(-5px)
}

.btn-internal-flip .button-face {
    display: block;
    padding: .9rem 2rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
    transition: transform .5s cubic-bezier(0.77, 0, 0.175, 1);
    backface-visibility: hidden;
    box-sizing: border-box
}

.btn-internal-flip .button-face.original {
    transform-origin: top center;
    background: transparent;
    color: var(--color-accent)
}

.btn-internal-flip .button-face.on-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: bottom center;
    transform: rotateX(-90deg);
    background: var(--color-accent);
    color: #fff
}

.btn-internal-flip:hover .button-face.original {
    transform: rotateX(90deg)
}

.btn-internal-flip:hover .button-face.on-hover {
    transform: rotateX(0)
}

.content-page .feature-image-wrapper.is-vertical {
    width: auto;
    max-width: 60%;
    margin-left: auto;
    margin-right: auto
}

@media (max-width:768px) {
    .content-page .feature-image-wrapper.is-vertical {
        max-width: 85%
    }
}

.btn-3d-flip {
    text-decoration: none;
    position: relative;
    perspective: 800px;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    transition: transform .3s ease;
    flex-grow: 1;
    flex-basis: 0
}

.btn-3d-flip:hover {
    transform: translateY(-5px)
}

.btn-3d-flip .button-face {
    display: block;
    padding: .9rem 2rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
    transition: transform .5s cubic-bezier(0.77, 0, 0.175, 1);
    backface-visibility: hidden;
    box-sizing: border-box;
    border: 2px solid transparent
}

.btn-3d-flip .button-face.original {
    transform-origin: top center
}

.btn-3d-flip .button-face.on-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: bottom center;
    transform: rotateX(-90deg)
}

.btn-3d-flip:hover .button-face.original {
    transform: rotateX(90deg)
}

.btn-3d-flip:hover .button-face.on-hover {
    transform: rotateX(0)
}

.btn-flip-red-to-outline .button-face.original {
    background: transparent;
    color: var(--color-red-action);
    border-color: var(--color-red-action)
}

.btn-flip-red-to-outline .button-face.on-hover {
    background: var(--color-red-action);
    color: #fff;
    border-color: var(--color-red-action)
}

@media (max-width:991.98px) {
    h1 {
        font-size: clamp(2.5rem, 10vw, 3.5rem)
    }

    h2 {
        font-size: clamp(1.8rem, 7vw, 2.5rem)
    }

    .feature-section {
        padding: 60px 0
    }

    .footer-grid {
        text-align: center;
        flex-direction: column;
        align-items: center
    }

    .navbar-toggler {
        border: none;
        padding: 0
    }

    .navbar-toggler:focus {
        box-shadow: none
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
    }

    .navbar-collapse {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background-color: #fff !important;
        z-index: 1050 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        opacity: 0;
        visibility: hidden;
        transition: opacity .35s ease, visibility .35s ease;
        justify-content: flex-start !important;
        overflow-y: auto !important;
        padding-top: 120px !important;
        padding-bottom: 50px !important
    }

    .navbar-collapse.show {
        opacity: 1;
        visibility: visible
    }

    .navbar-custom .navbar-collapse:not(.show) {
        display: none !important
    }

    .navbar-collapse .navbar-nav {
        align-items: center;
        padding: 0;
        margin: 0
    }

    .navbar-collapse .nav-item {
        margin: 1rem 0
    }

    .navbar-collapse .nav-link {
        font-size: 2rem;
        font-weight: 600;
        color: #000;
        padding: 0;
        text-shadow: none
    }

    .navbar-custom .navbar-nav .nav-link.active,
    .navbar-custom .navbar-nav .nav-link[aria-current=page] {
        border-bottom: 3px solid #000
    }

    .navbar-collapse .dropdown-toggle::after {
        display: none
    }

    .menu-footer-icon {
        position: absolute;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%)
    }

    .menu-footer-icon a {
        color: #000;
        font-size: 2rem
    }

    .content-page .feature-image-wrapper {
        margin-bottom: 2rem
    }

    .redesigned-bottom-zone {
        padding-bottom: 4rem;
        width: 90%
    }

    .redesigned-subtitle {
        white-space: normal;
        text-align: center;
        font-size: 28px;
        margin-bottom: 1.5rem
    }

    .redesigned-buttons-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 1rem
    }

    .redesigned-btn-activity {
        width: 100%;
        max-width: 350px
    }

    .feature-content .redesigned-buttons-wrapper {
        max-width: 100% !important;
        justify-content: center;
        padding-top: 1rem
    }

    .btn-internal-flip,
    .btn-3d-flip {
        width: 100%;
        max-width: 320px
    }

    .btn-internal-flip .button-face,
    .btn-3d-flip .button-face {
        font-size: 1rem;
        padding: .8rem 1.5rem
    }

    .hover-reserve-button {
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        position: relative;
        margin-top: 1.5rem
    }

    .feature-section .row:hover .hover-reserve-button {
        transform: none
    }

    .hover-reserve-button .button-content.on-hover {
        display: none
    }

    .btn-modern,
    .btn-modern-submit {
        padding: 12px 24px;
        font-size: 1rem;
        text-align: center
    }

    .tech-sheet-details .btn-modern {
        width: 100%
    }

    body:not(.home-page) .navbar-custom {
        height: 75px !important;
        background-color: #fff !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .08) !important
    }

    body:not(.home-page) .navbar-custom .navbar-brand img {
        height: 45px !important;
        transition: none !important
    }

    body.menu-open {
        overflow: hidden !important
    }

    .navbar-collapse.show~.navbar-brand,
    .navbar-toggler[aria-expanded=true] {
        position: fixed !important;
        z-index: 1052 !important
    }

    .navbar-collapse.show~.navbar-brand {
        top: 20px !important;
        left: 20px !important;
        pointer-events: none
    }

    .navbar-collapse.show~.navbar-brand img {
        height: 45px !important
    }

    .navbar-toggler[aria-expanded=true] {
        top: 22px !important;
        right: 20px !important;
        border: none !important;
        border-radius: 0 !important;
        width: 35px !important;
        height: 35px !important;
        opacity: .7 !important;
        transition: opacity .2s ease, transform .3s ease !important;
        pointer-events: none
    }

    .navbar-toggler[aria-expanded=true] .navbar-toggler-icon {
        pointer-events: auto;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
        background-size: 65% !important
    }

    .navbar-toggler[aria-expanded=true]:hover {
        opacity: 1 !important;
        transform: rotate(90deg) !important
    }

    .navbar-collapse .nav-link {
        font-size: 2rem !important;
        font-weight: 600 !important;
        color: #212529 !important
    }

    .navbar-collapse .dropdown-menu {
        display: block !important;
        position: static !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        width: 100% !important;
        padding: 0 !important;
        margin-top: .5rem !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height .4s ease-in-out !important;
        text-align: center !important
    }

    .navbar-collapse .dropdown-menu.show {
        max-height: 500px !important
    }

    .navbar-collapse .dropdown-item {
        font-size: 1.5rem !important;
        font-weight: 400 !important;
        color: #555 !important;
        padding: .4rem 0 !important
    }

    .navbar-collapse .dropdown-item:hover {
        background-color: transparent !important;
        color: #000 !important
    }

    .testimonials-section .testimonials-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1.5rem !important
    }

    .testimonials-grid>.testimonial-card {
        width: 100% !important;
        max-width: 450px !important;
        flex-basis: auto !important
    }

    .tech-sheet-item {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 1.5rem 1rem !important
    }

    .tech-sheet-label {
        flex-basis: auto !important;
        margin-bottom: .75rem !important;
        justify-content: center
    }

    .tech-sheet-details {
        width: 100% !important
    }

    .tech-sheet-details .btn-modern {
        display: block !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
        padding: 12px 24px !important;
        font-size: 1rem !important
    }
}

@media (max-width:575.98px) {
    .navbar-collapse .nav-link {
        font-size: 1.8rem !important
    }

    .navbar-collapse .dropdown-item {
        font-size: 1.3rem !important
    }
}

.footer-privacy-link {
    color: #6c757d !important;
    text-decoration: none;
    transition: color .3s ease
}

.footer-privacy-link:hover {
    color: #fff !important
}

@media (max-width:991.98px) {
    .support-qr-code {
        display: block;
        width: 100%;
        max-width: 280px;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        border-radius: 8px
    }
}



@media (max-width: 991.98px) {

  /* ========================================================= */
  /*            SOLUTION FINALE AVEC EFFET ACCORDÉON           */
  /* ========================================================= */

  /* --- 1. L'overlay plein écran (inchangé) --- */
  .navbar-collapse {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: white !important;
    z-index: 1050;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
  }
  .navbar-collapse.show {
    opacity: 1;
    visibility: visible;
  }

  /* --- 2. Styles de la navigation principale (inchangés) --- */
  .navbar-collapse .navbar-nav {
    padding: 0;
    text-align: center;
  }
  .navbar-collapse .nav-item {
    margin: 1.2rem 0;
  }
  .navbar-collapse .nav-link {
    font-size: 2rem !important;
    font-weight: 600 !important;
    color: #212925 !important;
  }
  .navbar-collapse .nav-link.active {
     border-bottom: 3px solid #000;
  }
  .navbar-collapse .dropdown-toggle::after {
    display: none;
  }

  /* --- 3. LA CORRECTION : Le sous-menu réintègre le flux --- */
  .navbar-collapse .dropdown-menu {
    /* ON LE FAIT REVENIR DANS LE FLUX NORMAL DE LA PAGE */
    position: static !important; 
    
    /* On annule les anciennes règles de positionnement */
    transform: none !important;
    
    /* On s'assure qu'il prenne 100% de la largeur pour bien centrer son texte */
    width: 100% !important; 
    text-align: center !important;
    
    /* Un fond blanc pour masquer le contenu pendant l'animation */
    background-color: white !important; 
    
    /* Réinitialisations habituelles */
    padding: 0 !important;
    margin-top: 0.8rem !important;
    border: none !important;
    box-shadow: none !important;

    /* Animation d'ouverture/fermeture (notre accordéon) */
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease-in-out;
  }

  .navbar-collapse .dropdown-menu.show {
    max-height: 500px;
  }

  /* --- 4. Style des liens de sous-menu (inchangé) --- */
  .navbar-collapse .dropdown-item {
    font-size: 1.5rem !important;
    font-weight: 400 !important;
    color: #555 !important;
    padding: .4rem 0 !important;
  }
}
















/*
// =========================================================
//  LA RÈGLE MAGIQUE DE POUR LE LOGO
// =========================================================
*/

/*
 * Par défaut sur la page d'accueil (avant de scroller),
 * le logo est blanc. Le JS s'en occupe déjà, mais on
 * peut renforcer ça au cas où.
 */
body.home-page .navbar-custom:not(.scrolled) #navbar-logo {
  content: url('assets/img/TheatrePoetes_LOGO-3.png'); /* Logo BLANC */
}


/*
 * LA CONDITION SPÉCIALE :
 * Si le body a la classe 'dark-mode' (qu'on ajoutera avec JS),
 * ET qu'on est sur une page de contenu,
 * ET que l'écran est petit (téléphone),
 * ALORS, on change le logo pour le blanc !
 */
@media (max-width: 991.98px) {
  body.content-page.dark-mode .navbar-custom #navbar-logo {
    content: url('assets/img/TheatrePoetes_LOGO-3.png'); /* Logo BLANC pour mobile sombre */
  }
}












/* ========================================================= */
/*       LA MAGIE : GESTION DES BR SUR MOBILE       */
/* ========================================================= */

@media (max-width: 991px) {
    /* Si l'écran est plus petit qu'une tablette/PC */
    br.desktop-only {
        display: none; /* POUF ! Disparu ! */
    }
}


/* ========================================================= */
/*      LA SUPER GLUE DE (MOBILE UNIQUEMENT)           */
/* ========================================================= */

@media (max-width: 768px) {

    /* 1. On écrase le gras autour des sections (Padding) */
    .feature-section, 
    .section, 
    .content-page .feature-section {
        padding-top: 2rem !important;    /* Avant c'était énorme */
        padding-bottom: 2rem !important; /* Maintenant c'est serré */
    }

    /* 2. On réduit l'espace sous chaque paragraphe (Margin) */
    p, 
    .feature-content p {
        margin-bottom: 1rem !important; /* On divise l'espace par deux */
        font-size: 1rem !important;     /* Optionnel : texte un poil plus petit si tu veux */
    }

    /* 3. On colle le titre un peu plus près du texte */
    h1, h2, h3 {
        margin-bottom: 0.5rem !important;
    }
    
    /* 4. Si tu as des titres centrés qui flottent trop */
    .text-center {
        margin-bottom: 2rem !important;
    }
}



/* ========================================================= */
/*      LA CLASSE MAGIQUE POUR LE HEADER (MOBILE ONLY)       */
/* ========================================================= */

@media (max-width: 991px) {
    /* Cette règle ne s'applique que sur Tablette et Mobile */
    .body-mobile-fix {
        padding-top: 100px !important; /* On pousse le contenu vers le bas */
    }
}



/* ========================================================= */
/*      CORRECTIF MARGE IMAGE (MOBILE ONLY)                  */
/* ========================================================= */
@media (max-width: 991px) {
    .kill-margin-mobile {
        margin-top: 0 !important; /* On tue la marge ! */
    }
}

/* ========================================================= */
/*      SAUVETAGE PAGE CONTACT (MOBILE)                      */
/* ========================================================= */
@media (max-width: 991px) {
    .contact-wrapper {
        display: flex !important;        /* On oublie la grille */
        flex-direction: column !important; /* On empile verticalement */
        grid-template-columns: 1fr !important; /* Sécurité */
    }

    .contact-info, 
    .contact-form {
        width: 100% !important; /* Ils prennent toute la largeur */
        padding: 2rem 1.5rem !important; /* Un peu de gras sur les côtés */
    }
    
    /* On inverse l'ordre si tu veux les infos AVANT le formulaire */
    /* (Actuellement c'est déjà le cas dans ton HTML, donc c'est bon) */
}





/* ========================================================= */
/*      FORCE LE CENTRAGE HORIZONTAL DES IMAGES (MOBILE)     */
/* ========================================================= */

@media (max-width: 768px) {
    /* Cible toutes les images, et spécifiquement les bg-images de la redesign */
    img, 
    .redesigned-bg-image {
        /* 
           50% (x) = Centre Horizontal 
           50% (y) = Centre Vertical 
           !important garantit que rien ne l'écrase
        */
        object-position: 50% 50% !important;
    }
}