/*
 Theme Name:   Kadence Enfant
 Description:  Thème enfant sur la base de Kadence pour le site de l'Agence Bivuak
 Author:       Agence Bivuak
 Template:     kadence
 Version:      2.0.0
*/


/* ==========================================================================
   VARIABLES & RESET
   ========================================================================== */

:root {
  --forest:      #1a5c45;
  --forest-deep: #0e3d2e;
  --forest-light: #2a7a5e;
  --forest-glow: #3adf97;
  --dark:        #010101;
  --dark-30: rgba(0, 0, 0, 0.3);
  --dark-card:   #111111;
  --white:       #ffffff;
  --white-05:    rgba(255, 255, 255, 0.05);
  --white-30:    rgba(255, 255, 255, 0.3);
  --white-60:    rgba(255, 255, 255, 0.6);
  --green-mid:       #03624c;
  --bg-deep:         #161616;
  --bg-dark:         #111111;
  --bg-card:         #1c1c1c;
  --text-white:      #fcfcfc;
  --text-muted:      #999999;
  --text-soft:       #666666;
  --border-subtle:   rgba(255,255,255,0.08);
  --transition:      0.3s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--dark);
  color: var(--white);
  font-family: "DM Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}


/* ==========================================================================
   KEYFRAMES
   ========================================================================== */

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.8); }
}

@keyframes fpulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.8); }
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
/* Fade up générique */
.anim-fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.anim-fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade latéral depuis la gauche */
.anim-fade-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.anim-fade-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Fade latéral depuis la droite */
.anim-fade-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.anim-fade-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale in pour les cellules de la mosaïque */
.anim-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.anim-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Ligne verte qui se déploie */
.anim-line {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.anim-line.visible {
  transform: scaleX(1);
}

/* Délais pour les séquences (stagger) */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }
.delay-7 { transition-delay: 0.7s; }
.delay-8 { transition-delay: 0.8s; }

/* === HEADER STICKY === */
#masthead {
  transition: background 0.5s ease, backdrop-filter 0.5s ease;
}

#masthead.is-scrolled {
  background: rgba(10, 10, 10, 0.9) !important;
  
  border-bottom: 1px solid rgba(255,255,255,0.05);
}


/* === STATS compteur === */
.bivuak-stat-number {
  transition: opacity 0.6s;
}


/* ==========================================================================
   KADENCE — OVERRIDES GLOBAUX
   ========================================================================== */

.entry-content-wrap {
  padding: 0;
}

.bivuak-homepage {
  padding: 0 !important;
  margin: 0 !important;
}

.kb-row-layout-id602_d7d481-0a > .kt-row-column-wrap {
  padding: 0 !important;
}

.kb-row-layout-id608_32ab9f-d4 {
  padding: 0 !important;
}

.kb-row-layout-id608_e86866-2c {
  padding: 0 !important;
}

.kt-row-column-wrap > .kadence-column608_502a8b-9d {
  align-self: auto !important;
}

#block-12,
#block-13 {
  font-family: "DM Sans";
  font-size: 11px;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

   #masthead {
    background-color: var(--dark-30)!important;
   }

/* ==========================================================================
   COMPOSANTS TRANSVERSAUX
   ========================================================================== */

/* Label vertical */
.vertical-label {
  font-family: "Space Mono", monospace;
  font-size: 10px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.1);
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Texte avec bordure gauche verte */
.texte2021 {
  padding-left: 20px;
  border-left: 4px solid var(--forest-glow);
}

/* Bloc texte avec tiret avant */
.bloctext {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Space Mono", monospace;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--white);
  padding-left: 0;
}

.bloctext::before {
  content: "";
  width: 24px;
  height: 3px;
  background: var(--forest-glow);
  flex-shrink: 0;
}

/* Dot animé */
.pulse {
  width: 8px;
  height: 8px;
  background: var(--forest-glow);
  border-radius: 50%;
  animation: pulse 2s infinite;
}


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

footer {
  background-color: var(--dark-card);
  color: var(--white);
  padding: 20px;
}

footer h2,
footer h3 {
  margin: 0;
  line-height: 0;
}

footer h1 {
  font-size: 16px;
  padding-bottom: 4px;
}

footer h2 {
  font-size: 14px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: bold;
}

footer h3 {
  font-size: 12px;
  font-weight: normal;
}


/* ==========================================================================
   PAGE ACCUEIL — SECTIONS GÉNÉRALES
   ========================================================================== */

/* Mosaïque */
.bivuak-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 4px;
  height: 100vh;
  padding: 4px;
}

.bivuak-mosaic .cell {
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.bivuak-mosaic .cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10, 10, 10, 0.8));
  z-index: 1;
}

.bivuak-mosaic .cell:hover {
  transform: scale(1.02);
  z-index: 2;
}

.bivuak-mosaic .cell-label {
  position: relative;
  z-index: 2;
  font-family: "Space Mono", monospace;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--white-30);
  transition: color 0.4s;
}

.bivuak-mosaic .cell:hover .cell-label {
  color: var(--forest-glow);
}

.bivuak-mosaic .cell-1 {
  grid-row: span 2;
  background-image: url("https://fresh.agence-bivuak.com/wp-content/uploads/2026/03/creation-site-web-vallee-arve-haute-savoie.webp");
  background-size: cover;
}

.bivuak-mosaic .cell-1::before {
  background: linear-gradient(135deg, rgba(22, 40, 34, 0.85), rgba(26, 61, 48, 0.8));
}

.bivuak-mosaic .cell-3 {
  grid-row: span 2;
  background-image: url("https://fresh.agence-bivuak.com/wp-content/uploads/2026/03/creation-carte-de-visite-vallee-arve-haute-savoie-1.webp");
  background-size: cover;
}

.bivuak-mosaic .cell-3::before {
  background: linear-gradient(135deg, rgba(26, 26, 26, 0.85), rgba(34, 34, 34, 0.8));
}

.bivuak-mosaic .cell-4 {
  background-image: url("https://fresh.agence-bivuak.com/wp-content/uploads/2026/03/creation-contenus-gestion-des-reseaux-sociaux-haute-savoie.webp");
  background-size: cover;
}

.bivuak-mosaic .cell-4::before {
  background: linear-gradient(-134deg, rgba(16, 53, 46, 0.95), rgba(38, 38, 38, 0.9));
}

.bivuak-mosaic .cell-5 {
  background-image: url("https://fresh.agence-bivuak.com/wp-content/uploads/2026/03/agence-evenementielle-incentive-haute-savoie.webp");
  background-size: cover;
}

.bivuak-mosaic .cell-5::before {
  background: linear-gradient(70deg, rgba(26, 61, 48, 0.8), rgba(16, 16, 16, 0.9));
}

/* Citation */
.bivuak-quote {
  width: 100%;
  padding: 140px 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: var(--forest-deep);
}

.bivuak-quote::before {
  content: '"';
  position: absolute;
  font-family: "Sora", sans-serif;
  font-size: 400px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.02);
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  line-height: 1;
  pointer-events: none;
}

.bivuak-quote-inner {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

.bivuak-quote-text {
  font-family: "Sora", sans-serif;
  font-size: clamp(24px, 3.2vw, 44px);
  font-weight: 200;
  line-height: 1.4;
  letter-spacing: -1px;
  color: var(--white);
  margin: 0 0 32px;
}

.bivuak-quote-text strong {
  font-weight: 700;
  color: var(--forest-glow);
}

.bivuak-quote-author {
  font-family: "Space Mono", monospace;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--white-30);
}

/* Stats */
.bivuak-stats {
  width: 100%;
  padding: 60px 8%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  border-bottom: 1px solid var(--white-05);
}

.bivuak-stat {
  text-align: center;
}

.bivuak-stat-number {
  font-family: "Sora", sans-serif;
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -2px;
  color: var(--forest-light);
  line-height: 1;
}

.bivuak-stat-label {
  font-family: "Space Mono", monospace;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--white-30);
  margin-top: 8px;
}

/* CTA Homepage */
.bivuak-cta {
  width: 100%;
  padding: 120px 8%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.bivuak-cta-content h2 {
  font-family: "Sora", sans-serif;
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1.05;
  color: var(--white);
  margin: 0 0 16px;
}

.bivuak-cta-content h2 span {
  color: var(--forest-light);
}

.bivuak-cta-content p {
  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  color: var(--white-30);
  max-width: 480px;
  margin: 0;
  line-height: 1.7;
}

.bivuak-cta-button {
  display: inline-block;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 16px 40px;
  background: var(--forest);
  color: var(--white);
  border: none;
  border-radius: 6px;
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: all 0.4s;
}

.bivuak-cta-button:hover {
  background: var(--forest-light);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(42, 122, 94, 0.3);
  color: var(--white);
}

/* Podcast */
.podcast-banner {
  width: 100%;
  min-height: 600px;
  padding: 80px 5%;
  background: var(--dark-card);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 60px;
  border-top: 1px solid var(--white-05);
  border-bottom: 1px solid var(--white-05);
}

.podcast-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(165deg, transparent 30%, rgba(42, 122, 94, 0.08) 50%, transparent 70%),
    linear-gradient(195deg, transparent 40%, rgba(58, 223, 151, 0.04) 60%, transparent 80%);
  pointer-events: none;
}

.podcast-left {
  position: relative;
  z-index: 2;
  flex: 1;
  min-width: 320px;
  max-width: 600px;
}

.podcast-label {
  font-family: "Space Mono", monospace;
  font-size: 10px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--forest-glow);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.podcast-title {
  font-family: "Sora", sans-serif;
  font-size: clamp(40px, 8vw, 72px);
  font-weight: 800;
  letter-spacing: -2px;
  color: var(--white);
  line-height: 1;
  margin-bottom: 16px;
}

.podcast-title span {
  color: var(--forest-light);
}

.podcast-subtitle {
  font-size: 17px;
  line-height: 1.7;
  color: var(--white-60);
  margin-bottom: 32px;
}

.podcast-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.podcast-link {
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  font-family: "Space Mono", monospace;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: all 0.3s;
}

.podcast-link:hover {
  border-color: var(--forest-light);
  color: var(--white);
  background: rgba(42, 122, 94, 0.1);
}

.podcast-link.primary {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--white);
}

.podcast-player {
  position: relative;
  z-index: 2;
  flex: 1;
  min-width: 320px;
  max-width: 500px;
  width: 100%;
}

.podcast-player iframe {
  width: 100% !important;
  height: 450px !important;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}


/* ==========================================================================
   PAGES EXPERTISES — STRUCTURE COMMUNE
   ========================================================================== */

.bivuak-service-section {
  position: relative;
  border-bottom: 1px solid var(--white-05);
}

.bivuak-service-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--forest-glow), var(--forest-light), transparent);
  z-index: 100;
}

.bivuak-service-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 80px 48px;
}

.service-hero-section {
  position: relative;
}

.service-hero-section::after,
.sub-service-row::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--forest-glow), var(--forest), transparent);
  z-index: 40;
}

.sub-service-row {
  position: relative;
}

.service-surtitre {
  display: flex !important;
  align-items: center;
  gap: 12px;
}

.service-surtitre::before {
  content: "";
  width: 40px;
  height: 2px;
  background: var(--forest-light);
  flex-shrink: 0;
}

.service-accroche {
  max-width: 540px;
}

.service-list {
  list-style: none;
  padding: 0 !important;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.service-list li {
  font-family: "Space Mono", monospace;
  font-size: 12px;
  color: var(--white-30);
  padding-left: 24px;
  position: relative;
  text-align: left;
}

.service-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 12px;
  height: 1px;
  background: var(--forest-light);
}

.sub-service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 32px;
}

.sub-service-tags span {
  font-family: "Space Mono", monospace;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--white-30);
  transition: all 0.3s;
}

.sub-service-tags span:hover {
  border-color: var(--forest-light);
  color: var(--white);
  background: rgba(42, 122, 94, 0.1);
}

/* CTA de page */
.service-cta {
  width: 100%;
  padding: 100px 8%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--white-05);
}

.service-cta-content h2 {
  font-family: "Sora", sans-serif;
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1.1;
  color: var(--white);
  margin: 0 0 12px;
}

.service-cta-content h2 span {
  color: var(--forest-light);
}

.service-cta-content p {
  font-size: 16px;
  color: var(--white-30);
  line-height: 1.7;
  max-width: 420px;
  margin: 0;
}

.service-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 600;
  padding: 18px 40px;
  background: var(--forest);
  color: var(--white);
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.4s;
}

.service-cta-button:hover {
  background: var(--forest-light);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(42, 122, 94, 0.3);
  color: var(--white);
}


/* ==========================================================================
   PAGES EXPERTISES — VISUELS (image de fond + dégradé)
   ========================================================================== */

/* Base commune aux blocs visuels pleine hauteur */
.service-visual {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.service-visual .placeholder-text,
.service-visual-placeholder .placeholder-text {
  font-family: "Space Mono", monospace;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.1);
}

/* Visuels avec dégradé forestier standard (45deg) */
.service-visual-services,
.service-visual-services-laptop,
.service-visual-realisations,
.service-visual-seo,
.service-visual-event,
.service-visual-mockup,
.service-visual-app,
.service-visual-abstract,
.service-visual-design,
.service-visual-sketches,
.service-visual-photography,
.service-visual-video,
.service-visual-brainstorm,
.service-visual-concert,
.service-visual-colleagues,
.service-visual-engineers,
.service-visual-partnership,
.service-visual-mountain,
.service-visual-web-realisations {
  background-size: cover;
  background-position: center;
  width: 100%;
  min-height: 100vh;
}

/* Images spécifiques par visuel */
.service-visual-services {
  background-image:
    linear-gradient(45deg, rgba(14, 61, 46, 0.65), rgba(26, 92, 69, 0.85), rgba(22, 40, 34, 0.6)),
    url("https://fresh.agence-bivuak.com/wp-content/uploads/2026/03/image-realisations-code.webp");
  height: 100%;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  opacity: 0.7;
}

.service-visual-services-laptop {
  background-image:
    linear-gradient(45deg, rgba(14, 61, 46, 0.65), rgba(26, 92, 69, 0.85), rgba(22, 40, 34, 0.6)),
    url("https://fresh.agence-bivuak.com/wp-content/uploads/2026/03/laptop-screen-mockup_37789-110.webp");
  opacity: 0.7;
}

.service-visual-realisations {
  background-image:
    linear-gradient(45deg, rgba(14, 61, 46, 0.65), rgba(26, 92, 69, 0.85), rgba(22, 40, 34, 0.6)),
    url("https://fresh.agence-bivuak.com/wp-content/uploads/2026/03/image-realisations-code.webp");
  opacity: 0.7;
}

.service-visual-seo {
  background-image:
    linear-gradient(45deg, rgba(14, 61, 46, 0.65), rgba(26, 92, 69, 0.85), rgba(22, 40, 34, 0.6)),
    url("https://fresh.agence-bivuak.com/wp-content/uploads/2026/03/Referencement-naturel.webp");
  opacity: 0.7;
}

.service-visual-event {
  background-image:
    linear-gradient(45deg, rgba(14, 61, 46, 0.65), rgba(26, 92, 69, 0.85), rgba(22, 40, 34, 0.6)),
    url("https://fresh.agence-bivuak.com/wp-content/uploads/2026/03/people-watching-concert-on-the-outdoor-scene-sunn-2026-03-17-07-13-42-utc.webp");
}

.service-visual-mockup {
  background-image:
    linear-gradient(45deg, rgba(14, 61, 46, 0.65), rgba(26, 92, 69, 0.85), rgba(22, 40, 34, 0.6)),
    url("https://fresh.agence-bivuak.com/wp-content/uploads/2026/03/168-glass-window-logo-mockup.webp");
}

.service-visual-app {
  background-image:
    linear-gradient(45deg, rgba(14, 61, 46, 0.65), rgba(26, 92, 69, 0.85), rgba(22, 40, 34, 0.6)),
    url("https://fresh.agence-bivuak.com/wp-content/uploads/2026/03/Application-Mockup-Vol-12.webp");
}

.service-visual-abstract {
  background-image:
    linear-gradient(45deg, rgba(14, 61, 46, 0.65), rgba(26, 92, 69, 0.85), rgba(22, 40, 34, 0.6)),
    url("https://fresh.agence-bivuak.com/wp-content/uploads/2026/03/e369329ca359f8fed9b55e595d54.webp");
}

.service-visual-design {
  background-image:
    linear-gradient(45deg, rgba(14, 61, 46, 0.65), rgba(26, 92, 69, 0.85), rgba(22, 40, 34, 0.6)),
    url("https://fresh.agence-bivuak.com/wp-content/uploads/2026/03/graphic-designer-creativity-editor-ideas-designer-2026-01-07-23-44-23-utc.webp");
}

.service-visual-sketches {
  background-image:
    linear-gradient(45deg, rgba(14, 61, 46, 0.65), rgba(26, 92, 69, 0.85), rgba(22, 40, 34, 0.6)),
    url("https://fresh.agence-bivuak.com/wp-content/uploads/2026/03/sketches-on-paper-in-male-hands-2026-01-08-00-06-55-utc.webp");
}

.service-visual-photography {
  background-image:
    linear-gradient(45deg, rgba(14, 61, 46, 0.65), rgba(26, 92, 69, 0.85), rgba(22, 40, 34, 0.6)),
    url("https://fresh.agence-bivuak.com/wp-content/uploads/2026/03/capturing-photo-on-digital-camera-display-screen-2026-03-18-14-50-38-utc.webp");
}

.service-visual-video {
  background-image:
    linear-gradient(45deg, rgba(14, 61, 46, 0.65), rgba(26, 92, 69, 0.85), rgba(22, 40, 34, 0.6)),
    url("https://fresh.agence-bivuak.com/wp-content/uploads/2026/03/professional-video-camera-on-tripod-with-sea-view-2026-01-06-00-49-48-utc.webp");
}

.service-visual-brainstorm {
  background-image:
    linear-gradient(45deg, rgba(14, 61, 46, 0.65), rgba(26, 92, 69, 0.85), rgba(22, 40, 34, 0.6)),
    url("https://fresh.agence-bivuak.com/wp-content/uploads/2026/03/close-up-of-diverse-colleagues-gather-brainstorm-d-2026-01-08-02-18-21-utc.webp");
}

.service-visual-concert {
  background-image:
    linear-gradient(45deg, rgba(14, 61, 46, 0.65), rgba(26, 92, 69, 0.85), rgba(22, 40, 34, 0.6)),
    url("https://fresh.agence-bivuak.com/wp-content/uploads/2026/03/people-watching-concert-on-the-outdoor-scene-sunn-2026-03-17-07-13-42-utc.webp");
}

.service-visual-colleagues {
  background-image:
    linear-gradient(45deg, rgba(14, 61, 46, 0.65), rgba(26, 92, 69, 0.85), rgba(22, 40, 34, 0.6)),
    url("https://fresh.agence-bivuak.com/wp-content/uploads/2026/03/diverse-group-of-happy-business-colleagues-brainst-2026-01-09-09-10-43-utc.webp");
}

.service-visual-engineers {
  background-image:
    linear-gradient(45deg, rgba(14, 61, 46, 0.65), rgba(26, 92, 69, 0.85), rgba(22, 40, 34, 0.6)),
    url("https://fresh.agence-bivuak.com/wp-content/uploads/2026/03/diverse-group-of-engineers-or-architects-having-a-2026-03-25-04-41-29-utc.webp");
}

.service-visual-partnership {
  background-image:
    linear-gradient(45deg, rgba(14, 61, 46, 0.65), rgba(26, 92, 69, 0.85), rgba(22, 40, 34, 0.6)),
    url("https://fresh.agence-bivuak.com/wp-content/uploads/2026/03/handshake-of-business-partners-2026-01-07-06-59-36-utc.webp");
}

.service-visual-mountain {
  background-image:
    linear-gradient(45deg, rgba(14, 61, 46, 0.65), rgba(26, 92, 69, 0.85), rgba(22, 40, 34, 0.6)),
    url("https://fresh.agence-bivuak.com/wp-content/uploads/2026/04/pic-rocheux-de-montagne-1.webp");
  opacity: 0.7;
}

.service-visual-web-realisations {
  background-image:
    linear-gradient(45deg, rgba(14, 61, 46, 0.65), rgba(26, 92, 69, 0.85), rgba(22, 40, 34, 0.6)),
    url("https://fresh.agence-bivuak.com/wp-content/uploads/2026/03/web-et-digital-realisations.webp");
  opacity: 0.7;
}

/* Visuel dégradé texte (sans image) */
.service-visual-realisations-text {
  background: linear-gradient(135deg, var(--forest-deep), var(--forest), #162822);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
}

.service-visual-realisations-text .placeholder-text {
  color: var(--white);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 1px;
}

/* Hero web */
.service-web-image-hero {
  background:
    linear-gradient(135deg, rgba(14, 61, 46, 0.8) 0%, rgba(26, 92, 69, 0.7) 50%, rgba(22, 40, 34, 0.8) 100%),
    url("https://fresh.agence-bivuak.com/wp-content/uploads/2026/03/creation-site-web-vallee-arve-haute-savoie.webp") cover/center;
}

.service-web-image-hero::before {
  background: linear-gradient(135deg, var(--forest-deep) 0%, var(--forest) 50%, #162822 100%);
}


/* ==========================================================================
   PAGE WEB & DIGITAL — SECTION FOCUS & EASE
   ========================================================================== */

.focus-hero {
  width: 100%;
  min-height: 100vh;
  background: var(--forest-deep);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 8%;
  overflow: hidden;
}

.focus-hero::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(42, 122, 94, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.focus-hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

.focus-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Space Mono", monospace;
  font-size: 11px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--forest-glow);
  margin-bottom: 40px;
  padding: 10px 24px;
  background: rgba(58, 223, 151, 0.08);
  border: 1px solid rgba(58, 223, 151, 0.2);
  border-radius: 100px;
}

.focus-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--forest-glow);
  border-radius: 50%;
  animation: fpulse 2s infinite;
  box-shadow: 0 0 12px rgba(58, 223, 151, 0.4);
}

.focus-hero h2 {
  font-family: "Sora", sans-serif;
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 28px;
}

.focus-hero h2 em {
  font-style: normal;
  color: var(--forest-glow);
}

.focus-hero-desc {
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.5);
  max-width: 600px;
  margin: 0 auto 20px;
}

.focus-divider {
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--forest-glow), var(--forest-light), var(--forest-glow), transparent);
  position: relative;
}

.focus-divider::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  filter: blur(8px);
  opacity: 0.5;
}

/* Section Ease */
.ease-section {
  width: 100%;
  background: var(--dark-card);
  padding: 100px 8%;
}

.ease-header {
  text-align: center;
  margin-bottom: 80px;
}

.ease-header-label {
  font-family: "Space Mono", monospace;
  font-size: 11px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--forest-light);
  margin-bottom: 20px;
}

.ease-header h3 {
  font-family: "Sora", sans-serif;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 700;
  letter-spacing: -1.5px;
  color: var(--white);
}

.ease-header h3 span {
  color: var(--forest-glow);
}

.ease-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

.ease-grid::before {
  content: "";
  position: absolute;
  top: 32px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, var(--forest-glow), var(--forest-light), var(--forest-light), var(--forest-glow));
  z-index: 1;
  opacity: 0.3;
}

.ease-card {
  padding: 0 24px;
  text-align: center;
}

.ease-card-dot {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--forest), var(--forest-light));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
  position: relative;
  z-index: 2;
  box-shadow: 0 8px 32px rgba(26, 92, 69, 0.3);
  transition: all 0.4s;
}

.ease-card:hover .ease-card-dot {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 16px 48px rgba(42, 122, 94, 0.4);
}

.ease-card-letter {
  font-family: "Sora", sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--white);
}

.ease-card h4 {
  font-family: "Sora", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 12px;
}

.ease-card p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--white-30);
}

.ease-conclusion {
  text-align: center;
  margin-top: 72px;
  padding-top: 40px;
  border-top: 1px solid var(--white-05);
}

.ease-conclusion p {
  font-family: "Sora", sans-serif;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 600;
  color: var(--white);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.5;
}

.ease-conclusion p em {
  font-style: normal;
  color: var(--forest-glow);
}

.ease-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 600;
  padding: 16px 36px;
  background: var(--forest);
  color: var(--white);
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.4s;
}

.ease-cta:hover {
  background: var(--forest-light);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(42, 122, 94, 0.3);
  color: var(--white);
}

/* Carte interactive */
.txt1 {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
}

.carte1:hover .txt1 {
  max-height: 100px;
  opacity: 1;
}


/* ==========================================================================
   PAGE AGENCE BIVUAK — SECTION CONVICTION & LOCALISATION
   ========================================================================== */

.conviction-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 0;
  min-height: 100vh;
  width: 100%;
  background: var(--dark);
}

.conviction-left {
  background: var(--forest-deep);
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid var(--forest-glow);
}

.conviction-left::before {
  content: '"';
  position: absolute;
  top: 20px;
  left: 40px;
  font-family: "Outfit", sans-serif;
  font-size: 300px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.03);
  line-height: 1;
}

.conviction-left blockquote {
  font-family: "Outfit", sans-serif;
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.5px;
  color: var(--white);
  position: relative;
  z-index: 2;
  padding-left: 24px;
  border-left: 4px solid var(--forest-glow);
}

.conviction-left blockquote em {
  font-style: normal;
  color: var(--forest-glow);
}

.conviction-left cite {
  display: block;
  font-family: "Space Mono", monospace;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--white-30);
  margin-top: 24px;
  position: relative;
  z-index: 2;
}

.conviction-right {
  background: var(--dark-card);
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  border-bottom: 3px solid var(--forest-glow);
}

.conviction-stat {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.conviction-stat-num {
  font-family: "Outfit", sans-serif;
  font-size: 48px;
  font-weight: 900;
  color: var(--forest-glow);
  line-height: 1;
  flex-shrink: 0;
}

.conviction-stat-text {
  font-size: 15px;
  color: var(--white-30);
  line-height: 1.5;
}

.location-map {
  position: relative;
  overflow: hidden;
  background: url("https://fresh.agence-bivuak.com/wp-content/uploads/2026/04/mini_site-economique-des-lacs-thyez-61066b8c75840.webp") center/cover no-repeat;
  min-height: 100vh;
}

.location-map::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.3);
}

.location-content {
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--dark);
}

.location-label {
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--forest-glow);
  margin-bottom: 16px;
}

.location-content h3 {
  font-family: "Outfit", sans-serif;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--white);
  margin-bottom: 16px;
}

.location-content p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--white-30);
  max-width: 440px;
}

/* Section Origin */
.origin {
  padding: 100px 48px;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 80px;
  align-items: start;
  width: 100%;
}

.origin-sidebar {
  position: sticky;
  top: 100px;
}

.origin-sidebar-label {
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--forest-glow);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.origin-sidebar-label::before {
  content: "";
  width: 20px;
  height: 3px;
  background: var(--forest-glow);
}

.origin-year {
  font-family: "Outfit", sans-serif;
  font-size: 96px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.04);
  line-height: 1;
  margin-bottom: 20px;
}

.origin-sidebar-quote {
  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  font-style: italic;
  line-height: 1.6;
  color: var(--white-30);
  padding-left: 16px;
  border-left: 4px solid var(--forest-glow);
}

.origin-content p {
  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 28px;
  max-width: 640px;
}

.origin-content p:first-child::first-letter {
  font-family: "DM Sans", sans-serif;
  font-size: 72px;
  font-weight: 900;
  float: left;
  line-height: 0.75;
  margin: 6px 16px 0 0;
  color: var(--forest-glow);
}

.origin-content p strong {
  color: var(--white);
  font-weight: 500;
}

/* Section Valeurs */
.values-section {
  border-bottom: 1px solid var(--white-05);
}

.values-header {
  padding: 60px 48px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--white);
}

.values-header::before {
  content: "";
  width: 24px;
  height: 3px;
  background: var(--forest-glow);
}

.value-band {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  border-bottom: 1px solid var(--white-05);
  transition: background 0.4s;
  cursor: default;
  min-height: 280px;
}

.value-band:hover {
  background: var(--dark-card) !important;
}

.value-left {
  padding: 60px 48px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.value-num {
  font-family: "Outfit", sans-serif;
  font-size: 72px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.04);
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.4s;
}

.value-band:hover .value-num {
  color: var(--forest-glow) !important;
}

.value-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 4px;
}

.value-title span {
  color: var(--forest-glow);
}

.value-subtitle {
  font-family: "Space Mono", monospace;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--white-30);
  margin-top: 8px;
}

.value-right {
  padding: 0;
  display: flex;
  align-items: center;
  border-left: 1px solid var(--white-05);
}

.value-right p {
  font-family: "Newsreader", serif;
  font-size: 18px;
  line-height: 1.8;
  color: var(--white-30);
  max-width: 480px;
}

/* Correctifs Kadence — page Valeurs */
.kt-row-column-wrap > .kadence-column608_502a8b-9d {
  align-self: auto !important;
}

.wp-block-kadence-column.kadence-column608_502a8b-9d.kb-section-dir-horizontal.value-left {
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-align: left !important;
}

.wp-block-kadence-column.kadence-column608_3829c9-30.kb-section-dir-horizontal.value-left {
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

.wp-block-kadence-column.kadence-column608_7e105b-b9.kb-section-dir-horizontal.value-left {
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

/* Founder links */
.founder-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.founder-link {
  display: inline-block;
  font-family: "Space Mono", monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white-30);
  padding: 12px 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  transition: all 0.3s;
  cursor: pointer;
  text-decoration: none !important;
}

.founder-link:hover {
  color: var(--forest-glow);
  border-color: var(--forest-glow);
  background: rgba(58, 223, 151, 0.05);
}


/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

@media (max-width: 1024px) {

  .ease-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
  }

  .ease-grid::before {
    display: none;
  }

  .origin {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .origin-sidebar {
    position: static;
  }

  .conviction-section {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .value-band {
    grid-template-columns: 1fr !important;
  }

  .value-right {
    border-left: none;
    border-top: 1px solid var(--white-05);
  }

  .value-left,
  .value-right {
    padding: 0;
  }

}

@media (max-width: 768px) {

  .podcast-banner {
    padding: 60px 20px;
    gap: 40px;
    text-align: center;
  }

  .podcast-label {
    justify-content: center;
  }

  .podcast-links {
    justify-content: center;
  }

  .podcast-link {
    width: 100%;
    justify-content: center;
  }

  .podcast-player iframe {
    height: 400px !important;
  }

  .bivuak-quote {
    padding: 80px 6%;
  }

  .bivuak-stats {
    grid-template-columns: repeat(2, 1fr);
    padding: 40px 6%;
    gap: 32px;
  }

  .bivuak-stat-number {
    font-size: 36px;
  }

  .bivuak-cta {
    flex-direction: column;
    gap: 40px;
    text-align: center;
    padding: 80px 6%;
  }

  .ease-section {
    padding: 60px 6%;
  }

  .ease-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .focus-hero {
    padding: 100px 6%;
    min-height: 80vh;
  }

  .service-cta {
    flex-direction: column;
    gap: 40px;
    text-align: center;
    padding: 80px 6%;
  }

  .origin {
    padding: 60px 24px;
  }

  .origin-year {
    font-size: 64px;
  }

  .origin-content p {
    font-size: 16px;
  }

  .origin-content p:first-child::first-letter {
    font-size: 48px;
  }

  .conviction-left,
  .conviction-right,
  .location-content {
    padding: 60px 24px;
  }

  .conviction-stat-num {
    font-size: 40px;
  }

  .location-content h3 {
    font-size: 28px;
  }

  .value-left,
  .value-right {
    padding: 40px 24px;
  }


  .vertical-label {
    display: none !important;
  }

  .kb-row-layout-id375_7a89e4-40 > .kt-row-column-wrap {
    padding: 10px !important;
    height: auto !important;
    min-height: 500px;
  }

  .kb-row-layout-wrap.wp-block-kadence-rowlayout.kb-row-layout-id375_7a89e4-40 {
    margin-top: 0;
    max-height: none;
  }

  .kt-row-column-wrap.kt-has-2-columns.kt-mobile-layout-row {
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .kt-inside-inner-col {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }

  .bivuak-mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, 140px);
    height: auto !important;
    gap: 4px;
    padding: 4px;
  }

  .bivuak-mosaic .cell-1,
  .bivuak-mosaic .cell-3 {
    grid-row: span 1 !important;
  }

  .bivuak-mosaic .cell {
    height: 140px;
    padding: 12px;
  }

  .bivuak-mosaic .cell-label {
    font-size: 8px;
    letter-spacing: 1px;
    line-height: 1.2;
    white-space: normal;
  }

  .kadence-column375_f8e394-14,
  .kt-inside-inner-col > .kadence-column375_f8e394-14:not(.specificity) {
    margin-left: 0 !important;
  }


  .kadence-column375_e2eb1b-cd,
  .kadence-column375_f041bd-66 > .kt-inside-inner-col {
    min-height: 5vh !important;
    margin-top: 5vh;
  }

  footer h1 {
    font-size: 12px;
    padding-bottom: 1px;
  }

  footer h2 {
    font-size: 10px;
    padding-top: 1px;
    padding-bottom: 1px;
    font-weight: bold;
  }

  footer h3 {
    font-size: 8px;
    font-weight: normal;
  }

  .site-middle-footer-inner-wrap {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px;
  }

  .site-footer-section {
    width: 100% !important;
    max-width: 100% !important;
  }

  .service-visual-brainstorm {
    height: 100vh !important;
    min-height: 100vh !important;
    width: 100% !important;
    min-width: 100% !important;
    display: block !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  .service-visual-design,
  .service-visual-services {
    height: 100vh !important;
    min-height: 100vh !important;
    width: 100% !important;
    min-width: 100% !important;
    display: block !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  .sub-service-tags {
    margin-left: 20px;
    margin-right: 10px;
  }

}

.single-content .wp-block-group {
    margin-bottom: 0 !important;
}

.nav-item {
  display: block;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.nav-item:hover,
.nav-item.active {
  border-left-color: #f97316;
  color: #f97316;
  background: rgba(249, 115, 22, 0.08);
}


.service-visual-web-realisations{ 
    background-size: cover;
  background-position: center;
  width: 100%;
  min-height: 100vh;
}



.section-detail {
  max-width: 1280px;
  margin: 0 auto;
  padding: 6rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}

.detail-intro .section-label {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--forest-light);
  margin-bottom: 1rem;
  display: block;
}

.detail-intro h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 700;
  color: var(--text-white);
  line-height: 1.3;
  margin-bottom: 1.5rem;
}

.detail-intro p {
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}



.detail-stats {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding-top: 1rem;
}

.stat-block {
  border-left: 3px solid var(--forest-light);
  padding-left: 1.5rem;
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--text-white);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.85rem;
  color: var(--text-soft);
}

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
    
 
    /* ─── SÉPARATEUR ──────────────────────────────────────────────────────── */
    .section-divider {
      border: none;
      border-top: 1px solid var(--border-subtle);
      max-width: 1280px;
      margin: 0 auto;
    }
 
    /* ─── EN-TÊTE DE SECTION ─────────────────────────────────────────────── */
    .section-header {
      max-width: 1280px;
      margin: 0 auto 3.5rem;
    }
    .section-header .section-label {
      font-size: 11px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--forest-light);
      display: block;
      margin-bottom: 1rem;
    }
    .section-header h2 {
      font-size: clamp(1.6rem, 2.5vw, 2.2rem);
      font-weight: 700;
      color: var(--text-white);
    }
 
    /* ─── RÉALISATIONS ────────────────────────────────────────────────────── */
    .section-realisations {
      background: var(--bg-dark);
      padding: 6rem 1.5rem;
    }
 
    .realisations-grid {
      max-width: 1280px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
 
    .realisation-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: 2px;
      overflow: hidden;
      transition: transform var(--transition), box-shadow var(--transition);
      cursor: pointer;
    }
    .realisation-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 15px 40px rgba(0,0,0,0.4);
    }
    .card-visual {
      height: 220px;
      background-image:
        linear-gradient(45deg, rgba(14,61,46,0.55), rgba(26,92,69,0.75), rgba(22,40,34,0.50)),
        url('[URL_IMAGE_REALISATION]');
      background-size: cover;
      background-position: center;
    }
    .card-body { padding: 1.5rem; }
    .card-tag {
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--forest-light);
      margin-bottom: 0.5rem;
      display: block;
    }
    .card-title {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text-white);
      margin-bottom: 0.5rem;
    }
    .card-desc {
      font-size: 0.875rem;
      color: var(--text-soft);
      line-height: 1.5;
    }
 
    /* ─── SERVICES COMPLÉMENTAIRES ────────────────────────────────────────── */
    .section-services-complementaires {
      padding: 6rem 1.5rem;
    }
    .services-grid {
      max-width: 1280px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
 
    .service-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: 2px;
      padding: 2.5rem 2rem;
      transition: border-color var(--transition), transform var(--transition);
    }
    .service-card:hover {
      border-color: var(--forest-light);
      transform: translateY(-3px);
    }
    .service-card-icon {
      width: 48px; height: 48px;
      margin-bottom: 1.5rem;
      color: var(--forest-glow);
    }
    .service-card-pole {
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--forest-light);
      margin-bottom: 0.5rem;
      display: block;
    }
    .service-card-title {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--text-white);
      margin-bottom: 0.75rem;
    }
    .service-card-desc {
      font-size: 0.875rem;
      color: var(--text-soft);
      line-height: 1.55;
      margin-bottom: 1.5rem;
    }
    .service-card-link {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--forest-glow);
      text-decoration: none;
      letter-spacing: 0.05em;
      display: inline-flex;
      align-items: center;
      gap: 0.4em;
      transition: gap var(--transition);
    }
    .service-card-link:hover { gap: 0.7em; }
    .service-card-link::after { content: '→'; }
 
    /* ─── RESPONSIVE ──────────────────────────────────────────────────────── */
    @media (max-width: 1024px) {
      .realisations-grid { grid-template-columns: 1fr 1fr; }
      .services-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 767px) {
      .realisations-grid { grid-template-columns: 1fr; }
    }



    .anchor-box {
  background: #111111;
  border-bottom: 2px solid #2a7a5e;
  padding: 20px 24px;
  max-width: 320px;
}

.anchor-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  margin-bottom: 16px;
}

.anchor-header svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #2a7a5e;
}

.anchor-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.anchor-list li a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}

.anchor-list li a:hover {
  color: #3adf97;
}

.anchor-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.anchor-list li::before {
  display: none !important;
}

.anchor-box .anchor-list li::before,
.anchor-box .anchor-list li::marker {
  display: none !important;
  content: none !important;
}

.anchor-box .anchor-list {
  list-style: none !important;
  padding-left: 0 !important;
}

.widget-area ul{ 

    list-style: none !important;
}