/* epicentre.css — page "Épicentre" dans le style ARKHEIN */

/* ===== TITRE PAGE ===== */
.epicentre-hero{
  padding:44px 0 18px;
  text-align:center;
}

.epicentre-hero h1{
  margin:0;
  font-family:"Big Caslon","Bodoni Moda",var(--ff-serif),Georgia,serif;
  font-weight:900;
  font-size:2.3rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  line-height:1.25;
  color:var(--violet);
  text-shadow:0 6px 16px rgba(14,16,48,.12);
}

/* ===== 3 CARTES ===== */
.epicentre-cards{
  max-width:1200px;
  margin:0 auto;
  padding:18px 16px 26px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:34px;
}

.noyers-card{
  position:relative;
  border-radius:18px;
  padding:22px 22px 18px;

  background:
    radial-gradient(160% 200% at 50% 40%,
      rgba(255,255,255,.92) 0%,
      rgba(203,207,252,.96) 45%,
      rgba(157,163,234,.96) 100%);

  box-shadow:
    0 0 0 1px rgba(230,231,255,.90),
    0 10px 20px rgba(158,168,255,.45),
    0 10px 22px rgba(0,0,0,.10);

  transform:translateY(0) scale(1);
  transition:
    transform var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease);
}

.noyers-card:hover{
  transform:translateY(-4px) scale(1.02);
  box-shadow:
    0 0 0 1px rgba(230,231,255,.95),
    0 16px 30px rgba(158,168,255,.65),
    0 12px 26px rgba(0,0,0,.12);
}

.noyers-card-icon{
  width:64px;
  height:64px;
  border-radius:999px;
  margin:0 auto 14px;
  display:flex;
  align-items:center;
  justify-content:center;

  background:#fff;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.95),
    0 14px 26px rgba(158,168,255,.55);
}

.noyers-card-icon i{
  font-size:1.35rem;
  color:var(--violet);
}

.noyers-card h2{
  margin:0 0 10px;
  text-align:center;

  font-family:"Big Caslon","Bodoni Moda",var(--ff-serif),Georgia,serif;
  font-weight:900;
  font-size:1.18rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
}

.noyers-card p{
  margin:0 0 10px;
  font-family:"Big Caslon","Bodoni Moda",var(--ff-serif),Georgia,serif;
  font-size:1.08rem;
  line-height:1.75;
  color:var(--ink);
}

/* ===== IMAGE PLACEHOLDER ===== */
.epicentre-photo{
  padding:22px 16px 10px;
}

.epicentre-photo-frame{
  margin:0 auto;
  max-width:980px;
  border-radius:26px;
  overflow:hidden;

  box-shadow:
    0 0 0 1px rgba(230,231,255,.36),
    0 16px 40px rgba(198,201,255,.55),
    0 4px 10px rgba(0,0,0,.14),
    0 0 0 3px rgba(230,231,255,1),
    0 26px 60px rgba(158,168,255,.78),
    0 10px 22px rgba(0,0,0,.18);
}

/* si tu mets une vraie image */
.epicentre-photo-frame img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}

/* placeholder (tant que tu n’as pas l’image) */
.epicentre-photo-placeholder{
  min-height:380px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:26px;
  font-family:Impact,"Bodoni Moda",var(--ff-serif),system-ui,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(46,44,98,.75);
  background:
    radial-gradient(160% 200% at 50% 40%,
      rgba(255,255,255,.85) 0%,
      rgba(191,195,243,.9) 45%,
      rgba(142,148,216,.9) 100%);
}

/* ===== SECTION HISTOIRE ===== */
.epicentre-history{
  padding:34px 16px 70px;
}

.epicentre-title{
  margin:30px 0 8px;
  text-align:center;

  font-family:"Big Caslon","Bodoni Moda",var(--ff-serif),Georgia,serif;
  font-weight:900;
  font-size:2.3rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  line-height:1.25;
  color:var(--violet);
  text-shadow:0 6px 16px rgba(14,16,48,.12);
}

/* ===========================
   TIMELINE (repris + ajusté)
   - Texte : Big Caslon
   - Dates : Times New Roman
   =========================== */

@keyframes timeline-gradient { 0%{background-position:0% 100%} 100%{background-position:0% 0%} }
@keyframes draw-line { to { height: calc(100% - 57px); } }

.timeline-container{
  position: relative;
  max-width: 760px;
  margin: 28px auto 0;
  z-index: 0;
}

.timeline-container::after{
  content:'';
  position:absolute;
  width:4px;
  background:linear-gradient(to top,#778BA9,#2E2C62);
  background-size:100% 200%;
  animation:timeline-gradient 10s ease-in-out infinite alternate;
  height:0;
  top:0;
  left:50%;
  margin-left:-2px;
  transition: box-shadow .3s ease;
  z-index:1;
}

.timeline-container.is-in-view::after{
  animation-name: draw-line, timeline-gradient;
  animation-duration: 2.5s, 10s;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-delay: 0s, 2.5s;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards;
}

.timeline-container::before{
  content:'';
  position:absolute;
  bottom:55px;
  left:50%;
  transform:translateX(-50%);
  width:0; height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-top:10px solid #2E2C62;
  z-index:1;
  opacity:0;
  transition:opacity .5s ease;
  transition-delay:2.5s;
}

.timeline-container.is-in-view::before{ opacity:1; }

.timeline-end{
  position:relative;
  width:100%;
  text-align:center;
  margin-top:90px;
  opacity:0;
  transform:translateY(20px);
  transition: all .6s ease-out;
  z-index:3;
}
.timeline-end.timeline-visible{ opacity:1; transform:translateY(0); }

.timeline-icon-right{
  position:absolute;
  font-size:1.6em;
  bottom:-6px;
  right:-6px;
  opacity:.85;
  transition:transform .3s ease, opacity .3s ease;
}
.timeline-item:hover .timeline-icon-right{ opacity:1; transform:scale(1.15); }

/* Couleurs icônes */
.icon-color-1{color:#457B6B}
.icon-color-2{color:#B85C3A}
.icon-color-3{color:#C8AD7F}
.icon-color-4{color:#1E90FF}
.icon-color-5{color:#4D5860}
.icon-color-6{color:#C8AD7F}
.icon-color-7{color:#FF914D}
.icon-color-8{color:#4B3D8A}

/* Couleurs fond */
.timeline-content-wrapper.text-bg-color-1{background-color:rgba(69,123,107,.10)}
.timeline-content-wrapper.text-bg-color-2{background-color:rgba(184,92,58,.10)}
.timeline-content-wrapper.text-bg-color-3{background-color:rgba(200,173,127,.10)}
.timeline-content-wrapper.text-bg-color-4{background-color:rgba(30,144,255,.10)}
.timeline-content-wrapper.text-bg-color-5{background-color:rgba(77,88,96,.10)}
.timeline-content-wrapper.text-bg-color-6{background-color:rgba(200,173,127,.10)}
.timeline-content-wrapper.text-bg-color-7{background-color:rgba(255,145,77,.10)}
.timeline-content-wrapper.text-bg-color-8{background-color:rgba(75,61,138,.10)}

.timeline-item:hover .timeline-content-wrapper.text-bg-color-1{background-color:rgba(69,123,107,.20)}
.timeline-item:hover .timeline-content-wrapper.text-bg-color-2{background-color:rgba(184,92,58,.20)}
.timeline-item:hover .timeline-content-wrapper.text-bg-color-3{background-color:rgba(200,173,127,.20)}
.timeline-item:hover .timeline-content-wrapper.text-bg-color-4{background-color:rgba(30,144,255,.20)}
.timeline-item:hover .timeline-content-wrapper.text-bg-color-5{background-color:rgba(77,88,96,.20)}
.timeline-item:hover .timeline-content-wrapper.text-bg-color-6{background-color:rgba(200,173,127,.20)}
.timeline-item:hover .timeline-content-wrapper.text-bg-color-7{background-color:rgba(255,145,77,.20)}
.timeline-item:hover .timeline-content-wrapper.text-bg-color-8{background-color:rgba(75,61,138,.20)}

/* Ombres paramétrées */
.timeline-content-wrapper.text-bg-color-1{--shadow:rgba(69,123,107,.10);--shadow-strong:rgba(69,123,107,.18)}
.timeline-content-wrapper.text-bg-color-2{--shadow:rgba(184,92,58,.10);--shadow-strong:rgba(184,92,58,.18)}
.timeline-content-wrapper.text-bg-color-3{--shadow:rgba(200,173,127,.10);--shadow-strong:rgba(200,173,127,.18)}
.timeline-content-wrapper.text-bg-color-4{--shadow:rgba(30,144,255,.10);--shadow-strong:rgba(30,144,255,.18)}
.timeline-content-wrapper.text-bg-color-5{--shadow:rgba(77,88,96,.10);--shadow-strong:rgba(77,88,96,.18)}
.timeline-content-wrapper.text-bg-color-6{--shadow:rgba(200,173,127,.10);--shadow-strong:rgba(200,173,127,.18)}
.timeline-content-wrapper.text-bg-color-7{--shadow:rgba(255,145,77,.10);--shadow-strong:rgba(255,145,77,.18)}
.timeline-content-wrapper.text-bg-color-8{--shadow:rgba(75,61,138,.10);--shadow-strong:rgba(75,61,138,.18)}

.timeline-item{
  padding:0;
  position:relative;
  width:50%;
  display:flex;
  align-items:flex-start;
  box-sizing:border-box;
  min-height:54px;
  margin-bottom:28px;
  opacity:0;
  transform:translateY(20px);
  transition: all .6s ease-out;
}

.timeline-item.timeline-visible{ opacity:1; transform:translateY(0) }
.timeline-item.timeline-left{ justify-content:flex-end }
.timeline-item.timeline-right{ justify-content:flex-start; left:50% }

/* TEXTE = Big Caslon (au lieu de Merriweather) */
.timeline-content-wrapper{
  position:relative;
  color:#2E2C62;
  padding:12px;
  border-radius:10px;
  font-family:"Big Caslon","Bodoni Moda",var(--ff-serif),Georgia,serif;
  font-size:1.08em;
  line-height:1.55;
  text-align:left;
  width:100%;
  box-sizing:border-box;
  margin:0 15px;
  border:1px solid rgba(46,44,98,.1);
  box-shadow:0 8px 26px 6px var(--shadow, rgba(46,44,98,.10));

  --tx: 0px;
  --scale: 1;
  transform: translateX(var(--tx)) scale(var(--scale));
  transition:
    transform .35s cubic-bezier(.2,.7,.3,1),
    box-shadow .3s ease,
    background-color .3s ease;
}

.timeline-item.timeline-left  .timeline-content-wrapper{ transform-origin:100% 50% }
.timeline-item.timeline-right .timeline-content-wrapper{ transform-origin:0% 50% }

.timeline-item.timeline-left:hover  .timeline-content-wrapper{
  --tx: -8px; --scale: 1.20;
  z-index:2;
  box-shadow:0 16px 50px 12px var(--shadow-strong, rgba(46,44,98,.18));
}
.timeline-item.timeline-right:hover .timeline-content-wrapper{
  --tx: 8px; --scale: 1.20;
  z-index:2;
  box-shadow:0 16px 50px 12px var(--shadow-strong, rgba(46,44,98,.18));
}

/* DATES = Times New Roman (au lieu de Pacifico) */
.timeline-date{
  font-family:"Times New Roman", Times, serif;
  position:absolute;
  font-size:1.05em;
  font-weight:700;
  color:#FFF;
  z-index:2;
  background-color:rgba(46,44,98,.6);
  padding:2px 6px;
  border-radius:4px;
  top:-23px;
  transition: all .3s ease;
}
.timeline-date:empty{ display:none }
.timeline-item.timeline-left  .timeline-date{ right:0 }
.timeline-item.timeline-right .timeline-date{ left:0 }
.timeline-item:hover .timeline-date{ font-size:1.12em }

/* ===== BOUTON FINAL (scopé) ===== */
#mp-ebp{ display:inline-block }

#mp-ebp .mp-ebp__btn{
  all:unset;
  display:inline-block;
  box-sizing:border-box;
  cursor:pointer;
  position:relative;
  isolation:isolate;
  overflow:hidden;

  --scale:1;
  --hover-scale:1.18;

  padding:18px 34px;
  border-radius:9999px;

  font-family:'Merriweather', serif;
  font-weight:900;
  font-size:1.35rem;
  line-height:1.1;
  text-transform:uppercase;

  color:#0e1030;
  text-decoration:none;

  background: radial-gradient(160% 200% at 50% 40%, #C6C9FF 0%, #9EA8FF 38%, #6F79B7 68%, #2E2C62 100%);
  background-color:#2E2C62;

  box-shadow:
    0 0 0 1px rgba(230,231,255,.28),
    0 12px 26px rgba(198,201,255,.40),
    0 2px 6px rgba(0,0,0,.12),
    0 0 0 2px rgba(198,201,255,.95),
    0 18px 46px rgba(158,168,255,.65),
    0 6px 16px rgba(0,0,0,.2);

  transform:scale(var(--scale));
  will-change:transform, box-shadow;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
  z-index:4;
}

#mp-ebp .mp-ebp__btn:hover{
  --scale:var(--hover-scale);
  box-shadow:
    0 0 0 1px rgba(230,231,255,.36),
    0 16px 40px rgba(198,201,255,.55),
    0 4px 10px rgba(0,0,0,.14),
    0 0 0 3px rgba(198,201,255,1),
    0 26px 60px rgba(158,168,255,.78),
    0 10px 22px rgba(0,0,0,.24);
  z-index:5;
}

#mp-ebp .mp-ebp__btn:focus{ outline:none }
#mp-ebp .mp-ebp__btn:focus-visible{
  box-shadow:
    0 0 0 4px #fff,
    0 0 0 8px rgba(158,168,255,.85),
    0 26px 60px rgba(158,168,255,.78),
    0 10px 22px rgba(0,0,0,.24);
  transition:box-shadow .2s ease;
}

#mp-ebp .mp-ebp__arrow{
  position:absolute;
  top:50%;
  left:0%;
  width:26px;
  height:26px;
  transform:translate(-140%,-50%);
  color:currentColor;
  opacity:0;
  pointer-events:none;
}

#mp-ebp .mp-ebp__btn:hover .mp-ebp__arrow{ animation: mp-ebp-arrow 800ms cubic-bezier(.18,.66,.26,.99) forwards }

#mp-ebp .mp-ebp__btn::before,
#mp-ebp .mp-ebp__btn::after{
  content:"";
  position:absolute;
  top:50%;
  width:10px;
  height:10px;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.25);
  opacity:0;
  pointer-events:none;
  box-shadow: inset 0 0 6px rgba(0,0,0,.45), 0 0 10px rgba(198,201,255,.55);
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 70%, rgba(0,0,0,0) 100%);
}
#mp-ebp .mp-ebp__btn::before{ left:0% }
#mp-ebp .mp-ebp__btn::after{ left:100% }
#mp-ebp .mp-ebp__btn:hover::before{ animation: mp-ebp-hole-in 800ms ease-out forwards }
#mp-ebp .mp-ebp__btn:hover::after{  animation: mp-ebp-hole-out 800ms ease-out forwards }

#mp-ebp .mp-ebp__spark{
  --dx:0; --dy:0; --t:0;
  position:absolute;
  top:50%;
  left:100%;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#fff;
  filter:blur(.2px);
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
  pointer-events:none;
  box-shadow:0 0 6px rgba(255,255,255,.9), 0 0 12px rgba(198,201,255,.7);
}

#mp-ebp .mp-ebp__btn:hover .mp-ebp__spark{ animation: mp-ebp-spark 700ms ease-out forwards }
#mp-ebp .mp-ebp__spark.s1{ --dx:28px; --dy:-14px; --t:40ms }
#mp-ebp .mp-ebp__spark.s2{ --dx:18px; --dy:12px; --t:60ms }
#mp-ebp .mp-ebp__spark.s3{ --dx:36px; --dy:6px; --t:80ms }

#mp-ebp .mp-ebp__label{ position:relative; display:inline-block }
#mp-ebp .mp-ebp__label::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  width:90%;
  height:3px;
  background:#fff;
  border-radius:2px;
  box-shadow:0 0 6px rgba(255,255,255,.95), 0 0 14px rgba(255,255,255,.75), 0 0 28px rgba(255,255,255,.45);
  transform:translateX(-130%);
  opacity:0;
  pointer-events:none;
}
#mp-ebp .mp-ebp__btn:hover .mp-ebp__label::after{ opacity:1; animation: mp-ebp-underline 900ms cubic-bezier(.2,.7,.3,1) forwards 120ms }

@keyframes mp-ebp-arrow{
  0%{opacity:0;transform:translate(-140%,-50%)}
  15%{opacity:1}
  50%{transform:translate(0%,-50%)}
  100%{opacity:0;transform:translate(140%,-50%)}
}
@keyframes mp-ebp-hole-in{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2);left:0%}
  25%{opacity:1;transform:translate(-50%,-50%) scale(1);left:8%}
  60%{opacity:1;transform:translate(-50%,-50%) scale(.92);left:16%}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.6);left:24%}
}
@keyframes mp-ebp-hole-out{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2);left:76%}
  40%{opacity:1;transform:translate(-50%,-50%) scale(1);left:88%}
  80%{opacity:1;transform:translate(-50%,-50%) scale(.92);left:96%}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.6);left:100%}
}
@keyframes mp-ebp-spark{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  20%{opacity:1;transform:translate(calc(-50% + 4px),-50%) scale(.8)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.2)}
}
@keyframes mp-ebp-underline{
  0%{transform:translateX(-130%)}
  100%{transform:translateX(130%)}
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1050px){
  .epicentre-cards{
    grid-template-columns:1fr;
    gap:22px;
    padding-top:10px;
  }
  .timeline-container{ max-width: 720px; }
}

@media (max-width: 720px){
  .epicentre-hero h1{ font-size:2.0rem; letter-spacing:.14em; }
  .epicentre-title{ font-size:2.0rem; letter-spacing:.14em; }

  .timeline-container{ max-width: 92%; }

  .timeline-item{
    width:100%;
    left:0 !important;
    justify-content:center !important;
  }
  .timeline-container::after{ left:18px; margin-left:0; }
  .timeline-container::before{ left:18px; transform:none; }

  .timeline-content-wrapper{ margin-left:44px; margin-right:0; }
  .timeline-item.timeline-left:hover .timeline-content-wrapper,
  .timeline-item.timeline-right:hover .timeline-content-wrapper{
    --tx: 0px;
    --scale: 1.04;
  }

  .epicentre-photo-placeholder{ min-height:280px; }
}