/* =====================================================================
   LATORTU v2 — Tortue de mer CSS  (sea turtle in ocean)
===================================================================== */

/* ── Conteneur principal ── */
.Latortu--mer {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  overflow: hidden;
  animation: mer-apparition 1.4s ease forwards 0.3s;
  background: radial-gradient(ellipse at 50% 40%,
    #0a3d5a 0%,
    #062940 40%,
    #041820 100%
  );
}

/* Caustics / light rays on water surface */
.Latortu--mer::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 180px 60px at 20% 15%, rgba(0,200,255,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 140px 50px at 55% 8%,  rgba(0,180,255,0.05) 0%, transparent 70%),
    radial-gradient(ellipse 200px 70px at 80% 20%, rgba(0,220,255,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 100px 35px at 35% 30%, rgba(0,200,255,0.04) 0%, transparent 70%),
    radial-gradient(ellipse 160px 55px at 70% 35%, rgba(0,180,255,0.05) 0%, transparent 70%);
  animation: caustics 6s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Bubble particles */
.Latortu--mer::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 3px at 15% 80%, rgba(150,230,255,0.55) 50%, transparent 51%),
    radial-gradient(circle 2px at 28% 65%, rgba(150,230,255,0.4)  50%, transparent 51%),
    radial-gradient(circle 4px at 42% 90%, rgba(150,230,255,0.5)  50%, transparent 51%),
    radial-gradient(circle 2px at 58% 75%, rgba(150,230,255,0.45) 50%, transparent 51%),
    radial-gradient(circle 3px at 72% 88%, rgba(150,230,255,0.5)  50%, transparent 51%),
    radial-gradient(circle 2px at 85% 70%, rgba(150,230,255,0.4)  50%, transparent 51%),
    radial-gradient(circle 2px at 8%  55%, rgba(150,230,255,0.35) 50%, transparent 51%),
    radial-gradient(circle 3px at 93% 82%, rgba(150,230,255,0.45) 50%, transparent 51%),
    radial-gradient(circle 2px at 50% 60%, rgba(150,230,255,0.3)  50%, transparent 51%),
    radial-gradient(circle 3px at 63% 50%, rgba(150,230,255,0.35) 50%, transparent 51%);
  animation: bubbles-rise 8s linear infinite;
  pointer-events: none;
}

@keyframes caustics {
  0%   { opacity: 0.6; transform: scaleX(1)    scaleY(1); }
  50%  { opacity: 1;   transform: scaleX(1.04) scaleY(0.97); }
  100% { opacity: 0.7; transform: scaleX(0.97) scaleY(1.03); }
}

@keyframes bubbles-rise {
  0%   { transform: translateY(0)    translateX(0); opacity: 0.8; }
  50%  { transform: translateY(-40%) translateX(10px); opacity: 1; }
  100% { transform: translateY(-85%) translateX(-5px); opacity: 0; }
}

@keyframes mer-apparition {
  0%   { opacity: 0; transform: scale(0.92) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.Latortu--mer.leaving {
  animation: mer-exit 0.5s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes mer-exit {
  0%   { opacity: 1; transform: scale(1) translateY(0); }
  30%  { transform: scale(1.03) translateY(-12px); }
  100% { opacity: 0; transform: scale(0.88) translateY(-120vh); }
}

.Latortu--mer:hover .mer-wrap {
  filter: drop-shadow(0 0 30px rgba(0, 200, 255, 0.4));
}

/* ── Wrapper global ── */
.mer-wrap {
  position: relative;
  width: 560px;
  height: 440px;
  animation: mer-float 5s ease-in-out infinite;
  transform-origin: center 55%;
}

@keyframes mer-float {
  0%, 100% { transform: translateY(0)   rotate(0deg); }
  30%      { transform: translateY(-14px) rotate(-1.5deg); }
  70%      { transform: translateY(8px)  rotate(1deg); }
}

/* ─────────────────────────────────────────────
   OMBRE AU SOL (reflet eau)
───────────────────────────────────────────── */
.mr-shadow {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  height: 30px;
  background: radial-gradient(ellipse, rgba(0,100,180,0.35) 0%, transparent 70%);
  border-radius: 50%;
  animation: mr-shadow-pulse 5s ease-in-out infinite;
}

@keyframes mr-shadow-pulse {
  0%, 100% { transform: translateX(-50%) scaleX(1)    scaleY(1); opacity: 0.5; }
  50%       { transform: translateX(-50%) scaleX(1.12) scaleY(0.85); opacity: 0.3; }
}

/* ─────────────────────────────────────────────
   QUEUE
───────────────────────────────────────────── */
.mr-tail {
  position: absolute;
  bottom: 155px;
  right: 162px;
  width: 40px;
  height: 16px;
  background: #3d7a4a;
  border-radius: 0 0 14px 14px;
  transform: rotate(15deg);
  transform-origin: left center;
  animation: mr-tail-wag 2.5s ease-in-out infinite;
  z-index: 1;
}

.mr-tail::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 2px;
  width: 16px;
  height: 10px;
  background: #2f6038;
  border-radius: 0 60% 60% 0;
}

@keyframes mr-tail-wag {
  0%, 100% { transform: rotate(15deg); }
  50%       { transform: rotate(28deg); }
}

/* ─────────────────────────────────────────────
   NAGEOIRES ARRIÈRE
───────────────────────────────────────────── */
.mr-fin-bl,
.mr-fin-br {
  position: absolute;
  width: 90px;
  height: 44px;
  background: linear-gradient(135deg, #4a9a5e, #2f6038);
  border-radius: 50% 20% 50% 20%;
  z-index: 2;
  animation: mr-fin-back 2.8s ease-in-out infinite;
}

.mr-fin-bl {
  bottom: 148px;
  left: 114px;
  transform: rotate(-35deg);
  transform-origin: right center;
}

.mr-fin-br {
  bottom: 148px;
  right: 112px;
  transform: rotate(35deg);
  transform-origin: left center;
  animation-delay: 0.15s;
}

@keyframes mr-fin-back {
  0%, 100% { transform: rotate(-35deg) scaleY(1); }
  50%       { transform: rotate(-22deg) scaleY(0.88); }
}

/* Nageoire droite arrière : miroir */
.mr-fin-br { animation-name: mr-fin-back-r; }

@keyframes mr-fin-back-r {
  0%, 100% { transform: rotate(35deg) scaleY(1); }
  50%       { transform: rotate(22deg) scaleY(0.88); }
}

/* ─────────────────────────────────────────────
   PLASTRON / VENTRE
───────────────────────────────────────────── */
.mr-belly {
  position: absolute;
  bottom: 130px;
  left: 50%;
  transform: translateX(-50%);
  width: 210px;
  height: 120px;
  background: linear-gradient(170deg, #e8d9b0 0%, #c8b880 60%, #a89050 100%);
  border-radius: 50% 50% 44% 44% / 55% 55% 38% 38%;
  box-shadow:
    inset 0 8px 20px rgba(255,255,220,0.2),
    inset 0 -6px 16px rgba(80,60,20,0.25);
  z-index: 3;
}

/* Sutures ventrales */
.mr-belly::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 70px;
  background: rgba(120,90,30,0.3);
  box-shadow: -35px 5px 0 rgba(120,90,30,0.2), 35px 5px 0 rgba(120,90,30,0.2);
}

/* ─────────────────────────────────────────────
   NAGEOIRES AVANT
───────────────────────────────────────────── */
.mr-fin-fl,
.mr-fin-fr {
  position: absolute;
  width: 110px;
  height: 50px;
  background: linear-gradient(130deg, #4a9a5e 0%, #2a7040 60%, #1e5530 100%);
  border-radius: 60% 15% 50% 30%;
  z-index: 5;
}

.mr-fin-fl {
  bottom: 185px;
  left: 78px;
  transform: rotate(-42deg);
  transform-origin: right 60%;
  animation: mr-fin-front-l 2.2s ease-in-out infinite;
}

.mr-fin-fr {
  bottom: 185px;
  right: 76px;
  transform: rotate(42deg);
  transform-origin: left 60%;
  animation: mr-fin-front-r 2.2s ease-in-out infinite;
  border-radius: 15% 60% 30% 50%;
}

/* Membrane / stripes on fins */
.mr-fin-fl::after,
.mr-fin-fr::after {
  content: '';
  position: absolute;
  inset: 4px 8px;
  background: repeating-linear-gradient(
    75deg,
    transparent 0px,
    transparent 7px,
    rgba(255,255,255,0.07) 7px,
    rgba(255,255,255,0.07) 8px
  );
  border-radius: inherit;
}

@keyframes mr-fin-front-l {
  0%, 100% { transform: rotate(-42deg) translateY(0); }
  40%       { transform: rotate(-28deg) translateY(-12px); }
  75%       { transform: rotate(-50deg) translateY(6px); }
}

@keyframes mr-fin-front-r {
  0%, 100% { transform: rotate(42deg) translateY(0); }
  40%       { transform: rotate(28deg) translateY(-12px); }
  75%       { transform: rotate(50deg) translateY(6px); }
}

/* ─────────────────────────────────────────────
   CARAPACE
───────────────────────────────────────────── */
.mr-shell {
  position: absolute;
  bottom: 150px;
  left: 50%;
  transform: translateX(-50%);
  width: 230px;
  height: 180px;
  z-index: 4;
}

/* Bord / jupe de la carapace */
.mr-shell-rim {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #2f6038 0%, #1e4428 60%, #163320 100%);
  border-radius: 52% 52% 46% 46% / 58% 58% 40% 40%;
  box-shadow:
    0 6px 18px rgba(0,0,0,0.55),
    inset 0 -4px 12px rgba(0,0,0,0.3);
}

/* Dôme de la carapace */
.mr-shell-dome {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 155px;
  background: linear-gradient(150deg, #4a9a5e 0%, #357048 40%, #26543a 80%, #1e4428 100%);
  border-radius: 50% 50% 44% 44% / 55% 55% 40% 40%;
  overflow: hidden;
  box-shadow: inset 0 8px 30px rgba(255,255,255,0.08);
}

/* Reflet spéculaire */
.mr-shell-dome::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 22%;
  width: 38%;
  height: 28%;
  background: radial-gradient(ellipse, rgba(200,255,220,0.18) 0%, transparent 70%);
  border-radius: 50%;
}

/* ─────────────────────────────────────────────
   ÉCAILLES DE LA CARAPACE
───────────────────────────────────────────── */
.mr-scute {
  position: absolute;
  border-radius: 45% 45% 40% 40% / 50% 50% 35% 35%;
  background: linear-gradient(150deg, #55b070 0%, #3a7a4e 50%, #2a5e3c 100%);
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.1), 0 1px 3px rgba(0,0,0,0.35);
  border: 1px solid rgba(20,70,35,0.6);
}

/* Centrale */
.mr-scute-c1 { width: 62px; height: 46px; top: 16px;  left: 50%; transform: translateX(-50%); }
.mr-scute-c2 { width: 66px; height: 48px; top: 56px;  left: 50%; transform: translateX(-50%); }
.mr-scute-c3 { width: 58px; height: 42px; top: 96px;  left: 50%; transform: translateX(-50%); }

/* Latérales gauches */
.mr-scute-l1 { width: 50px; height: 38px; top: 22px;  left: 18px;  transform: rotate(-18deg); }
.mr-scute-l2 { width: 52px; height: 40px; top: 60px;  left: 10px;  transform: rotate(-26deg); }
.mr-scute-l3 { width: 44px; height: 34px; top: 98px;  left: 16px;  transform: rotate(-14deg); }

/* Latérales droites */
.mr-scute-r1 { width: 50px; height: 38px; top: 22px;  right: 18px; transform: rotate(18deg); }
.mr-scute-r2 { width: 52px; height: 40px; top: 60px;  right: 10px; transform: rotate(26deg); }
.mr-scute-r3 { width: 44px; height: 34px; top: 98px;  right: 16px; transform: rotate(14deg); }

/* Shimmer on scutes — underwater light */
.mr-scute::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(120,255,180,0.12) 0%, transparent 55%);
  animation: mr-scute-shimmer 4s ease-in-out infinite alternate;
}

@keyframes mr-scute-shimmer {
  0%   { opacity: 0.3; }
  100% { opacity: 1; }
}

/* ─────────────────────────────────────────────
   COU
───────────────────────────────────────────── */
.mr-neck {
  position: absolute;
  bottom: 278px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 54px;
  background: linear-gradient(170deg, #4a9a5e, #357048);
  border-radius: 40% 40% 20% 20%;
  z-index: 6;
  animation: mr-neck-sway 5s ease-in-out infinite;
  transform-origin: bottom center;
}

@keyframes mr-neck-sway {
  0%, 100% { transform: translateX(-50%) rotate(-3deg); }
  50%       { transform: translateX(-50%) rotate(3deg); }
}

/* ─────────────────────────────────────────────
   TÊTE
───────────────────────────────────────────── */
.mr-head {
  position: absolute;
  bottom: 322px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 62px;
  background: linear-gradient(150deg, #5aaa6e 0%, #3d7a4e 60%, #2f5e3c 100%);
  border-radius: 46% 46% 38% 38% / 50% 50% 40% 40%;
  z-index: 7;
  box-shadow: inset 0 4px 10px rgba(255,255,255,0.07);
  animation: mr-head-look 7s ease-in-out infinite;
  transform-origin: bottom center;
}

@keyframes mr-head-look {
  0%, 100% { transform: translateX(-50%) rotate(-4deg) translateY(0); }
  30%       { transform: translateX(-50%) rotate(3deg)  translateY(-4px); }
  60%       { transform: translateX(-50%) rotate(-2deg) translateY(2px); }
}

/* Bouche / bec */
.mr-head::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 12px;
  background: linear-gradient(170deg, #2f5e3c, #1e3e28);
  border-radius: 0 0 50% 50%;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.35);
}

/* ─────────────────────────────────────────────
   YEUX
───────────────────────────────────────────── */
.mr-eye {
  position: absolute;
  top: 14px;
  width: 16px;
  height: 16px;
  background: radial-gradient(circle at 38% 35%, #a0e8b0 0%, #2a8a40 40%, #0d2a18 100%);
  border-radius: 50%;
  box-shadow:
    0 0 6px rgba(0,220,120,0.4),
    inset 0 2px 4px rgba(255,255,255,0.15);
  animation: mr-blink 5s ease-in-out infinite;
}

.mr-eye::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 5px;
  height: 5px;
  background: rgba(255,255,255,0.6);
  border-radius: 50%;
}

.mr-eye-l { left: 8px; }
.mr-eye-r { right: 8px; }

@keyframes mr-blink {
  0%, 90%, 100% { transform: scaleY(1); }
  94%            { transform: scaleY(0.08); }
  97%            { transform: scaleY(1); }
}

/* ─────────────────────────────────────────────
   NARINES
───────────────────────────────────────────── */
.mr-nose {
  position: absolute;
  top: 36px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 5px;
  background: rgba(20,60,30,0.6);
  border-radius: 50%;
  box-shadow: -8px 0 0 rgba(20,60,30,0.5), 8px 0 0 rgba(20,60,30,0.5);
}

/* ─────────────────────────────────────────────
   ALGUES décoratives (ambiance)
───────────────────────────────────────────── */
.mr-seaweed {
  position: absolute;
  bottom: 20px;
  width: 8px;
  border-radius: 4px;
  transform-origin: bottom center;
  background: linear-gradient(180deg, #1a8c3a, #0e5a24);
  z-index: 1;
}

.mr-seaweed-1 {
  left: 8%;
  height: 60px;
  animation: mr-seaweed-sway 3s ease-in-out infinite;
}

.mr-seaweed-2 {
  left: 12%;
  height: 40px;
  animation: mr-seaweed-sway 3.8s ease-in-out infinite 0.4s;
}

.mr-seaweed-3 {
  right: 9%;
  height: 55px;
  animation: mr-seaweed-sway 3.2s ease-in-out infinite 0.7s;
}

.mr-seaweed-4 {
  right: 14%;
  height: 35px;
  animation: mr-seaweed-sway 4.1s ease-in-out infinite 0.2s;
}

.mr-seaweed::before {
  content: '';
  position: absolute;
  top: 10px;
  left: -4px;
  width: 12px;
  height: 22px;
  background: inherit;
  border-radius: 50% 80% 80% 50%;
  transform: rotate(-10deg);
}

.mr-seaweed::after {
  content: '';
  position: absolute;
  top: 28px;
  right: -5px;
  width: 12px;
  height: 20px;
  background: inherit;
  border-radius: 80% 50% 50% 80%;
  transform: rotate(10deg);
}

@keyframes mr-seaweed-sway {
  0%, 100% { transform: rotate(-8deg); }
  50%       { transform: rotate(10deg); }
}

/* =====================================================================
   RESPONSIVE — TORTUE DE MER
===================================================================== */
@media only screen and (max-width: 768px) {
  .mer-wrap {
    width: 410px;
    height: 322px;
  }
  .mr-shell    { width: 168px; height: 132px; bottom: 110px; }
  .mr-shell-dome { width: 146px; height: 114px; }
  .mr-belly    { width: 154px; height: 88px; bottom: 95px; }
  .mr-fin-bl, .mr-fin-br { width: 66px; height: 32px; bottom: 108px; }
  .mr-fin-bl   { left: 84px; }
  .mr-fin-br   { right: 82px; }
  .mr-fin-fl, .mr-fin-fr { width: 80px; height: 37px; bottom: 136px; }
  .mr-fin-fl   { left: 57px; }
  .mr-fin-fr   { right: 56px; }
  .mr-neck     { width: 34px; height: 40px; bottom: 204px; }
  .mr-head     { width: 59px; height: 46px; bottom: 236px; }
  .mr-tail     { bottom: 114px; right: 119px; }
  .mr-seaweed-1 { left: 6%; }
  .mr-seaweed-2 { left: 10%; }
  .mr-seaweed-3 { right: 7%; }
  .mr-seaweed-4 { right: 12%; }
}

@media only screen and (max-width: 480px) {
  .mer-wrap {
    width: 280px;
    height: 220px;
  }
  .mr-shell    { width: 114px; height: 90px; bottom: 75px; }
  .mr-shell-dome { width: 100px; height: 78px; top: 7px; }
  .mr-belly    { width: 105px; height: 60px; bottom: 65px; }
  .mr-fin-bl, .mr-fin-br { width: 45px; height: 22px; bottom: 74px; }
  .mr-fin-bl   { left: 57px; }
  .mr-fin-br   { right: 56px; }
  .mr-fin-fl, .mr-fin-fr { width: 55px; height: 25px; bottom: 93px; }
  .mr-fin-fl   { left: 39px; }
  .mr-fin-fr   { right: 38px; }
  .mr-neck     { width: 23px; height: 27px; bottom: 139px; }
  .mr-head     { width: 40px; height: 31px; bottom: 161px; }
  .mr-eye      { width: 10px; height: 10px; top: 8px; }
  .mr-eye-l    { left: 5px; }
  .mr-eye-r    { right: 5px; }
  .mr-tail     { width: 28px; height: 11px; bottom: 78px; right: 81px; }
  .mr-shadow   { width: 130px; height: 16px; }
  .mr-scute-c1 { width: 38px; height: 28px; top: 10px; }
  .mr-scute-c2 { width: 40px; height: 30px; top: 34px; }
  .mr-scute-c3 { width: 35px; height: 26px; top: 58px; }
  .mr-scute-l1 { width: 30px; height: 23px; top: 13px; left: 11px; }
  .mr-scute-l2 { width: 32px; height: 24px; top: 36px; left: 6px; }
  .mr-scute-l3 { width: 27px; height: 21px; top: 59px; left: 10px; }
  .mr-scute-r1 { width: 30px; height: 23px; top: 13px; right: 11px; }
  .mr-scute-r2 { width: 32px; height: 24px; top: 36px; right: 6px; }
  .mr-scute-r3 { width: 27px; height: 21px; top: 59px; right: 10px; }
  .mr-seaweed-1, .mr-seaweed-2, .mr-seaweed-3, .mr-seaweed-4 { display: none; }
}