:root {
        /* Palette inspirée du logo (bleu + gris) */
        --brand: #1653a4;
        /* bleu principal */
        --brand-2: #bbc7dc;
        /* gris clair / argent */
        --ink: #0f172a;
        /* texte principal */
        --muted: #64748b;
        /* texte secondaire */
        --bg: #ffffff;
        /* fond blanc */
        --line: #c0c9da;
        /* bordures douces */
        --ring: rgba(22, 83, 164, .25);
        /* Fond gradient très léger (page) */

        --page-bg: linear-gradient(90deg, #ffffff 0%, #dde1e9 100%);


    }

    html {
        background: var(--page-bg);
        background-attachment: fixed;
    }

    body {
        font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
        color: var(--ink);
        /* Fond tech très discret (moins fort) */
        background: transparent;
        background-size: auto, auto, auto, 22px 22px;
        background-attachment: fixed, fixed, fixed, fixed;
    }

    /* NAVBAR — blanc, net, pro */
   .navbar {
    position: sticky;
    top: 0;
    z-index: 999;

    background: rgba(255, 255, 255, 0.72);
    border-bottom: 1px solid rgba(255,255,255,.2);

    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

    .navbar .navbar-brand {
        font-weight: 800;
        letter-spacing: .2px;
        display: flex;
        align-items: center;
        gap: .6rem;
        color: var(--ink)
    }

    .navbar .nav-link {
        color: #334155
    }

    .navbar .nav-link:hover {
        color: var(--ink)
    }

    /* Icônes dans le menu */
.navbar .nav-link{
  display: inline-flex;
  align-items: center;
  gap: .5rem;              /* espace icône/texte */
}
.navbar .nav-link .nav-ico{
  font-size: 1.05rem;
  opacity: .75;
  transition: opacity .2s ease, transform .2s ease;
}
.navbar .nav-link:hover .nav-ico{
  opacity: 1;
  transform: translateY(-1px);
}



    .brand-badge img.brand-mark {
        width: 100px;
        /* ajuste entre 16–22px selon ton logo */

        display: block;
        object-fit: contain;
    }


    /* Badge logo minimal */
    .brand-badge {
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        width: auto;
        height: auto;
        padding: 0;
    }



    /* Boutons */
    .btn-brand {
        --bs-btn-padding-x: 1rem;
        --bs-btn-padding-y: .65rem;
        --bs-btn-border-radius: 2px;
        --bs-btn-color: #fff;
        --bs-btn-bg: var(--brand);
        --bs-btn-hover-bg: #134789;
        --bs-btn-border-color: transparent;
        --bs-btn-hover-border-color: transparent;
        box-shadow: 0 10px 24px -8px rgba(22, 83, 164, .35);
    }

    .btn-ghost {
        --bs-btn-color: #0f172a;
        --bs-btn-border-color: var(--line);
        --bs-btn-hover-border-color: #cbd5e1;
        --bs-btn-hover-bg: #f8fafc;
        border-radius: 2px
    }

    /* HERO — blanc avec léger voile */
    .hero {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        min-height: 58vh;
        display: grid;
        align-items: center;
        background: transparent;
    }

    .hero h1 {
        font-weight: 800;
        letter-spacing: .2px;
        color: var(--ink)
    }

    .hero .lead {
        color: #475569
    }

    /* Surfaces & cartes */
    .surface {
        background: #fff;

        border-radius: 2px;
        box-shadow: 0 18px 50px rgba(15, 23, 42, .08);
        color: var(--ink)
    }

    .card {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 2px;
        color: var(--ink);
        transition: transform .2s ease, box-shadow .2s ease
    }

    .card:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 36px -16px rgba(2, 6, 23, .12)
    }

    .event-img {
        border-radius: 2px;
        aspect-ratio: 16/9;
        object-fit: cover
    }

    .badge-soft {
        background: rgba(22, 83, 164, .06);
        border: 1px solid rgba(22, 83, 164, .15);
        color: #0b3a76;
        font-weight: 600
    }

    .muted {
        color: var(--muted)
    }

    .mini {
        font-size: .92rem
    }

    .price {
        font-weight: 800;
        letter-spacing: .2px;
        color: var(--ink)
    }

    .pill {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        padding: .38rem .68rem;

        background: #f8fafc;
        border: 1px solid var(--line);
        color: #0f172a
    }
    .pill.soft{background:transparent; border-color:rgba(15,23,42,.14); color:#475569}
.pill.pill-xs{padding:.22rem .5rem; gap:.35rem;  font-size:.82rem}
.pill.pill-xs i{font-size:.9em; line-height:1}


    /* Formulaires */
    .form-control,
    .form-select {
        background: #fff;
        border-color: var(--line);
        color: var(--ink);
        border-radius: 2px
    }

    .form-control:focus,
    .form-select:focus {
        box-shadow: 0 0 0 .25rem var(--ring);
        border-color: transparent
    }

    .input-group-text {
        background: #fff;
        color: #475569;
        border-color: var(--line)
    }

    /* Offcanvas & Modales */
    .offcanvas {
        background: #fff;
        color: var(--ink);
        border-left: 1px solid var(--line)
    }

    .modal-content {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 2px
    }

    .qr-box {
        background: #fff;
        border: 1px dashed var(--line);
        border-radius: 2px
    }

    /* Table */
    .table {
        --bs-table-color: var(--ink);
        --bs-table-bg: transparent;
        --bs-table-border-color: var(--line)
    }

    /* Liens */
    a {
        color: #1e62b1
    }

    a:hover {
        color: #0b3a76
    }

    .hero-carousel .hero-slide{
  aspect-ratio: 16/9;      /* même ratio que tes cartes */
  object-fit: cover;        /* recadrage propre */
  height: clamp(220px, 42vh, 460px);
}

/* Dots ronds bleus, actif plus vif */
.hero-carousel .carousel-indicators {
  --bs-carousel-indicator-width: 30px;   /* taille */
  --bs-carousel-indicator-height: 5px;
  --bs-carousel-indicator-spacer: .4rem; /* espacement */
}

.hero-carousel .carousel-indicators [data-bs-target]{
  width: var(--bs-carousel-indicator-width);
  height: var(--bs-carousel-indicator-height);
  border-radius: 2px;
  background-color: rgba(22,83,164,.28);   /* dot normal (bleu doux) */
  border: 1px solid rgba(255,255,255,.7);  /* petit liseré */
  opacity: 1;                               /* on gère la couleur plutôt que l'opacité */
}

.hero-carousel .carousel-indicators .active{
  background-color: #1653a4;               /* dot actif (bleu brand) */
  border-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(22,83,164,.18);/* halo subtil autour de l’actif */
}



    /* ========================= */
    /* ALT STYLE: GLASS (verre)  */
    /* ========================= */
    body.theme-glass {
        background:
            radial-gradient(60rem 24rem at 80% -30%, rgba(22, 83, 164, .05), transparent 60%),
            radial-gradient(60rem 24rem at -20% 120%, rgba(179, 186, 194, .08), transparent 60%),
            linear-gradient(180deg, #f9fbff 0%, #ffffff 100%),
            radial-gradient(circle at 16px 16px, rgba(2, 6, 23, .03) 1px, transparent 1.4px);
        background-size: auto, auto, auto, 22px 22px;
        background-attachment: fixed, fixed, fixed, fixed;
    }

    body.theme-glass .navbar {
    background: rgba(255, 255, 255, 0.72);

    /* Glass premium iOS/macOS */
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);

    border-bottom: 1px solid rgba(255, 255, 255, 0.18);

    box-shadow:
        0 8px 32px rgba(2, 6, 23, 0.06),
        0 1px 0 rgba(255, 255, 255, 0.25) inset;

    transition:
        background .3s ease,
        box-shadow .3s ease,
        backdrop-filter .3s ease;

    position: sticky;
    top: 0;
    z-index: 1050;
}

    body.theme-glass .surface {
        background: rgba(255, 255, 255, .65);
        border: 1px solid rgba(22, 83, 164, .12);
        box-shadow: 0 18px 40px -16px rgba(2, 6, 23, .15)
    }

    body.theme-glass .card {
        background: rgba(255, 255, 255, .68);
        border: 1px solid rgba(22, 83, 164, .14);
        box-shadow: 0 18px 40px -16px rgba(2, 6, 23, .18)
    }

    body.theme-glass .btn-brand {
        --bs-btn-bg: linear-gradient(135deg, var(--brand), var(--brand-2));
        --bs-btn-hover-bg: linear-gradient(135deg, #134789, var(--brand-2));
        box-shadow: 0 14px 28px -12px rgba(22, 83, 164, .4)
    }

    body.theme-glass .badge-soft {
        background: rgba(22, 83, 164, .08);
        border-color: rgba(22, 83, 164, .2);
        color: #0b3a76
    }

    body.theme-glass .pill {
        background: rgba(255, 255, 255, .6);
        border-color: rgba(22, 83, 164, .14)
    }

   body.theme-glass .navbar {
    background: rgba(255, 255, 255, 0.72);

    /* Glass premium iOS/macOS */
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);

    border-bottom: 1px solid rgba(255, 255, 255, 0.18);

    box-shadow:
        0 8px 32px rgba(2, 6, 23, 0.06),
        0 1px 0 rgba(255, 255, 255, 0.25) inset;

    transition:
        background .3s ease,
        box-shadow .3s ease,
        backdrop-filter .3s ease;

    position: sticky;
    top: 0;
    z-index: 1050;
}

    body.theme-glass .surface {
        background: rgba(255, 255, 255, .65);
        border: 1px solid rgba(22, 83, 164, .12);
        box-shadow: 0 18px 40px -16px rgba(2, 6, 23, .15)
    }

    body.theme-glass .card {
        background: rgba(255, 255, 255, .68);
        border: 1px solid rgba(22, 83, 164, .14);
        box-shadow: 0 18px 40px -16px rgba(2, 6, 23, .18)
    }

    body.theme-glass .btn-brand {
        --bs-btn-bg: linear-gradient(135deg, var(--brand), var(--brand-2));
        --bs-btn-hover-bg: linear-gradient(135deg, #134789, var(--brand-2));
        box-shadow: 0 14px 28px -12px rgba(22, 83, 164, .4)
    }

    body.theme-glass .badge-soft {
        background: rgba(22, 83, 164, .08);
        border-color: rgba(22, 83, 164, .2);
        color: #0b3a76
    }

    body.theme-glass .pill {
        background: rgba(255, 255, 255, .6);
        border-color: rgba(22, 83, 164, .14)
    }

    /* === Background tech overlay (visible mais subtil) === */
    header, main, footer, nav { position: relative; z-index: 1; }

    .bg-tech {
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        /* Trame ticket perforée (visible) + halos très doux */
        background-image:
            /* colonnes de perforations (gauche/droite) */
            radial-gradient(circle, rgba(22, 84, 164, 0.063) 2.1px, transparent 3px),
            radial-gradient(circle, rgba(22, 84, 164, 0.063) 2.1px, transparent 3px),
            /* lignes pointillées (haut/bas) */
            radial-gradient(circle, rgba(22, 84, 164, 0.073) 1.4px, transparent 2px),
            radial-gradient(circle, rgba(22, 84, 164, 0.086) 1.4px, transparent 2px),
            /* halos discrets qui laissent voir le gradient */
            radial-gradient(800px 360px at 90% -10%, rgba(22, 83, 164, .06), transparent 60%),
            radial-gradient(800px 360px at -10% 110%, rgba(179, 186, 194, .05), transparent 60%);
        background-size:
            26px 26px,
            26px 26px,
            14px 14px,
            14px 14px,
            auto,
            auto;
        background-position:
            left 22px top 0,
            right 22px top 0,
            0 34%,
            0 72%,
            90% -10%,
            -10% 110%;
        background-repeat:
            repeat-y,
            repeat-y,
            repeat-x,
            repeat-x,
            no-repeat,
            no-repeat;
    }

    .tech-medium .bg-tech {
        opacity: .6
    }

    .tech-strong .bg-tech {
        opacity: 1
    }

    .theme-glass.tech-medium .bg-tech {
        opacity: .5
    }

    .theme-glass.tech-strong .bg-tech {
        opacity: 1
    }

    /* Accent élégante sous les titres de section */
    .section-title::after {
        content: "";
        display: block;
        height: 3px;
        width: 80px;
        border-radius: 2px;
        margin-top: .6rem;
        background: linear-gradient(90deg, var(--brand), color-mix(in oklab, var(--brand) 20%, var(--brand-2)));
        opacity: .42;
    }

    /* Cartes/sections avec encoches (look ticket) */
    .surface.notched {
        position: relative;
        overflow: visible
    }

    .surface.notched::before,
    .surface.notched::after {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--page-bg);
        background-attachment: fixed;
        box-shadow: 0 0 0 1px var(--line);
    }

    .surface.notched::before {
        left: -8px
    }

    .surface.notched::after {
        right: -8px
    }

    /* Texte dégradé réutilisable */
    .text-gradient {
        background: linear-gradient(90deg, var(--brand), var(--brand-2));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }



    .bg-ticket {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: -1;
        /* passe sous tout le contenu */
        background-image:
            radial-gradient(circle, rgba(22, 83, 164, .14) 1px, transparent 1.8px),
            radial-gradient(circle, rgba(22, 83, 164, .14) 1px, transparent 1.8px);
        background-size: 22px 22px, 22px 22px;
        background-position: left 16px top 0, right 16px top 0;
        background-repeat: repeat-y, repeat-y;
        filter: saturate(.85);
        /* bleu un peu adouci */
        opacity: .14;
        /* intensité globale réduite */
    }

    @media (max-width:576px) {
        .bg-ticket {
            background-position: left 10px top 0, right 10px top 0;
            opacity: .12;
        }
    }


    /* Badges de stores */
.store-badges .btn-store{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .9rem; border-radius:2px;
  border:1px solid var(--line); background:#2b3651; color:#fff;
  font-weight:600;
}
.store-badges .btn-store:hover{ background:#111827; color:#fff }
.store-badges .btn-store i{ font-size:1.1rem }

/* Petit logo dans le footer */
.footer .brand-mark{ height:34px; width:auto; display:block }


  /* --- Wizard d'achat --- */
  .wizard-step{ display:none }
  .wizard-step.active{ display:block }
  .step-dots{ display:flex; gap:8px }
  .step-dots .dot{ width:8px; height:8px; border-radius:2px; background:#cbd5e1 }
  .step-dots .dot.on{ background: var(--brand) }

  .event-cover{ border-radius:2px; width:100%; aspect-ratio:16/9; object-fit:cover; border:1px solid var(--line) }
  .event-meta .pill{ padding:.3rem .6rem }

  .ticket-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.6rem }
  @media (min-width: 768px){ .ticket-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
  .ticket-card{ position:relative; border:1px solid var(--line); border-radius:2px; padding:.75rem .8rem; background:#fff; cursor:pointer; transition:.15s ease; }
  .ticket-card:hover{ box-shadow: 0 10px 24px -16px rgba(2,6,23,.25) }
  .ticket-card input{ position:absolute; inset:0; opacity:0; cursor:pointer }
  .ticket-card .label{ font-weight:700 }
  .ticket-card .price{ font-weight:800 }
  .ticket-card.active{ outline:2px solid color-mix(in oklab, var(--brand) 70%, white) }

  .method-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.6rem }
  @media (min-width: 576px){ .method-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
  .method-card{ border:1px solid var(--line); border-radius:2px; background:#fff; padding:.8rem; display:flex; align-items:center; justify-content:center; min-height:64px; cursor:pointer; transition:.15s ease; }
  .method-card:hover{ box-shadow: 0 10px 24px -16px rgba(2,6,23,.25) }
  .method-card.active{ outline:2px solid color-mix(in oklab, var(--brand) 70%, white) }

  .mini-helper{ font-size:.85rem; color:#64748b }

  /* Résumé */
  .summary .row + .row{ margin-top:.35rem }
  .summary .key{ color:#64748b }
  .summary .val{ font-weight:600 }

  /* États */
  .hidden{ display:none !important }


/* Modals au-dessus de tout */
.modal            { z-index: 1300; }
.modal-backdrop   { z-index: 1290; }

/* Les décors restent derrière */
.bg-ticket, .bg-tech { z-index: 0 !important; }

/* La zone de toast ne doit pas dépasser le modal */
#mainToast, .toast { z-index: 1080 !important; } /* < 1290 */

.btn-google{
  border:1px solid #dadce0;
  background:#000000;
  color:#c9cdd7;
  border-radius:2px;
  font-weight:600;
}
.btn-google:hover{ background:#434343; color:#c7cbd6 }

.hr-or{
  position:relative; text-align:center; color:#64748b; font-size:.9rem;
}
.hr-or::before, .hr-or::after{
  content:""; position:absolute; top:50%; width:40%; height:1px; background:var(--line);
}
.hr-or::before{ left:0; } .hr-or::after{ right:0; }
.hr-or span{ padding:0 .5rem; background:#fff; }


.method-card.bglogo{
  padding: 0;
  height: 72px;
  background: #fff var(--logo) center / cover no-repeat;
  overflow: hidden;
}

@media (max-width:576px) {
        .method-card.bglogo{
        padding: 0;
        height: 72px;
        background: #0e305ce3 var(--logo) center / contain no-repeat;
        overflow: hidden;
        }

    }