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

/* --- VARIABLES & RESET --- */
:root {
    --primary-color: #047857; /* Vert émeraude profond et premium */
    --secondary-color: #2563EB; /* Bleu royal moderne */
    --accent-color: #F97316; /* Orange vibrant pour les CTA */
    --accent-hover: #EA580C; /* Orange plus sombre au survol */
    --dark-color: #1E293B; /* Slate profond au lieu du noir */
    --light-color: #F8FAFC; /* Gris très clair et doux */
    --white-color: #ffffff;
    --gray-color: #CBD5E1;
    --text-color: #334155;
    --section-alt-bg: #EEF2F6; /* Fond gris plus marqué pour l'alternance des sections d'accueil */
    --font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    --container-width: 1200px;
    --border-radius: 16px; /* Coins plus arrondis pour un effet Premium */
    --border-radius-sm: 8px;
    --box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    --box-shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.08);
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
    /* Filet de sécurité contre le scroll horizontal sur mobile.
       `clip` et non `hidden` : `hidden` créerait un conteneur de défilement
       et casserait le `position: sticky` du header. */
    overflow-x: clip;
}

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

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* --- UTILITIES & SHARED --- */
.bg-light {
    background-color: var(--light-color);
    padding: 40px 0; /* Réduit pour condenser la page */
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 30px;
    margin-top: 30px;
}

.card {
    background: var(--white-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 20px; /* Carte plus compacte sur la hauteur */
    transition: var(--transition-smooth);
    border: 1px solid rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
}

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

.card img {
    width: 100%;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    margin-bottom: 15px;
}

.cta-button {
    display: inline-block;
    padding: 10px 24px; /* Un peu moins de hauteur */
    border-radius: 50px; /* Pill shape pour modernité */
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem; /* Parfait pour un bouton sans être gigantesque */
    transition: var(--transition-smooth);
    border: 2px solid transparent;
    text-align: center;
}

.cta-button.primary, .cta-button {
    background-color: var(--primary-color);
    color: var(--white-color);
    box-shadow: 0 4px 15px rgba(4, 120, 87, 0.2);
}

.cta-button.primary:hover, .cta-button:hover {
    background-color: #035c43;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(4, 120, 87, 0.3);
}

.cta-button.white-btn {
    background-color: var(--white-color);
    color: var(--primary-color) !important;
    border: 2px solid var(--white-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.cta-button.white-btn:hover {
    background-color: #f1f5f9;
    border-color: #f1f5f9;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}


.cta-button.secondary {
    background-color: transparent;
    color: var(--dark-color);
    border-color: var(--gray-color);
    box-shadow: none;
}

.cta-button.secondary:hover {
    background-color: var(--light-color);
    border-color: var(--dark-color);
    transform: translateY(-2px);
}

.cta-button:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 4px;
}

h1, h2, h3, h4 {
    color: var(--dark-color);
    line-height: 1.2;
    margin-bottom: 15px;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 1.6rem; text-align: center; margin-bottom: 25px; } /* Ajusté pour prendre moins de hauteur */
h3 { font-size: 1.3rem; margin-bottom: 10px; }
h4 { font-size: 1.1rem; }

section {
    padding: 40px 0; /* Réduit de 60 à 40px */
}

/* --- CE QUE NOUS FAISONS --- */
.actions-section {
    padding: 48px 0;
}

.actions-intro {
    max-width: 760px;
    margin: 0 auto 28px;
    text-align: center;
}

.actions-intro h2 {
    margin-bottom: 10px;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

#nous .actions-intro p {
    margin: 0;
    color: var(--text-color);
    font-size: 0.9rem;
    line-height: 1.55;
    text-align: center;
}

.home-actions-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.home-action-card {
    display: flex;
    min-width: 0;
    min-height: 156px;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 12px;
    background: var(--white-color);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.home-action-card:hover {
    border-color: rgba(15, 23, 42, 0.14);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    transform: translateY(-2px);
}

.home-action-card-icon {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 8px;
    background: rgba(4, 120, 87, 0.08);
}

.home-action-card-icon span {
    width: 13px;
    height: 13px;
    border-radius: 4px;
    background: var(--primary-color);
}

.home-action-card h3 {
    margin: 0;
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
}

#nous .home-action-card p {
    margin: 0;
    color: var(--text-color);
    font-size: 0.82rem;
    line-height: 1.48;
    text-align: left;
}

.home-action-card-accompagnement .home-action-card-icon {
    background: rgba(37, 99, 235, 0.08);
}

.home-action-card-accompagnement .home-action-card-icon span {
    background: var(--secondary-color);
}

.home-action-card-accompagnement h3 {
    color: var(--secondary-color);
}

.home-action-card-lien .home-action-card-icon {
    background: rgba(249, 115, 22, 0.1);
}

.home-action-card-lien .home-action-card-icon span {
    background: var(--accent-color);
}

.home-action-card-lien h3 {
    color: var(--accent-color);
}

.home-action-card-quotidien .home-action-card-icon {
    background: rgba(139, 92, 246, 0.1);
}

.home-action-card-quotidien .home-action-card-icon span {
    background: #8b5cf6;
}

.home-action-card-quotidien h3 {
    color: #8b5cf6;
}

.actions-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 14px;
    background: var(--white-color);
}

#nous .actions-cta p {
    max-width: 660px;
    margin: 0;
    color: var(--text-color);
    font-size: 0.82rem;
    line-height: 1.5;
    text-align: left;
}

.actions-cta p strong {
    color: var(--dark-color);
}

.actions-cta-buttons {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
}

.actions-cta .cta-button,
.actions-cta .hero-secondary-btn {
    margin: 0;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.actions-cta .hero-secondary-btn {
    border-color: rgba(15, 23, 42, 0.16);
    background: var(--white-color);
    color: var(--dark-color);
}

@media (max-width: 900px) {
    .home-actions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 560px) {
    .actions-section {
        padding: 40px 0;
    }

    /* Les rails `.mobile-rail` sont définis tout en bas du fichier : ils doivent
       passer APRÈS les grilles qu'ils surchargent. Voir « Rails à défilement
       latéral ». */

    .home-action-card {
        min-height: 0;
    }

    .actions-cta-buttons {
        width: 100%;
        flex-direction: column;
    }

    .actions-cta .cta-button,
    .actions-cta .hero-secondary-btn {
        justify-content: center;
        width: 100%;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-action-card {
        transition: none;
    }
}

/* --- EN-TÊTE DE PAGE STYLE BOUTIQUE (Standard Global) --- */
.page-hero {
    padding: 15px 0 25px;
    background-color: var(--white-color);
}

.hero-encapsulated {
    background: linear-gradient(135deg, rgba(4, 120, 87, 0.05) 0%, rgba(4, 120, 87, 0.01) 100%);
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
    border: 1px solid rgba(4, 120, 87, 0.06);
}

.hero-encapsulated h1 {
    color: var(--dark-color);
    margin-bottom: 6px;
    font-size: 2.1rem;
}

.hero-encapsulated .subtitle {
    color: var(--text-color);
    max-width: 650px;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.4;
    font-style: italic;
    opacity: 1;
}

/* Utilitaires de section (pour les sous-titres avec barre verte comme sur Boutique) */
.section-header-bar {
    margin-bottom: 30px;
    text-align: left;
    border-left: 4px solid var(--primary-color);
    padding-left: 18px;
}

.section-header-bar h2,
.section-header-bar h3 {
    margin: 0 0 8px 0;
    text-align: left;
    color: var(--dark-color);
}

.section-header-bar p {
    margin: 0;
    color: var(--text-color);
    font-size: 1.05rem;
}

/* --- HEADER --- */
#main-header {
    background: rgba(255, 255, 255, 0.85); /* Glassmorphism background */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05); /* Softer shadow */
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    transition: var(--transition-smooth);
}

#main-header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 65px; /* Réduit pour gagner de la place verticale */
    position: relative;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
    text-decoration: none;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 15px;
    white-space: nowrap;
}

.logo-text-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.3;
    white-space: nowrap;
}

.logo-text-main {
    font-size: 0.95rem; /* Taille plus discrète et élégante */
    font-weight: 700;
    color: #1a202c; /* Gris très sombre proche du motif de l'image étudiée */
    letter-spacing: 0.2px;
}

.logo-text-sub {
    font-size: 0.8rem;
    font-weight: 400;
    color: #64748b; /* Gris doux pour le sous-titre */
}

.logo img {
    height: 40px; /* Réduit proportionnellement à la nav */
    display: block;
}

/* --- DESKTOP NAVIGATION STRUCTURE (3-ZONE GRID) --- */
@media (min-width: 901px) {
    #main-header nav {
        display: grid;
        grid-template-columns: 1.2fr auto 1.2fr;
        align-items: center;
        height: 65px;
        position: relative;
    }

    .logo {
        justify-self: start;
    }

    .nav-content {
        display: contents; /* Removes the nav-content wrapper box to lay out children in the grid directly */
    }

    .nav-links {
        display: flex;
        list-style: none;
        align-items: center;
        justify-self: center;
        margin: 0;
    }

    .header-actions {
        display: flex;
        align-items: center;
        gap: 15px;
        justify-self: end;
        margin-left: 0;
    }
}

/* --- INTERMEDIATE NARROW DESKTOP / TABLET STRATEGY --- */
@media (min-width: 901px) and (max-width: 1200px) {
    .logo-text-group {
        display: none !important; /* Hide long name of association to save huge space */
    }

    .nav-links li {
        margin: 0 6px; /* Narrower gaps between menu items */
    }

    .nav-links a {
        font-size: 0.9rem; /* Slightly smaller text size */
    }

    .nav-links li a.nav-btn-adherer {
        padding: 6px 14px; /* More compact CTA button */
    }

    .header-actions {
        gap: 10px; /* Narrower gaps for action buttons */
    }
}

.nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
    margin-left: 30px;
}

.nav-links {
    display: flex;
    list-style: none;
    align-items: center;
    margin: 0 auto; /* Center links in the remaining space */
}

.nav-links li {
    margin: 0 10px;
    position: relative;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    color: var(--dark-color);
    font-weight: bold;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: var(--primary-color);
}

/* Styling du bouton Adhérer au centre de la navbar */
.nav-links li a.nav-btn-adherer {
    background-color: var(--accent-color);
    color: var(--white-color) !important;
    padding: 8px 22px;
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25);
    display: inline-block;
    transition: var(--transition-smooth);
}

.nav-links li a.nav-btn-adherer:hover {
    background-color: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(249, 115, 22, 0.35);
    color: var(--white-color) !important;
}

/* Header Actions (Button + Social) */
.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto; /* Push to the right */
}

.header-social-link {
    color: var(--dark-color);
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 50%;
    background-color: transparent;
}

.header-social-link:hover {
    transform: translateY(-2px) scale(1.1);
    background-color: rgba(225, 48, 108, 0.08);
    box-shadow: 0 4px 10px rgba(225, 48, 108, 0.2);
}

.instagram-icon {
    width: 28px;
    height: 28px;
    transition: var(--transition-smooth);
}

/* Dropdown */
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--white-color);
    min-width: 200px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    z-index: 1100;
    list-style: none;
    padding: 10px 0;
    border-radius: var(--border-radius);
}

.dropdown-content a {
    color: var(--dark-color);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: var(--light-color);
}

.dropdown:hover .dropdown-content {
    display: block;
}

.burger-menu {
    display: none;
    font-size: 2rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--dark-color);
    z-index: 20;
}

/* --- HERO --- */
.hero-bottom-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
    flex-wrap: wrap; /* S'adapte sur mobile */
}

.hero-benefits {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 0; /* Marge réinitialisée, gérée par hero-bottom-row */
    font-weight: 600;
    font-size: 0.9rem;
}

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.tile {
    display: flex;
    flex-direction: column;
    background-color: var(--white-color);
    padding: 25px;
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--text-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--light-color);
    text-align: center;
}

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

.tile-icon {
    color: var(--primary-color);
    margin-bottom: 15px;
}

.tile-icon svg {
    width: 32px;
    height: 32px;
}

.tile p {
    flex-grow: 1;
    margin-bottom: 15px;
}

.tile-cta {
    font-weight: bold;
    color: var(--primary-color);
    align-self: center;
}

.tile h4 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

#hero {
    background-color: var(--white-color);
    color: var(--dark-color);
    padding: 30px 0; /* Réduction drastique du padding (auparavant 60) */
}

#hero .hero-container {
    display: flex;
    align-items: center;
    gap: 40px; /* Plus compact (auparavant 50) */
    text-align: left;
    flex-wrap: wrap; /* Sur mobile on passe sous forme de colonne */
}

.hero-content {
    flex: 1.2;
    min-width: 300px;
}

.hero-badge {
    display: inline-block;
    background-color: rgba(4, 120, 87, 0.1); /* Vert très clair */
    color: var(--primary-color);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pill-badge {
    display: flex;
    align-items: center;
    background-color: transparent;
    padding: 2px 0;
    font-weight: 500;
    font-size: 1rem;
    color: var(--dark-color);
}

.hero-secondary-btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--dark-color);
    font-weight: 600;
    padding: 10px 20px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 20px;
    transition: all 0.3s ease;
    background-color: transparent;
}

.hero-secondary-btn:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background-color: rgba(4, 120, 87, 0.05); /* Léger fond vert au survol */
    text-decoration: none;
}

.hero-image-wrapper {
    flex: 1; /* Augmenté pour donner plus de place et d'importance visuelle à l'image */
    min-width: 300px;
    max-height: 400px; /* Augmenté de 320px à 400px pour éviter que l'encart ne cache trop la photo */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    transform: rotate(2deg);
    transition: transform 0.3s ease;
}

.hero-image-wrapper:hover {
    transform: translateY(-5px) rotate(0);
}

.hero-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- COMPOSANT BANNIÈRE ÉVÉNEMENT HERO (PREMIUM & RESPONSIVE) --- */
.hero-event-banner {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 10; /* Assure un format paysage stable sur tous les écrans */
    border-radius: inherit; /* Hérite des 20px de .hero-image-wrapper */
    overflow: hidden;
}

.hero-event-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Micro-animation de zoom au survol de l'image */
.hero-image-wrapper:hover .hero-event-img {
    transform: scale(1.05);
}

.hero-event-overlay {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.92); /* Blanc semi-transparent */
    backdrop-filter: blur(12px); /* Flou d'arrière-plan moderne */
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: 0 10px 25px rgba(30, 41, 59, 0.12);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Micro-animation de l'encart au survol */
.hero-image-wrapper:hover .hero-event-overlay {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(30, 41, 59, 0.18);
}

.hero-event-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.hero-event-tag {
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--primary-color); /* Vert émeraude profond */
    letter-spacing: 0.6px;
}

.hero-event-date {
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b; /* Slate doux */
}

.hero-event-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dark-color);
    margin: 4px 0 0 0;
    line-height: 1.25;
}

.hero-event-btn {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--white-color) !important;
    padding: 8px 18px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    transition: var(--transition-smooth);
    border: 2px solid var(--primary-color);
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(4, 120, 87, 0.15);
}

.hero-event-btn:hover {
    background-color: #035c43;
    border-color: #035c43;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(4, 120, 87, 0.25);
    color: var(--white-color) !important;
}

/* --- RESPONSIVITÉ MOBILE DU COMPOSANT --- */
@media (max-width: 576px) {
    .hero-event-overlay {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px;
        bottom: 8px;
        left: 8px;
        right: 8px;
        border-radius: 12px;
    }
    
    .hero-event-info {
        text-align: center;
    }
    
    .hero-event-title {
        font-size: 0.95rem;
    }
    
    .hero-event-btn {
        width: 100%;
        padding: 8px 12px;
    }
}

#hero h1 {
    color: var(--primary-color);
    font-size: 2.2rem;
    margin-bottom: 15px;
}

.subtitle {
    font-size: 1rem; /* Réduit pour gagner de la place */
    margin-bottom: 5px;
    font-style: italic;
    opacity: 0.9;
}

.cta-group a {
    margin: 0 10px;
}

/* --- SECTIONS --- */
#nous p, #activites > p {
    text-align: left;
    margin: 0 0 20px 0;
    line-height: 1.6;
}

/* Z-pattern Layout (Texte + Image ou Bento) */
.section-split {
    display: flex;
    gap: 40px;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.section-split-text {
    flex: 1;
    min-width: 300px;
}

.section-split-image {
    flex: 1;
    min-width: 300px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--box-shadow);
}
.section-split-image img { width: 100%; height: auto; display: block; }

/* Bento Style pour Activités */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    flex: 1;
    min-width: 300px;
}
.bento-item {
    border-radius: 16px;
    overflow: hidden;
}
.bento-item img {
    width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s;
}
.bento-item:hover img {
    transform: scale(1.05);
}

/* Images dans les Card Banners */
/* Classe actuellement inutilisée (aucune référence dans les HTML ni les JS au
   27/08/2026). Conservée mais corrigée : la marge négative doit valoir exactement
   le `padding` de `.card` (20 px), sinon l'image déborde de 5 px de chaque côté.
   L'ancienne valeur (-25 px / +50 px) compensait un padding de 25 px qui n'existe
   plus. À supprimer lors d'une passe de nettoyage post-lancement si elle reste
   inutilisée. */
.card-header-img {
    height: 200px;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    margin: -20px -20px 20px -20px; /* = padding de .card */
    width: calc(100% + 40px);
}
.card-header-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* LOGEMENT */
.logement-content {
    display: flex;
    gap: 30px;
    align-items: center;
}
.logement-info {
    flex: 1;
}

/* Vignettes des internats sur la page d'accueil */
.home-housing-section {
    background:
        radial-gradient(circle at 0 0, rgba(4, 120, 87, 0.1), transparent 34%),
        var(--section-alt-bg);
}

/* Alternance de fond plus marquée sur les sections de la landing */
.home-alt-bg {
    background:
        radial-gradient(circle at 0 0, rgba(4, 120, 87, 0.1), transparent 34%),
        var(--section-alt-bg);
}

.home-housing-intro {
    max-width: 720px;
    margin: 0 auto 28px;
    text-align: center;
}

.home-housing-eyebrow {
    margin-bottom: 6px;
    color: var(--primary-color);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.home-housing-intro h2 {
    margin-bottom: 10px;
}

.home-housing-intro > p:last-child {
    color: #64748b;
    font-size: 1.05rem;
}

.home-internats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 16px;
}

.home-internat-tile {
    position: relative;
    display: block;
    min-height: 230px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: #dbe4e1;
    color: var(--white-color);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
    isolation: isolate;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.home-internat-tile::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent 34%, rgba(8, 23, 19, 0.82) 100%);
    content: "";
}

.home-internat-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    transition: transform 0.35s ease;
}

.home-internat-tile-content {
    position: absolute;
    right: 14px;
    bottom: 13px;
    left: 14px;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.home-internat-tile h3 {
    margin: 0 0 3px;
    color: inherit;
    font-size: 1.02rem;
    line-height: 1.2;
}

.home-internat-city {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.25;
}

.home-internat-arrow {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    font-size: 1rem;
    line-height: 1;
    backdrop-filter: blur(5px);
}

.home-internat-tile:hover,
.home-internat-tile:focus-visible {
    color: var(--white-color);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
    transform: translateY(-3px);
}

.home-internat-tile:hover img,
.home-internat-tile:focus-visible img {
    transform: scale(1.045);
}

.home-internat-tile:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 3px;
}

.home-internats-fallback {
    grid-column: 1 / -1;
    padding: 24px;
    border: 1px dashed rgba(4, 120, 87, 0.3);
    border-radius: 14px;
    color: var(--primary-color);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.home-housing-footer {
    margin-top: 24px;
    text-align: center;
}

.home-housing-all-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-color);
    font-weight: 700;
    text-decoration: none;
}

.home-housing-all-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (min-width: 1000px) {
    .home-internats-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .home-internat-tile {
        min-height: 215px;
    }
}

@media (max-width: 620px) {
    .home-internats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .home-internat-tile {
        min-height: 190px;
        border-radius: 12px;
    }

    .home-internat-tile-content {
        right: 11px;
        bottom: 11px;
        left: 11px;
    }

    .home-internat-tile h3 {
        font-size: 0.9rem;
    }

    .home-internat-city {
        font-size: 0.7rem;
    }

    .home-internat-arrow {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-internat-tile,
    .home-internat-tile img {
        transition: none;
    }
}

.social-links a {
    margin-right: 15px;
    text-decoration: none;
    color: var(--primary-color);
    font-weight: bold;
}

/* --- FOOTER --- */
footer {
    background: #1E293B; /* Toujours sombre, y compris en mode nuit : ne pas utiliser --dark-color qui s'inverse en dark mode */
    color: #F8FAFC;
    padding: 40px 0 20px 0;
}

/* --- Section Contact (accueil) --- */
.home-contact-section {
    padding: 40px 0;
    background: var(--white-color);
}

.home-contact-intro {
    max-width: 640px;
    margin: 0 auto 36px;
    text-align: center;
}

.home-contact-eyebrow {
    margin-bottom: 6px;
    color: var(--primary-color);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.home-contact-intro h2 {
    margin-bottom: 10px;
}

.home-contact-intro > p:last-child {
    color: #64748b;
    font-size: 1.05rem;
}

.home-contact-reasons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 40px;
    max-width: 760px;
    margin: 0 auto 40px;
}

.home-contact-reason {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.home-contact-reason-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    background: rgba(4, 120, 87, 0.08);
    color: var(--primary-color);
}

.home-contact-reason-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.2;
}

@media (max-width: 640px) {
    .home-contact-reasons {
        grid-template-columns: 1fr;
    }
}

.home-contact-reason h3 {
    margin-bottom: 2px;
    font-size: 1rem;
}

.home-contact-reason p {
    margin: 0;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
}

.home-contact-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 36px;
    padding-top: 28px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.home-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--dark-color);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}

.home-contact-icon {
    font-style: normal;
    color: var(--primary-color);
}

a.home-contact-email {
    text-decoration: none;
    transition: color 0.2s ease;
}

a.home-contact-email:hover,
a.home-contact-email:focus-visible {
    color: var(--primary-color);
}

@media (max-width: 700px) {
    .home-contact-details {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
}

.footer-feedback {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 38px;
    padding: 24px 26px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background:
        radial-gradient(circle at 85% 0%, rgba(249, 115, 22, 0.2), transparent 28%),
        linear-gradient(135deg, rgba(6, 78, 59, 0.98), rgba(4, 120, 87, 0.92));
}

.footer-feedback-message {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-feedback-icon {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.1);
    color: #fed7aa;
    font-family: Arial, sans-serif;
    font-size: 1.25rem;
}

.footer-feedback-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.footer-feedback-kicker {
    color: #fdba74;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.footer-feedback-copy strong {
    color: #ffffff;
    font-size: 1.2rem;
}

.footer-feedback-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.88rem;
}

.footer-feedback-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 11px 18px;
    border-radius: 999px;
    background: #ffffff;
    color: #065f46;
    font-size: 0.88rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease;
}

.footer-feedback-link:hover,
.footer-feedback-link:focus-visible {
    background: #fff7ed;
    color: #065f46;
    transform: translateY(-2px);
}

.footer-feedback-link:focus-visible {
    outline: 3px solid #fb923c;
    outline-offset: 3px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}

.footer-col h4 {
    color: #ffffff; /* Fixe : le footer reste toujours sombre, y compris en mode nuit */
    margin-bottom: 15px;
}

.footer-col ul {
    list-style: none;
}
.footer-col ul li {
    margin-bottom: 10px;
}
.footer-col a {
    color: #F8FAFC; /* Fixe : le footer reste toujours sombre, y compris en mode nuit */
    text-decoration: none;
    transition: color 0.3s;
}
.footer-col a:hover {
    color: var(--accent-color);
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid rgba(248, 250, 252, 0.15);
    padding-top: 20px;
    font-size: 0.9rem;
}

.footer-bottom a {
    color: #F8FAFC; /* Fixe : le footer reste toujours sombre, y compris en mode nuit */
}

@media (max-width: 700px) {
    .footer-feedback {
        align-items: stretch;
        flex-direction: column;
        padding: 22px;
    }

    .footer-feedback-link {
        width: 100%;
    }

    .footer-feedback-message {
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .footer-feedback-link {
        transition: none;
    }
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }

    .burger-menu {
        display: block;
    }
    
    .nav-content {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 65px;
        left: 0;
        width: 100%;
        /* Annule le `margin-left: 30px` de la règle de base : combiné à
           `position: absolute` + `width: 100%`, il poussait le menu 30 px
           au-delà du bord droit et rendait toutes les pages scrollables
           latéralement sur mobile (bug constaté le 27/08/2026). */
        margin-left: 0;
        background-color: var(--white-color);
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        visibility: hidden;
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        max-height: calc(100vh - 65px);
        overflow-y: auto;
    }
    
    .nav-content.active {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .nav-links {
        flex-direction: column;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .nav-left, .nav-right {
        margin: 0;
    }

    .nav-links li {
        text-align: center;
        padding: 15px 0;
        border-bottom: 1px solid var(--light-color);
        display: block;
        width: 100%;
    }
    
    .nav-links li a.nav-btn-adherer {
        margin: 5px auto;
        display: inline-block;
    }
    
    .dropdown-content {
        position: static;
        box-shadow: none;
        background-color: var(--light-color);
        padding: 5px 0;
    }
    
    .dropdown-content a {
        text-align: center;
        padding: 10px 0;
    }
    
    .header-actions {
        margin: 20px 0;
        justify-content: center;
        width: 100%;
        margin-left: 0;
        flex-direction: column;
        gap: 15px;
    }

    .nav-contact-btn {
        margin: 5px auto;
        display: inline-block;
    }

    #hero {
        height: auto;
        padding: 80px 0;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }
}

/* Page Adhesion */
#adhesion .card ul {
    list-style: '✔ ';
    padding-left: 20px;
}

#adhesion .card ul li {
    margin-bottom: 10px;
}

.price {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--primary-color);
    margin: 20px 0;
    text-align: center;
}

.small-text {
    text-align: center;
    margin: 10px 0;
}

/* Page Equipe */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 35px;
    margin-top: 25px;
}

.team-card {
    background: var(--white-color);
    border-radius: 24px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.05);
    text-align: center;
    padding: 45px 30px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.team-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1.5px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.team-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -15px rgba(4, 120, 87, 0.12);
    border-color: transparent;
}

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

/* Avatar container with hover glow */
.team-avatar-container {
    position: relative;
    width: 152px;
    height: 152px;
    margin-bottom: 25px;
    z-index: 1;
}

.team-avatar-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(4, 120, 87, 0.1), rgba(37, 99, 235, 0.1));
    padding: 4px;
    transition: all 0.5s ease;
}

.team-card:hover .team-avatar-ring {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    transform: rotate(180deg);
    box-shadow: 0 0 20px rgba(4, 120, 87, 0.2);
}

.team-card img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #ffffff;
    background: #f8fafc;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.team-card h3 {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--dark-color);
    margin-bottom: 4px;
}

.team-card h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-color);
    background: rgba(4, 120, 87, 0.06);
    padding: 4px 16px;
    border-radius: 50px;
    margin-bottom: 20px;
    display: inline-block;
}

.team-card .role {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #64748b;
    margin-bottom: 25px;
    flex-grow: 1;
}

/* Premium pill contact button */
.team-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 50px;
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    width: 100%;
    max-width: 180px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.team-contact-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.team-contact-btn:hover {
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(4, 120, 87, 0.25);
}

.team-contact-btn:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

.team-contact-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    transition: transform 0.3s ease;
}

.team-contact-btn:hover svg {
    transform: translateX(2px) scale(1.05);
}

/* Premium Segmented Control for Year Selector */
.team-selector-section {
    padding: 25px 0 15px;
    text-align: center;
}

.team-selector-wrapper {
    display: inline-flex;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.06);
    padding: 6px;
    border-radius: 50px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.03);
    gap: 5px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: var(--transition-smooth);
}

.team-tab-btn {
    padding: 12px 28px;
    border: none;
    border-radius: 50px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    color: #475569;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
}

.team-tab-btn.active {
    background: var(--primary-color) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(4, 120, 87, 0.2);
}

.team-tab-btn:not(.active):hover {
    color: var(--primary-color) !important;
    background: rgba(4, 120, 87, 0.06) !important;
}

.info-block {
    margin-top: 60px;
    padding: 30px;
    background-color: var(--light-color);
    border-radius: var(--border-radius);
    text-align: center;
}

.info-block h3 {
    margin-bottom: 15px;
}

/* Page Logements */
.timeline {
    margin: 20px 0;
}

.timeline-item {
    margin-bottom: 10px;
}

.internats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
    gap: 30px;
    margin-top: 30px;
}

#logements .card ul {
    list-style: '✔ ';
    padding-left: 20px;
    margin-top: 10px;
}

/* Page Hopitaux */
.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0 40px 0;
}

.chip {
    background-color: var(--light-color);
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
}

.accordion {
    max-width: 800px;
    margin: 0 auto;
}

.accordion-item {
    background: var(--white-color);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.accordion-header {
    width: 100%;
    text-align: left;
    padding: 20px 25px;
    background: transparent;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--dark-color);
    position: relative;
    transition: background 0.2s ease;
    font-family: inherit;
}

/* Masquer les éventuels SVG inline utilisés précédemment */
.accordion-header svg.accordion-icon {
    display: none;
}

.accordion-header::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: 15px;
}

.accordion-header.active {
    border-bottom: 1px solid rgba(0,0,0,0.04);
    color: var(--primary-color);
}

.accordion-header.active::after {
    transform: rotate(180deg);
}

.accordion-header:hover {
    background: rgba(0,0,0,0.01);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease-out;
}

/* Deep link vers un panneau — representation.html#mobilite-interchu & co.
   Ajouté le 14/09/2026 : les chips de la home pointent vers des ancres
   d'accordéon, et on atterrissait en haut de page, panneau fermé.

   1. `scroll-margin-top` : le saut d'ancre natif du navigateur ne connaît pas
      la hauteur du header sticky et cale la cible sous lui. Corrigé ici, donc
      valable même avant que le JS ne tourne.
   2. `:target` ouvre le panneau SANS JavaScript. C'est un filet : si pages.js
      est lent, en cache, ou pas chargé, l'ancre reste utilisable.

   Le filet est désactivé dès que pages.js signale qu'il a pris la main
   (classe `accordions-ready` sur <html>). Sans ce garde-fou, le panneau ciblé
   deviendrait impossible à refermer : le JS retire sa max-height inline, et la
   règle `:target` le rouvrirait aussitôt. */
.accordion-item[id] {
    scroll-margin-top: 96px;
}

html:not(.accordions-ready) .accordion-item[id]:target > .accordion-content {
    max-height: none;
}

.accordion-content p {
    padding: 20px 25px;
    margin: 0;
    color: var(--text-color);
    line-height: 1.6;
    font-size: 1rem;
}

.accordion-content .accordion-content-inner {
    padding: 20px 25px;
    color: var(--text-color);
    line-height: 1.6;
    font-size: 1rem;
}
.accordion-content .accordion-content-inner p {
    padding: 0;
    margin-bottom: 15px;
}
.accordion-content .accordion-content-inner p:last-child {
    margin-bottom: 0;
}

/* Page Nancy */
.checklist {
    list-style: '☐ ';
    padding-left: 20px;
    columns: 2;
}

/* Page Integration */
/* Conteneur pour centrer proprement n'importe quel bouton */
.cta-center {
    text-align: center;
    margin-top: 30px; /* Réduit de 40 à 30 pour condenser */
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Barre de recherche */
.search-bar {
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
    border: 1px solid var(--gray-color);
    border-radius: var(--border-radius);
    margin: 20px 0;
}

/* Fil d'Ariane */
.breadcrumbs {
    margin-bottom: 25px;
    font-size: 0.9rem;
    color: var(--gray-color);
}

.breadcrumbs a {
    color: var(--primary-color);
    text-decoration: none;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}


/* =========================
   Organigramme (AMIN)
   ========================= */
.org {
  padding: 60px 0;
  background: radial-gradient(circle at 10% 20%, rgba(4, 120, 87, 0.02) 0%, rgba(255, 255, 255, 1) 90%);
}

.org__container {
  width: min(1200px, 92%);
  margin: 0 auto;
}

.org__header {
  text-align: center;
  margin-bottom: 45px;
}

.org__title {
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 800;
  color: var(--dark-color);
  letter-spacing: -0.03em;
  margin: 0 0 10px;
}

.org__subtitle {
  margin: 10px auto 0;
  max-width: 65ch;
  color: #64748b;
  line-height: 1.6;
  font-size: 1.05rem;
}

.org__block {
  margin-top: 30px;
}

.org__blockTitle {
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dark-color);
  margin: 0 0 25px;
  border-bottom: 2px solid rgba(15, 23, 42, 0.05);
  padding-bottom: 10px;
}

/* Bureau row */
.org__row {
  display: grid;
  gap: 14px;
}

.org__row--bureau {
  grid-template-columns: repeat(12, 1fr);
}

.personCard {
  grid-column: span 4;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
}

.personCard:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
  transition: 160ms ease;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #0f172a;
  background: linear-gradient(135deg, #f3f4f6, #ffffff);
  border: 1px solid #e5e7eb;
  flex: 0 0 auto;
}

.personCard__role {
  margin: 0;
  font-weight: 700;
  color: #0f172a;
  font-size: 14px;
}

.personCard__name {
  margin: 2px 0 0;
  font-weight: 800;
  color: #111827;
}

.personCard__meta {
  margin: 2px 0 0;
  color: #6b7280;
  font-size: 14px;
}

/* Poles grid */
.org__grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(12, 1fr);
}

.poleCard {
  grid-column: span 6;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 24px;
  box-shadow: 0 4px 20px -10px rgba(0, 0, 0, 0.03);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.poleCard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--pole-accent, var(--primary-color));
  transition: height 0.3s ease;
}

.poleCard:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px -10px rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.1);
}

.poleCard:hover::before {
  height: 6px;
}

.poleCard__header {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  padding-bottom: 15px;
}

.pole-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--pole-accent-light, rgba(4, 120, 87, 0.08));
  color: var(--pole-accent, var(--primary-color));
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.poleCard:hover .pole-icon-wrapper {
  transform: scale(1.1) rotate(5deg);
  background: var(--pole-accent, var(--primary-color));
  color: white;
}

.pole-icon-wrapper svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.poleCard__title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.poleCard__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--dark-color);
  letter-spacing: -0.01em;
}

.poleCard__desc {
  margin: 0;
  color: #64748b;
  font-size: 0.9rem;
  line-height: 1.4;
}

.poleCard__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.poleCard__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.02);
  transition: background 0.2s ease;
  line-height: 1.5;
  color: var(--dark-color);
}

.poleCard__list li:hover {
  background: rgba(15, 23, 42, 0.04);
}

.poleCard__member-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 50px;
  background: var(--pole-accent-light, rgba(4, 120, 87, 0.08));
  border: 1px solid var(--pole-accent-border, rgba(4, 120, 87, 0.15));
  color: var(--pole-accent, var(--primary-color));
  margin-right: 0;
}

.poleCard__list li span.name {
  font-weight: 600;
  color: var(--dark-color);
  font-size: 0.95rem;
}

.muted {
  color: #64748b;
  font-size: 0.85rem;
  font-weight: 500;
}

/* Accent Colors by Pole */
.pole-representation {
  --pole-accent: #047857;
  --pole-accent-light: rgba(4, 120, 87, 0.08);
  --pole-accent-border: rgba(4, 120, 87, 0.15);
}
.pole-communication {
  --pole-accent: #2563EB;
  --pole-accent-light: rgba(37, 99, 235, 0.08);
  --pole-accent-border: rgba(37, 99, 235, 0.15);
}
.pole-evenementiel {
  --pole-accent: #F97316;
  --pole-accent-light: rgba(249, 115, 22, 0.08);
  --pole-accent-border: rgba(249, 115, 22, 0.15);
}
.pole-sport-culture {
  --pole-accent: #8B5CF6;
  --pole-accent-light: rgba(139, 92, 246, 0.08);
  --pole-accent-border: rgba(139, 92, 246, 0.15);
}
.pole-vie-internat {
  --pole-accent: #06B6D4;
  --pole-accent-light: rgba(6, 182, 212, 0.08);
  --pole-accent-border: rgba(6, 182, 212, 0.15);
}
.pole-finances {
  --pole-accent: #10B981;
  --pole-accent-light: rgba(16, 185, 129, 0.08);
  --pole-accent-border: rgba(16, 185, 129, 0.15);
}

/* Responsive */
@media (max-width: 920px) {
  .personCard { grid-column: span 6; }
  .poleCard { grid-column: span 12; }
}

@media (max-width: 560px) {
  .personCard { grid-column: span 12; }
  .org { padding: 56px 0; }
}

/* --- CAROUSEL COMPONENTS --- */
.carousel {
    position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden;
    padding: 10px 0; /* Espace pour les ombres des slides */
}

.carousel-track {
    display: flex;
    height: 100%;
    align-items: center;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.carousel-slide {
    flex: 0 0 85%;
    height: 100%;
    margin-right: 15px; /* Espace entre les photos */
    transition: transform 0.5s ease, opacity 0.5s ease;
    opacity: 0.5;
    transform: scale(0.92);
}

.carousel-slide.active {
    opacity: 1;
    transform: scale(1);
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: var(--dark-color);
    display: block;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    /* Force GPU hardware acceleration and smooth antialiasing for downscaling */
    will-change: transform;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: auto;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    color: var(--dark-color);
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.carousel-btn:hover {
    background: rgba(255, 255, 255, 1);
    color: var(--primary-color);
    transform: translateY(-50%) scale(1.1);
}

.carousel-btn.prev {
    left: 10px;
}

.carousel-btn.next {
    right: 10px;
}

@media (max-width: 768px) {
    .carousel {
        height: 250px;
    }

    /* Cible tactile portée au minimum recommandé de 44 px. */
    .carousel-btn {
        width: 44px;
        height: 44px;
    }

    .carousel-btn.prev {
        left: 6px;
    }

    .carousel-btn.next {
        right: 6px;
    }
}

/* --- HERO IMMERSIF (Landing Page) --- */
.hero-immersif {
    position: relative;
    overflow: hidden;
    padding: 120px 0 80px;
}

.hero-immersif-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: #f9f6f3;
    overflow: hidden;
}

.hero-immersif-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Empêcher le placeholder d'être étiré démesurément et de déborder */
.hero-immersif-bg img[src*="image_a_venir"] {
    object-fit: contain;
    max-width: 600px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hero-immersif-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(14, 25, 45, 0.65) 0%, rgba(4, 120, 87, 0.55) 100%);
    z-index: 1;
}

.hero-immersif .hero-container {
    position: relative;
    z-index: 2;
}

/* Couleurs claires pour lisibilité sur fond sombre */
.hero-immersif h1 {
    color: #ffffff !important;
    font-weight: 800;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.35), 0 4px 20px rgba(0, 0, 0, 0.65);
    letter-spacing: -0.5px;
}

.hero-immersif .subtitle {
    color: rgba(255, 255, 255, 0.9) !important;
}

.hero-immersif .hero-badge {
    background-color: rgba(4, 120, 87, 0.25);
    border: 1px solid rgba(4, 120, 87, 0.4);
    color: var(--white-color);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.hero-immersif .pill-badge {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--white-color);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 6px 16px;
    border-radius: 12px;
}
.hero-immersif .pill-badge svg {
    color: var(--white-color) !important;
}

.hero-immersif .hero-secondary-btn {
    color: var(--white-color);
    border-color: rgba(255, 255, 255, 0.4);
}

.hero-immersif .hero-secondary-btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: var(--white-color);
}

.hero-immersif .hero-bottom-row > p {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* --- SECTION REJOINDRE L'AMIN & QUIZ INTERACTIF --- */
.join-section {
    padding: 80px 0;
    background: linear-gradient(135deg, rgba(4, 120, 87, 0.03) 0%, rgba(37, 99, 235, 0.03) 100%);
    border-top: 1px solid rgba(15, 23, 42, 0.05);
}

.join-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}

@media (min-width: 900px) {
    .join-grid {
        grid-template-columns: 1fr 1.1fr;
        gap: 60px;
    }
}

.join-text-content h2 {
    font-size: clamp(2rem, 3.5vw, 2.7rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--dark-color);
    margin-bottom: 20px;
    line-height: 1.2;
}

.join-text-content p {
    color: #475569;
    font-size: 1.12rem;
    line-height: 1.65;
    margin-bottom: 25px;
}

.join-benefits-mini {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin-bottom: 30px;
}

@media (min-width: 500px) {
    .join-benefits-mini {
        grid-template-columns: 1fr 1fr;
    }
}

.join-benefit-mini-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--dark-color);
}

.join-benefit-mini-item svg {
    color: var(--primary-color);
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.join-card-interactive {
    background: #ffffff;
    border-radius: 24px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.08);
    padding: 45px 40px;
    position: relative;
    overflow: hidden;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Quiz Screens Toggles & Transitions */
.quiz-screen {
    display: none;
    opacity: 0;
    transition: opacity 0.35s ease;
    width: 100%;
}

.quiz-screen.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 1;
}

#js-questions, .sim-step, .sim-options {
    width: 100%;
}

/* Option Cards - Compact version for inline rendering */
.sim-options {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
}

.sim-opt {
    padding: 18px 20px !important;
    border-radius: 16px !important;
    width: 100%;
}

.opt-icon {
    font-size: 26px !important;
    margin-bottom: 6px !important;
}

.opt-label {
    font-size: 1.05rem !important;
}

.opt-sub {
    font-size: 0.85rem !important;
}

.sim-q {
    font-size: 1.35rem !important;
    margin-bottom: 22px !important;
}

.sim-meta {
    font-size: 12px !important;
    margin-bottom: 10px !important;
}

.sim-dot {
    height: 6px !important;
}

.btn-start-matching {
    padding: 16px 36px !important;
    font-size: 1.05rem !important;
}

/* Theme overrides for inline elements */
[data-theme="dark"] .join-card-interactive {
    background: var(--white-color);
    border-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .sim-opt {
    background: var(--light-color);
    border-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .sim-opt:hover {
    border-color: var(--primary-color);
    background: rgba(16, 185, 129, 0.04);
}

[data-theme="dark"] .sim-opt.selected {
    border-color: var(--primary-color);
    background: rgba(16, 185, 129, 0.1);
}

[data-theme="dark"] .sim-dot {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .sim-dot.done {
    background: var(--primary-color);
}

/* --- AMIN MODALS SYSTEM --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 20px;
}

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

@keyframes modalPopUp {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(15px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-card {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 30px 70px -15px rgba(15, 23, 42, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.9),
                0 0 1px 1px rgba(15, 23, 42, 0.02);
    width: 100%;
    max-width: 640px;
    padding: 40px 35px;
    position: relative;
    transform: scale(0.96) translateY(15px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-overlay.active .modal-card {
    transform: scale(1) translateY(0);
    animation: modalPopUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-close-btn {
    position: absolute;
    top: 24px;
    right: 24px;
    background: rgba(15, 23, 42, 0.04);
    border: none;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #64748b;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10;
}

.modal-close-btn i {
    font-size: 16px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-close-btn:hover {
    background: rgba(15, 23, 42, 0.08);
    color: var(--dark-color);
    transform: scale(1.08);
}

.modal-close-btn:hover i {
    transform: rotate(90deg);
}

/* Modale Pôle Specifics */
.modal-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    padding-bottom: 20px;
    padding-right: 30px; /* space for close button */
}

.modal-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--pole-accent-light, rgba(4, 120, 87, 0.08));
    color: var(--pole-accent, var(--primary-color));
    flex-shrink: 0;
}

.modal-icon-box i {
    font-size: 24px;
}

.modal-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pole-accent, var(--primary-color));
    background: var(--pole-accent-light, rgba(4, 120, 87, 0.08));
    padding: 4px 12px;
    border-radius: 50px;
    margin-bottom: 4px;
}

.modal-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--dark-color);
    margin: 0;
}

.modal-body {
    overflow-y: auto;
    flex-grow: 1;
    padding-right: 12px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Custom Scrollbar for premium modals */
.modal-body::-webkit-scrollbar {
    width: 6px;
}
.modal-body::-webkit-scrollbar-track {
    background: transparent;
}
.modal-body::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.1);
    border-radius: 99px;
}
.modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.2);
}

.modal-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    margin-bottom: 10px;
}

.modal-desc-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #475569;
}

.modal-members-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal-member-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.02);
    border: 1px solid rgba(15, 23, 42, 0.04);
}

.modal-member-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-member-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 50px;
    background: #e2e8f0;
    color: #475569;
}

.modal-member-name {
    font-weight: 600;
    color: var(--dark-color);
    font-size: 0.92rem;
}

.modal-member-spe {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
}

.modal-footer {
    margin-top: 25px;
    border-top: 1px solid rgba(15, 23, 42, 0.05);
    padding-top: 20px;
    display: flex;
    justify-content: flex-end;
}

/* --- OFFICIAL SIMULATOR STYLES --- */
.sim-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sim-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    padding-bottom: 15px;
}

.sim-logo {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--primary-color);
    text-transform: uppercase;
}

.sim-annee {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    background: rgba(15, 23, 42, 0.04);
    padding: 3px 12px;
    border-radius: 20px;
}

.sim-progress {
    display: flex;
    gap: 6px;
    margin-bottom: 30px;
}

.sim-dot {
    height: 4px;
    border-radius: 2px;
    flex: 1;
    background: rgba(15, 23, 42, 0.05);
    transition: background 0.3s ease;
}

.sim-dot.done {
    background: var(--primary-color);
}

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

.sim-step {
    display: none;
    opacity: 0;
}

.sim-step.active {
    display: block;
    animation: stepFadeInUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.sim-meta {
    font-size: 11px;
    color: #94a3b8;
    margin-bottom: 8px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.sim-q {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark-color);
    margin-bottom: 25px;
    line-height: 1.45;
}

.sim-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 25px;
}

.sim-opt {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    padding: 18px;
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
}

.sim-opt:hover {
    border-color: var(--primary-color);
    background: rgba(4, 120, 87, 0.01);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px -5px rgba(15, 23, 42, 0.08);
}

.sim-opt.selected {
    border: 2px solid var(--primary-color);
    background: rgba(4, 120, 87, 0.04);
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 8px 24px -5px rgba(4, 120, 87, 0.12);
}

.opt-icon {
    font-size: 22px;
    color: #94a3b8;
    margin-bottom: 6px;
    transition: color 0.25s ease;
}

.sim-opt.selected .opt-icon {
    color: var(--primary-color);
}

.opt-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--dark-color);
    line-height: 1.35;
}

.opt-sub {
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.4;
}

.sim-opt.selected .opt-sub {
    color: var(--primary-color);
    opacity: 0.8;
}

.sim-next {
    background: var(--dark-color);
    color: #ffffff;
    border: none;
    border-radius: 50px;
    padding: 12px 24px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: none;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
    font-family: inherit;
}

.sim-next.visible {
    display: inline-flex;
}

.sim-next:hover {
    background: var(--primary-color);
    box-shadow: 0 4px 12px rgba(4, 120, 87, 0.2);
    transform: translateY(-1px);
}

/* Simulator Results */
.result-wrap {
    display: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.result-wrap.visible {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

@keyframes floatIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.result-icon-big {
    font-size: 52px;
    color: var(--primary-color);
    display: inline-block;
    margin-bottom: 12px;
    animation: floatIcon 3s ease-in-out infinite;
}

.result-badge {
    display: inline-block;
    background: rgba(4, 120, 87, 0.05);
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.result-pole {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--dark-color);
    margin-bottom: 8px;
    line-height: 1.3;
}

.result-tagline {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 20px;
}

.result-separator {
    height: 1px;
    background: rgba(15, 23, 42, 0.05);
    margin: 20px 0;
}

.result-section-title {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.result-members {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 25px;
}

.result-member {
    background: rgba(15, 23, 42, 0.02);
    border: 1px solid rgba(15, 23, 42, 0.04);
    border-radius: 10px;
    padding: 6px 14px;
    font-size: 0.85rem;
    color: #475569;
}

.result-member strong {
    color: var(--dark-color);
    font-weight: 600;
}

.result-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Modal responsive under 480px */
@media (max-width: 480px) {
    .sim-options {
        grid-template-columns: 1fr;
    }
    .modal-card, .join-card-interactive {
        padding: 25px 20px;
    }
    .modal-member-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .modal-member-spe {
        align-self: flex-end;
    }
}

/* Dynamic 'En savoir plus' button on pole cards */
.btn-savoir-plus {
    background: var(--pole-accent-light, rgba(4, 120, 87, 0.05));
    border: 1px solid var(--pole-accent-border, rgba(4, 120, 87, 0.15));
    color: var(--pole-accent, var(--primary-color));
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    margin-top: 15px;
    font-family: inherit;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.01);
}

.btn-savoir-plus:hover {
    background: var(--pole-accent, var(--primary-color));
    border-color: var(--pole-accent, var(--primary-color));
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--pole-accent-border, rgba(4, 120, 87, 0.15));
}

.btn-savoir-plus i {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-savoir-plus:hover i {
    transform: translateX(3px);
}

/* Premium CTA Button for Simulator */
.btn-start-matching {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    color: #ffffff !important;
    border: none;
    border-radius: 50px;
    padding: 14px 32px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 8px 24px rgba(4, 120, 87, 0.2);
    font-family: inherit;
    text-decoration: none;
}

.btn-start-matching:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 30px rgba(4, 120, 87, 0.32);
}

.btn-start-matching i {
    font-size: 16px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-start-matching:hover i {
    transform: translateX(4px);
}


/* ==========================================================================
   --- COMPOSANT DYNAMIQUE DE GRILLE DES ÉVÉNEMENTS PASSÉS ---
   ========================================================================== */
.past-events-section {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.past-events-title {
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.45rem;
    color: var(--dark-color);
    font-weight: 700;
    position: relative;
    padding-bottom: 12px;
}

.past-events-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--primary-color);
    border-radius: 2px;
}

.past-events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(285px, 100%), 1fr));
    gap: 30px;
    margin-top: 20px;
}

.event-card {
    display: flex;
    flex-direction: column;
    background: var(--white-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--box-shadow);
    border: 1px solid rgba(15, 23, 42, 0.04);
    transition: var(--transition-smooth);
}

.event-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--box-shadow-hover);
    border-color: rgba(4, 120, 87, 0.12);
}

.event-card-img-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9; /* Aspect-ratio 16/9 fixe demandé */
    overflow: hidden;
    background-color: var(--light-color);
    position: relative;
}

.event-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.event-card:hover .event-card-img {
    transform: scale(1.04);
}

.event-card-content {
    padding: 22px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.event-card-date {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-color); /* Orange vibrant */
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}

.event-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark-color);
    margin: 4px 0 10px 0;
    line-height: 1.35;
    transition: color 0.25s ease;
}

.event-card:hover .event-card-title {
    color: var(--primary-color);
}

.event-card-location {
    font-size: 0.85rem;
    color: #64748b;
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

/* --- PLACEHOLDER PREMIUM EN CAS D'IMAGE MANQUANTE --- */
.event-card-img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(4, 120, 87, 0.08) 0%, rgba(4, 120, 87, 0.02) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-weight: 600;
    gap: 8px;
    border-bottom: 1px solid rgba(4, 120, 87, 0.04);
}

.placeholder-icon {
    font-size: 2rem;
    filter: drop-shadow(0 2px 4px rgba(4, 120, 87, 0.15));
    animation: pulseIcon 3s ease-in-out infinite;
}

@keyframes pulseIcon {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.08); opacity: 1; }
}

.placeholder-text {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    opacity: 0.8;
}

/* --- CHARGEMENT & MESSAGES D'ERREURS --- */
.events-loading,
.events-empty,
.events-error {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    background: var(--light-color);
    border-radius: var(--border-radius);
    color: #64748b;
    font-weight: 500;
}

.events-error {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.03);
    border: 1px dashed rgba(239, 68, 68, 0.2);
}

/* --- DARK THEME OVERRIDES --- */
[data-theme="dark"] {
    --white-color: #0f172a; /* Slate 900 */
    --light-color: #1e293b; /* Slate 800 */
    --section-alt-bg: #1e293b; /* Slate 800, aligné sur --light-color en dark */
    --dark-color: #f8fafc;  /* Slate 50 */
    --text-color: #cbd5e1;  /* Slate 300 */
    --gray-color: #475569;  /* Slate 600 */
    --primary-color: #10b981; /* Vert émeraude plus lumineux pour le contraste */
    --box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    --box-shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] #main-header {
    background: rgba(15, 23, 42, 0.85); /* Slate 900 semi-transparent */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .logo-text-main {
    color: var(--dark-color);
}

[data-theme="dark"] .card {
    border-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .team-card {
    border-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .team-card img {
    border-color: var(--light-color);
    background: var(--light-color);
}

[data-theme="dark"] .partner-card-inst,
[data-theme="dark"] .partner-card-service {
    border-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .partner-card-inst:hover,
[data-theme="dark"] .partner-card-service:hover {
    border-color: rgba(16, 185, 129, 0.20);
}

[data-theme="dark"] .partner-benefit {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.30);
}

[data-theme="dark"] .partner-btn {
    background: var(--light-color);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--text-color);
}

[data-theme="dark"] .partner-btn:hover {
    background: rgba(16, 185, 129, 0.08);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

[data-theme="dark"] .sidebar-cta {
    border-color: rgba(255, 255, 255, 0.05);
    border-left: 4px solid var(--primary-color);
}

[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form textarea {
    background-color: var(--light-color);
    color: var(--dark-color);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .team-selector-wrapper {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .hero-event-overlay {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .nav-content {
    background-color: var(--white-color);
}

[data-theme="dark"] .nav-links li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- THEME TOGGLE BUTTON --- */
.header-theme-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--dark-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 50%;
    transition: var(--transition-smooth);
}

.header-theme-toggle:hover {
    background-color: rgba(0, 0, 0, 0.05);
    transform: scale(1.1);
}

[data-theme="dark"] .header-theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.header-theme-toggle svg {
    display: block;
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

/* Cartes d'internats (logements.html) — structure de base, absente jusqu'ici */
.internat-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--border-radius, 12px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: var(--white-color, #fff);
    max-width: 100%;
}

.internat-card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.internat-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    min-width: 0;
}

.internat-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.internat-title {
    min-width: 0;
    overflow-wrap: break-word;
}

.internat-city {
    color: #64748b;
    font-size: 0.85rem;
    margin: 4px 0 0;
}

.internat-meta-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.meta-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.meta-row svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.meta-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.internat-footer {
    display: flex;
    margin-top: 4px;
}

/* Meta values & labels styling pour cartes d'internats */
.meta-label {
    font-size: 0.73rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary-color);
    display: block;
    margin-bottom: 3px;
}

.meta-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dark-color);
    background: rgba(4, 120, 87, 0.04);
    border: 1px solid rgba(4, 120, 87, 0.12);
    padding: 4px 10px;
    border-radius: 6px;
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

.meta-value a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.meta-value a:hover {
    text-decoration: underline;
}

.meta-missing {
    color: #64748b !important;
    font-style: italic !important;
    background: rgba(100, 116, 139, 0.08) !important;
    border: 1px solid transparent !important;
    padding: 3px 10px !important;
    border-radius: 6px !important;
    font-size: 0.82rem !important;
    display: inline-block !important;
    width: max-content !important;
}

/* Style premium pour le bouton Rejoindre ce Pôle */
.btn-rejoindre-pole {
    background: var(--pole-accent, var(--primary-color));
    border: 1px solid var(--pole-accent, var(--primary-color));
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    margin-top: 15px;
    font-family: inherit;
    box-shadow: 0 4px 12px var(--pole-accent-border, rgba(4, 120, 87, 0.15));
}

.btn-rejoindre-pole:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--pole-accent-border, rgba(4, 120, 87, 0.35));
    opacity: 0.95;
    text-decoration: none;
}

.btn-rejoindre-pole i {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-rejoindre-pole:hover i {
    transform: translateX(3px);
}

/* --- Actions Récentes Section (Shared from representation.html) --- */
.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 25px;
}
.action-card {
    display: flex;
    flex-direction: column;
    background: var(--white-color);
    border-radius: var(--border-radius);
    padding: 20px;
    border: 1px solid rgba(15, 23, 42, 0.05);
    box-shadow: var(--box-shadow);
    transition: var(--transition-smooth);
    text-decoration: none;
    color: inherit;
}
.action-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--box-shadow-hover);
    border-color: rgba(4, 120, 87, 0.15);
}
.action-card-date {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}
.action-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark-color);
    margin: 0 0 8px 0;
    line-height: 1.35;
    transition: color 0.25s ease;
}
.action-card:hover .action-card-title {
    color: var(--primary-color);
}
.action-card-desc {
    font-size: 0.95rem;
    color: var(--text-color);
    line-height: 1.5;
    margin: 0 0 16px 0;
}
.action-card-location {
    font-size: 0.85rem;
    color: #64748b;
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}
.action-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.action-card-meta .action-card-date {
    margin-bottom: 0;
}
.action-card-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    line-height: 1.2;
    font-weight: 700;
    white-space: nowrap;
    color: #475569;
    background: #f1f5f9;
}
.action-card-status-ongoing {
    color: #1d4ed8;
    background: #dbeafe;
}
.action-card-status-won {
    color: #047857;
    background: #d1fae5;
}
.action-card-status-completed {
    color: #6d28d9;
    background: #ede9fe;
}
.action-card-status-information {
    color: #9a3412;
    background: #ffedd5;
}
.action-card-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}
.action-card-footer .action-card-location {
    margin-top: 0;
}
.action-card-link {
    color: var(--primary-color);
    font-size: 0.85rem;
    font-weight: 700;
}
.representation-loading,
.representation-empty,
.representation-error {
    grid-column: 1 / -1;
    flex: 1 1 100%;
    margin: 0;
    padding: 28px 20px;
    border-radius: var(--border-radius-sm);
    text-align: center;
    color: #64748b;
    background: rgba(255, 255, 255, 0.7);
}
.representation-error {
    color: #991b1b;
    background: #fef2f2;
}

/* --- Vertical Upcoming Events Widget --- */
.upcoming-events-widget {
    background: var(--white-color);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: var(--border-radius);
    padding: 20px;
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 400px;
    width: 100%;
}
.widget-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark-color);
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1.5px solid rgba(15, 23, 42, 0.05);
}
.widget-scroll-container {
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-right: 5px;
}
.widget-scroll-container::-webkit-scrollbar {
    width: 6px;
}
.widget-scroll-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 10px;
}
.widget-scroll-container::-webkit-scrollbar-thumb {
    background: rgba(4, 120, 87, 0.2);
    border-radius: 10px;
}
.widget-scroll-container::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

.widget-event-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.01);
    border: 1px solid rgba(15, 23, 42, 0.03);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}
.widget-event-card:hover {
    background: rgba(4, 120, 87, 0.03);
    border-color: rgba(4, 120, 87, 0.15);
    transform: translateX(4px);
}
.widget-event-date-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: var(--white-color);
    min-width: 50px;
    height: 50px;
    border-radius: 8px;
    font-weight: 700;
}
.widget-event-date-box .day {
    font-size: 1.1rem;
    line-height: 1;
}
.widget-event-date-box .month {
    font-size: 0.65rem;
    text-transform: uppercase;
}
.widget-event-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.widget-event-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--dark-color);
    margin: 0;
    line-height: 1.3;
}
.widget-event-card:hover .widget-event-title {
    color: var(--primary-color);
}
.widget-event-meta {
    font-size: 0.75rem;
    color: #64748b;
}

/* --- Static Activity Presentation Styles --- */
.activities-intro-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.activity-item-static {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: var(--white-color);
    border: 1px solid rgba(15, 23, 42, 0.03);
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.01);
}
.activity-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(4, 120, 87, 0.06);
    color: var(--primary-color);
    min-width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}
.activity-item-content h4 {
    margin: 0 0 4px 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dark-color);
}
.activity-item-content p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--text-color);
    line-height: 1.45;
}

/* --- SPLIT GRID ACTIONS & INVITATION --- */
.actions-split-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 30px;
    margin-top: 35px;
    margin-bottom: 50px;
    align-items: stretch;
}
.action-band-card {
    background: var(--white-color);
    padding: 16px 20px;
    border-radius: var(--border-radius);
    border: 1px solid rgba(15, 23, 42, 0.03);
    box-shadow: var(--box-shadow);
    display: flex;
    align-items: center;
    gap: 15px;
    transition: var(--transition-smooth);
}
.action-band-card:hover {
    transform: translateX(6px);
    box-shadow: var(--box-shadow-hover);
    border-color: var(--primary-color);
}
.action-band-content h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 3px 0;
    color: var(--dark-color);
}
.action-band-content p {
    font-size: 0.88rem;
    line-height: 1.45;
    margin: 0;
    color: var(--text-color);
}
.action-concrete-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.action-concrete-card-icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.2;
}
.invitation-side-box {
    background: linear-gradient(135deg, rgba(4, 120, 87, 0.05) 0%, rgba(37, 99, 235, 0.05) 100%);
    border-radius: var(--border-radius);
    border: 1px solid rgba(4, 120, 87, 0.1);
    padding: 35px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    height: 100%;
    box-sizing: border-box;
    transition: var(--transition-smooth);
}
.invitation-side-box h3 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--dark-color);
    margin-bottom: 15px;
    line-height: 1.3;
}
.invitation-side-box p {
    font-size: 0.95rem;
    color: var(--text-color);
    line-height: 1.55;
    margin-bottom: 25px;
}
.invitation-side-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}
.invitation-side-actions a {
    width: 100%;
    text-align: center;
    margin: 0;
    box-sizing: border-box;
}

/* Theme sombre (Mode Nuit) */
[data-theme="dark"] .action-band-card {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .invitation-side-box {
    background: linear-gradient(135deg, rgba(4, 120, 87, 0.1) 0%, rgba(37, 99, 235, 0.1) 100%);
    border-color: rgba(4, 120, 87, 0.2);
}

@media (max-width: 900px) {
    .actions-split-grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
    .action-band-card:hover {
        transform: translateY(-4px); /* Vertical hover effect on mobile */
    }
}

/* --- OUTIL COMPACT DE ACCÈS RAPIDES --- */
/* Déplacé depuis un `style=` inline d'index.html le 27/08/2026 : en inline,
   la règle était impossible à surcharger en media query. */
.resources-compact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 20px;
}

/* `minmax(180px, 1fr)` bascule à UNE colonne dès que la largeur utile passe
   sous 372 px (2 × 180 + 12 de gouttière). Sur un téléphone de 360 px, la
   largeur utile vaut 328 px : les 11 chips passaient de 6 rangées à 11.
   Invisible sur un écran de 412 px — d'où deux colonnes imposées ici. */
@media (max-width: 620px) {
    .resources-compact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}

.resource-compact-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--white-color);
    border: 1px solid rgba(15, 23, 42, 0.03);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    text-decoration: none;
    color: var(--dark-color);
    font-weight: 600;
    font-size: 0.9rem;
    transition: var(--transition-smooth);
}
.resource-compact-chip:hover {
    transform: translateY(-2px);
    box-shadow: var(--box-shadow);
    border-color: var(--primary-color);
}
.resource-chip-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.resource-chip-icon svg {
    width: 16px;
    height: 16px;
}
[data-theme="dark"] .resource-compact-chip {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.05);
    color: #f1f5f9;
}

/* --- TEMPLATE INTERNAT AIRBNB-STYLE --- */
.airbnb-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

.airbnb-listing-header {
    padding-top: 12px;
    padding-bottom: 16px;
}

.airbnb-listing-header h1 {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--dark-color);
    line-height: 1.25;
    margin-bottom: 8px;
}

.airbnb-header-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.95rem;
}

.airbnb-meta-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 18px;
    color: var(--text-color);
}

.airbnb-rating-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: var(--dark-color);
}

.airbnb-meta-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-color);
    background: rgba(4, 120, 87, 0.08);
    padding: 3px 10px;
    border-radius: 20px;
}

.airbnb-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.airbnb-action-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dark-color);
    text-decoration: underline;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.airbnb-action-link:hover {
    background: rgba(0, 0, 0, 0.04);
}

/* Grille Galerie 5 Photos Airbnb */
.airbnb-gallery-container {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 16px;
    margin-bottom: 36px;
    background: var(--light-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.airbnb-gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

@media (min-width: 768px) {
    .airbnb-gallery-grid {
        grid-template-columns: 1.2fr 1fr;
        grid-template-rows: 440px;
        height: 440px;
    }
}

.airbnb-gallery-hero {
    position: relative;
    height: 100%;
    min-height: 280px;
    overflow: hidden;
    cursor: pointer;
    min-width: 0;
}

.airbnb-gallery-hero img,
.airbnb-gallery-sub-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.airbnb-gallery-hero:hover img,
.airbnb-gallery-sub-item:hover img {
    transform: scale(1.03);
}

.airbnb-gallery-sub {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
    height: 100%;
    min-height: 0;
}

.airbnb-gallery-sub-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    min-height: 0;
}

.airbnb-show-all-btn {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: var(--dark-color);
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: all 0.2s ease;
    z-index: 5;
}

.airbnb-show-all-btn:hover {
    background: #ffffff;
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* Page Layout 2 Colonnes */
.airbnb-main-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    margin-bottom: 60px;
}

@media (min-width: 992px) {
    .airbnb-main-layout {
        grid-template-columns: 1fr 380px;
    }
}

.airbnb-left-col {
    min-width: 0;
}

.airbnb-section-divider {
    border: none;
    border-bottom: 1px solid #e2e8f0;
    margin: 32px 0;
}

/* Hôte & Entête de section */
.airbnb-host-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.airbnb-host-info h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--dark-color);
    margin-bottom: 4px;
}

.airbnb-host-info p {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0;
}

.airbnb-host-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), #065f46);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(4, 120, 87, 0.2);
}

/* Badge Coup de Coeur Voyageurs / Internes */
.airbnb-favorite-box {
    background: var(--white-color);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.airbnb-fav-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.airbnb-fav-icon-laurel {
    font-size: 2rem;
    line-height: 1;
}

.airbnb-fav-titles h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dark-color);
    margin: 0 0 2px 0;
}

.airbnb-fav-titles p {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
}

.airbnb-fav-score {
    text-align: center;
    padding-left: 20px;
    border-left: 1px solid #f1f5f9;
}

.airbnb-fav-score-val {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--dark-color);
    line-height: 1;
}

.airbnb-fav-score-stars {
    font-size: 0.75rem;
    color: #f59e0b;
    margin-top: 2px;
}

.airbnb-fav-count {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 600;
    text-decoration: underline;
    margin-top: 4px;
    display: block;
}

/* Highlights Stack (Liste d'atouts avec icônes en médaillon) */
.airbnb-highlights-stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.airbnb-highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.airbnb-highlight-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(4, 120, 87, 0.08);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.airbnb-highlight-icon-box svg {
    width: 22px;
    height: 22px;
}

.airbnb-highlight-text h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark-color);
    margin-bottom: 2px;
}

.airbnb-highlight-text p {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0;
    line-height: 1.45;
}

/* Équipements ("Ce que propose cet internat") */
.airbnb-section-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--dark-color);
    margin-bottom: 20px;
}

.airbnb-amenities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px 24px;
    margin-bottom: 24px;
}

.airbnb-amenity-item {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.95rem;
    color: var(--text-color);
    font-weight: 500;
}

.airbnb-amenity-item svg {
    width: 22px;
    height: 22px;
    color: var(--dark-color);
    opacity: 0.85;
    flex-shrink: 0;
}

.airbnb-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--white-color);
    border: 1px solid var(--dark-color);
    color: var(--dark-color);
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 12px 24px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.airbnb-btn-outline:hover {
    background: var(--dark-color);
    color: var(--white-color);
}

/* Carte Sticky à Droite */
.airbnb-sticky-wrapper {
    position: relative;
}

.airbnb-sticky-card {
    position: sticky;
    top: 110px;
    background: var(--white-color);
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease;
}

.airbnb-card-price-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-baseline;
    margin-bottom: 16px;
}

.airbnb-card-price {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--dark-color);
}

.airbnb-card-price-sub {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 400;
}

.airbnb-card-pill-tag {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

/* Widget formulaire dans la carte */
.airbnb-booking-box {
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}

.airbnb-box-row {
    padding: 10px 14px;
    background: var(--white-color);
}

.airbnb-box-row:first-child {
    border-bottom: 1px solid #cbd5e1;
}

.airbnb-box-label {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--dark-color);
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 2px;
}

.airbnb-box-select,
.airbnb-box-input {
    width: 100%;
    border: none;
    background: transparent;
    font-family: var(--font-family);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-color);
    outline: none;
    padding: 2px 0;
    cursor: pointer;
}

.airbnb-btn-primary {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #065f46 100%);
    color: white;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 1rem;
    padding: 14px 20px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(4, 120, 87, 0.35);
    transition: all 0.25s ease;
}

.airbnb-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(4, 120, 87, 0.45);
    background: linear-gradient(135deg, #059669 0%, var(--primary-color) 100%);
}

.airbnb-btn-secondary {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #f8fafc;
    color: var(--dark-color);
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 12px 18px;
    border-radius: 12px;
    border: 1px solid #cbd5e1;
    cursor: pointer;
    text-decoration: none;
    margin-top: 10px;
    transition: all 0.2s ease;
}

.airbnb-btn-secondary:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.airbnb-card-guarantees {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

.airbnb-guarantee-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: #64748b;
}

.airbnb-guarantee-item svg {
    color: var(--primary-color);
    flex-shrink: 0;
}

/* Section Carte & Localisation */
.airbnb-map-preview {
    width: 100%;
    height: 320px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    margin-top: 16px;
    position: relative;
    background: #e2e8f0;
}

.airbnb-map-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.airbnb-map-badge {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: var(--white-color);
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    color: var(--dark-color);
}

/* Thème sombre pour la disposition Airbnb */
[data-theme="dark"] .airbnb-listing-header h1,
[data-theme="dark"] .airbnb-host-info h2,
[data-theme="dark"] .airbnb-fav-titles h3,
[data-theme="dark"] .airbnb-fav-score-val,
[data-theme="dark"] .airbnb-highlight-text h4,
[data-theme="dark"] .airbnb-section-title,
[data-theme="dark"] .airbnb-card-price,
[data-theme="dark"] .airbnb-box-label,
[data-theme="dark"] .airbnb-action-link {
    color: #f8fafc;
}

[data-theme="dark"] .airbnb-action-link:hover {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .airbnb-favorite-box,
[data-theme="dark"] .airbnb-sticky-card {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .airbnb-fav-score {
    border-left-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .airbnb-btn-outline {
    background: #1e293b;
    border-color: #475569;
    color: #f8fafc;
}

[data-theme="dark"] .airbnb-btn-outline:hover {
    background: #334155;
}

[data-theme="dark"] .airbnb-booking-box {
    border-color: #475569;
}

[data-theme="dark"] .airbnb-box-row {
    background: #0f172a;
}

[data-theme="dark"] .airbnb-box-row:first-child {
    border-bottom-color: #475569;
}

[data-theme="dark"] .airbnb-box-select,
[data-theme="dark"] .airbnb-box-input {
    color: #f1f5f9;
}

[data-theme="dark"] .airbnb-btn-secondary {
    background: #334155;
    color: #f8fafc;
    border-color: #475569;
}

[data-theme="dark"] .airbnb-btn-secondary:hover {
    background: #475569;
}

[data-theme="dark"] .airbnb-card-pill-tag {
    background: rgba(4, 120, 87, 0.2);
    border-color: rgba(4, 120, 87, 0.4);
    color: #6ee7b7;
}

.airbnb-box-select,
.airbnb-box-input {
    width: 100%;
    border: none;
    background: transparent;
    font-family: var(--font-family);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-color);
    outline: none;
    padding: 2px 0;
    cursor: pointer;
}

.airbnb-btn-primary {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #065f46 100%);
    color: white;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 1rem;
    padding: 14px 20px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(4, 120, 87, 0.35);
    transition: all 0.25s ease;
}

.airbnb-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(4, 120, 87, 0.45);
    background: linear-gradient(135deg, #059669 0%, var(--primary-color) 100%);
}

.airbnb-btn-secondary {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #f8fafc;
    color: var(--dark-color);
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 12px 18px;
    border-radius: 12px;
    border: 1px solid #cbd5e1;
    cursor: pointer;
    text-decoration: none;
    margin-top: 10px;
    transition: all 0.2s ease;
}

.airbnb-btn-secondary:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.airbnb-card-guarantees {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

.airbnb-guarantee-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: #64748b;
}

.airbnb-guarantee-item svg {
    color: var(--primary-color);
    flex-shrink: 0;
}

/* Section Carte & Localisation */
.airbnb-map-preview {
    width: 100%;
    height: 320px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    margin-top: 16px;
    position: relative;
    background: #e2e8f0;
}

.airbnb-map-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.airbnb-map-badge {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: var(--white-color);
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    color: var(--dark-color);
}

/* Thème sombre pour la disposition Airbnb */
[data-theme="dark"] .airbnb-listing-header h1,
[data-theme="dark"] .airbnb-host-info h2,
[data-theme="dark"] .airbnb-fav-titles h3,
[data-theme="dark"] .airbnb-fav-score-val,
[data-theme="dark"] .airbnb-highlight-text h4,
[data-theme="dark"] .airbnb-section-title,
[data-theme="dark"] .airbnb-card-price,
[data-theme="dark"] .airbnb-box-label,
[data-theme="dark"] .airbnb-action-link {
    color: #f8fafc;
}

[data-theme="dark"] .airbnb-action-link:hover {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .airbnb-favorite-box,
[data-theme="dark"] .airbnb-sticky-card {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .airbnb-fav-score {
    border-left-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .airbnb-btn-outline {
    background: #1e293b;
    border-color: #475569;
    color: #f8fafc;
}

[data-theme="dark"] .airbnb-btn-outline:hover {
    background: #334155;
}

[data-theme="dark"] .airbnb-booking-box {
    border-color: #475569;
}

[data-theme="dark"] .airbnb-box-row {
    background: #0f172a;
}

[data-theme="dark"] .airbnb-box-row:first-child {
    border-bottom-color: #475569;
}

[data-theme="dark"] .airbnb-box-select,
[data-theme="dark"] .airbnb-box-input {
    color: #f1f5f9;
}

[data-theme="dark"] .airbnb-btn-secondary {
    background: #334155;
    color: #f8fafc;
    border-color: #475569;
}

[data-theme="dark"] .airbnb-btn-secondary:hover {
    background: #475569;
}

[data-theme="dark"] .airbnb-card-pill-tag {
    background: rgba(4, 120, 87, 0.2);
    border-color: rgba(4, 120, 87, 0.4);
    color: #6ee7b7;
}

[data-theme="dark"] .airbnb-amenity-item svg {
    color: #cbd5e1;
}

[data-theme="dark"] .airbnb-section-divider {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* --- OVERLAY VISITE PHOTO INTERACTIVE AIRBNB --- */
.photo-tour-overlay {
    position: fixed;
    inset: 0;
    background: var(--white-color);
    z-index: 10000;
    overflow-y: auto;
    display: none;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.photo-tour-overlay.active {
    display: block;
    opacity: 1;
}

.photo-tour-header {
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 16px 28px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 100;
}

.photo-tour-back-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: var(--white-color);
    color: var(--dark-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.photo-tour-back-btn:hover {
    background: #f1f5f9;
    transform: scale(1.05);
}

/* --- TEMPLATE INTERNAT AIRBNB-STYLE --- */
.airbnb-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

.airbnb-back-to-list-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dark-color);
    background: var(--light-color);
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 8px 16px;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    margin-top: 20px;
}

.airbnb-back-to-list-btn:hover {
    background: #ffffff;
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateX(-3px);
    box-shadow: 0 4px 12px rgba(4, 120, 87, 0.12);
}

[data-theme="dark"] .airbnb-back-to-list-btn {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.1);
    color: #f8fafc;
}

[data-theme="dark"] .airbnb-back-to-list-btn:hover {
    background: #334155;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.airbnb-listing-header {
    padding-top: 12px;
    padding-bottom: 16px;
}

.photo-tour-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 36px 24px 80px;
}

.photo-tour-nav-wrapper {
    position: sticky;
    top: 74px;
    background: var(--white-color);
    padding-top: 12px;
    z-index: 90;
}

.photo-tour-chips-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 16px;
    margin-bottom: 40px;
    border-bottom: 1px solid #e2e8f0;
    scrollbar-width: thin;
}

.photo-tour-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0.65;
    transition: all 0.25s ease;
    border-bottom: 3px solid transparent;
    padding-bottom: 10px;
    flex-shrink: 0;
}

.photo-tour-chip.active,
.photo-tour-chip:hover {
    opacity: 1;
    border-bottom-color: var(--dark-color);
}

.photo-tour-chip img {
    width: 100px;
    height: 66px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease;
}

.photo-tour-chip:hover img {
    transform: scale(1.04);
}

.photo-tour-chip span {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--dark-color);
    white-space: nowrap;
}

/* Sections de photos par catégories */
.photo-tour-sections-list {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.photo-tour-section {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    scroll-margin-top: 280px;
    padding-top: 10px;
}

@media (min-width: 851px) {
    .photo-tour-sec-left {
        position: sticky;
        top: 260px;
        align-self: start;
    }
}

@media (max-width: 850px) {
    .photo-tour-section {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.photo-tour-sec-left h3 {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--dark-color);
    margin-bottom: 8px;
}

.photo-tour-sec-left p {
    font-size: 0.92rem;
    color: #64748b;
    line-height: 1.55;
    margin: 0;
}

.photo-tour-sec-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.photo-tour-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.photo-tour-img-card {
    border-radius: 16px;
    overflow: hidden;
    background: var(--light-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.photo-tour-img-card img {
    width: 100%;
    height: auto;
    max-height: 540px;
    object-fit: cover;
    display: block;
    border-radius: 16px;
}

/* Dark mode pour la Visite Photo */
[data-theme="dark"] .photo-tour-overlay {
    background: #0f172a;
}

[data-theme="dark"] .photo-tour-header {
    background: rgba(15, 23, 42, 0.92);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .photo-tour-header span,
[data-theme="dark"] .photo-tour-nav-wrapper h2,
[data-theme="dark"] .photo-tour-chip span,
[data-theme="dark"] .photo-tour-sec-left h3 {
    color: #f8fafc;
}

[data-theme="dark"] .photo-tour-back-btn {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.1);
    color: #f8fafc;
}

[data-theme="dark"] .photo-tour-back-btn:hover {
    background: #334155;
}

[data-theme="dark"] .photo-tour-nav-wrapper {
    background: #0f172a;
}

[data-theme="dark"] .photo-tour-chips-bar {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .photo-tour-chip.active,
[data-theme="dark"] .photo-tour-chip:hover {
    border-bottom-color: #f8fafc;
}

[data-theme="dark"] .meta-value {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.25);
    color: #f8fafc;
}

[data-theme="dark"] .meta-missing {
    background: rgba(148, 163, 184, 0.12) !important;
    color: #94a3b8 !important;
}

/* ==========================================================================
   Legal pages (mentions légales / politique de confidentialité)
   ========================================================================== */

.legal-page {
    max-width: 820px;
    padding-bottom: 60px;
    color: var(--text-color);
    line-height: 1.7;
}

.legal-page h2 {
    font-size: 1.5rem;
    color: var(--dark-color);
    margin-top: 50px;
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--primary-color);
}

.legal-page h3 {
    font-size: 1.15rem;
    color: var(--dark-color);
    margin-top: 30px;
    margin-bottom: 8px;
}

.legal-page p {
    margin-bottom: 20px;
}

.legal-page ul {
    margin-bottom: 20px;
    padding-left: 20px;
}

.legal-page li {
    margin-bottom: 8px;
}

.legal-page a {
    color: var(--primary-color);
    text-decoration: underline;
}

.legal-page code {
    background-color: var(--light-color);
    border-radius: var(--border-radius-sm);
    padding: 2px 8px;
    font-size: 0.9em;
}

.legal-updated {
    display: inline-block;
    background-color: var(--light-color);
    border-radius: var(--border-radius-sm);
    padding: 8px 20px;
    font-size: 0.9rem;
    margin-bottom: 30px;
}

.legal-identity {
    list-style: none;
    background-color: var(--light-color);
    border-radius: var(--border-radius);
    padding: 20px 30px;
}

.legal-identity li {
    margin-bottom: 8px;
}

.legal-highlight {
    background-color: var(--light-color);
    border-left: 4px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: 20px 30px;
    margin-bottom: 30px;
}

.legal-highlight h3 {
    margin-top: 0;
    color: var(--primary-color);
}

.legal-highlight ul {
    margin-bottom: 0;
}

.legal-table-wrap {
    overflow-x: auto;
    margin-bottom: 20px;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.legal-table th,
.legal-table td {
    text-align: left;
    padding: 8px 20px;
    border-bottom: 1px solid var(--gray-color);
    vertical-align: top;
}

.legal-table th {
    background-color: var(--light-color);
    color: var(--dark-color);
    font-weight: 600;
}

.legal-contact-box {
    background-color: var(--light-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 30px;
    margin-top: 50px;
    text-align: center;
}

.legal-contact-box h3 {
    margin-top: 0;
}

.legal-contact-box p {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .legal-page h2 {
        font-size: 1.3rem;
        margin-top: 30px;
    }

    .legal-identity,
    .legal-highlight {
        padding: 20px;
    }
}

/* ==========================================================================
   Robustesse mobile — filets de sécurité globaux
   Ajouté le 20/08/2026 après audit des largeurs 320 / 360 / 390 / 430 px.
   ========================================================================== */

/* Aucune image ne peut dépasser son conteneur. */
img {
    max-width: 100%;
}

/* Empêche iOS d'agrandir les textes en rotation paysage. */
html {
    -webkit-text-size-adjust: 100%;
}

/* Les adresses e-mail et URL longues se coupent au lieu de déborder. */
a[href^="mailto:"],
a[href^="http"],
.legal-page,
.team-card,
.poleCard__member-left {
    overflow-wrap: break-word;
}

@media (max-width: 560px) {
    /* Marge latérale réduite : ~24 px de contenu gagnés sur les petits écrans. */
    .container {
        padding: 0 16px;
    }

    /* Plancher de lisibilité : aucun texte sous 12 px sur téléphone. */
    .widget-event-date-box .month,
    .airbnb-box-label,
    .hero-event-tag,
    .home-internat-city,
    .sim-annee,
    .sim-meta,
    .result-badge,
    .result-section-title {
        font-size: 0.75rem;
    }
}

/* --------------------------------------------------------------------------
   Cibles tactiles — minimum 44 px de hauteur sur téléphone (WCAG 2.5.5 / iOS HIG).
   On agit sur le padding vertical uniquement : la mise en page horizontale
   et le type d'affichage des éléments restent inchangés.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {

    .cta-button,
    .actions-cta .cta-button,
    .actions-cta .hero-secondary-btn,
    .hero-secondary-btn,
    .hero-event-btn,
    .btn-savoir-plus,
    .btn-rejoindre-pole,
    .chip,
    .airbnb-action-link,
    .airbnb-show-all-btn,
    .resource-compact-chip,
    .footer-feedback-link,
    .team-contact-btn,
    .nav-links li a.nav-btn-adherer {
        padding-block: 12px;
    }

    /* Boutons purement iconographiques : on impose une surface carrée. */
    .header-social-link,
    .header-theme-toggle,
    .modal-close-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ============================================================
   Bouton flottant « Faire une remontée »
   Solid red pill anchored bottom-right on every page: visible at
   any scroll position without competing with the green brand
   colour. Icon only at rest, label revealed on hover/focus.
   ============================================================ */

.feedback-fab {
    --feedback-fab-red: #DC2626;
    --feedback-fab-red-dark: #B91C1C;
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 900;
    display: inline-flex;
    align-items: center;
    gap: 0;
    max-width: 56px;
    height: 56px;
    padding: 0;
    overflow: hidden;
    border: none;
    border-radius: 999px;
    background: var(--feedback-fab-red);
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.38);
    text-decoration: none;
    white-space: nowrap;
    /* A few halo pulses on arrival. The ring lives in box-shadow, not in a
       pseudo-element, which overflow:hidden would clip. */
    animation: feedbackFabPulse 3.2s ease-out 4;
    transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.25s ease,
                box-shadow 0.25s ease,
                transform 0.25s ease;
}

.feedback-fab-icon {
    flex: 0 0 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    color: inherit;
}

.feedback-fab-icon svg {
    width: 24px;
    height: 24px;
}

.feedback-fab-label {
    padding-right: 22px;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.2s ease 0.08s;
}

.feedback-fab:hover,
.feedback-fab:focus-visible {
    max-width: 260px;
    background: var(--feedback-fab-red-dark);
    box-shadow: 0 10px 26px rgba(185, 28, 28, 0.45);
    animation: none;
}

@keyframes feedbackFabPulse {
    0%, 60%, 100% {
        box-shadow: 0 6px 20px rgba(220, 38, 38, 0.38), 0 0 0 0 rgba(220, 38, 38, 0);
    }
    75% {
        box-shadow: 0 6px 20px rgba(220, 38, 38, 0.38), 0 0 0 12px rgba(220, 38, 38, 0.20);
    }
    90% {
        box-shadow: 0 6px 20px rgba(220, 38, 38, 0.38), 0 0 0 18px rgba(220, 38, 38, 0);
    }
}

.feedback-fab:hover .feedback-fab-label,
.feedback-fab:focus-visible .feedback-fab-label {
    opacity: 1;
}

.feedback-fab:focus-visible {
    outline: 3px solid rgba(220, 38, 38, 0.35);
    outline-offset: 3px;
}

.feedback-fab:active {
    transform: scale(0.96);
    box-shadow: 0 4px 12px rgba(185, 28, 28, 0.4);
}

[data-theme="dark"] .feedback-fab {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

@media (max-width: 576px) {
    .feedback-fab {
        right: 16px;
        bottom: 16px;
        max-width: 52px;
        height: 52px;
    }
    .feedback-fab-icon {
        flex-basis: 52px;
        width: 52px;
        height: 52px;
    }
    .feedback-fab-icon svg {
        width: 22px;
        height: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .feedback-fab,
    .feedback-fab-label {
        transition: none;
    }
    .feedback-fab {
        animation: none;
    }
}

/* ============================================================
   Actions de représentation — défilement latéral
   Cards scroll sideways instead of stacking, keeping the section
   short. No visible scrollbar: navigation is driven by two solid
   arrow buttons plus a dot indicator, and the track is masked at
   the edges so a partially visible card signals "there is more".
   ============================================================ */

.actions-carousel {
    position: relative;
    margin-top: 25px;
    padding: 0 56px;
}

.actions-carousel-track {
    display: flex;
    align-items: stretch;
    gap: 20px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 10px 4px 14px 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.actions-carousel-track::-webkit-scrollbar {
    display: none;
}

.actions-carousel-track:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 4px;
    border-radius: var(--border-radius);
}

/* Exactly three whole cards per view: no card is ever cut off at the
   edges. Two 20px gaps are subtracted from the track width. */
.actions-carousel-track .action-card {
    flex: 0 0 calc((100% - 40px) / 3);
    max-width: calc((100% - 40px) / 3);
    scroll-snap-align: start;
}

/* Cap the summary so one long paragraph cannot stretch the row. */
.actions-carousel-track .action-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Quiet circular arrows: white surface, hairline border, slate glyph.
   Discreet at rest, they darken on hover rather than shouting in colour. */
.actions-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 50%;
    background: var(--white-color);
    color: var(--dark-color);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.07);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.actions-carousel-btn[hidden] {
    display: none;
}

.actions-carousel-btn svg {
    width: 20px;
    height: 20px;
}

.actions-carousel-btn:hover:not(:disabled) {
    border-color: rgba(15, 23, 42, 0.18);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
    transform: translateY(-50%) scale(1.06);
}

.actions-carousel-btn:active:not(:disabled) {
    transform: translateY(-50%) scale(0.97);
}

.actions-carousel-btn:focus-visible {
    outline: 2px solid var(--dark-color);
    outline-offset: 3px;
}

.actions-carousel-btn:disabled {
    color: var(--gray-color);
    border-color: rgba(15, 23, 42, 0.06);
    box-shadow: none;
    cursor: default;
}

.actions-carousel-prev { left: 0; }
.actions-carousel-next { right: 0; }

/* Dot indicator: position within the list, and a click target per card. */
.actions-carousel-dots {
    display: none;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

/* Pastilles des rails génériques (`.mobile-rail`). Masquées par défaut : elles
   ne réapparaissent que dans la media query mobile, plus bas. `js/mobile-rail.js`
   vide et masque aussi le conteneur au-dessus du point de rupture — ceinture et
   bretelles, pour qu'un desktop ne voie jamais de pastilles même sans JS. */
.mobile-rail-dots {
    display: none;
}

.actions-carousel.is-scrollable .actions-carousel-dots {
    display: flex;
}

.actions-carousel-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.16);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.actions-carousel-dot:hover {
    background: rgba(15, 23, 42, 0.32);
}

.actions-carousel-dot.is-active {
    width: 20px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.55);
}

[data-theme="dark"] .actions-carousel-btn {
    background: var(--white-color);
    color: var(--dark-color);
    border-color: rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .actions-carousel-dot {
    background: rgba(255, 255, 255, 0.20);
}

[data-theme="dark"] .actions-carousel-dot.is-active {
    background: rgba(255, 255, 255, 0.62);
}

@media (max-width: 992px) {
    .actions-carousel {
        padding: 0 46px;
    }
    .actions-carousel-track .action-card {
        flex-basis: calc((100% - 20px) / 2);
        max-width: calc((100% - 20px) / 2);
    }
    .actions-carousel-btn {
        width: 40px;
        height: 40px;
    }
    .actions-carousel-btn svg {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 576px) {
    .actions-carousel {
        padding: 0;
    }
    .actions-carousel-track {
        padding: 10px 4px 14px 4px;
    }
    .actions-carousel-track .action-card {
        flex-basis: 100%;
        max-width: 100%;
    }
    .actions-carousel-btn {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .actions-carousel-track {
        scroll-behavior: auto;
    }
    .actions-carousel-btn,
    .actions-carousel-dot {
        transition: none;
    }
}

/* ============================================================
   Annuaire des référents de spécialité — cartes retournables
   Front face: specialty + referents. Click flips the card and
   reveals the e-mail addresses (no mailto, copy button instead).
   Card height is locked by JS (equalizeCardHeights) because both
   faces are absolutely positioned.
   ============================================================ */

.ref-card {
    perspective: 1200px;
    cursor: pointer;
    outline: none;
    transition: var(--transition-smooth);
}

.ref-card:hover {
    transform: translateY(-4px);
}

.ref-card:focus-visible .ref-face {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.18);
}

.ref-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.ref-card.is-flipped .ref-card-inner {
    transform: rotateY(180deg);
}

.ref-face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 15px;
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    background: var(--white-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.ref-card:hover .ref-face {
    border-color: rgba(4, 120, 87, 0.2);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.ref-face-back {
    transform: rotateY(180deg);
}

/* Measuring pass: lay both faces out normally to read their real height. */
.ref-measuring .ref-card { height: auto !important; }
.ref-measuring .ref-face { position: static; height: auto; }
.ref-measuring .ref-card-inner { transition: none; }

.ref-badge {
    align-self: flex-start;
    display: inline-block;
    margin-bottom: 12px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ref-specialite {
    margin: 0 0 10px 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    color: var(--dark-color);
}

.ref-people {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text-color);
}

.ref-people-icon {
    display: flex;
    color: #64748b;
    padding-top: 2px;
}

.ref-people-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #94a3b8;
    margin-bottom: 2px;
}

.ref-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    background: var(--light-color);
    border: 1px solid rgba(0, 0, 0, 0.02);
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.9rem;
    transition: var(--transition-smooth);
}

.ref-card:hover .ref-action {
    background: var(--primary-color);
    color: var(--white-color);
}

.ref-back-title {
    display: block;
    margin-bottom: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #94a3b8;
}

.ref-mails {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ref-mail-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--light-color);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.ref-mail {
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--dark-color);
    overflow-wrap: anywhere;
    word-break: break-word;
    cursor: text;
    user-select: all;
}

.ref-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid rgba(4, 120, 87, 0.25);
    border-radius: 20px;
    background: transparent;
    color: var(--primary-color);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.ref-copy-btn:hover,
.ref-copy-btn.is-copied {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
}

.ref-maj {
    display: block;
    margin-top: 12px;
    font-size: 0.75rem;
    color: #94a3b8;
}

.ref-action-back {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--text-color);
}

.ref-card:hover .ref-action-back {
    background: var(--light-color);
    color: var(--text-color);
}

[data-theme="dark"] .ref-face,
[data-theme="dark"] .ref-mail-row {
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .ref-action-back {
    border-color: rgba(255, 255, 255, 0.12);
}

@media (prefers-reduced-motion: reduce) {
    .ref-card,
    .ref-card-inner,
    .ref-face,
    .ref-action,
    .ref-copy-btn {
        transition: none;
    }
    .ref-card:hover {
        transform: none;
    }
}

/* ============================================================
   Rails à défilement latéral — MOBILE UNIQUEMENT
   ============================================================
   Composant générique : toute grille qui porte `.mobile-rail` devient, sous
   560 px, un rail que l'on balaie, avec des pastilles dessous posées par
   `js/mobile-rail.js`. Même motif que `.actions-carousel` (section
   « Représentation des internes »), mais sans flèches — inutiles au doigt —
   et sans JS de mise en page.

   Pourquoi : une grille de 4 cartes empilée en une colonne coûte ~666 px de
   hauteur contre 156 px en desktop sur 4 colonnes. En rail, la section
   retombe autour de 180 px et tient dans un écran.

   ⚠️ CE BLOC DOIT RESTER EN FIN DE FICHIER.
   `grid-template-columns: none` annule le `repeat(...)` de la grille d'origine
   (`.home-actions-grid` ligne ~187, `.actions-grid` ligne ~3840). À
   spécificité égale, c'est l'ordre du fichier qui tranche : placé avant ces
   grilles, le rail est silencieusement ignoré et la grille reste empilée.
   C'est exactement l'erreur commise puis corrigée le 27/08/2026.

   ⚠️ Le point de rupture est dupliqué dans `js/mobile-rail.js`. Changer l'un
   sans l'autre donne des pastilles sur une grille desktop, ou un rail sans
   pastilles.

   Largeur de carte : 100% par défaut, donc UNE carte pleine largeur, centrée,
   sans débord — exactement le rendu de `.actions-carousel` sous 576 px, qui
   est la référence validée. Ce sont les pastilles qui portent l'affordance
   « il y a d'autres cartes », pas un bout de carte qui dépasse : un débord
   asymétrique se lit comme un défaut d'alignement, pas comme une invitation.
   Ajustable grille par grille via `--rail-card` si un cas le justifie.

   `overflow-x: auto` crée un conteneur de défilement propre à la grille :
   aucun risque de rouvrir le débordement horizontal de page corrigé le 27/08.
   Ne jamais exprimer `--rail-card` en `vw`.
   ============================================================ */

@media (max-width: 560px) {
    .mobile-rail {
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-auto-columns: var(--rail-card, 100%);
        gap: 12px;
        overflow-x: auto;
        overscroll-behavior-x: contain; /* évite de déclencher le retour arrière du navigateur */
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        padding-bottom: 4px; /* laisse respirer l'ombre des cartes */
        /* L'écart sous le rail est porté par les pastilles, pas par la grille :
           sinon il s'ajoute à leur `margin-top` et les décolle du rail. */
        margin-bottom: 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .mobile-rail::-webkit-scrollbar {
        display: none;
    }

    .mobile-rail > * {
        scroll-snap-align: start;
    }

    /* Les pastilles appartiennent visuellement au rail : serrées dessous,
       nettement détachées du bloc suivant. */
    .mobile-rail-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin: 16px 0 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-rail {
        scroll-behavior: auto;
    }
}