/* ============================================
   RAMD Date Palm Congress 2026
   Premium Design System
   ============================================ */

/* Font Awesome 6.5.1 @font-face overrides.
   The cdnjs stylesheet declares these fonts with font-display: block
   (flagged by Lighthouse). style.css is linked after it, so these
   re-declarations win the cascade and switch to font-display: swap.
   Keep the URLs in sync with the Font Awesome version in header.php. */
@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-solid-900.woff2) format("woff2"),
         url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-solid-900.ttf) format("truetype");
}

@font-face {
    font-family: "Font Awesome 6 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-brands-400.woff2) format("woff2"),
         url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-brands-400.ttf) format("truetype");
}

/* CSS Variables */
:root {
    /* Couleurs exactes du PDF "Date Palm Congress 2026" */
    --color-primary: #6F9B26;          /* Vert palmier vif (logo + titres) */
    --color-primary-dark: #557818;     /* Vert palmier foncé */
    --color-primary-light: #8DBA42;    /* Vert clair */
    --color-primary-soft: #E8F0D6;     /* Vert très clair fond */
    
    --color-secondary: #7A2F18;        /* Brun datte foncé (titre DATE PALM) */
    --color-secondary-dark: #5C2210;   /* Brun très foncé */
    --color-secondary-light: #A04829;  /* Brun datte clair */
    --color-secondary-soft: #F5E6DD;   /* Beige rosé */
    
    --color-accent: #C9A876;           /* Or sable doré (motif palmier) */
    --color-accent-dark: #A8865A;      /* Or foncé */
    --color-accent-light: #E5C99A;     /* Or clair */
    
    --color-cream: #F5EFE0;            /* Beige crème (fond PDF) */
    --color-cream-dark: #E8DEC9;       /* Beige plus foncé */
    
    --color-dark: #1A1A1A;
    --color-dark-soft: #2C2C2C;
    --color-light: #FAFAFA;
    --color-white: #FFFFFF;
    --color-gray: #6B7280;
    --color-gray-light: #E5E7EB;
    --color-gray-lighter: #F3F4F6;

    /* Couleur de marque LinkedIn (hors charte : réservée aux liens vers LinkedIn) */
    --color-linkedin: #0A66C2;
    --color-linkedin-dark: #004182;

    /* Status colors */
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;
    --color-info: #3B82F6;
    
    /* Typography */
    --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Poppins', sans-serif;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;
    
    /* Border radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 30px;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.12);
    --shadow-xl: 0 20px 60px rgba(0,0,0,0.15);
    --shadow-glow: 0 0 30px rgba(107, 142, 30, 0.3);
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Layout */
    --container-max: 1280px;
    --navbar-height: 80px;
    --countdown-height: 60px;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--navbar-height) + var(--countdown-height));
}

body {
    font-family: var(--font-primary);
    color: var(--color-dark);
    background-color: var(--color-cream);  /* Beige crème comme le PDF */
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Désactivation de la sélection du contenu (dissuasif). Les champs de
       saisie restent sélectionnables grâce à la règle ci-dessous. */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Tiroir de navigation ouvert : on fige le défilement de la page derrière. */
body.nav-open {
    overflow: hidden;
}

/* Garder les champs de formulaire utilisables (sélection + copier/coller). */
input,
textarea,
select,
[contenteditable="true"] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Motif palmier en arrière-plan global - style PDF */
body::before {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    width: 50vw;
    height: 100vh;
    background-image: url('../images/Motif-palm-date.png');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    opacity: 0.4;
    z-index: 0;
    pointer-events: none;
}

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

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
}

ul, ol {
    list-style: none;
}

button {
    cursor: pointer;
    font-family: inherit;
    border: none;
    background: none;
}

/* ============================================
   TYPOGRAPHY - Style PDF
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-secondary);  /* Brun datte par défaut pour les titres (comme PDF) */
    position: relative;
    z-index: 1;
}

h1 { 
    font-size: clamp(2.5rem, 5vw, 4.5rem); 
    font-weight: 800; 
    color: var(--color-primary);  /* H1 en vert palmier comme le titre du PDF */
}
h2 { font-size: clamp(2rem, 4vw, 3rem); color: var(--color-secondary); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--color-secondary); }
h4 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

p { color: #4a4a4a; font-size: 1rem; }

.text-gradient {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-green { color: var(--color-primary) !important; }
.text-brown { color: var(--color-secondary) !important; }
.text-gold { color: var(--color-accent) !important; }

/* ============================================
   CONTAINER
   ============================================ */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
}

.section {
    padding: var(--spacing-xl) 0;
    position: relative;
    background: transparent;
}

/* Sections alternées avec motif palmier subtil */
.section:nth-child(even) {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
}

.section:nth-child(odd) {
    background: rgba(245, 239, 224, 0.6); /* Beige crème transparent */
}

.section-title {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    position: relative;
    z-index: 1;
}

/* Tag de section style PDF : petite barre orange + texte */
.section-tag,
.section-title .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
    background: none !important;
    color: var(--color-secondary) !important;
    border-radius: 0;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.section-tag::before,
.section-title .badge::before {
    content: '';
    display: inline-block;
    width: 40px;
    height: 3px;
    background: var(--color-accent);
    border-radius: 2px;
}

.section-title h2 {
    margin-bottom: 1rem;
    color: var(--color-secondary);  /* Brun datte comme PDF */
    font-weight: 800;
}

.section-title .underline {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-secondary));
    margin: 1.5rem auto;
    border-radius: var(--radius-full);
}

.section-title p {
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.125rem;
}

/* ============================================
   COUNTDOWN BAR
   ============================================ */
.countdown-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    color: var(--color-white);
    z-index: 1001;
    height: var(--countdown-height);
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.countdown-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 2rem;
}

.countdown-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    font-size: 0.95rem;
}

.countdown-label i {
    color: var(--color-accent);
    font-size: 1.25rem;
}

.countdown-timer {
    display: flex;
    gap: 1rem;
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
    padding: 0.25rem 0.75rem;
    background: rgba(255,255,255,0.1);
    border-radius: var(--radius-sm);
    backdrop-filter: blur(10px);
}

.countdown-number {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.countdown-text {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
}

/* ============================================
   NAVBAR - GLASSMORPHISM
   ============================================ */
.navbar {
    position: fixed;
    top: var(--countdown-height);
    left: 0;
    right: 0;
    height: var(--navbar-height);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.2);
    z-index: 1000;
    transition: var(--transition-normal);
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(30px);
    box-shadow: 0 4px 30px rgba(0,0,0,0.08);
}

.navbar-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 clamp(1rem, 2.2vw, 2rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(0.75rem, 1.5vw, 1.5rem);
    height: 100%;
}

.navbar-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 800;
    font-size: 1.25rem;
    flex: 0 0 auto;
}

.navbar-logo-img {
    height: 60px;
    width: auto;
    max-width: clamp(150px, 12vw, 170px);
    object-fit: contain;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
}



/* Enveloppe menu + actions. En desktop, `display: contents` la rend
   transparente : .navbar-menu et .navbar-actions restent des enfants flex
   directs de .navbar-container, la mise en page ne change pas. En mobile
   elle devient le tiroir coulissant (cf. media query 1150px). */
.navbar-collapse {
    display: contents;
}

/* Gabarit serré, et pas seulement en « tablette » : la largeur utile de la
   navbar ne dépend PAS de la taille de l'écran, elle est plafonnée par
   --container-max (1280px), soit ~1216px de contenu une fois les marges
   retirées. Logo (~200px) et actions (~250px) en prennent la moitié : le menu
   dispose d'environ 730px, quelle que soit la largeur du navigateur. Avec 9
   entrées en français, un gap de 1.25rem et 0.95rem de police débordaient de
   ce budget et le menu chevauchait le logo. Toute entrée supplémentaire devra
   être regagnée ici, ou déclencher le tiroir plus tôt (media query 1150px).

   Le gap est fixe et non en clamp() sur vw : puisque la largeur utile ne varie
   plus au-delà de 1280px, un gap qui grandit avec la fenêtre ne fait que
   reprendre la marge durement gagnée. Valeurs calées sur la largeur rendue
   réelle en Poppins 500 : marge minimale de +88px, en FR (la langue la plus
   longue), à 1920px. */
.navbar-menu {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
}

.navbar-menu a {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-dark);
    position: relative;
    padding: 0.5rem 0;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.navbar-menu a:hover,
.navbar-menu a.active {
    color: var(--color-primary);
}

.navbar-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    transition: width var(--transition-normal);
}

.navbar-menu a:hover::after,
.navbar-menu a.active::after {
    width: 100%;
}

.navbar-actions {
    display: flex;
    gap: clamp(0.75rem, 1.2vw, 1rem);
    align-items: center;
    flex: 0 0 auto;
}

.lang-switcher {
    position: relative;
}

.lang-switcher button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    background: rgba(107, 142, 30, 0.1);
    border-radius: var(--radius-full);
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.875rem;
}

.lang-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 0.5rem;
    min-width: 140px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: var(--transition-normal);
}

.lang-switcher:hover .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-dropdown a {
    display: block;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
}

.lang-dropdown a:hover {
    background: var(--color-gray-lighter);
    color: var(--color-primary);
}

.lang-switcher__caret {
    font-size: 0.7rem;
}

.mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    /* 44x44 : cible tactile minimale recommandée. */
    width: 44px;
    height: 44px;
    margin-inline-end: -0.5rem;
    cursor: pointer;
}

.mobile-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background: var(--color-dark);
    border-radius: 2px;
    transition: var(--transition-fast);
}

/* Hamburger -> croix quand le tiroir est ouvert. */
.mobile-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

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

.mobile-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-normal);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid transparent;
    white-space: nowrap;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.btn-secondary {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    color: white;
    box-shadow: var(--shadow-md);
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline:hover {
    background: var(--color-primary);
    color: white;
    transform: translateY(-2px);
}

.btn-white {
    background: white;
    color: var(--color-secondary);
    box-shadow: var(--shadow-md);
}

.btn-white:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-whatsapp {
    background: #25D366;
    color: white;
}

.btn-whatsapp:hover {
    background: #1FB855;
    transform: translateY(-2px);
}

.btn-sm {
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem;
}

.btn-lg {
    padding: 1.1rem 2.5rem;
    font-size: 1rem;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
    position: relative;
    min-height: 100vh;
    padding-top: calc(var(--navbar-height) + var(--countdown-height));
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--color-cream);
    background-image: 
        linear-gradient(135deg, #F8F2E3 0%, #F5EFE0 100%);
}

.hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 55%;
    height: 100%;
    background-image: url('../images/Motif-palm-date.png');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    opacity: 0.6;
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        rgba(245, 239, 224, 1) 0%, 
        rgba(245, 239, 224, 0.85) 40%, 
        rgba(245, 239, 224, 0.3) 100%);
    z-index: 1;
}

.hero-pattern {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-image: url('../images/stripes-pattern.svg');
    background-repeat: repeat-x;
    opacity: 0.6;
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    color: var(--color-dark);
    width: 100%;
    padding: 4rem 0;
}

.hero-content .container {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-text {
    animation: fadeInLeft 1s ease-out;
}

.hero-text h1,
.hero-title {
    color: var(--color-primary) !important;  /* Vert palmier comme PDF */
}

.hero-text h1 span,
.hero-title span {
    color: var(--color-secondary) !important;  /* Brun datte comme PDF */
    display: block;
    font-style: italic;
}

.hero-subtitle {
    color: #4a4a4a !important;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.5rem;
    background: rgba(122, 47, 24, 0.1);
    border: 1px solid rgba(122, 47, 24, 0.2);
    color: var(--color-secondary) !important;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero-badge .dot {
    width: 8px;
    height: 8px;
    background: var(--color-accent);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.hero-title {
    font-size: clamp(2.5rem, 5.5vw, 5rem);
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: 1.5rem;
    color: white;
}

.hero-title span {
    background: linear-gradient(135deg, var(--color-accent) 0%, #F5D9A8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
}

.hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    color: #555;
    max-width: 600px;
    line-height: 1.5;
}

.hero-meta {
    display: flex;
    gap: 2rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.hero-meta-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-secondary);
}

.hero-meta-icon {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    box-shadow: 0 4px 12px rgba(111, 155, 38, 0.3);
}

.hero-meta-text {
    display: flex;
    flex-direction: column;
}

.hero-meta-text span:first-child {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-gray);
    font-weight: 500;
}

.hero-meta-text span:last-child {
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-secondary);
}

.hero-cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-visual {
    position: relative;
    animation: fadeInRight 1s ease-out;
}

.hero-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    color: var(--color-dark);
    box-shadow: 0 20px 50px rgba(122, 47, 24, 0.15);
}

.hero-card-title {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    color: var(--color-secondary);
    text-align: center;
    font-weight: 700;
}

.hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.hero-stat {
    text-align: center;
    padding: 1.5rem 1rem;
    background: rgba(245, 239, 224, 0.6);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-cream-dark);
}

.hero-stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    line-height: 1;
}

.hero-stat-label {
    font-size: 0.85rem;
    margin-top: 0.5rem;
    color: var(--color-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.hero-scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    z-index: 2;
    animation: bounce 2s infinite;
}

.hero-scroll-icon {
    width: 30px;
    height: 50px;
    border: 2px solid white;
    border-radius: var(--radius-full);
    position: relative;
}

.hero-scroll-icon::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 8px;
    background: white;
    border-radius: 2px;
    animation: scrollDot 1.5s infinite;
}

/* ============================================
   MARKET STATS SECTION
   ============================================ */
.stats-section {
    padding: var(--spacing-lg) 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
    position: relative;
    overflow: hidden;
}

.stats-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../images/Motif-palm-date.png') center/cover;
    opacity: 0.05;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.stat-card {
    text-align: center;
    padding: 2rem;
    border-radius: var(--radius-lg);
    transition: var(--transition-normal);
}

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

.stat-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 1.75rem;
    color: white;
    box-shadow: 0 8px 20px rgba(122, 47, 24, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.15);
    transition: transform 0.3s ease;
}

.stat-icon img {
    width: 60%;
    height: 60%;
    object-fit: contain;
    filter: brightness(0) invert(1);  /* Logo en blanc pour contraste sur fond brun */
}

.stat-card:hover .stat-icon {
    transform: scale(1.05) rotate(-5deg);
}

.stat-value {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-suffix {
    font-size: 2rem;
    color: var(--color-accent);
}

.stat-label {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.9;
    margin-top: 0.5rem;
}

/* ============================================
   ABOUT / CONTEXT SECTION
   ============================================ */
.about-section {
    background: var(--color-light);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-text h3 {
    margin-bottom: 1.5rem;
}

.about-text p {
    margin-bottom: 1.25rem;
    font-size: 1.05rem;
    line-height: 1.7;
}

.about-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}

.about-feature {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.about-feature-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.about-feature h4 {
    margin-bottom: 0.25rem;
    font-size: 1.1rem;
}

.about-feature p {
    font-size: 0.9rem;
    margin: 0;
}

.about-image {
    position: relative;
}

.about-image-main {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(122, 47, 24, 0.25);
    aspect-ratio: 4/5;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    position: relative;
    transition: transform 0.5s ease;
}

.about-image-main:hover {
    transform: translateY(-5px);
}

.about-image-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Subtle overlay to enhance contrast */
.about-image-main::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(122,47,24,0.15) 100%);
    pointer-events: none;
}

.about-image-badge {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background: white;
    border-radius: var(--radius-lg);
    padding: 1.5rem 2rem;
    box-shadow: var(--shadow-xl);
    display: flex;
    gap: 1rem;
    align-items: center;
}

.about-image-badge-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.75rem;
}

.about-image-badge h4 {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.about-image-badge p {
    font-size: 0.85rem;
    margin: 0;
    color: var(--color-gray);
}

/* ============================================
   CONCEPT - 4 PILIERS
   ============================================ */
.concept-section {
    background: white;
}

.concept-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.concept-card {
    padding: 2.5rem 2rem;
    border-radius: var(--radius-lg);
    background: var(--color-light);
    border: 1px solid var(--color-gray-light);
    text-align: center;
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.concept-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-normal);
}

.concept-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-xl);
    border-color: transparent;
}

.concept-card:hover::before {
    transform: scaleX(1);
}

.concept-number {
    font-size: 4rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 1rem;
    opacity: 0.3;
}

.concept-card h3 {
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.concept-card p {
    font-size: 0.95rem;
}

/* ============================================
   PROGRAMME / TIMELINE
   ============================================ */
.programme-section {
    background: var(--color-light);
}

.programme-timeline {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

.programme-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    /* inset-inline-start : en arabe (RTL) la ligne passe à droite. */
    inset-inline-start: 50px;
    width: 3px;
    background: linear-gradient(180deg, var(--color-primary), var(--color-secondary));
    border-radius: var(--radius-full);
}

.timeline-period {
    margin-bottom: 3rem;
}

.timeline-period-title {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding-inline-start: 0;
}

.timeline-period-icon {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    z-index: 1;
    position: relative;
    box-shadow: var(--shadow-lg);
    flex-shrink: 0;
}

.timeline-period-title h3 {
    font-size: 1.75rem;
    margin: 0;
}

.timeline-items {
    padding-inline-start: 130px;
}

/* Variantes « après-midi » (brun datte). En classes et non en style inline :
   le liseré utilise border-inline-start, qu'un `border-left-color` inline
   ne touche pas en arabe. */
.timeline-period-icon--pm {
    background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark));
}

.timeline-item--pm {
    border-inline-start-color: var(--color-secondary);
}

.timeline-item-tag--pm {
    background: var(--color-secondary);
}

.timeline-item {
    background: white;
    padding: 1.5rem 2rem;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
    border-inline-start: 4px solid var(--color-primary);
    transition: var(--transition-normal);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

.timeline-item:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

.timeline-item.break {
    border-left-color: var(--color-accent);
    background: rgba(212, 165, 116, 0.05);
}

.timeline-item-content h4 {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.timeline-item-content p {
    margin: 0;
    font-size: 0.9rem;
}

.timeline-item-tag {
    background: var(--color-primary);
    color: white;
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.timeline-item.break .timeline-item-tag {
    background: var(--color-accent);
}

/* ============================================
   AXES THEMATIQUES
   ============================================ */
.themes-section {
    background: white;
}

.themes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.theme-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    border: 1px solid var(--color-gray-light);
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.theme-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(107, 142, 30, 0.1) 0%, transparent 70%);
    transition: var(--transition-slow);
    opacity: 0;
}

.theme-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-xl);
    border-color: var(--color-primary);
}

.theme-card:hover::before {
    opacity: 1;
}

.theme-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.theme-card h3 {
    margin-bottom: 1rem;
    font-size: 1.2rem;
    position: relative;
    z-index: 1;
}

.theme-card p {
    font-size: 0.95rem;
    position: relative;
    z-index: 1;
}

/* ============================================
   TICKETS / PRICING
   ============================================ */
.tickets-section {
    background: linear-gradient(135deg, #f5f1e8 0%, #ede4d3 100%);
    position: relative;
    overflow: hidden;
}

.tickets-section::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(139, 58, 31, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.tickets-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.ticket-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: var(--transition-normal);
    position: relative;
    border: 2px solid transparent;
}

.ticket-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-xl);
}

.ticket-card.featured {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    color: white;
    transform: scale(1.05);
    border-color: var(--color-accent);
}

.ticket-card.featured:hover {
    transform: scale(1.05) translateY(-10px);
}

.ticket-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-accent);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: var(--shadow-md);
}

.ticket-name {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.ticket-card.featured .ticket-name {
    color: white;
}

.ticket-description {
    font-size: 0.9rem;
    margin-bottom: 2rem;
    opacity: 0.8;
    color: var(--color-gray);
}

.ticket-card.featured .ticket-description {
    color: #fff;
    opacity: 0.95;
}

.ticket-price {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.ticket-price-amount {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    /* Nombre toujours insécable et affiché en LTR (évite la coupure "40\n000"
       et l'inversion bidi "000 40" en arabe). */
    white-space: nowrap;
    direction: ltr;
    unicode-bidi: isolate;
}

.ticket-card:not(.featured) .ticket-price-amount {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ticket-price-currency {
    font-size: 1.25rem;
    font-weight: 600;
    opacity: 0.7;
}

.ticket-features {
    text-align: left;
    margin-bottom: 2rem;
}

.ticket-features li {
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.ticket-card.featured .ticket-features li {
    border-bottom-color: rgba(255,255,255,0.1);
}

.ticket-features li:last-child {
    border-bottom: none;
}

.ticket-features li i {
    color: var(--color-primary);
    font-size: 1rem;
}

.ticket-card.featured .ticket-features li i {
    color: var(--color-accent);
}

/* ============================================
   SPEAKERS / TARGETS
   ============================================ */
.targets-section {
    background: var(--color-light);
}

.targets-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.target-card {
    background: white;
    padding: 2rem 1.5rem;
    border-radius: var(--radius-lg);
    text-align: center;
    transition: var(--transition-normal);
    border: 1px solid var(--color-gray-light);
}

.target-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.target-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    margin: 0 auto 1.25rem;
}

.target-card h3 {
    font-size: 1rem;
    margin: 0;
}

/* ============================================
   BLOG — LIEN SOURCE EN FIN D'ARTICLE
   ============================================ */
.article-body .article-source {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-gray-light);
    font-size: 0.95rem;
}

/* Lien aux couleurs de la marque LinkedIn (bleu officiel #0A66C2). */
.article-body .article-source a {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--color-linkedin);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.article-body .article-source a:hover {
    color: var(--color-linkedin-dark);
    text-decoration: underline;
}

/* Logo LinkedIn officiel (carré arrondi + « in ») en pastille bleue. */
.article-body .article-source a::before {
    content: '\f08c'; /* fa-linkedin */
    font-family: 'Font Awesome 6 Brands';
    font-weight: 400;
    font-size: 1.35em;
    line-height: 1;
    color: var(--color-linkedin);
    transition: color 0.2s ease;
}

.article-body .article-source a:hover::before {
    color: var(--color-linkedin-dark);
}

/* ============================================
   SPONSORS & PARTENAIRES
   ============================================ */
.partners-section {
    background: var(--color-light);
}

/* Un bloc par niveau de sponsoring. --tier reprend les couleurs de css/sponsors.css. */
.partners-tier {
    margin-bottom: 3rem;
}

.partners-tier:last-of-type {
    margin-bottom: 0;
}

.partners-tier--premium { --tier: var(--color-primary); }
.partners-tier--diamond { --tier: #5A8F7B; }
.partners-tier--gold    { --tier: var(--color-accent-dark); }
.partners-tier--silver  { --tier: #8A94A6; }
.partners-tier--bronze  { --tier: var(--color-secondary); }

/* Libellé de niveau : filets latéraux à la couleur du tier. */
.partners-tier__label {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto 1.75rem;
    color: var(--tier);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.partners-tier__label::before,
.partners-tier__label::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tier));
    opacity: 0.45;
}

.partners-tier__label::after {
    background: linear-gradient(90deg, var(--tier), transparent);
}

/* Grille centrée en flex plutôt qu'en grid : les logos ajoutés au fil du temps
   se répartissent et restent centrés, quel que soit leur nombre (1, 2, 5, 7…).
   Une grille laisserait un logo isolé collé à la première colonne. */
.partners-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.partner-card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 200px;
    min-height: 120px;
    padding: 1.25rem;
    background: white;
    border: 1px solid rgba(201, 168, 118, 0.35);
    border-top: 3px solid var(--tier, var(--color-accent));
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.partner-card:hover {
    transform: translateY(-6px);
    border-color: var(--color-accent);
    border-top-color: var(--tier, var(--color-accent));
    box-shadow: var(--shadow-lg);
}

/* Les logos ont des ratios très différents : on borne la hauteur ET la largeur,
   object-fit: contain préserve les proportions dans les deux cas. */
.partner-card img {
    width: 100%;
    max-width: 160px;
    height: auto;
    max-height: 70px;
    object-fit: contain;
}

/* Le niveau Premium reste mis en avant, mais l'écart est léger. */
.partners-tier--premium .partner-card {
    flex-basis: 240px;
    min-height: 145px;
}

.partners-tier--premium .partner-card img {
    max-width: 195px;
    max-height: 90px;
}

.partners-cta {
    margin-top: 3rem;
    text-align: center;
}

.partners-cta p {
    margin-bottom: 1.25rem;
    color: var(--color-gray);
}

/* ============================================
   FAQ SEO
   ============================================ */
.faq-section {
    background: rgba(255, 255, 255, 0.72);
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.faq-item {
    background: white;
    border: 1px solid rgba(201, 168, 118, 0.35);
    border-left: 4px solid var(--color-accent);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.faq-item h3 {
    color: var(--color-secondary);
    font-size: 1.05rem;
    line-height: 1.45;
    margin-bottom: 0.75rem;
}

.faq-item p {
    color: var(--color-gray);
    line-height: 1.7;
    margin: 0;
}

/* ============================================
   REGISTRATION FORM
   ============================================ */
.registration-section {
    background: linear-gradient(135deg, var(--color-dark) 0%, #2c1810 100%);
    color: white;
    position: relative;
    overflow: hidden;
}

.registration-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(107, 142, 30, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(139, 58, 31, 0.3) 0%, transparent 50%);
}

.registration-section .section-title h2,
.registration-section .section-title p {
    color: white;
}

.registration-container {
    max-width: 900px;
    margin: 0 auto;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-lg);
    padding: 3rem;
    position: relative;
    z-index: 1;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.form-row-3 {
    display: grid;
    grid-template-columns: 0.5fr 1fr 1fr;
    gap: 1.5rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.9);
}

.form-label .required {
    color: var(--color-accent);
}

.form-control {
    width: 100%;
    padding: 0.875rem 1.25rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-md);
    color: white;
    font-family: inherit;
    font-size: 0.95rem;
    transition: var(--transition-fast);
}

.form-control::placeholder {
    color: rgba(255,255,255,0.4);
}

.form-control:focus {
    outline: none;
    border-color: var(--color-accent);
    background: rgba(255,255,255,0.12);
    box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.2);
}

.form-control option {
    background: var(--color-dark);
    color: white;
}

textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

.form-submit {
    text-align: center;
    margin-top: 2rem;
}

.form-submit .btn {
    min-width: 250px;
}

.form-info {
    background: rgba(212, 165, 116, 0.1);
    border-left: 4px solid var(--color-accent);
    padding: 1rem 1.5rem;
    border-radius: var(--radius-md);
    margin-bottom: 2rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.form-info i {
    color: var(--color-accent);
    font-size: 1.25rem;
    margin-top: 2px;
}

.form-info p {
    margin: 0;
    color: rgba(255,255,255,0.9);
    font-size: 0.9rem;
}

.form-success,
.form-error {
    padding: 1rem 1.5rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.form-success {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid var(--color-success);
    color: #6EE7B7;
}

.form-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid var(--color-danger);
    color: #FCA5A5;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
    background: var(--color-dark);
    color: white;
    padding: 4rem 0 2rem;
    position: relative;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-logo-wrap {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.footer-logo-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    flex-shrink: 0;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 6px;
    border: 1px solid rgba(201, 168, 118, 0.3);
}

.footer-brand h3 {
    color: white;
    margin-bottom: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.footer-brand p {
    color: rgba(255,255,255,0.6);
    margin-bottom: 1.5rem;
    max-width: 350px;
}

.footer-social {
    display: flex;
    gap: 0.75rem;
}

.footer-social a,
.footer-social span {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.05);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: var(--transition-fast);
}

.footer-social a:hover {
    background: var(--color-primary);
    transform: translateY(-3px);
}

.footer h4 {
    color: white;
    margin-bottom: 1.25rem;
    font-size: 1.1rem;
    position: relative;
    padding-bottom: 0.75rem;
}

.footer h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 3px;
    background: var(--color-primary);
    border-radius: var(--radius-full);
}

.footer ul li {
    margin-bottom: 0.75rem;
}

.footer ul li a {
    color: rgba(255,255,255,0.6);
    font-size: 0.95rem;
    transition: var(--transition-fast);
}

.footer ul li a:hover {
    color: var(--color-accent);
    padding-left: 5px;
}

.footer-contact-item {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    align-items: flex-start;
    color: rgba(255,255,255,0.6);
    font-size: 0.95rem;
}

.footer-contact-item i {
    color: var(--color-accent);
    margin-top: 4px;
    flex-shrink: 0;
}

.footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(255,255,255,0.5);
    font-size: 0.9rem;
}

.footer-bottom a {
    color: var(--color-accent);
    text-decoration: underline;
}

/* ============================================
   WHATSAPP FLOATING BUTTON
   ============================================ */
.whatsapp-float {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 60px;
    height: 60px;
    background: #25D366;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.75rem;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    z-index: 999;
    transition: var(--transition-normal);
    animation: pulse 2s infinite;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    color: white;
}

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

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); 
    }
    50% { 
        box-shadow: 0 4px 30px rgba(37, 211, 102, 0.8); 
    }
}

@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-10px); }
}

@keyframes scrollDot {
    0% { top: 8px; opacity: 1; }
    100% { top: 30px; opacity: 0; }
}

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */
@media (max-width: 1280px) {
    .navbar-logo-img {
        height: 54px;
        max-width: 150px;
    }

    /* Sous 1280px la largeur utile suit enfin la fenêtre et se réduit : le
       menu se resserre d'un cran de plus pour tenir jusqu'à 1150px, où le
       tiroir prend le relais (marge mesurée à 1151px : +104px en FR). */
    .navbar-menu {
        gap: 0.35rem;
    }

    .navbar-menu a {
        font-size: 0.8rem;
    }

    .navbar-actions .btn-sm {
        padding-inline: 0.75rem;
    }

    .lang-switcher button {
        padding-inline: 0.5rem;
    }
}

@media (max-width: 1024px) {
    .navbar-menu {
        gap: 0.75rem;
    }

    .navbar-menu a {
        font-size: 0.9rem;
    }

    .navbar-actions {
        gap: 0.6rem;
    }

    .hero-content .container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .concept-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .themes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .targets-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .about-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    
    .tickets-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
    }
    
    .ticket-card.featured {
        transform: scale(1);
    }
    
    .ticket-card.featured:hover {
        transform: translateY(-10px);
    }
}

/* ---------- Tiroir de navigation mobile ---------- */
@media (max-width: 1150px) {
    .navbar-collapse {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
        /* absolute et non fixed : .navbar porte un backdrop-filter, ce qui en
           fait le bloc conteneur de ses descendants fixed. Un `top` en calc()
           était alors mesuré depuis le haut de la navbar — elle-même déjà
           décalée de la hauteur du compte à rebours — et le tiroir démarrait
           60 à 80px trop bas : son pied (langues + bouton Inscription)
           tombait sous la fenêtre. Ancré en absolute à .navbar (elle-même
           fixed), `top: 100%` vaut exactement le bas de la barre, quel que
           soit le mode de composition. */
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        /* dvh suit la barre d'adresse mobile ; vh sert de repli. */
        height: calc(100vh - var(--navbar-height) - var(--countdown-height));
        height: calc(100dvh - var(--navbar-height) - var(--countdown-height));
        padding: 1.75rem 1.5rem 2.5rem;
        background: white;
        box-shadow: var(--shadow-lg);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(-100%);
        transition: transform var(--transition-normal);
    }

    /* Le tiroir fermé est décalé vers la gauche dans les deux sens de
       lecture. En RTL, le sortir par la droite (translateX(100%)) élargit
       la zone défilable du document : le navigateur compte le dépassement
       du côté « début » de l'axe, et la page gagne une barre horizontale. */
    .navbar-collapse.active {
        transform: translateX(0);
    }

    .navbar-menu {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        flex: 0 0 auto;
    }

    .navbar-menu a {
        display: block;
        /* ~48px de haut : confortable au doigt. */
        padding: 0.85rem 0.25rem;
        font-size: 1.05rem;
        border-bottom: 1px solid var(--color-gray-light);
    }

    /* Le soulignement animé n'a pas de sens dans une liste verticale. */
    .navbar-menu a::after {
        display: none;
    }

    /* Les actions restent visibles : masquer le sélecteur de langue en
       mobile rendait le site trilingue monolingue sur téléphone. */
    .navbar-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        margin-top: auto;
        padding-top: 1.25rem;
    }

    .navbar-actions .btn {
        justify-content: center;
        padding: 0.9rem 1.25rem;
        font-size: 0.95rem;
    }

    /* Le survol n'existe pas au doigt : on déplie les langues en permanence
       et le bouton déclencheur devient inutile. */
    .lang-switcher__trigger {
        display: none;
    }

    .lang-dropdown {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        min-width: 0;
        padding: 0;
        background: none;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .lang-dropdown a {
        flex: 1 1 auto;
        /* 44px : cible tactile minimale, quelle que soit la langue. */
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.7rem 0.9rem;
        background: var(--color-gray-lighter);
        border-radius: var(--radius-full);
        text-align: center;
        font-weight: 600;
        white-space: nowrap;
    }

    .lang-dropdown a[aria-current="true"] {
        background: var(--color-primary);
        color: var(--color-white);
    }

    .mobile-toggle {
        display: flex;
    }
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */
@media (max-width: 768px) {
    :root {
        --countdown-height: 80px;
    }
    
    .countdown-container {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
    }
    
    .countdown-timer {
        gap: 0.5rem;
    }
    
    .countdown-item {
        min-width: 45px;
        padding: 0.15rem 0.5rem;
    }
    
    .countdown-number {
        font-size: 1.15rem;
    }

    .navbar-logo-img {
        height: 52px;
    }

    /* Le tiroir mobile est entièrement défini dans le bloc 1150px ci-dessus :
       ne pas le redéclarer ici, les règles divergeaient. */

    .container {
        padding: 0 1.25rem;
    }
    
    .section {
        padding: var(--spacing-lg) 0;
    }
    
    .hero {
        padding-top: calc(var(--navbar-height) + var(--countdown-height) + 1rem);
    }
    
    .hero-meta {
        flex-direction: column;
        gap: 1rem;
    }
    
    .hero-cta {
        flex-direction: column;
        width: 100%;
    }
    
    .hero-cta .btn {
        width: 100%;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .concept-grid,
    .themes-grid,
    .targets-grid,
    .faq-grid {
        grid-template-columns: 1fr;
    }
    
    .form-row,
    .form-row-3 {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .registration-container {
        padding: 2rem 1.5rem;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .timeline-period-icon {
        width: 70px;
        height: 70px;
        font-size: 1.5rem;
    }
    
    .programme-timeline::before {
        inset-inline-start: 35px;
    }

    .timeline-items {
        padding-inline-start: 90px;
    }
    
    .timeline-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .about-image-badge {
        bottom: -10px;
        right: -10px;
        padding: 1rem 1.25rem;
    }
    
    .about-image-badge h4 {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.75rem; }

    .partners-tier {
        margin-bottom: 2.25rem;
    }

    .partners-tier__label {
        margin-bottom: 1.25rem;
        font-size: 0.9rem;
    }

    .partners-grid {
        gap: 1rem;
    }

    .partner-card,
    .partners-tier--premium .partner-card {
        flex-basis: 150px;
        min-height: 100px;
        padding: 1rem;
    }

    .partner-card img,
    .partners-tier--premium .partner-card img {
        max-width: 120px;
        max-height: 55px;
    }

    .navbar-logo-img {
        height: 44px;
    }

    .countdown-label span:not(:first-child) {
        display: none;
    }
    
    .whatsapp-float {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
        bottom: 1rem;
        right: 1rem;
    }
}

/* ===============================================
   REGISTRATION CTA BANNER (Modal trigger)
   =============================================== */
.registration-cta-section {
    padding: 5rem 0;
    background: var(--color-cream);
    position: relative;
    overflow: hidden;
}
.registration-cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: -10%;
    width: 50%;
    height: 100%;
    background-image: url('../images/Motif-palm-date.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.35;
    z-index: 0;
}
.registration-cta {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 24px;
    padding: 3.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(111, 155, 38, 0.35);
    z-index: 1;
}
.cta-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.1) 1px, transparent 0);
    background-size: 24px 24px;
    opacity: 0.5;
}
.cta-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 3rem;
    align-items: center;
    color: white;
}
.cta-text .cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255,255,255,0.3);
}
.cta-text h2 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: white;
}
.cta-text > p {
    font-size: 1.1rem;
    opacity: 0.95;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}
.cta-features {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.cta-feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
}
.cta-feature i {
    color: var(--color-accent);
    font-size: 1.1rem;
}
.cta-action {
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
}
.cta-price {
    margin-bottom: 1.5rem;
}
.cta-price .price-label {
    display: block;
    font-size: 0.8rem;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.cta-price .price-amount {
    display: block;
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    margin: 0.5rem 0;
    white-space: nowrap;
    direction: ltr;
    unicode-bidi: isolate;
}
.cta-price .price-amount small {
    font-size: 1rem;
    font-weight: 500;
    opacity: 0.8;
}
.cta-price .price-sub {
    display: block;
    font-size: 0.85rem;
    opacity: 0.8;
}
.cta-btn {
    width: 100%;
    padding: 1.2rem 2rem !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    background: white !important;
    color: var(--color-primary) !important;
    border: none !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    transition: all 0.3s !important;
}
.cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
}
.cta-secure {
    color: white;
    margin-top: 1rem;
    font-size: 0.8rem;
    opacity: 0.85;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
@media (max-width: 768px) {
    .registration-cta { padding: 2rem 1.5rem; }
    .cta-content { grid-template-columns: 1fr; gap: 2rem; }
}

/* ===============================================
   MODAL D'INSCRIPTION
   =============================================== */
.rm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    z-index: 99999;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
    overflow-y: auto;
    opacity: 0;
    transition: opacity 0.3s;
}
.rm-overlay.active {
    display: flex;
    opacity: 1;
}
.rm-modal {
    background: white;
    border-radius: 20px;
    width: 100%;
    max-width: 780px;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0,0,0,0.5);
    transform: translateY(40px) scale(0.95);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    margin: auto;
}
.rm-overlay.active .rm-modal {
    transform: translateY(0) scale(1);
}
body.rm-open { overflow: hidden; }

/* HEADER */
.rm-header {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: white;
    padding: 1.75rem 2rem 0;
    position: relative;
}
.rm-header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.rm-logo {
    display: flex;
    gap: 1rem;
    align-items: center;
}
.rm-logo-icon {
    width: 48px;
    height: 48px;
    background: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.rm-logo h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: white;
}
.rm-logo p {
    margin: 0;
    font-size: 0.8rem;
    opacity: 0.9;
}
.rm-close {
    background: rgba(255,255,255,0.15);
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    backdrop-filter: blur(10px);
}
.rm-close:hover {
    background: rgba(255,255,255,0.3);
    transform: rotate(90deg);
}

/* STEPPER */
.rm-stepper {
    display: flex;
    align-items: center;
    padding: 1rem 0 1.5rem;
    gap: 0.5rem;
}
.rm-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.3s;
}
.rm-step.active, .rm-step.done { opacity: 1; }
.rm-step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.3s;
}
.rm-step.active .rm-step-circle {
    background: white;
    color: var(--color-primary);
    border-color: white;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.2);
}
.rm-step.done .rm-step-circle {
    background: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
}
.rm-step span {
    font-size: 0.75rem;
    font-weight: 500;
}
.rm-step-line {
    flex: 1;
    height: 2px;
    background: rgba(255,255,255,0.3);
    margin: -1rem 0 0;
    border-radius: 2px;
}

/* BODY */
.rm-body {
    padding: 2rem;
    max-height: 65vh;
    overflow-y: auto;
}
.rm-pane { display: none; animation: rmFadeIn 0.4s; }
.rm-pane.active { display: block; }
@keyframes rmFadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

.rm-section-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #f3f4f6;
}

.rm-grid { display: grid; gap: 1rem; }
.rm-grid-2 { grid-template-columns: 1fr 1fr; }
.rm-grid-3 { grid-template-columns: 100px 1fr 1fr; }
@media (max-width: 600px) {
    .rm-grid-2, .rm-grid-3 { grid-template-columns: 1fr; }
}

.rm-field { margin-bottom: 0.25rem; }
.rm-field label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.4rem;
}
.rm-field label span { color: var(--color-danger); }
.rm-field input,
.rm-field select,
.rm-field textarea {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.92rem;
    transition: all 0.2s;
    background: white;
    color: #1f2937;
}
.rm-field input:focus,
.rm-field select:focus,
.rm-field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(107,142,30,0.1);
}
.rm-field input.error,
.rm-field select.error {
    border-color: var(--color-danger);
    background: #fef2f2;
}

/* SUMMARY */
.rm-summary {
    background: linear-gradient(135deg, #f9f7f1, #fff);
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem;
    margin-top: 1.5rem;
}
.rm-summary-line {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    font-size: 0.9rem;
    color: #6b7280;
}
.rm-summary-line strong { color: #1f2937; font-weight: 600; }
.rm-summary-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 0.5rem 0;
}
.rm-summary-line.rm-total {
    font-size: 1.05rem;
    padding-top: 0.5rem;
}
.rm-summary-line.rm-total span { color: #1f2937; font-weight: 600; }
.rm-summary-line.rm-total strong {
    color: var(--color-primary);
    font-size: 1.3rem;
    font-weight: 800;
}

/* PAYMENT RECAP */
.rm-payment-recap {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: white;
    border-radius: 14px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.rm-payment-recap-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 0.9rem;
}
.rm-payment-recap-item .label { opacity: 0.85; }
.rm-payment-recap-item .value { font-weight: 600; }
.rm-payment-recap-total {
    border-top: 1px solid rgba(255,255,255,0.3);
    padding-top: 0.75rem;
    margin-top: 0.5rem;
    font-size: 1.1rem;
}
.rm-payment-recap-total .value { font-size: 1.5rem; font-weight: 800; }

/* PAYMENT METHODS */
.rm-payment-methods {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.rm-payment-method {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
}
.rm-payment-method:hover { border-color: #d1d5db; background: #f9fafb; }
.rm-payment-method.active {
    border-color: var(--color-primary);
    background: rgba(107,142,30,0.05);
    box-shadow: 0 0 0 3px rgba(107,142,30,0.1);
}
.rm-payment-method input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--color-primary);
    margin: 0;
}
.rm-payment-method-icon {
    width: 44px;
    height: 44px;
    background: #f3f4f6;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--color-primary);
    flex-shrink: 0;
}
.rm-payment-method.active .rm-payment-method-icon {
    background: var(--color-primary);
    color: white;
}
.rm-payment-method-info { flex: 1; }
.rm-payment-method-info strong {
    display: block;
    font-size: 0.95rem;
    color: #1f2937;
    margin-bottom: 0.2rem;
}
.rm-payment-method-info span {
    font-size: 0.8rem;
    color: #6b7280;
}
.rm-payment-method-logos {
    display: flex;
    gap: 0.4rem;
    font-size: 1.5rem;
    color: #6b7280;
}

/* STRIPE */
.rm-stripe-container { margin-top: 1rem; }
.rm-stripe-input {
    padding: 0.85rem 0.9rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    background: white;
    transition: all 0.2s;
}
.rm-stripe-input.StripeElement--focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(107,142,30,0.1);
}
.rm-stripe-input.StripeElement--invalid { border-color: var(--color-danger); }
.rm-stripe-error {
    color: var(--color-danger);
    font-size: 0.85rem;
    margin-top: 0.4rem;
    min-height: 1.2em;
}
.rm-secure-info {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    background: #f0fdf4;
    border-left: 3px solid var(--color-success);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8rem;
    color: #166534;
}
.rm-secure-info i { color: var(--color-success); }

/* INFO BOX */
.rm-info-box {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: #fef9c3;
    border-left: 4px solid #eab308;
    border-radius: 10px;
    margin-top: 1rem;
}
.rm-info-box i {
    color: #ca8a04;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.rm-info-box strong {
    display: block;
    color: #854d0e;
    margin-bottom: 0.3rem;
    font-size: 0.95rem;
}
.rm-info-box p {
    margin: 0;
    font-size: 0.85rem;
    color: #713f12;
    line-height: 1.5;
}

/* CHECKBOX */
.rm-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: #374151;
    line-height: 1.5;
}
.rm-checkbox input {
    margin-top: 0.15rem;
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}
.rm-checkbox a { color: var(--color-primary); font-weight: 600; }

/* ACTIONS */
.rm-actions {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f3f4f6;
}
.rm-btn {
    padding: 0.9rem 1.5rem;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s;
    text-decoration: none;
}
.rm-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.rm-btn-primary {
    background: var(--color-primary);
    color: white;
    box-shadow: 0 4px 12px rgba(107,142,30,0.3);
}
.rm-btn-primary:hover:not(:disabled) {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(107,142,30,0.4);
}
.rm-btn-ghost {
    background: #f3f4f6;
    color: #374151;
}
.rm-btn-ghost:hover { background: #e5e7eb; }
.rm-btn-whatsapp {
    background: #25D366;
    color: white;
}
.rm-btn-whatsapp:hover { background: #1faa54; }

/* SUCCESS PANE */
.rm-success {
    text-align: center;
    padding: 1rem 0 2rem;
}
.rm-success-icon {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, var(--color-success), #059669);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: white;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 30px rgba(16,185,129,0.4);
    animation: rmPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes rmPop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
.rm-success h2 {
    font-size: 1.7rem;
    color: #1f2937;
    margin-bottom: 0.5rem;
    font-weight: 800;
}
.rm-success > p {
    color: #6b7280;
    font-size: 1rem;
    max-width: 480px;
    margin: 0 auto 1.5rem;
    line-height: 1.6;
}
.rm-success-details {
    background: #f9fafb;
    border-radius: 12px;
    padding: 1.25rem;
    margin: 1.5rem auto;
    max-width: 420px;
    text-align: left;
    font-size: 0.9rem;
    color: #374151;
}
.rm-success-details > div {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    border-bottom: 1px dashed #e5e7eb;
}
.rm-success-details > div:last-child { border: none; }
.rm-success-details strong { color: #1f2937; }
.rm-success-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

/* SPINNER */
.rm-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: rmSpin 0.7s linear infinite;
}
@keyframes rmSpin { to { transform: rotate(360deg); } }

@media (max-width: 600px) {
    .rm-overlay { padding: 0; }
    .rm-modal { border-radius: 0; min-height: 100vh; max-width: 100%; }
    .rm-body { padding: 1.25rem; max-height: calc(100vh - 220px); }
    .rm-header { padding: 1.25rem 1.25rem 0; }
    .rm-stepper span { display: none; }
    .rm-actions { flex-direction: column-reverse; }
    .rm-actions .rm-btn { width: 100%; }
}

/* ============================================================
   DURCISSEMENT RESPONSIVE
   ============================================================
   Placé en fin de fichier pour primer sur les blocs précédents.
   Comble les tailles d'écran que le design (desktop d'abord)
   ne couvrait pas : très petits téléphones, contenus longs,
   paysage, et pointeur tactile.
   ============================================================ */

/* ---------- Garde-fous de débordement ---------- */

/* body a déjà overflow-x: hidden, mais cela masque le symptôme sans
   empêcher la page de s'élargir. Ces règles traitent les causes
   habituelles : mots insécables, médias et tableaux hors gabarit. */
h1, h2, h3, h4, h5, h6,
p, li, dd, dt, figcaption, blockquote {
    overflow-wrap: break-word;
}

img, svg, video, canvas, iframe, embed, object {
    max-width: 100%;
}

/* Un tableau ne peut pas se comprimer : on le rend défilable dans son
   propre cadre plutôt que de laisser la page déborder. */
table {
    max-width: 100%;
}

/* Les URLs et e-mails collés dans du contenu éditorial. */
a {
    overflow-wrap: break-word;
}

/* Les champs de formulaire ne doivent jamais dépasser leur conteneur. */
input, select, textarea, button {
    max-width: 100%;
}

/* iOS Safari zoome sur un champ dont la police fait moins de 16px.
   On aligne donc tous les champs à 16px sous 768px. */
@media (max-width: 768px) {
    input, select, textarea,
    .form-control,
    .rm-field input,
    .rm-field select,
    .rm-field textarea {
        font-size: 16px;
    }
}

/* ---------- Motif palmier de fond ---------- */

/* En desktop il occupe 50vw à 40 % d'opacité. Sur un téléphone c'est
   la moitié de l'écran derrière le texte : on l'atténue. */
@media (max-width: 768px) {
    body::before {
        width: 75vw;
        opacity: 0.16;
    }
}

/* ---------- Tablettes et petits portables ---------- */
@media (max-width: 1024px) {
    /* 2 colonnes fixes : sur une carte de 340px les libellés se coupaient. */
    .cta-content {
        grid-template-columns: 1fr;
    }

    .hero-title {
        font-size: clamp(2.1rem, 6vw, 3.5rem);
    }
}

/* ---------- Téléphones ---------- */
@media (max-width: 768px) {
    /* Le tag de section (barre or + texte en majuscules espacées) peut
       dépasser la largeur avec une traduction longue. */
    .section-tag,
    .section-title .badge {
        flex-wrap: wrap;
        letter-spacing: 1px;
        font-size: 0.78rem;
    }

    .section-tag::before,
    .section-title .badge::before {
        width: 28px;
    }

    .about-features {
        grid-template-columns: 1fr;
    }

    /* 100vh se mesure barre d'adresse repliée : le hero dépassait d'une
       centaine de pixels au chargement. dvh suit la hauteur visible. */
    .hero {
        min-height: 100dvh;
    }

    /* Cartes : le rembourrage desktop mange la largeur utile. */
    .stat-card,
    .concept-card,
    .theme-card,
    .target-card,
    .faq-item,
    .ticket-card {
        padding: 1.5rem 1.25rem;
    }

    .timeline-item {
        padding: 1.25rem 1.25rem;
    }

    .registration-cta {
        padding: 1.75rem 1.25rem;
    }

    .cta-features {
        gap: 0.6rem;
    }

    .cta-price .price-amount {
        font-size: clamp(2rem, 9vw, 2.75rem);
    }

    /* Les liens du pied de page deviennent des cibles tactiles. Ne pas y
       ajouter .lang-dropdown a : le tiroir lui donne déjà son propre
       rembourrage, et cette règle, plus tardive, l'écrasait. */
    .footer ul li a {
        display: inline-block;
        padding-block: 0.35rem;
    }

    .footer-social {
        flex-wrap: wrap;
    }
}

/* ---------- Petits téléphones ---------- */
@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }

    .hero-stats {
        gap: 0.75rem;
    }

    .hero-stat-number {
        font-size: clamp(1.5rem, 8vw, 2rem);
    }

    .hero-card {
        padding: 1.5rem 1.25rem;
    }

    .hero-meta-icon {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }

    /* La colonne de gauche de la timeline occupait 90px sur 320px d'écran. */
    .programme-timeline::before {
        inset-inline-start: 26px;
    }

    .timeline-items {
        padding-inline-start: 66px;
    }

    .timeline-period-icon {
        width: 55px;
        height: 55px;
        font-size: 1.2rem;
    }

    .timeline-period-title {
        gap: 0.75rem;
    }

    .timeline-period-title h3 {
        font-size: 1.25rem;
    }

    .concept-number {
        font-size: 2.75rem;
    }

    .ticket-price-amount {
        font-size: clamp(2rem, 12vw, 3rem);
    }

    .section-title .underline {
        margin: 1rem auto;
    }

    /* Les boutons pleine largeur évitent les libellés tronqués. */
    .btn-lg {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- Très petits écrans (Galaxy Fold fermé, ~280px) ---------- */
@media (max-width: 360px) {
    h1 { font-size: 1.9rem; }
    h2 { font-size: 1.5rem; }

    .container {
        padding: 0 0.85rem;
    }

    .countdown-item {
        min-width: 38px;
        padding: 0.1rem 0.35rem;
    }

    .countdown-number {
        font-size: 1rem;
    }

    .countdown-text {
        font-size: 0.6rem;
    }

    .navbar-logo-img {
        height: 38px;
    }

    /* Une seule carte partenaire par ligne plutôt que deux illisibles. */
    .partner-card,
    .partners-tier--premium .partner-card {
        flex-basis: 100%;
    }
}

/* ---------- Téléphone en paysage ---------- */

/* Hauteur utile ~320px : le hero plein écran et le tiroir de navigation
   ne laissaient rien voir. */
@media (max-height: 480px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding-bottom: 3rem;
    }

    .hero-scroll {
        display: none;
    }

    .navbar-collapse {
        gap: 1rem;
        padding-block: 1rem;
    }

    .navbar-menu a {
        padding-block: 0.55rem;
        font-size: 0.95rem;
    }
}

/* ---------- Modal d'inscription ---------- */

/* 100vh se mesure barre d'adresse repliée : sur iOS/Android le bas de la
   modale (les boutons Suivant/Payer) passait sous l'interface du
   navigateur. dvh suit la hauteur réellement visible. */
@media (max-width: 600px) {
    .rm-modal {
        min-height: 100dvh;
    }

    .rm-body {
        max-height: calc(100dvh - 220px);
    }

    .rm-payment-method {
        align-items: flex-start;
    }

    .rm-payment-method-logos {
        flex-wrap: wrap;
    }

    .rm-success-actions {
        flex-direction: column;
    }

    .rm-success-actions .rm-btn {
        width: 100%;
    }
}

/* ---------- Pointeur grossier (tactile) ---------- */

/* Indépendant de la largeur : une tablette large reste tactile. */
@media (hover: none) and (pointer: coarse) {
    /* Les effets de survol restent « collés » après un appui sur mobile. */
    .ticket-card:hover,
    .theme-card:hover,
    .concept-card:hover,
    .stat-card:hover,
    .partner-card:hover,
    .timeline-item:hover {
        transform: none;
    }

    /* Cibles tactiles : 44px minimum (WCAG 2.5.8). */
    .btn,
    .rm-btn,
    .footer-social a,
    .lang-dropdown a {
        min-height: 44px;
    }
}