/* =====================================================
   PROJET LUNE — Premium skin (Bootstrap 5.3)
   Objectif : plus “app”, plus respirant, plus premium
===================================================== */


/* =====================================================
   1) TOKENS
===================================================== */
    :root{
      --l-bg: #0E1428;
      --l-surface: rgba(255,255,255,.035);
      --l-surface-2: rgba(255,255,255,.05);
      --l-border: rgba(255,255,255,.09);

      --l-text: #F4F6FA;
      --l-muted: rgba(244,246,250,.72);

      --l-accent: #7B9CFF;
      --l-warm: #FFD27A;

      --l-radius: 18px;
      --l-radius-lg: 24px;

      --l-shadow: 0 18px 50px rgba(0,0,0,.35);
      --l-shadow-soft: 0 10px 26px rgba(0,0,0,.25);

      --l-gap: 14px;

      --l-fz: 15px;
      --l-lh: 1.55;
      --l-topbar-h: 49px;

      --bg-white-04: rgba(255,255,255,.04);

      /* Timeline éclipses */
      --ecl-line-w: 1px;
      --ecl-center-x: 50%;
      --ecl-dot: 10px;
      --ecl-card-w: 44%;
      --ecl-gap: 16px;
    }


/* =====================================================
   2) BASE
===================================================== */
    html,
    body{
      background: var(--l-bg);
      color: var(--l-text);
      font-size: var(--l-fz);
      line-height: var(--l-lh);
    }
    html {
      scroll-padding-top: 90px;
    }
    a{
      color: inherit;
    }

    a:hover{
      opacity: .92;
    }
    .hover-underline:hover {
        text-decoration: underline!important;
    }
    .text-white-50{
      color: var(--l-muted) !important;
    }

    hr{
      border-color: var(--l-border) !important;
      opacity: 1 !important;
    }
  .opacity_65 {
    opacity: 0.65;
  }


  .logo-nav {
    width: 21px;
  }
    .lt-border-mobile-bottom {
      border-bottom: 1px solid rgba(255,255,255,.08);
    }

    @media (min-width: 992px) {
      .lt-border-mobile-bottom {
        border-bottom: 0 !important;
      }
    }
.cursor {
  cursor:pointer;
}

/* =====================================================
   2) PAGE LOADER
===================================================== */
  .page-loader{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
      radial-gradient(circle at center, rgba(90,110,180,.10), transparent 35%),
      rgba(8,12,22,.72);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity .22s ease,
      visibility .22s ease;
  }

  .page-loader.is-visible{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .page-loader__inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .page-loader__orb{
    width: 74px;
    height: 74px;
    border-radius: 50%;
    position: relative;
    background:
      radial-gradient(circle at 35% 35%, #ffffff 0%, #eef3ff 24%, #cfd7e8 46%, #7b849d 70%, #232938 100%);
    box-shadow:
      inset -12px -12px 24px rgba(0,0,0,.32),
      0 0 36px rgba(173,216,255,.12);
    animation: pageLoaderPulse 1.6s ease-in-out infinite;
  }

  .page-loader__orb::after{
    content: "";
    position: absolute;
    top: 0;
    right: -6%;
    width: 56%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(10,13,20,.03), rgba(10,13,20,.56) 42%, rgba(10,13,20,.96));
  }

  .page-loader__text{
    font-size: .92rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.78);
  }

  @keyframes pageLoaderPulse{
    0%,100%{
      transform: scale(1);
      opacity: .95;
    }
    50%{
      transform: scale(1.04);
      opacity: 1;
    }
  }
/* =====================================================
   2) HEADER
===================================================== */
  .moon-header{
    z-index: 1400;
    background: rgba(10,14,28,.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .moon-header .navbar-brand{
    color: #fff;
    letter-spacing: .2px;
  }

  .moon-header .nav-link{
    color: rgba(255,255,255,.72);
    transition: color .18s ease, opacity .18s ease;
  }

  .moon-header .nav-link:hover,
  .moon-header .nav-link:focus{
    color: rgba(255,255,255,.96);
  }

  .moon-header .navbar-toggler{
    padding: .35rem .55rem;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
  }

  .moon-header .navbar-collapse{
    transition: all .2s ease;
  }

  @media (max-width: 991.98px){
    .moon-header .navbar-collapse{
      margin-top: .75rem;
      padding: .85rem 1rem;
      border-radius: 16px;
      background: rgba(18,24,44,.92);
      border: 1px solid rgba(255,255,255,.07);
      box-shadow: 0 10px 28px rgba(0,0,0,.22);
    }

    .moon-header .nav-link{
      padding: .55rem 0;
    }
  }
/*tooltip*/
      /* Tooltip premium */
      .tooltip.show {
          opacity: 1;
          z-index: 3000;
      }

      .tooltip .tooltip-inner {
          max-width: 260px;
          padding: .7rem .9rem;
          border-radius: 14px;
          font-size: .875rem;
          line-height: 1.45;
          text-align: center;

          color: #fff;
          background:
              linear-gradient(180deg, rgba(28,32,52,.96) 0%, rgba(16,18,32,.96) 100%);
          border: 1px solid rgba(255,255,255,.10);

          box-shadow:
              0 10px 30px rgba(0,0,0,.28),
              0 2px 10px rgba(0,0,0,.18),
              inset 0 1px 0 rgba(255,255,255,.06);

          backdrop-filter: blur(8px);
          -webkit-backdrop-filter: blur(8px);
      }

      /* Flèche */
      .bs-tooltip-top .tooltip-arrow::before {
          border-top-color: rgba(16,18,32,.96);
      }
      .bs-tooltip-bottom .tooltip-arrow::before {
          border-bottom-color: rgba(16,18,32,.96);
      }
      .bs-tooltip-start .tooltip-arrow::before {
          border-left-color: rgba(16,18,32,.96);
      }
      .bs-tooltip-end .tooltip-arrow::before {
          border-right-color: rgba(16,18,32,.96);
      }

      /* Animation plus douce */
  /*      .tooltip {
            transition: opacity .18s ease, transform .18s ease;
        }

        .tooltip.show {
            transform: translateY(0);
        }

        .bs-tooltip-top {
            transform: translateY(4px);
        }
        .bs-tooltip-bottom {
            transform: translateY(-4px);
        }*/

/* =========================================
   HOME
========================================= */
/* =========================================
   HOME HERO OVERLAY
========================================= */
.home-hero-overlay{
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    background:
        radial-gradient(circle at top right, rgba(110,130,255,.10), transparent 34%),
        radial-gradient(circle at bottom left, rgba(255,215,120,.07), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
    backdrop-filter: blur(8px);
}

.home-hero-content{
    position: relative;
    z-index: 2;
}

.home-hero-title{
    line-height: 1.05;
    letter-spacing: -.015em;
    color: rgba(255,255,255,.94);
    font-size: clamp(1.9rem, 1vw + 1.6rem, 2.75rem);
    font-weight: 300;
    text-wrap: balance;
}

.home-hero-intro{
    font-size: clamp(1rem, .35vw + .98rem, 1.12rem);
    line-height: 1.7;
    color: rgba(255,255,255,.72);
    max-width: 58ch;
}

.home-hero-nextphase{
    opacity: .92;
}

.home-hero-card{
    backdrop-filter: blur(8px);
    background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.home-hero-event-row:hover{
    background: rgba(255,255,255,.03);
}

.home-hero-foot{
    opacity: .9;
}
/* WRAPPER */
.home-explore-links {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

/* CARD */
.home-explore-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;

    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.08);

    color: #f8f9fa;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

/* HOVER */
.home-explore-link:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.2);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* ICON */
.home-explore-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;
    border-radius: 50%;

    background: rgba(255,255,255,0.06);
    font-size: 18px;
}

/* TEXT */
.home-explore-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.home-explore-title {
    font-weight: 500;
    font-size: 15px;
}

.home-explore-text {
    font-size: 13px;
    color: rgba(255,255,255,0.65);
}

/* ARROW */
.home-explore-arrow {
    font-size: 20px;
    color: rgba(255,255,255,0.4);
    transition: transform 0.25s ease;
}

/* ANIMATION flèche */
.home-explore-link:hover .home-explore-arrow {
    transform: translateX(4px);
}

/* COULEURS LATERALES (barre gauche) */
.home-explore-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 3px;
    opacity: 0.8;
}

/* VARIANTS */

/* 🌙 BLEU (Lune du jour) */
.home-explore-link-blue::before {
    background: linear-gradient(180deg, #6ea8ff, #3d6df2);
}

.home-explore-link-blue .home-explore-icon {
    color: #8fbaff;
}

/* 📅 VIOLET (mois) */
.home-explore-link-purple::before {
    background: linear-gradient(180deg, #b388ff, #7b4dff);
}

.home-explore-link-purple .home-explore-icon {
    color: #c5a3ff;
}

/* 📆 CYAN (année) */
.home-explore-link-cyan::before {
    background: linear-gradient(180deg, #4dd0e1, #00acc1);
}

.home-explore-link-cyan .home-explore-icon {
    color: #80deea;
}

/* PRIORITÉ VISUELLE (optionnel) */
.home-explore-link-blue {
    box-shadow: 0 0 25px rgba(100,140,255,0.15);
}

/* RESPONSIVE */
@media (max-width: 576px) {
    .home-explore-link {
        padding: 12px 14px;
    }

    .home-explore-title {
        font-size: 14px;
    }

    .home-explore-text {
        font-size: 12px;
    }
}
.section-title{
    display: flex;
    align-items: center;
    gap: 1rem;

    color: rgba(255,255,255,.85);
    font-weight: 500;
}

.section-title::before,
.section-title::after{
    content: "";
    flex: 1;
    height: 1px;

    background: linear-gradient(
        to right,
        transparent,
        rgba(255,255,255,.4),
        transparent
    );
}

/* KPI */

    .hero-kpis{
        align-items: center;
        margin-top: -.5rem;
        display: flex;
        flex-wrap: wrap;
    }
    @media (max-width: 575.98px){
        .hero-kpis{
            margin-top: -9rem;
        }
    }
    @media (max-width: 991px){
        .hero-kpis{
            margin-top: -9rem;
        }
    }
    /* Passage à la ligne : 426px → 542px */

    /* Zone cible : 426px → 542px */
        @media (min-width: 426px) and (max-width: 542px),
               (min-width: 576px) and (max-width: 767px){
            .hero-kpis{
                justify-content: center;
            }

            .hero-kpis .hero-kpi{
                flex: 0 0 calc(50% - .5rem);
                justify-content: center;
            }

            .hero-kpis .hero-kpi:nth-child(n+3){
                /* flex: 0 0 auto;*/
                margin-inline: auto;
                justify-content: center;
            }
        }

    .hero-kpi{
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: .35rem .75rem;
        border-radius: .7rem;

        font-size: .8rem;
        font-weight: 500;
        line-height: 1;

        color: rgba(255,255,255,.85);

    /*    border: 1px solid rgba(255,255,255,.08);*/

        /*background:
            linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));*/

        backdrop-filter: blur(6px);

        /*box-shadow:
            inset 0 1px 0 rgba(255,255,255,.06);*/
    }

    .hero-kpi__icon{
        width: 1.7rem;
        height: 1.7rem;
        padding-top: .3em;
        padding-left: .4em;
        border-radius: 999px;
        background: rgba(255,255,255,.08);
        color: rgba(255,255,255,.8);
    }

    .hero-kpi__icon i{
        font-size: 1.11rem;
    }
    .hero-kpi__text{
        display: inline-block;
        transform: translateY(-.5px);
    }

/* MOBILE */
/* MOBILE MOON HERO */
.home-hero-moon-mobile {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    margin-bottom: .75rem;
}

.home-hero-moon-mobile .moon-svg,
.home-hero-moon-mobile .moon-svg__svg {
    width: min(86vw, 340px) !important;
    height: auto !important;
    max-width: 100%;
    margin-inline: auto;
}

@media (max-width: 575.98px) {
    .home-hero-moon-mobile .moon-svg,
    .home-hero-moon-mobile .moon-svg__svg {
        width: min(82vw, 320px) !important;
    }
}

@media (max-width: 390px) {
    .home-hero-moon-mobile .moon-svg,
    .home-hero-moon-mobile .moon-svg__svg {
        width: min(78vw, 285px) !important;
    }
}

/* DESKTOP OVERLAY */
@media (min-width: 992px){
    .home-hero-overlay{
        /* min-height: 720px;*/
    }

    .home-hero-content{
        max-width: 560px;
        padding-top: .5rem;
    }

    .home-hero-head,
    .home-hero-nextphase,
    .home-hero-foot{
        text-align: left !important;
    }

    .home-hero-cards,
    .home-hero-events{
        max-width: 540px;
    }

    .home-hero-moon-desktop{
        position: absolute;
        right: 2.2rem;
        top: 1.8rem;
        width: 390px;
        z-index: 1;
        pointer-events: none;
        opacity: 1;
    }

    .home-hero-moon-desktop svg{
        width: 100%;
        height: auto;
    }
}

/* LARGE DESKTOP */
@media (min-width: 1200px){
    .home-hero-overlay{
        /* min-height: 760px;*/
    }

    .home-hero-content{
        max-width: 560px;
        padding-top: 1.4rem;
        padding-left: .5rem;
    }

    .home-hero-cards,
    .home-hero-events{
        max-width: 540px;
    }

    .home-hero-moon-desktop{
        right: 3rem;
        top: 1.6rem;
        width: 430px;
    }
}

/* TABLETTE ET MOBILE */
@media (max-width: 991.98px){
    .home-hero-content{
        max-width: none;
    }

    .home-hero-head,
    .home-hero-nextphase,
    .home-hero-foot{
        text-align: center;
    }

    .home-hero-cards,
    .home-hero-events{
        max-width: none;
    }
}

@media (max-width: 575.98px){
    .home-hero-overlay{
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .home-hero-title{
        font-size: 1.85rem;
    }

    .hero-kpi{
        /*min-height: 38px;
        padding: .45rem .75rem;
        font-size: .9rem;
        border-radius: .8rem;*/
    }

    .hero-kpi__icon{
        width: 1.7rem;
        height: 1.7rem;
        padding-top: .3em;
        padding-left: .4em;
    }

    .hero-kpi__icon i{
        font-size: 1.11rem;
    }
}
/* =========================================
   Lune.today — Starfield reusable layer
========================================= */

    .l-stars {
        position: relative;
        overflow: hidden;
    }

    .l-stars::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;

        background-image:
            radial-gradient(circle at 12% 18%, rgba(255,255,255,0.7) 0 1.3px, transparent 1.8px),
            radial-gradient(circle at 25% 75%, rgba(255,255,255,0.5) 0 1.1px, transparent 1.6px),
            radial-gradient(circle at 38% 40%, rgba(255,255,255,0.8) 0 1.5px, transparent 2px),
            radial-gradient(circle at 52% 12%, rgba(255,255,255,0.4) 0 1px, transparent 1.5px),
            radial-gradient(circle at 66% 70%, rgba(255,255,255,0.6) 0 1.2px, transparent 1.7px),
            radial-gradient(circle at 78% 22%, rgba(255,255,255,0.75) 0 1.4px, transparent 1.9px),
            radial-gradient(circle at 88% 82%, rgba(255,255,255,0.5) 0 1.1px, transparent 1.6px);

        opacity: 0.6;
    }
    .l-stars::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;

        background-image:
            radial-gradient(circle at 15% 30%, rgba(255,255,255,0.25) 0 0.8px, transparent 1.2px),
            radial-gradient(circle at 45% 60%, rgba(255,255,255,0.2) 0 0.7px, transparent 1px),
            radial-gradient(circle at 70% 40%, rgba(255,255,255,0.25) 0 0.8px, transparent 1.2px);

        opacity: 0.5;
    }
    .l-stars-soft::after {
        opacity: 0.35;
    }
    .l-stars-medium::after {
        opacity: 0.6;
    }
    .l-stars-strong::after {
        opacity: 0.9;
    }

/* =========================================
   cookie-banner
========================================= */
  .cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 640px;
    width: calc(100% - 20px);
    z-index: 9999;
    /*    background: rgba(255,255,255,.9);*/
    backdrop-filter: blur(10px);
    display: none;
  }

/* =====================================================
   2a) FOOTER
===================================================== */ 
    .lt-footer {
        position: relative;
        background:
            radial-gradient(circle at top center, rgba(255,255,255,0.06), transparent 42%),
            linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
        border-top: 1px solid rgba(255,255,255,0.03);
        color: rgba(255,255,255,0.78);
        overflow: hidden;
    }

    .lt-footer::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
            radial-gradient(circle at 14% 18%, rgba(255,255,255,0.04) 0, transparent 18%),
            radial-gradient(circle at 86% 24%, rgba(255,255,255,0.03) 0, transparent 20%);
        opacity: .95;
    }

    .lt-footer > .container {
        position: relative;
        z-index: 1;
    }

    .lt-footer-brand {
        color: #fff;
        transition: opacity .2s ease;
    }

    .lt-footer-brand:hover {
        opacity: 1;
    }

    .lt-footer-brand-icon {
        width: 54px;
        height: 54px;
        font-size: 1.35rem;
        color: #fff;
        background: rgba(255,255,255,0.07);
        border: 1px solid rgba(255,255,255,0.12);
        box-shadow:
            0 0 0 1px rgba(255,255,255,0.02) inset,
            0 0 24px rgba(255,255,255,0.06);
        transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    }

    .lt-footer-brand:hover .lt-footer-brand-icon {
        transform: rotate(10deg) scale(1.04);
        background: rgba(255,255,255,0.11);
        box-shadow:
            0 0 0 1px rgba(255,255,255,0.04) inset,
            0 0 30px rgba(255,255,255,0.11);
    }

    .lt-footer-title {
        font-size: 1.12rem;
        font-weight: 700;
        letter-spacing: .01em;
        color: #fff;
    }

    .lt-footer-baseline {
        font-size: .92rem;
        color: rgba(255,255,255,0.60);
    }

    .lt-footer-text {
        max-width: 38rem;
        font-size: .95rem;
        line-height: 1.3;
        color: rgba(255,255,255,0.72);
    }

    .lt-footer-heading {
        margin-bottom: .9rem;
        font-weight: 500;
        color: rgba(255,255,255,0.51);
        letter-spacing: .02em;
    }

    .lt-footer-link {
        position: relative;
        display: inline-block;
        width: fit-content;
        color: rgba(255,255,255,0.72);
        text-decoration: none;
        transition: color .2s ease, transform .2s ease, opacity .2s ease;
    }

    .lt-footer-link:hover {
        color: #fff;
        transform: translateX(2px);
    }

    .lt-footer-link::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 0;
        height: 1px;
        background: rgba(255,255,255,0.62);
        transition: width .22s ease;
    }

    .lt-footer-link:hover::after {
        width: 100%;
    }

    .lt-footer-link-soft {
        font-size: .92rem;
        color: rgba(255,255,255,0.56);
    }

    .lt-footer-separator {
        border: 0;
        border-top: 1px solid rgba(255,255,255,0.08);
        opacity: 1;
    }

    .lt-footer-meta {
        font-size: .9rem;
        color: rgba(255,255,255,0.50);
    }

    .lt-footer-mini-nav {
        row-gap: .35rem;
    }


    @media (max-width: 991.98px) {
        .lt-footer-text {
            max-width: 100%;
        }
    }

    @media (max-width: 767.98px) {
        .lt-footer {
            text-align: center;
        }

        .lt-footer-brand {
            justify-content: center;
        }

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

        .lt-footer-link:hover {
            transform: none;
        }

        .lt-footer-mini-nav {
            justify-content: center !important;
        }
    }

/* =====================================================
   3) UTILITAIRES LUNE — RÉUTILISABLES
===================================================== */
    .l-radius-pill{ border-radius: 999px; }
    .l-radius-round{ border-radius: 50%; }
    .l-radius-md{ border-radius: 12px; }
    .l-radius-lg{ border-radius: 18px; }

    .l-surface-hover{
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.05);
      color: rgba(255,255,255,.95);
      backdrop-filter: blur(10px);
      box-shadow: 0 10px 30px rgba(0,0,0,.25);
    }
.l-premium {
  position: relative;
  cursor: default;
  transition:
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease,
    color .22s ease,
    opacity .22s ease;
}

.l-hover-premium{
  background:
    radial-gradient(
      circle at center,
      rgba(127,255,255,.10) 0%,
      rgba(127,255,255,.04) 40%,
      transparent 76%
    )!important;
  position: relative;
  transition:
    background .24s ease,
    border-color .24s ease,
    box-shadow .24s ease,
    transform .24s ease,
    color .24s ease,
    opacity .24s ease;
}

    .l-hover-premium::before{
      content:"";
      position:absolute;
      inset:-2px;
      border-radius: inherit;
      background: radial-gradient(
        circle at center,
        rgba(127,255,255,.30),
        rgba(127,255,255,.12) 40%,
        transparent 70%
      );
      opacity:0;
      transition: opacity .28s ease;
      pointer-events:none;
    }

    @media (hover:hover){
      .l-hover-premium:hover{
        background: rgba(255,255,255,.09);
        border-color: rgba(255,255,255,.32);
        transform: translateY(-1px);
      }

      .l-hover-premium:hover::before{
        opacity:.55;
      }
    }

    .l-hover-lift{
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    @media (hover:hover){
      .l-hover-lift:hover{
        transform: translateY(-2px);
        box-shadow: var(--l-shadow);
      }
    }

    .bg-light-04{
      background: var(--bg-white-04);
    }


/* =====================================================
   4) SKIN GLOBAL APP / BOOTSTRAP
===================================================== */
  .card{
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    border-radius: var(--l-radius);
    box-shadow: var(--l-shadow-soft);
    overflow: hidden;
  }

  .card-header{
    background: transparent !important;
  }

  .list-group-item{
    background: transparent;
    border-color: var(--l-border);
    color: var(--l-text);
  }

  @media (hover:hover){
    .card:hover{
      transform: translateY(-2px);
      box-shadow: var(--l-shadow);
      border-color: rgba(255,255,255,.14);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
  }

  header.sticky-top{
    background: rgba(14,20,40,.72);
    border-color: rgba(255,255,255,.06) !important;
    backdrop-filter: blur(10px);
  }

  .btn-outline-light{
    border-color: rgba(255,255,255,.14);
    background: rgba(255,255,255,.02);
  }

  .btn-outline-light:hover{
    border-color: rgba(255,255,255,.22);
    background: rgba(255,255,255,.05);
  }

    .btn-outline-light:focus,
    .btn-outline-light:active,
    .btn-outline-light:focus-visible {
      color: var(--l-text)!important;
    }
  .btn-lune{
    background: linear-gradient(135deg, rgba(123,156,255,.95), rgba(255,210,122,.55));
    border: 0;
    color: #0B1024;
    font-weight: 600;
  }

  .btn-lune:hover{
    filter: brightness(1.03);
  }

  .badge.text-bg-secondary{
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.85) !important;
  }

  .accordion-button{
    background: transparent !important;
    color: var(--l-text) !important;
    padding-left: 0;
    padding-right: 0;
    box-shadow: none !important;
  }

  .accordion-button::after{
    filter: brightness(1.8);
  }

  .accordion-body{
    color: var(--l-muted);
  }


/* =====================================================
   5) UNIVERS LUNE
===================================================== */
  .lune-hero{
    border-radius: var(--l-radius-lg);
    background:
      radial-gradient(900px 480px at 50% 20%, rgba(123,156,255,.24), transparent 62%),
      radial-gradient(650px 320px at 50% 0%, rgba(255,210,122,.14), transparent 58%),
      linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    box-shadow: var(--l-shadow);
  }

  .lune-img{
    filter: drop-shadow(0 20px 36px rgba(0,0,0,.55));
  }

  .lune-halo{
    position: relative;
    display: inline-block;
  }

  .lune-halo::before{
    content:"";
    position:absolute;
    inset:-18% -22%;
    background: radial-gradient(circle at 50% 50%, rgba(123,156,255,.18), transparent 60%);
    filter: blur(10px);
    z-index: 0;
  }

  .lune-halo > img{
    position: relative;
    z-index: 1;
  }

  .lune-kpi{
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    padding: .45rem .75rem;
  }

  .mode-lifestyle-only,
  .mode-tradition-only{
    display:none;
  }

  body[data-lune-mode="lifestyle"] .mode-lifestyle-only{
    display:block;
  }

  body[data-lune-mode="tradition"] .mode-tradition-only{
    display:block;
  }

  body[data-lune-mode="lifestyle"] .tech-details{
    display:none;
  }

  body[data-lune-mode="tradition"]{
    font-size: 1.05rem;
    line-height: 1.65;
  }


/* =====================================================
   6) MOON
===================================================== */
  .moon-wrap{
    display:inline-block;
  }

  .moon-svg{
    display:block;
    filter:
      drop-shadow(0 0 12px rgba(200,220,255,.18))
      drop-shadow(0 0 36px rgba(120,170,255,.10));
  }

/* =====================================================
   7) MOON SPECIALES
===================================================== */
.moon-speciales-card {
  transition: transform .18s ease, box-shadow .18s ease;
  }
  .moon-speciales-card:hover {
    transform: translateY(-3px);
  }

  .moon-speciales-thumb {
    aspect-ratio: 16 / 13;
    object-fit: cover;
    display: block;
  }

  .moon-speciales-card .stretched-link.position-relative {
    z-index: 2;
  }
  .moon-speciales-date-row {
  padding-top: .35rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.moon-speciales-date-row .badge {
  box-shadow: 0 0 0 rgba(255,255,255,0);
  transition: all .25s ease;
}

.moon-speciales-card:hover .moon-speciales-date-row .badge {
  box-shadow: 0 0 12px rgba(255,255,255,0.15);
  transform: translateY(-1px);
}
.moon-speciales-date-relative {
  color: var(--bs-body-color);
}

.moon-speciales-date-absolute {
  white-space: nowrap;
  font-size: .92em;
}
@media (max-width: 576px) {
  .moon-speciales-date-row {
    flex-direction: column;
    align-items: flex-start !important;
    gap: .25rem;
  }

  .moon-speciales-date-absolute {
    text-align: left !important;
  }
}
/* =====================================================
   7) MOON DATE SWITCHER
===================================================== */
    #mlDateToggle{
      height: 37px;
      width: 310px;
      max-width: min(310px, 90vw);
    }
    /* Wrapper sticky */
    .ml-date-dd{
      position: sticky;
      top: var(--l-topbar-h, 37px);
      z-index: 1300;
      margin: 0 auto;
      padding: 10px 0;
      background: rgba(14,20,40,.55);
      backdrop-filter: blur(10px);
    }

    /* Nav globale */
    .ml-date-nav{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:12px;
      flex-wrap:wrap;
    }

    /* Bouton affichage date (ancienne version éventuelle) */
    .ml-date-display{
      display:flex;
      align-items:center;
      gap:10px;
      width:fit-content;
      margin: 0 auto 10px auto;
      border:0;
      background:transparent;
      color: rgba(255,255,255,.92);
      font-weight:600;
      padding:10px 12px;
      border-radius:10px;
      cursor:pointer;
    }

    .ml-date-display:hover{
      background: rgba(255,255,255,.06);
    }

    .ml-date-ic{
      font-size: 18px;
    }

    .ml-date-caret{
      opacity:.85;
      transition: transform .22s ease;
    }

    .ml-date-display[aria-expanded="true"] .ml-date-caret{
      transform: rotate(180deg);
    }

    /* Pill principale */
    .ml-date-pill{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:10px 14px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.05);
      color: rgba(255,255,255,.95);
      backdrop-filter: blur(10px);
      box-shadow: 0 10px 30px rgba(0,0,0,.35);
      cursor:pointer;
      transition: all .25s ease;
    }

    .ml-date-pill::before{
      content:"";
      position:absolute;
      inset:-2px;
      border-radius:999px;
      background: radial-gradient(
        circle at center,
        rgba(127,255,255,.35),
        rgba(127,255,255,.15) 40%,
        transparent 70%
      );
      opacity:0;
      transition: opacity .35s ease;
      pointer-events:none;
    }

    .ml-date-pill:hover{
      transform: translateY(-2px);
      background: rgba(255,255,255,.09);
      border-color: rgba(255,255,255,.32);
    }

    .ml-date-pill:hover::before{
      opacity:.6;
    }

    .ml-date-pill-ic{
      position:absolute;
      left:14px;
      font-size:1.05rem;
      opacity:.95;
    }

    .ml-date-pill-label{ 
      display: inline-block;
      min-width: 18ch;
      letter-spacing:.08em;
      font-size:.78rem;
      white-space:nowrap;
      text-align:center;
    }

    .ml-date-pill-caret{
      position:absolute;
      right:14px;
      opacity:.8;
      transition: transform .18s ease;
    }

    .ml-date-pill[aria-expanded="true"] .ml-date-pill-caret{
      transform: rotate(180deg);
    }

    /* Menu dropdown */
    .ml-date-menu{
      position:absolute;
      top: calc(100% + 5px);
      left: 50%;
      transform: translateX(-50%);
      z-index: 1050;
      min-width: 320px;
    }

    .ml-date-menu.ml-date-menu-open{
      animation: mlMenuIn 180ms ease-out both;
    }

    /* Ready states JS */
    .ml-date-dd[data-ml-ready="0"] .ml-date-pill{
      opacity: 0;
      transform: translateY(-2px);
    }

    .ml-date-dd[data-ml-ready="1"] .ml-date-pill{
      opacity: 1;
      transform: translateY(0);
      transition: opacity .18s ease, transform .18s ease;
    }

    /* Panel (si utilisé ailleurs) */
    .ml-date-panel{
      width: 100%;
      display: grid;
      place-items: center;
      overflow: hidden;
      transition: max-height .28s ease, opacity .22s ease;
      max-height: 0;
      opacity: 0;
    }

    .ml-date-panel.ml-date-panel-open{
      max-height: 300px;
      opacity: 1;
    }

    /* Switcher */
    .ml-date-switcher{
      position: relative;
      overflow: hidden;
      width:fit-content;
      padding:14px 16px;
      background:#0b0b1b;
      border-radius:10px;
    }

    .ml-date-switcher::before{
      content:"";
      position:absolute;
      inset:-40px;
      background: radial-gradient(
        circle at 30% 20%,
        rgba(255,255,255,.18),
        rgba(255,255,255,0) 55%
      );
      filter: blur(10px);
      opacity: .65;
      pointer-events:none;
      transform: translateZ(0);
    }

    .ml-date-switcher.ml-date-glow-pulse::before{
      animation: mlGlowPulse 520ms ease-out both;
    }

    .ml-date-switcher.ml-date-slide-out .ml-date-row{
      animation: mlSlideOut 240ms ease-in both;
    }

    .ml-date-switcher.ml-date-slide-in .ml-date-row{
      animation: mlSlideIn 320ms cubic-bezier(.2,.9,.2,1) both;
    }

    .ml-date-switcher.ml-date-slide-out .ml-date-field,
    .ml-date-switcher.ml-date-slide-in .ml-date-field{
      animation: mlUnderlineFlash 520ms ease-out both;
    }

    /* Ligne des selects */
    .ml-date-row{
      display:flex;
      gap:26px;
      align-items:flex-end;
    }

    .ml-date-field{
      position:relative;
      min-width:82px;
      padding:4px 6px;
      border-bottom:2px solid rgba(255,255,255,.45);
      border-radius:8px;
      transition: border-color .2s ease, background .2s ease;
    }

    .ml-date-field:hover{
      border-bottom-color: rgba(127,255,255,.7);
    }

    .ml-date-field-wide{
      min-width:160px;
    }

    .ml-date-field:focus-within{
      border-bottom-color: rgba(127,255,255,.9);
    }

    .ml-date-field::after{
      content:"";
      position:absolute;
      right:6px;
      top:4px;
      width:14px;
      height:14px;
      background-repeat:no-repeat;
      background-position:center;
      background-size:14px 14px;
      pointer-events:none;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M3.2 5.8a.75.75 0 0 1 1.06 0L8 9.54l3.74-3.74a.75.75 0 1 1 1.06 1.06l-4.27 4.27a.75.75 0 0 1-1.06 0L3.2 6.86a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
    }

    .ml-date-select{
      width:100%;
      border:0;
      border-radius:7px;
      outline:none;
      background:#1c2134;
      color:#aaa;
      font-size:1em;
      padding-right:26px;
      appearance:none;
      -webkit-appearance:none;
      -moz-appearance:none;
      cursor:pointer;
      text-align:center;
    }

    .ml-date-select option{
      background-color: var(--l-bg);
      color: #ffffff;
      cursor: pointer;
    }

    .ml-date-select option:checked{
      background-color: var(--l-bg);
      color: #ffffff;
    }

    /* Actions */
    .ml-date-actions{
      display:flex;
      gap:12px;
      justify-content:flex-end;
      margin-top:14px;
    }

    .ml-date-actions button{
      font-size:.85em;
      padding-top: .3em;
      padding-bottom: .3em;
    }

    .ml-date-btn-outline{
      background:transparent;
      border:1px solid rgba(255,255,255,.6);
      color:#fff;
      padding:10px 20px;
      border-radius:6px;
    }

    .ml-date-btn-outline:hover{
      background:rgba(255,255,255,.1);
    }

    /* Flèches */
    .ml-date-arrow{
      position: relative;
      width:38px;
      height:38px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:50%;
      border:1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.92);
      cursor:pointer;
      transition: all .18s ease;
      backdrop-filter: blur(6px);
      box-shadow: 0 6px 16px rgba(0,0,0,.25);
    }

    .ml-date-arrow:hover{
      background: rgba(255,255,255,.12);
      border-color: rgba(255,255,255,.35);
    }

    .ml-date-arrow:active{
      transform: scale(.92);
    }

    .ml-date-arrow::after{
      content:"";
      position:absolute;
      inset:-4px;
      border-radius:50%;
      background: radial-gradient(circle, rgba(127,255,255,.25), transparent 60%);
      opacity:0;
      transition: opacity .2s ease;
      pointer-events:none;
    }

    .ml-date-arrow:hover::after{
      opacity:1;
    }

    .ml-date-arrow i{
      font-size: 1rem;
    }

    .ml-date-arrows-mobile{
      display:none;
    }

    .ml-date-arrow-disabled{
      opacity: 0.35;
      cursor: not-allowed !important;
      pointer-events: none;
      transition: opacity 0.2s ease;
    }

    .ml-date-arrow:not(.ml-date-arrow-disabled):hover{
      transform: translateY(-1px);
      transition: transform 0.15s ease;
    }

    .ml-date-shake{
      animation: mlDateShake 320ms cubic-bezier(.36,.07,.19,.97);
    }

    .ml-date-shake-glow{
      box-shadow: 0 0 0 2px rgba(255,255,255,0.08);
      transition: box-shadow 0.2s ease;
    }

    /* Responsive */
    @media (min-width:576px){
      .ml-date-nav{
        flex-wrap:nowrap;
      }

      .ml-date-arrows-left,
      .ml-date-arrows-right{
        display:flex;
      }

      .ml-date-arrows-left .ml-date-arrow + .ml-date-arrow,
      .ml-date-arrows-right .ml-date-arrow + .ml-date-arrow{
        margin-left: 8px;
      }
    }

    @media (max-width:575.98px){
      .ml-date-nav{
        flex-direction:column;
        gap:12px;
      }

      .ml-date-arrows-left,
      .ml-date-arrows-right{
        display:none;
      }

      .ml-date-arrows-mobile{
        display:flex;
        width:100%;
        justify-content:center;
        gap:14px;
      }

      .ml-date-arrow{
        width:42px;
        height:42px;
      }
    }

/* =====================================================
   7) MOON DATE SWITCHER
===================================================== */

/* =====================================================
   8) ECLIPSES — TIMELINE
===================================================== */
    .ecl-timeline{
      position: relative;
      padding: 1rem 0;
    }

    .ecl-timeline::before{
      content:"";
      position:absolute;
      left: var(--ecl-center-x);
      top: 0;
      bottom: 0;
      width: var(--ecl-line-w);
      transform: translateX(-50%);
      background: linear-gradient(
        to bottom,
        rgba(127,255,255,.18),
        rgba(255,255,255,.10),
        rgba(127,255,255,.08)
      );
      z-index: 0;
      opacity: .9;
    }

    .ecl-item{
      position: relative;
      display:flex;
      padding: 1.25rem 0;
    }

    .ecl-item:nth-child(odd){
      justify-content:flex-start;
    }

    .ecl-item:nth-child(even){
      justify-content:flex-end;
    }

    .ecl-card{
      width: var(--ecl-card-w);
      position:relative;
      z-index: 2;
      border: 1px solid rgba(255,255,255,.055);
      border-radius: .95rem;
      background: linear-gradient(
        180deg,
        rgba(255,255,255,.055),
        rgba(255,255,255,.035)
      );
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
      margin-left: var(--ecl-gap);
      margin-right: var(--ecl-gap);
    }

    .ecl-card:hover{
      transform: translateY(-2px);
      border-color: rgba(127,255,255,.30);
      box-shadow: 0 .95rem 1.9rem rgba(0,0,0,.42);
    }

    .ecl-dot{
      position:absolute;
      left: var(--ecl-center-x);
      top: 2.2rem;
      width: var(--ecl-dot);
      height: var(--ecl-dot);
      border-radius: 999px;
      transform: translate(-50%,-50%);
      z-index: 3;
      background:#fff;
      box-shadow:
        0 0 0 5px rgba(255,255,255,.08),
        0 0 10px rgba(127,255,255,.25);
      transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    }

    .ecl-item:hover .ecl-dot{
      transform: translate(-50%,-50%) scale(1.08);
      box-shadow:
        0 0 0 6px rgba(255,255,255,.10),
        0 0 16px rgba(127,255,255,.28);
      filter: brightness(1.05);
    }

    .ecl-dot[data-type="total"]{ background: rgba(255,84,92,.95); }
    .ecl-dot[data-type="partial"]{ background: rgba(255,207,72,.95); }
    .ecl-dot[data-type="penumbral"]{ background: rgba(186,194,208,.95); }

    .ecl-item::after{
      content:"";
      position:absolute;
      left: var(--ecl-center-x);
      top: 2.2rem;
      height: 2px;
      transform: translateY(-50%);
      z-index: 1;
      pointer-events: none;
    }

    .ecl-item:nth-child(odd)::after{
      width: calc((var(--ecl-card-w) / 2) + var(--ecl-gap) + 10px);
      transform: translate(-100%,-50%);
      background: linear-gradient(
        to left,
        rgba(255,255,255,.14),
        rgba(255,255,255,.10) 35%,
        rgba(255,255,255,0) 100%
      );
    }

    .ecl-item:nth-child(even)::after{
      width: calc((var(--ecl-card-w) / 2) + var(--ecl-gap) + 10px);
      background: linear-gradient(
        to right,
        rgba(255,255,255,.14),
        rgba(255,255,255,.10) 35%,
        rgba(255,255,255,0) 100%
      );
    }

    .ecl-title{
      letter-spacing:-.2px;
    }

    .ecl-meta{
      opacity:.85;
    }

    .ecl-badge{
      background: transparent !important;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 999px;
      padding: .35rem .75rem;
      font-weight: 500;
      letter-spacing: .3px;
    }

    .ecl-type-desc{
      opacity:.9;
      line-height:1.45;
    }

    .ecl-type-icon{
      flex-shrink:0;
      opacity:.9;
    }

    .ecl-type-icon svg{
      display:block;
    }

    .ecl-svg{
      display:block;
      opacity:.9;
      transition: transform .2s ease, opacity .2s ease;
    }

    .ecl-item:hover .ecl-svg{
      transform: scale(1.05);
      opacity: 1;
    }

    @media (max-width:991.98px){
      :root{
        --ecl-center-x: 1.1rem;
        --ecl-card-w: 100%;
        --ecl-gap: 12px;
      }

      .ecl-timeline{
        padding-left: 2.2rem;
      }

      .ecl-timeline::before{
        left: var(--ecl-center-x);
        transform: none;
      }

      .ecl-item{
        justify-content:flex-start !important;
      }

      .ecl-card{
        margin-left: var(--ecl-gap);
        margin-right: 0;
        width: 100%;
      }

      .ecl-dot{
        left: var(--ecl-center-x);
        transform: translate(-50%,-50%);
      }

      .ecl-item::after{
        left: var(--ecl-center-x);
        width: 1.2rem;
        transform: translateY(-50%);
        background: rgba(255,255,255,.12);
      }
    }

/* =====================================================
   8) ECLIPSES — TIMELINE
===================================================== */

/* =====================================================
   9) MONTH GRID / CALENDRIER
===================================================== */
    .ml-cal-header{
      letter-spacing: .2px;
    }

    .ml-cal-weekday{
      font-size: .825rem;
      opacity: .75;
    }

    .ml-cal-grid{
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: .75rem;
    }

    .ml-cal-cell{
      position: relative;
      min-height: 120px;
      border-radius: 1rem;
      border: 1px solid rgba(0,0,0,.08);
      background: var(--bs-body-bg);
      transition: transform .18s ease, box-shadow .18s ease;
    }

    [data-bs-theme="dark"] .ml-cal-cell{
      border-color: rgba(255,255,255,.12);
    }

    .ml-cal-cell a{
      color: inherit;
      text-decoration: none;
      display: block;
      height: 100%;
      padding: .75rem;
      border-radius: 1rem;
    }

    .ml-cal-cell a:hover{
      background: rgba(0,0,0,.03);
    }

    [data-bs-theme="dark"] .ml-cal-cell a:hover{
      background: rgba(255,255,255,.04);
    }

    .ml-cal-daynum{
      font-weight: 500;
      font-size: .9rem;
    }

    .ml-cal-emoji{
      font-size: 1.2rem;
    }

    .ml-cal-meta{
      font-size: .8rem;
      opacity: .75;
    }

    .ml-cal-badge,
    .ml-ecl-badge{
      font-size: .72rem;
    }

    .ml-cal-today{
      outline: 2px solid rgba(13,110,253,.55);
      box-shadow: 0 0 0 4px rgba(13,110,253,.08);
    }

    .ml-cal-eclipse{
      border-color: rgba(220,53,69,.45);
      box-shadow: 0 0 0 2px rgba(220,53,69,.10);
    }

    /* Hover desktop */
    .ml-cal-cell:hover{
      transform: translateY(-3px);
      box-shadow: 0 12px 28px rgba(0,0,0,.12);
      z-index: 2;
    }

    [data-bs-theme="dark"] .ml-cal-cell:hover{
      box-shadow: 0 14px 32px rgba(0,0,0,.45);
    }

    .ml-cal-cell:hover > a{
      border-radius: 1rem;
      box-shadow: inset 0 0 0 1px rgba(13,110,253,.12);
    }

    [data-bs-theme="dark"] .ml-cal-cell:hover > a{
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
    }

    .ml-cal-cell:hover .ml-cal-emoji{
      transform: scale(1.08);
      transition: transform .2s ease;
    }

    /* Mobile cards */
    .ml-day-card{
      border-radius: 1rem;
      transition: transform .15s ease, box-shadow .15s ease;
    }

    .ml-day-card:hover{
      transform: translateY(-2px);
      box-shadow: 0 .8rem 1.8rem rgba(0,0,0,.08);
    }

    .ml-day-today{
      outline: 2px solid rgba(13,110,253,.45);
      outline-offset: 2px;
    }

    [data-bs-theme="dark"] .ml-day-today{
      box-shadow: 0 0 0 2px rgba(100,180,255,.45), 0 .6rem 1.6rem rgba(0,0,0,.35);
    }

    /* Illumination */
    .ml-illum-bar{
      height: 6px;
      border-radius: 999px;
      background: rgba(0,0,0,.08);
      overflow: hidden;
    }

    [data-bs-theme="dark"] .ml-illum-bar{
      background: rgba(255,255,255,.12);
    }

    .ml-illum-bar > span{
      display:block;
      height: 100%;
      background: rgba(13,255,253,.55);
    }

    /* Affichage mobile / desktop */
    .ml-only-desktop{
      display: none;
    }

    .ml-only-mobile{
      display: grid;
    }

    @media (max-width: 575px){
      .ml-cal-grid{
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 576px) and (max-width: 991px){
      .ml-cal-grid{
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (min-width: 992px){
      .ml-cal-grid{
        grid-template-columns: repeat(7, 1fr);
      }

      .ml-only-mobile{
        display: none !important;
      }

      .ml-only-desktop{
        display: block !important;
      }
    }
    /*month-grid.php*/
        .ml-month-timeline {
          line-height: 1;
          font-size: .9em;
        }

        .ml-month-phase {
          transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
          white-space: nowrap;
        }

        .ml-month-phase:hover {
          transform: translateY(-1px);
        }
        .ml-month-phase-fixed {
    /*      width: 181px;*/
        }


    /*month-grid.php*/
/* =====================================================
   9) MONTH GRID / CALENDRIER
===================================================== */

/* =====================================================
   10) BLOC ÉCLIPSES DU MOIS
===================================================== */
    .ml-ecl-wrap{
      display: flex;
      justify-content: center;
    }

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

    .ml-ecl-icon{
      width: 36px;
      height: 36px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: rgba(0,0,0,.04);
    }

    [data-bs-theme="dark"] .ml-ecl-icon{
      background: rgba(255,255,255,.06);
    }

    .ml-ecl-icon svg{
      color: currentColor;
      opacity: .9;
    }

    .ml-ecl-txt{
      flex: 1;
      min-width: 0;
      white-space: nowrap;
    }

    .ml-ecl-title{
      font-weight: 700;
      letter-spacing: .2px;
      line-height: 1.1;
    }

    .ml-ecl-sub{
      font-size: .85rem;
      opacity: .75;
      margin-top: .15rem;
    }

    .ml-ecl-body{
      padding: .9rem 1rem 0;
    }

    .ml-ecl-chips{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      align-items:center;
    }

    .ml-ecl-cta{
      flex-shrink:0;
    }

    @media (max-width:767.98px){
      .ml-ecl-chips{
        justify-content:center;
      }
    }

    .ml-ecl-chip{
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      font-size: .74rem;
      font-weight: 500;
      border-radius: 999px;
      padding: .34rem .55rem;
      letter-spacing: .12px;
      border: 1px solid rgba(0,0,0,.10);
      box-shadow: 0 .35rem .9rem rgba(0,0,0,.10);
      transition: transform .14s ease, box-shadow .14s ease;
      color:#fff!important;
    }

    [data-bs-theme="dark"] .ml-ecl-chip{
      border-color: rgba(255,255,255,.14);
      box-shadow: 0 .35rem .9rem rgba(0,0,0,.35);
    }

    .ml-ecl-chip:hover{
      transform: translateY(-1px);
      box-shadow: 0 .55rem 1.2rem rgba(0,0,0,.14);
    }

    [data-bs-theme="dark"] .ml-ecl-chip:hover{
      box-shadow: 0 .55rem 1.2rem rgba(0,0,0,.45);
    }

    .ml-ecl-ic{
      font-size: .9rem;
      line-height: 1;
      opacity: .95;
      transform: translateY(-.5px);
    }

    .ml-ecl-sep{
      opacity: .65;
      font-weight: 900;
    }

    .ml-ecl-time{
      font-size: .72rem;
      opacity: .85;
      font-weight: 800;
    }
    .ml-ecl-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      /*  min-height: 38px;*/
    }
    .ml-chip-moon{ opacity: .95; }
    .ml-chip-date{ font-weight: 700; font-size: .9rem; }
    .ml-chip-dot{ opacity: .55; }
    .ml-chip-type{ font-size: .95rem; opacity: .85; }
    .ml-chip-time{ font-size: .8rem; opacity: .75; padding-left: 0; }

    .ml-chip-total{ box-shadow: inset 0 0 0 999px rgba(220,53,69,.06); }
    .ml-chip-partial{ box-shadow: inset 0 0 0 999px rgba(255,193,7,.08); }
    .ml-chip-penumbral{ box-shadow: inset 0 0 0 999px rgba(108,117,125,.08); }

    [data-bs-theme="dark"] .ml-chip-total{ box-shadow: inset 0 0 0 999px rgba(220,53,69,.14); }
    [data-bs-theme="dark"] .ml-chip-partial{ box-shadow: inset 0 0 0 999px rgba(255,193,7,.14); }
    [data-bs-theme="dark"] .ml-chip-penumbral{ box-shadow: inset 0 0 0 999px rgba(108,117,125,.16); }


/* =====================================================
   11) STARS
===================================================== */
    .ml-stars i{
      font-size: 1.05rem;
      color: #e6e9ff;
      transition: opacity .2s ease;
    }

    .ml-stars i.bi-star{
      opacity: 0.25;
    }

    .ml-stars i.bi-star-fill{
      opacity: 0.95;
      text-shadow: 0 0 6px rgba(180, 200, 255, 0.6);
    }


/* =====================================================
   12) PSYCHO PREVIEW
===================================================== */
    .ml-psy-line{
      margin-top: .35rem;
    }

    .ml-psy-line .ml-psy-name{
      font-size: .75rem;
      font-weight: 600;
      line-height: 1.1;
      opacity: .9;
    }

    .ml-psy-line .ml-psy-focus{
      font-size: .68rem;
      line-height: 1.15;
      opacity: .75;
    }

    .ml-psy-ic{
      opacity: .75;
      flex: 0 0 auto;
    }

    .ml-psy-txt{
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 0;
      text-align:center;
    }

    [data-bs-theme="dark"] .ml-psy-line{
      opacity: .82;
    }

    .ml-psy-desktop{
      line-height: 1.15;
      margin-top: .25rem;
    }

    .ml-psy-name{
      font-size: .91rem;
      font-weight: 600;
      opacity: .9;
      text-align: center;
    }

    .ml-psy-focus{
      font-size: .87rem;
      opacity: .75;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    [data-bs-theme="dark"] .ml-psy-name{
      opacity:.95;
    }

    [data-bs-theme="dark"] .ml-psy-focus{
      opacity:.82;
    }


/* =====================================================
   13) ANIMATIONS
===================================================== */
    @media (prefers-reduced-motion: no-preference){
      .float-soft{
        animation: floatSoft 6.5s ease-in-out infinite;
      }
    }

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

    @keyframes mlGlowPulse{
      0%   { opacity:.45; transform: scale(.98); }
      45%  { opacity:.95; transform: scale(1.02); }
      100% { opacity:.65; transform: scale(1); }
    }

    @keyframes mlSlideOut{
      0%   { transform: translateX(0); opacity: 1; }
      100% { transform: translateX(-18px); opacity: 0; }
    }

    @keyframes mlSlideIn{
      0%   { transform: translateX(18px); opacity: 0; }
      100% { transform: translateX(0); opacity: 1; }
    }

    @keyframes mlUnderlineFlash{
      0%   { border-bottom-color: rgba(255,255,255,.55); }
      45%  { border-bottom-color: rgba(255,255,255,1); }
      100% { border-bottom-color: rgba(255,255,255,.70); }
    }

    @keyframes mlMenuIn{
      0%   { opacity:0; transform: translateX(-50%) translateY(-6px) scale(.985); }
      100% { opacity:1; transform: translateX(-50%) translateY(0) scale(1); }
    }

    @keyframes mlDateShake{
      0%   { transform: translateX(0); }
      20%  { transform: translateX(-4px); }
      40%  { transform: translateX(4px); }
      60%  { transform: translateX(-3px); }
      80%  { transform: translateX(3px); }
      100% { transform: translateX(0); }
    }


/* =====================================================
   14) PHASES-TYPES.PHP
===================================================== */

    .phases-types-details {
        position: relative;
        transition: all 0.25s ease;
        border-radius: 1rem;
        background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08), transparent 70%);
        color: #ddd;
    }

    /* glow */
    .phases-types-details::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        opacity: 0;
        transition: opacity 0.25s ease;
        pointer-events: none;
    }

    /* hover */
    .phases-types-details:hover {
        transform: translateY(0px);
    }

    .phases-types-details:hover::after {
        opacity: 1;
    }
    .phases-types-details .phase-icon {
        width: 41px;
        height: 41px;
        flex-shrink: 0;
    }

    .phases-types-details .phase-icon  {
        font-size: 1.3rem;
        transition: transform 0.25s ease;
    }
    .phases-types-details:hover .phase-icon {
      /*    transform: rotate(12deg) scale(1.08);*/
        transform:  scale(1.08);
    }


/* =====================================================
   15) SEO BLOCK
===================================================== */
    .lt-seo-block {
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(circle at top right, rgba(140, 170, 255, .16), transparent 34%),
            radial-gradient(circle at bottom left, rgba(255, 255, 255, .05), transparent 28%),
            linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
        border: 1px solid rgba(255,255,255,.08);
        box-shadow:
            0 18px 44px rgba(0,0,0,.22),
            inset 0 1px 0 rgba(255,255,255,.04);
        backdrop-filter: blur(6px);
    }

    .lt-seo-block::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(135deg, rgba(255,255,255,.035), transparent 42%);
    }

    .lt-seo-block-icon {
        width: 31px;
        height: 31px;
        font-size: 1.35rem;
        color: #dbe4ff;
        background:
            radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), rgba(255,255,255,.06));
        border: 1px solid rgba(255,255,255,.10);
        box-shadow: 0 8px 20px rgba(0,0,0,.16);
    }

    .lt-seo-block-intro {
        color: rgba(255,255,255,.78);
        font-size: .95rem;
        line-height: 1.6;
    }

    .lt-seo-card {
        position: relative;
        background: rgba(255,255,255,.045);
        border: 1px solid rgba(255,255,255,.075);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
        transition:
            transform .22s ease,
            border-color .22s ease,
            background .22s ease,
            box-shadow .22s ease;
    }

    .lt-seo-card:hover {
        transform: translateY(-4px);
        background: rgba(255,255,255,.068);
        border-color: rgba(173, 190, 255, .24);
        box-shadow:
            0 14px 28px rgba(0,0,0,.18),
            inset 0 1px 0 rgba(255,255,255,.04);
    }

    .lt-seo-card-icon {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        font-size: 1.05rem;
        color: #eef2ff;
        background: rgba(255,255,255,.07);
        border: 1px solid rgba(255,255,255,.08);
    }
    .lt-seo-card-icon-small {
        width: 38px;
        height: 38px;
    }

    .lt-seo-card-title {
        color: #ffffff;
        line-height: 1.35;
        margin-bottom: .25rem;
        font-size: .98rem;
    }

    .lt-seo-card-text {
        color: rgba(255,255,255,.72);
        font-size: .92rem;
        line-height: 1.55;
    }

    .lt-seo-block-footer {
        margin-top: 1.1rem;
        padding-top: .95rem;
        border-top: 1px solid rgba(255,255,255,.08);
    }

    .lt-seo-block-footer p {
        color: rgba(255,255,255,.70);
        font-size: .92rem;
        line-height: 1.6;
    }

    @media (max-width: 575.98px) {
        .lt-seo-block {
            padding: 1rem !important;
        }

        .lt-seo-block-icon {
            width: 37px;
            height: 37px;
            flex-basis: 48px;
            font-size: 1.15rem;
        }
    }


/* =====================================================
   16) LEGAL PAGE
===================================================== */

    .mentions-legales .legal-hero,
    .mentions-legales .legal-card,
    .mentions-legales .legal-footer-card {
      /*background:
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
        rgba(255,255,255,.72);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);*/
    }

    .legal-icon-circle {
      width: 52px;
      height: 52px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 52px;
      font-size: 1.25rem;
      box-shadow: 0 8px 24px rgba(0,0,0,.08);
    }

    .legal-card {
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

    .legal-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 1rem 2.5rem rgba(0,0,0,.10) !important;
    }

    .legal-hero {
      position: relative;
    }

    .legal-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at top right, rgba(13,110,253,.10), transparent 35%),
        radial-gradient(circle at bottom left, rgba(111,66,193,.10), transparent 35%);
    }

    @media (max-width: 991.98px) {
      .legal-icon-circle {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        font-size: 1.1rem;
      }
    }
/*FAQ*/
.faq-index a {
    line-height: 1.35;
    border-radius: 10px;
    padding: 4px 8px;
    transition: background .2s ease, transform .2s ease;
}

.faq-index a:hover {
    background: rgba(255,255,255,0.04);
    transform: translateY(-1px);
}

.faq-index a strong {
    font-weight: 600;
}
  .faq-page .accordion-button {
      font-weight: 600;
      padding: 1rem 1.25rem;
  } 
.faq-question-text {
    display: inline-block;
    line-height: 1.4;
}
  .faq-page .accordion-body {
      color: #495057;
      line-height: 1.7;
  }

  .faq-page .card {
      border-radius: 1.25rem;
  }

  .faq-page .btn.rounded-pill {
      padding-top: .75rem;
      padding-bottom: .75rem;
  }
.faq-answer a {
    color: var(--bs-link-color);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.faq-answer a:hover,
.faq-answer a:focus {
    color: var(--bs-link-hover-color);
    text-decoration-thickness: 2px;
}
.faq-anchor-offset {
  scroll-margin-top: 87px;
}
/*seo_planetes_visibles_ciel.php*/
.solar-overview-wrap {
    width: 100%;
    max-width: 1000px;
    aspect-ratio: 16 / 9;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.solar-overview-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.planet-gallery-trigger {
    cursor: zoom-in;
}

.planet-card-clickable {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.planet-card-clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.18);
    border-color: rgba(255,255,255,.18);
}

#planetGalleryModal .carousel-control-prev,
#planetGalleryModal .carousel-control-next {
    width: 8%;
}

#planetGalleryModal .carousel-control-prev-icon,
#planetGalleryModal .carousel-control-next-icon {
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.6));
}

#planetGalleryModal .planet-gallery-arrow span {
    transition: all .2s ease;
}

#planetGalleryModal .planet-gallery-arrow:hover span,
#planetGalleryModal .planet-gallery-arrow:focus span {
    background: rgba(255,255,255,0.15) !important;
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.planet-thumb-wrap {
    width: 100%;
    max-width: 280px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
}

.planet-thumb {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 991.98px) {
    #planetGalleryModal .modal-dialog {
        margin: 0.5rem;
    }

    #planetGalleryModal .modal-body {
        padding: 1rem;
    }

    #planetGalleryModal .carousel-item .row {
        row-gap: 1rem;
    }
}
/*seo_planetes_visibles_ciel.php*/

/*year-calendar.php*/
.yc-timeline-wrap {
    overflow-x: hidden;
}

.yc-timeline {
    display: grid;
    gap: .85rem;
}
.yc-month-row {
    position: relative;
    display: grid;
    grid-template-columns: 140px 1fr 150px;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 20% 50%, rgba(255, 193, 7, .08), transparent 24%),
        linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.yc-month-row {
    opacity: 0;
    transform: translateY(10px);
    animation: ycFadeIn .5s ease forwards;
}

.yc-month-row:nth-child(n) {
    animation-delay: calc(var(--i, 0) * 201ms);
}

@keyframes ycFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.yc-month-label {
    border-right: 1px solid rgba(255,255,255,.08);
    padding-right: 1rem;
}

.yc-month-name {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.1;
}

.yc-month-year {
    margin-top: .25rem;
    color: #ffc107;
    font-weight: 600;
    font-size: .95rem;
}

.yc-events-line {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: .75rem;
    align-items: center;
}

.yc-events-line::before {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    top: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
    pointer-events: none;
}

.yc-event {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: .35rem;
    color: inherit;
    min-width: 0;
}

.yc-event-dot {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 1.5rem;
    background: rgba(255,255,255,.075);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 0 18px rgba(255,255,255,.08);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.yc-event:hover .yc-event-dot {
    transform: translateY(-2px) scale(1.04);
    border-color: rgba(255,193,7,.45);
    box-shadow: 0 0 26px rgba(255,193,7,.16);
}

.yc-event-text {
    text-align: center;
    line-height: 1.15;
}

.yc-event-label {
    display: block;
    font-weight: 600;
    font-size: .92rem;
}

.yc-event-date {
    display: block;
    margin-top: .2rem;
    color: rgba(255,255,255,.66);
    font-size: .82rem;
}

.yc-month-action {
    text-align: right;
}

/* Mettre en avant pleine lune / nouvelle lune */
.yc-event-full .yc-event-dot,
.yc-event-new .yc-event-dot {
    border-color: rgba(255,193,7,.32);
    background: rgba(255,193,7,.08);
}

.yc-month-current { 
    border-width: .13em;
    border-color: rgba(255,193,7,.35);
    box-shadow: 0 0 40px rgba(255,193,7,.12);
}
/* Tablette : boutons moins larges */
@media (max-width: 991.98px) {
    .yc-month-row {
        grid-template-columns: 110px 1fr;
    }

    .yc-month-action {
        grid-column: 2;
        text-align: left;
        margin-top: .25rem;
    }

    .yc-events-line {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    .yc-events-line::before {
        display: none;
    }

    .yc-event {
        justify-items: start;
        grid-template-columns: 42px 1fr;
        text-align: left;
    }

    .yc-event-dot {
        width: 38px;
        height: 38px;
        font-size: 1.15rem;
    }

    .yc-event-text {
        text-align: left;
    }
}
/*year-calendar.php*/