/* =========================================================
  sections.css — Premium cinematic evolution + custom BG per section
  - HERO
  - Aside note
  - Final + footer
========================================================= */


/* =========================================================
  0) GLOBAL RHYTHM + CUSTOM SECTION BACKGROUNDS
  - Principe: chaque section peut surcharger :
    --section-bg, --section-ink, --section-surface, --section-stroke
  - Override possible via:
    - inline style: style="--section-bg: ...;"
    - classes utilitaires: .bg-*
========================================================= */
:root{
  /* Rythmes */
  --section-pad-y: clamp(56px, 6vw, 92px);
  --section-pad-x: clamp(18px, 4vw, 44px);
  --content-max: 1120px;

  /* Surfaces (palette existante) */
  --glass-bg: rgba(249,219,189,.08);
  --glass-stroke: rgba(249,219,189,.14);
  --glass-shadow: 0 18px 70px rgba(69,9,32,.35);

  --hairline: rgba(249,219,189,.12);

  /* =========================
     DEFAULTS (tu peux les overrider par section)
  ========================= */
  --section-bg-default: transparent;
  --section-ink-default: inherit;
  --section-surface-default: var(--glass-bg);
  --section-stroke-default: var(--glass-stroke);
}

/* RESET SECTIONS SPACING */
section,
.hero,
.final,
.footer{
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

/* =========================================================
  0.1) APPLY "SECTION THEME" (generic)
  - Toute section peut définir:
    --section-bg, --section-ink, --section-surface, --section-stroke
  - Important: on n'impose pas à "section" globalement si tu n'en veux pas,
    mais on te donne un hook propre à activer quand tu veux.
========================================================= */
section{
  /* Hooks (par défaut neutres) */
  background: var(--section-bg, var(--section-bg-default));
  color: var(--section-ink, var(--section-ink-default));
}

/* =========================================================
  1) HERO — "Chapter cover" + focus zone
========================================================= */
.hero{
  position: relative;
  min-height: 100svh; /* stable */
  padding-top: 64px;  /* si tu veux “compenser” la nav */
  display:grid;
  align-items:center;
  overflow:hidden;

  /* ✅ Background pilotable */

  color: var(--section-ink, rgba(249,219,189,.92));

  padding-left: var(--section-pad-x);
  padding-right: var(--section-pad-x);
}

.hero__media{
  position:absolute;
  inset:0;
	object-position: center bottom; 
  z-index:0;
}

.hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
	object-position: center bottom; 
  z-index: 0;
}

/* ✅ Bande floue au-dessus de la vidéo (visible sur mobile + PC) */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index: 1;
  pointer-events:none;

  /* voile léger + blur */
  background: rgba(15,16,21,0.22);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);

  /* ✅ on limite l'effet à la partie haute (bande) */
  mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 28%,
    rgba(0,0,0,0) 62%
  );
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 28%,
    rgba(0,0,0,0) 62%
  );
}

/* Le contenu passe au-dessus */
.hero__content{
  position: relative;
  z-index: 2;
}


.hero__top{
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}

.hero__cta{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:20px;
}

.hero__play{
  position:absolute;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  border-radius:999px;
  padding:12px 16px;
  border:1px solid rgba(249,219,189,.22);
  background: rgba(69,9,32,.50);
  color: rgba(249,219,189,.92);
  cursor:pointer;
  display:inline-flex;
  gap:10px;
  align-items:center;
  box-shadow: 0 14px 40px rgba(0,0,0,.22);
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
  will-change: transform;
}
.hero__play:hover{
  transform: translateX(-50%) translateY(-2px);
  background: rgba(69,9,32,.62);
  border-color: rgba(249,219,189,.30);
}
.hero__play:active{
  transform: translateX(-50%) translateY(0px);
}

/* =========================================================
  2) ASIDE NOTE — "Inset boxed"
========================================================= */
.asideNote{
  border-radius: var(--radius-lg);

  /* ✅ pilotable */
  border:3px solid var(--section-stroke, rgba(165,56,96,.20));
  background: var(--section-bg, rgba(249,219,189,.92));
  color: var(--section-ink, inherit);

  padding: clamp(18px, 2.2vw, 26px);
  box-shadow: 0 14px 45px rgba(69,9,32,.12);
}
.asideNote h3{ margin:0 0 8px; }

/* =========================================================
  3) FINAL — Structure + respiration + profondeur
========================================================= */
.final{
  padding-top:0;
  padding-left: var(--section-pad-x);
  padding-right: var(--section-pad-x);
  padding-bottom: var(--section-pad-y);

  /* ✅ background pilotable */
  background: var(--section-bg, transparent);
  color: var(--section-ink, inherit);
}

.final__grid{
  max-width: var(--content-max);
  margin: 0 auto;

  display:grid;
  grid-template-columns: 1fr .82fr;
  gap: clamp(14px, 2.4vw, 22px);
  margin-top: clamp(16px, 2.6vw, 22px);
  align-items:start;
}

.card--glass{
  /* ✅ surface pilotable */
  background: var(--section-surface, rgba(249,219,189,.08));
  border-color: var(--section-stroke, rgba(249,219,189,.14));
  box-shadow: var(--glass-shadow);

  position: relative;
  overflow: hidden;
}
.card--glass::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(249,219,189,.10), transparent 42%);
}

.final__aside{
  display:grid;
  gap:12px;
}

.asideCard{
  border-radius: var(--radius-lg);
  border:1px solid var(--section-stroke, rgba(249,219,189,.14));
  background: var(--section-surface, rgba(249,219,189,.06));
  padding: clamp(16px, 2vw, 20px);
  box-shadow: 0 14px 50px rgba(69,9,32,.18);
}
.asideCard h3{ margin:0 0 8px; }

/* =========================================================
  4) FOOTER — Discret, premium
========================================================= */
.footer{
  margin-top:0;
  border-top:1px solid var(--section-stroke, rgba(249,219,189,.14));
  padding-top: 18px;
  padding-bottom: 18px;

  padding-left: var(--section-pad-x);
  padding-right: var(--section-pad-x);

  /* ✅ background pilotable */
  background: var(--section-bg, transparent);
  color: var(--section-ink, inherit);
}

/* =========================================================
  6) OPTIONAL — CLASSES UTILITAIRES (prêtes à l'emploi)
  - Tu peux les mettre sur n’importe quelle section
  - Exemple: <section class="final bg-night ink-cream">...</section>
========================================================= */
.bg-night{ --section-bg: var(--night-bordeaux); }
.bg-cream{ --section-bg: rgba(249,219,189,.92); }
.bg-glass{ --section-bg: rgba(249,219,189,.06); }

.ink-cream{ --section-ink: rgba(249,219,189,.92); }
.ink-dark{ --section-ink: rgba(21,24,30,.92); }

/* Surfaces/strokes si tu veux pousser un look par section */
.surface-glass{ --section-surface: rgba(249,219,189,.08); }
.surface-strong{ --section-surface: rgba(249,219,189,.12); }
.stroke-soft{ --section-stroke: rgba(249,219,189,.14); }
.stroke-strong{ --section-stroke: rgba(249,219,189,.22); }

/* =========================================================
  5) MOBILE — Centrage + simplification du glass
========================================================= */
@media (max-width: 768px){

  .hero{
    text-align: center;
  }

  .hero__content{
    display: flex;
    flex-direction: column;
    align-items: center;

    backdrop-filter: blur(6px);
    box-shadow: 0 18px 60px rgba(0,0,0,.18);

    padding-left: 16px;
    padding-right: 16px;
  }

  .hero__top{
    display:flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .hero__cta{
    justify-content: center;
  }

  .hero h1,
  .hero p{
    max-width: 32ch;
  }

  .final__grid{
    grid-template-columns: 1fr;
  }
}
/* BIG TEXT reveal — style SPYLT-like */
[data-animate="bigtext"]{
  position: relative;
}

.bt-lineWrap{
  display:block;
  position:relative;
  overflow:hidden;
  padding-bottom: .08em; /* petit “respire” */
}

.bt-line{
  display:block;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-style: flat;
}

/* La “bar” derrière le texte (l’effet punch visuel) */
.bt-bar{
  position:absolute;
  left:-2%;
  right:-2%;
  top: 56%;
  height: 0.78em;        /* ajuste selon ta typo */
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  border-radius: .16em;
  opacity: .95;
  z-index: 0;

  /* couleur par défaut (remplace par ton token/palette) */
  background: rgba(255,255,255,.14);
}

/* le texte passe au-dessus de la bar */
.bt-line{
  position:relative;
  z-index:1;
}







/* =========================================================
  HERO — Vignettes (fixes écran, bas droite) — INTERACTIVES
========================================================= */

.hero{ position: relative; overflow:hidden; }

/* conteneur en bas à droite */
.hero__thumbs{
  position: fixed;
  right: 100px;
  bottom: 30px;
  display:flex;
  flex-direction: column;
  gap: 20px;
  z-index: 3;

  /* ⚠️ Important : cliquable */
  pointer-events: auto;
}

/* lien = vignette */
.hero__thumb{
  width: 200px;
  height: 100px;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.28);

  display:block;
  position: relative;
  overflow:hidden;

  transform: translate3d(0,-3px,0) scale(1.035);
  will-change: transform, box-shadow;

  transition:
    transform .55s cubic-bezier(.18,.89,.32,1.28), /* inertie */
    box-shadow .45s cubic-bezier(.22,.61,.36,1);
}
/* Images (face principale) */
.hero__thumb--1{ background: url("../media/avantagesfiscaux001.webp") center/cover no-repeat; }
.hero__thumb--2{ background: url("../media/avantagesfiscaux003.webp") center/cover no-repeat; }

/* Languette blanche 20px qui remonte “de derrière” */
.hero__thumb::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height: 35px;
  background:#bf6d78;
  border-radius: 0 0 14px 14px;

  transform: translate3d(0,110%,0);
  transition: transform .55s cubic-bezier(.16,1,.3,1);
  will-change: transform;

  z-index:1;
}


.thumb__label{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:40px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:14px;
  font-weight:600;
  letter-spacing:.3px;
  color:#fff;

  opacity:0;
  transform: translate3d(0,6px,0);
  transition:
    opacity .25s ease,
    transform .45s cubic-bezier(.16,1,.3,1);

  z-index:2;
  pointer-events:none;
}

.hero__thumb:hover::after,
.hero__thumb:focus-visible::after{
  transform: translate3d(0,0,0);
}

.hero__thumb:hover .thumb__label,
.hero__thumb:focus-visible .thumb__label{
  opacity:1;
  transform: translate3d(0,0,0);
}


/* Légende apparaît (léger délai pour “premium”) */
.hero__thumb:hover .thumb__label,
.hero__thumb:focus-visible .thumb__label{
  opacity: 1;
  transform: translate3d(0,0,0);
  transition-delay: .06s;
}

/* Optionnel : focus ring discret (accessibilité) */
.hero__thumb:focus-visible{
  box-shadow:
    0 26px 70px rgba(0,0,0,.38),
    0 0 0 2px rgba(240,241,245,.55),
    0 0 0 4px rgba(181,74,86,.35);
}

/* Reduced motion : pas de mouvement, juste affichage immédiat */
@media (prefers-reduced-motion: reduce){
  .hero__thumb{
    transition: none;
  }
  .hero__thumb::after{
    transition: none;
  }
  .thumb__label{
    transition: none;
  }
  .hero__thumb:hover,
  .hero__thumb:focus-visible{
    transform: none;
  }
  .hero__thumb:hover::after,
  .hero__thumb:focus-visible::after{
    transform: translate3d(0,0,0);
  }
  .hero__thumb:hover .thumb__label,
  .hero__thumb:focus-visible .thumb__label{
    opacity: 1;
    transform: none;
  }
}

/* Mobile: on masque comme avant (tu peux aussi choisir de les garder) */
@media (max-width: 900px){
  .hero__thumbs{ display:none; }
}