/* ============================================================
   BEYAFT v2 — STYLE.CSS
   Auteur: BeYaft
   Structure:
   1. Variables CSS (Design Tokens)
   2. Reset & Base
   3. Composants globaux (boutons, badges...)
   4. Navbar
   ============================================================ */


/* ============================================================
   1. VARIABLES CSS — Design Tokens
============================================================ */
:root {
  /* Couleurs principales */
  --color-primary:        #1B5E4B;
  --color-primary-light:  #2D8B6F;
  --color-primary-pale:   #EAF4F0;
  --color-primary-dark:   #134438; /* Vert foncé pour les hovers */
  --color-secondary:      #F5A623;
  --color-secondary-dark: #D4891A;

  /* Neutres */
  --color-dark:           #1A1A1A;
  --color-text:           #374151;
  --color-gray:           #6B7280;
  --color-gray-light:     #9CA3AF;
  --color-border:         #E5E7EB;
  --color-bg-light:       #F8F9FA;
  --color-white:          #FFFFFF;

  /* Typographie */
  --font-family:          'Inter', sans-serif;
  --font-size-xs:         0.75rem;
  --font-size-sm:         0.875rem;
  --font-size-base:       1rem;
  --font-size-2xl:        1.5rem;

  /* Espacement */
  --spacing-section: 30px;
  --spacing-sm:   0.5rem;
  --spacing-md:   1rem;
  --spacing-lg:   1.5rem;
  --spacing-xl:   2rem;

  /* Borders */
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-full:  9999px;
  --radius-btn:   15px;  /* Rayon standard pour tous les boutons */

  /* Ombres */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.13);

  /* Transitions */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
}


/* ============================================================
   2. RESET & BASE
============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Override Bootstrap container — max-width élargi */
.container,
.container-lg,
.container-xl,
.container-xxl {
  max-width: 1700px !important;
      padding-right: calc(var(--bs-gutter-x) * .9);
    padding-left: calc(var(--bs-gutter-x) * .9);
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}


/* ============================================================
   3. COMPOSANTS GLOBAUX
============================================================ */

/* --- Bouton primaire --- */
.beyaft-btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: 600;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-btn);
  border: 2px solid var(--color-primary);
  white-space: nowrap;
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              transform var(--transition-fast),
              box-shadow var(--transition-base);
}

.beyaft-btn-primary:hover {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary-light);
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(27, 94, 75, 0.35);
}

/* --- Bouton outline --- */
.beyaft-btn-outline {
  display: flex;
  align-items: center;
  background-color: transparent;
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-btn);
  border: 2px solid var(--color-primary);
  transition: background-color var(--transition-base),
              color var(--transition-base),
              transform var(--transition-fast);
}

.beyaft-btn-outline:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-1px);
}

/* --- Bouton secondaire (orange) --- */
.beyaft-btn-secondary {
  background-color: var(--color-secondary);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-btn);
  border: 2px solid var(--color-secondary);
  transition: background-color var(--transition-base),
              transform var(--transition-fast),
              box-shadow var(--transition-base);
}

.beyaft-btn-secondary:hover {
  background-color: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 166, 35, 0.35);
}


/* ============================================================
   4. NAVBAR
============================================================ */
.beyaft-header {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  z-index: 1000;
  box-shadow: var(--shadow-sm);
}

.beyaft-header .navbar {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}

/* --- Logo --- */
.beyaft-logo {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--color-secondary) !important;
  letter-spacing: -0.5px;
  line-height: 1;
}

.beyaft-logo span {
  color: var(--color-primary);
}

/* --- Nav links --- */
.beyaft-header .nav-link {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  padding: 0.4rem 0.75rem !important;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
  position: relative;
}

.beyaft-header .nav-link:hover {
  color: var(--color-primary);
  background-color: var(--color-primary-pale);
}

.beyaft-header .nav-link.active {
  color: var(--color-primary);
  font-weight: 700;
}

/* "Devenir pro" link — léger accent */
.nav-link--pro {
  color: var(--color-secondary) !important;
  font-weight: 600 !important;
}

.nav-link--pro:hover {
  color: var(--color-secondary-dark) !important;
  background-color: rgba(245, 166, 35, 0.08) !important;
}

/* --- Barre de recherche --- */
.beyaft-search {
  transition: width var(--transition-base);
}

.beyaft-search__wrapper {
  display: flex;
  align-items: center;
  background-color: var(--color-bg-light);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-btn);
  overflow: hidden;
  transition: all var(--transition-base);
  min-width: 220px;
  position: relative;
}

/* Expandable search for intermediate screens (1200px - 1351px) */
@media (min-width: 1200px) and (max-width: 1392px) {
  .beyaft-search__wrapper {
    min-width: 40px;
    width: 40px;
    background-color: transparent;
    border-color: transparent;
    cursor: pointer;
  }
  
  .beyaft-search__wrapper .beyaft-search__input {
    width: 0;
    opacity: 0;
    padding: 0;
    pointer-events: none;
  }
  
  .beyaft-search__wrapper .beyaft-search__btn {
    padding: 0;
    width: 40px;
    height: 40px;
    background-color: transparent;
    color: var(--color-text) !important;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-btn);
  }

  .beyaft-search__wrapper.is-expanded {
    min-width: 250px;
    width: 250px;
    background-color: var(--color-bg-light);
    border-color: var(--color-border);
  }
  
  .beyaft-search__wrapper.is-expanded .beyaft-search__input {
    width: auto;
    opacity: 1;
    padding: 0.45rem 0.5rem 0.45rem 0.8rem;
    pointer-events: auto;
  }
  
  .beyaft-search__wrapper.is-expanded .beyaft-search__btn {
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    width: auto;
    padding: 0.45rem 0.85rem;
  }
  
  .beyaft-search__icon {
    display: none; /* We use the button icon instead */
  }
}

.beyaft-search__wrapper:focus-within {
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(45, 139, 111, 0.15);
  background-color: var(--color-white);
}

.beyaft-search__icon {
  color: var(--color-gray);
  font-size: 0.95rem;
  padding: 0 0.6rem 0 0.9rem;
  pointer-events: none;
}

.beyaft-search__input {
  border: none;
  background: transparent;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  color: var(--color-dark);
  padding: 0.45rem 0.5rem 0.45rem 0;
  flex: 1;
  outline: none;
  min-width: 0;
  transition: opacity var(--transition-base), width var(--transition-base);
}

.beyaft-search__input::placeholder {
  color: var(--color-gray-light);
}

.beyaft-search__btn {
  background-color: var(--color-primary);
  color: var(--color-white) !important;
  border: none;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  height: 100%;        
  display: flex;
  align-items: center;
  justify-content: center
}

.beyaft-search__btn:hover {
  background-color: var(--color-primary-light);
}

.beyaft-icon-btn {
  background: none;
  border: none;
  border-radius: var(--radius-btn);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  font-size: 1.2rem;
  cursor: pointer;
  transition: color var(--transition-fast),
              background-color var(--transition-fast),
              transform var(--transition-fast);
}

.beyaft-icon-btn:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background-color: var(--color-primary-pale);
  transform: translateY(-1px);
}

.beyaft-avatar-btn {
  background: none;
  border: none;
  border-radius: var(--radius-btn);
  width: 40px;
  height: 40px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.beyaft-avatar-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-btn);
}

.beyaft-avatar-btn:hover {
  border-color: var(--color-primary);
  transform: scale(1.05);
}

.btn-hide-collapse {
  display: none;
}
/* --- Persistent Header Actions (< 1200px) --- */
.beyaft-nav-persistent {
  z-index: 1001;
}

.beyaft-nav-persistent .navbar-toggler {
  border: none;
  font-size: 1.5rem;
  color: var(--color-primary);
  padding: 0 0.25rem;
  transition: transform var(--transition-fast);
}

.beyaft-nav-persistent .navbar-toggler:focus {
  box-shadow: none;
}

.beyaft-nav-persistent .navbar-toggler:hover {
  transform: scale(1.1);
}

/* Hide persistent icons that might be duplicated if not careful (already moved outside in HTML) */
@media (min-width: 1200px) {
  .navbar-toggler {
    display: none !important;
  }
  .beyaft-header .nav-link.active::after {
      content: '';
      position: absolute;
      bottom: -21px;
      left: 50%;
      transform: translateX(-50%);
      width: 60%;
      height: 3px;
      background-color: var(--color-primary);
      border-radius: var(--radius-full);
  }
}

/* --- Side Drawer Menu (< 1200px) --- */
@media (max-width: 1199.98px) {
  .beyaft-header {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition-base);
  }

  .beyaft-header.is-menu-open {
    background: none;
    border: none;
  }

  .hero-text-container {
    text-align: center;
  }

  .navbar-collapse {
    position: fixed;
    top: 0;
    right: 0;
    transform: translateX(100%);
    width: 310px;
    height: 100vh;
    background-color: #ffffff; /* Pure white */
    z-index: 2000;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 30px rgba(0,0,0,0.1);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
    opacity: 0;
    overflow-y: auto;
    color: var(--color-text);
  }

  .nav-link:hover {
    background-color: transparent !important;
    color: var(--color-primary) !important;
    font-weight: bold;
  }

  .nav-link.nav-link--pro:hover {
    color: var(--color-secondary) !important;
  }

  .navbar-collapse.show {
    transform: translateX(0) !important;
    opacity: 1 !important;
    display: flex !important;
  }
  
  /* Backdrop overlay */
  .navbar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 900; /* Behind header (1000) */
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
  }
  
  .navbar-backdrop.show {
    opacity: 1;
    visibility: visible;
  }

  /* Drawer Header */
  .btn-hide-collapse {
    display: block;
    padding: 0.10rem 0.50rem !important;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 0px;
    border-top-right-radius: var(--radius-btn);
    border-bottom-right-radius: var(--radius-btn);
    position: absolute;
    z-index: 2;
    top: 50%;
    left: -2px;
  }

  .btn-hide-collapse:hover {
    border: 1px solid var(--color-primary);
  }

  .navbar-nav {
    padding: 0 !important;
    margin-bottom: 1.5rem !important;
    order: 3; /* After search */
  }

  .navbar-nav .nav-link {
    padding: 1rem 0 !important;
    font-size: 1.0rem;
  }

  .navbar-nav .nav-link:active,
  .navbar-nav .nav-link:focus {
    background-color: var(--color-primary-pale);
    color: var(--color-primary);
  }

  .beyaft-search {
    width: 100% !important;
    margin: 0 0 0.5rem 0 !important;
    order: 2; /* Second position below title */
  }
  
  .beyaft-search__wrapper {
    width: 100% !important;
    min-width: 100% !important;
    background-color: #ffffff !important;
    border: 1px solid var(--color-border) !important;
  }

  .beyaft-search__input {
    opacity: 1 !important;
    width: auto !important;
    padding: 0.45rem 0.8rem !important;
    pointer-events: auto !important;
  }

  .beyaft-search__btn {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    width: auto !important;
    padding: 0.45rem 0.85rem !important;
  }

  .beyaft-nav-actions {
    margin-top: auto;
    flex-direction: column;
    align-items: stretch !important;
    gap: 1rem !important;
    padding: 1.25rem 0 0 0 !important;
    order: 4;
  }

  .beyaft-messages-btn {
    width: 100% !important;
    height: auto !important;
    justify-content: flex-start !important;
    padding: 0.85rem 1rem !important;
    background-color: #ffffff !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text) !important;
    font-size: 1rem !important;
    border-radius: var(--radius-md) !important;
  }

  .beyaft-messages-btn i {
    font-size: 1.2rem;
    color: var(--color-primary);
  }

  .beyaft-messages-btn:hover {
    background-color: var(--color-primary-pale) !important;
    border-color: var(--color-primary) !important;
  }


  .beyaft-btn-primary.stats-filter-btn {
    width: 100% !important;
    padding: 0.5rem 1.25rem !important;
    font-size: 1rem !important;
  }

  .beyaft-nav-actions-mobile {
    order: 5;
  }
}


/* ============================================================
   5. HERO SECTION
============================================================ */
.hero-section {
  padding: var(--spacing-section) 0;
  overflow: hidden;
}

/* --- Badge --- */
.hero-badge {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  background-color: var(--color-primary-pale);
  border: 1px solid rgba(27, 94, 75, 0.2);
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-full);
  margin-bottom: var(--spacing-lg);
}

/* --- Titre --- */
.hero-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-dark);
  margin-bottom: var(--spacing-lg);
  letter-spacing: -0.02em;
}

.hero-title__accent {
  color: var(--color-primary);
}

/* --- Description --- */
.hero-desc {
  font-size: var(--font-size-base);
  color: var(--color-gray);
  line-height: 1.7;
  margin-bottom: var(--spacing-xl);
  max-width: 480px;
}

/* --- CTA Buttons --- */
.hero-cta {
  margin-bottom: var(--spacing-xl);
}

.hero-cta__primary {
  padding: 0.7rem 1.5rem;
  font-size: var(--font-size-base);
}

/* --- Social Proof --- */
.hero-social-proof {
  margin-top: var(--spacing-md);
}

.hero-avatars {
  display: flex;
}

.hero-avatars img {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  border: 2.5px solid var(--color-white);
  object-fit: cover;
  margin-left: -10px;
  box-shadow: var(--shadow-sm);
}

.hero-avatars img:first-child {
  margin-left: 0;
}

.hero-social-proof__text {
  font-size: var(--font-size-sm);
  color: var(--color-gray);
  margin: 0;
  line-height: 1.5;
}

.hero-social-proof__text strong {
  color: var(--color-dark);
  font-weight: 700;
}

/* ============================================================
   SLIDER AVANT / APRÈS
============================================================ */
.hero-slider {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
  cursor: col-resize;
  user-select: none;
  -webkit-user-select: none;
}

/* Image de base (Avant) */
.hero-slider__before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Image du dessus (Après) — réduite à droite via JS */
.hero-slider__after {
  position: absolute;
  inset: 0;
  width: 50%;        /* valeur initiale */
  height: 100%;
  overflow: hidden;
  transition: none;  /* pas de transition — fluidité du drag */
}

.hero-slider__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Labels Avant / Après */
.hero-slider__label {
  position: absolute;
  top: 14px;
  font-size: var(--font-size-xs);
  font-weight: 700;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-full);
  z-index: 2;
  letter-spacing: 0.05em;
}

.hero-slider__label--before {
  left: 14px;
  background-color: rgba(0,0,0,0.55);
  color: var(--color-white);
  backdrop-filter: blur(4px);
}

.hero-slider__label--after {
  right: 14px;
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* Handle (ligne de drag) */
.hero-slider__handle {
  position: absolute;
  top: 0;
  left: 50%;           /* valeur initiale */
  transform: translateX(-50%);
  width: 4px;
  height: 100%;
  background-color: var(--color-white);
  z-index: 10;
  cursor: col-resize;
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
}

.hero-slider__handle-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--color-white);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  gap: 0;
  line-height: 1;
}

.hero-slider__handle-icon i {
  font-size: 0.7rem;
}

/* Carte info projet (Wrappers gauche et droite) */
.hero-slider__card-wrapper {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 20;
  pointer-events: none; /* Laisse le hover passer à travers pour l'arrière-plan */
}

/* Block gauche */
.hero-slider__card-left {
  background-color: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: var(--shadow-md);
  pointer-events: auto; /* Rétablit les intéractions */
}

.hero-slider__card-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--color-border);
  flex-shrink: 0;
}

.hero-slider__card-info {
  display: flex;
  flex-direction: column;
}

.hero-slider__card-title {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 0.1rem;
}

.hero-slider__card-meta {
  font-size: 0.75rem;
  color: var(--color-gray);
  margin: 0;
}

/* Block droite (Likes) */
.hero-slider__card-right {
  background-color: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.9rem;
  display: flex;
  align-items: center;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-gray);
  box-shadow: var(--shadow-md);
  pointer-events: auto;
}

.hero-slider__card-right i {
  color: var(--color-primary);
  font-size: 0.9rem;
}

/* --- Dropdown sélecteur de langue --- */
.lang-dropdown {
  position: relative;
}

/* Bouton toggle */
.lang-dropdown__toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background-color: transparent;
  border: none;
  border-radius: var(--radius-btn);
  padding: 0.35rem 0.6rem;
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-fast),
              color var(--transition-fast);
  white-space: nowrap;
}

.lang-dropdown__toggle:hover,
.lang-dropdown__toggle[aria-expanded="true"] {
  background-color: var(--color-primary-pale);
  color: var(--color-primary);
}

/* Override de la flèche Bootstrap */
.lang-dropdown__toggle.dropdown-toggle::after {
  margin-left: 0.15rem;
  vertical-align: middle;
  border-top-color: currentColor;
}

.lang-dropdown__flag {
  font-size: 1rem;
  line-height: 1;
}

.lang-dropdown__label {
  letter-spacing: 0.04em;
}

/* Menu dropdown */
.lang-dropdown__menu {
  min-width: 160px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  box-shadow: var(--shadow-md);
  padding: 0.35rem;
  background-color: var(--color-white);
  animation: fadeInDown var(--transition-fast) ease;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Items du menu */
.lang-dropdown__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.7rem;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-fast),
              color var(--transition-fast);
  text-align: left;
}

.lang-dropdown__item:hover {
  background-color: var(--color-primary-pale);
  color: var(--color-primary);
}

.lang-dropdown__item.active {
  background-color: var(--color-primary-pale);
  color: var(--color-primary);
  font-weight: 700;
}

.lang-dropdown__item-flag {
  font-size: 1.1rem;
  line-height: 1;
}

.lang-dropdown__item-name {
  flex: 1;
}

/* Responsive Hero */
@media (max-width: 991.98px) {


  .hero-title {
    font-size: 1.9rem;
  }

  .hero-desc {
    max-width: 100%;
  }

  .hero-slider {
    aspect-ratio: 16 / 10;
  }
}



/* ============================================================
   6. STATS SECTION
============================================================ */

/* Variables locales stats */
:root {
  --stats-bg:                    var(--color-bg-light);
  --stats-border:                var(--color-border);
  --stats-number-color:          var(--color-dark);
  --stats-label-color:           var(--color-gray);
  --stats-divider-color:         var(--color-border);

  /* Icône stat 1 — primaire (vert) */
  --stats-icon-bg-primary:       var(--color-primary-pale);
  --stats-icon-color-primary:    var(--color-primary);

  /* Icône stat 2 — secondaire (orange) */
  --stats-icon-bg-secondary:     rgba(245, 166, 35, 0.12);
  --stats-icon-color-secondary:  var(--color-secondary);

  /* Icône stat 3 — outline (bleu neutre) */
  --stats-icon-bg-outline:       rgba(59, 130, 246, 0.10);
  --stats-icon-color-outline:    #3B82F6;
}

/* Wrapper section */
.stats-section {
  padding: var(--spacing-section) 0;
}

/* Carte stat séparée (remplace l'ancienne ligne) */
.stat-card--separated {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background-color: var(--color-white);
  box-shadow: var(--shadow-sm);    
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  height: 100%; /* S'assure que toutes les cartes ont la même hauteur */
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.stat-card--separated:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

/* Icône wrapper */
.stat-card__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background-color: var(--stats-icon-bg-primary);
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.stat-card--separated:hover .stat-card__icon-wrap {
  transform: scale(1.08);
}

.stat-card__icon-wrap--secondary {
  background-color: var(--stats-icon-bg-secondary);
}

.stat-card__icon-wrap--outline {
  background-color: var(--stats-icon-bg-outline);
}

/* Icônes */
.stat-card__icon {
  font-size: 1.5rem;
  color: var(--stats-icon-color-primary);
}

.stat-card__icon-wrap--secondary .stat-card__icon {
  color: var(--stats-icon-color-secondary);
}

.stat-card__icon-wrap--outline .stat-card__icon {
  color: var(--stats-icon-color-outline);
}

/* Textes */
.stat-card__content {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.stat-card__number {
  font-size: 1.35rem; /* Légèrement plus petit pour tenir dans la carte */
  font-weight: 800;
  color: var(--color-dark);
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.02em;
}

.stat-card__label {
  font-size: 0.85rem;
  color: var(--color-gray);
  margin: 0;
  line-height: 1.4;
}

/* ============================================================
   7. PROJETS POPULAIRES SECTION
============================================================ */

.projects-section {
  padding: var(--spacing-section) 0;
}

/* En-tête de section */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-logo);
  margin-bottom: var(--spacing-xl);
}

.section-header__left {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.section-header__fire {
  font-size: 1.5rem;
}

.section-header__title {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  color: var(--color-dark);
  margin: 0;
  letter-spacing: -0.02em;
}

.section-header__link {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: color var(--transition-fast);
}

.section-header__link:hover {
  color: var(--color-primary-light);
}

/* Grille et Cards */
.project-card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* Zone image avec overlay hover */
.project-card__image-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.project-card__img-before,
.project-card__img-after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.project-card__img-before img,
.project-card__img-after img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Image après cachée par défaut à 50% avec clip-path (pour ne pas déformer l'image) */
.project-card__img-after {
  clip-path: inset(0 0 0 50%); /* Masque la moitié gauche */
}

/* Animation au survol désactivée à la demande de l'utilisateur pour voir une comparaison 50/50 statique
.project-card:hover .project-card__img-after {
  animation: hoverAvantApres 6s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
*/

@keyframes hoverAvantApres {
  0%, 40%, 100% { clip-path: inset(0 0 0 100%); } 
  50%, 90%      { clip-path: inset(0 0 0 0%); }   
}

/* Ligne statique au milieu (juste visuel) */
.project-card__split-line {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background-color: var(--color-white);
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--transition-fast);
}

.project-card__split-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background-color: var(--color-white);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
}

/* Cache la ligne au hover (par défaut) : Désactivé pour la vue 50/50
.project-card:hover .project-card__split-line {
  opacity: 0;
}
*/

/* Ligne de séparation Hero : on garde les styles standards des cartes */
.hero-image-box .project-card__split-line {
  opacity: 1 !important;
}


/* Labels Avant/Après */
.project-card__label {
  position: absolute;
  top: 10px;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  z-index: 20;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.project-card__label--before {
  left: 10px;
  background-color: rgba(0,0,0,0.6);
  color: var(--color-white);
  backdrop-filter: blur(4px);
}

.project-card__label--after {
  right: 10px;
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* Animations des étiquettes au hover : Désactivées pour garder les étiquettes statiques
.project-card:hover .project-card__label--before {
  animation: labelBeforeAnim 6s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.project-card:hover .project-card__label--after {
  animation: labelAfterAnim 6s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
*/

@keyframes labelBeforeAnim {
  0%, 40%, 100% { opacity: 1; pointer-events: auto; } 
  50%, 90%      { opacity: 0; pointer-events: none; } 
}

@keyframes labelAfterAnim {
  0%, 40%, 100% { opacity: 0; pointer-events: none; } 
  50%, 90%      { opacity: 1; pointer-events: auto; } 
}

/* Corps de la carte */
.project-card__body {
  padding: 1.25rem;
  background-color: var(--color-white);
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Catégorie flottante */
.project-card__category {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background-color: var(--color-bg-light, #F8F9FA);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-gray);
  margin-top: -2.3rem; /* Fait remonter sur l'image */
  margin-bottom: 0.75rem;
  width: max-content;
  z-index: 10;
  position: relative; /* Pour le z-index */
  border: 1px solid var(--color-border);
}

.project-card__category i {
  color: var(--color-primary);
  font-size: 0.85rem;
}

/* Titre */
.project-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

/* Grille des Meta (Lieu, Durée, Prix) */
.project-card__meta {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
    align-items: center;
}

.project-card__meta span {
  font-size: var(--font-size-xs);
  color: var(--color-dark);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  text-wrap: nowrap;
  text-overflow: ellipsis;
}

.project-card__meta i {
  color: var(--color-primary);
  font-size: 0.85rem;
}

/* Séparateur */
.project-card__body hr {
  margin: 0 0 1rem 0;
  border-color: var(--color-border);
  opacity: 0.5;
}

/* Footer de la carte (Avatar + Bookmark) */
.project-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.project-card__user {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.project-card__user img {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 1px solid var(--color-border);
}

.project-card__user div {
  display: flex;
  flex-direction: column;
}

.project-card__user strong {
  font-size: 0.85rem;
  color: var(--color-dark);
  font-weight: 700;
  display: flex;
  align-items: center;
}

.project-card__user p {
  font-size: 0.75rem;
  color: var(--color-gray);
  margin: 0;
}

/* Bouton Sauvegarder (Bookmark) */
.bookmark-btn {
  border: none;
  background: transparent;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--color-gray);
  cursor: pointer;
  transition: all var(--transition-fast);
  padding: 0;
}

.bookmark-btn:hover {
  background-color: var(--color-primary-pale);
  color: var(--color-primary);
}

/* Responsive */
@media (max-width: 575.98px) {
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }
}

/* ============================================================
   8. FILTERS SECTION — "Trouver un projet"
============================================================ */

.filters-section {
  padding: var(--spacing-section) 0;
}

/* Le grand wrapper gris avec bordure verte */
.filters-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;
  border: 2px solid var(--color-primary);
  border-radius: 15px;
  padding: 2rem 2.5rem;
  box-shadow: 0 4px 20px rgba(27, 94, 75, 0.08);
}

/* Colonne texte-gauche */
.filters-text {
  flex: 0 0 220px;
  min-width: 200px;
}

.filters-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.filters-subtitle {
  font-size: 0.82rem;
  color: var(--color-gray);
  line-height: 1.5;
  margin: 0;
}

/* Colonne inputs droite */
.filters-inputs {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ─── Desktop (≥ 1200px) : groupes + bouton sur une seule ligne ─── */
@media (max-width: 1199.98px) {
  .filters-inputs {
    width: 100%;
  }

  /* Les groupes de filtres prennent tout l'espace disponible */
  .filters-row-1 {
    flex: 1;
  }

  /* Le bouton reste compact à droite */
  .filters-row-2 {
    flex-shrink: 0;
  }
}

/* Ligne 1 : les champs côte-à-côte */
.filters-row-1 {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

/* Ligne 2 : le bouton à droite */
.filters-row-2 {
  display: flex;
  justify-content: flex-end;
}

/* Groupes de champs */
.fgroup {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fgroup--search   { flex: 2; }
.fgroup--duration { flex: 3; }
.fgroup--domain   { flex: 1.5; }

/* Labels avec icône badge gris+vert */
.flabel {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  margin-bottom: 0.5rem;
}

.flabel i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background-color: #E8F0EC; /* Gris-vert clair */
  color: var(--color-primary);
  border-radius: 6px;
  font-size: 0.8rem;
  flex-shrink: 0;
}

/* Input de recherche — style Bootstrap natif */
.finput {
  display: block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.finput:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(27, 94, 75, 0.15);
  outline: 0;
}

/* Boutons durée individuels (avec bordure, pas dans un container gris) */
.fpills {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.fpill {
  border: 1.5px solid #ced4da;
  background: #fff;
  padding: 0.3rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #495057;
  border-radius: 20px; /* Pill shape */
  white-space: nowrap;
  transition: all var(--transition-fast);
  cursor: pointer;
  line-height: 1.5;
}

.fpill:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.fpill.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(27, 94, 75, 0.3);
}

/* Select domaine — style Bootstrap natif */
.fselect {
  display: block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: #495057;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
}

.fselect:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(27, 94, 75, 0.15);
  outline: 0;
}

/* Bouton résultats */
.filters-btn {
  height: 44px;
  padding: 0 1.75rem;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: var(--radius-btn);
}

/* Responsive */

/* Colonne unique (texte au-dessus, inputs en dessous) */
@media (max-width: 1199.98px) {
  .filters-wrapper {
    flex-direction: column;
    gap: 1.5rem;
  }

  .filters-text {
    flex: none;
  }
}

/* ─── Plage intermédiaire : 992px – 1199px ───
   Le wrapper est en colonne, mais les groupes de filtres côte à côte
   peuvent être serrés. On réorganise en 2 lignes équilibrées. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .filters-row-1 {
    display: grid;
    /* Recherche + Domaine sur une ligne | Durée sur la ligne du dessous */
    grid-template-columns: 2fr 1.5fr;
    grid-template-rows: auto auto;
    gap: 1rem;
  }

  /* Recherche : colonne 1 */
  .fgroup--search {
    grid-column: 1;
    grid-row: 1;
  }

  /* Domaine : colonne 2 */
  .fgroup--domain {
    grid-column: 2;
    grid-row: 1;
  }

  /* Durée : prend toute la largeur en deuxième ligne */
  .fgroup--duration {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* Pills de durée bien réparties */
  .fpills {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  .fpill {
    flex: 1;
    text-align: center;
  }

  /* Bouton résultats aligné à droite */
  .filters-row-2 {
    justify-content: flex-end;
  }
}

/* ─── Mobile large : < 768px ─── */
@media (max-width: 767.98px) {
  .filters-row-1 {
    flex-wrap: wrap;
  }

  .fgroup {
    min-width: 100%;
  }

  .filters-wrapper {
    padding: 1.25rem;
  }
}


/* ============================================================
   9. TESTIMONIALS SECTION — "Ils ont trouvé la bonne personne"
============================================================ */

.testimonials-section {
  padding: var(--spacing-section) 0;
}

/* Header */
.testi-header { margin-bottom: 2rem; }

.testi-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: 0.35rem;
  letter-spacing: -0.02em;
}

.testi-subtitle {
  font-size: 0.9rem;
  color: var(--color-gray);
  margin: 0;
}

/* ---- Carte : Layout horizontal en 2 colonnes ---- */
.testi-card {
  background-color: var(--color-white);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border) !important;
  border-radius: 15px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: row;
  border: none;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.testi-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.1);
}

/* ---- Colonne gauche : Photo + Titre ---- */
.testi-card__col-left {
  flex: 0 0 42%;
  position: relative;
  overflow: hidden;
}

.testi-avatar {
  width: 100%;
  height: 100%;      /* Image de height 100% du contenu parent */
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Titre de la transformation flotte sur l'image coté bas */
.testi-transform-label {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  color: var(--color-white);
  background: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.6rem 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-top: 2px solid var(--color-primary);
  z-index: 2;
  text-align: center;
}

/* ---- Colonne droite : Témoignage ---- */
.testi-card__col-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  padding-bottom: 60px; /* Espace pour le thumbnail absolute */
  gap: 0.5rem;
  position: relative;
}

/* Guillemet de citation (Icône) */
.testi-quote-mark {
  font-size: 1.5rem;
  color: var(--color-primary);
  line-height: 1;
  display: block;
  margin-bottom: 0.25rem;
}

/* Texte du témoignage limité en hauteur */
.testi-text {
  font-size: 0.85rem;
  font-weight: 600; /* Gras comme demandé */
  color: var(--color-dark);
  line-height: 1.65;
  flex: 1;
  margin: 0;
  
  /* Force la taille exacte de 4 lignes même si le texte est court */
  min-height: calc(4 * 1.65em);
  max-height: calc(4 * 1.65em);
  
  /* Coupe le texte avec des '...' s'il dépasse 4 lignes */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Rétablit tout le texte au survol de la carte */
/* Désactivé pour éviter que toute la ligne ne bouge si le texte s'allonge
.testi-card:hover .testi-text {
  -webkit-line-clamp: unset;
}
*/
/* Nom, ville */
.testi-author {
  font-size: 0.8rem;
  font-weight: 700; 
  color: var(--color-gray); /* En gris */
  margin: 0;
}

/* Preview floating on the right bottom */
.testi-preview {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  width: 100px;
  height: auto;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.testi-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hardware acceleration for project card animations */
.project-card__img-after {
  will-change: clip-path;
  transform: translateZ(0);
}

/* Responsive : passe en vertical sur mobile */
@media (max-width: 767.98px) {
  .testi-card { flex-direction: column; }
  .testi-card__col-left { flex: none; }
  .testi-avatar { height: 180px; }
}

/* ============================================================
   10. WHY SECTION — "Pourquoi utiliser BeYaft ?"
============================================================ */

.why-section {
  padding: var(--spacing-section) 0;
}

.why-section__heading {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-dark);
  letter-spacing: -0.02em;
  margin-bottom: var(--spacing-xl);
}

/* ─── Carte commune ─── */
.why-card {
  display: flex;
  flex-direction: row;
  height: 100%;
  min-height: 420px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.05);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  cursor: pointer;
  position: relative;
  background-repeat: no-repeat;
  background-clip: padding-box;
}

/* Image 100% du card en fond — opacité pleine */
.why-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: inherit;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  z-index: 0;
}

/* Overlay de couleur par-dessus l'image pour l'effet filigrane */
.why-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--card-overlay-color, #ffffff);
  opacity: 0.88;
}

.why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.1);
}



/* ─── Contenu gauche (texte + boutons) ─── */
.why-card__content {
  flex: 0 0 100%;
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.2rem;
  z-index: 2; /* Au-dessus de ::after (image) et ::before (overlay) */
  position: relative;
  background-color: transparent;
}

/* Supertitle (Vert ou Orange selon la variante) */
.why-card__supertitle {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Titre principal */
.why-card__title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-dark);
  line-height: 1.25;
  margin: 0;
  letter-spacing: -0.02em;
}

/* Liste de points */
.why-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.why-card__list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: var(--color-text);
  font-weight: 500;
}

.why-card__list li .bi {
  font-size: 1rem;
  flex-shrink: 0;
}

/* Container Boutons */
.why-card__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
}

/* Boutons globaux */
.why-card__btn,
.why-card__btn-outline {
  padding: 0.6rem 1.5rem;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: var(--radius-btn);
  transition: all var(--transition-fast);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ─── Variante Particuliers (Vert) ─── */
.why-card--primary {
  background-color: #ffffff;
  background-image: url('capture_transformation.png');
  --card-overlay-color: #ffffff;
}

.why-card--primary .why-card__content {
  background: transparent;
}

.why-card--primary .why-card__supertitle {
  color: var(--color-primary);
}

.why-card--primary .why-card__list li .bi {
  color: var(--color-primary);
}

.why-card--primary .why-card__btn {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: 2px solid var(--color-primary);
}

.why-card--primary .why-card__btn:hover {
  background-color: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
  color: var(--color-white) !important;
}

.why-card--primary .why-card__btn-outline {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.why-card--primary .why-card__btn-outline:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* ─── Variante Professionnels (Orange) ─── */
.why-card--secondary {
  background-color: #FFF4EC;
  background-image: url('capturepro.png');
  --card-overlay-color: #FFF4EC;
}

.why-card--secondary .why-card__content {
  background: transparent;
}

.why-card--secondary .why-card__supertitle {
  color: var(--color-secondary);
}

.why-card--secondary .why-card__list li .bi {
  color: var(--color-secondary);
}

.why-card--secondary .why-card__btn {
  background-color: var(--color-secondary);
  color: var(--color-white);
  border: 2px solid var(--color-secondary);
}

.why-card--secondary .why-card__btn:hover {
  background-color: var(--color-secondary-dark, #e06b00) !important;
  border-color: var(--color-secondary-dark, #e06b00) !important;
  color: var(--color-white) !important;
}

.why-card--secondary .why-card__btn-outline {
  background-color: transparent;
  color: var(--color-secondary);
  border: 2px solid var(--color-secondary);
}

.why-card--secondary .why-card__btn-outline:hover {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

/* ─── Zone visuelle (remplace .why-card__image) ─── */
.why-card__visual {
  flex: 0 0 55%;
  position: relative;
  overflow: hidden;
}

/* ══════════════════════════════════════════
   Grille mini-cartes Avant/Après (Particuliers)
   ══════════════════════════════════════════ */
.why-card__visual--grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 4px;
  background-color: #f0f4f2;
  padding: 8px;
}

.why-mini-card {
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.why-mini-card__img-wrap {
  position: relative;
  height: 72px;
  overflow: hidden;
}

.why-mini-card__img-before,
.why-mini-card__img-after {
  position: absolute;
  top: 0;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.why-mini-card__img-before {
  left: 0;
  width: 50%;
}

.why-mini-card__img-after {
  right: 0;
  width: 50%;
}

.why-mini-card__split {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #fff;
  transform: translateX(-50%);
  z-index: 2;
}

.why-mini-card__label {
  position: absolute;
  bottom: 4px;
  font-size: 0.45rem;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
  z-index: 3;
  letter-spacing: 0.04em;
  color: #fff;
}

.why-mini-card__label--before {
  left: 4px;
  background: rgba(0,0,0,0.45);
}

.why-mini-card__label--after {
  right: 4px;
  background: var(--color-primary);
}

.why-mini-card__cat {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 0.45rem;
  font-weight: 600;
  background: rgba(255,255,255,0.92);
  color: var(--color-dark);
  padding: 2px 5px;
  border-radius: 20px;
  z-index: 3;
  white-space: nowrap;
}

.why-mini-card__body {
  padding: 4px 6px 5px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.why-mini-card__meta {
  font-size: 0.45rem;
  color: var(--color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.why-mini-card__meta .bi { font-size: 0.45rem; }

.why-mini-card__name {
  font-size: 0.52rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.why-mini-card__rating {
  font-size: 0.45rem;
  color: var(--color-dark);
  margin: 0;
}

.why-mini-card__star { font-size: 0.5rem; }

/* ══════════════════════════════════════════
   Mock-up Tableau de bord (Professionnels)
   ══════════════════════════════════════════ */
.why-card__visual--dashboard {
  display: flex;
  flex-direction: column;
  background: #fff8f2;
  border-right: 1px solid rgba(0,0,0,0.06);
}

.why-db__header {
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  background: #fff;
}

.why-db__logo { height: 22px; width: auto; }

.why-db__body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.why-db__nav {
  width: 120px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid rgba(0,0,0,0.07);
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.why-db__nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 0.6rem;
  color: #666;
  cursor: pointer;
  border-radius: 0 6px 6px 0;
  transition: background 0.15s;
  position: relative;
}

.why-db__nav-item span { font-size: 0.6rem; }
.why-db__nav-item .bi { font-size: 0.75rem; flex-shrink: 0; }

.why-db__nav-item--active {
  background: #eef6f3;
  color: var(--color-primary);
  font-weight: 700;
}

.why-db__badge {
  margin-left: auto;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.45rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 20px;
}

.why-db__main {
  flex: 1;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
}

.why-db__notif {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border-radius: 7px;
  padding: 6px 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.why-db__notif-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.65rem;
  color: #fff;
}

.why-db__notif-icon--msg     { background: #3b82f6; }
.why-db__notif-icon--bell    { background: var(--color-secondary); }
.why-db__notif-icon--profile { background: #8b5cf6; }

.why-db__notif-text { flex: 1; min-width: 0; }

.why-db__notif-title {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.why-db__notif-sub {
  font-size: 0.5rem;
  color: #888;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.why-db__notif-time {
  font-size: 0.45rem;
  color: #aaa;
  white-space: nowrap;
  flex-shrink: 0;
}

.why-db__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-top: 2px;
}

.why-db__stat-card {
  background: #fff;
  border-radius: 7px;
  padding: 6px 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.why-db__stat-label { font-size: 0.48rem; color: #888; margin: 0; }

.why-db__stat-value {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--color-dark);
  margin: 0;
  line-height: 1;
}

.why-db__stat-trend {
  font-size: 0.5rem;
  font-weight: 700;
  color: var(--color-primary);
}

.why-db__sparkline,
.why-db__barchart {
  width: 100%;
  height: 30px;
  display: block;
}

.why-db__sparkline-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 1px;
}

.why-db__sparkline-labels span { font-size: 0.38rem; color: #bbb; }

/* ─── Responsive ─── */

@media (max-width: 575.98px) {
  .why-card {
    flex-direction: column;
    min-height: auto;
  }
  .why-card__image {
    flex: none;
    height: 200px;
  }
  .why-card__content {
    padding: 1.5rem;
  }
}

/* ============================================================
   11. CTA BANNER — "Vous avez déjà réalisé une transformation ?"
============================================================ */

.cta-banner {
  padding: var(--spacing-section) 0;
}

.cta-banner__title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

.cta-banner__highlight {
  color: var(--color-primary);
  font-weight: 800;
}

.cta-banner__btn {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 0.85rem 2.25rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--radius-btn);
  border: 2px solid var(--color-primary);
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
}

.cta-banner__btn:hover {
  background-color: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
  color: var(--color-white) !important;
  transform: translateX(3px);
}

/* ============================================================
   12. FOOTER
============================================================ */

.site-footer {
  background-color: var(--color-primary); /* Vert BeYaft */
  padding: 5rem 0 2.5rem;
  color: rgba(255, 255, 255, 0.9); /* Texte de base plus lisible */
  font-weight: 500;
}

/* ─── Logo ─── */
.footer-logo {
  display: inline-block;
  font-size: 1.75rem;
  font-weight: 900;
  text-decoration: none;
  margin-bottom: 1.2rem;
  line-height: 1;
}

.footer-logo__be {
  color: var(--color-white);
}

.footer-logo__yaft {
  color: var(--color-secondary); /* Orange */
}

/* ─── Tagline ─── */
.footer-tagline {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  margin-bottom: 2.5rem;
  line-height: 1.7;
}

/* ─── Réseaux sociaux ─── */
.footer-socials {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: rgba(255,255,255,0.1);
  color: var(--color-white);
  border-radius: 8px;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.footer-social-link:hover {
  background-color: rgba(255,255,255,0.25);
  color: var(--color-white);
  transform: translateY(-2px);
}

/* ─── Copyright ─── */
.footer-copyright {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  margin: 0;
}

/* ─── Colonnes de liens ─── */
.footer-col__title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 2rem;
  letter-spacing: 0.02em;
}

.footer-col__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.footer-col__links a {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-col__links a:hover {
  color: var(--color-white);
}

/* ─── Newsletter ─── */
.footer-newsletter__text {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.footer-newsletter__form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-newsletter__input {
  height: 40px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 8px;
  padding: 0 0.85rem;
  font-size: 0.82rem;
  font-weight: 500;
  background-color: rgba(255,255,255,0.12);
  color: var(--color-white);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.footer-newsletter__input::placeholder {
  color: rgba(255,255,255,0.6);
}

.footer-newsletter__input:focus {
  border-color: rgba(255,255,255,0.5);
  background-color: rgba(255,255,255,0.15);
  outline: none;
}

.footer-newsletter__btn {
  height: 40px;
  background-color: var(--color-white);
  color: var(--color-primary);
  border: none;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.footer-newsletter__btn:hover {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

/* ─── Responsive ─── */
@media (max-width: 767.98px) {
  .site-footer {
    padding: 2.5rem 0 1.5rem;
  }
  .cta-banner__title {
    font-size: 1.3rem;
  }
}


/* ============================================================
   13. RESPONSIVE COMPLET — Toutes Sections
   Breakpoints :
     Tablette large  : max-width: 1199.98px
     Tablette        : max-width: 991.98px
     Mobile large    : max-width: 767.98px
     Mobile small    : max-width: 575.98px
============================================================ */


/* ─────────────────────────────────────────
   HERO — Tablette & Mobile
───────────────────────────────────────── */
@media (max-width: 991.98px) {
  /* Centre le texte et les éléments de la colonne héro */
  .hero-text-container {
    text-align: center;
  }

  /* CTA côte-à-côte centrés */
  .hero-cta {
    justify-content: center;
  }

  /* Social proof centré */
  .hero-social-proof {
    justify-content: center;
  }

  /* Enlève la limite de largeur du texte descriptif */
  .hero-desc {
    max-width: 100%;
  }
}

@media (max-width: 575.98px) {
  /* Boutons CTA empilés en colonne sur très petit écran */
  .hero-cta {
    flex-direction: column;
    align-items: center;
  }

  .hero-cta .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  /* Réduit la taille du titre hero */
  .hero-title {
    font-size: 1.6rem;
  }
}

@media (max-width: 449.98px) {
  /* Garde tout sur une seule ligne (pas de column) pour ne PAS cacher l'image d'Avant/Après */
  /* Mais on contraint la carte de gauche à ne pas écraser la carte j'aime (droite) */
  .hero-slider__card-left {
    max-width: calc(100% - 100px); /* Garde 100px de sécurité pour la carte de droite */
    padding: 0.45rem 0.6rem;
    gap: 0.5rem;
  }

  .hero-slider__card-right {
    padding: 0.45rem 0.6rem;
  }

  /* Réduction de confort pour l'avatar */
  .hero-slider__card-avatar {
    width: 32px;
    height: 32px;
  }

  /* Permet au flexbox de réduire cet élément au lieu de déborder */
  .hero-slider__card-info {
    min-width: 0;
  }

  /* Si le titre ("Rénovation cuisine...") est trop large, il se coupe avec '...' */
  .hero-slider__card-title {
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hero-slider__card-meta {
    font-size: 0.65rem;
  }

  /* Masquer l'icône de la ligne de séparation (poignée) sur ces petits écrans pour alléger */
  .hero-slider__handle-icon {
    display: none;
  }
}

@media (max-width: 399.98px) {
  /* Le wrapper s'étire sur toute la largeur et colle au bas */
  .hero-slider__card-wrapper {
    bottom: 0;
    left: 0;
    right: 0;
    transition: all 0.3s ease;
  }

  /* Au repos : un bandeau noir plaqué tout en bas avec juste le titre */
  .hero-slider__card-left {
    background-color: rgba(0, 0, 0, 0.45); /* Fond noir (légèrement transparent) */
    box-shadow: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 0.5rem 1rem;
    border-radius: 0; /* Sans arrondi puisqu'il touche les bords */
    max-width: 100%;
    width: 100%;
    transition: all 0.3s ease;
  }

  /* Masque l'avatar, le sous-titre (meta) et le bloc j'aime (droite) */
  .hero-slider__card-avatar,
  .hero-slider__card-meta,
  .hero-slider__card-right {
    opacity: 0;
    visibility: hidden;
    position: absolute; /* Empêche de prendre de la place */
    transition: opacity 0.3s ease;
  }

  /* Le titre est blanc dans ce bandeau noir */
  .hero-slider__card-title {
    color: var(--color-white);
    text-shadow: none;
    font-size: 0.8rem;
    transition: color 0.3s ease;
  }

  /* ─ AU SURVOL / TAPPING : La carte remonte, redevient bulle translucide et réaffiche le reste ─ */
  #heroSlider:hover .hero-slider__card-wrapper,
  #heroSlider:active .hero-slider__card-wrapper {
    bottom: 16px; /* Remonte la bulle */
    left: 16px;
    right: 16px;
    gap: 0.6rem; /* Empêche les deux blocs de se toucher */
  }

  #heroSlider:hover .hero-slider__card-left,
  #heroSlider:active .hero-slider__card-left {
    background-color: rgba(255,255,255,0.92);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-md); /* Retrouve son arrondi */
    width: auto;
    max-width: calc(100% - 100px); /* Sécurité maximale pour ne pas écraser le bouton j'aime */
  }

  #heroSlider:hover .hero-slider__card-avatar,
  #heroSlider:active .hero-slider__card-avatar,
  #heroSlider:hover .hero-slider__card-meta,
  #heroSlider:active .hero-slider__card-meta,
  #heroSlider:hover .hero-slider__card-right,
  #heroSlider:active .hero-slider__card-right {
    opacity: 1;
    visibility: visible;
    position: static; /* Reprend sa place normale */
  }

  #heroSlider:hover .hero-slider__card-title,
  #heroSlider:active .hero-slider__card-title {
    color: var(--color-dark);
    font-size: 0.75rem;
  }
}


/* ─────────────────────────────────────────
   STATS — Mobile
───────────────────────────────────────── */
@media (max-width: 575.98px) {
  .stat-card--separated {
    padding: 1rem;
  }

  .stat-card__number {
    font-size: 1.15rem;
  }
}


/* ─────────────────────────────────────────
   PROJETS POPULAIRES — Mobile
───────────────────────────────────────── */
@media (max-width: 575.98px) {
  .section-header__title {
    font-size: 1.2rem;
  }
}


/* ─────────────────────────────────────────
   FILTRES — Tablette & Mobile
───────────────────────────────────────── */
@media (max-width: 991.98px) {
  .filters-wrapper {
    flex-direction: column;
    gap: 1.5rem;
  }

  .filters-text {
    flex: none;
  }
}

@media (max-width: 767.98px) {
  .filters-row-1 {
    flex-wrap: wrap;
  }

  .fgroup {
    min-width: 100%;
  }

  .filters-wrapper {
    padding: 1.25rem;
  }

  /* Bouton résultats centré sur mobile */
  .filters-row-2 {
    justify-content: center;
  }

  .filters-btn {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 575.98px) {
  /* Pills durée : plus petites, wrap correct */
  .fpill {
    font-size: 0.72rem;
    padding: 0.25rem 0.6rem;
  }

  .filters-title {
    font-size: 1.15rem;
  }
}


/* ─────────────────────────────────────────
   TÉMOIGNAGES — Tablette & Mobile
───────────────────────────────────────── */
/* Breakpoint intermédiaire : 992px – 1360px
   (3 cartes côte à côte + image + contenu = zone étroite, risque de superposition) */
@media (max-width: 1359.98px) {
  /* Réduit la colonne image pour donner plus d'espace au contenu */
  .testi-card__col-left {
    flex: 0 0 32%;
  }

  /* Repositionne le preview en bas du flux (plus de position absolute) */
  .testi-card__col-right {
    padding-bottom: 1rem;
  }

  .testi-preview {
    position: static;
    width: 100%;
    height: 90px;
    margin-top: 0.75rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
  }

  .testi-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (max-width: 991.98px) {
  /* Sur tablette (< 992px), les cartes passent en col-md-6 (2 par ligne)
     → plus d'espace, on peut agrandir légèrement l'image */
  .testi-card__col-left {
    flex: 0 0 38%;
  }
}

@media (max-width: 767.98px) {
  /* Passage en colonne */
  /* Utilisation de grid pour réordonner tous les éléments de la carte */
  .testi-card {
    display: grid !important;
    grid-template-columns: 60px 1fr;
    grid-template-areas:
      "avatar author"
      "quote quote"
      "text text"
      "preview preview"
      "label label";
    gap: 0.5rem 1rem;
    padding: 1.25rem 1.25rem 0 1.25rem;
  }

  /* Désactive les conteneurs flex internes pour contrôler leurs enfants en grille */
  .testi-card__col-left, .testi-card__col-right {
    display: contents !important;
  }

  /* Avatar circulaire classique avec positionnement grille */
  .testi-avatar {
    grid-area: avatar;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50%;
    object-position: center top;
  }

  /* Nom de l'auteur à côté de l'avatar */
  .testi-author {
    grid-area: author;
    align-self: center;
    font-size: 0.95rem; 
    font-weight: 700;
    color: var(--color-dark);
    margin: 0;
  }

  /* Reste du contenu */
  .testi-quote-mark { grid-area: quote; margin-top: 0.5rem; justify-self: start; }
  .testi-text { grid-area: text; margin-bottom: 0.5rem; }
  
  .testi-preview {
    grid-area: preview;
    position: static;
    width: 100%;
    height: 120px;
    margin-top: 0.5rem;
    margin-bottom: 1.25rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
  }

  .testi-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Titre du projet, ramené tout en bas avec fond et bordure verte */
  .testi-transform-label {
    grid-area: label;
    position: static;
    border: none;
    border-top: 2px solid var(--color-primary);
    margin: 0 -1.25rem; /* Décale vers la gauche */
    width: calc(100% + 2.5rem); /* Force 100% + compense les paddings de la carte */
    padding: 0.85rem 1.25rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
  }

  .testi-title {
    font-size: 1.3rem;
  }
}


/* ─────────────────────────────────────────
   WHY BEYAFT — Tablette & Mobile
───────────────────────────────────────── */
@media (max-width: 991.98px) {
  /* Sur tablette : passage en colonne pour ne pas écraser l'image */
  .why-card {
    flex-direction: column;
    min-height: auto;
  }

  .why-card__image {
    flex: none;
    height: 220px;
  }

  .why-card__content {
    padding: 1.5rem;
  }
}

@media (max-width: 575.98px) {
  .why-card__image {
    height: 180px;
  }

  .why-card__title {
    font-size: 1.2rem;
  }

  .why-section__heading {
    font-size: 1.3rem;
  }

  .why-card__btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}


/* ─────────────────────────────────────────
   CTA BANNER — Tablette & Mobile
───────────────────────────────────────── */
@media (max-width: 991.98px) {
  .cta-banner__title {
    font-size: 1.5rem;
  }
}

@media (max-width: 575.98px) {
  .cta-banner__btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  .cta-banner {
    padding: var(--spacing-section) 1rem;
  }
}


/* ─────────────────────────────────────────
   FOOTER — Mobile
───────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* Newsletter pleine largeur */
  .footer-newsletter__input,
  .footer-newsletter__btn {
    width: 100%;
  }

  /* Réduit l'espacement global du footer */
  .site-footer .row {
    gap: 2rem 0;
  }

  .footer-col__title {
    margin-bottom: 0.6rem;
  }
}

@media (max-width: 575.98px) {
  /* Logo et tagline centrés sur très petit écran */
  .site-footer .col-lg-3 {
    text-align: center;
  }

  .footer-socials {
    justify-content: center;
  }

  .footer-copyright {
    text-align: center;
  }
}

/* ─────────────────────────────────────────
   SLIDERS HORIZONTAUX — Mobile (< 768px)
───────────────────────────────────────── */
@media (max-width: 767.98px) {
  .slider-mobile-scroll {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Momentum scrolling iOS */
    padding-bottom: 1.5rem !important; /* Espace pour le scrollbar/débordement */
    margin-left: calc(-.5 * var(--bs-gutter-x));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    gap: 1rem;
    scrollbar-width: none; /* Cache la scrollbar sur Firefox */
  }

  /* Cache la scrollbar sur Chrome/Safari/Edge */
  .slider-mobile-scroll::-webkit-scrollbar {
    display: none;
  }

  /* Force la taille des enfants pour simuler le carrousel */
  .slider-mobile-scroll > div {
    flex: 0 0 85% !important; /* Affiche 85% de la carte par défaut */
    max-width: 85% !important;
    scroll-snap-align: center;
    padding-left: 0;
    padding-right: 0;
  }

  /* Pour les témoignages, la largeur est de 100% (un par un complet) */
  .testimonials-section .slider-mobile-scroll > div {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  
  /* Ajoute un padding de sécurité au premier et dernier élément */
  .slider-mobile-scroll > div:first-child {
    margin-left: calc(var(--bs-gutter-x) / 2);
  }
  .slider-mobile-scroll > div:last-child {
    margin-right: calc(var(--bs-gutter-x) / 2);
  }

  /* Pagination Points (Dots) */
  .slider-pagination {
    margin-top: 1rem;
  }
  
  .slider-dot {
    width: 6px;
    height: 6px;
    background-color: var(--color-gray-light, #E0E4E3);
    border-radius: 50%;
    display: inline-block;
    transition: all var(--transition-fast, 0.2s ease);
    cursor: pointer;
  }
  
  .slider-dot.active {
    background-color: var(--color-primary);
    width: 20px;
    border-radius: 10px;
  }
}