/*
Theme Name: Hello La Fourmilière Child
Theme URI: https://lafourmilie.re/
Description: Child theme minimal basé sur Hello Elementor, optimisé pour les layouts Elementor + JS custom.
Author: Juju / La Fourmilière
Author URI: https://lafourmilie.re/
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-lafourmiliere-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/* ============================
   Fond global + grain
   ============================ */

html,
body {
  overflow-x: hidden;
}

body {
  background-color: #f9f5f2;

  /* 1er calque : voile de couleur (atténue le bruit)
     2e calque : bruit SVG "fort" */
  background-image:
    linear-gradient(
      rgba(249, 245, 242, 0.80),
      rgba(249, 245, 242, 0.80)
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='turbulence' baseFrequency='1.4' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23noise)' fill='black'/%3E%3C/svg%3E");

  /* le 1er background (le dégradé) couvre tout, le 2e est le motif */
  background-size:
    auto,
    200px 200px;
}

/* IMPORTANT : on neutralise l'ancien overlay s'il traîne encore quelque part */
body::after {
  content: none !important;
}

/* ============================
   Grain local sur un bloc
   ============================ */

.paper-grain {
  position: relative;
  overflow: hidden;
}

.paper-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  opacity: 0.22; /* intensité du grain sur ce bloc */

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='turbulence' baseFrequency='1.4' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23noise)' fill='black'/%3E%3C/svg%3E");
  background-size: 200px 200px;

  /* si tu veux que le grain se fonde mieux :
     mix-blend-mode: multiply;
  */
  z-index: 0;
}

/*-----------------------------------
 SCROLLBAR
-----------------------------------*/

/* Scrollbar général */
::-webkit-scrollbar {
  width: 15px;
  background: #e6e0da;
}

/* Le rail (background du scroll) */
::-webkit-scrollbar-track {
  background: #e6e0da;
}

/* Le "thumb" (partie mobile) */
::-webkit-scrollbar-thumb {
  background: #222222;
  border: 2px solid #c6ad72;
  min-height: 24px;
  transition: background 0.3s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* Survol : thumb plus foncé */
::-webkit-scrollbar-thumb:hover {
  background: #DDD9C3;
}

/* Firefox (scrollbar moderne, pas tous navigateurs) */
html {
  scrollbar-width: small;
  scrollbar-color: #222222 #e6e0da;
}

/* ============================
   FOOTER
   ============================ */

.fft-banner {
  position: relative;
  width: 100vw;                /* plein écran */
  margin-left: 50%;
  transform: translateX(-50%); /* recentre dans Elementor */

  background: transparent;

  /* typographie fluide */
  font-size: clamp(4rem, 11vw, 15rem);
  line-height: 1;
  color: #000;              /* couleur Fantine */
  display: flex;
  align-items: flex-end;       /* colle le texte en bas */
  justify-content: center;     /* centre horizontalement */
  overflow: visible;           /* pas de coupe */
}

.fft-banner span {
  display: inline-block;
  white-space: nowrap;
  line-height: 1;
}

/* ============================
   TITRE
   ============================ */

/* Titre principal */
.hero-title {
  font-family: "OpenSans", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.1;
}

/* Sous-partie en script / italique */
.hero-title .hero-sub {
  display: block; /* pour forcer la ligne en dessous */
  font-family: "Bodoni Moda", Sans-serif;
  font-weight: normal;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}

/* Trait avant le surtitre */
.subtitle-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.subtitle-line::before {
  content: "";
  width: 20px;
  height: 1px;
  background-color: #000; /* couleur bordeaux */
}

/* ============================
   LOTTIE
   ============================ */

.lottie-container {
  line-height: 0;
  height: fit-content !important;
  max-height: 100vh;   /* sécurité sur mobile */
}