/* =====================================================
   MONTH-GRAPHS
   Préfixe : mg-
===================================================== */

/* -------------------------
   PAGE
-------------------------- */
.mg-page {
  max-width: 1120px;
}

.mg-page a {
  transition:
    color .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

/* -------------------------
   HERO
-------------------------- */
.mg-hero {
  position: relative;
}

.mg-kicker {
  letter-spacing: .12em;
}

.mg-title {
  line-height: 1.08;
  text-wrap: balance;
}

.mg-lead {
  max-width: 60ch;
}

/* -------------------------
   HERO
-------------------------- */
.mg-hero {
  position: relative;
}

.mg-kicker {
  letter-spacing: .12em;
}

.mg-title {
  line-height: 1.08;
  text-wrap: balance;
}

.mg-lead {
  max-width: 60ch;
}

.mg-hero-card {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  padding: 1.5rem .75rem;
  border-radius: 2rem;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.08), transparent 36%),
    radial-gradient(circle at 50% 60%, rgba(255,255,255,.04), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  box-shadow:
    0 20px 50px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
}

.mg-hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.12) 0%, rgba(255,255,255,.03) 28%, transparent 60%);
}

.mg-hero-visual-wrap {
  position: relative;
  z-index: 2;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mg-hero-phases-panel {
  width: min(100%, 360px);
  padding: 1rem;
  border-radius: 1.35rem;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.06), rgba(255,255,255,.015));
  box-shadow:
    inset 0 0 24px rgba(255,255,255,.04),
    0 10px 30px rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
}

.mg-hero-phases-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem .9rem;
  justify-items: center;
  align-items: center;
}

/* -------------------------
   PHASES DE LUNE
-------------------------- */
.mg-phase {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  box-shadow: 0 2px 14px rgba(255,255,255,.14);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    opacity .18s ease;
}

.mg-phase img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform .22s ease, filter .22s ease;
}

.mg-phase-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + .45rem);
  transform: translateX(-50%) translateY(4px);
  z-index: 5;
  text-align: center;
  padding: .22rem .8rem;
  border-radius: 999px;
  font-size: .82rem;
  line-height: 1.1;
  white-space: nowrap;
  color: #fff;
  background: rgba(10, 14, 28, .88);
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.mg-phase:hover .mg-phase-label,
.mg-phase:focus .mg-phase-label,
.mg-phase.is-open .mg-phase-label {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mg-phase:hover img,
.mg-phase:focus img,
.mg-phase.is-open img {
  transform: scale(1.08);
  filter: drop-shadow(0 0 8px rgba(255,255,255,.22));
}

.mg-phase:hover {
  transform: translateY(-2px);
}
/* -------------------------
  Responsive propre pour ce hero
---------------------------- */
@media (max-width: 991.98px) {
  .mg-title {
    font-size: clamp(2rem, 5vw, 3rem);
  }

  .mg-hero-card {
    min-height: 290px;
  }
  .mg-hero-phases-panel {
    width: min(100%, 540px);
  }
  .mg-phase {
    width: 4.1rem;
    height: 4.1rem;
  }
}

@media (max-width: 767.98px) {
  .mg-title {
    line-height: 1.12;
  }

  .mg-lead {
    font-size: 1.05rem;
  }

  .mg-hero-card {
    min-height: 250px;
    padding: 1.15rem .95rem;
    border-radius: 1.4rem;
  }

  .mg-hero-visual-wrap {
    min-height: 165px;
  }

  .mg-hero-phases-panel {
    width: min(100%, 720px);
    padding: .9rem;
  }

  .mg-hero-phases-grid {
    gap: .8rem .7rem;
  }

  .mg-phase {
    width: 3.5rem;
    height: 3.5rem;
  }

  .mg-phase-label {
    font-size: .78rem;
    padding: .2rem .7rem;
  }
}

@media (max-width: 479.98px) {
  .mg-hero-card {
    min-height: 230px;
  }

  .mg-title {
    font-size: 1.9rem;
  }

  .mg-hero-phases-panel {
    width: min(100%, 300px);
    padding: .85rem;
  }

  .mg-phase {
    width: 3rem;
    height: 3rem;
  }
}


/* -------------------------
   FOCUS / BLOC 2 
-------------------------- */
.mg-focus {
  position: relative;
}

.mg-focus-card { 
  position: relative;
  overflow: hidden;
  padding: 1.4rem 1.15rem;
  border-radius: 1.75rem;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.06), transparent 34%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,.04), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  box-shadow:
    0 18px 42px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.025);
  backdrop-filter: blur(10px);
}

.mg-focus-moon-shell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mg-focus-glow {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.12) 0%, rgba(255,255,255,.03) 34%, transparent 68%);
  filter: blur(2px);
}

.mg-focus-moon {
  position: relative;
  z-index: 2;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 4.3rem;
  line-height: 1;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.18), rgba(255,255,255,.04) 40%, rgba(255,255,255,.015) 58%, transparent 72%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 0 32px rgba(255,255,255,.07),
    inset 0 0 22px rgba(255,255,255,.05);
}
.mg-focus-interactive {
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mg-focus-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + .6rem);
  transform: translateX(-50%) translateY(6px);
  z-index: 5;

  padding: .3rem .9rem;
  border-radius: 999px;
  font-size: .9rem;
  white-space: nowrap;

  color: #fff;
  background: rgba(10,14,28,.9);
  box-shadow: 0 10px 25px rgba(0,0,0,.3);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: all .2s ease;
}
.mg-focus-interactive:hover .mg-focus-label,
.mg-focus-interactive:focus .mg-focus-label,
.mg-focus-interactive.is-open .mg-focus-label {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mg-focus-interactive:hover img,
.mg-focus-interactive:focus img,
.mg-focus-interactive.is-open img {
  transform: scale(1.05);
  filter: drop-shadow(0 0 10px rgba(255,255,255,.25));
}
/* -------------------------
   CHIPS
-------------------------- */
.mg-chip {
  display: inline-flex;
  align-items: center;
  padding: .5rem .9rem;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 20px rgba(0,0,0,.10);
  font-size: .92rem;
  line-height: 1;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background-color .18s ease;
}

.mg-chip:hover {
  transform: translateY(-2px);
}

/* -------------------------
   MOON-GRAPH.PHP
   TIMELINE SECTION PREMIUM
-------------------------- */

.mg-timeline-section {
  position: relative;
}

.mg-timeline {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: .75rem 0 0;
}

/* ligne centrale */
.mg-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.06) 0%,
    rgba(255,255,255,.18) 14%,
    rgba(255,255,255,.12) 50%,
    rgba(255,255,255,.18) 84%,
    rgba(255,255,255,.06) 100%
  );
  box-shadow:
    0 0 22px rgba(255,255,255,.04),
    inset 0 0 10px rgba(255,255,255,.025);
}

/* -------------------------
   STEP LAYOUT
-------------------------- */

.mg-step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 84px 1fr;
  align-items: center;
  margin-bottom: 1.35rem;
}

.mg-step:last-child {
  margin-bottom: 0;
}

.mg-step-left .mg-step-card {
  grid-column: 1;
  justify-self: end;
}

.mg-step-right .mg-step-card {
  grid-column: 3;
  justify-self: start;
}

.mg-step-node {
  grid-column: 2;
  position: relative;
  z-index: 3;
  justify-self: center;
  align-self: start;
  margin-top: 1.2rem;
  line-height: 0;
}

/* halo central discret */
.mg-step-node::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  filter: blur(6px);
  opacity: .6;
  pointer-events: none;
}

/* -------------------------
   CARD LINK
-------------------------- */

.mg-step-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.mg-step-card-link:hover,
.mg-step-card-link:focus,
.mg-step-card-link:active {
  color: inherit;
  text-decoration: none; 
/*  border: 1px solid red;*/
  
  /* glow externe doux */
  box-shadow:
    0 20px 45px rgba(0,0,0,.28),           /* profondeur */
    0 0 0 1px rgba(255,255,255,.05),       /* bord subtil */
    0 0 25px rgba(255,255,255,.10),        /* halo blanc */
    0 0 60px rgba(180,210,255,.08);        /* halo froid lunaire */
}

.mg-step-card-link:focus-visible {
  outline: 2px solid rgba(255,255,255,.7);
  outline-offset: 4px;
  border-radius: 1.35rem;
}

/* -------------------------
   CARD
-------------------------- */

.mg-step-card {
  position: relative;
  width: min(100%, 390px);
  padding: 1.1rem 1rem 1rem;
  border-radius: 1.35rem;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.05),
    rgba(255,255,255,.02)
  );
  box-shadow:
    0 16px 34px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease;
  overflow: hidden;
}

/* reflet léger premium */
.mg-step-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.05) 0%,
    transparent 40%,
    transparent 60%,
    rgba(255,255,255,.03) 100%
  );
  pointer-events: none;
}

/* 🔥 GLOW LUNAIRE */
.mg-step-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;

  background: radial-gradient(
    circle at 50% 50%,
    rgba(255,255,255,.25),
    rgba(180,210,255,.12),
    transparent 70%
  );

  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}

/* activation glow */
.mg-step-card-link:hover .mg-step-card::before,
.mg-step-card-link:focus-visible .mg-step-card::before {
  opacity: .9;
}

/* ligne horizontale */
.mg-step-card::after {
  pointer-events: none;
}

.mg-step-card::before,
.mg-step-card::after {
  pointer-events: none;
}

/* connecteur */
.mg-step-card::marker {}

/* connecteur latéral */
.mg-step-card::before {}

.mg-step-card::after {}

.mg-step-card::before {}

.mg-step-card::after {}

.mg-step-card::before {}

.mg-step-card::after {}

.mg-step-card::before {}

.mg-step-card::after {}

.mg-step-card::before {}

.mg-step-card::after {}

.mg-step-card::before {}

.mg-step-card::after {}

/* connecteur */
.mg-step-card::before {
  top: 1.2rem;
  width: 18px;
  height: 1px;
  background: rgba(255,255,255,.16);
}

.mg-step-left .mg-step-card::before {
  right: -18px;
}

.mg-step-right .mg-step-card::before {
  left: -18px;
}

.mg-step-card h3 {
  line-height: 1.2;
}

.mg-step-card .btn {
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
  pointer-events: none; /* important */
}

/* -------------------------
   HOVER PREMIUM
-------------------------- */

.mg-step-card-link:hover .mg-step-card,
.mg-step-card-link:focus-visible .mg-step-card {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.18);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.08),
    rgba(255,255,255,.03)
  );
  box-shadow:
    0 22px 48px rgba(0,0,0,.25),
    0 0 0 1px rgba(255,255,255,.04);
}

/* -------------------------
   MOON ICON
-------------------------- */

.mg-step-moon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
}

.mg-step-moon img {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain;
  transform: translateY(-23px);
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.14))
    drop-shadow(0 0 18px rgba(255,255,255,.06));
  transition:
    transform .28s ease,
    filter .28s ease;
}

.mg-step-featured .mg-step-moon img {
  width: 71px;
  height: 71px;
  transform: translateY(46px);
}

.mg-step:hover .mg-step-moon img {
  transform: scale(1.16) rotate(1deg) translateY(-22px);
  filter:
    drop-shadow(0 0 12px rgba(255,255,255,.45))
    drop-shadow(0 0 24px rgba(255,255,255,.10));
}

.mg-step-featured:hover .mg-step-moon img {
  transform: scale(1.12) rotate(1deg) translateY(39px);
}

/* -------------------------
   PROGRESS LINE
-------------------------- */

.mg-timeline-progress {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  transform: translateX(-50%);
  border-radius: 999px;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.95),
    rgba(255,255,255,.5)
  );
  box-shadow:
    0 0 18px rgba(255,255,255,.18);
}

/* -------------------------
   MOBILE
-------------------------- */

@media (max-width: 767.98px) {

  .mg-timeline::before,
  .mg-timeline-progress {
    left: 18px;
    transform: none;
  }

  .mg-step {
    grid-template-columns: 36px 1fr;
    column-gap: 1rem;
    align-items: start;
  }

  .mg-step-node {
    grid-column: 1;
    margin-top: 1.1rem;
  }

  .mg-step-left .mg-step-card,
  .mg-step-right .mg-step-card {
    grid-column: 2;
    width: 100%;
  }

  .mg-step-card::before {
    left: -18px;
    right: auto;
  }
}


/* -------------------------
   SUMMARY
-------------------------- */
.mg-summary {
  position: relative;
}

.mg-summary-card {
  padding: 1.15rem 1rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  box-shadow:
    0 14px 30px rgba(0,0,0,.13),
    inset 0 1px 0 rgba(255,255,255,.02);
  backdrop-filter: blur(8px);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background-color .18s ease;
}

.mg-summary-card:hover {
  transform: translateY(-2px);
}

/* -------------------------
   GRAPH
-------------------------- */
.mg-graph-card {
  position: relative;
  height: 160px;
  padding: 1rem;
  border-radius: 1.5rem;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.06), transparent 60%),
    rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 12px 28px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.03);
}

/* -------------------------
   CTA FINAL
-------------------------- */
.mg-page > section:last-child .btn {
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

/* -------------------------
   ACCESSIBILITÉ
-------------------------- */
.mg-page a:focus-visible,
.mg-page button:focus-visible,
.mg-phase:focus-visible {
  outline: 0;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.16),
    0 0 0 6px rgba(255,255,255,.08);
  border-radius: 999px;
}

.mg-step-card a:focus-visible {
  border-radius: 999px;
}

/* -------------------------
   RESPONSIVE
-------------------------- */
@media (max-width: 991.98px) {
  .mg-title {
    font-size: clamp(2rem, 5vw, 3rem);
  }

  .mg-hero-card {
    min-height: 290px;
  }

  .mg-focus-moon {
    width: 150px;
    height: 150px;
    font-size: 3.8rem;
  }

  .mg-step {
    grid-template-columns: 1fr 72px 1fr;
  }

  .mg-step-card {
    width: min(100%, 340px);
  }

  .mg-hero-phases-grid .mg-phase {
    width: 4.1rem;
    height: 4.1rem;
  }
}

@media (max-width: 767.98px) {
  .mg-page {
    max-width: 100%;
  }

  .mg-title {
    line-height: 1.12;
  }

  .mg-lead {
    font-size: 1.05rem;
  }

  .mg-hero-card,
  .mg-focus-card {
    border-radius: 1.4rem;
  }

  .mg-hero-card {
    min-height: 250px;
    padding: 1.15rem .95rem;
  }


  .mg-phase {
    width: 1.95rem;
    height: 1.95rem;
    font-size: .95rem;
  }

  .mg-hero-phases-grid {
    gap: .8rem .7rem;
  }

  .mg-hero-phases-grid .mg-phase {
    width: 3.5rem;
    height: 3.5rem;
  }

  .mg-focus-card {
    padding: 1.05rem .9rem;
  }

  .mg-focus-moon-shell {
    min-height: 180px;
  }

  .mg-focus-glow {
    width: 190px;
    height: 190px;
  }

  .mg-focus-moon {
    width: 132px;
    height: 132px;
    font-size: 3.2rem;
  }

  .mg-chip {
    font-size: .84rem;
    padding: .45rem .75rem;
  }

  .mg-timeline {
    padding-left: .2rem;
  }

  .mg-timeline::before {
    left: 18px;
    transform: none;
  }

  .mg-step {
    grid-template-columns: 36px 1fr;
    gap: .8rem;
    margin-bottom: 1.25rem;
  }

  .mg-step-left .mg-step-card,
  .mg-step-right .mg-step-card {
    grid-column: 2;
    justify-self: stretch;
  }

  .mg-step-node {
    grid-column: 1;
    align-self: start;
    padding-top: .4rem;
  }

  .mg-step-card {
    width: 100%;
    padding: .95rem .9rem .9rem;
    border-radius: 1.1rem;
  }

  .mg-step-card::before {
    display: none;
  }

  .mg-step-icon {
    font-size: 1.2rem;
    margin-top: .35rem;
  }

  .mg-step-dot {
    width: 14px;
    height: 14px;
  }

  .mg-summary-card {
    border-radius: 1.05rem;
    padding: 1rem .9rem;
  }
}

@media (max-width: 479.98px) {
  .mg-hero-card {
    min-height: 230px;
  }

  .mg-title {
    font-size: 1.9rem;
  }


  .mg-focus-moon {
    width: 118px;
    height: 118px;
    font-size: 2.95rem;
  }

  .mg-phase {
    width: 1.8rem;
    height: 1.8rem;
    font-size: .88rem;
  }


  .mg-hero-phases-grid .mg-phase {
    width: 3rem;
    height: 3rem;
  }

  .mg-phase-label {
    font-size: .78rem;
    padding: .2rem .7rem;
  }
}