{% extends 'base.html.twig' %}

{% block title %}
	SS BODY MIND
{% endblock %}
{% block stylesheets %}

{{parent()}}
<style>
 


.lead {
    font-size: 1.1rem;
    line-height: 1.8;
}
.header-logo {
    visibility: visible !important;
}
/* Buttons */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    font-weight: 600;
    padding: 0.75rem 2rem;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
}

.btn-light:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Navigation Bar */
.navbar {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
    font-size: 1.5rem;
    color: var(--white) !important;
}

.navbar-brand i {
    color: var(--secondary-color);
    margin-right: 0.5rem;
}

.nav-link {
    color: #d1d5db !important;
    transition: color 0.3s ease;
    font-weight: 500;
}

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

/* Hero Section */
.hero-section {
   
       background: linear-gradient(180deg, rgba(66, 86, 62, 0.3) 0%, rgba(90, 120, 80, 0.75) 50%, rgba(66, 86, 62, 0.3) 100%);
    color: var(--white);
    min-height: 100vh;
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    opacity: 0.5;
    z-index: 1;
}

.hero-content, .hero-section img {
    position: relative;
    z-index: 2;
}

.hero-section .highlight {
    color: var(--secondary-color);
}

.hero-section img {
    border: 5px solid rgba(255, 255, 255, 0.1);
}

/* Section Spacing */
.py-section {
    padding: 80px 0;
}

/* SECTION */
.philosophie {
  padding: 30px 20px;
  text-align: center;
  color: white;
}

/* TITLE */
.section-title h2 {
  font-size: 42px;
  font-weight: 700;
}

.underline {
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #22c55e, #4ade80);
  margin: 15px auto 50px;
  border-radius: 10px;
}

/* CARD */
.philo-card {
  max-width: 600px;
  margin: auto;
  padding: 40px 30px;
  border-radius: 20px;

  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);

  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  text-align: center;
  transition: 0.3s;
}

.philo-card:hover {
  transform: translateY(-8px);
}

/* TEXT */
.name {
  font-size: 22px;
  font-weight: 700;
}

.role {
  color: #41553c;
  font-weight: 600;
  margin-bottom: 20px;
}

/* LIST */
.features {
  list-style: none;
  padding: 0;
  margin: 0 0 25px;
}

.features li {
  margin-bottom: 10px;
  position: relative;
  padding-left: 20px;
  font-size: 14px;
     color: #41553c;
}

.features li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #41553c;
}

/* DIVIDER */
.divider {
  width: 40px;
  height: 2px;
  background: #444;
  margin: 20px auto;
}

/* BRAND */
.brand {
  font-size: 18px;
  font-weight: 600;
}

.desc {
  font-size: 14px;
  color: #838383;
  margin-top: 5px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .section-title h2 {
    font-size: 30px;
  }

  .philo-card {
    padding: 30px 20px;
  }
}

@media (max-width: 768px) {
    .py-section {
        padding: 60px 0;
    }
}

/* Section Titles */
.section-title {
    margin-bottom: 3rem;
}

.section-title h2 {
    position: relative;
    display: inline-block;
}

.title-underline {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    margin: 1.5rem auto;
    border-radius: 2px;
}

/* About Section */
.bg-light {
    background-color: var(--light-bg);
}

.credential-list {
    list-style: none;
}

.credential-list li {
    padding: 0.75rem 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    text-align:justify;
}

.credential-list i {
    margin-right: 0.75rem;
    color: var(--secondary-color);
}

/* Service Cards */
.service-card {
    background: var(--white);
    padding: 2.5rem 2rem;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: all 0.3s ease;
    border-top: 4px solid var(--primary-color);
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.service-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 2rem;
    color: var(--white);
}

.service-card h4 {
    color: var(--text-dark);
    margin-top: 1.5rem;
}

.service-card p {
    font-size: 0.95rem;
    line-height: 1.7;
}

/* Philosophy Section */
.bg-philosophy {
     background: linear-gradient(180deg, rgba(66, 86, 62, 0.3) 0%, rgba(90, 120, 80, 0.75) 50%, rgba(66, 86, 62, 0.3) 100%);
    position: relative;
}

.philosophy-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.philosophy-card:hover {
    transform: scale(1.02);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}

.philosophy-image-wrapper {
    overflow: hidden;
    max-height: 400px;
}

.philosophy-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.philosophy-card:hover .philosophy-image-wrapper img {
    transform: scale(1.05);
}

.philosophy-text {
        background: #f7fded;
        color:#41553c;
}

/* Testimonial Cards */
.testimonial-card {
    background: var(--white);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border-left: 4px solid var(--secondary-color);
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.stars {
    color: #fbbf24;
    font-size: 1rem;
}

.avatar {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.5rem;
    flex-shrink: 0;
}

/* Contact Cards */
.contact-card {
    background: var(--white);
    padding: 2.5rem 2rem;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.contact-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 2rem;
    color: var(--white);
}

/* Form Styles */
.form-control {
    border: 2px solid var(--border-light);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
}

.form-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
}




.slide-in-down {
    animation: slideInDown 0.6s ease-out;
}





/* Responsive Design */
@media (max-width: 768px) {
    .display-4 {
        font-size: 2.5rem;
    }

    .display-5 {
        font-size: 2rem;
    }

    .hero-section {
        min-height: auto;
        padding: 40px 0;
    }

    .hero-section .row {
        flex-direction: column-reverse;
    }

    .hero-content {
        margin-top: 2rem;
    }

    .hero-section img {
        max-height: 400px;
        object-fit: cover;
    }

    .service-card {
        margin-bottom: 1rem;
    }

    .section-title {
        margin-bottom: 2rem;
    }

    .credential-list li {
        font-size: 12px;
    }
    .credential-list {
       padding-left: 14px !important;
       
    }

    .service-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .contact-icon {
        width: 70px;
        height: 70px;
        font-size: 1.5rem;
    }

.pic-Philo{
    width:100% !important;
}
    .navbar-collapse {
        margin-top: 1rem;
    }

    .nav-link {
        padding: 0.5rem 0 !important;
        border-bottom: 1px solid rgba(209, 213, 219, 0.2);
    }

    .nav-link:last-child {
        border-bottom: none;
    }

    .philosophy-card {
        margin: 0 auto;
    }

    .philosophy-image-wrapper {
        max-height: 300px;
    }

    .philosophy-text {
        padding: 2rem !important;
    }

    .philosophy-text p {
        font-size: 0.95rem;
    }

    .lead {
        font-size: 1rem;
    }

    .btn-lg {
        padding: 0.6rem 1.5rem;
        font-size: 0.95rem;
    }
}

.text-primary{
     color: rgb(65 85 60) !important;
}
   
@media (max-width: 576px) {
    .display-4 {
        font-size: 2rem;
    }

    .display-5 {
        font-size: 1.75rem;
    }

    .hero-section {
        padding: 30px 0;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .py-section {
        padding: 40px 0;
    }

    .service-card {
        padding: 2rem 1.5rem;
    }

    .contact-card {
        padding: 2rem 1.5rem;
    }

    .hero-section img {
        border-width: 3px;
    }

    .title-underline {
        width: 60px;
    }

    .section-title h2 {
        font-size: 1.75rem;
    }

    .testimonial-card {
        padding: 1.5rem;
    }

    .avatar {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

   

    
    
        .hero-section {
        padding: 70px 0;
    }
}

    .h3,.text-muted.mb-4.fw-bold{
       color: #41553c;
    }
    
    
  /* =========================
   SCROLL REVEAL ANIMATION
========================= */

/* Base hidden state */
.reveal {
  opacity: 0;
  transform: translateY(80px) scale(0.95);
  filter: blur(6px);
  transition:
    opacity 0.8s ease-out,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.6s ease-out;
  will-change: opacity, transform, filter;
}

/* Visible state */
.reveal.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* =========================
   OPTIONAL DIRECTIONS
========================= */

/* Left */
.reveal-left {
  transform: translateX(-80px) scale(0.95);
}

/* Right */
.reveal-right {
  transform: translateX(80px) scale(0.95);
}

/* Up (default but stronger) */
.reveal-up {
  transform: translateY(80px) scale(0.95);
}

/* Reset when visible */
.reveal.show.reveal-left,
.reveal.show.reveal-right,
.reveal.show.reveal-up {
  transform: translate(0, 0) scale(1);
}

/* =========================
   DELAYS (for stagger effect)
========================= */

.reveal.delay-1 { transition-delay: 0.2s; }
.reveal.delay-2 { transition-delay: 0.4s; }
.reveal.delay-3 { transition-delay: 0.6s; }

/* =========================
   MOBILE OPTIMIZATION
========================= */

@media (max-width: 768px) {
  .reveal {
    transform: translateY(50px) scale(0.97);
    transition: all 0.6s ease-out;
  }

  .reveal-left,
  .reveal-right {
    transform: translateY(50px) scale(0.97); /* simpler on mobile */
  }
}

/* =========================
   REDUCE MOTION (accessibility)
========================= */

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

{% endblock %}

{% block body %}
   <!-- Hero Section -->
    <section id="home" class="hero-section d-flex align-items-center justify-content-center">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 col-md-12 reveal reveal-right">
                    <div class="mb-4">
                        <h1 class="display-4 fw-bold text-white mb-3">
                            SS <span class="highlight">Body & Mind</span>
                        </h1>
                        <p class="lead text-light mb-3">
                            Centre de Nutrition, amincissement, de sport et de bien-être holistique de la femme.
                        </p>
                        <p class=" text-light mb-4 fst-italic">
                            "Smile and breathe. Take care of yourself."
                        </p>
                     
                    </div>
                </div>
                <div class="col-lg-6 col-md-12 reveal reveal-left">
                    <img src="https://ssbodymind.gebanalysis.cloud/images/pic-not-die2.jpg" alt="Wellness Professional" class="img-fluid rounded-3 shadow-lg ">
                </div>
            </div>
        </div>
    </section>

    <!-- About Section -->
    <section id="parcours" class="py-section bg-light">
        <div class="container">
            <div class="section-title text-center mb-3">
                <h2 class="display-5 fw-bold">Mon Parcours</h2>
                <div class="title-underline"></div>
            </div>

            <div class="row align-items-center">
                <div class="col-lg-6 col-md-12 mb-4 mb-lg-0 reveal reveal-right">
                    <img src="https://ssbodymind.gebanalysis.cloud/images/slider3.webp" alt="Professional Portrait" class="img-fluid rounded-3 shadow-lg ">
                </div>
                <div class="col-lg-6 col-md-12 reveal reveal-left">
                    <h3 class="h3 fw-bold mb-3">Salwa SLIMANI HESSISSEN</h3>
                    <p class="text-muted mb-4 fw-bold">NUTRITIONNISTE</p>
                    
                    <ul class="credential-list mb-4">
                        <li><i class="fas fa-check-circle text-primary"></i> Executive MBA Ponts et Chaussées</li>
                        <li><i class="fas fa-check-circle text-primary"></i> Master en Marketing et Communication à Boston University</li>
                        <li><i class="fas fa-check-circle text-primary"></i> Diplôme Universitaire en Micronutrition à l'Institut Européen de Diététique et Micronutrition formée par Dr. Didier Chos</li>
                        <li><i class="fas fa-check-circle text-primary"></i> Certifiée Coach Sportif aux Etats Unis</li>
                        <li><i class="fas fa-check-circle text-primary"></i> Professeur Universitaire Marketing et Management de la Santé ISCAE</li>
                    </ul>

                    <p class="text-dark lead fst-italic">
                        "Une passionnée du bien être, du partage et d'une attitude positive pour aller de l'avant."
                    </p>
                    <p class="text-secondary">
                        Smile and breathe. Take care of yourself.
                    </p>
                </div>
            </div>
        </div>
    </section>
     <!-- About Section -->
    <section id="nutrition" class="py-section bg-light" style="background-color: rgba(var(--bs-light-rgb) 248, 219, 250, var(--bs-bg-opacity)) !important;">
        <div class="container">
            <div class="section-title text-center mb-3">
               <h2 class="fw-bold">Notre Concept chez SS Nutrition</h2>
            <p class="text-muted" style=" color: #41553c !important;">
                Approche globale 360°
            </p>
                <div class="title-underline"></div>
            </div>

            <div class="row align-items-center">

    <!-- TEXT -->
    <div class="col-lg-6 col-md-12 order-2 order-lg-1 reveal reveal-right">
        
        <ul class="credential-list mb-4">
            <li><i class="fas fa-check-circle text-primary"></i> Alimentation saine et équilibrée : Sans frustration ni privation.</li>
            <li><i class="fas fa-check-circle text-primary"></i> Hydratation : Minimum 2L d’eau par jour.</li>
            <li><i class="fas fa-check-circle text-primary"></i> Dépense énergétique : Bouger régulièrement.</li>
            <li><i class="fas fa-check-circle text-primary"></i> Sommeil : Bien dormir pour récupérer.</li>
            <li><i class="fas fa-check-circle text-primary"></i> Psychonutrition : Garder le plaisir de manger.</li>
            <li><i class="fas fa-check-circle text-primary"></i> Technologie : Solutions modernes pour de meilleurs résultats.</li>
        </ul>

        <p class="text-dark lead fst-italic">
            "SS Nutrition fait des bilans et vous propose un programme sur mesure, ciblé pour atteindre vos objectifs."
        </p>

    </div>

    <!-- IMAGE -->
    <div class="col-lg-6 col-md-12 mb-4 mb-lg-0 order-1 order-lg-2 reveal reveal-left">
        <img src="https://ssbodymind.gebanalysis.cloud/images/pic-not-die2.jpg"
             alt="Professional Portrait"
             class="img-fluid rounded-3 shadow-lg ">
    </div>

</div>
        </div>
    </section>

     <section id="philosophie" class="py-section bg-light">
        <div class="container">

            <div class="row align-items-center">
                <div class="col-lg-6 col-md-12 mb-4 mb-lg-0 reveal reveal-right">
                    <img src="https://ssbodymind.gebanalysis.cloud/images/slide22.webp" alt="Professional Portrait" class="img-fluid rounded-3 shadow-lg  pic-Philo" style="width:90%;">
                </div>
                <div class="col-lg-6 col-md-12 reveal reveal-left">
                    <h3 class="h3 fw-bold mb-3">Notre Philosophie</h3>
                    
                    <ul class="credential-list mb-4">
                        <li>
                            Manger équilibré et faire une activité physique nous aideraient à mieux vivre et à mieux passer l'cap avec toutes les difficultés que nous menons tous les jours. 
                            En tant que professionnelle du secteur de la santé, je suis consciente à quel point la nutrition joue un rôle très important pour tous.
                            On ne peut pas dissocier l'activité physique de la nutrition. C'est une hygiène de vie qu'il faut mener au long terme et à respecter tout au long de sa vie.
                        </li>
                        <li>
                            La combinaison harmonieuse de l'activité physique et l'alimentation favorise une condition physique optimale et améliore la performance. 
                            Pour parvenir à ce résultat, une alimentation équilibrée et variée est indispensable.
                        </li>
                        
                      
                    </ul>

                    <p class="text-dark lead fst-italic">
                       "Nutrition is not just a diet – it's a lifestyle."
                    </p>
                  
                </div>
            </div>
        </div>
    </section>
{#<section class="philosophie bg-light">#}
{#    <div class="container">#}


{#        <div class="philo-card">#}

{#            <h4 class="name">Salwa SLIMANI HESSISSEN</h4>#}
{#            <div class="divider"></div>#}
{#            <p class="role">NUTRITIONNISTE</p>#}

{#            <ul class="features">#}
{#                <li>Spécialisée en Micronutrition IEDM</li>#}
{#                <li>Soins Minceur / Raffermissement</li>#}
{#                <li>Anti-cellulite</li>#}
{#                <li>Professeur universitaire ISCAE</li>#}
{#                <li>Master Management de la Santé</li>#}
{#            </ul>#}

{#            <h5 class="brand" style="color:black;">SS Nutrition</h5>#}
{#            <p class="desc">#}
{#                Centre de nutrition, soins amincissants, anti-cellulite, anti-âge#}
{#            </p>#}

{#        </div>#}

{#    </div>#}
{#</section>#}
   

  
   


{% endblock %}


{% block javascripts %}

	{{parent()}}

<script>
  const reveals = document.querySelectorAll('.reveal');

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('show');
        observer.unobserve(entry.target); // animate once only
      }
    });
  }, {
    threshold: 0.50
  });

  reveals.forEach(el => observer.observe(el));
</script>

{% endblock %}
