/* ============================================================================
   PREMIUM UPLIFT — uplift "agence haut de gamme" pour les pages publiques.
   Charg� apr�s style.css � surcharge les d�fauts AI-cheap.
   N'affecte PAS la conf BusinessSettings (couleurs/fonts par tenant).
   ============================================================================ */


/* ============================================================
   ACTION 1 � HERO cinematic (vire text-shadow + vignette directionnelle)
   ============================================================ */

.hero {
  position: relative;
  min-height: 100dvh;
  padding: 8rem 0 6rem;
  display: flex;
  align-items: center;
  /* PAS de background-image !important ici : laisse l'inline style du template
     (qui contient l'URL R2 + l'overlay configure par le tenant) prendre le dessus.
     L'!important precedent ecrasait silencieusement l'image hero du tenant. */
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Vire le text-shadow noir basique sur le titre h�ro */
.hero h1 {
  text-shadow: none !important;
  letter-spacing: -0.015em;
  line-height: 1.05;
}

/* Eyebrow tag �ditorial autour du .subtitle existant */
.hero .subtitle {
  display: inline-block;
  padding: 0.45rem 1rem !important;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,.06);
  font-size: 0.68rem !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase;
  margin-bottom: 1.8rem !important;
}

/* Grain l�ger sur le h�ro � texture papier */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* S�curit� : le container du h�ro reste au-dessus du grain */
.hero .container { position: relative; z-index: 2; }


/* ============================================================
   ACTION 2 � Bezel/Doppelrand sur cards (depth premium)
   ============================================================ */

.prestation-card {
  position: relative;
  background: linear-gradient(145deg,
    rgba(255,255,255,.96) 0%,
    rgba(253,247,236,.96) 100%);
  border: 1px solid rgba(74,55,40,.06) !important;
  border-radius: 24px !important;
  box-shadow:
    0 1px 2px rgba(74,55,40,.04),
    0 12px 32px -16px rgba(74,55,40,.12),
    inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform 600ms cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 600ms cubic-bezier(0.32, 0.72, 0, 1);
}

.prestation-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 2px rgba(74,55,40,.04),
    0 24px 48px -20px rgba(74,55,40,.18),
    inset 0 1px 0 rgba(255,255,255,.7);
}

/* Inner highlight concentric */
.prestation-card::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 20px;  /* calc(24px - 4px) */
  border: 1px solid rgba(201,169,97,.08);
  pointer-events: none;
  z-index: 0;
}

.prestation-card > * { position: relative; z-index: 1; }

.temoignage-card {
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(74,55,40,.05) !important;
  border-radius: 20px !important;
  box-shadow:
    0 1px 2px rgba(74,55,40,.03),
    0 8px 24px -16px rgba(74,55,40,.08) !important;
  backdrop-filter: blur(20px);
  transition: transform 600ms cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 600ms cubic-bezier(0.32, 0.72, 0, 1);
}

.temoignage-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 2px rgba(74,55,40,.04),
    0 16px 40px -16px rgba(74,55,40,.14) !important;
}


/* ============================================================
   ACTION 3 � �toiles SVG (g�r� dans index.html, pas de CSS)
   Le CSS ci-dessous est juste un fallback pour les �toiles unicode
   au cas o� on garde l'ancien template. � vire d�s qu'on passe en SVG.
   ============================================================ */

.temoignage-stars {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  color: var(--gold-accent);
}


/* ============================================================
   ACTION 4 � Eyebrow tags + rythme spatial macro
   ============================================================ */

.eyebrow {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(201,169,97,.35);
  border-radius: 999px;
  background: rgba(201,169,97,.06);
  color: var(--gold-accent);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

/* Macro-whitespace � sections respirent */
.section-bio,
.section-concretement,
.section-pilliers,
.section-prestations,
.section-temoignages,
.section-portrait {
  padding: 9rem 0 !important;
}

@media (max-width: 768px) {
  .section-bio,
  .section-concretement,
  .section-pilliers,
  .section-prestations,
  .section-temoignages,
  .section-portrait {
    padding: 5rem 0 !important;
  }
  .hero {
    padding: 6rem 1rem 4rem !important;
    min-height: 92dvh;
  }
}

/* Tracking serr� sur tous les H2 �ditoriaux */
.bio-title,
.prestations-title,
.temoignages-title,
.pilliers-title,
.concretement-title {
  letter-spacing: -0.015em !important;
  line-height: 1.15 !important;
}


/* ============================================================
   ACTION 5 � Scroll reveal �ditorial
   (le JS associ� est dans base.html)
   ============================================================ */

.reveal-init {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition: opacity 1000ms cubic-bezier(0.32, 0.72, 0, 1),
              transform 900ms cubic-bezier(0.32, 0.72, 0, 1),
              filter 800ms cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform, opacity, filter;
}

.reveal-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Staggered children pour les grids */
.prestations-grid .prestation-card:nth-child(1) { transition-delay: 0ms; }
.prestations-grid .prestation-card:nth-child(2) { transition-delay: 80ms; }
.prestations-grid .prestation-card:nth-child(3) { transition-delay: 160ms; }
.prestations-grid .prestation-card:nth-child(4) { transition-delay: 240ms; }

.temoignages-grid .temoignage-card:nth-child(1) { transition-delay: 0ms; }
.temoignages-grid .temoignage-card:nth-child(2) { transition-delay: 100ms; }
.temoignages-grid .temoignage-card:nth-child(3) { transition-delay: 200ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal-init {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}


/* ============================================================
   BONUS � Boutons CTA premium (button-in-button trailing icon)
   N'�crase pas les couleurs si BusinessSettings personnalise
   ============================================================ */

.btn-primary.btn-large {
  border-radius: 999px;
  padding: 1rem 1.4rem 1rem 1.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all 400ms cubic-bezier(0.32, 0.72, 0, 1);
}

.btn-primary.btn-large::after { display: none !important; }
.btn-primary.btn-large:hover::after { display: none !important; }

.btn-primary.btn-large:active {
  transform: scale(0.98);
}

/* HERO PREMIUM : tout le bloc retire (animations, orbes, fleur, wave,
   scroll, gradient anime, vignette, etc) - le hero respecte strictement
   les parametres tenant via le style inline de la section.
   Demande user : 'fait en sorte que mon hero soit en accord avec mes
   parametres dans parametres accueil' + 'cest une animation inutile'. */