/* ================================================
   A VIA DI I PASTORI – Feuille de style principale
   ================================================
   Organisation :
     1. Variables et reset
     2. Base et typographie
     3. Navigation
     4. Sections communes
     5. Hero (Accueil)
     6. Le Projet
     7. Carte interactive
     8. Activités
     9. Public cible
    10. Activité test
    11. Éco-responsabilité
    12. Équipe
    13. Contact
    14. Footer
    15. Bouton retour en haut
    16. Responsive (mobile)
   ================================================ */


/* ------------------------------------------------
   1. VARIABLES ET RESET
   Pour changer les couleurs principales du site,
   modifier les variables ici.
   ------------------------------------------------ */
:root {
    /* Couleurs principales — à personnaliser */
    --couleur-principale: #2e6b3e;   /* Vert forêt */
    --couleur-secondaire: #5a9a6f;   /* Vert clair */
    --couleur-accent: #c8832a;       /* Ocre/terracotta */
    --couleur-fond: #f9f6f0;         /* Blanc crème */
    --couleur-fond-alt: #eef4f0;     /* Fond vert très pâle */
    --couleur-texte: #2c2c2c;        /* Texte principal */
    --couleur-texte-clair: #5a5a5a;  /* Texte secondaire */
    --couleur-blanc: #ffffff;

    /* Typographie */
    --font-titre: Georgia, 'Times New Roman', serif;
    --font-corps: 'Segoe UI', Arial, sans-serif;

    /* Espacements */
    --section-padding: 80px 20px;
    --container-max: 1100px;
    --rayon: 8px;

    /* Ombre */
    --ombre: 0 2px 12px rgba(0,0,0,0.10);
}

/* Reset minimal */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-corps);
    color: var(--couleur-texte);
    background-color: var(--couleur-fond);
    line-height: 1.6;
}

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

a {
    color: var(--couleur-principale);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

ul {
    padding-left: 20px;
}

li {
    margin-bottom: 6px;
}


/* ------------------------------------------------
   2. CLASSES UTILITAIRES
   ------------------------------------------------ */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 20px;
}

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

.section-alt {
    background-color: var(--couleur-fond-alt);
}

.section-title {
    font-family: var(--font-titre);
    font-size: 2rem;
    color: var(--couleur-principale);
    text-align: center;
    margin-bottom: 16px;
}

.section-subtitle {
    text-align: center;
    color: var(--couleur-texte-clair);
    font-size: 1.05rem;
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: var(--rayon);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    text-decoration: none;
}

.btn-primary {
    background-color: var(--couleur-principale);
    color: var(--couleur-blanc);
    border-color: var(--couleur-principale);
}

.btn-primary:hover {
    background-color: #1d4d2b;
    border-color: #1d4d2b;
    text-decoration: none;
}

.btn-secondary {
    background-color: transparent;
    color: var(--couleur-blanc);
    border-color: var(--couleur-blanc);
}

.btn-secondary:hover {
    background-color: var(--couleur-blanc);
    color: var(--couleur-principale);
    text-decoration: none;
}

.btn-full {
    width: 100%;
    text-align: center;
}


/* ------------------------------------------------
   3. NAVIGATION
   ------------------------------------------------ */
#navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--couleur-principale);
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.nav-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;         /* ne rétrécit pas si les liens prennent de la place */
}

.nav-logo:hover {
    text-decoration: none;
    opacity: 0.85;
}

/* ===== FICHIER DU LOGO : images/logo.png =====
   Format rond, calé dans la barre de 60px de haut.
   Changer la taille en modifiant width/height (valeur identique). */
.nav-logo-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    display: block;
    border: 2px solid rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
}

/* Nom du projet à côté du logo */
.nav-logo-texte {
    font-family: var(--font-titre);
    font-size: 1.1rem;
    color: var(--couleur-blanc);
    font-weight: bold;
    white-space: nowrap;
    line-height: 1;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 4px;
    padding: 0;
    margin: 0;
}

.nav-links a {
    color: var(--couleur-blanc);
    font-size: 0.88rem;
    padding: 6px 10px;
    border-radius: 4px;
    display: block;
    text-decoration: none;
    transition: background-color 0.2s;
}

.nav-links a:hover,
.nav-links a.active {
    background-color: rgba(255,255,255,0.18);
    text-decoration: none;
}

/* Bouton burger (mobile) */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.nav-toggle span {
    display: block;
    width: 25px;
    height: 2px;
    background-color: var(--couleur-blanc);
    border-radius: 2px;
    transition: transform 0.2s;
}


/* ------------------------------------------------
   4. OFFSET POUR LA NAV FIXE
   Chaque section commence 60px plus bas pour éviter
   qu'elle soit cachée sous la barre de navigation.
   ------------------------------------------------ */
section[id] {
    scroll-margin-top: 60px;
}


/* ------------------------------------------------
   5. HERO (ACCUEIL)
   ------------------------------------------------ */
.hero {
    /* ===== IMAGE DE FOND (fallback vidéo) =====
       Fichier attendu : images/hero-randonnee.jpg
       Cette image s'affiche toujours si la vidéo
       est absente ou désactivée (mobile).
       ========================================== */
    background-color: var(--couleur-principale);
    background-image: url('images/hero-randonnee.jpg');
    background-size: cover;
    background-position: center;
    color: var(--couleur-blanc);
    text-align: center;
    padding: 160px 20px 110px;
    position: relative;
    overflow: hidden;        /* contient la vidéo en absolu */
}

/* ─── VIDÉO DE FOND ──────────────────────────────
   Activée en décommentant le bloc <video> dans le HTML.
   object-fit: cover → remplit toute la section sans déformation.
   Sur mobile, la vidéo est masquée (voir responsive)
   et l'image de fond CSS prend le relais. */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

/* ─── OVERLAY ────────────────────────────────────
   ===== AJUSTER L'OPACITÉ ICI =====
   Augmenter rgba(…, valeur) pour assombrir davantage,
   diminuer pour laisser plus de luminosité.
   Valeur recommandée : entre 0.50 et 0.70 */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 40, 15, 0.62);
    z-index: 1;
}

/* Contenu au-dessus de la vidéo et de l'overlay */
.hero-content {
    position: relative;
    z-index: 2;
}

.hero-title {
    font-family: var(--font-titre);
    font-size: 3rem;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.hero-slogan {
    font-size: 1.35rem;
    font-style: italic;
    color: rgba(255,255,255,0.90);
    margin-bottom: 24px;
    font-family: var(--font-titre);
}

.hero-intro {
    font-size: 1.05rem;
    max-width: 680px;
    margin: 0 auto 36px;
    color: rgba(255,255,255,0.92);
    line-height: 1.75;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}


/* ------------------------------------------------
   6. LE PROJET
   ------------------------------------------------ */

/* ── 3 cartes ──────────────────────────────────── */
.projet-cartes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 48px;
}

.projet-carte {
    background: var(--couleur-blanc);
    border-radius: 12px;
    padding: 36px 28px 32px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.07);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.projet-carte:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.11);
}

.projet-carte-icone {
    font-size: 2rem;
    line-height: 1;
}

.projet-carte h3 {
    font-family: var(--font-titre);
    font-size: 1.1rem;
    color: var(--couleur-principale);
    margin: 0;
}

.projet-carte p,
.projet-carte ul {
    color: var(--couleur-texte-clair);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

.projet-carte ul {
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Bloc Concept ──────────────────────────────── */
.projet-concept {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-top: 64px;
    background: var(--couleur-principale);
    border-radius: 16px;
    padding: 56px 52px;
    color: var(--couleur-blanc);
}

.projet-concept-label {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    margin-bottom: 14px;
}

.projet-concept-texte h3 {
    font-family: var(--font-titre);
    font-size: 1.6rem;
    line-height: 1.3;
    margin-bottom: 20px;
    color: var(--couleur-blanc);
}

.projet-concept-texte p {
    font-size: 0.97rem;
    line-height: 1.75;
    color: rgba(255,255,255,0.85);
    margin-bottom: 14px;
}

.projet-concept-texte .btn-primary {
    margin-top: 10px;
    background-color: var(--couleur-blanc);
    color: var(--couleur-principale);
    border-color: var(--couleur-blanc);
}

.projet-concept-texte .btn-primary:hover {
    background-color: rgba(255,255,255,0.88);
    border-color: rgba(255,255,255,0.88);
}

/* Conteneur image concept */
.projet-concept-image {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background-color: rgba(255,255,255,0.10);
}

.projet-concept-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Placeholder si l'image est absente */
.projet-concept-image--vide {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.45);
    border: 2px dashed rgba(255,255,255,0.25);
}

.projet-concept-image--vide::after {
    content: '📷  Ajouter images/concept.jpg';
}


/* ------------------------------------------------
   7. CARTE INTERACTIVE (LEAFLET)
   ------------------------------------------------ */

/* Zone de la carte — la hauteur explicite est obligatoire pour Leaflet */
#carte-leaflet {
    width: 100%;
    height: 480px;
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    border: 2px solid #c8d8c0;
    position: relative;      /* nécessaire pour que Leaflet se positionne bien */
    background-color: #e8f0e8;
}

/* Message de remplacement quand la carte ne peut pas se charger */
.carte-fallback {
    display: flex;           /* visible par défaut, masqué par JS si Leaflet charge */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
    padding: 32px;
    text-align: center;
    color: var(--couleur-texte-clair);
}

.carte-fallback p {
    font-size: 0.97rem;
    margin: 0;
}

.carte-fallback p:first-child {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--couleur-principale);
}

/* Légende sous la carte */
.carte-legende {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 16px;
    font-size: 0.9rem;
    color: var(--couleur-texte-clair);
}

.legende-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legende-puce {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}

.legende-puce-depart  { background-color: #2e6b3e; }
.legende-puce-arrivee { background-color: #3a6dbf; }

/* Popup Leaflet personnalisée */
.popup-carte {
    font-family: var(--font-corps);
    min-width: 200px;
}

.popup-carte h4 {
    font-family: var(--font-titre);
    color: var(--couleur-principale);
    margin-bottom: 6px;
    font-size: 1rem;
}

.popup-carte p {
    font-size: 0.88rem;
    color: var(--couleur-texte-clair);
    margin-bottom: 10px;
    line-height: 1.5;
}

/* Bouton Google Maps dans la popup */
.popup-gmaps {
    display: inline-block;
    background-color: var(--couleur-principale);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.2s;
}

.popup-gmaps:hover {
    background-color: #1d4d2b;
    text-decoration: none;
    color: #fff;
}

/* ------------------------------------------------
   8. ACTIVITÉS
   ------------------------------------------------ */

/* Fond de section avec texture de points subtile */
.activites-section {
    background-color: #f2f7f3;
    background-image: radial-gradient(rgba(46,107,62,0.07) 1.5px, transparent 1.5px);
    background-size: 28px 28px;
}

/* Grille flex : 4 par ligne, dernière rangée centrée */
.activites-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin-top: 48px;
}

/* ── Carte ────────────────────────────────────── */
.activite-card {
    background: var(--couleur-blanc);
    border-radius: 14px;
    padding: 32px 24px 28px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: calc(25% - 18px);        /* 4 par ligne */
    min-width: 220px;

    /* État initial pour l'animation d'apparition */
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity   0.55s ease,
        transform 0.55s ease,
        box-shadow 0.25s ease;

    /* Perspective pour l'effet 3D */
    will-change: transform;
}

/* Carte visible (classe ajoutée par IntersectionObserver) */
.activite-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Survol — élévation + ombre renforcée (remplacé par JS pour le tilt) */
.activite-card:hover {
    box-shadow: 0 12px 36px rgba(46,107,62,0.18);
}

/* ── Icône ────────────────────────────────────── */
.activite-icone-wrap {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #e8f5ec, #d0ecd8);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.activite-card:hover .activite-icone-wrap {
    transform: scale(1.12) rotate(-4deg);
}

.activite-icone {
    font-size: 1.8rem;
    line-height: 1;
}

/* ── Contenu ──────────────────────────────────── */
.activite-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.activite-body h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--couleur-principale);
    margin: 0;
    line-height: 1.3;
}

.activite-body p {
    font-size: 0.91rem;
    color: var(--couleur-texte-clair);
    line-height: 1.65;
    margin: 0;
}


/* ------------------------------------------------
   8. PUBLIC CIBLE
   ------------------------------------------------ */

.public-section {
    background-color: var(--couleur-fond);
}

/* ── Grille personas ────────────────────────────── */
.personas-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 48px;
}

/* ── Carte persona ──────────────────────────────── */
.persona-card {
    background: var(--couleur-blanc);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.persona-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 40px rgba(0,0,0,0.13);
}

/* Bandeau coloré en haut de la carte */
.persona-header {
    height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    position: relative;
}

.persona-header--vert {
    background: linear-gradient(135deg, #1d4d2b, #3d8a52);
}

.persona-header--ocre {
    background: linear-gradient(135deg, #8a5515, #c8832a);
}

/* Grand emoji avatar dans un cercle blanc */
.persona-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    border: 3px solid rgba(255,255,255,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    line-height: 1;
    backdrop-filter: blur(4px);
}

/* Badge pill sur le bandeau */
.persona-badge {
    background: rgba(255,255,255,0.22);
    color: var(--couleur-blanc);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.35);
}

/* Corps de la carte */
.persona-body {
    padding: 28px 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.persona-body h3 {
    font-family: var(--font-titre);
    font-size: 1.25rem;
    color: var(--couleur-principale);
    margin: 0;
}

.persona-body p {
    font-size: 0.95rem;
    color: var(--couleur-texte-clair);
    line-height: 1.7;
    margin: 0;
}

/* Tags chips */
.persona-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.persona-tag {
    background: var(--couleur-fond-alt);
    color: var(--couleur-principale);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid #c8d8c0;
}

/* ── Bloc transmission citation ─────────────────── */
.transmission-bloc {
    margin-top: 56px;
    background: linear-gradient(135deg, #1a3d24, #2e6b3e);
    border-radius: 16px;
    padding: 56px 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Guillemet décoratif géant */
.transmission-guillemet {
    font-family: Georgia, serif;
    font-size: 10rem;
    line-height: 0.6;
    color: rgba(255,255,255,0.08);
    position: absolute;
    top: 28px;
    left: 36px;
    pointer-events: none;
    user-select: none;
}

.transmission-texte {
    font-family: var(--font-titre);
    font-size: 1.25rem;
    font-style: italic;
    color: rgba(255,255,255,0.92);
    line-height: 1.8;
    max-width: 780px;
    margin: 0 auto 24px;
    position: relative;
    z-index: 1;
}

.transmission-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    position: relative;
    z-index: 1;
}


/* ------------------------------------------------
   9. ACTIVITÉ TEST
   ------------------------------------------------ */
.test-container {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 40px;
    align-items: start;
    margin-top: 40px;
    background: var(--couleur-blanc);
    border-radius: var(--rayon);
    padding: 40px;
    box-shadow: var(--ombre);
}

.test-info {
    text-align: center;
    min-width: 160px;
}

.test-date-block {
    background: var(--couleur-principale);
    color: var(--couleur-blanc);
    border-radius: var(--rayon);
    padding: 20px 24px;
    margin-bottom: 16px;
}

.test-date-day {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.85;
}

.test-date-num {
    font-family: var(--font-titre);
    font-size: 3.5rem;
    font-weight: bold;
    line-height: 1;
    margin: 6px 0;
}

.test-date-month {
    font-size: 0.95rem;
    font-weight: 600;
}

.test-horaires {
    background: var(--couleur-accent);
    color: var(--couleur-blanc);
    border-radius: var(--rayon);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.horaire-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.85;
}

.horaire-value {
    font-size: 1.1rem;
    font-weight: 700;
}

.test-description h3 {
    font-family: var(--font-titre);
    color: var(--couleur-principale);
    font-size: 1.3rem;
    margin-bottom: 14px;
}

.test-description p {
    color: var(--couleur-texte-clair);
    margin-bottom: 14px;
}

.test-description ul {
    color: var(--couleur-texte-clair);
    margin-bottom: 16px;
}

.test-note {
    background: var(--couleur-fond-alt);
    border-left: 3px solid var(--couleur-accent);
    padding: 12px 16px;
    border-radius: 0 var(--rayon) var(--rayon) 0;
    font-size: 0.93rem;
}


/* ------------------------------------------------
   10. ÉCO-RESPONSABILITÉ
   ------------------------------------------------ */
.eco-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-top: 40px;
}

.eco-card {
    background: var(--couleur-blanc);
    border-radius: var(--rayon);
    padding: 28px 24px;
    box-shadow: var(--ombre);
}

.eco-icon {
    font-size: 2rem;
    margin-bottom: 12px;
}

.eco-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--couleur-principale);
    margin-bottom: 10px;
}

.eco-card p {
    font-size: 0.92rem;
    color: var(--couleur-texte-clair);
}


/* ------------------------------------------------
   11. ÉQUIPE
   ------------------------------------------------ */
/* Grille fixe 4 colonnes — bascule en 2 puis 1 sur mobile */
.equipe-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    margin-top: 40px;
}

/* Carte membre : colonne centrée, hauteur identique pour toutes */
.membre-card {
    background: var(--couleur-blanc);
    border-radius: var(--rayon);
    padding: 36px 20px 28px;
    box-shadow: var(--ombre);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    /* Le bouton Strava est toujours collé en bas grâce à margin-top: auto */
}

/* Conteneur photo : taille fixe pour que le cercle soit parfait */
.membre-photo-wrap {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;              /* force le cercle même si l'image déborde */
    border: 4px solid var(--couleur-secondaire);
    flex-shrink: 0;
    background-color: var(--couleur-fond-alt);  /* fond pendant le chargement */
}

/* Photo : remplit exactement le cercle */
.membre-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.membre-nom {
    font-size: 1rem;
    font-weight: 700;
    color: var(--couleur-principale);
    margin: 0;
    line-height: 1.3;
}

.membre-formation {
    font-size: 0.82rem;
    color: var(--couleur-texte-clair);
    margin: 0;
    flex-grow: 1;   /* pousse le bouton Strava vers le bas, toutes cartes alignées */
}

/* Bouton Strava */
.btn-strava {
    display: inline-block;
    margin-top: auto;
    padding: 8px 20px;
    background-color: #fc4c02;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 20px;
    text-decoration: none;
    transition: background-color 0.2s, transform 0.15s;
    white-space: nowrap;
}

.btn-strava:hover {
    background-color: #d93d00;
    transform: translateY(-2px);
    text-decoration: none;
    color: #fff;
}


/* ------------------------------------------------
   12. CONTACT
   ------------------------------------------------ */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-top: 40px;
    align-items: start;
}

.contact-form-bloc h3,
.contact-autres h3 {
    font-family: var(--font-titre);
    font-size: 1.2rem;
    color: var(--couleur-principale);
    margin-bottom: 20px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--couleur-texte);
}

.form-group input,
.form-group textarea {
    border: 1px solid #ccc;
    border-radius: var(--rayon);
    padding: 10px 14px;
    font-size: 0.97rem;
    font-family: var(--font-corps);
    color: var(--couleur-texte);
    background: var(--couleur-blanc);
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--couleur-principale);
}

.form-group textarea {
    resize: vertical;
}

.form-confirmation {
    margin-top: 12px;
    padding: 12px 16px;
    background: #e6f4ec;
    border-left: 3px solid var(--couleur-principale);
    border-radius: 0 var(--rayon) var(--rayon) 0;
    color: var(--couleur-principale);
    font-weight: 600;
    font-size: 0.95rem;
}

.form-erreur {
    margin-top: 12px;
    padding: 12px 16px;
    background: #fdecea;
    border-left: 3px solid #c0392b;
    border-radius: 0 var(--rayon) var(--rayon) 0;
    color: #c0392b;
    font-weight: 600;
    font-size: 0.95rem;
}

.contact-autres {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-autres p {
    color: var(--couleur-texte-clair);
    font-size: 0.97rem;
}

.contact-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: var(--rayon);
    font-weight: 600;
    font-size: 0.97rem;
    text-decoration: none;
    transition: opacity 0.2s;
    color: var(--couleur-blanc);
}

.contact-btn:hover {
    opacity: 0.88;
    text-decoration: none;
}

.contact-btn-email {
    background-color: var(--couleur-principale);
}

.contact-btn-instagram {
    background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
}

.contact-info {
    margin-top: 12px;
    padding: 16px;
    background: var(--couleur-fond-alt);
    border-radius: var(--rayon);
    font-size: 0.92rem;
    color: var(--couleur-texte-clair);
    line-height: 1.8;
}


/* ------------------------------------------------
   13. FOOTER
   ------------------------------------------------ */
#footer {
    background-color: #1a3d24;
    color: rgba(255,255,255,0.85);
    padding: 48px 20px 0;
}

.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 32px;
    padding-bottom: 36px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

.footer-col h4 {
    font-family: var(--font-titre);
    color: var(--couleur-blanc);
    margin-bottom: 10px;
    font-size: 1rem;
}

.footer-col p {
    font-size: 0.9rem;
    line-height: 1.75;
    color: rgba(255,255,255,0.75);
}

.footer-link {
    display: block;
    color: rgba(255,255,255,0.75);
    font-size: 0.9rem;
    margin-bottom: 6px;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-link:hover {
    color: var(--couleur-blanc);
    text-decoration: none;
}

.footer-bottom {
    text-align: center;
    padding: 16px 0;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.45);
}


/* ------------------------------------------------
   14. BOUTON RETOUR EN HAUT
   ------------------------------------------------ */
#back-to-top {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 44px;
    height: 44px;
    background-color: var(--couleur-principale);
    color: var(--couleur-blanc);
    border: none;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
    display: none;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, transform 0.2s;
    z-index: 999;
}

#back-to-top:hover {
    background-color: #1d4d2b;
    transform: translateY(-2px);
}

#back-to-top.visible {
    display: flex;
}


/* ------------------------------------------------
   15. RESPONSIVE – MOBILE
   ------------------------------------------------ */
@media (max-width: 768px) {

    /* Carte : hauteur réduite sur mobile */
    #carte-leaflet {
        height: 320px;
    }

    /* Navigation : menu burger */
    /* Public cible : 1 colonne sur tablette */
    .personas-grid {
        grid-template-columns: 1fr;
    }

    .transmission-bloc {
        padding: 40px 28px;
    }

    .transmission-texte {
        font-size: 1.05rem;
    }

    /* Activités : 2 par ligne sur tablette */
    .activite-card {
        width: calc(50% - 12px);
    }

    /* Projet : 1 colonne sur tablette */
    .projet-cartes {
        grid-template-columns: 1fr;
    }

    .projet-concept {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 40px 28px;
    }

    /* Image concept passe sous le texte */
    .projet-concept-image {
        aspect-ratio: 16 / 9;
    }

    /* Équipe : 2 colonnes sur tablette */
    .equipe-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Vidéo hero visible sur mobile */
    .hero-video {
        display: block;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background-color: var(--couleur-principale);
        padding: 12px 0 20px;
        gap: 0;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links a {
        padding: 10px 24px;
        font-size: 0.97rem;
        border-radius: 0;
    }

    /* Hero */
    .hero-title {
        font-size: 2rem;
    }

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

    /* Sections communes */
    .section-title {
        font-size: 1.6rem;
    }

    /* Test container en colonne */
    .test-container {
        grid-template-columns: 1fr;
        padding: 28px 20px;
    }

    .test-info {
        display: flex;
        gap: 16px;
        align-items: center;
        justify-content: center;
    }

    .test-date-block {
        margin-bottom: 0;
    }

    /* Contact en colonne */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    /* Section padding réduit */
    .section {
        padding: 60px 16px;
    }
}

@media (max-width: 480px) {
    /* Activités : 1 par ligne sur mobile */
    .activite-card {
        width: 100%;
        min-width: unset;
    }

    /* Équipe : 1 colonne sur mobile */
    .equipe-grid {
        grid-template-columns: 1fr;
    }

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

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }
}


/* ================================================
   SECTION RÉSERVATION
   ================================================ */

.resa-section {
    background: linear-gradient(160deg, #f7f5f0 0%, #eef4ee 100%);
}

.resa-wrapper {
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 8px 40px rgba(46,107,62,0.10);
    padding: 48px 48px 40px;
}

.resa-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.resa-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.resa-row--single {
    grid-template-columns: 1fr;
    max-width: 320px;
}

.resa-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.resa-field label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--couleur-texte);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.resa-required {
    color: #c0392b;
}

.resa-field input {
    padding: 12px 16px;
    border: 1.5px solid #d5ddd5;
    border-radius: 10px;
    font-size: 1rem;
    font-family: var(--font-corps);
    color: var(--couleur-texte);
    background: #fafafa;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.resa-field input:focus {
    border-color: var(--couleur-principale);
    box-shadow: 0 0 0 3px rgba(46,107,62,0.12);
    background: #fff;
}

.resa-field input::placeholder {
    color: #aab5aa;
}

.resa-actions {
    margin-top: 8px;
}

.resa-btn {
    min-width: 240px;
    font-size: 1.05rem;
    padding: 14px 36px;
    border-radius: 50px;
}

.resa-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.resa-message {
    padding: 14px 20px;
    border-radius: 10px;
    font-size: 0.97rem;
    font-weight: 500;
    margin-top: 4px;
}

.resa-message--ok {
    background: #eaf5ec;
    color: #217a3c;
    border: 1px solid #a8d5b5;
}

.resa-message--erreur {
    background: #fdf0ef;
    color: #c0392b;
    border: 1px solid #f0b8b3;
}

@media (max-width: 600px) {
    .resa-wrapper {
        padding: 28px 20px 24px;
    }

    .resa-row {
        grid-template-columns: 1fr;
    }

    .resa-row--single {
        max-width: 100%;
    }
}