/*
Theme Name: Yacht Club Mohammedia Maroc
Theme URI: https://yachtclubmohammedia.ma/
Author: NafidaWeb
Description: Thème personnalisé pour le Yacht Club de Mohammedia - Couleurs conviviales
Version: 1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

/* === VARIABLES CSS - PALETTE CONVIVIALE === */
:root {
    /* Couleurs principales - Bleus chaleureux */
    --primary-blue: #2E86AB;
    /* Bleu océan convivial */
    --primary-blue-light: #4A9BC4;
    /* Bleu ciel doux */
    --primary-blue-dark: #1C5A79;
    /* Bleu profond rassurant */

    /* Couleurs secondaires - Tons chauds */
    --secondary-gold: #2E86AB;
    /* Or chaleureux */
    --secondary-gold-light: #2E86AB;
    /* Or clair amical */
    --secondary-gold-dark: #E65100;
    /* Or profond */

    /* Couleurs d'accent - Touches de vie */
    --accent-teal: #0FA3B1;
    /* Turquoise vivant */
    --accent-teal-light: #c4e2ee;
    /* Turquoise clair */
    --accent-coral: #FF6B6B;
    /* Corail amical */
    --accent-mint: #51CF66;
    /* Menthe fraîche */
    --rope-color: #4A9BC4;

    /* Couleurs neutres - Bases douces */
    --neutral-white: #FFFFFF;
    /* Blanc pur */
    --neutral-cream: #FFF8E1;
    /* Crème douce */
    --neutral-light: #F8F9FA;
    /* Gris très clair */
    --neutral-medium: #E9ECEF;
    /* Gris moyen */
    --neutral-dark: #495057;
    /* Gris foncé doux */
    --neutral-charcoal: #343A40;
    /* Charbon doux */

    /* Couleurs de texte - Lisibilité optimale */
    --text-primary: #2C3E50;
    /* Texte principal */
    --text-secondary: #546E7A;
    /* Texte secondaire */
    --text-muted: #78909C;
    /* Texte atténué */
    --text-light: #ECEFF1;
    /* Texte clair */

    /* Couleurs de statut - Conviviales */
    --success: #4CAF50;
    /* Vert succès */
    --warning: #FF9800;
    /* Orange avertissement */
    --error: #F44336;
    /* Rouge erreur doux */
    --info: var(--accent-teal);
    /* Info turquoise */

    /* Ombres - Douces et naturelles */
    --shadow-light: 0 2px 10px rgba(46, 134, 171, 0.1);
    --shadow-medium: 0 4px 20px rgba(46, 134, 171, 0.15);
    --shadow-heavy: 0 8px 30px rgba(46, 134, 171, 0.2);

    /* Transparences */
    --overlay-light: rgba(46, 134, 171, 0.1);
    --overlay-medium: rgba(46, 134, 171, 0.3);
    --overlay-heavy: rgba(46, 134, 171, 0.6);
}

/* === RESET ET BASE === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Lato', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    overflow-x: hidden;
}

h1,
h2,
h3 {
    font-family: 'Playfair Display', serif;
    /*color: var(--primary-blue);*/
}

/*.heading.header-underline:after {
    display: block;
    font-family: Arial, sans-serif;
    font-size: 35px;
    content: '∿∿∿∿'; 
    color: var(--accent-teal);
    text-align: center;
    margin-top: 0px;
    margin-bottom: 28px;

           
}*/


.heading.header-underline {
    position: relative;
    text-align: center;
}

.heading.header-underline .underline-svg {
    display: block;
    margin-top: 0px;
    margin-bottom: 28px;
    font-size: 25px;

}

.heading.header-underline .underline-svg svg {
    /*fill: var(--accent-teal);*/
    height: 20px;
    width: auto;


}

@keyframes shimmer {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: 40px 0px;
    }
}

/* === NAVIGATION === */
/* === NAVIGATION === */
.navbar {
    font-family: 'Playfair Display', serif;
    position: fixed;
    top: 0;
    width: 100%;
    background: transparent;
    z-index: 1000;
    padding: 0.3rem 0;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
    font-weight: 500;
    font-size: 1rem;
}

.navbar.scrolled {
    background: var(--overlay-medium);
    border-bottom: 2px solid var(--accent-teal-light);
    backdrop-filter: blur(10px);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 2rem;
    position: relative;
}

.logo {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--neutral-white);
    font-size: 1.8rem;
    font-weight: bold;
    text-decoration: none;
    justify-self: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.logo img {
    height: 80px;
    width: auto;
    filter: brightness(1.1) contrast(1.05);
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.logo-main {
    font-size: 1.4rem;
    color: var(--neutral-white);
}

.logo-sub {
    font-size: 0.9rem;
    color: var(--accent-teal-light);
    font-weight: normal;
}

.nav-links {
    grid-column: 1;
    display: flex;
    list-style: none;
    gap: 1rem;
    justify-self: start;
    margin: 0;
    padding: 0;
}

.nav-links li {
    position: relative;
}

.nav-links a {
    color: var(--neutral-white);
    text-decoration: none;
    transition: color 0.3s ease;
    position: relative;
    padding-right: 20px;
}

.nav-links a:hover {
    color: var(--accent-teal-light);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--secondary-gold);
    transition: width 0.3s ease;
}

.nav-links a:hover::after {
    width: 100%;
}

/* === SOUS-MENU DROPDOWN (DESKTOP) === */
.navbar .nav-links .menu-item-has-children {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
}

.navbar .nav-links .menu-item-has-children>a {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    padding-right: 0;
    /* Override default padding */
}

/* Ensure the icon is treated as part of the link for layout if it's inside, 
   but if it's outside (added via Walker or JS), we handle it. 
   Assuming standard WP menu or fa icon added via filter. 
   If no icon exists, we might need to add one via CSS. */

/* Force adding an arrow if not present in HTML - DESKTOP ONLY */
.navbar .nav-links .menu-item-has-children>a::after {
    content: '\f078';
    /* FontAwesome chevron-down */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.7rem;
    margin-left: 6px;
    border: none;
    /* Remove previous underline style from this element */
    height: auto;
    width: auto;
    background: none;
    transition: transform 0.3s ease;
    display: inline-block;
    position: static;
    /* Reset absolute positioning */
}

/* Re-implementing the underline animation on the text itself */
.navbar .nav-links .menu-item-has-children>a {
    background-image: linear-gradient(var(--secondary-gold), var(--secondary-gold));
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: left bottom;
    transition: background-size 0.3s ease;
    padding-bottom: 5px;
    /* Space for underline */
}

.navbar .nav-links .menu-item-has-children:hover>a {
    background-size: 100% 2px;
    color: var(--accent-teal-light);
}

.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--overlay-heavy);
    backdrop-filter: blur(15px);
    border: 2px solid var(--accent-teal-light);
    border-radius: 8px;
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1001;
    margin-top: 15px;
    padding: 10px 0;
    list-style: none;
    box-shadow: var(--shadow-medium);
}

.menu-item-has-children:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sub-menu li {
    display: block;
    margin: 0;
}

.sub-menu a {
    display: block;
    padding: 10px 20px;
    color: var(--neutral-white);
    text-decoration: none;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(78, 205, 196, 0.2);
    font-size: 0.95rem;
    white-space: nowrap;
}

.sub-menu li:last-child a {
    border-bottom: none;
}

.sub-menu a:hover {
    background-color: var(--accent-teal);
    color: white;
    padding-left: 25px;
    /* Petit effet de décalage */
}

/* Rotation de la flèche au survol */
.nav-links .menu-item-has-children:hover>a::after {
    transform: rotate(180deg);
}

/* Hide the old pseudo-element underline for dropdowns since we use background-size now */
.nav-links .menu-item-has-children>a::before {
    display: none;
}

/* === LANG SELECTOR === */
.lang-selector {
    grid-column: 3;
    display: flex;
    gap: 0.5rem;
    justify-self: end;
    align-items: center;
}

/* Original button style (fallback when Polylang not installed) */
.lang-btn {
    background: var(--overlay-light);
    color: var(--neutral-white);
    border: 1px solid var(--accent-teal-light);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-block;
}

.lang-btn:hover,
.lang-btn.active {
    background: var(--accent-teal-light);
    color: var(--primary-blue-dark);
    transform: translateY(-1px);
}

/* Polylang Language Switcher Styles */
.lang-selector ul,
.lang-selector>ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.lang-selector li,
.lang-selector ul li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lang-selector li a,
.lang-selector ul li a {
    display: inline-block;
    background: var(--overlay-light);
    color: var(--neutral-white) !important;
    border: 1px solid var(--accent-teal-light);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    text-decoration: none !important;
    text-transform: uppercase;
    font-weight: 500;
}

.lang-selector li a:hover,
.lang-selector ul li a:hover,
.lang-selector li.current-lang a,
.lang-selector ul li.current-lang a {
    background: var(--accent-teal-light);
    color: var(--primary-blue-dark) !important;
    transform: translateY(-1px);
}

/* === MENU MOBILE === */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
    position: relative;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: var(--neutral-white);
    margin: 3px 0;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--overlay-heavy);
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
}

.mobile-menu.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu .mobile-logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--neutral-white);
    font-size: 1.8rem;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.mobile-menu .mobile-logo img {
    height: 80px;
    width: auto;
    filter: brightness(1.1) contrast(1.05);
}

.mobile-menu .nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    font-size: 1.3rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-menu .nav-links a {
    color: var(--neutral-white);
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 1rem 2rem;
    border-radius: 10px;
    border: 2px solid transparent;
}

.mobile-menu .nav-links a:hover {
    color: var(--accent-teal-light);
    background: var(--overlay-light);
    border-color: var(--accent-teal-light);
}

.mobile-menu .lang-selector {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
}

.mobile-menu .lang-btn {
    background: var(--overlay-light);
    color: var(--neutral-white);
    border: 1px solid var(--accent-teal-light);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.mobile-menu .lang-btn:hover,
.mobile-menu .lang-btn.active {
    background: var(--accent-teal-light);
    color: var(--primary-blue-dark);
}

/* Mobile menu Polylang styles */
.mobile-menu .lang-selector ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.mobile-menu .lang-selector li {
    margin: 0;
    padding: 0;
}

.mobile-menu .lang-selector li a {
    display: inline-block;
    background: var(--overlay-light);
    color: var(--neutral-white) !important;
    border: 1px solid var(--accent-teal-light);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
    text-decoration: none !important;
    text-transform: uppercase;
    font-weight: 500;
}

.mobile-menu .lang-selector li a:hover,
.mobile-menu .lang-selector li.current-lang a {
    background: var(--accent-teal-light);
    color: var(--primary-blue-dark) !important;
}

/* === SOUS-MENU MOBILE === */
.mobile-menu .menu-item-has-children {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.mobile-menu .menu-item-has-children>a {
    flex: 0 1 auto;
    /* Doesn't take full width so arrow can sit next to it */
    margin-right: 5px;
    /* Space between text and arrow */
    border: none !important;
    /* Remove border from link to avoid double border visual */
}

/* Explicitly remove the desktop arrow if it leaks here */
.mobile-menu .menu-item-has-children>a::after {
    content: none !important;
    display: none !important;
}

/* Style for the toggle arrow added via JS in header.php */
.mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    cursor: pointer;
    color: var(--neutral-white);
    transition: all 0.3s ease;
}

.mobile-menu-toggle:hover,
.mobile-menu-toggle.active {
    background: var(--accent-teal-light);
    color: var(--primary-blue-dark);
}

.mobile-menu-toggle.active i {
    transform: rotate(180deg);
}

.mobile-menu .sub-menu {
    flex-basis: 100%;
    /* Force new line */
    width: 100%;
    display: none;
    /* Hidden by default */
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem 0;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.mobile-menu .sub-menu.active {
    display: flex;
}

.mobile-menu .sub-menu a {
    font-size: 1.1rem;
    padding: 0.5rem 1rem;
    color: var(--accent-teal-light);
}

/* Clean up old selectors that might conflict or be unused */
.mobile-dropdown,
.mobile-dropdown-toggle,
.mobile-dropdown-content {
    display: none;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
        grid-column: 1;
        justify-self: start;
    }

    .logo {
        grid-column: 2;
        justify-self: center;
    }

    .logo img {
        height: 60px;
    }

    .nav-links {
        display: none;
    }

    .lang-selector {
        display: none;
    }
}


/* === SECTION HERO === */
.hero {
    position: relative;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--neutral-white);
    border-bottom: 8px solid var(--accent-teal);
    padding-top: 80px;
    box-sizing: border-box;
}

.hero h1 {
    color: var(--neutral-white);
}

/* Gradient overlay (votre version) */
.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
    z-index: 1;
}

/* Image de préchargement en arrière-plan */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/wp-content/themes/home-video-desktop.jpg');
    background-size: cover;
    background-position: center;
    z-index: -1;
    /* En arrière de tout */
    opacity: 1;
    transition: opacity 0.5s ease;
}

/* Image mobile */
@media (max-width: 768px) {
    .hero::after {
        background-image: url('/wp-content/themes/home-video-mobile.jpg');
    }
}

/* Cacher l'image quand la vidéo est chargée */
.hero.video-loaded::after {
    opacity: 0;
}

/* Conteneur vidéo */
.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* Entre l'image (z-index: -1) et le gradient (z-index: 1) */
}

.hero-video,
.hero-video-mobile {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    pointer-events: none;
}

.hero-video-mobile {
    display: none;
}

/* Contenu du hero */
.hero-content {
    position: relative;
    z-index: 2;
    /* Au-dessus du gradient */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    text-align: center;
    color: var(--neutral-white);
    align-items: center;
}

.hero-title {
    font-size: 4rem;
    font-weight: 300;
    margin-bottom: 1rem;
    opacity: 0;
    animation: fadeInUp 1s ease forwards;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
    font-size: 1.5rem;
    color: var(--accent-teal-light);
    margin-bottom: 2rem;
    opacity: 0;
    animation: fadeInUp 1s ease 0.3s forwards;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.hero-description {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 3rem;
    opacity: 0;
    animation: fadeInUp 1s ease 0.6s forwards;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.cta-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0 auto;
    text-align: center;
    max-width: 100%;
}

.btn-primary {
    background: var(--secondary-gold);
    color: var(--neutral-white);
    padding: 1rem 2rem;
    border: none;
    border-radius: 30px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
    box-shadow: var(--shadow-medium);
}

.btn-primary:hover {
    background: var(--secondary-gold-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-heavy);
}

.btn-secondary {
    background: transparent;
    color: var(--neutral-white);
    padding: 1rem 2rem;
    border: 2px solid var(--neutral-white);
    border-radius: 30px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
}

.btn-secondary:hover {
    background: var(--neutral-white);
    color: var(--primary-blue);
    transform: translateY(-1px);
}

/* === ANIMATIONS === */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* === RESPONSIVE HERO === */
@media (max-width: 1024px) {
    .hero {
        height: auto;
        padding-top: 100px;
        padding-bottom: 60px;
    }

    .hero-title {
        font-size: 3rem;
    }

    .hero-subtitle {
        font-size: 1.3rem;
    }

    .hero-description {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    .cta-buttons {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .hero {
        padding-top: 90px;
        padding-bottom: 40px;
        height: 100vh;
    }

    /* Afficher la vidéo mobile */
    .hero-video {
        display: none;
    }

    .hero-video-mobile {
        display: block;
    }

    .hero-title {
        font-size: 2.3rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .hero-description {
        font-size: 0.95rem;
    }

    .cta-buttons {
        display: block;
        text-align: center;
    }

    .btn-primary,
    .btn-secondary {
        display: inline-block;
        width: 90%;
        max-width: 300px;
        margin: 0.5rem auto;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-description {
        font-size: 0.9rem;
        padding: 0 1rem;
    }

    .btn-primary,
    .btn-secondary {
        width: 90%;
        font-size: 0.95rem;
    }
}

/* === SECTION INFORMATIONS RAPIDES === */

.quick-info {
    background:
        linear-gradient(rgba(241, 240, 232, 0.8), rgba(241, 240, 232, 0.8)),
        url('https://lamaro.like-themes.com/wp-content/uploads/2018/12/services-bg-2.png?id=7744') no-repeat center center;
    background-size: cover;
    padding: 6rem 0;
    position: relative;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.section-title {
    text-align: center;
    font-size: 2.8rem;
    color: var(--primary-blue);
    margin-bottom: 5rem;
    font-weight: 300;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
}

/*.section-title::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background: var(--accent-teal);
            border-radius: 2px;
        }*/

.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin-bottom: 3rem;
}

.info-card {
    background: var(--neutral-white);
    padding: 0;
    border-radius: 0;
    box-shadow: var(--shadow-light);
    transition: all 0.3s ease;
    border: 1px solid #e8e8e8;
    overflow: hidden;
    position: relative;
}

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

.main_icon_inner {
    position: relative;
    text-align: center;
    padding: 3rem 2rem 2rem;
    background: #f8f9fa;
}

.icon_pos {
    position: relative;
    z-index: 2;
    margin-bottom: 1rem;
}

.circle_ico {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border: 2px solid var(--rope-color);
    border-radius: 50%;
    z-index: 1;
}

.circle_ico::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border: 2px dashed var(--rope-color);
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.info-card:hover .circle_ico::before {
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.info-card h3 {
    color: var(--primary-blue);
    margin-bottom: 1rem;
    font-size: 1.8rem;
    font-weight: 400;
    text-align: center;
    padding: 0 2rem;
}

.info-card .content {
    padding: 0 2rem 2rem;
}

.info-card p {
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 1rem;
    text-align: left;
}

.cst_btn {
    margin-top: 2rem;
    text-align: left;
}

.cst_btn .link {
    color: var(--rope-color);
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cst_btn .link:hover {
    color: var(--primary-blue);
}

.next-arrow {
    margin-left: 0.5rem;
    display: inline-flex;
    align-items: center;
    transition: transform 0.3s ease;
}

.cst_btn .link:hover .next-arrow {
    transform: translateX(5px);
}

.arrow {
    width: 0;
    height: 0;
    border-left: 6px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

.highlight {
    background: var(--primary-blue);
    color: var(--neutral-white);
    padding: 0.8rem 1.5rem;
    border-radius: 25px;
    font-weight: bold;
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 992px) {
    .info-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .section-title {
        font-size: 2.2rem;
    }

    .main_icon_inner {
        padding: 2rem 1rem 1.5rem;
    }

    .info-card h3 {
        font-size: 1.5rem;
    }
}

/* === SECTION MÉTÉO === */
.weather-section {
    background-image: url('http://lamaro.like-themes.com/wp-content/uploads/2018/12/countup-bg.jpg?id=7690') !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    padding: 4rem 0;
    color: #333;
    /* texte foncé pour contraste */
    position: relative;
}

.weather-section h2 {
    color: var(--primary-blue);
}

/* Supprimé : overlay inutile car l'image est déjà blanche */
.weather-section::before {
    display: none;
}

.weather-section>* {
    position: relative;
    z-index: 2;
}

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

.weather-card {
    background: #ffffff;
    padding: 2rem;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #e0e0e0;
}

.weather-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.weather-card h3 {
    color: #356f75;
    /* bleu doux pour les titres */
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.weather-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #4a7c8c;
    /* accent visible mais doux */
}

.temperature {
    font-size: 2rem;
    font-weight: bold;
    color: #356f75;
}

.weather-details {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: #555;
}


/* === SECTION COMMUNICATION MEMBRES === */
.member-section {
    background-image: url('http://lamaro.like-themes.com/wp-content/uploads/2018/12/countup-bg.jpg?id=7690') !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    padding: 4rem 0;
    color: #333;
    position: relative;
}

.news-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    align-items: start;
}

.news-main {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.news-card {
    background: var(--neutral-white);
    border-radius: 15px;
    padding: 2rem;
    box-shadow: var(--shadow-light);
    display: flex;
    gap: 1.5rem;
    transition: transform 0.3s ease;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.news-card.featured {
    border-left: 4px solid var(--secondary-gold);
}

/* Nouvelle section pour les images d'actualités */
.news-image {
    min-width: 120px;
    height: 100px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

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

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

.news-placeholder {
    width: 100%;
    height: 100%;
    background: var(--neutral-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 2rem;
}

.news-content {
    flex: 1;
}

.news-content h3 {
    color: var(--primary-blue);
    margin-bottom: 1rem;
    font-size: 1.3rem;
    line-height: 1.4;
}

.news-content p {
    margin-bottom: 1rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Nouvelle structure pour news-meta */
.news-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.news-date-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.news-date-meta i {
    color: var(--primary-blue);
}

.read-more-btn {
    background: var(--primary-blue);
    color: var(--neutral-white);
    padding: 0.5rem 1rem;
    border-radius: 25px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: bold;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.read-more-btn:hover {
    background: var(--accent-teal);
    transform: translateX(5px);
}

.read-more-btn i {
    transition: transform 0.3s ease;
}

.read-more-btn:hover i {
    transform: translateX(3px);
}

/* Liens "Voir plus" */
.view-more-container {
    text-align: center;
    margin-top: 2rem;
}

.view-more-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: bold;
    padding: 0.8rem 1.5rem;
    border: 2px solid var(--primary-blue);
    border-radius: 25px;
    transition: all 0.3s ease;
}

.view-more-link:hover {
    background: var(--primary-blue);
    color: var(--neutral-white);
    transform: translateY(-2px);
}

.view-more-link i {
    transition: transform 0.3s ease;
}

.view-more-link:hover i {
    transform: translateX(3px);
}

/* Sidebar événements */
.events-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.sidebar-section {
    background: var(--neutral-white);
    padding: 2rem;
    border-radius: 15px;
    box-shadow: var(--shadow-light);
}

.sidebar-section h3 {
    color: var(--primary-blue);
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}

.event-item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--neutral-medium);
}

.event-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.event-date {
    background: var(--secondary-gold);
    color: var(--neutral-white);
    padding: 0.5rem;
    border-radius: 8px;
    font-weight: bold;
    font-size: 0.9rem;
    text-align: center;
    min-width: 50px;
    height: fit-content;
}

.event-info h4 {
    color: var(--primary-blue);
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.event-info p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.event-link {
    color: var(--accent-teal);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: all 0.3s ease;
}

.event-link:hover {
    color: var(--primary-blue);
    transform: translateX(2px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .news-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .news-card {
        flex-direction: column;
        gap: 1rem;
    }

    .news-image {
        min-width: 100%;
        height: 200px;
    }

    .news-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .read-more-btn {
        align-self: flex-start;
    }
}

/* === RESPONSIVE MEMBRE SECTION === */
@media (max-width: 991px) {
    .news-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .news-card {
        flex-direction: column;
        padding: 1.5rem;
        border-radius: 12px;
        box-shadow: var(--shadow-light);
    }

    .news-card.featured {
        border-left: 4px solid var(--secondary-gold);
    }

    .news-date {
        min-width: 100%;
        border-radius: 10px 10px 0 0;
        padding: 1rem;
    }

    .news-date .day {
        font-size: 1.4rem;
    }

    .news-date .month {
        font-size: 0.85rem;
    }

    .news-content h3 {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }

    .news-content p {
        font-size: 0.95rem;
        margin-bottom: 1rem;
        line-height: 1.6;
    }

    .news-meta {
        gap: 1rem;
        font-size: 0.85rem;
    }

    /* .category, .status {
        padding: 0.3rem 0.8rem;
        border-radius: 15px;
    }*/

    .events-sidebar {
        gap: 1.5rem;
    }

    .sidebar-section {
        padding: 1.5rem;
        border-radius: 12px;
        box-shadow: var(--shadow-light);
    }

    .sidebar-section h3 {
        font-size: 1.15rem;
        margin-bottom: 1.2rem;
    }

    .event-item {
        gap: 1rem;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }

    .event-date {
        padding: 0.5rem;
        border-radius: 8px;
        font-size: 0.85rem;
        min-width: 50px;
    }

    .event-info h4 {
        font-size: 0.95rem;
        margin-bottom: 0.5rem;
    }

    .event-info p {
        font-size: 0.85rem;
    }

    .result-item {
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 1rem;
    }

    .result-item h4 {
        font-size: 0.95rem;
        margin-bottom: 0.5rem;
    }

    .contact-item {
        padding: 1rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 767px) {
    .member-section {
        padding: 2rem 0;
    }

    .news-grid {
        gap: 1.5rem;
    }

    .news-card {
        padding: 1.2rem;
        border-radius: 10px;
        box-shadow: var(--shadow-light);
    }

    .news-card:hover {
        transform: none;
        box-shadow: var(--shadow-light);
    }

    .news-date {
        padding: 0.8rem;
        /* Padding proche de l'original */
        min-width: 100%;
        border-radius: 10px 10px 0 0;
    }

    .news-date .day {
        font-size: 1.3rem;
        /* Taille proche de l'original */
    }

    .news-date .month {
        font-size: 0.8rem;
        /* Taille proche de l'original */
    }

    .news-content h3 {
        font-size: 1.15rem;
        /* Taille proche de l'original */
        margin-bottom: 0.8rem;
    }

    .news-content p {
        font-size: 0.9rem;
        /* Texte légèrement réduit */
        margin-bottom: 0.8rem;
    }

    .news-meta {
        flex-direction: column;
        /* Empilage vertical */
        gap: 0.8rem;
        /* Marge réduite mais suffisante */
        font-size: 0.8rem;
    }

    /* .category, .status {
        padding: 0.3rem 0.8rem; 
    }*/

    .sidebar-section {
        padding: 1.2rem;
        /* Padding légèrement réduit */
    }

    .sidebar-section h3 {
        font-size: 1.1rem;
        /* Taille proche de l'original */
    }

    .event-item {
        flex-direction: column;
        /* Empilage vertical */
        gap: 0.8rem;
        /* Marge réduite */
        margin-bottom: 0.8rem;
        padding-bottom: 0.8rem;
    }

    .event-date {
        min-width: 100%;
        border-radius: 8px 8px 0 0;
        padding: 0.5rem;
        /* Padding d'origine */
        font-size: 0.8rem;
    }

    .event-info h4 {
        font-size: 0.9rem;
        /* Proche de l'original */
        margin-bottom: 0.5rem;
    }

    .event-info p {
        font-size: 0.8rem;
        /* Légère réduction */
    }

    .result-item {
        padding: 0.8rem;
        /* Padding légèrement réduit */
        border-radius: 8px;
        margin-bottom: 0.8rem;
    }

    .result-item h4 {
        font-size: 0.9rem;
        /* Proche de l'original */
        margin-bottom: 0.5rem;
    }

    .contact-item {
        padding: 0.8rem;
        /* Padding légèrement réduit */
        font-size: 0.8rem;
    }
}

/* === Activities Section === */
/* === Activities Section === */
.activities-section {
    position: relative;
    background: url('https://lamaro.like-themes.com/wp-content/uploads/2018/12/video-section-bg.jpg?id=7687') no-repeat center center;
    background-size: cover;
    padding: 100px 20px;
    color: white;
    overflow: visible;
    z-index: 1;
}

/* === Lifebuoy === */
.activities-section .lifebuoy {
    position: absolute;
    top: -90px;
    left: 0px;
    height: auto;
    z-index: 3;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* === Container === */
.activities-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* === Section Heading === */
.section-heading {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    color: #fff;
    letter-spacing: 1px;
}

.underline-svg {
    display: block;
    margin: 10px auto 0;
    width: 120px;
}

/* === Activities Grid === */
.activities-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 30px;
}

/* === Activity Columns === */
.activity-column {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.activity-column:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

/* === Activity Header === */
.activity-header {
    margin-bottom: 25px;
}

.activity-header h3 {
    font-size: 1.8rem;
    font-weight: 600;
    color: #0FA3B1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.activity-header h3 i {
    font-size: 1.5rem;
}

.activity-subtitle {
    font-size: 1rem;
    color: #666;
    margin-top: 5px;
}

/* === Activity Content === */
.activity-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* === Activity Card - Épuré === */
.activity-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    height: 120px;
    display: flex;
}

.activity-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(15, 163, 177, 0.15);
}

/* === Card Image === */
.card-image {
    flex: 0 0 120px;
    overflow: hidden;
}

.card-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.activity-card:hover .card-thumbnail {
    transform: scale(1.05);
}

.card-placeholder {
    width: 100%;
    height: 100%;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-placeholder i {
    font-size: 2rem;
    color: #0FA3B1;
}

/* === Card Content === */
.card-content {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-content h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-secondary);

    margin: 0;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.activity-card:hover .card-content h3 {
    color: #0FA3B1;
}

/* === Card Meta === */
.card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

.card-date {
    font-size: 0.85rem;
    color: #999;
    display: flex;
    align-items: center;
    gap: 5px;
}

.card-date i {
    color: #0FA3B1;
}

.card-link {
    font-size: 0.85rem;
    color: #0FA3B1;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s ease;
}

.card-link:hover {
    color: #087f8c;
}

/* === View More === */
.activity-view-more {
    text-align: right;
    margin-top: 20px;
}

.activity-view-more-link {
    font-size: 1rem;
    color: #0FA3B1;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.activity-view-more-link:hover {
    color: #087f8c;
}

.activity-view-more-link i {
    margin-left: 5px;
}

/* === No Content === */
.no-content {
    font-size: 1rem;
    color: #666;
    text-align: center;
    padding: 20px;
}

/* === Responsive Design === */
@media (max-width: 768px) {
    .activities-grid {
        grid-template-columns: 1fr;
    }

    .activity-column {
        padding: 20px;
    }

    .section-heading {
        font-size: 2rem;
    }

    .activity-header h3 {
        font-size: 1.5rem;
    }

    .activity-card {
        flex-direction: column;
        height: auto;
    }

    .card-image {
        flex: 0 0 150px;
        width: 100%;
    }

    .card-content {
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .activities-section {
        padding: 60px 15px;
    }

    .section-heading {
        font-size: 1.8rem;
    }

    .lifebuoy {
        width: 100px;
        top: -50px;
    }
}





/* Footer */

.footer-wrapper {
    border-top: 6px solid #0FA3B1;
    background: none;
}

/* Footer */
.footer {
    background:
        url('https://lamaro.like-themes.com/wp-content/uploads/2018/02/footer-img.png'),
        linear-gradient(135deg, rgba(0, 44, 88, 0.8), rgba(0, 88, 140, 0.8));
    background-repeat: no-repeat;
    background-position: center center;
    /* Centre l'image horizontalement et verticalement */
    background-size: contain;
    color: white;
    padding: 3rem 0 1rem;
    position: relative;
    overflow: hidden;
}




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

/* Footer main content layout */
.footer-main {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 4rem;
    align-items: start;
    margin-bottom: 2rem;
}

/* Logo and description */
.footer-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.footer-logo img {
    height: 100px;
    width: auto;
    filter: brightness(1.2);
    margin-bottom: 1rem;
}

.footer-description {
    color: var(--text-light);
    line-height: 1.6;
    font-size: 0.9rem;
    max-width: 280px;
}

/* Social icons */
.footer-social {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.footer-social a {
    color: var(--accent-teal-light);
    font-size: 1.4rem;
    transition: all 0.3s ease;
}

.footer-social a:hover {
    color: #FFD700;
    /* Bright gold for contrast */
    transform: scale(1.2);
}

/* Menus */
.footer-menus {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
}

.footer-menu {
    display: flex;
    flex-direction: column;
}

.footer-menu h3 {
    color: var(--accent-teal-light);
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: bold;
}

.footer-menu a {
    color: white;
    text-decoration: none;
    padding: 0.3rem 0;
    transition: color 0.3s ease;
    font-size: 0.9rem;
}

.footer-menu a:hover {
    color: var(--accent-teal-light);
}

.footer-menu a::before {
    content: "▸ ";
    color: var(--accent-teal-light);
    margin-right: 0.5rem;
}

/* Contact */
.footer-contact {
    display: flex;
    flex-direction: column;
}

.footer-contact h3 {
    color: var(--accent-teal-light);
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    font-weight: bold;
}

.contact-item-footer {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 1rem;
}

.contact-icon-footer {
    background: var(--accent-teal-light);
    color: var(--primary-blue);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: bold;
    flex-shrink: 0;
}

.contact-info-footer {
    color: var(--text-light);
    line-height: 1.5;
    font-size: 0.9rem;
}

.contact-info-footer strong {
    color: white;
}

/* Bottom text */
.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 768px) {
    .footer-main {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-menus {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .footer-logo {
        align-items: center;
        text-align: center;
    }

    .footer-description {
        text-align: center;
    }

    .footer-social {
        justify-content: center;
    }
}


/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* Responsive Design */
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }



    .news-grid {
        grid-template-columns: 1fr;
        margin-bottom: 110px;
    }

    .events-sidebar {
        order: -1;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: flex-start;
    }
}



/***** single.php ******/
/*
 * 
 * *
 * */





.single-hero {
    background: url('https://lamaro.like-themes.com/wp-content/uploads/2018/02/inner_header-3.jpg') no-repeat;
    background-size: 100%;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    color: white;
    border-bottom: 8px solid var(--accent-teal);
}

.single-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(40, 54, 75, 0.7);
    /* couleur #28364b avec 40% de transparence */
    z-index: 1;
}

.single-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
}

.single-hero-title {
    font-size: 3.5rem;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    margin-bottom: 15px;
}

.single-featured-image-wrapper {
    border: 8px solid #dff0f7;
    margin-bottom: 35px;
    border-radius: 12px;
    overflow: hidden;
}

.single-breadcrumb {
    display: flex;
    align-items: center;

    border-radius: 12px;
    padding: 12px 20px;
    margin-bottom: 30px;
    justify-content: center;
}

.single-breadcrumb .breadcrumb-item {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.single-breadcrumb .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color 0.3s ease;
}

.single-breadcrumb .breadcrumb-item a:hover {
    color: #fff;
}

.single-breadcrumb .breadcrumb-separator {
    margin: 0 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}

.single-breadcrumb .breadcrumb-current {
    color: #fff;
    font-weight: 600;
}

.single-post-main {
    max-width: 1000px;
    margin: 60px auto;
    padding: 0 20px;
    font-family: 'Segoe UI', sans-serif;
}

.single-post-thumbnail {
    border: 8px solid #dff0f7;
    margin-bottom: 35px;
    border-radius: 0px;
    overflow: hidden;
    max-height: 600px;
}

.single-post-meta {
    background: #dff0f7;
    padding: 20px 25px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    font-size: 14px;
    color: rgb(153, 153, 153);
}

.icon-blue {
    color: var(--primary-blue-light);
    padding-right: 5px;
}


.single-post-meta span {
    color: #c3b179;
}

.single-post-meta a {
    color: var(--primary-blue-light);
    font-weight: bold;
    text-decoration: none;
}

.single-post-content {
    font-size: 18px;
    line-height: 1.9;
    color: var(--text-secondary);
    margin-top: 30px;
    font-family: Lato, Tahoma, Geneva, Verdana, sans-serif;
}

.single-post-content p {
    margin-bottom: 1.5em;
    padding-left: 0.5em;
    text-align: justify;

}


.single-article-content img {
    max-width: 100%;
    border: 8px solid #dff0f7;
    margin-bottom: 35px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-light);
}


.single-post-tags {
    margin-top: 40px;
    font-size: 14px;
    color: #555;
}

.single-related-posts {
    background: #f4f7f9;
    padding: 70px 20px;
}

.single-container {
    max-width: 1100px;
    margin: 0 auto;
}

.single-related-title {
    text-align: center;
    font-size: 28px;
    margin-bottom: 50px;
    color: var(--primary-blue);
}

.single-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.single-related-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.3s;
}

.single-related-card:hover {
    transform: translateY(-5px);
}

.single-related-link {
    color: var(--primary-blue);
    text-decoration: none;
    display: block;
}

.single-related-thumb {
    width: 100%;
    height: auto;
    display: block;
}

.single-related-info {
    padding: 20px;
}

.single-related-title-post {
    font-size: 18px;
    margin-bottom: 10px;
}

.single-related-meta {
    font-size: 13px;
    color: #777;
}

/* =========================
   ✅ Responsive Design
   ========================= */

/* Tablette */
@media screen and (max-width: 1024px) {
    .single-hero {
        background-size: cover;
        height: 400px;
    }

    .single-hero-title {
        font-size: 2.8rem;
    }

    .single-post-main {
        padding: 0 15px;
    }

    .single-related-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

/* Mobile */
@media screen and (max-width: 768px) {
    .single-hero {
        background-size: cover;
        height: 400px;


        padding: 40px 20px;
        /* Plus de padding en haut/bas */
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .single-hero-title {
        font-size: 2rem;
    }

    /* ✅ META INFO EN DEUX LIGNES */
    .single-post-meta {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 15px;
    }

    .single-post-meta>*:not(:last-child) {
        width: auto;
    }

    /*.single-post-meta > *:last-child {
    width: 100%;
    text-align: left;
    margin-top: 8px;
  }*/

    .author-single {
        display: none;
    }

    /* ✅ THUMBNAIL ENTIÈRE SANS ENLEVER LA BORDURE */
    .single-post-thumbnail {
        margin-bottom: 25px;
        border: 8px solid #dff0f7;
        border-radius: 12px;
        overflow: hidden;
        max-height: 500px;
    }

    .single-post-thumbnail img {
        width: 100%;
        height: auto;
        display: block;
    }

    .single-post-content {
        font-size: 16px;
        line-height: 1.7;
    }

    .single-related-grid {
        grid-template-columns: 1fr;
    }

    .single-related-title {
        font-size: 24px;
    }

    .single-post-main {
        margin: 30px auto;
    }
}


/**** categorie 3 calendrier */



.calendar-header-box {
    background-color: #f1faff;
    border: 1px solid #cce7f6;
    padding: 1.5rem 2rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 115, 170, 0.08);
}

.calendar-header-box p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #244862;
    text-align: center;
    margin: 0;
}

.yacht-header-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    max-width: 800px;
    padding: 0 20px;
}

.yacht-header h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
    margin: 0 0 20px 0;
    font-weight: 700;
    color: white;
    letter-spacing: -0.02em;
}

.yacht-header p {
    color: rgba(255, 255, 255, 0.95);
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    margin-bottom: 0;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    line-height: 1.5;
}

/* Conteneur principal */
.yacht-events-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0px 20px 20px;

}

/* Calendrier */
.calendar-container {
    background: var(--neutral-white);
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(46, 134, 171, 0.12);
    padding: 40px;
    margin-bottom: 50px;
    border: 2px solid var(--accent-teal-light);
    backdrop-filter: blur(10px);
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 3px solid var(--accent-teal-light);
}

.calendar-nav {
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue-dark));
    color: var(--neutral-white);
    border: none;
    padding: 12px 20px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(46, 134, 171, 0.2);
}

.calendar-nav:hover {
    background: linear-gradient(135deg, var(--primary-blue-dark), var(--accent-teal));
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(46, 134, 171, 0.3);
}

.calendar-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-blue-dark);
    text-align: center;
    flex-grow: 1;
    letter-spacing: -0.02em;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    margin-bottom: 30px;
}

.calendar-day-header {
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue-dark));
    color: var(--neutral-white);
    padding: 18px 8px;
    text-align: center;
    font-weight: 600;
    font-size: 0.9em;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.calendar-day {
    background: var(--neutral-light);
    border: 1px solid var(--neutral-medium);
    padding: 18px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 8px;
    font-weight: 500;
}

.calendar-day:hover {
    background: var(--accent-teal-light);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(15, 163, 177, 0.25);
    border-color: var(--accent-teal);
}

.calendar-day.other-month {
    background: var(--neutral-medium);
    color: var(--text-muted);
    opacity: 0.6;
}

.calendar-day.has-event {
    background: linear-gradient(135deg, var(--accent-teal-light), var(--primary-blue-light));
    color: var(--primary-blue-dark);
    font-weight: 700;
    border: 2px solid var(--accent-teal);
    box-shadow: 0 4px 15px rgba(15, 163, 177, 0.2);
}



@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-3px);
    }
}

.calendar-day.today {
    background: linear-gradient(135deg, var(--accent-coral), var(--secondary-gold-dark));
    color: var(--neutral-white);
    font-weight: 700;
    border: 3px solid var(--secondary-gold-dark);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.3);
}

/* Grille des événements - 3 par ligne */
.events-grid {
    /*  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;*/
    margin-top: 30px;
}

.event-item-calendar {
    background: var(--neutral-white);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 5px solid var(--accent-teal);
    position: relative;
    overflow: hidden;
}

.event-item-calendar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-teal), var(--primary-blue));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}





.event-title {
    font-size: 1.3em;
    font-weight: 700;
    color: var(--primary-blue-dark);
    margin-bottom: 15px;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.event-time {
    color: var(--text-secondary);
    font-size: 0.9em;
    margin-bottom: 12px;
    display: none;
}

.event-excerpt {
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.event-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-teal);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95em;
    transition: all 0.3s ease;
    position: relative;
}

/*.event-link::after {
    content: "→";
    transition: transform 0.3s ease;
}*/

.event-link:hover {
    color: var(--primary-blue);
    transform: translateX(5px);
}

.event-link:hover::after {
    transform: translateX(5px);
}

/* Popup */
.event-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--neutral-white);
    border-radius: 25px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
    padding: 40px;
    max-width: 600px;
    width: 90%;
    z-index: 1000;
    display: none;
    border: 3px solid var(--accent-teal);
    backdrop-filter: blur(10px);
}

.event-popup.active {
    display: block;
    animation: popupAppear 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes popupAppear {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8) rotateX(10deg);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotateX(0deg);
    }
}

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
    display: none;
    backdrop-filter: blur(5px);
}

.popup-overlay.active {
    display: block;
    animation: overlayAppear 0.3s ease;
}

@keyframes overlayAppear {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 3px solid var(--accent-teal-light);
}

.popup-title {
    color: var(--primary-blue-dark);
    font-size: 1.6em;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.02em;
}

.popup-close {
    background: var(--accent-coral);
    color: var(--neutral-white);
    border: none;
    padding: 12px 16px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-close:hover {
    background: var(--secondary-gold-dark);
    transform: rotate(90deg) scale(1.1);
}

.no-events {
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    padding: 40px;
    font-size: 1.1em;
}

.events-legend {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95em;
    color: var(--text-secondary);
    font-weight: 500;
}

.legend-color {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 3px solid var(--neutral-medium);
    transition: transform 0.3s ease;
}

.legend-color:hover {
    transform: scale(1.1);
}

.legend-color.has-event {
    background: linear-gradient(135deg, var(--accent-teal-light), var(--primary-blue-light));
    border-color: var(--accent-teal);
}

.legend-color.today {
    background: linear-gradient(135deg, var(--accent-coral), var(--secondary-gold-dark));
    border-color: var(--secondary-gold-dark);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .events-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .yacht-events-container {
        padding: 0px;
    }

    .yacht-header {
        height: 50vh;
        min-height: 400px;
    }

    .yacht-header h1 {
        font-size: clamp(2rem, 6vw, 3rem);
    }

    .yacht-header p {
        font-size: clamp(1rem, 3vw, 1.2rem);
    }

    .calendar-container {
        padding: 5px;
        border-radius: 15px;
    }

    .calendar-header {
        flex-direction: column;
        gap: 20px;
    }

    .calendar-nav {
        padding: 10px 16px;
        font-size: 14px;
    }

    .calendar-title {
        font-size: 1.6rem;
    }

    .calendar-day {
        padding: 12px 5px;
        min-height: 50px;
        font-size: 0.9em;
    }

    .events-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .event-item {
        padding: 25px;
    }

    .event-title {
        font-size: 1.2em;
    }

    .events-legend {
        flex-direction: column;
        gap: 20px;
    }

    .event-popup {
        padding: 30px;
        max-width: 95%;
    }

    .popup-title {
        font-size: 1.4em;
    }
}

@media (max-width: 480px) {
    .yacht-events-container {
        padding: 0px;
    }

    .calendar-container {
        padding: 5px;
    }

    .calendar-day {
        padding: 10px 3px;
        min-height: 45px;
        font-size: 0.85em;
    }

    .event-item {
        padding: 20px;
    }

    .event-popup {
        padding: 25px;
    }
}

/* Hero Section Actualités - Pleine largeur */

.yacht-header-news h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
    margin: 0 0 20px 0;
    font-weight: 700;
    color: white;
    letter-spacing: -0.02em;
}



/* Conteneur principal */
.yacht-events-container-news {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0px 20px 20px;
}

/* Grille des actualités */
.news-grid-news {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 70px;
    margin-top: 80px;
}

/* Carte d'actualité */
.news-card-news {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
}

.news-card-news:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(46, 134, 171, 0.15);
}

.news-card-image-news {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.news-card-image-news::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.1));
}

.news-card-content-news {
    padding: 25px;
}

.news-card-meta-news {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: var(--text-gray);
}

.news-card-date-news {
    color: var(--accent-teal);
    font-weight: 600;
}

.news-card-category-news {
    background: var(--accent-teal-light);
    color: var(--accent-teal);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.news-card-news h3 {
    font-size: 1.25rem;
    margin-bottom: 15px;
    color: var(--text-dark);
    font-weight: 600;
    line-height: 1.4;
}

.news-card-description-news {
    color: var(--text-gray);
    margin-bottom: 20px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-link-news {
    display: inline-flex;
    align-items: center;
    color: var(--accent-teal);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.news-card-link-news:hover {
    color: var(--hover-color);
}

.news-card-link-news::after {
    content: "→";
    margin-left: 8px;
    transition: margin-left 0.3s ease;
}

.news-card-link-news:hover::after {
    margin-left: 12px;
}

/* Pagination WordPress */
.pagination-news {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    gap: 10px;
}

.pagination-news .page-numbers {
    padding: 12px 16px;
    border: 2px solid var(--accent-teal);
    background: white;
    color: var(--accent-teal);
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    min-width: 45px;
    text-align: center;
    display: inline-block;
}

.pagination-news .page-numbers:hover,
.pagination-news .page-numbers.current {
    background: var(--accent-teal);
    color: white;
}

.pagination-news .page-numbers.prev,
.pagination-news .page-numbers.next {
    min-width: auto;
    padding: 12px 20px;
}

/* Message vide */
.empty-state-news {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-gray);
}

.empty-state-news h3 {
    margin-bottom: 10px;
    color: var(--text-dark);
}

/* Responsive */
@media (max-width: 768px) {
    .news-grid-news {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .yacht-events-container-news {
        padding: 0 15px 20px;
    }

    .pagination-news {
        flex-wrap: wrap;
        gap: 8px;
    }

    .pagination-news .page-numbers {
        padding: 10px 14px;
        min-width: 40px;
    }
}

/* Style pour les jours avec événements futurs */
.calendar-day.has-future-event {
    background-color: #e3f2fd;
    /* Bleu plus clair pour les événements futurs */
    border: 2px dashed #2196f3;
    /* Bordure en pointillés */
}

/* Style dans le popup pour les événements futurs */
.event-item-calendar.future-event {
    background-color: #f0f8ff;
    border-left: 4px solid #ff9800;
    opacity: 0.9;
}

.event-item-calendar.future-event .event-title {
    color: #ff6f00;
    font-style: italic;
}

/* ============================================
   RTL SUPPORT FOR ARABIC (العربية)
   ============================================ */

/* When Arabic language is active */
html[lang="ar"],
html[lang="ar"] body {
    direction: rtl;
    text-align: right;
}

/* Arabic font family */
html[lang="ar"] body {
    font-family: 'Noto Sans Arabic', 'Lato', Arial, sans-serif;
}

/* Navigation RTL */
html[lang="ar"] .nav-container {
    grid-template-columns: 1fr auto 1fr;
}

html[lang="ar"] .nav-links {
    justify-self: end;
    flex-direction: row-reverse;
}

html[lang="ar"] .lang-selector {
    justify-self: start;
}

html[lang="ar"] .nav-links a {
    padding-right: 0;
    padding-left: 20px;
}

html[lang="ar"] .dropdown-content {
    left: auto;
    right: 0;
}

html[lang="ar"] .dropdown-arrow {
    margin-left: 0;
    margin-right: 6px;
}

/* Hero section RTL */
html[lang="ar"] .hero-content {
    text-align: center;
}

/* Footer RTL */
html[lang="ar"] .footer-content,
html[lang="ar"] .footer-grid {
    direction: rtl;
}

/* Lists RTL */
html[lang="ar"] ul,
html[lang="ar"] ol {
    padding-right: 1.5rem;
    padding-left: 0;
}

/* Cards and content RTL */
html[lang="ar"] .event-card,
html[lang="ar"] .news-card-news,
html[lang="ar"] .service-item {
    text-align: right;
}

/* Buttons RTL */
html[lang="ar"] .btn-primary,
html[lang="ar"] .btn-secondary {
    direction: ltr;
}

/* Mobile menu RTL */
html[lang="ar"] .mobile-menu .nav-links {
    text-align: center;
}

/* Form elements RTL */
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select {
    text-align: right;
}

/* ============================================
   SPANISH & ENGLISH (No special styles needed)
   ============================================ */
/* These languages use the same LTR layout as French */
/* === RTL SUPPORT (ARABIC) === */
html[lang="ar"] body {
    direction: rtl;
    text-align: right;
}

/* --- HEADER DESKTOP RTL --- */
html[lang="ar"] .nav-container {
    direction: rtl;
    /* 
       Grid behavior in RTL:
       Column 1 starts from Right.
       Column 2 is Center.
       Column 3 starts from Left.
       
       We want:
       - Menu (nav-links) -> Right (Column 1)
       - Logo -> Center (Column 2)
       - Lang Selector -> Left (Column 3)
    */
}

/* Ensure Logo stays centered */
html[lang="ar"] .logo {
    justify-self: center;
}

/* Navbar Links (Menu) - Should be on Right */
html[lang="ar"] .nav-links {
    padding: 0;
    justify-self: start;
    /* 'start' in RTL is Right */
}

html[lang="ar"] .nav-links a {
    padding-right: 0;
    padding-left: 20px;
}

html[lang="ar"] .dropdown-arrow {
    margin-left: 0;
    margin-right: 6px;
    display: inline-block;
    transform: rotate(0deg);
    /* Reset rotation */
}

/* Lang Selector - Should be on Left */
html[lang="ar"] .lang-selector {
    justify-self: end;
    /* 'end' in RTL is Left */
    margin-right: 0;
    margin-left: 0;
    /* Reset margins */
}

/* --- HEADER MOBILE RTL --- */
@media (max-width: 768px) {

    /* Hamburger on Right */
    html[lang="ar"] .hamburger {
        grid-column: 1;
        justify-self: start;
        /* Right in RTL */
    }

    /* Logo Center */
    html[lang="ar"] .logo {
        grid-column: 2;
    }

    /* Mobile Menu Overlay */
    html[lang="ar"] .mobile-desc {
        direction: rtl;
    }

    html[lang="ar"] .mobile-menu .nav-links {
        padding: 0;
        align-items: center;
        /* Keep centered mainly */
        flex-direction: column;
        width: 100%;
    }

    html[lang="ar"] .mobile-menu .nav-links a {
        direction: rtl;
        display: block;
        width: 100%;
        text-align: center;
    }
}

/* --- CONTENT RTL --- */
html[lang="ar"] .info-card .content,
html[lang="ar"] .info-card h3,
html[lang="ar"] .section-heading,
html[lang="ar"] .weather-details p,
html[lang="ar"] p,
html[lang="ar"] li {
    text-align: right;
}

/* Fix unordered lists in RTL */
html[lang="ar"] ul {
    padding-left: 0;
    padding-right: 20px;
}

html[lang="ar"] .nav-links {
    padding-right: 0;
    /* Reset UL padding for header */
}


/* Icons direction */
html[lang="ar"] .fa-chevron-right:before {
    content: "\f053";
    /* chevron-left */
}

html[lang="ar"] .cst_btn .next-arrow {
    transform: rotate(180deg);
}

/* Specific fix for "Navigateurs de passage" layout */
html[lang="ar"] .info-card ul li {
    text-align: right;
}

/* === WORDPRESS MENU COMPATIBILITY === */

/* Desktop Dropdowns */
.nav-links .menu-item-has-children {
    position: relative;
}

.nav-links .menu-item-has-children>a {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Add arrow via CSS for desktop, only if not already there (WP doesn't add it) */
.nav-links .menu-item-has-children>a::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.7rem;
    margin-left: 6px;
    transition: transform 0.3s ease;
}

.nav-links .menu-item-has-children:hover>a::after {
    transform: rotate(180deg);
}

.nav-links .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--overlay-heavy);
    backdrop-filter: blur(15px);
    border: 2px solid var(--accent-teal-light);
    border-radius: 8px;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1001;
    margin-top: 10px;
    padding: 0;
    list-style: none;
}

.nav-links .menu-item-has-children:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-links .sub-menu li a {
    display: block;
    padding: 12px 20px;
    color: var(--neutral-white);
    text-decoration: none;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(78, 205, 196, 0.2);
    font-size: 0.9rem;
}

.nav-links .sub-menu li:last-child a {
    border-bottom: none;
}

.nav-links .sub-menu li a:hover {
    background-color: var(--accent-teal);
    color: white;
}

/* Mobile Menu Compatibility */
.mobile-menu .menu-item-has-children {
    width: 100%;
    text-align: center;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.mobile-menu .sub-menu {
    display: none;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--accent-teal-light);
    width: 100%;
    background: transparent;
    /* Reset desktop style */
    position: static;
    /* Reset desktop style */
    opacity: 1;
    /* Reset desktop style */
    visibility: visible;
    /* Reset desktop style */
    transform: none;
    /* Reset desktop style */
    border: none;
    /* Reset desktop style */
    border-radius: 0;
    /* Reset desktop style */
    border-top: 1px solid var(--accent-teal-light);
}

.mobile-menu .sub-menu.active {
    display: flex;
}

/* Mobile Toggle Content inside LI */
.mobile-menu .menu-item-has-children>a {
    display: inline-block;
}

/* Mobile Toggle Button (Added via JS) */
.mobile-menu-toggle {
    display: inline-block;
    margin-left: 10px;
    cursor: pointer;
    color: var(--accent-teal-light);
    transition: transform 0.3s ease;
    font-size: 1.2rem;
    padding: 5px;
}

.mobile-menu-toggle.active {
    transform: rotate(180deg);
}

/* Fix RTL Icon margins */
html[lang="ar"] .nav-links .menu-item-has-children>a::after {
    margin-left: 0;
    margin-right: 6px;
}

html[lang="ar"] .mobile-menu-toggle {
    margin-left: 0;
    margin-right: 10px;
}
/* Force removing controls on mobile */
.hero-video-mobile::-webkit-media-controls {
    display: none !important;
}
.hero-video-mobile {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}