:root {
        --primary-blue: #003366;
        --primary-red: #D81E2B;
        --light-gray: #f4f4f4;
        --white: #ffffff;
        --whatsapp-green: #25D366;
        --instagram-gradient: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
        --agenda-blue: #007bff;
        --nav-height: 80px;
        --page-pad: 20px;
    }

    *, *::before, *::after { box-sizing: border-box; }

    html {
        scroll-behavior: smooth;
        scroll-padding-top: calc(var(--nav-height) + 58px);
        -webkit-text-size-adjust: 100%;
    }
    body {
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        margin: 0; padding: 0; color: #333; line-height: 1.6;
        overflow-x: hidden;
        -webkit-tap-highlight-color: rgba(216,30,43,0.15);
    }
    img, video { max-width: 100%; }
    a { -webkit-tap-highlight-color: rgba(216,30,43,0.2); }

    /* ============ NAVIGATION ============ */
    nav {
        background-color: var(--white);
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        padding: 0 clamp(20px, 3vw, 46px);
        display: flex; justify-content: space-between; align-items: center;
        position: sticky; top: 0; z-index: 1000;
        height: var(--nav-height);
    }
    .nav-logo img { height: 70px; width: auto; cursor: pointer; display: block; }
    .nav-links { display: flex; align-items: center; }
    .nav-links a {
        text-decoration: none; color: var(--primary-blue); margin-left: 1rem;
        font-weight: bold; text-transform: uppercase; font-size: 0.8rem;
        transition: color 0.3s; white-space: nowrap;
    }
    .nav-links a:hover { color: var(--primary-red); }

    .nav-insta-btn {
        background: var(--instagram-gradient); color: white !important;
        width: 38px; height: 38px; min-width: 38px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.2rem !important; margin-left: 1rem; transition: transform 0.3s;
    }
    .nav-insta-btn:hover { transform: scale(1.1); }
    .menu-only-label { display: none; }
    .agenda-btn {
        background-color: var(--agenda-blue); color: white !important;
        padding: 10px 16px; border-radius: 6px; margin-left: 1rem;
        display: inline-flex; align-items: center; gap: 6px;
    }
    .agenda-btn:hover { background-color: #0056b3; }
    .cta-button {
        background-color: var(--primary-red); color: white !important;
        padding: 10px 18px; border-radius: 6px; margin-left: 1rem;
    }
    .cta-button:hover { background-color: #b01823; color: white !important; }

    /* Bouton hamburger (mobile) — dessiné en CSS, aucune dépendance externe */
    .nav-toggle {
        display: none;
        background: none; border: 0; padding: 12px 10px; margin-right: -10px;
        cursor: pointer;
        width: 46px; height: 46px;
    }
    .nav-toggle span {
        display: block; width: 24px; height: 3px; border-radius: 3px;
        background: var(--primary-blue); margin: 0 auto;
        transition: transform 0.28s, opacity 0.2s;
    }
    .nav-toggle span + span { margin-top: 5px; }
    body.menu-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
    body.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    /* z-index volontairement < celui de <nav> : le panneau du menu est un
       enfant de <nav>, il doit donc rester au-dessus du fond sombre. */
    .nav-backdrop {
        position: fixed; inset: 0; background: rgba(0,0,0,0.5);
        opacity: 0; pointer-events: none; transition: opacity 0.3s;
        z-index: 999;
    }
    body.menu-open .nav-backdrop { opacity: 1; pointer-events: auto; }
    body.menu-open { overflow: hidden; }

    /* ============ HERO ============ */
    header {
        position: relative;
        min-height: 88vh; min-height: 88svh;
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        text-align: center; color: white;
        padding: 60px var(--page-pad); overflow: hidden;
    }
    .hero-img-bg {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        object-fit: cover; z-index: 0;
    }
    .hero-overlay {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background: linear-gradient(rgba(0,51,102,0.35), rgba(0,51,102,0.45));
        z-index: 1;
    }
    .hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 100%; }
    header h1 {
        font-size: clamp(2.1rem, 8vw, 7.5rem);
        margin: 0 0 8px; text-transform: uppercase;
        text-shadow: 2px 2px 6px rgba(0,0,0,0.5); line-height: 1.1;
    }
    header h2 {
        font-size: clamp(1.05rem, 4.2vw, 1.5rem); font-weight: 300;
        margin: 0 0 25px; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); font-style: italic;
    }
    .header-logos {
        margin-top: 25px; background: rgba(255,255,255,0.95);
        padding: 12px 25px; border-radius: 50px;
        display: flex; gap: 15px; align-items: center; justify-content: center;
        flex-wrap: wrap; max-width: 100%;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    }
    .header-logos img { height: 60px; width: auto; }
    .header-logos span { color: #003366; font-weight: bold; font-size: 1rem; }

    /* ============ ANNONCE DE REPRISE ============ */
    .annonce-bandeau {
        background: linear-gradient(135deg, var(--primary-blue) 0%, #004a91 100%);
        color: #fff; padding: 26px var(--page-pad);
    }
    .annonce-inner {
        max-width: 1100px; margin: 0 auto;
        display: flex; align-items: center; justify-content: space-between;
        gap: 24px; flex-wrap: wrap;
    }
    .annonce-texte { flex: 1 1 320px; }
    .annonce-kicker {
        display: inline-block; font-size: 0.75rem; font-weight: bold;
        text-transform: uppercase; letter-spacing: 1.5px;
        color: #ffd9dd; margin-bottom: 6px;
    }
    .annonce-titre {
        margin: 0; font-size: clamp(1.25rem, 3.6vw, 1.75rem);
        font-weight: 300; line-height: 1.25;
    }
    .annonce-titre strong { font-weight: bold; white-space: nowrap; }
    .annonce-detail { margin: 6px 0 0; font-size: 0.95rem; color: #cfe0f0; }
    .annonce-btn {
        flex: 0 0 auto;
        display: inline-flex; align-items: center; justify-content: center; gap: 10px;
        background: var(--primary-red); color: #fff !important;
        padding: 15px 30px; border-radius: 8px;
        font-weight: bold; text-decoration: none; font-size: 1.05rem;
        transition: background 0.3s, transform 0.2s;
        box-shadow: 0 6px 18px rgba(0,0,0,0.2);
    }
    .annonce-btn:hover { background: #b01823; transform: translateY(-2px); }

    /* ============ NOS OFFRES ============ */
    .offres-sous-titre {
        text-align: center; color: #888; font-weight: normal;
        text-transform: uppercase; letter-spacing: 2px; font-size: 0.85rem;
        margin: 0 0 22px;
    }
    .offres-grid { display: grid; gap: 25px; margin-bottom: 45px; align-items: stretch; }
    .offres-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); max-width: 850px; margin-inline: auto; }
    .offres-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }

    .offre-card {
        position: relative; background: #fff; border-radius: 15px;
        padding: 32px 28px; box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        display: flex; flex-direction: column;
        border-top: 4px solid var(--primary-blue);
    }
    .offre-vedette { border-top-color: var(--primary-red); }
    .offre-badge {
        position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
        background: var(--primary-red); color: #fff;
        font-size: 0.72rem; font-weight: bold; text-transform: uppercase;
        letter-spacing: 1px; padding: 6px 14px; border-radius: 20px;
        white-space: nowrap;
    }
    .offre-card h4 {
        margin: 0 0 8px; color: var(--primary-blue);
        font-size: 1.35rem; line-height: 1.25;
    }
    .offre-desc { margin: 0 0 18px; color: #666; font-size: 0.95rem; line-height: 1.5; }
    .offre-prix {
        font-size: 2.1rem; font-weight: bold; color: var(--primary-blue);
        line-height: 1; margin-bottom: 6px;
    }
    .offre-prix .prix-dec, .offre-prix > span:not([class]) { font-size: 1.1rem; font-weight: normal; }
    .offre-repere { margin: 0 0 18px; color: var(--primary-red); font-size: 0.9rem; font-weight: bold; }
    .offre-famille { margin: 0 0 18px; color: #888; font-size: 0.85rem; }
    .offre-liste { list-style: none; padding: 0; margin: 0 0 26px; }
    .offre-liste li {
        position: relative; padding: 0 0 0 24px; margin-bottom: 9px;
        font-size: 0.94rem; color: #444; line-height: 1.45;
    }
    .offre-liste li::before {
        content: '✓'; position: absolute; left: 0; top: 0;
        color: var(--primary-red); font-weight: bold;
    }
    .offre-btn {
        margin-top: auto; display: block; text-align: center;
        background: var(--primary-red); color: #fff !important;
        padding: 14px 20px; border-radius: 8px; font-weight: bold;
        text-decoration: none; transition: background 0.3s;
    }
    .offre-btn:hover { background: #b01823; }
    .offre-card-compact { padding: 28px 24px; }
    .offre-card-compact h4 { font-size: 1.15rem; }
    .offre-card-compact .offre-prix { font-size: 1.8rem; }
    .offres-note {
        text-align: center; color: #777; font-size: 0.9rem;
        line-height: 1.7; max-width: 720px; margin: 0 auto;
    }

    /* ============ INSTAGRAM (carrousel) ============ */
    .insta-carousel { position: relative; max-width: 1100px; margin: 0 auto; }
    .insta-track {
        display: flex; align-items: flex-start; gap: 20px;
        overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
        padding: 4px;
    }
    .insta-track::-webkit-scrollbar { display: none; }
    .insta-slide {
        flex: 0 0 calc((100% - 40px) / 3);
        min-width: 0; scroll-snap-align: start;
    }
    .insta-slide .instagram-media {
        min-width: 0 !important; width: 100% !important;
        margin: 0 !important; border-radius: 12px !important;
    }
    .insta-dot {
        display: inline-block; width: 10px; height: 10px; background: #ccc;
        border: 0; padding: 0; border-radius: 50%; margin: 0 5px;
        cursor: pointer; transition: background 0.3s;
    }
    .insta-dot.active { background: var(--primary-red); }
    .insta-nav-mobile {
        display: none;
        width: 44px; height: 44px; border-radius: 50%; border: 0;
        background: var(--primary-blue); color: #fff; font-size: 1.1rem;
        cursor: pointer; align-items: center; justify-content: center;
    }
    @media (max-width: 1000px) { .insta-slide { flex-basis: calc((100% - 20px) / 2); } }
    @media (max-width: 700px)  { .insta-slide { flex-basis: 100%; } }
    .insta-cta { text-align: center; }
    .insta-btn {
        display: inline-flex; align-items: center; gap: 10px;
        background: var(--instagram-gradient); color: #fff !important;
        padding: 14px 28px; border-radius: 8px;
        font-weight: bold; text-decoration: none;
        transition: transform 0.2s;
    }
    .insta-btn:hover { transform: translateY(-2px); }

    /* ============ SECTIONS ============ */
    section { padding: 60px var(--page-pad); max-width: 1200px; margin: 0 auto; }
    .section-title {
        text-align: center; color: var(--primary-blue);
        font-size: clamp(1.5rem, 5.5vw, 2.2rem); margin: 0 0 40px;
        text-transform: uppercase; position: relative; line-height: 1.25;
    }
    .section-title::after {
        content: ''; display: block; width: 60px; height: 3px;
        background: var(--primary-red); margin: 15px auto 0;
    }

    .grid-3 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
        gap: 25px; text-align: center;
    }
    .bg-gray { background-color: var(--light-gray); width: 100%; max-width: 100%; }

    /* ============ CARDS ============ */
    .card {
        background: var(--white); padding: 30px 25px; border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08); transition: transform 0.3s;
        border-bottom: 5px solid transparent;
    }
    .card:hover { transform: translateY(-10px); border-bottom-color: var(--primary-red); }
    .card i { font-size: 3rem; color: var(--primary-red); margin-bottom: 20px; }
    .card-icone { height: 3.6rem; max-width: 6rem; width: auto; object-fit: contain;
                  display: block; margin: 0 auto 16px; }
    .card h3 { color: var(--primary-blue); margin: 0 0 15px; font-size: 1.3rem; }
    .card p { margin: 0; }

    /* ============ ÉQUIPE ============ */
    .philippe-container {
        display: grid; grid-template-columns: 1fr 1.6fr 1fr;
        align-items: center; gap: 30px; margin-bottom: 50px;
        background: white; padding: 30px; border-radius: 15px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    }
    .philippe-img img {
        width: 100%; border-radius: 10px; display: block;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1); object-fit: cover;
    }
    .philippe-text { font-size: 1.05rem; color: #444; text-align: justify; }
    .philippe-text p:first-child { margin-top: 0; }
    .philippe-text p:last-child { margin-bottom: 0; }

    .group-photo-container { text-align: center; margin: 40px auto 20px; }
    .group-photo-container img {
        width: 100%; max-width: 720px; height: auto; border-radius: 15px;
        box-shadow: 0 15px 40px rgba(0,0,0,0.15); display: inline-block;
    }

    .monitors-intro { text-align: center; font-size: 1.05rem; margin: 40px auto 20px; max-width: 800px; }
    .slogan-text {
        font-size: clamp(1.05rem, 4.5vw, 1.3rem); font-weight: bold;
        color: var(--primary-blue); margin-top: 20px; display: block; text-align: center;
    }

    .team-presentation {
        max-width: 900px; margin: 0 auto 20px; background: white;
        padding: 35px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.05);
        text-align: justify; font-size: 1.02rem; color: #444; line-height: 1.8;
        border-top: 4px solid var(--primary-red);
    }
    .team-presentation p { margin: 0 0 20px; }
    .team-presentation p:last-child { margin-bottom: 0; }
    .team-presentation strong { color: var(--primary-blue); font-size: 1.12rem; }

    /* ============ CARROUSEL ÉVÉNEMENTS ============ */
    .event-carousel-wrapper {
        position: relative; max-width: 1000px; margin: 0 auto;
        border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        background: white; overflow: hidden;
    }
    .event-track {
        display: flex;
        overflow-x: auto; scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .event-track::-webkit-scrollbar { display: none; }
    .event-slide {
        min-width: 100%; width: 100%; flex: 0 0 100%;
        scroll-snap-align: start; scroll-snap-stop: always;
        display: flex; flex-direction: row; align-items: stretch; background: white;
    }

    .event-poster {
        width: 45%; background: #f9f9f9; padding: 20px;
        display: flex; justify-content: center; align-items: center;
        border-right: 1px solid #eee;
    }
    .event-poster img {
        max-width: 100%; max-height: 420px; object-fit: contain;
        border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    .event-details {
        width: 55%; padding: 35px;
        display: flex; flex-direction: column; justify-content: center; text-align: left;
    }
    .event-details h3 { color: var(--primary-blue); font-size: clamp(1.3rem, 4.5vw, 1.8rem); margin: 0 0 15px; }
    .event-desc { font-size: 1.02rem; color: #555; margin: 0 0 20px; line-height: 1.6; }
    .event-video-container {
        width: 100%; margin-top: auto; border-radius: 8px; overflow: hidden;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1); background: #000;
    }
    .event-video-container video {
        width: 100%; display: block; max-height: 260px; background: #000;
    }

    .event-btn {
        display: inline-block; background-color: var(--primary-red); color: white;
        padding: 13px 25px; text-decoration: none; border-radius: 6px; font-weight: bold;
        align-self: flex-start; transition: background 0.3s; margin-bottom: 20px;
        min-height: 44px;
    }
    .event-btn:hover { background-color: #b01823; }
    .event-member-only {
        color: #888; font-weight: bold; border: 1px solid #ccc;
        padding: 10px 15px; border-radius: 6px; display: inline-block;
        align-self: flex-start; margin-bottom: 20px;
    }

    .event-dots {
        display: flex; align-items: center; justify-content: center;
        gap: 14px; margin-top: 20px;
    }
    .event-dots-inner { display: inline-flex; align-items: center; }
    .event-nav-mobile {
        display: none;
        width: 44px; height: 44px; border-radius: 50%; border: 0;
        background: var(--primary-blue); color: #fff; font-size: 1.1rem;
        cursor: pointer; align-items: center; justify-content: center;
    }
    .event-dot {
        display: inline-block; width: 12px; height: 12px; background: #ccc;
        border: 0; padding: 0; border-radius: 50%; margin: 0 6px;
        cursor: pointer; transition: background 0.3s;
    }
    .event-dot.active { background: var(--primary-red); }

    /* ============ GALERIE MÉDIA ============ */
    .carousel-container {
        position: relative; max-width: 1200px; margin: 0 auto;
        border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        background: #eaeaea; padding: 10px;
    }
    .carousel-track {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .carousel-track::-webkit-scrollbar { display: none; }
    .gallery-col {
        flex: 0 0 calc((100% - 30px) / 4);
        display: flex; flex-direction: column; gap: 10px;
        scroll-snap-align: start;
    }
    .gallery-item {
        position: relative; width: 100%; aspect-ratio: 1 / 1;
        border-radius: 6px; overflow: hidden; background: #000;
        border: 0; padding: 0; cursor: pointer; display: block;
    }
    /* Repli si aspect-ratio n'est pas supporté (vieux navigateurs) */
    @supports not (aspect-ratio: 1 / 1) {
        .gallery-item { height: 0; padding-bottom: 100%; }
        .gallery-item img { position: absolute; inset: 0; }
    }
    .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .gallery-item .play-badge {
        position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
        color: rgba(255,255,255,0.92); font-size: 2rem;
        text-shadow: 0 2px 8px rgba(0,0,0,0.6);
        background: rgba(0,0,0,0.15); pointer-events: none;
    }

    /* Flèches (Événements & Média) */
    .carousel-btn {
        position: absolute; top: 50%; transform: translateY(-50%);
        background: rgba(0,0,0,0.55); color: white; border: none;
        cursor: pointer; z-index: 10; font-size: 1.4rem;
        border-radius: 50%; width: 46px; height: 46px;
        display: flex; align-items: center; justify-content: center;
        transition: background 0.3s;
    }
    .carousel-btn:hover { background: rgba(216, 30, 43, 0.9); }
    .prev-btn { left: 14px; }
    .next-btn { right: 14px; }

    .swipe-hint { display: none; text-align: center; color: #888; font-size: 0.85rem; margin-top: 12px; }

    /* ============ LIGHTBOX ============ */
    .lightbox {
        position: fixed; inset: 0; background: rgba(0,0,0,0.94);
        z-index: 2000; display: none; align-items: center; justify-content: center;
        padding: 20px;
    }
    .lightbox.open { display: flex; }
    .lightbox img, .lightbox video {
        max-width: 100%; max-height: 88vh; max-height: 88svh;
        border-radius: 8px; object-fit: contain;
    }
    .lightbox-close {
        position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px;
        width: 46px; height: 46px; border-radius: 50%; border: 0;
        background: rgba(255,255,255,0.15); color: #fff; font-size: 1.5rem; cursor: pointer;
    }
    .lightbox-nav {
        position: absolute; top: 50%; transform: translateY(-50%);
        width: 46px; height: 46px; border-radius: 50%; border: 0;
        background: rgba(255,255,255,0.15); color: #fff; font-size: 1.4rem; cursor: pointer;
    }
    .lightbox-nav.prev { left: 12px; }
    .lightbox-nav.next { right: 12px; }

    /* ============ FAQ ============ */
    .faq-list { max-width: 800px; margin: 0 auto; }
    .faq-cat {
        max-width: 800px; margin: 45px auto 18px; padding-bottom: 8px;
        font-size: 1.15rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
        color: var(--primary-blue); border-bottom: 2px solid var(--primary-red);
    }
    .faq-list > .faq-cat:first-child { margin-top: 0; }
    .faq-item {
        background: white; margin-bottom: 10px; border-radius: 8px;
        overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.05); text-align: left;
    }
    .faq-item summary {
        padding: 16px 20px; cursor: pointer; font-weight: bold;
        color: var(--primary-blue); list-style: none;
        display: flex; justify-content: space-between; align-items: center; gap: 12px;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after { content: '+'; color: var(--primary-red); font-size: 1.4rem; flex: 0 0 auto; }
    .faq-item[open] summary::after { content: '\2013'; }
    .faq-item p {
        padding: 15px 20px; border-top: 1px solid #eee; color: #555;
        background: #fafafa; margin: 0; line-height: 1.6;
    }
    .faq-img-small { max-width: 320px; width: 100%; margin-top: 15px; border-radius: 8px; display: block; height: auto; }
    .faq-img { max-width: 100%; margin-top: 15px; border-radius: 8px; display: block; height: auto; }

    /* ============ SPONSORS ============ */
    /* Une grille plutôt qu'un alignement libre : huit logos font deux rangées
       de quatre, sans le dernier qui reste seul en bas. */
    .sponsors-grid {
        display: grid; grid-template-columns: repeat(4, 1fr);
        justify-items: center; align-items: center;
        gap: 38px 30px; max-width: 1000px; margin: 30px auto 0;
    }
    .sponsor-item img { height: 70px; width: auto; max-width: 170px; object-fit: contain; transition: transform 0.3s; }
    .sponsor-item:hover img { transform: scale(1.1); }

    /* ============ FOOTER ============ */
    footer { background-color: #1a1a1a; color: #ccc; padding: 60px var(--page-pad) 30px; }
    .footer-content {
        max-width: 1100px; margin: 0 auto;
        display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
        gap: 45px; align-items: start;
    }
    .footer-col h4 { color: var(--white); margin: 0 0 15px; font-size: 1.1rem; text-transform: uppercase; }
    .liste-liens-utiles { list-style: none; margin: 0; padding: 0; }
    .liste-liens-utiles li { margin-bottom: 10px; padding-left: 0; }
    .liste-liens-utiles li::before { content: none; }
    .liste-liens-utiles a {
        color: #ccc; text-decoration: none; font-size: 0.95rem; line-height: 1.45;
        display: inline-flex; align-items: baseline; gap: 8px;
    }
    .liste-liens-utiles a::before { content: '\203A'; color: var(--primary-red); font-weight: bold; }
    .liste-liens-utiles a:hover { color: var(--white); }

    .social-round-links { display: flex; gap: 10px; margin: 15px 0 25px; }
    .social-round-btn {
        width: 44px; height: 44px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        color: white; font-size: 1.2rem; text-decoration: none; transition: transform 0.3s;
    }
    .social-round-btn:hover { transform: scale(1.1); }
    .bg-fb { background-color: #1877F2; }
    .bg-insta { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }

    .footer-logos-row { display: flex; gap: 15px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
    .footer-logo-small { height: 45px; width: auto; background: white; padding: 5px; border-radius: 6px; }

    .contact-btn-block {
        display: flex; align-items: center; justify-content: center; gap: 10px;
        width: 100%; padding: 16px; color: white; font-weight: bold;
        border-radius: 8px; margin-bottom: 15px; text-decoration: none;
        font-size: 1rem; transition: opacity 0.3s;
        border: 0; font-family: inherit; cursor: pointer; text-align: center;
    }
    .contact-btn-block:hover { opacity: 0.9; color: white; }
    .btn-red-block { background-color: #D81E2B; }
    .btn-green-block { background-color: #25D366; }

    /* Bouton email : révèle l'adresse au lieu d'ouvrir une application de messagerie */
    .contact-btn-block.is-revealed {
        user-select: all; -webkit-user-select: all;
        letter-spacing: 0.2px; word-break: break-word;
    }
    .email-status {
        font-size: 0.85rem; color: #aaa; text-align: center;
        margin: -8px 0 15px; min-height: 1.2em;
    }
    .email-status.ok { color: #7ed99a; }
    @media (max-width: 380px) {
        .contact-btn-block.is-revealed { font-size: 0.9rem; padding: 16px 8px; }
    }

    .copyright { border-top: 1px solid #333; padding-top: 30px; margin-top: 40px; font-size: 0.8rem; text-align: center; }
    .cgv-link a { color: #ccc; text-decoration: underline; }

    /* ============ RESPONSIVE ============ */
    @media (max-width: 1100px) {
        .nav-links a { margin-left: 0.7rem; font-size: 0.75rem; }
    }

    /* --- Tablette --- */
    @media (max-width: 950px) {
        .gallery-col { flex-basis: calc((100% - 20px) / 3); }
    }

    @media (max-width: 900px) {
        .event-slide { flex-direction: column; }
        .event-poster { width: 100%; border-right: none; border-bottom: 1px solid #eee; padding: 16px; }
        .event-poster img { max-height: 330px; }
        .event-details { width: 100%; padding: 24px 20px; }

        /* Les flèches passent sous le carrousel pour ne plus recouvrir le texte */
        .event-carousel-wrapper .carousel-btn { display: none; }
        .event-nav-mobile { display: inline-flex; }

        /* Vidéos verticales : centrées, sans grandes bandes noires */
        .event-video-container { background: transparent; box-shadow: none; }
        .event-video-container video {
            width: auto; max-width: 100%; max-height: 55vh;
            margin: 0 auto; border-radius: 8px;
        }
        .philippe-container { grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px; align-items: start; }
        .philippe-text { grid-column: 1 / -1; order: 2; }
        .philippe-img img { aspect-ratio: 3 / 4; object-fit: cover; }
    }

    /* --- Menu mobile --- */
    @media (max-width: 900px) {
        :root { --nav-height: 68px; --page-pad: 16px; }
        .nav-logo img { height: 48px; }
        .nav-toggle { display: block; }
        .nav-links {
            position: fixed; top: 0; right: 0;
            width: min(320px, 86vw); height: 100%; height: 100dvh;
            background: var(--white);
            flex-direction: column; align-items: stretch; justify-content: flex-start;
            gap: 4px;
            padding: calc(var(--nav-height) + 20px) 22px calc(30px + env(safe-area-inset-bottom));
            box-shadow: -4px 0 25px rgba(0,0,0,0.25);
            transform: translateX(100%); transition: transform 0.32s ease;
            z-index: 1500; overflow-y: auto;
        }
        body.menu-open .nav-links { transform: translateX(0); }
        .nav-links a {
            margin-left: 0; font-size: 1rem; padding: 15px 4px;
            border-bottom: 1px solid #eee;
        }
        .nav-links .nav-insta-btn {
            width: auto; height: auto; border-radius: 8px;
            justify-content: flex-start; gap: 12px;
            padding: 15px 18px; margin: 18px 0 0; font-size: 1rem !important;
            border-bottom: 0;
        }
        .menu-only-label { display: inline; font-weight: bold; }
        .nav-links .agenda-btn,
        .nav-links .cta-button {
            margin: 10px 0 0; padding: 15px 18px; font-size: 1rem;
            justify-content: center; border-bottom: 0; text-align: center;
        }
        .menu-close-btn {
            position: absolute; top: 14px; right: 16px;
            background: none; border: 0; font-size: 1.7rem; color: var(--primary-blue);
            cursor: pointer; padding: 6px 10px;
        }
    }
    @media (min-width: 901px) { .menu-close-btn { display: none; } }

    /* --- Téléphone --- */
    @media (max-width: 700px) {
        section { padding: 45px var(--page-pad); }
        .section-title { margin-bottom: 30px; }
        header { min-height: 78vh; min-height: 78svh; padding: 40px var(--page-pad); }
        .header-logos { padding: 10px 18px; gap: 10px; margin-top: 20px; }
        .header-logos img { height: 46px; }
        .header-logos span { font-size: 0.85rem; }

        .card { padding: 25px 20px; }
        .card i { font-size: 2.4rem; margin-bottom: 14px; }
        .card-icone { height: 3rem; max-width: 5rem; margin-bottom: 12px; }

        .philippe-container { gap: 12px; padding: 16px; border-radius: 12px; }
        .philippe-text { font-size: 1rem; text-align: left; }
        .team-presentation { padding: 24px 20px; text-align: left; font-size: 1rem; line-height: 1.7; }
        .group-photo-container { margin: 30px auto 10px; }

        .carousel-container { padding: 8px; border-radius: 12px; }
        .carousel-track { gap: 8px; }
        .gallery-col { flex-basis: calc((100% - 8px) / 2); gap: 8px; }
        .carousel-btn { width: 38px; height: 38px; font-size: 1.1rem; }
        .prev-btn { left: 6px; }
        .next-btn { right: 6px; }
        .swipe-hint { display: block; }

        .event-poster img { max-height: 260px; }
        .event-btn, .event-member-only { align-self: stretch; text-align: center; }

        .faq-cat { font-size: 1rem; margin: 32px auto 14px; }
        .faq-item summary { padding: 15px 16px; font-size: 0.98rem; }
        .faq-item p { padding: 14px 16px; }

        .sponsors-grid { gap: 26px 24px; grid-template-columns: repeat(3, 1fr); }
        .sponsor-item img { height: 48px; }

        .annonce-bandeau { padding: 22px var(--page-pad); }
        .annonce-inner { flex-direction: column; align-items: stretch; text-align: center; gap: 18px; }
        /* en colonne, flex-basis s'applique à la hauteur : on le neutralise */
        .annonce-texte { flex: 0 0 auto; }
        .annonce-btn { width: 100%; padding: 16px 20px; }

        .insta-carousel .carousel-btn { display: none; }
        .insta-nav-mobile { display: inline-flex; }
        .insta-track { gap: 14px; }

        footer { padding: 45px var(--page-pad) 25px; }
        .footer-content { text-align: center; gap: 35px; }
        .footer-logos-row { justify-content: center; }
        .social-round-links { justify-content: center; }
        .footer-logo-small { height: 40px; }
    }

    @media (max-width: 380px) {
        .header-logos img { height: 40px; }
    }

    @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        .event-track, .carousel-track { scroll-behavior: auto; }
        * { transition-duration: 0.01ms !important; }
    }

/* ============ MULTI-PAGES ============ */
.nav-links a.actif { color: var(--primary-red); }
/* Bandeau de contact figé juste sous la barre de navigation :
   les numéros et l'adresse restent accessibles partout, tout le temps. */
.barre-contact {
    background: var(--primary-blue); color: #cfe0f0;
    font-size: 0.9rem; padding: 9px var(--page-pad);
    position: sticky; top: var(--nav-height); z-index: 999;
}
.barre-contact-inner {
    max-width: 1200px; margin: 0 auto;
    display: flex; justify-content: center; align-items: center;
    gap: 28px; flex-wrap: wrap;
}
.barre-contact a { color: #fff; text-decoration: none; font-weight: bold; white-space: nowrap; }
.barre-contact a:hover { text-decoration: underline; }
.barre-contact i { color: #8fb8dd; margin-right: 7px; }
@media (max-width: 700px) {
    .barre-contact { font-size: 0.85rem; padding: 8px var(--page-pad); }
    .barre-contact-inner { gap: 6px 18px; }
}

/* En-tête de page intérieure */
.page-entete {
    position: relative; padding: 70px var(--page-pad) 60px;
    background: linear-gradient(135deg, var(--primary-blue) 0%, #004a91 100%);
    color: #fff; text-align: center;
}
.page-entete h1 {
    margin: 0 0 12px; font-size: clamp(1.8rem, 6vw, 3rem);
    text-transform: uppercase; line-height: 1.15;
}
.page-entete p { margin: 0 auto; max-width: 720px; color: #cfe0f0; font-size: 1.05rem; }
.page-entete::after {
    content: ''; display: block; width: 60px; height: 3px;
    background: var(--primary-red); margin: 22px auto 0;
}

/* ============ FORMULAIRES ============ */
.form-bloc {
    max-width: 760px; margin: 0 auto; background: #fff;
    padding: 38px 34px; border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-top: 4px solid var(--primary-red);
}
.form-ligne { margin-bottom: 20px; }
.form-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .form-duo { grid-template-columns: 1fr; gap: 0; } }
.form-bloc label {
    display: block; margin-bottom: 7px;
    font-weight: bold; color: var(--primary-blue); font-size: 0.94rem;
}
.form-bloc .oblig { color: var(--primary-red); }
.form-bloc input[type="text"],
.form-bloc input[type="email"],
.form-bloc input[type="tel"],
.form-bloc input[type="date"],
.form-bloc select,
.form-bloc textarea {
    width: 100%; padding: 13px 15px; font-size: 1rem; font-family: inherit;
    border: 1px solid #d5d5d5; border-radius: 8px; background: #fcfcfc;
    color: #333; transition: border-color 0.2s, box-shadow 0.2s;
}
.form-bloc input:focus, .form-bloc select:focus, .form-bloc textarea:focus {
    outline: none; border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(0,51,102,0.12); background: #fff;
}
.form-bloc textarea { min-height: 110px; resize: vertical; }
.form-aide { display: block; margin-top: 6px; color: #888; font-size: 0.84rem; font-weight: normal; }
.form-bouton {
    width: 100%; padding: 17px; border: 0; border-radius: 8px;
    background: var(--primary-red); color: #fff;
    font-size: 1.05rem; font-weight: bold; font-family: inherit;
    cursor: pointer; transition: background 0.3s;
}
.form-bouton:hover { background: #b01823; }
.form-note { margin: 18px 0 0; text-align: center; color: #888; font-size: 0.85rem; line-height: 1.6; }
.form-cache { position: absolute; left: -5000px; }
.form-section-titre {
    margin: 32px 0 18px; padding-top: 24px; border-top: 1px solid #eee;
    color: var(--primary-blue); font-size: 1.05rem; text-transform: uppercase; letter-spacing: 1px;
}
.form-section-titre:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

/* ============ PAGE CHALLENGE ============ */
.challenge-hero-img {
    width: 100%; max-width: 1000px; margin: 0 auto 45px;
    display: block; border-radius: 15px; box-shadow: 0 12px 35px rgba(0,0,0,0.15);
}
.dates-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    gap: 18px; max-width: 900px; margin: 0 auto 20px;
}
.date-carte {
    background: #fff; border-radius: 12px; padding: 24px 18px; text-align: center;
    box-shadow: 0 6px 20px rgba(0,0,0,0.07); border-top: 4px solid var(--primary-red);
}
.date-jour { font-size: 2rem; font-weight: bold; color: var(--primary-blue); line-height: 1; }
.date-mois { display: block; margin-top: 6px; color: var(--primary-red); font-weight: bold; text-transform: uppercase; letter-spacing: 1px; font-size: 0.82rem; }
.date-note { display: block; margin-top: 10px; color: #777; font-size: 0.85rem; }

/* ============ PAGE MERCI ============ */
.merci-bloc { max-width: 620px; margin: 0 auto; text-align: center; }
.merci-icone { font-size: 4rem; color: #25D366; margin-bottom: 20px; }

/* ============ CARTES : GRILLES ET ALIGNEMENT ============ */
/* 6 activités : 3 colonnes sur ordinateur, 2 sur tablette, 1 sur téléphone */
/* grid-auto-rows: 1fr -> les deux rangées gardent la même hauteur
   même si les textes n'ont pas le même nombre de lignes */
.grid-six { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; }
@media (max-width: 950px) { .grid-six { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .grid-six { grid-template-columns: 1fr; } }

/* Cartes de même hauteur, boutons alignés en bas */
.grid-cartes-liees { align-items: stretch; }
.grid-cartes-liees .card { display: flex; flex-direction: column; }
.grid-cartes-liees .card p { margin: 0 0 15px; }
.carte-prix {
    font-size: 1.75rem; font-weight: bold; color: var(--primary-blue);
    margin: 6px 0 18px !important;
}
.carte-btn {
    margin-top: auto; align-self: center;
    display: inline-block; background-color: var(--primary-red); color: #fff !important;
    padding: 13px 25px; border-radius: 6px; font-weight: bold;
    text-decoration: none; transition: background 0.3s;
}
.carte-btn:hover { background-color: #b01823; }

.concept-note {
    max-width: 780px; margin: 38px auto 0; text-align: center;
    color: #555; font-size: 1.02rem; line-height: 1.7;
}
.concept-note i { color: var(--primary-red); margin-right: 8px; }
.concept-note strong { color: var(--primary-blue); }

/* ============ CALENDRIER DE LA SAISON ============ */
.calendrier {
    max-width: 900px; margin: 0 auto 30px; background: #fff;
    border-radius: 15px; padding: 34px 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); border-top: 4px solid var(--primary-blue);
}
.calendrier h3 {
    margin: 0 0 6px; color: var(--primary-blue); font-size: 1.25rem;
}
.calendrier .cal-sous { margin: 0 0 24px; color: #777; font-size: 0.95rem; }
.cal-liste { list-style: none; padding: 0; margin: 0; }
.cal-liste li {
    display: flex; gap: 18px; align-items: baseline;
    padding: 13px 0; border-bottom: 1px solid #f0f0f0;
}
.cal-liste li:last-child { border-bottom: 0; }
.cal-periode {
    flex: 0 0 190px; font-weight: bold; color: var(--primary-blue); font-size: 0.98rem;
}
.cal-detail { color: #555; font-size: 0.98rem; }
@media (max-width: 600px) {
    .cal-liste li { flex-direction: column; gap: 3px; }
    .cal-periode { flex: none; }
}
.cal-canton {
    margin: 24px 0 0; padding: 16px 18px; background: #f4f8fc;
    border-left: 3px solid var(--primary-red); border-radius: 0 8px 8px 0;
    color: #555; font-size: 0.93rem; line-height: 1.65;
}

/* Bouton Agenda dans la barre de navigation */
.nav-agenda-btn {
    background: var(--agenda-blue); color: #fff !important;
    width: 38px; height: 38px; min-width: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem !important; margin-left: 0.7rem; transition: transform 0.3s;
}
.nav-agenda-btn:hover { transform: scale(1.1); background: #0056b3; }
@media (max-width: 900px) {
    .nav-links .nav-agenda-btn {
        width: auto; height: auto; border-radius: 8px;
        justify-content: flex-start; gap: 12px;
        padding: 15px 18px; margin: 10px 0 0; font-size: 1rem !important;
        border-bottom: 0;
    }
}

/* ============ TABLEAU DES VACANCES PAR CANTON ============ */
.cantons-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.cantons-table th {
    text-align: left; padding: 11px 12px;
    color: #fff; background: var(--primary-blue);
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.6px; font-weight: bold;
}
.cantons-table th:first-child { border-radius: 8px 0 0 0; }
.cantons-table th:last-child  { border-radius: 0 8px 0 0; }
.cantons-table td { padding: 12px; border-bottom: 1px solid #eee; color: #444; white-space: nowrap; }
.cantons-table tr:last-child td { border-bottom: 0; }
.cantons-table tbody tr:nth-child(even) { background: #fafbfc; }
.cantons-table .canton-nom { font-weight: bold; color: var(--primary-blue); }
.cantons-table .canton-nom small { display: block; font-weight: normal; color: #999; font-size: 0.78rem; }
.cantons-table tr.canton-local { background: #fff5f6 !important; }
.cantons-table tr.canton-local td { border-left: 3px solid var(--primary-red); }
.cantons-table tr.canton-local td:not(:first-child) { border-left: 0; }

/* Sur téléphone le tableau devient une liste de fiches */
@media (max-width: 700px) {
    .cantons-table thead { display: none; }
    .cantons-table, .cantons-table tbody, .cantons-table tr, .cantons-table td { display: block; width: 100%; }
    .cantons-table tr {
        margin-bottom: 14px; border: 1px solid #eee; border-radius: 10px;
        overflow: hidden; background: #fff !important;
    }
    .cantons-table tr.canton-local { border-color: var(--primary-red); }
    .cantons-table td { border-bottom: 1px solid #f2f2f2; white-space: normal; padding: 10px 14px; }
    .cantons-table td:first-child { background: #f7f9fb; padding: 12px 14px; }
    .cantons-table tr.canton-local td { border-left: 0; }
    .cantons-table td[data-libelle]::before {
        content: attr(data-libelle); display: block;
        font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.6px;
        color: #999; font-weight: bold; margin-bottom: 2px;
    }
}
.cantons-legende { margin: 18px 0 0; color: #777; font-size: 0.86rem; line-height: 1.6; }

/* ============ SÉLECTEUR DE ZONE DE VACANCES ============ */
.zone-choix { max-width: 430px; margin: 30px auto 0; text-align: center; }
.zone-choix label {
    display: block; margin-bottom: 9px;
    font-weight: bold; color: var(--primary-blue); font-size: 0.98rem;
}
.zone-choix select {
    width: 100%; padding: 13px 15px; font-size: 1rem; font-family: inherit;
    border: 1px solid #d5d5d5; border-radius: 8px; background: #fff; color: #333;
    cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s;
}
.zone-choix select:focus {
    outline: none; border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(0,51,102,0.12);
}
.zone-resultat { max-width: 560px; margin: 22px auto 0; }
.zone-resultat[hidden] { display: none; }
.zone-carte {
    background: #f7f9fc; border-radius: 12px; padding: 8px 18px;
    border-left: 3px solid var(--primary-red);
}
.zone-ligne {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 0; border-bottom: 1px solid #e8edf3;
}
.zone-ligne:last-child { border-bottom: 0; }
.zone-periode { flex: 0 0 108px; font-weight: bold; color: var(--primary-blue); font-size: 0.92rem; }
.zone-dates { flex: 1; color: #444; font-size: 0.95rem; white-space: nowrap; }
.zone-etat {
    flex: 0 0 auto; font-size: 0.76rem; font-weight: bold;
    padding: 4px 10px; border-radius: 20px; white-space: nowrap;
}
.etat-ok      { background: #e3f6e9; color: #1c7a3e; }
.etat-partiel { background: #fff4e0; color: #a8620a; }
.etat-non     { background: #fdeaec; color: #b01823; }
.zone-note { margin: 14px 0 0; color: #777; font-size: 0.86rem; line-height: 1.6; text-align: center; }
@media (max-width: 560px) {
    .zone-ligne { flex-wrap: wrap; gap: 6px 12px; }
    .zone-periode { flex: 0 0 100%; }
    .zone-dates { flex: 0 0 auto; }
}

/* Saisie des dates de vacances personnelles */
.zone-perso { max-width: 560px; margin: 22px auto 0; text-align: center; }
.zone-perso[hidden] { display: none; }
.zone-perso-intro { margin: 0 0 16px; color: #555; font-size: 0.95rem; }
.zone-perso-champs {
    display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
}
.zone-perso-champs > div { flex: 1 1 190px; max-width: 240px; text-align: left; }
.zone-perso-champs label {
    display: block; margin-bottom: 6px;
    font-weight: bold; color: var(--primary-blue); font-size: 0.88rem;
}
.zone-perso-champs input {
    width: 100%; padding: 12px 14px; font-size: 1rem; font-family: inherit;
    border: 1px solid #d5d5d5; border-radius: 8px; background: #fff; color: #333;
}
.zone-perso-champs input:focus {
    outline: none; border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(0,51,102,0.12);
}
.zone-perso-retour {
    margin: 16px 0 0; font-size: 0.92rem; line-height: 1.6;
    padding: 12px 16px; border-radius: 8px; display: none;
}
.zone-perso-retour.visible { display: block; }
.zone-perso-retour.dedans  { background: #e3f6e9; color: #1c7a3e; }
.zone-perso-retour.dehors  { background: #fff4e0; color: #a8620a; }

/* La box « En partenariat avec » est cliquable en entier */
a.header-logos { text-decoration: none; cursor: pointer; transition: transform 0.25s, box-shadow 0.25s; }
a.header-logos:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.28); }

/* Alignement des logos du pied de page */
.footer-logos-row { align-items: center; }
.footer-logo-small {
    height: 45px; width: 72px; object-fit: contain;
    background: #fff; padding: 6px; border-radius: 6px;
}
@media (max-width: 700px) { .footer-logo-small { height: 40px; width: 64px; } }

/* Bandeau « Nouveau », même style que « Le plus choisi » */
.badge-nouveau { background: #1c7a3e; }
.offre-card:has(.badge-nouveau) { border-top-color: #1c7a3e; }

/* Rappel du niveau requis, en tête de formulaire */
.form-niveau {
    margin: 0 0 26px; padding: 13px 16px;
    background: #f4f8fc; border-left: 3px solid var(--primary-blue);
    border-radius: 0 8px 8px 0;
    color: var(--primary-blue); font-weight: bold; font-size: 0.96rem;
}
.form-niveau i { margin-right: 8px; color: var(--primary-red); }

/* Encadré de rappel en tête de formulaire de réservation */
.form-encadre {
    margin: 0 0 28px; padding: 16px 18px;
    background: #f7f9fc; border-left: 3px solid var(--primary-red);
    border-radius: 0 8px 8px 0; color: #444; font-size: 0.96rem; line-height: 1.7;
}
.form-encadre strong { color: var(--primary-blue); }
.form-niveau-gros { font-size: 1.05rem; padding: 16px 18px; }

/* Cases à cocher des périodes */
.cases-groupe { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 520px) { .cases-groupe { grid-template-columns: 1fr; } }
.case {
    display: flex !important; align-items: center; gap: 10px;
    padding: 12px 14px; border: 1px solid #d5d5d5; border-radius: 8px;
    background: #fcfcfc; cursor: pointer; font-weight: normal !important;
    color: #444 !important; margin: 0 !important; font-size: 0.95rem !important;
}
.case:hover { border-color: var(--primary-blue); background: #fff; }
.case input { width: 18px; height: 18px; accent-color: var(--primary-red); }

/* Message de contrôle sur la date choisie */
.date-retour { margin: 9px 0 0; font-size: 0.9rem; display: none; }
.date-retour.visible { display: block; }
.date-retour.souci { color: #b01823; font-weight: bold; }

/* Sous-titre de section */
.section-sous-titre {
    text-align: center; color: #666; font-size: 1.08rem;
    margin: -26px auto 36px; max-width: 640px;
}

/* Prix alignés d'une carte à l'autre malgré des descriptions de longueur différente */
@media (max-width: 700px) { .offre-desc { min-height: 0; } }

/* L'icône d'information passe en bleu */
.form-niveau i { color: var(--primary-blue); }

/* Fiches enfants */
.enfants-bloc { margin-bottom: 6px; }
.enfant-fiche { margin-bottom: 4px; }
.enfant-fiche.enfant-cache { display: none; }
.enfant-num {
    margin: 0 0 6px; font-weight: bold; font-size: 0.9rem;
    color: var(--primary-blue); text-transform: uppercase; letter-spacing: 0.5px;
}
.ajouter-enfant {
    background: none; border: 1px dashed var(--primary-blue); color: var(--primary-blue);
    padding: 9px 16px; border-radius: 8px; cursor: pointer;
    font-size: 0.92rem; font-weight: bold; font-family: inherit; margin-bottom: 18px;
}
.ajouter-enfant:hover { background: #f0f5fb; }

/* Trois dates côte à côte */
.form-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 700px) { .form-trio { grid-template-columns: 1fr; gap: 0; } }

/* Texte explicatif sous un titre de section */
.form-intro { margin: -6px 0 18px; color: #666; font-size: 0.9rem; line-height: 1.55; }
.form-intro a { color: var(--primary-blue); font-weight: bold; }

/* Numéro d'inscription sur la page de confirmation */
.merci-numero {
    display: inline-block; background: #f0f5fb; border: 1px dashed var(--primary-blue);
    border-radius: 12px; padding: 18px 30px; margin-bottom: 26px;
}
.merci-numero-label {
    display: block; font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase;
    color: #667; font-weight: bold; margin-bottom: 6px;
}
.merci-numero strong {
    display: block; font-size: 1.9rem; color: var(--primary-blue); letter-spacing: 2px;
}
.merci-numero-note { display: block; margin-top: 8px; font-size: 0.85rem; color: #777; }

/* Logos partenaires : même cadre, même alignement */
.footer-logos-row { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; }
.footer-logos-row a { display: block; line-height: 0; }
.footer-logo-small {
    display: block; height: 46px; width: 80px; object-fit: contain;
    background: #fff; padding: 7px; border-radius: 6px; box-sizing: border-box;
}
@media (max-width: 700px) { .footer-logo-small { height: 42px; width: 72px; } }

/* LinkedIn */
.social-round-btn.bg-linkedin { background: #0a66c2; }

/* Cinq dates de Challenge : une seule ligne sur grand écran */
@media (min-width: 1000px) {
    .dates-grid { grid-template-columns: repeat(5, 1fr); max-width: 1020px; }
}
@media (min-width: 620px) and (max-width: 999px) {
    .dates-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Deux numéros dans la barre de contact */
.sep-tel { margin: 0 7px; opacity: 0.55; }
@media (max-width: 700px) { .sep-tel { margin: 0 5px; } }

/* Date de finale du Challenge */
.date-carte-finale { position: relative; border-top-color: #D81E2B; box-shadow: 0 8px 26px rgba(216,30,43,0.18); }
.date-badge {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: #D81E2B; color: #fff; font-size: 0.72rem; font-weight: bold;
    letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 14px; border-radius: 20px;
    white-space: nowrap;
}
.dates-grid { padding-top: 8px; }

/* Déroulement de la journée de course */
.horaires-course {
    background: #fff; border-radius: 14px; padding: 30px 28px; max-width: 640px;
    margin: 0 auto; box-shadow: 0 8px 26px rgba(0,0,0,0.07); border-top: 4px solid var(--primary-blue);
}
.horaires-course h3 {
    margin: 0 0 18px; color: var(--primary-blue); font-size: 1.15rem;
    text-transform: uppercase; letter-spacing: 1px;
}
.horaires-liste { list-style: none; padding: 0; margin: 0; }
.horaires-liste li {
    display: flex; align-items: baseline; gap: 18px;
    padding: 11px 0; border-bottom: 1px solid #eee;
}
.horaires-liste li:last-child { border-bottom: 0; }
.horaire-h {
    flex: 0 0 72px; font-weight: bold; color: var(--primary-red);
    font-size: 1.05rem; font-variant-numeric: tabular-nums;
}
.horaire-quoi { color: #444; }
.horaires-note { margin: 18px 0 0; color: #777; font-size: 0.9rem; font-style: italic; }
@media (max-width: 600px) {
    .horaires-course { padding: 24px 20px; }
    .horaire-h { flex-basis: 62px; font-size: 0.98rem; }
}

/* Tarifs du Challenge */
.offre-condition {
    color: var(--primary-red); font-weight: bold; font-size: 0.94rem; margin: 0 0 18px;
}
.tarifs-liste { list-style: none; padding: 0; margin: 0 0 10px; }
.tarifs-liste li {
    display: flex; flex-direction: column; gap: 3px;
    padding: 12px 0; border-bottom: 1px solid #eee;
}
.tarifs-liste li:last-child { border-bottom: 0; }
.tarif-quand {
    font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: #888; font-weight: bold;
}
.tarif-prix { color: var(--primary-blue); font-weight: bold; font-size: 1.05rem; }
.tarifs-note { color: #888; font-size: 0.84rem; margin: 0 0 18px; }

/* Rappel des tarifs dans le formulaire */
.form-tarifs {
    background: #f7f9fc; border-left: 4px solid var(--primary-blue);
    border-radius: 10px; padding: 20px 22px; margin-bottom: 26px;
}
.form-tarifs h3 {
    margin: 0 0 12px; font-size: 0.92rem; color: var(--primary-blue);
    text-transform: uppercase; letter-spacing: 1px;
}
.form-tarifs ul { list-style: none; padding: 0; margin: 0; }
.form-tarifs li {
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 7px 0; border-bottom: 1px solid #e4e9f0;
}
.form-tarifs li:last-child { border-bottom: 0; }
.form-tarifs li span { color: #666; font-size: 0.92rem; }
.form-tarifs li strong { color: var(--primary-blue); font-size: 0.95rem; }
.form-tarifs p { margin: 12px 0 0; color: #888; font-size: 0.84rem; }

/* Case à cocher du Pack Première Course */
.case-pack {
    display: flex; align-items: flex-start; gap: 12px;
    background: #fff8f8; border: 1px solid #f3d3d6; border-radius: 10px;
    padding: 16px 18px; cursor: pointer; font-weight: bold; color: var(--primary-blue);
}
.case-pack input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--primary-red); }
.case-pack .form-aide { font-weight: normal; margin-top: 5px; }

/* Précision affichée sous un champ */
.form-aide-sous { margin: 8px 0 0; color: #888; font-size: 0.86rem; }

/* Cartes Instagram : un cadre net et stable, quel que soit le format du post.
   La hauteur est réservée dès le premier rendu (aspect-ratio) pour que la section
   ne change plus de taille ensuite ; le script peut l'affiner avec une hauteur
   en ligne, qui prend alors le pas sur l'aspect-ratio. */
.insta-slide {
    position: relative; overflow: hidden; border-radius: 12px; background: #fff;
    aspect-ratio: 11 / 20;
}
/* fondu en bas de carte : la coupe du cadre Instagram ne se voit plus */
.insta-slide::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
    pointer-events: none; z-index: 1;
}
/* voile d'attente : tant que la publication n'est pas peinte, on montre une carte
   grise avec le logo Instagram plutôt qu'un rectangle blanc */
.insta-voile {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    background: #f1f2f4; color: #c5c9d0; font-size: 2.6rem;
    transition: opacity 0.45s ease;
}
.insta-voile i { animation: insta-pulse 1.6s ease-in-out infinite; }
@keyframes insta-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.9; } }
.insta-slide.insta-prete .insta-voile { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
    .insta-voile, .insta-voile i { transition: none; animation: none; }
}


/* Prix exprimé en un mot (« Offert ») */
.offre-prix-mot { font-size: 2.1rem; }

/* Nos numéros, avec les prénoms */
.footer-contacts { margin: 0 0 14px; }
.footer-contacts a {
    display: block; color: #cfe0f0; text-decoration: none;
    font-size: 0.95rem; line-height: 1.45; margin-bottom: 6px;
}
.footer-contacts a span {
    display: block; color: #fff; font-weight: bold; letter-spacing: 0.3px;
}
.footer-contacts a:hover span { color: var(--primary-red); }

.liste-contacts li::before { content: none; }
.liste-contacts li { padding-left: 0; }
.liste-contacts a {
    display: block; color: #666; text-decoration: none; font-size: 0.9rem; line-height: 1.4;
}
.liste-contacts a span {
    display: block; color: var(--primary-blue); font-weight: bold; font-size: 1.02rem;
}

/* Partenaires : texte d'un côté, photos de l'autre */
.partenaire-bloc {
    display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px;
    align-items: center; margin: 0 auto 55px; max-width: 1100px;
}
.partenaire-bloc-inverse .partenaire-texte { order: 2; }
.partenaire-bloc-inverse .partenaire-photos { order: 1; }
.partenaire-texte h3 {
    color: var(--primary-blue); font-size: 1.6rem; margin: 0 0 16px;
}
.partenaire-texte p { color: #444; line-height: 1.75; margin: 0 0 14px; }
.partenaire-lien {
    display: inline-block; margin-top: 6px; color: var(--primary-red);
    font-weight: bold; text-decoration: none;
}
.partenaire-lien:hover { text-decoration: underline; }
.partenaire-photos { display: grid; gap: 16px; }
.partenaire-photos img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 14px;
    box-shadow: 0 12px 34px rgba(0,0,0,0.13); aspect-ratio: 4 / 3;
}
#partenaires { padding: 10px 0 20px; }
@media (max-width: 850px) {
    .partenaire-bloc { grid-template-columns: 1fr; gap: 26px; margin-bottom: 45px; }
    .partenaire-bloc-inverse .partenaire-texte { order: 1; }
    .partenaire-bloc-inverse .partenaire-photos { order: 2; }
    .partenaire-photos { grid-template-columns: repeat(2, 1fr); }
    .partenaire-bloc:not(:has(img + img)) .partenaire-photos { grid-template-columns: 1fr; }
}

/* Pages de texte légal */
.texte-legal { max-width: 820px; margin: 0 auto; }
.texte-legal h2 {
    color: var(--primary-blue); font-size: 1.35rem; margin: 38px 0 14px;
    padding-bottom: 8px; border-bottom: 2px solid #eceff3;
}
.texte-legal h2:first-child { margin-top: 0; }
.texte-legal h3 { color: var(--primary-blue); font-size: 1.05rem; margin: 26px 0 10px; }
.texte-legal p { color: #444; line-height: 1.8; margin: 0 0 14px; }
.texte-legal a { color: var(--primary-red); font-weight: bold; }

/* Séparateur des liens légaux */
.sep-pied { margin: 0 8px; opacity: 0.5; }
.cgv-link a { white-space: nowrap; }

/* Cases d'autorisation et d'acceptation */
.case-legale {
    display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
    color: #444; font-size: 0.93rem; line-height: 1.6; font-weight: normal;
}
.case-legale input { margin-top: 3px; width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--primary-blue); }
.case-legale a { color: var(--primary-blue); font-weight: bold; }
.case-cgv {
    background: #f7f9fc; border: 1px solid #dbe3ec; border-radius: 10px; padding: 14px 16px;
}
.cases-ligne { display: flex; flex-wrap: wrap; gap: 10px 28px; }

/* Boîtes de contact cliquables */
.boites-contact {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 20px; max-width: 900px; margin: 0 auto 45px;
}
.boite-contact {
    display: grid; grid-template-columns: 26px 1fr; align-items: start; column-gap: 14px;
    background: #fff; border-radius: 12px; padding: 16px 18px;
    text-decoration: none; border: 1px solid #e6eaf0; box-shadow: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.boite-contact:hover { border-color: #c9d5e4; box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
.boite-contact i { font-size: 1.02rem; color: var(--primary-red); line-height: 1.5; grid-row: 1 / span 2; }
.boite-titre { color: var(--primary-blue); font-weight: bold; font-size: 1rem; margin-bottom: 2px; }
.boite-detail { color: #7a838f; font-size: 0.88rem; line-height: 1.5; }
.boite-whatsapp i { color: #25D366; }
.boites-contact { gap: 14px; margin-bottom: 34px; }
.boites-contact + .section-title { margin-top: 8px; }

/* Liens utiles du pied de page */
.liens-utiles { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 18px; }
.liens-utiles a { color: #9fb8d0; text-decoration: none; font-size: 0.88rem; }
.liens-utiles a:hover { color: #fff; }


/* Portraits des responsables */
.responsables {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: 30px; max-width: 1000px; margin: 0 auto 20px;
}
.responsable {
    background: #fff; border-radius: 16px; overflow: hidden;
    box-shadow: 0 12px 34px rgba(0,0,0,0.1); border-top: 4px solid var(--primary-blue);
}
.responsable img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.responsable-texte { padding: 24px 26px 28px; }
.responsable-texte h3 { margin: 0 0 12px; color: var(--primary-blue); font-size: 1.3rem; }
.responsable-texte p { margin: 0; color: #444; line-height: 1.75; font-size: 0.97rem; }


/* Icône webcam de la barre de navigation */
nav .nav-links .lien-webcam,
nav .nav-links .lien-agenda,
nav .nav-links .lien-challenge {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 !important; margin-left: 0;
    color: var(--primary-blue) !important; text-decoration: none; flex: 0 0 auto;
}
.lien-webcam svg, .lien-agenda svg, .lien-challenge svg { color: var(--primary-red); display: block; }
.lien-webcam:hover svg, .lien-agenda:hover svg, .lien-challenge:hover svg { color: var(--primary-blue); }
.visuellement-cache {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* Bande panoramique de la webcam de Savoleyres */
.webcam-bloc { max-width: 1100px; margin: 0 auto; }
.webcam-cadre {
    display: block; position: relative; overflow: hidden;
    border-radius: 14px; background: #e9edf1; line-height: 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.10);
}
.webcam-cadre img { width: 100%; height: auto; display: block; }
.webcam-etiquette {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(0,0,0,0.62); color: #fff;
    padding: 6px 12px; border-radius: 999px;
    font-size: 0.8rem; font-weight: bold; letter-spacing: 0.4px; line-height: 1;
}
.webcam-pastille {
    width: 9px; height: 9px; border-radius: 50%; background: #ff3b30;
    animation: webcam-clignote 2s ease-in-out infinite;
}
@keyframes webcam-clignote { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
.webcam-legende { text-align: center; color: #666; font-size: 0.92rem; margin: 14px 0 0; }
@media (prefers-reduced-motion: reduce) { .webcam-pastille { animation: none; } }


/* Logos des partenaires, à la place des photos */
.partenaire-logo {
    display: flex; align-items: center; justify-content: center;
    background: #fff; border-radius: 16px; padding: 42px 46px;
    min-height: 240px; box-shadow: 0 12px 34px rgba(0,0,0,0.09);
}
.partenaire-logo img {
    width: 100%; max-width: 260px; height: auto; max-height: 190px;
    object-fit: contain; display: block;
}
.partenaire-logo-attente {
    border: 2px dashed #d6dde6; box-shadow: none; background: #fafbfc;
}
.partenaire-logo-attente span {
    color: #9aa6b4; font-size: 0.92rem; letter-spacing: 1px; text-transform: uppercase;
}
@media (max-width: 850px) {
    .partenaire-logo { padding: 34px; min-height: 180px; }
    .partenaire-logo img { max-width: 210px; max-height: 150px; }
}

/* Liste des versions archivées */
.liste-archives { list-style: none; padding: 0; margin: 0 0 22px; }
.liste-archives li {
    padding: 14px 0; border-bottom: 1px solid #eceff3;
}
.liste-archives li:last-child { border-bottom: 0; }
.liste-archives span { display: block; color: #888; font-size: 0.87rem; margin-top: 4px; }

/* Renvoi discret vers les archives */
.renvoi-archives { color: #9aa6b4 !important; font-weight: normal !important; font-size: 0.9rem; }

/* Diaporama de la page d'accueil */
.hero-diapo { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hero-vue {
    position: absolute; inset: 0; opacity: 0;
    transition: opacity 1.1s ease-in-out;
}
.hero-vue.active { opacity: 1; }
.hero-vue img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) {
    .hero-vue { transition: none; }
}

/* Partenaires du pied de page : quatre logos en ligne */
.partenaires-pied { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.partenaires-pied a { display: block; line-height: 0; transition: transform 0.18s ease; }
.partenaires-pied a:hover { transform: translateY(-3px); }
.partenaires-pied img {
    width: 84px; height: 56px; object-fit: contain; display: block;
    background: #fff; border-radius: 8px; padding: 8px 9px; box-sizing: border-box;
}
.partenaires-pied a:hover img { box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
@media (max-width: 900px) {
    .partenaires-pied { justify-content: center; }
}
@media (max-width: 380px) {
    .partenaires-pied img { width: 72px; height: 50px; }
}


/* ============ PAGE LE TEAM ============ */

/* Trait rouge sous les titres de partenaires, comme les titres de section */
.partenaire-texte h3 { position: relative; padding-bottom: 14px; }
.partenaire-texte h3::after {
    content: ''; display: block; position: absolute; left: 0; bottom: 0;
    width: 60px; height: 3px; background: var(--primary-red);
}

/* Toutes les images de partenaires à la même taille, jamais plus hautes
   que le plus court des paragraphes auxquels elles répondent (Promoski, 253 px). */
.partenaire-photos img,
.diapo-carre {
    height: 250px; width: 100%; object-fit: cover; border-radius: 14px;
    box-shadow: 0 12px 34px rgba(0,0,0,0.13); aspect-ratio: auto;
}
/* Le cadre blanc d'un logo garde exactement la même hauteur qu'une photo */
.partenaire-logo { height: 250px; min-height: 0; padding: 30px 34px; }
.partenaire-logo img { max-height: 100%; max-width: 240px; height: auto; }

/* Carré de photos qui défilent, à droite de Philippe Roux */
.diapo-carre {
    position: relative; overflow: hidden; background: #eef1f4; padding: 0;
    width: min(100%, 330px); height: 330px; margin: 0 auto;
}
.diapo-carre img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0; transition: opacity 1s ease;
    border-radius: 0; box-shadow: none;
}
.diapo-carre img.active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .diapo-carre img { transition: none; } }

/* Langues parlées, à côté du prénom */
.titre-avec-langues { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.langues-parlees { display: inline-flex; gap: 7px; }
.drapeau {
    display: inline-block; width: 30px; height: 20px; border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.18); background-size: cover; background-position: center;
}
.dr-fr { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2030%22%3E%3Crect%20width%3D%2220%22%20height%3D%2230%22%20fill%3D%22%23002395%22/%3E%3Crect%20x%3D%2220%22%20width%3D%2220%22%20height%3D%2230%22%20fill%3D%22%23fff%22/%3E%3Crect%20x%3D%2240%22%20width%3D%2220%22%20height%3D%2230%22%20fill%3D%22%23ED2939%22/%3E%3C/svg%3E"); }
.dr-en { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2030%22%3E%3CclipPath%20id%3D%22c%22%3E%3Cpath%20d%3D%22M0%200h60v30H0z%22/%3E%3C/clipPath%3E%3Crect%20width%3D%2260%22%20height%3D%2230%22%20fill%3D%22%23012169%22/%3E%3Cpath%20d%3D%22M0%200l60%2030M60%200L0%2030%22%20stroke%3D%22%23fff%22%20stroke-width%3D%226%22%20clip-path%3D%22url%28%23c%29%22/%3E%3Cpath%20d%3D%22M0%200l60%2030M60%200L0%2030%22%20stroke%3D%22%23C8102E%22%20stroke-width%3D%223%22%20clip-path%3D%22url%28%23c%29%22/%3E%3Cpath%20d%3D%22M30%200v30M0%2015h60%22%20stroke%3D%22%23fff%22%20stroke-width%3D%2210%22/%3E%3Cpath%20d%3D%22M30%200v30M0%2015h60%22%20stroke%3D%22%23C8102E%22%20stroke-width%3D%226%22/%3E%3C/svg%3E"); }
.dr-de { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2030%22%3E%3Crect%20width%3D%2260%22%20height%3D%2210%22%20fill%3D%22%23000%22/%3E%3Crect%20y%3D%2210%22%20width%3D%2260%22%20height%3D%2210%22%20fill%3D%22%23DD0000%22/%3E%3Crect%20y%3D%2220%22%20width%3D%2260%22%20height%3D%2210%22%20fill%3D%22%23FFCE00%22/%3E%3C/svg%3E"); }
.dr-es { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2030%22%3E%3Crect%20width%3D%2260%22%20height%3D%2230%22%20fill%3D%22%23AA151B%22/%3E%3Crect%20y%3D%227.5%22%20width%3D%2260%22%20height%3D%2215%22%20fill%3D%22%23F1BF00%22/%3E%3C/svg%3E"); }

@media (max-width: 850px) {
    .partenaire-photos img, .partenaire-logo { height: 210px; }
    .diapo-carre { width: min(100%, 280px); height: 280px; }
}

/* Mention de relais d'inscription, au-dessus de l'acceptation des CGV */
.form-mention-relais {
    background: #f4f6f8; border-left: 3px solid var(--primary-blue);
    color: #555; font-size: 0.92rem; line-height: 1.6;
    padding: 14px 16px; border-radius: 0 8px 8px 0; margin: 0 0 20px;
}
/* Champs révélés par le Pack Première Course */
.champs-pack[hidden] { display: none; }
.champs-pack {
    border-left: 3px solid var(--primary-red); padding-left: 18px; margin-bottom: 6px;
}

/* ============ PAGE NOS OFFRES ============ */

/* Séparateur gris entre deux lignes d'offres : le trait ne traverse pas le texte */
.separateur-offres {
    display: flex; align-items: center; gap: 22px;
    max-width: 1100px; margin: 10px auto 40px; color: #8b949e;
}
.separateur-offres::before, .separateur-offres::after {
    content: ''; flex: 1 1 auto; height: 1px; background: #dfe4ea;
}
.separateur-offres span {
    flex: 0 0 auto; font-size: 0.92rem; font-weight: bold;
    text-transform: uppercase; letter-spacing: 1.2px; white-space: nowrap;
}

/* Encadrés à part : course privée et ateliers */
.encadre-offre {
    max-width: 1100px; margin: 0 auto 30px; padding: 32px 34px;
    background: #fff; border-radius: 16px; border: 1px solid #e6eaee;
    box-shadow: 0 12px 34px rgba(0,0,0,0.07);
    display: flex; align-items: center; justify-content: space-between; gap: 34px;
}
.encadre-offre-texte { flex: 1 1 auto; }
.encadre-offre h3 { color: var(--primary-blue); font-size: 1.45rem; margin: 10px 0 12px; }
.encadre-offre p { color: #555; line-height: 1.7; margin: 0; }
.encadre-offre-action { flex: 0 0 auto; text-align: center; }
.encadre-offre-action .offre-prix { margin-bottom: 14px; }
.encadre-etiquette {
    display: inline-block; background: var(--primary-blue); color: #fff;
    padding: 5px 13px; border-radius: 999px;
    font-size: 0.76rem; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;
}

@media (max-width: 800px) {
    .encadre-offre { flex-direction: column; align-items: stretch; text-align: center; padding: 26px 22px; }
    .encadre-offre-action .offre-btn { width: 100%; }
}


/* Secours si une publication Instagram ne s'affiche pas */
.insta-secours {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; width: 100%; height: 100%; text-decoration: none;
    color: #7a828c; font-weight: bold; font-size: 0.95rem; text-align: center; padding: 20px;
}
.insta-secours i { font-size: 2.6rem; color: #c5c9d0; }
.insta-secours:hover { color: var(--primary-red); }
.insta-secours:hover i { color: var(--primary-red); }

/* Message affiché quand le navigateur refuse l'envoi d'un formulaire */
.form-refus {
    background: #fdecee; border-left: 4px solid var(--primary-red);
    color: #8a1520; font-weight: bold; line-height: 1.55;
    padding: 14px 16px; border-radius: 0 8px 8px 0; margin: 0 0 18px;
}
.champ-refuse {
    border-color: var(--primary-red) !important;
    box-shadow: 0 0 0 3px rgba(216, 30, 43, 0.14) !important;
}



/* ============ BARRE DE NAVIGATION ============ */
/* Logo à gauche, onglets au centre, outils et bouton Réserver à droite. */
@media (min-width: 901px) {
    nav { gap: 20px; }
    .nav-links { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; }

    /* Centrés sur la page, quelles que soient les largeurs du logo et des outils. */
    .nav-onglets {
        display: flex; align-items: center; gap: clamp(18px, 2.6vw, 42px);
        margin: 0 auto;
    }
    .nav-onglets a {
        margin-left: 0; position: relative; padding: 9px 0; display: inline-block;
        transition: color 0.25s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
    }
    /* Le trait rouge se déploie depuis le centre : au survol, au clic, et sur la page en cours. */
    .nav-onglets a::after {
        content: ''; position: absolute; left: 0; right: 0; bottom: 0;
        height: 2.5px; border-radius: 2px; background: var(--primary-red);
        transform: scaleX(0); transform-origin: center;
        transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .nav-onglets a:hover::after,
    .nav-onglets a.actif::after,
    .nav-onglets a.onglet-presse::after { transform: scaleX(1); }
    .nav-onglets a:active { transform: scale(0.94); }

    .nav-outils { display: flex; align-items: center; gap: 10px; margin-left: auto; }
    .nav-outils .lien-webcam, .nav-outils .lien-agenda,
    .nav-outils .lien-challenge { margin-left: 0 !important; }
    .nav-outils .cta-button { margin-left: 12px; }
}

/* À partir de 1200 px, la rangée d'onglets est centrée sur la page elle-même ;
   en dessous, elle se contente de l'espace libre entre le logo et les outils. */
@media (min-width: 1200px) {
    .nav-onglets { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
}
@media (min-width: 901px) and (max-width: 1199px) {
    .nav-onglets { gap: clamp(14px, 1.9vw, 26px); margin: 0 auto; }
    .nav-outils { gap: 8px; margin-left: 0; }
}

/* ============ CHOIX DE LA LANGUE ============ */
/* Un bouton « FR » qui ouvre la liste des langues : le code est lisible tout de
   suite, le drapeau ne sert que de repère dans le menu. */
.choix-langue { position: relative; flex: 0 0 auto; }
.langue-bouton {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 0; cursor: pointer;
    padding: 7px 10px; border-radius: 999px;
    color: var(--primary-blue); font-weight: bold; font-size: 0.8rem;
    font-family: inherit; letter-spacing: 0.5px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.langue-bouton:hover { background-color: #f1f4f7; color: var(--primary-red); }
.langue-chevron { transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
.choix-langue.ouvert .langue-bouton { background-color: #f1f4f7; }
.choix-langue.ouvert .langue-chevron { transform: rotate(180deg); }

.langue-menu {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 1200;
    display: flex; flex-direction: column; min-width: 132px;
    background: #fff; border-radius: 14px; padding: 7px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.05);
    opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.97);
    transform-origin: top right; pointer-events: none;
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.22s;
}
.choix-langue.ouvert .langue-menu {
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
}
nav .nav-links .langue-menu a.langue-option {
    display: flex; align-items: center; gap: 11px;
    margin: 0; padding: 9px 12px; border-radius: 9px; border: 0;
    color: var(--primary-blue); font-size: 0.82rem; letter-spacing: 0.5px;
    transition: background-color 0.18s ease, color 0.18s ease;
}
nav .nav-links .langue-menu a.langue-option:hover { background-color: #f1f4f7; color: var(--primary-red); }
nav .nav-links .langue-menu a.langue-active { background-color: #eef2f6; cursor: default; }
nav .nav-links .langue-menu a.langue-active:hover { color: var(--primary-blue); }
.drapeau-mini {
    width: 22px; height: 15px; border-radius: 3px; flex: 0 0 auto;
    border: 1px solid rgba(0, 0, 0, 0.16);
    background-size: cover; background-position: center;
}
.drapeau-fr { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2030%22%3E%3Crect%20width%3D%2220%22%20height%3D%2230%22%20fill%3D%22%23002395%22/%3E%3Crect%20x%3D%2220%22%20width%3D%2220%22%20height%3D%2230%22%20fill%3D%22%23fff%22/%3E%3Crect%20x%3D%2240%22%20width%3D%2220%22%20height%3D%2230%22%20fill%3D%22%23ED2939%22/%3E%3C/svg%3E"); }
.drapeau-en { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2030%22%3E%3CclipPath%20id%3D%22c%22%3E%3Cpath%20d%3D%22M0%200h60v30H0z%22/%3E%3C/clipPath%3E%3Crect%20width%3D%2260%22%20height%3D%2230%22%20fill%3D%22%23012169%22/%3E%3Cpath%20d%3D%22M0%200l60%2030M60%200L0%2030%22%20stroke%3D%22%23fff%22%20stroke-width%3D%226%22%20clip-path%3D%22url%28%23c%29%22/%3E%3Cpath%20d%3D%22M0%200l60%2030M60%200L0%2030%22%20stroke%3D%22%23C8102E%22%20stroke-width%3D%223%22%20clip-path%3D%22url%28%23c%29%22/%3E%3Cpath%20d%3D%22M30%200v30M0%2015h60%22%20stroke%3D%22%23fff%22%20stroke-width%3D%2210%22/%3E%3Cpath%20d%3D%22M30%200v30M0%2015h60%22%20stroke%3D%22%23C8102E%22%20stroke-width%3D%226%22/%3E%3C/svg%3E"); }
.drapeau-de { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2030%22%3E%3Crect%20width%3D%2260%22%20height%3D%2210%22%20fill%3D%22%23000%22/%3E%3Crect%20y%3D%2210%22%20width%3D%2260%22%20height%3D%2210%22%20fill%3D%22%23DD0000%22/%3E%3Crect%20y%3D%2220%22%20width%3D%2260%22%20height%3D%2210%22%20fill%3D%22%23FFCE00%22/%3E%3C/svg%3E"); }
.drapeau-es { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2030%22%3E%3Crect%20width%3D%2260%22%20height%3D%2230%22%20fill%3D%22%23AA151B%22/%3E%3Crect%20y%3D%227.5%22%20width%3D%2260%22%20height%3D%2215%22%20fill%3D%22%23F1BF00%22/%3E%3C/svg%3E"); }

/* ============ MENU MOBILE : OUTILS ET LANGUE ============ */
/* Placé en fin de feuille : à spécificité égale, c'est la dernière règle qui gagne. */
@media (max-width: 900px) {
    .nav-onglets { display: flex; flex-direction: column; align-items: stretch; }
    .nav-outils { display: flex; flex-direction: column; align-items: stretch; }
    nav .nav-links .lien-webcam,
    nav .nav-links .lien-agenda,
    nav .nav-links .lien-challenge {
        margin: 10px 0 0 !important; padding: 14px 0 !important;
        gap: 12px; justify-content: flex-start; align-self: stretch;
    }
    nav .nav-links .lien-webcam .visuellement-cache,
    nav .nav-links .lien-agenda .visuellement-cache,
    nav .nav-links .lien-challenge .visuellement-cache {
        position: static; width: auto; height: auto; overflow: visible; clip: auto;
        color: var(--primary-blue); font-weight: bold;
        text-transform: uppercase; font-size: 0.95rem; letter-spacing: 0.5px;
    }
    /* Pas de menu déroulant sur téléphone : les quatre langues tiennent en ligne. */
    nav .nav-links .choix-langue { margin: 14px 0 0; }
    .langue-bouton { display: none; }
    .langue-menu {
        position: static; opacity: 1; visibility: visible; transform: none;
        pointer-events: auto; box-shadow: none; padding: 0;
        flex-direction: row; gap: 8px; min-width: 0; background: none;
    }
    nav .nav-links .langue-menu a.langue-option {
        flex: 1 1 0; flex-direction: column; gap: 7px; justify-content: center;
        padding: 12px 4px; background-color: #f4f6f8; font-size: 0.85rem;
    }
    nav .nav-links .langue-menu a.langue-active { background-color: #e4eaf0; color: var(--primary-red); }
}


/* ============ PAGE NOS OFFRES ============ */
/* Filtre rapide et bascule du tarif famille, juste sous le titre. */
.offres-outils {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 18px 28px; margin: 0 auto 42px; max-width: 1100px;
}
.filtre-offres {
    position: relative; display: flex; align-items: center; gap: 2px;
    background: #eef1f4; border-radius: 999px; padding: 5px;
    max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.filtre-offres::-webkit-scrollbar { display: none; }
.filtre-curseur {
    position: absolute; top: 5px; left: 0; height: calc(100% - 10px);
    background: var(--primary-blue); border-radius: 999px; z-index: 0;
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
                width 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}
.filtre-btn {
    position: relative; z-index: 1; border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 0.86rem; font-weight: bold;
    color: #56616e; padding: 10px 18px; border-radius: 999px;
    white-space: nowrap; text-decoration: none; line-height: 1.2;
    transition: color 0.28s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.filtre-btn:hover { color: var(--primary-blue); }
.filtre-btn:active { transform: scale(0.95); }
.filtre-btn.actif { color: #fff; }
.filtre-lien { color: var(--primary-red); }
.filtre-lien:hover { color: var(--primary-red); }

/* Bascule du tarif famille : les prix se barrent quand elle est active. */
.bascule-famille {
    display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
    user-select: none;
}
.bascule-famille input { position: absolute; opacity: 0; width: 0; height: 0; }
.bascule-piste {
    width: 48px; height: 28px; border-radius: 999px; background: #d4dae1;
    padding: 3px; flex: 0 0 auto; display: block;
    transition: background-color 0.28s ease;
}
.bascule-pastille {
    display: block; width: 22px; height: 22px; border-radius: 50%; background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.22);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.bascule-famille input:checked + .bascule-piste { background: var(--primary-red); }
.bascule-famille input:checked + .bascule-piste .bascule-pastille { transform: translateX(20px); }
.bascule-famille input:focus-visible + .bascule-piste { outline: 2px solid var(--primary-blue); outline-offset: 3px; }
.bascule-texte {
    display: flex; flex-direction: column; line-height: 1.25;
    color: var(--primary-blue); font-weight: bold; font-size: 0.92rem;
}
.bascule-texte small { color: #8a939d; font-weight: normal; font-size: 0.78rem; }

/* Les groupes se masquent en douceur quand un filtre est choisi. */
.offres-groupe[hidden] { display: none; }
.offres-groupe + .offres-groupe { margin-top: 10px; }
.offres-note { margin-top: 40px; }
.offres-groupe { animation: offres-apparait 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes offres-apparait { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Cartes d'offre : même réaction au survol que les box de l'accueil. */
.offre-card {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.3s ease, border-bottom-color 0.3s ease;
    border-bottom: 5px solid transparent;
}
.offre-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 42px rgba(0,0,0,0.13);
    border-bottom-color: var(--primary-red);
}

/* Prix barré dès que le tarif famille est activé. */
.prix-famille { display: none; }
.prix-plein { transition: opacity 0.25s ease; }
body.tarif-famille .a-tarif-famille .prix-plein {
    text-decoration: line-through; text-decoration-thickness: 2px;
    opacity: 0.38; font-size: 1.5rem;
}
body.tarif-famille .a-tarif-famille .prix-famille { display: inline; margin-left: 10px; }
body.tarif-famille .a-tarif-famille .offre-famille { visibility: hidden; }

/* « En savoir plus » : le détail reste replié tant qu'on ne le demande pas. */
.offre-plus {
    align-self: flex-start; margin: 4px 0 20px; padding: 8px 0;
    border: 0; background: none; cursor: pointer; font-family: inherit;
    color: var(--primary-blue); font-weight: bold; font-size: 0.88rem;
    display: inline-flex; align-items: center; gap: 8px;
    transition: color 0.2s ease;
}
.offre-plus:hover { color: var(--primary-red); }
.offre-chevron { transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1); }
.offre-plus[aria-expanded="true"] .offre-chevron { transform: rotate(180deg); }
.offre-detail {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.offre-detail.ouvert { grid-template-rows: 1fr; }
.offre-detail-corps { overflow: hidden; min-height: 0; }
.offre-detail .offre-liste { margin: 0 0 22px; }

/* Ateliers : trois lignes cliquables, sans encadré qui alourdit la page. */
.ateliers-rangee { display: grid; gap: 14px; max-width: 900px; margin: 0 auto; }
.atelier-ligne {
    display: flex; align-items: center; gap: 18px;
    background: #fff; border-radius: 14px; padding: 18px 22px;
    text-decoration: none; box-shadow: 0 6px 20px rgba(0,0,0,0.07);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
}
.atelier-ligne:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0,0,0,0.12); }
.atelier-ligne:active { transform: scale(0.99); }
.atelier-icone {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: #f2f5f8; color: var(--primary-red);
}
.atelier-corps { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; }
.atelier-corps strong { color: var(--primary-blue); font-size: 1.05rem; }
.atelier-corps span { color: #5d6773; font-size: 0.9rem; line-height: 1.5; }
.atelier-fleche {
    flex: 0 0 auto; color: var(--primary-red);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.atelier-ligne:hover .atelier-fleche { transform: translateX(4px); }

@media (max-width: 700px) {
    .offres-outils { gap: 16px; margin-bottom: 32px; }
    .filtre-offres { align-self: stretch; justify-content: flex-start; }
    .filtre-btn { font-size: 0.8rem; padding: 9px 14px; }
    .atelier-ligne { padding: 16px; gap: 14px; }
    .atelier-icone { width: 40px; height: 40px; }
    .atelier-corps strong { font-size: 1rem; }
}

/* Condition rappelée dans le formulaire, pas dans l'offre : c'est une condition
   de confirmation, pas un prérequis pour s'inscrire. */
.form-condition { display: inline-block; margin-top: 8px; opacity: 0.85; font-style: italic; }

/* ============ COMPTE À REBOURS DU 5 DÉCEMBRE ============ */
/* Il n'apparaît que si la date est encore devant nous : passé le jour J,
   le bandeau retrouve sa forme d'origine sans qu'on ait à y toucher. */
.compte-rebours[hidden] { display: none; }
.compte-rebours { display: flex; gap: 10px; flex: 0 0 auto; }
.cr-bloc {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 66px; padding: 10px 8px; border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
}
.cr-nombre {
    font-size: 1.6rem; font-weight: bold; color: #fff; line-height: 1;
    font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.cr-unite {
    margin-top: 5px; font-size: 0.68rem; text-transform: uppercase;
    letter-spacing: 1px; color: #b9d2e8;
}
@media (max-width: 900px) {
    .compte-rebours { justify-content: center; }
    .cr-bloc { min-width: 0; flex: 1 1 0; padding: 9px 4px; }
    .cr-nombre { font-size: 1.35rem; }
    .cr-unite { font-size: 0.62rem; letter-spacing: 0.6px; }
}

/* ============ EN-TÊTE DU COMPTE INSTAGRAM ============ */
/* La même entrée en matière qu'un profil : on sait tout de suite chez qui on est. */
.insta-entete {
    display: flex; align-items: center; gap: 16px;
    max-width: 1100px; margin: 0 auto 26px;
    background: #fff; border-radius: 16px; padding: 16px 22px;
    box-shadow: 0 6px 22px rgba(0,0,0,0.07);
}
.insta-avatar {
    width: 62px; height: 62px; border-radius: 50%; flex: 0 0 auto;
    object-fit: contain; background: #f3f6f9; padding: 6px;
    border: 2px solid #eef2f6;
}
.insta-identite { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.insta-identite strong { color: var(--primary-blue); font-size: 1.05rem; }
.insta-identite span { color: #8a939d; font-size: 0.9rem; }
.insta-suivre {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px;
    background: var(--instagram-gradient); color: #fff !important;
    font-weight: bold; text-decoration: none; font-size: 0.92rem;
    padding: 11px 20px; border-radius: 999px;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}
.insta-suivre:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(193, 53, 132, 0.32); }
.insta-suivre:active { transform: scale(0.97); }
@media (max-width: 600px) {
    .insta-entete { flex-wrap: wrap; gap: 12px 14px; padding: 14px 16px; }
    .insta-avatar { width: 52px; height: 52px; }
    .insta-suivre { flex: 1 1 100%; justify-content: center; }
}

/* Adresse e-mail en clair dans la colonne de gauche du pied de page */
.footer-email { margin: 0 0 10px; }
.footer-email a {
    color: #cfe0f0; text-decoration: none; font-size: 0.95rem;
    border-bottom: 1px solid rgba(207, 224, 240, 0.35);
    transition: color 0.2s ease, border-color 0.2s ease;
}
.footer-email a:hover { color: #fff; border-color: #fff; }

/* Hauteurs plancher : même sans sous-grille, les cartes restent comparables.
   Cela ne concerne que la page Nos Offres, dont les cartes ont toutes la même
   structure ; ailleurs (page Challenge) elles gardent leur mise en page libre. */
.offres-grid-3 .offre-desc { min-height: 4.6em; }

/* Dès que les trois cartes tiennent côte à côte, elles partagent leurs lignes :
   prix, repères rouges, « En savoir plus » et boutons tombent exactement à la
   même hauteur, quelle que soit la longueur des textes. */
@media (min-width: 1000px) {
    @supports (grid-template-rows: subgrid) {
        .offres-grid-3 { row-gap: 0; }
        .offres-grid-3 > .offre-card {
            display: grid; grid-template-rows: subgrid; grid-row: span 7;
        }
        .offres-grid-3 > .offre-card .offre-btn { margin-top: 0; align-self: end; }
        .offres-grid-3 .offre-desc { min-height: 0; }
    }
}

/* Une ligne sous le filtre qui dit où trouver toutes les dates */
.offres-agenda {
    text-align: center; color: #6b7682; font-size: 0.92rem;
    max-width: 720px; margin: -22px auto 38px; line-height: 1.6;
}
.offres-agenda a {
    color: var(--primary-blue); font-weight: bold; text-decoration: none;
    border-bottom: 1.5px solid rgba(0, 51, 102, 0.28);
    transition: color 0.2s ease, border-color 0.2s ease;
}
.offres-agenda a:hover { color: var(--primary-red); border-color: var(--primary-red); }
@media (max-width: 700px) { .offres-agenda { margin: -12px auto 28px; font-size: 0.88rem; } }

@media (max-width: 560px) { .sponsors-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 18px; } }

/* Le prix garde sa pleine taille : seule la terminaison « .– » est plus petite. */
.offre-prix .prix-plein, .offre-prix .prix-famille { font-size: inherit; font-weight: inherit; }

/* En-tête de page sur la vidéo de l'accueil plutôt qu'un aplat bleu.
   La même vidéo passe derrière le titre de chaque page, sous un voile bleu
   pour que le texte reste lisible. */
.page-entete { overflow: hidden; isolation: isolate; }
.entete-video {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%; object-fit: cover; display: block;
    background: #002a54;
}
.page-entete::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(rgba(0, 38, 77, 0.72), rgba(0, 48, 95, 0.82));
}
@media (prefers-reduced-motion: reduce) {
    .entete-video { display: none; }
    .page-entete {
        background-image: url("hero-video-poster.jpg");
        background-size: cover; background-position: center;
    }
}

/* Ateliers et course privée au même gabarit : même largeur, même cadre, même fond */
.ateliers-rangee { max-width: 1100px; gap: 16px; }
.atelier-ligne {
    border: 1px solid #e6eaee; border-radius: 16px; padding: 22px 30px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.07);
}
.atelier-ligne:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.12); }
.atelier-icone { background: #eaf0f7; overflow: hidden; }
.atelier-icone > svg { width: 26px; height: 26px; }
.atelier-icone > img { width: auto; height: auto; max-width: 30px; max-height: 26px; object-fit: contain; }

/* L'encadré de la course privée bouge comme les autres box */
.encadre-offre {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.encadre-offre:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.12); }

/* Les huit logos partenaires tiennent sur une seule ligne */
.sponsors-grid {
    grid-template-columns: repeat(8, 1fr); gap: 0 22px; max-width: 1180px;
}
.sponsor-item img { height: 58px; max-width: 120px; }
@media (max-width: 1100px) { .sponsor-item img { height: 46px; max-width: 96px; } }
@media (max-width: 860px) {
    .sponsors-grid { grid-template-columns: repeat(4, 1fr); gap: 26px 18px; }
    .sponsor-item img { height: 44px; max-width: 110px; }
}
@media (max-width: 560px) { .sponsors-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; } }

/* Rappel des conditions sous chaque formulaire : discret mais présent */
.form-note-legale {
    margin-top: 10px; padding-top: 12px;
    border-top: 1px solid #e9edf1;
}

/* ============ ÉVÉNEMENTS DÉROULÉS SUR LA PAGE ============ */
/* Plus de carrousel à balayer : les quatre événements se suivent, et la vidéo
   se met en route d'elle-même quand le bloc arrive à l'écran. */
.event-liste {
    display: grid; gap: 34px; max-width: 1100px; margin: 0 auto;
}
.event-bloc {
    display: flex; flex-direction: row; align-items: stretch; background: #fff;
    border: 1px solid #e6eaee; border-radius: 16px; overflow: hidden;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.07);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.event-bloc:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.12); }
.event-bloc:nth-child(even) { flex-direction: row-reverse; }
.event-bloc .event-poster { border-right: 1px solid #eee; }
.event-bloc:nth-child(even) .event-poster { border-right: 0; border-left: 1px solid #eee; }
.event-video[data-en-lecture] { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18); }

@media (max-width: 900px) {
    .event-liste { gap: 26px; }
    .event-bloc, .event-bloc:nth-child(even) { flex-direction: column; }
    .event-bloc .event-poster, .event-bloc:nth-child(even) .event-poster {
        border-right: 0; border-left: 0; border-bottom: 1px solid #eee;
    }
}

/* Les vidéos des événements sont verticales : on les centre sans bandes noires */
.event-video-container { background: transparent; box-shadow: none; padding: 0; }
.event-video-container video {
    width: auto; max-width: 100%; max-height: 440px;
    display: block; margin: 0 auto; border-radius: 12px;
    background: #0d0d0d;
}
@media (max-width: 900px) { .event-video-container video { max-height: 55vh; } }

/* ============ VIDÉO EN FOND DE L'ACCUEIL ============ */
/* Elle tourne en boucle, sans son : c'est un décor, pas une vidéo à regarder.
   L'image de secours s'affiche tant que le fichier n'est pas arrivé. */
.hero-video {
    width: 100%; height: 100%; object-fit: cover; display: block;
    background: #0a2b4d;
}
@media (prefers-reduced-motion: reduce) {
    /* Si la personne demande moins d'animation, on s'en tient à l'image fixe. */
    .hero-video { display: none; }
    .hero-diapo {
        background-image: url("hero-video-poster.jpg");
        background-size: cover; background-position: center;
    }
}

/* ============ BOX DES DISCIPLINES EN PHOTO ============ */
/* La photo remplace l'icône : elle occupe tout le fond de la box, assombrie
   juste ce qu'il faut pour que le titre et le texte restent lisibles. */
.carte-photo {
    position: relative; overflow: hidden; isolation: isolate;
    background: #0a2b4d; color: #fff;
    min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end;
    padding: 28px 26px 30px; text-align: left;
}
.carte-photo::before {
    content: ''; position: absolute; inset: 0; z-index: -2;
    background-image: var(--photo);
    background-size: cover; background-position: center;
    transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.carte-photo::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to bottom,
        rgba(0, 25, 51, 0.20) 0%,
        rgba(0, 25, 51, 0.58) 48%,
        rgba(0, 20, 42, 0.90) 100%);
}
.carte-photo:hover::before { transform: scale(1.06); }
.carte-photo h3 { color: #fff; margin: 0 0 10px; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45); }
.carte-photo p { color: #e8eef5; margin: 0; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.carte-photo:hover { border-bottom-color: var(--primary-red); }

@media (max-width: 700px) {
    .carte-photo { min-height: 240px; padding: 22px 20px 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .carte-photo::before { transition: none; }
    .carte-photo:hover::before { transform: none; }
}

/* ============ CARROUSEL D'UNE JOURNÉE DE CHALLENGE ============ */
.chall-carrousel { position: relative; max-width: 1100px; margin: 0 auto; }
.chall-piste {
    display: flex; gap: 18px; overflow-x: auto;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; -ms-overflow-style: none;
    padding: 4px; border-radius: 18px;
}
.chall-piste::-webkit-scrollbar { display: none; }
.chall-vue {
    flex: 0 0 100%; margin: 0; scroll-snap-align: center; scroll-snap-stop: always;
    background: #fff; border-radius: 16px; overflow: hidden;
    border: 1px solid #e6eaee; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.08);
}
.chall-vue img {
    width: 100%; height: auto; aspect-ratio: 3 / 2;
    object-fit: cover; display: block; background: #dfe6ec;
}
.chall-vue figcaption {
    padding: 16px 20px 18px; color: #4d5763; font-size: 0.95rem; line-height: 1.55;
    text-align: center;
}
.chall-carrousel .carousel-btn { z-index: 3; }

/* Deux photos de front dès qu'il y a la place */
@media (min-width: 900px) {
    .chall-vue { flex-basis: calc((100% - 18px) / 2); }
}
@media (max-width: 700px) {
    .chall-piste { gap: 12px; }
    .chall-carrousel .carousel-btn { display: none; }
    .chall-vue figcaption { font-size: 0.9rem; padding: 13px 15px 15px; }
}

/* La phrase sur les langues parlées passe sous les trois box */
/* L'adresse ouvre le bloc de contact du pied de page */
.footer-col > p:first-of-type { margin-top: 0; }
.footer-contacts { margin: 14px 0 0; }

/* ============ TEXTE D'INTRODUCTION AVEC PHOTOS QUI DÉFILENT ============ */
/* Le texte à gauche, un carré de photos qui tourne à droite, comme la
   présentation de Philippe Roux sur la page Le Team. */
.intro-illustree {
    display: grid; grid-template-columns: 1.35fr auto;
    align-items: center; gap: 40px;
    max-width: 1100px; margin: 0 auto;
    background: #fff; padding: 34px; border-radius: 16px;
    border: 1px solid #e6eaee; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.07);
}
.intro-texte { font-size: 1.05rem; color: #444; line-height: 1.8; }
.intro-texte p:first-child { margin-top: 0; }
.intro-texte p:last-child { margin-bottom: 0; }
.intro-illustree .diapo-carre { width: 330px; height: 330px; margin: 0; }

@media (max-width: 900px) {
    .intro-illustree { grid-template-columns: 1fr; gap: 26px; padding: 24px; }
    .intro-illustree .diapo-carre { width: 100%; max-width: 420px; height: 300px; margin: 0 auto; }
    .intro-texte { font-size: 1rem; }
}

/* Petite icône calendrier dans la phrase de renvoi vers l'agenda */
.icone-agenda { vertical-align: -3px; margin-right: 3px; }

/* Un champ nombre garde la même largeur que les autres champs du formulaire */
.form-ligne input[type="number"] { width: 100%; }

/* ============ ANIMATIONS : SOULÈVEMENT, ZOOM, ONDE AU CLIC ============ */

/* Le bandeau de contact défile avec la page : il ne reste plus collé en haut. */
.barre-contact { position: static; top: auto; }

/* Les carrés de disciplines se soulèvent, la photo derrière s'agrandit
   doucement et le titre remonte d'un cran. */
.carte-photo {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.carte-photo::before { transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1); }
.carte-photo h3, .carte-photo p {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.carte-photo:hover { transform: translateY(-10px); box-shadow: 0 28px 54px rgba(0, 25, 51, 0.30); }
.carte-photo:hover::before { transform: scale(1.11); }
.carte-photo:hover h3 { transform: translateY(-6px); }
.carte-photo:hover p { transform: translateY(-3px); }
.carte-photo:active { transform: translateY(-3px) scale(0.988); transition-duration: 0.12s; }

/* Boutons : légère montée au survol, enfoncement au clic. */
.cta-button, .offre-btn, .agenda-btn, .btn-rouge, .bouton-rouge {
    transition: background-color 0.28s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.28s ease;
}
.cta-button:hover, .offre-btn:hover, .btn-rouge:hover, .bouton-rouge:hover {
    transform: translateY(-2px); box-shadow: 0 12px 24px rgba(196, 30, 42, 0.32);
}
.agenda-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0, 86, 179, 0.30); }
.cta-button:active, .offre-btn:active, .agenda-btn:active,
.btn-rouge:active, .bouton-rouge:active {
    transform: translateY(0) scale(0.965); transition-duration: 0.1s;
}

/* L'onde partant du doigt ou du curseur.
   Attention : le positionnement n'est forcé que sur les éléments encore en
   « static ». Sur une flèche de carrousel, déjà en « absolute », l'imposer la
   ferait retomber dans le flux et sauter en bas de son conteneur. */
.onde-hote { overflow: hidden; }
.onde-hote-relatif { position: relative; }
.onde-cercle {
    position: absolute; border-radius: 50%; pointer-events: none; z-index: 4;
    background: rgba(255, 255, 255, 0.42);
    transform: scale(0); opacity: 0.6;
    animation: onde-diffuse 0.62s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.onde-sombre .onde-cercle { background: rgba(0, 62, 122, 0.22); }
@keyframes onde-diffuse { to { transform: scale(1); opacity: 0; } }

/* Apparition douce des blocs au défilement. */
.au-defilement { opacity: 0; transform: translateY(22px); }
.au-defilement.est-visible {
    opacity: 1; transform: none;
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .carte-photo, .carte-photo::before, .carte-photo h3, .carte-photo p,
    .cta-button, .offre-btn, .agenda-btn, .btn-rouge, .bouton-rouge { transition: none; }
    .carte-photo:hover, .carte-photo:active, .carte-photo:hover h3, .carte-photo:hover p,
    .cta-button:hover, .offre-btn:hover, .agenda-btn:hover,
    .cta-button:active, .offre-btn:active, .agenda-btn:active { transform: none; }
    .onde-cercle { display: none; }
    .au-defilement { opacity: 1; transform: none; }
}

/* ============ PORTRAITS DES RESPONSABLES ============ */
/* Format d'origine : photo carrée, texte en dessous, liseré bleu en haut.
   La box se soulève au survol, comme les autres cartes du site. */
.responsable {
    overflow: hidden;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}
.responsable img { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.responsable:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(0, 25, 51, 0.18); }
.responsable:hover img { transform: scale(1.04); }
.responsable:active { transform: translateY(-3px) scale(0.993); transition-duration: 0.12s; }

@media (prefers-reduced-motion: reduce) {
    .responsable, .responsable img { transition: none; }
    .responsable:hover, .responsable:active { transform: none; }
    .responsable:hover img { transform: none; }
}

/* Les blocs qui portent un liseré bleu réagissent aussi au survol. */
.calendrier, .horaires-course {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.calendrier:hover, .horaires-course:hover {
    transform: translateY(-5px); box-shadow: 0 22px 46px rgba(0, 0, 0, 0.13);
}
@media (prefers-reduced-motion: reduce) {
    .calendrier, .horaires-course { transition: none; }
    .calendrier:hover, .horaires-course:hover { transform: none; }
}

/* ============ PAGE CHALLENGE ============ */

/* Bouton d'inscription posé dans l'en-tête, sous le titre */
.entete-action { margin: 22px auto 0 !important; }
.bouton-dossard {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--primary-red); color: #fff !important;
    padding: 13px 24px; border-radius: 999px;
    font-weight: bold; text-decoration: none; font-size: 1rem;
    box-shadow: 0 12px 30px rgba(196, 30, 42, 0.35);
    transition: background-color 0.28s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.28s ease;
}
.bouton-dossard:hover {
    background: #b01823; transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(196, 30, 42, 0.45);
}
.bouton-dossard:active { transform: translateY(0) scale(0.965); transition-duration: 0.1s; }
.bouton-dossard svg { flex: 0 0 auto; }


/* Même respiration au-dessus des dates qu'entre le trait rouge et le box */
.dates-grid-espacee { margin-top: 40px; padding-top: 0; }

/* La photo n'est plus un petit carré : format vertical, plus grand, plus posé. */
.diapo-carre {
    width: min(100%, 420px); height: auto; aspect-ratio: 4 / 5;
    border-radius: 20px; box-shadow: 0 26px 58px rgba(0, 25, 51, 0.24);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s ease;
}
.diapo-carre:hover { transform: translateY(-6px); box-shadow: 0 34px 70px rgba(0, 25, 51, 0.30); }
.intro-illustree .diapo-carre { width: 420px; height: auto; }
.intro-illustree { align-items: stretch; gap: 46px; padding: 40px; }
.intro-illustree .intro-texte { align-self: center; }

@media (max-width: 900px) {
    .diapo-carre, .intro-illustree .diapo-carre {
        width: min(100%, 340px); height: auto; margin: 0 auto;
    }
    .intro-illustree { padding: 26px; gap: 28px; }
}
@media (prefers-reduced-motion: reduce) {
    .diapo-carre { transition: none; }
    .diapo-carre:hover { transform: none; }
}

/* ============ RABAIS FAMILLE : REPÈRE BARRÉ ET PRIX PAR ENFANT ============ */
/* Quand le rabais est activé, la ligne rouge sous le prix se barre elle aussi
   et le tarif réduit prend sa place, suivi de la mention « par enfant ». */
.repere-famille, .prix-par-enfant { display: none; }
body.tarif-famille .a-tarif-famille .repere-plein {
    text-decoration: line-through; text-decoration-thickness: 1.6px; opacity: 0.45;
}
body.tarif-famille .a-tarif-famille .repere-famille {
    display: block; margin-top: 3px; font-weight: bold;
}
body.tarif-famille .a-tarif-famille .prix-par-enfant {
    display: inline-block; margin-left: 8px; white-space: nowrap;
    font-size: 0.95rem; font-weight: normal; color: #7a838d;
}

/* Un peu d'air entre une ligne grise et le bloc qui la précède */
.offres-groupe + .offres-groupe .separateur-offres { margin-top: 48px; }

/* Renvoi vers l'agenda depuis un formulaire */
.lien-calendrier {
    color: var(--primary-blue); font-weight: bold; text-decoration: none;
    border-bottom: 1px solid rgba(0, 51, 102, 0.35);
}
.lien-calendrier:hover { color: var(--primary-red); border-bottom-color: currentColor; }

/* ============ PAGE AGENDA ============ */
/* Le calendrier est lu dans notre tableau Google à chaque visite, puis
   redessiné aux couleurs du site. Personne n'a besoin d'Excel. */
.agenda-cadre { max-width: 1060px; margin: 0 auto; }
.agenda-chargement, .agenda-secours {
    text-align: center; color: #777; padding: 40px 20px;
}
.agenda-secours .offre-btn { display: inline-block; margin-top: 18px; }
.agenda-note {
    max-width: 780px; margin: 34px auto 0; text-align: center;
    color: #888; font-size: 0.9rem; line-height: 1.7;
}

/* Filtres, même langage que ceux de la page Offres */
.agenda-filtres {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    margin: 0 0 34px;
}
.agenda-filtre {
    border: 1px solid #dbe3ec; background: #fff; color: var(--primary-blue);
    font-family: inherit; font-size: 0.88rem; font-weight: bold;
    padding: 9px 18px; border-radius: 999px; cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease,
                border-color 0.25s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.agenda-filtre:hover { border-color: var(--primary-blue); transform: translateY(-1px); }
.agenda-filtre.actif {
    background: var(--primary-blue); border-color: var(--primary-blue); color: #fff;
}
.agenda-filtre:active { transform: scale(0.96); }

/* Un mois, puis ses journées */
.agenda-mois { margin-bottom: 34px; }
.agenda-mois[hidden] { display: none; }
.agenda-mois-titre {
    margin: 0 0 14px; color: var(--primary-blue);
    font-size: 1rem; text-transform: uppercase; letter-spacing: 1.4px;
    display: flex; align-items: center; gap: 12px;
}
.agenda-mois-titre span { color: #9aa6b4; font-weight: normal; letter-spacing: 1px; }
.agenda-mois-titre::after {
    content: ''; flex: 1 1 auto; height: 1px; background: #e2e8ee;
}
.agenda-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.agenda-jour {
    display: flex; align-items: stretch; gap: 16px;
    background: #fff; border: 1px solid #e6eaee; border-radius: 14px;
    border-left: 4px solid #cfd8e2; padding: 14px 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.agenda-jour[hidden] { display: none; }
.agenda-jour:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.1); }

.agenda-date {
    flex: 0 0 46px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; line-height: 1.1;
}
.agenda-date strong { font-size: 1.45rem; color: var(--primary-blue); }
.agenda-date span {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.6px;
    color: #9aa6b4; margin-top: 3px;
}
.agenda-corps {
    display: flex; flex-direction: column; justify-content: center; gap: 3px;
    border-left: 1px solid #edf1f5; padding-left: 16px; min-width: 0;
}
.agenda-titre { font-weight: bold; color: #26303a; }
.agenda-detail { color: #6b7684; font-size: 0.9rem; }
.agenda-vacances {
    color: #9aa6b4; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px;
}

/* Chaque nature a sa couleur de liseré */
.agenda-entrainement { border-left-color: var(--primary-blue); }
.agenda-challenge { border-left-color: var(--primary-red); }
.agenda-challenge .agenda-titre { color: var(--primary-red); }
.agenda-evenement { border-left-color: #f0a202; }
.agenda-a-confirmer { border-left-color: #cfd8e2; }
.agenda-a-confirmer .agenda-titre { color: #8b949e; font-style: italic; }

/* Ce qui est passé s'efface sans disparaître */
.agenda-passe { opacity: 0.5; }
.agenda-passe:hover { opacity: 1; }

@media (max-width: 600px) {
    .agenda-jour { padding: 12px 14px; gap: 12px; }
    .agenda-corps { padding-left: 12px; }
    .agenda-date { flex-basis: 40px; }
    .agenda-date strong { font-size: 1.25rem; }
    .agenda-filtre { font-size: 0.82rem; padding: 8px 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .agenda-jour, .agenda-filtre { transition: none; }
    .agenda-jour:hover, .agenda-filtre:hover, .agenda-filtre:active { transform: none; }
}

/* ============ CHOIX DU TARIF DANS LES FORMULAIRES ============ */
/* Deux box au contour traitillé : celle qu'on choisit se remplit. */
.tarifs-choix {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 16px; margin-bottom: 8px;
}
.tarif-box {
    position: relative; display: block; cursor: pointer;
    border: 2px dashed #c3cedb; border-radius: 14px;
    padding: 20px 22px; background: #fff;
    transition: border-color 0.25s ease, background-color 0.25s ease,
                box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.tarif-box:hover { border-color: var(--primary-blue); transform: translateY(-2px); }
.tarif-box input {
    position: absolute; opacity: 0; width: 0; height: 0; margin: 0;
}
.tarif-box-corps { display: flex; flex-direction: column; gap: 6px; }
.tarif-box-nom {
    font-size: 0.78rem; font-weight: bold; text-transform: uppercase;
    letter-spacing: 1.1px; color: #8b949e;
    transition: color 0.25s ease;
}
.tarif-box-prix {
    font-size: 1.75rem; font-weight: bold; color: var(--primary-blue);
    line-height: 1.15; transition: color 0.25s ease;
}
.tarif-box-prix .prix-dec { font-size: 1.05rem; font-weight: normal; }
.tarif-box-prix small { font-size: 0.85rem; font-weight: normal; color: #7a838d; }
.tarif-box-aide { font-size: 0.86rem; color: #6b7684; line-height: 1.45; }

/* Une fois choisie : trait plein et fond de couleur */
.tarif-box:has(input:checked) {
    border-style: solid; border-color: var(--primary-blue);
    background: linear-gradient(145deg, #eef4fb, #e2ecf8);
    box-shadow: 0 12px 28px rgba(0, 51, 102, 0.14);
}
.tarif-box:has(input:checked) .tarif-box-nom { color: var(--primary-blue); }
/* Repli pour les navigateurs sans :has() — la classe est posée par le script. */
.tarif-box.tarif-choisi {
    border-style: solid; border-color: var(--primary-blue);
    background: linear-gradient(145deg, #eef4fb, #e2ecf8);
    box-shadow: 0 12px 28px rgba(0, 51, 102, 0.14);
}
.tarif-box.tarif-choisi .tarif-box-nom { color: var(--primary-blue); }

/* Une pastille de confirmation dans le coin */
.tarif-box::after {
    content: '✓'; position: absolute; top: 12px; right: 14px;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--primary-blue); color: #fff;
    font-size: 0.8rem; line-height: 24px; text-align: center;
    opacity: 0; transform: scale(0.6);
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.tarif-box:has(input:checked)::after,
.tarif-box.tarif-choisi::after { opacity: 1; transform: scale(1); }

.tarif-box input:focus-visible ~ .tarif-box-corps {
    outline: 2px solid var(--primary-blue); outline-offset: 6px; border-radius: 6px;
}


@media (prefers-reduced-motion: reduce) {
    .tarif-box, .tarif-box::after { transition: none; }
    .tarif-box:hover { transform: none; }
}

/* ============ AGENDA : LA GRILLE DU CALENDRIER ============ */
/* Écran large : la grille, comme dans le tableau. Téléphone : la liste,
   parce que sept colonnes sur 375 px ne se lisent pas. */
.agenda-grilles { display: block; }
.agenda-listes { display: none; }

.cal-grille {
    background: #fff; border: 1px solid #dde4ec; border-radius: 14px;
    overflow: hidden; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07);
}
.cal-entetes, .cal-semaines {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cal-entete {
    padding: 11px 6px; text-align: center;
    background: var(--primary-blue); color: #fff;
    font-size: 0.72rem; font-weight: bold;
    text-transform: uppercase; letter-spacing: 0.8px;
}
.cal-case {
    position: relative; min-height: 92px; padding: 7px 8px 8px;
    border-right: 1px solid #eaeff4; border-bottom: 1px solid #eaeff4;
    display: flex; flex-direction: column; gap: 3px;
    font-size: 0.78rem; line-height: 1.3;
}
.cal-case:nth-child(7n) { border-right: 0; }
.cal-hors { background: #fafbfc; min-height: 92px; }
.cal-rien { background: #fff; }

.cal-num {
    font-weight: bold; color: #26303a; font-size: 0.9rem;
    align-self: flex-start;
}
.cal-rien .cal-num, .cal-hors .cal-num { color: #b9c3cd; font-weight: normal; }

.cal-etiq {
    font-weight: bold; overflow-wrap: anywhere;
    border-left: 3px solid transparent; padding-left: 6px;
}
.cal-second { color: #6b7684; font-size: 0.72rem; padding-left: 9px; }
.cal-conge-codes {
    margin-top: auto; color: #9aa6b4; font-size: 0.66rem;
    text-transform: uppercase; letter-spacing: 0.4px; overflow-wrap: anywhere;
}

/* Chaque nature a sa couleur, comme dans la légende */
.cal-entrainement { background: #f3f7fc; }
.cal-entrainement .cal-etiq { color: var(--primary-blue); border-left-color: var(--primary-blue); }
.cal-challenge { background: #fdf2f3; }
.cal-challenge .cal-etiq { color: var(--primary-red); border-left-color: var(--primary-red); }
.cal-evenement { background: #fff8ec; }
.cal-evenement .cal-etiq { color: #a86d00; border-left-color: #f0a202; }
.cal-a-confirmer { background: #f8fafb; }
.cal-a-confirmer .cal-etiq { color: #8b949e; border-left-color: #cfd8e2; font-style: italic; }

.cal-conge::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: repeating-linear-gradient(90deg, #cbd5e0 0 6px, transparent 6px 12px);
}
.cal-passe { opacity: 0.55; }
.cal-aujourdhui { box-shadow: inset 0 0 0 2px var(--primary-red); }

/* Filtre : la case reste, son contenu s’efface */
.cal-hors-filtre { background: #fff; }
.cal-hors-filtre .cal-etiq,
.cal-hors-filtre .cal-second { opacity: 0.18; }

@media (max-width: 860px) {
    .cal-case, .cal-hors { min-height: 78px; font-size: 0.72rem; }
    .cal-etiq { padding-left: 5px; }
}
@media (max-width: 760px) {
    /* Sept colonnes deviennent illisibles : on repasse à la liste. */
    .agenda-grilles { display: none; }
    .agenda-listes { display: block; }
    .agenda-legende { display: none; }
}

/* ============ LES AVANTAGES, DANS LES FORMULAIRES ============ */
/* Ce bloc était trop discret et passait inaperçu : il prend maintenant toute
   la largeur, aux couleurs du club, avec une étoile et un sous-titre. */
.avantages-bloc {
    margin: 4px 0 24px;
    border: 2px solid var(--primary-red);
    border-radius: 14px;
    background: linear-gradient(145deg, #fef6f7, #fdeaec);
    box-shadow: 0 10px 26px rgba(196, 30, 42, 0.14);
    overflow: hidden;
}
.avantages-bouton.offre-plus {
    width: 100%; margin: 0; padding: 11px 16px;
    align-self: stretch;
    display: flex; align-items: center; gap: 10px;
    color: var(--primary-red); font-size: 0.85rem;
    text-transform: uppercase; letter-spacing: 0.6px;
    background: none; border: 0; cursor: pointer; text-align: left;
}
.avantages-bouton.offre-plus:hover { color: #91131d; background: rgba(196, 30, 42, 0.06); }
.avantages-bouton > span { flex: 1 1 auto; min-width: 0; }
.avantages-bouton .offre-chevron { flex: 0 0 auto; }

.avantages-bloc .offre-detail-corps { padding: 0 16px; }
.avantages-bloc .offre-liste { margin: 0 0 15px; }
.avantages-bloc .offre-liste li { color: #4a3b3d; }
.avantages-bloc .offre-liste li::before { color: var(--primary-red); }

/* Une pulsation discrète au chargement, pour que l'œil s'y pose */
@keyframes avantages-signal {
    0%, 100% { box-shadow: 0 10px 26px rgba(196, 30, 42, 0.14); }
    50% { box-shadow: 0 10px 26px rgba(196, 30, 42, 0.14), 0 0 0 6px rgba(196, 30, 42, 0.10); }
}
.avantages-bloc { animation: avantages-signal 2.6s ease-in-out 1.2s 2; }

@media (max-width: 560px) {
    .avantages-bouton.offre-plus { font-size: 0.8rem; padding: 11px 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .avantages-bloc { animation: none; }
}

/* ============ APERÇU DE LA WEBCAM AU SURVOL ============ */
/* L'icône de la barre ouvre toujours le panorama au clic ; au survol elle
   montre d'abord l'image en direct, pour éviter d'aller voir pour rien. */
.lien-webcam { position: relative; }
.webcam-apercu {
    position: absolute; top: calc(100% + 12px); right: 0; z-index: 1200;
    width: 340px; padding: 8px; border-radius: 14px;
    background: #fff; border: 1px solid #dde4ec;
    box-shadow: 0 18px 44px rgba(0, 25, 51, 0.22);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0.22s;
    pointer-events: none;
}
.lien-webcam:hover .webcam-apercu,
.lien-webcam:focus-visible .webcam-apercu,
.webcam-apercu.ouvert {
    opacity: 1; visibility: visible; transform: translateY(0);
}
/* Une petite flèche vers l'icône */
.webcam-apercu::before {
    content: ''; position: absolute; top: -7px; right: 16px;
    width: 12px; height: 12px; background: #fff;
    border-left: 1px solid #dde4ec; border-top: 1px solid #dde4ec;
    transform: rotate(45deg);
}
.webcam-apercu-image {
    display: block;                 /* un span reste en ligne : aspect-ratio serait ignoré */
    position: relative; border-radius: 9px; overflow: hidden;
    background: #eaeff4; aspect-ratio: 1067 / 150;
}
.webcam-apercu-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.webcam-apercu-etiquette {
    position: absolute; top: 7px; left: 7px;
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(0, 0, 0, 0.6); color: #fff;
    font-size: 0.6rem; font-weight: bold; letter-spacing: 0.8px;
    text-transform: uppercase; padding: 3px 7px; border-radius: 20px;
}
.webcam-apercu-legende {
    margin: 7px 2px 2px; color: #6b7684; font-size: 0.72rem;
    display: flex; justify-content: space-between; gap: 10px; line-height: 1.3;
}
.webcam-apercu-legende strong { color: var(--primary-blue); font-weight: bold; }

/* Sur les écrans tactiles, le survol n'existe pas : l'icône garde son rôle de lien. */
@media (hover: none), (max-width: 900px) {
    .webcam-apercu { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .webcam-apercu { transition: none; }
}

/* ============ COMPOSE TA SAISON ============ */
/* Trois colonnes : on coche ses jours à gauche, le tarif se recalcule au
   milieu, et les avantages s'allument à droite. Ce qu'on n'a pas encore
   reste affiché, barré : c'est ce qui rend la comparaison parlante. */
.saison-configurateur {
    max-width: 1100px; margin: 0 auto 30px;
    background: #fff; border: 1px solid #e6eaee; border-radius: 18px;
    padding: 32px 30px; box-shadow: 0 14px 38px rgba(0, 0, 0, 0.08);
}
.saison-titre {
    margin: 0 0 6px; color: var(--primary-blue); font-size: 1.5rem; text-align: center;
}
.saison-sous {
    margin: 0 0 28px; text-align: center; color: #6b7684; font-size: 0.98rem;
}
.saison-colonnes {
    display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 0;
    align-items: stretch;
}
.saison-col { padding: 0 26px; }
.saison-col + .saison-col { border-left: 1px solid #eef2f6; }
.saison-col:first-child { padding-left: 4px; }
.saison-col:last-child { padding-right: 4px; }
.saison-col-titre {
    margin: 0 0 18px; font-size: 0.74rem; font-weight: bold;
    text-transform: uppercase; letter-spacing: 1.2px; color: #9aa6b4;
}

/* ---- Colonne 1 : les jours ---- */
.jour-case {
    display: flex; align-items: center; gap: 13px; cursor: pointer;
    border: 2px solid #dde4ec; border-radius: 12px;
    padding: 13px 15px; margin-bottom: 11px;
    transition: border-color 0.25s ease, background-color 0.25s ease,
                transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.jour-case:hover { border-color: var(--primary-blue); transform: translateY(-1px); }
.jour-case input { position: absolute; opacity: 0; width: 0; height: 0; }
.jour-marque {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px;
    border: 2px solid #c3cedb; background: #fff;
    position: relative; transition: background-color 0.2s ease, border-color 0.2s ease;
}
.jour-marque::after {
    content: ''; position: absolute; left: 6px; top: 2px;
    width: 5px; height: 10px; border: solid #fff;
    border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0.4);
    opacity: 0; transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.jour-case:has(input:checked) { border-color: var(--primary-blue); background: #eef4fb; }
.jour-case:has(input:checked) .jour-marque {
    background: var(--primary-blue); border-color: var(--primary-blue);
}
.jour-case:has(input:checked) .jour-marque::after { opacity: 1; transform: rotate(45deg) scale(1); }
.jour-case.jour-choisi { border-color: var(--primary-blue); background: #eef4fb; }
.jour-case.jour-choisi .jour-marque { background: var(--primary-blue); border-color: var(--primary-blue); }
.jour-case.jour-choisi .jour-marque::after { opacity: 1; transform: rotate(45deg) scale(1); }
.jour-texte { display: flex; flex-direction: column; line-height: 1.3; }
.jour-texte strong { color: #26303a; font-size: 1rem; }
.jour-texte span { color: #8b949e; font-size: 0.78rem; }
.jour-case input:focus-visible ~ .jour-texte { text-decoration: underline; }

/* ---- Colonne 2 : le tarif ---- */
.saison-prix {
    margin: 0 0 4px; font-size: 2.3rem; font-weight: bold;
    color: var(--primary-blue); line-height: 1.1;
}
.saison-prix .prix-dec { font-size: 1.1rem; font-weight: normal; }
.saison-par-enfant { font-size: 0.85rem; font-weight: normal; color: #7a838d; white-space: nowrap; }
.saison-detail { margin: 0 0 2px; color: #4a5560; font-size: 0.95rem; }
.saison-repere { margin: 0 0 12px; color: var(--primary-red); font-weight: bold; font-size: 0.92rem; }
.saison-vacances { margin: 0 0 20px; color: #6b7684; font-size: 0.88rem; }
.saison-rien { color: #8b949e; font-size: 0.92rem; margin: 0 0 20px; line-height: 1.6; }
.saison-btn { display: block; text-align: center; }
.saison-btn-inactif { opacity: 0.45; pointer-events: none; }
.saison-note { margin: 12px 0 0; color: #9aa6b4; font-size: 0.78rem; line-height: 1.5; }

/* ---- Colonne 3 : les avantages ---- */
.saison-avantages { list-style: none; margin: 0; padding: 0; }
.saison-avantages li {
    position: relative; padding: 0 0 0 26px; margin-bottom: 10px;
    font-size: 0.93rem; color: #3c4750; line-height: 1.45;
    transition: color 0.25s ease, opacity 0.25s ease;
}
.saison-avantages li::before {
    content: '✓'; position: absolute; left: 0; top: 0;
    color: var(--primary-red); font-weight: bold;
    transition: color 0.25s ease;
}
.saison-avantages li.av-absent {
    color: #b9c3cd; text-decoration: line-through;
    text-decoration-color: #d7dee6;
}
.saison-avantages li.av-absent::before { content: '–'; color: #cfd8e2; }

@media (max-width: 900px) {
    .saison-configurateur { padding: 26px 20px; }
    .saison-colonnes { grid-template-columns: 1fr; gap: 26px; }
    .saison-col { padding: 0; }
    .saison-col + .saison-col {
        border-left: 0; border-top: 1px solid #eef2f6; padding-top: 24px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .jour-case, .jour-marque, .jour-marque::after, .saison-avantages li { transition: none; }
    .jour-case:hover { transform: none; }
}

/* Rappel de la formule choisie, en tête du formulaire d'inscription */
.saison-rappel {
    background: #eef4fb; border: 1px solid #d5e2f0; border-radius: 14px;
    padding: 18px 20px; margin-bottom: 26px;
}
.saison-rappel-titre {
    margin: 0 0 4px; font-size: 0.72rem; font-weight: bold;
    text-transform: uppercase; letter-spacing: 1.1px; color: #7d92ab;
}
.saison-rappel-jours {
    margin: 0; font-size: 1.35rem; font-weight: bold; color: var(--primary-blue);
}
.saison-rappel-detail { margin: 4px 0 0; color: #5b6b7c; font-size: 0.9rem; }
.saison-rappel-lien {
    display: inline-block; margin-top: 10px;
    color: var(--primary-red); font-weight: bold; font-size: 0.85rem;
}
.avantages-bloc .saison-avantages { margin: 0 0 15px; }
.avantages-bloc .saison-avantages li { color: #4a3b3d; }
.avantages-bloc .saison-avantages li::before { color: var(--primary-red); }
.avantages-bloc .saison-avantages li.av-absent { color: #c0b3b5; }
.avantages-bloc .saison-avantages li.av-absent::before { color: #d8cccd; }

/* ============ LES OFFRES EN RANGÉES À TROIS COLONNES ============ */
/* Même lecture que le configurateur de saison : l'offre, le tarif, les
   avantages. Ceux-ci ne sont plus repliés derrière un bouton — c'est
   justement ce que personne n'ouvrait. */
.offres-rangees { display: grid; gap: 16px; max-width: 1100px; margin: 0 auto; }

.offre-rangee {
    position: relative;
    display: grid; grid-template-columns: 1.15fr 0.95fr 1.3fr; gap: 0;
    background: #fff; border: 1px solid #e6eaee; border-radius: 16px;
    padding: 26px 24px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.offre-rangee:hover { transform: translateY(-4px); box-shadow: 0 20px 42px rgba(0, 0, 0, 0.11); }
.offre-rangee.offre-vedette { border-color: var(--primary-red); border-width: 2px; }

.offre-col { padding: 0 24px; min-width: 0; }
.offre-col + .offre-col { border-left: 1px solid #eef2f6; }
.offre-col:first-child { padding-left: 0; }
.offre-col:last-child { padding-right: 0; }
.offre-col-titre {
    margin: 0 0 12px; font-size: 0.7rem; font-weight: bold;
    text-transform: uppercase; letter-spacing: 1.1px; color: #9aa6b4;
}

.offre-rangee h4 { margin: 0 0 8px; color: var(--primary-blue); font-size: 1.3rem; }
.offre-rangee .offre-desc { margin: 0; color: #5b6b7c; line-height: 1.6; font-size: 0.95rem; }
.offre-rangee .offre-badge {
    position: static; display: inline-block; margin: 0 0 10px;
}
.offre-rangee .offre-prix { margin: 0 0 2px; }
.offre-rangee .offre-repere { margin: 0 0 16px; }
.offre-rangee .offre-btn { margin: 0; display: block; text-align: center; }
.offre-rangee .offre-liste { margin: 0; }

@media (max-width: 900px) {
    .offre-rangee { grid-template-columns: 1fr; gap: 22px; padding: 22px 20px; }
    .offre-col { padding: 0; }
    .offre-col + .offre-col {
        border-left: 0; border-top: 1px solid #eef2f6; padding-top: 20px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .offre-rangee { transition: none; }
    .offre-rangee:hover { transform: none; }
}

/* ============ LE RABAIS FAMILLE, BIEN EN VUE ============ */
/* Il était un petit interrupteur perdu à côté des filtres. Il devient une
   bande à lui, en rouge, qui change d'aspect une fois activée. */
.offres-outils { display: block; }
.offres-outils .filtre-offres { margin: 0 auto; }

.bascule-famille {
    display: flex; align-items: center; gap: 16px; cursor: pointer;
    user-select: none; max-width: 1100px; margin: 20px auto 0;
    padding: 16px 22px; border-radius: 14px;
    border: 2px dashed var(--primary-red);
    background: linear-gradient(145deg, #fef6f7, #fdeaec);
    transition: border-color 0.28s ease, background-color 0.28s ease,
                box-shadow 0.28s ease;
}
.bascule-famille:hover { box-shadow: 0 10px 26px rgba(196, 30, 42, 0.16); }
.bascule-famille:has(input:checked),
.bascule-famille.famille-active {
    border-style: solid;
    background: linear-gradient(145deg, #fdecee, #fbdde1);
    box-shadow: 0 12px 30px rgba(196, 30, 42, 0.20);
}
.bascule-texte {
    display: flex; flex-direction: column; line-height: 1.35;
    color: var(--primary-red); font-weight: bold; font-size: 1.02rem;
}
.bascule-texte small { color: #a4636a; font-weight: normal; font-size: 0.85rem; }
.bascule-piste { width: 54px; height: 31px; }
.bascule-pastille { width: 25px; height: 25px; }
.bascule-famille input:checked + .bascule-piste .bascule-pastille { transform: translateX(23px); }

/* Ce que le rabais change, dit une fois pour toutes */
.bascule-effet {
    margin-left: auto; text-align: right; flex: 0 0 auto;
    color: var(--primary-red); font-size: 0.85rem; font-weight: bold;
}
.bascule-effet span { display: block; color: #a4636a; font-weight: normal; font-size: 0.78rem; }

@media (max-width: 700px) {
    .bascule-famille { flex-wrap: wrap; gap: 12px; padding: 14px 16px; }
    .bascule-texte { font-size: 0.95rem; }
    .bascule-effet { margin-left: 0; text-align: left; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .bascule-famille { transition: none; } }