:root { --bird-color: #5D4037; }
.font-playfair { font-family: 'Playfair Display', serif; }
.fade-in-up { animation: fadeInUp 1s ease-out; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Garde‑fous mobile: empêcher le scroll horizontal ===== */
html, body { max-width: 100%; overflow-x: hidden; }
html { overscroll-behavior-x: none; }
body { touch-action: pan-y; }

/* Végétation fixe en bas, au premier plan */
.vegetation-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10rem; /* base */
  z-index: 50; /* au-dessus du contenu z-10 et des fonds z-0 */
  pointer-events: none; /* ne bloque pas les clics */
  user-select: none;

  /* Multicouches pour une répétition moins "harmonieuse" */
  background-image: url('images/fienkok-1.png'), url('images/fienkok-2.png'), url('images/fienkok-1.png');
  background-repeat: repeat-x, repeat-x, repeat-x;
  /* Tailles différentes pour casser la régularité */
  background-size: 110px auto, 140px auto, 90px auto;
  /* Décalages différents pour chaque couche */
  background-position: left 0 bottom -50px, left 60px bottom -40px, left 120px bottom 0;

  /* Adoucit la transition en haut de la végétation sans changer le premier plan */
  -webkit-mask-image: linear-gradient(to top, black 60%, transparent 100%);
  mask-image: linear-gradient(to top, black 60%, transparent 100%);
}

@media (min-width: 640px) { /* sm */
  .vegetation-bottom {
    height: 12rem;
    background-size: 120px auto, 160px auto, 100px auto;
    background-position: left 0 bottom -6px, left 80px bottom -4px, left 140px bottom 0;
  }
}

@media (min-width: 1024px) { /* lg */
  .vegetation-bottom {
    height: 16rem;
    background-size: 150px auto, 190px auto, 120px auto;
    background-position: left 0 bottom -50px, left 100px bottom -70px, left 180px bottom 0;
  }
}

/* Dégradé blanc fixe en bas pour lisibilité du texte au-dessus de la végétation */
.bottom-white-fade {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10rem; /* base, synchronisée avec la végétation */
  z-index: 40; /* sous la végétation (50) mais au-dessus du contenu (z-10) */
  pointer-events: none;
  user-select: none;
  /* Dégradé blanc -> transparent vers le haut */
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.9) 35%,
    rgba(255, 255, 255, 0.6) 65%,
    rgba(255, 255, 255, 0.0) 100%
  );
}

@media (min-width: 640px) { /* sm */
  .bottom-white-fade {
    height: 12rem;
  }
}

@media (min-width: 1024px) { /* lg */
  .bottom-white-fade {
    height: 16rem;
  }
}

/* Typography and base animations */
.font-playfair { font-family: 'Playfair Display', serif; }
.fade-in-up { animation: fadeInUp 1s ease-out; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Oiseaux animés en haut — 2 passages (2×10s), puis pause */
.birds-overlay {
  position: fixed;
  top: -100px; right: 0; bottom: 0; left: 0; /* remontée de 100px */
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  z-index: 5; /* sous le contenu (z-10), au-dessus des fonds (z-0) */
  contain: paint; /* évite que les transformations internes n'élargissent le viewport (iOS Safari) */
}

/* Sprite d'oiseau (ailes) */
.bird {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells-new.svg);
  background-size: auto 100%;
  width: 88px;
  height: 125px;
  will-change: background-position;
  image-rendering: -webkit-optimize-contrast;
  animation-name: fly-cycle;
  animation-timing-function: steps(10);
  animation-duration: 1s;         /* 1s par cycle d’ailes */
  animation-iteration-count: 20;   /* 20 cycles -> total 20s */
  animation-fill-mode: forwards;   /* rester à la dernière frame après 20s */
}

/* Variantes de vitesse/décalage mineurs pour diversité visuelle */
.bird--one   { transform: scale(0.8); }
.bird--two   { transform: scale(0.7); }
.bird--three { transform: scale(0.9); }
.bird--four  { transform: scale(0.75); }

/* Conteneur trajectoire (déplacement) */
.bird-container {
  position: absolute;
  top: 15%;
  left: -15%;
  will-change: transform;
  animation-timing-function: linear;
  animation-duration: 10s;        /* durée par passage */
  animation-iteration-count: 2;   /* 2 passages (2×10s), puis pause */
  animation-fill-mode: forwards;  /* rester à la fin du 2e passage */
}

/* Quatre trajectoires légèrement différentes pour casser l’uniformité */
/* Trajectoire 1 */
.bird-container--one { animation-name: fly-right-1; }
/* Trajectoire 2 */
.bird-container--two { animation-name: fly-right-2; top: 25%; }
/* Trajectoire 3 */
.bird-container--three { animation-name: fly-right-3; top: 35%; }
/* Trajectoire 4 */
.bird-container--four { animation-name: fly-right-4; top: 20%; }

@keyframes fly-cycle {
  100% { background-position: -900px 0; }
}

/* Les oiseaux traversent l’écran de gauche à droite en 10s */
@keyframes fly-right-1 {
  0%   { transform: translateX(-15vw) translateY(0vh) scale(0.6); }
  20%  { transform: translateX(10vw) translateY(-2vh) scale(0.65); }
  40%  { transform: translateX(35vw) translateY(1vh) scale(0.7); }
  60%  { transform: translateX(60vw) translateY(-1vh) scale(0.72); }
  80%  { transform: translateX(85vw) translateY(0vh) scale(0.72); }
  100% { transform: translateX(115vw) translateY(0vh) scale(0.72); }
}

@keyframes fly-right-2 {
  0%   { transform: translateX(-15vw) translateY(0vh) scale(0.55); }
  15%  { transform: translateX(5vw) translateY(2vh) scale(0.6); }
  35%  { transform: translateX(30vw) translateY(-2vh) scale(0.62); }
  55%  { transform: translateX(55vw) translateY(1vh) scale(0.64); }
  75%  { transform: translateX(80vw) translateY(-1vh) scale(0.64); }
  100% { transform: translateX(115vw) translateY(0vh) scale(0.64); }
}

@keyframes fly-right-3 {
  0%   { transform: translateX(-15vw) translateY(0vh) scale(0.7); }
  25%  { transform: translateX(15vw) translateY(1.5vh) scale(0.72); }
  45%  { transform: translateX(40vw) translateY(-1vh) scale(0.74); }
  65%  { transform: translateX(65vw) translateY(1vh) scale(0.76); }
  85%  { transform: translateX(90vw) translateY(0vh) scale(0.76); }
  100% { transform: translateX(115vw) translateY(0vh) scale(0.76); }
}

@keyframes fly-right-4 {
  0%   { transform: translateX(-15vw) translateY(0vh) scale(0.6); }
  20%  { transform: translateX(10vw) translateY(2vh) scale(0.62); }
  45%  { transform: translateX(38vw) translateY(-1.5vh) scale(0.66); }
  70%  { transform: translateX(68vw) translateY(0.5vh) scale(0.68); }
  90%  { transform: translateX(95vw) translateY(-0.5vh) scale(0.68); }
  100% { transform: translateX(115vw) translateY(0vh) scale(0.68); }
}

/* Végétation fixe en bas, au premier plan */
.vegetation-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10rem; /* base */
  z-index: 50; /* au-dessus du contenu z-10 et des fonds z-0 */
  pointer-events: none; /* ne bloque pas les clics */
  user-select: none;

  /* Multicouches pour une répétition moins "harmonieuse" */
  background-image: url('images/fienkok-1.png'), url('images/fienkok-2.png'), url('images/fienkok-1.png');
  background-repeat: repeat-x, repeat-x, repeat-x;
  /* Tailles différentes pour casser la régularité */
  background-size: 110px auto, 140px auto, 90px auto;
  /* Décalages différents pour chaque couche */
  background-position: left 0 bottom -50px, left 60px bottom -40px, left 120px bottom 0;

  /* Adoucit la transition en haut de la végétation sans changer le premier plan */
  -webkit-mask-image: linear-gradient(to top, black 60%, transparent 100%);
  mask-image: linear-gradient(to top, black 60%, transparent 100%);
}

@media (min-width: 640px) { /* sm */
  .vegetation-bottom {
    height: 12rem;
    background-size: 120px auto, 160px auto, 100px auto;
    background-position: left 0 bottom -6px, left 80px bottom -4px, left 140px bottom 0;
  }
}

@media (min-width: 1024px) { /* lg */
  .vegetation-bottom {
    height: 16rem;
    background-size: 150px auto, 190px auto, 120px auto;
    background-position: left 0 bottom -80px, left 100px bottom -110px, left 180px bottom 0;
  }
}

/* Dégradé blanc fixe en bas pour lisibilité du texte au-dessus de la végétation */
.bottom-white-fade {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10rem; /* base, synchronisée avec la végétation */
  z-index: 40; /* sous la végétation (50) mais au-dessus du contenu (z-10) */
  pointer-events: none;
  user-select: none;
  /* Dégradé blanc -> transparent vers le haut */
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.9) 35%,
    rgba(255, 255, 255, 0.6) 65%,
    rgba(255, 255, 255, 0.0) 100%
  );
}

@media (min-width: 640px) { /* sm */
  .bottom-white-fade {
    height: 12rem;
  }
}

@media (min-width: 1024px) { /* lg */
  .bottom-white-fade {
    height: 16rem;
  }
}


/* Recoloration des oiseaux en #5D4037 via masques CSS (navigateurs modernes) */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  /* Permet un réglage simple de la couleur */
  .birds-overlay { --bird-color: #5D4037; }

  .bird {
    /* On remplace le sprite en fond par un masque et on peint avec une couleur unie */
    background-image: none;
    background-color: var(--bird-color);

    -webkit-mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells-new.svg);
    mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells-new.svg);

    -webkit-mask-size: auto 100%;
    mask-size: auto 100%;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    will-change: -webkit-mask-position, mask-position;

    /* on garde la même cadence (10 steps sur 1s, 20 itérations = 20s) */
    animation-name: fly-cycle-mask;
    animation-timing-function: steps(10);
    animation-duration: 1s;
    animation-iteration-count: 20;
    animation-fill-mode: forwards;
  }

  /* Le cycle d'ailes anime la position du masque au lieu du background */
  @keyframes fly-cycle-mask {
    100% {
      -webkit-mask-position: -900px 0;
      mask-position: -900px 0;
    }
  }
}


/* Halo radial discret uniquement derrière la photo (opacité 37%) */
.portrait-gradient {
  position: relative; /* ancre du halo */
  z-index: 0;        /* halo en dessous du contenu interne */
  display: inline-block; /* le conteneur épouse la taille de l'image, centré par text-align */
}

.portrait-gradient::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1600px; /* large pour éviter toute coupure visible */
  height: 1600px;
  pointer-events: none;
  z-index: -1; /* sous l'image et tout le contenu du bloc */
  opacity: 0.37; /* opacité demandée */
  /* Centre du halo au centre exact de la photo */
  background: radial-gradient(
    circle 800px at 50% 50%,
    #ecf2d6 0%,
    rgba(236, 242, 214, 0.55) 28%,
    rgba(236, 242, 214, 0.32) 48%,
    rgba(236, 242, 214, 0.14) 62%,
    rgba(236, 242, 214, 0) 72%
  );
}

.portrait-gradient img {
  display: block; /* supprime l’espace inline sous l’image */
  margin: 0 auto;
  position: relative;
  z-index: 1; /* au-dessus du halo */
}


/* ====== Ajouts pour l'issue: police Lindsey, séparateur flottant, remontée du main ====== */
/* Police script pour le titre "Célébration de Vie" (Adobe Fonts) */
.font-lindsey { font-family: "lindsey-signature", sans-serif !important; font-weight: 400; font-style: normal; }

/* Séparateur flottant (remplace la barre primaire) */
.floating-separator {
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 72px; /* x3 par rapport à 24px */
  width: auto;
  opacity: 0.95;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.12));
  animation: gentle-float 3.5s ease-in-out infinite;
  pointer-events: none; /* purement décoratif */
  user-select: none;
}
@keyframes gentle-float {
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-6px) rotate(-0.6deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* Remonter le main d'environ 70px */
.lift-main { transform: translateY(-70px); }


/* Listes à puces avec marqueurs à droite (pour les blocs de gauche de la timeline) */
/* Par défaut (mobile), on ne change rien. L'effet s'applique à partir de md (>=768px) */
@media (min-width: 768px) {
  .list-rtl { 
    direction: rtl;                 /* place le marqueur (puce) à droite */
    list-style-position: inside;    /* la puce reste dans la boîte */
    padding-left: 0;                /* enlève le retrait gauche */
    padding-right: 1.25rem;         /* ~ pl-5 côté droit */
  }
  .list-rtl > li {
    direction: ltr;                 /* contenu en lecture normale */
    text-align: right;              /* texte aligné vers la ligne centrale */
  }
}