/* VARIABLES GLOBALES */

:root {

  --primary: #0056D6;

  --secondary: #4FA3FF;

  --accent: #27AE60;

  --dark: #0a0a0a;

  --light: #ffffff;

  --bg: #f5f6fa;

  --text-dark: #333;

}



/* RESET & BODY */

body {

  margin: 0;

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  background: #EFEFEF;

  color: var(--text-dark);

}

.footer{color:black;}



/* TITRES */

h1, h2 {

  margin-top: 0;

}

h1 {

  font-size: 44px;

  font-weight: 900;

  background: linear-gradient(90deg, var(--primary), var(--secondary));

  -webkit-background-clip: text;

  color: transparent;

}

h2 {

  font-size: 28px;

  font-weight: 700;

  margin-bottom: 10px;

  position: relative;

}

h2::after {

  content: "";

  width: 50px;

  height: 4px;

  background: var(--primary);

  position: absolute;

  left: 0;

  bottom: -5px;

  border-radius: 4px;

}

/* ==========================================================================

   STYLISATION DES SECTIONS

   ========================================================================== */



.section-header {

    text-align: center;

    max-width: 700px;

    margin: 0 auto 50px auto;

font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

}



.section-subtitle {

    font-size: 13px;

    text-transform: uppercase;

    letter-spacing: 2px;

    color: var(--accent);

    font-weight: 600;

    display: block;

    margin-bottom: 10px;

font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

}



.section-title {

    font-size: 32px;

    color: var(--primary);

    line-height: 1.3;

font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

}



.header-divider {

    width: 60px;

    height: 3px;

    background-color: var(--accent);

    margin: 20px auto 0 auto;

    border-radius: 2px;

}



/* LIENS */

a.lien {

  color: var(--primary);

  text-decoration: none;

  position: relative;

}

a.lien::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -2px;

  width: 0%;

  height: 2px;

  background: var(--primary);

  transition: width 0.3s ease;

}

a.lien:hover::after {

  width: 100%;

}



/* HEADER */

header {

  padding: 40px 10px;

  text-align: center;

  background: var(--light);

}

header h1 {

  margin: 0;

  font-size: 2.5rem;

}

header p {

  margin-top: 10px;

  font-size: 1.2rem;

}



/* CONTENEUR */

.container {

  margin: 0 auto;

  padding: 60px 20px;

}

/* SECTIONS PLEINE LARGEUR */

.section {

  background: var(--light);

  padding: 80px 20px; /* 80px d'espace en haut/bas, 20px sur les côtés pour mobile */

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* On a supprimé le border-radius, le box-shadow et le margin */

}



.section:nth-of-type(even) {

  background: var(--bg);

}







/* BOUTONS */

a.btn, form button, .lien-bouton {

  display: inline-block;

  padding: 15px 28px;

  background: var(--accent);

  color: var(--light);

  text-decoration: none;

  font-size: 1.1rem;

  border-radius: 8px;

  margin-top: 15px;

  font-weight: bold;

  transition: 0.2s;

}

a.btn:hover, , .lien-bouton:hover, form button:hover {

  background: #1e874b;

}









/* LISTES */

ul {

  list-style: none;

  padding-left: 0;

}



ul li {

  position: relative;

  padding-left: 35px;

  margin: 12px 0;

  line-height: 1.7;

}



ul:not(.nav-menu, .dropdown-menu) li::before {

  content: "✓";

  position: absolute;

  left: 0;

  color: var(--accent);

  font-weight: bold;

  font-size: 1.3rem;

  width: 24px;

  height: 24px;

  background: rgba(39, 174, 96, 0.1);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

}





/* IMAGES & GALERIE */

.gallery {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 30px;

  margin-top: 30px;

}



.gallery-item {

  background: var(--light);

  border-radius: 16px;

  overflow: hidden;

  box-shadow: 0 4px 15px rgba(0,0,0,0.08);

  transition: var(--transition);

}



.gallery-item img {

  width: 100%;

  height: 220px;

  object-fit: cover;

  transition: var(--transition);

}



.gallery-item:hover {

  transform: translateY(-8px);

  box-shadow: 0 12px 35px rgba(0,0,0,0.15);

}



.gallery-item:hover img {

  transform: scale(1.1);

}



/* FLOAT IMG DYNAMIQUE */

.float-3d {

  width: 160px;

  margin: auto;

  animation: float 4s ease-in-out infinite;

  transform-origin: center;

}

@keyframes float {

  0% { transform: translateY(0px) rotateY(0deg); }

  50% { transform: translateY(-10px) rotateY(5deg); }

  100% { transform: translateY(0px) rotateY(0deg); }

}



/* FOOTER */

footer {

  text-align: center;

  padding: 30px;

  margin-top: 30px;

  color: #777;

}



/* NOTIFICATIONS */

.notif-success {

  position: fixed;

  bottom: 20px;

  left: 20px;

  background: #2ecc71;

  color: var(--light);

  padding: 14px 18px;

  padding-right: 32px;

  border-radius: 6px;

  box-shadow: 0 4px 10px rgba(0,0,0,0.25);

  font-size: 0.95rem;

  opacity: 1;

  transform: translateY(0);

  transition: opacity .3s ease, transform .3s ease;

  z-index: 9999;

}

.notif-success.hidden {

  opacity: 0;

  transform: translateY(10px);

  pointer-events: none;

}

.notif-success .close-btn {

  position: absolute;

  top: 4px;

  right: 6px;

  font-weight: bold;

  font-size: 20px;

  cursor: pointer;

}

.notif-success .close-btn:hover {

  color: #e6e6e6;

}



.faq {

  max-width: 1200px;

  margin: 20px auto;

  padding: 0 20px;

}



.faq__title {

  font-weight: 800;

  margin-bottom: 30px;

}



.faq__item {

  border-bottom: 1px solid #ddd;

  padding: 12px 0;

}



.faq__question {

  width: 100%;

  background: none;

  border: none;

  text-align: left;

  padding: 12px 0;

  font-size: 1.1rem;

  font-weight: 600;

  cursor: pointer;

  position: relative;

}



.faq__question::after {

  content: "+";

  position: absolute;

  right: 0;

  color: var(--primary);

  top: 50%;

  transform: translateY(-50%);

  font-weight: bold;

  font-size: 20px;

  transition: .3s;

}



.faq__item.active .faq__question::after {

  content: "–";

  color: var(--primary);

}



.faq__answer {

  max-height: 0;

  overflow: hidden;

  transition: max-height .35s ease;

  font-size: 0.95rem;

  line-height: 1.6;

  color: #444;

}



.faq__item.active .faq__answer {

  max-height: 200px;

}





/* Global Widget Position */

#wc-widget {

    position: fixed;

    bottom: 20px;

    right: 20px;

    z-index: 9999;

    font-family: Arial, sans-serif;

}



/* Floating bubble */

/* Bulle WhatsApp */

#wc-bubble {

  position: fixed;

  bottom: 20px;

  right: 20px;

  text-shadow: 2px 2px 5px rgba(0, 0, 0, 1);

  background: #25D366;

  color: #fff;

  font-weight: 600;

  padding: 12px 18px;

  border-radius: 50px;

  display: flex;

  align-items: center;

  gap: 8px;                 /* espace entre emoji & texte */

  font-size: 25px;

  line-height: 1;

  cursor: pointer;

  box-shadow: 0 4px 12px rgba(0,0,0,0.2);

  z-index: 9999;

  user-select: none;

  white-space: nowrap;       /* empêche le retour à la ligne */

}



/* effet hover */

#wc-bubble:hover {

  background: #1db956;

  transform: translateY(-2px);

}



/* transition smooth */

#wc-bubble {

  transition: background 0.25s ease, transform 0.25s ease;

}





/* Chat box */

#wc-box {

    width: 320px;

    background: #fff;

    border-radius: 14px;

    box-shadow: 0 6px 20px rgba(0,0,0,0.25);

    overflow: hidden;

    animation: fadeIn .3s ease;

}

#wc-box.hidden { display: none; }



/* Header */





.wc-header {

    display: flex;

    align-items: center;

    flex-direction: column; 

    gap: 10px;

    background: #0077ff;

    color: white;

    padding: 14px;

    position: relative;

}

.wc-header p{

   display: block;

    font-size: 0.8em;         

    margin: 0;                

    opacity: 0.9;

}



.wc-logo {

    width: 60%;

    height: auto;

    margin: 0;

}

#wc-close {

    position: absolute;

    top: 10px;

    right: 14px;

    cursor: pointer;

    font-size: 20px;

    opacity: .8;

}

#wc-close:hover { opacity: 1; }



/* Content */

.wc-body { padding: 14px; }

.wc-msg {

    font-size: .9rem;

    color: #444;

}

#wc-input {

    width: 100%;

    padding: 10px;

    border: 1px solid #ddd;

    border-radius: 6px;

    resize: none;

    height: 80px;

    margin-top: 8px;

}

#wc-send {

    width: 100%;

    margin-top: 10px;

    padding: 12px;

    background: #1ebe57;

    border: none;

    border-radius: 8px;

    color: white;

    font-weight: bold;

    font-size: 1rem;

    cursor: pointer;

    transition: background .2s;

}

#wc-send:hover { background: #19a34c; }



@keyframes fadeIn { from {opacity:0;transform:translateY(10px);} to {opacity:1;transform:translateY(0);} }





/* RESPONSIVE */

@media (min-width: 768px) {

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

  .hero-logo { width: 180px; }

}



.contact-info {

            background-color: #eef6ff;

            padding: 15px;

            border-radius: 5px;

            list-style: none;

        }





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

footer {

  text-align: center;

  padding: 50px 20px;

  margin-top: 60px;

  background: var(--dark);

  color: var(--light);

}



.footer {

  color: var(--light);

}



footer a {

  color: var(--secondary);

  text-decoration: none;

  transition: var(--transition);

}