@charset "UTF-8";
/* CSS Document */

html {
  scroll-behavior:smooth;
}
body {
  font-family:'Poppins', Avenir, sans-serif;
}
.contact5 {
  font-size:14px;
  color:#a5aeb2;
}
@media screen and (max-width:480px)
{
.contact5 {
  font-family:"Avenir Light", "Avenir Next Ultra Light", "Avenir Black", "Avenir Black Oblique", "Avenir Book", "Avenir Book Oblique", "Avenir Heavy", "Avenir Heavy Oblique", "Avenir Light Oblique", "Avenir Medium", "Avenir Medium Oblique", "Avenir Next Bold", "Avenir Next Bold Italic", "Avenir Next Regular", "Avenir Next Ultra Light Italic";
  font-size:8px;
  color:#a5aeb2; 
}
}
/* Accroche */

.accroche {
  background:#1c1c1d;
  color:#fff;
  text-align:center;
  padding:80px 20px;
}
.accroche .container {
  max-width:1200px;
  margin:0 auto;
}

/* Badge exclusivité */

.badge-exclusivite {
  display:inline-block;
  margin-bottom:20px;
  padding:8px 16px;
  border-radius:20px;
  border:1px solid rgba(223,210,164,0.6);
  color:#d7b645;
  font-size:0.8rem;
  letter-spacing:1px;
}

/* Titre principal */

.accroche h1 {
  font-size:2.5rem;
  font-weight:600;
  line-height:1.2;
  margin-bottom:20px;
  letter-spacing:-1px;
}

/* Sous-texte */

.sous-texte {
  color:#ccc;
  font-size:1.1rem;
  margin-bottom:35px;
  line-height:1.6;
}

/* CTA principal */

.cta-principal {
  width:auto;
  max-width:90%;
  display:inline-block;
  padding:14px 30px;
  border-radius:13px;
  background:#d7b645;
  color:#111;
  font-weight:600;
  text-decoration:none;
  transition:all 0.3s ease;
}
.cta-principal:hover {
  background:#c9a93c;
  color:#111;
  transform:translateY(-2px);
  text-decoration:none;
}

/* Probleme */

.probleme {
  background-color:#252728;
  text-align:center;
  padding-top:40px;
  padding-bottom:40px;
}
.probleme h2 {
  font-size:26px;
  margin-bottom:30px;
  padding-left:15px;
  padding-right:15px;
  color:#d7b645;
  padding-top:30px;
}
.peurs {
  max-width:600px;
  margin-left:auto;
  margin-right:auto;
}
.peur {
  display:flex;
  align-items:flex-start;
  justify-content:flex-start; /* ← important */
  text-align:left;            /* ← important */
  margin-bottom:16px;
  padding-left:15px;
  padding-right:15px;
}
.icone {
  font-size:18px;
  margin-right:10px;
  margin-top:2px;
  flex-shrink:0; /* empêche l’icône de bouger */
}
.texte {
  font-size:17px;
  color:#cccccc;
  line-height:1.5;
}
.normal {
  color:#d7b645;
  font-weight:600;
  margin-top:20px;
}

/* Solution */

.solution {
  width:100%;
}

/* Conteneur flex */

.solution-flex {
  display:flex;
  flex-wrap:wrap;
}

/* Colonne gauche (image) */

.solution-gauche {
  flex:1;
  min-width:300px;
  background:#59460f; /* fond jaune premium 003333 */ 
  display:flex;
  align-items:center;
  justify-content:center;
  padding:60px 20px;
}

/* Image boussole */

.boussole-img {
  width:80%;
  max-width:550px; /* taille réelle de la boussole */
  height:auto;
}

/* Colonne droite (texte) */

.solution-droite {
  flex:1;
  min-width:300px;
  background:#1c1c1d;
  color:#ffffff;
  padding:60px 40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Titre */

.solution-droite h2 {
  font-size:28px;
  margin-bottom:20px;
}

/* Texte */

.solution-texte {
  color:#cccccc;
  margin-bottom:25px;
  line-height:1.6;
  padding-top:20px;
}

/* Liste */

/* Liste solution - version finale */

.solution-liste {
  list-style:none;
  padding-left:0;
  margin-top:15px;
    
  border-radius: 13px;
  border:0.5px solid #5f6467;
  background-color:#2c2e30;
  padding-bottom:10px;
  padding-top:20px;
  
}

.solution-liste li {
  position:relative;
  padding-left:24px;
  margin-bottom:12px;
  color:#e0e0e0;
  font-size:16px;
  line-height:1.6;
  margin-left:20px;
}

/* Puces dorées */

.solution-liste li::before {
  content:"";
  position:absolute;
  left:0;
  top:10px;
  width:8px;
  height:8px;
  background-color:#d7b645;
  border-radius:50%;
}

/* Reponsive mobile */

@media (max-width: 768px) {
.solution-flex {
    flex-direction: column;
}
.solution-gauche,
.solution-droite {
    padding:40px 20px;
}
.solution-droite h2 {
    font-size:22px;
}
.boussole-img {
    max-width:300px;
}
}

/* Offres */

/* Section */

/* Pour supprimer le padding-top en bas de la section */

.offres {
  background-color:#2c2e30;
  padding-top:40px;
  padding-bottom:90px;
  margin-bottom:0;
  position:relative; /* Ajouté pour éviter le débordement horizontal/vertical */
  overflow-y:hidden; /* Important pour masquer tout débordement */
}

/* Logo */

.logo-centre {
  width:90px;
}

/* Cards */

.offre-card {
  background:#1e1f22;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.05);
  position:relative;
  transition:0.3s;
}

/* Mise en avant offre centrale */

.offre-populaire {
  border:1px solid #d7b645;
  transform:scale(1.03);
}

/* Hover subtil */

.offre-card:hover {
  transform:translateY(-5px);
}

/* Badge numéro */

.numero-badge {
  position:absolute;
  left:-15px;
  top:-15px;
  background:#d7b645;
  color:#000;
  font-weight:bold;
  width:32px; /* largeur fixe */
  height:32px; /* hauteur fixe */
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  font-size:14px;
}
/* Offre recommandée */

.badge-reco {
  position:absolute;
  top:12px;
  right:12px;
  background:#d7b645;
  color:#000;
  font-size:12px;
  font-weight:600;
  padding:4px 10px;
  border-radius:20px;
}

/* Image */

.offre-img {
  width:100%;
  height:160px;
  object-fit:contain;
  padding:15px;
}

/* Badge pancarte */

/* Carte offre recommandée */

.offre-card {
  position: relative;
  overflow: visible; /* évite les traînées noires */
}

/* Badge pancarte */

.badge-recommande {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%) rotate(6deg); /* ← penche à droite */
  background: #d4af37;
  color: #000;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
  z-index: 10;
  white-space: nowrap;
}

/* Effet vis */

.badge-recommande::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 30% 30%, #eee, #999);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  z-index: 11;
}

/* Tablette portrait fix */

@media (max-width: 1024px) and (orientation: portrait) {

.badge-recommande {
    width: auto; /* empêche plein écran */
    max-width: 260px; /* largeur propre tablette */
    text-align: center;
    transform: translateX(-50%) rotate(-6deg);
}
}

/* Mobile fix */

@media (max-width: 576px) {

.badge-recommande {
    font-size: 14px;
    padding: 8px 16px;
    max-width: 220px;
    top: -16px; /* léger ajustement mobile */
}
.badge-recommande::before {
    width: 12px;
    height: 12px;
}
}

/* Correction portrait mobile & tablette */

@media (orientation: portrait) {
.badge-recommande {
    left: 50%;
    transform: translateX(-50%) rotate(6deg);
    width: auto;
    max-width: 220px; /* empêche l'étirement */
}
}

/* Ajustements responsive */

@media (max-width: 768px) {
.badge-pancarte {
    font-size: 0.75rem;
    padding: 6px 12px;
    top: -16px;
    left: 15px;
    transform: rotate(-5deg);
}
}
@media (max-width: 480px) {
.badge-pancarte {
    font-size: 0.72rem;
    padding: 5px 10px;
    top: -14px;
    left: 12px;
    transform: rotate(-4deg);
}
}

/* Prix */

.prix {
  font-size:34px;
  font-weight:700;
  color:#d7b645;
  margin:15px 0;
}

/* Liste */

.liste {
  font-size:14px;
  text-align:left;
  padding-left:18px;
  color:#ccc;
}
.liste li {
  margin-bottom:8px;
}

/* Bouton */

.btn-gold {
  background:#d7b645;
  color:#000;
  border-radius:13px;
  padding:14px 34px;  /* plus large */
  font-size:16px;      /* plus lisible */
  font-weight:600;
  border:none;
}
.btn-gold:hover {
  background:#c9a93c;
}
.py-9 {
  padding-top:30px;
  padding-bottom:90px;
}
.haut {
  border-radius:13px;
  border:0.5px solid #5f6467;
  background-color:#2c2e30;
  padding-top:20px;
  /*transition: transform 0.7s ease;*/
  transition-duration:1s;

  /* transitions ciblées */
    
  transition: 
    border-color 0.7s ease,
    padding-left 0.7s ease,
    transform 0.7s ease;
}
.haut:hover {
  border-color:#dfd2a4;
  padding-left:20px;
  /*transition: transform 0.7s ease;*/
  transition-duration:1s;
}
.haut2 {
  border-radius: 13px;
  border: 0.5px solid #dfd2a4;
  background-color: #2c2e30;
  padding-top: 20px;
}
.haut3 {
  border-radius: 13px;
  border: 0.3px solid #97774c; 
  background-color: #343638;
}
.paves {
  border-radius:13px;
  border:0.5px solid #5f6467;
  background-color:#2c2e30;
  padding-top:20px;
}

/* Mobile */

@media (max-width:768px) {
.offre-populaire {
  transform:none;
}
}
.engagement {
  font-size:13px;
  color:#9da3a6;
  margin-top:10px;
}
@media (max-width:768px) {
  .offres .col-lg-4.mb-4 {
    margin-bottom:30px !important;
}
}
.highlight { 
   background:rgba(28, 28, 29, 0.10); /* #55471a */
}
.cta-principal {
  position:relative; /* indispensable */
  display:inline-block;
}
.cta-badge {
  position: absolute;
  color:#000;
  top:-21px; /* ajuste selon rendu */
  left:-23px; /* ajuste selon rendu */
  width:60px; /* petite taille pour ne pas agrandir */
  height:auto;
}

/* Communauté */

.communaute-alt {
  padding:90px 20px;
  text-align:center;

  /* gradient inversé doux */
    
  background:linear-gradient(
    0deg,
    rgba(212,175,55,0.10),
    rgba(0,0,0,0)
);
}

.communaute-alt .container {
  max-width:1000px;
  margin:auto;
}

/* Titres */

.communaute-alt h2 {
  font-size:2.2rem;
  margin-bottom:12px;
}
.communaute-alt .subtitle {
  color:#aaa;
  max-width:650px;
  margin:0 auto 60px;
  line-height:1.6;
}

/* Grid horizontale */

.communaute-alt-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:30px;
}

/* Items */

.alt-item {
  transition:transform 0.25s ease;
}

.alt-item:hover {
  transform:translateY(-6px);
}

/* Icônes grandes */

.alt-icon {
  font-size:3rem;
  margin-bottom:12px;
}

/* Titres items */

.alt-item h3 {
  font-size:1rem;
  color:#ddd;
}

/* Mobile pour bloc 6 */

@media (max-width:768px) {
  .communaute-alt-grid {
   grid-template-columns: repeat(2, 1fr);
}
}
    
.alt-item {
    padding:10px;
  }

  .alt-icon {
    font-size:2.2rem;
  }

  .alt-item h3 {
    font-size:0.95rem;
    line-height:1.3;
  }

/* Faq - Box élégantes */

.faq-section {
  background:#252728;
  padding:80px 0;
}

/* Header */

.faq-header {
  color:#FFF!important;
  font-weight:700;
  margin-bottom:10px;
}
.faq-header p {
  color:#bdbdbd;
  margin-bottom:40px;
}

/* Wrapper */

.faq-wrapper {
  max-width:900px;
  margin:0 auto;
}

/* Item */

.faq-item {
  background:#1f2124; /* légèrement plus foncé que le fond #1c1c1d (trop foncé) */
  padding:22px 24px;
  border-radius:14px;
  margin-bottom:18px;
  transition:transform 0.7s ease, background 0.7s ease;
}
.faq-item:hover {
  background:#23262a;
  transform:translateY(-2px);
  box-shadow:inset 0 -2px 0 rgba(212,175,55,0.4);
  transition:transform 0.7s ease;
}
/* Hover léger desktop */

@media (hover: hover) {
.faq-item:hover {
    background:#23262a;
    transform:translateY(-2px);
}
}

/* Question */

.faq-item h5 {
  color:#ffffff;
  font-weight:600;
  margin-bottom:8px;
  font-size:1.05rem;
}

/* Réponse */

.faq-item p {
  color:#cfcfcf;
  margin:0;
  line-height:1.5;
  font-size:0.95rem;
}

/* Responsive */

@media (max-width:576px) {
.faq-section {
    padding:60px 0;
}
.faq-item {
    padding:18px;
}
}

/* Faq accordion mobile only */

/* Accordion mobile propre */

@media (max-width: 768px) {

.faq-item {
    cursor:pointer;
    position:relative;
}

  /* Icône chevron discrète */
    
.faq-item h5 {
    position:relative;
    padding-right:28px;
}
.faq-item h5::after {
    content:"›";
    position:absolute;
    right:0;
    top:0;
    font-size:22px;
    color:#d4af37;
    transform:rotate(90deg);
    transition:transform 0.25s ease;
}

  /* réponses fermées par défaut */
    
.faq-item p {
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:all 0.25s ease;
}

  /* état ouvert */
    
.faq-item.active p {
    max-height:200px;
    opacity:1;
    margin-top:10px;
}
.faq-item.active h5::after {
    transform:rotate(-90deg);
}
}
/* Responsive */

@media (max-width:576px) {
.faq-item {
    padding:18px;
}
}

/* 1er bouton whatsapp */

.btn-whatsapp {
  height:70px;
  background:#d7b645;
  color:#FFF;
  border-radius:13px;
  padding:12px 26px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  transition:all 0.25s ease;
}

.btn-whatsapp:hover {
  color:#000;
  background:#c9a93c;
  text-decoration:none;
  transform:translateY(-1px);
}
.whatsapp {
  color:#000;
}
.whatsapp:hover {
  color:#FFF;
}

/* Bouton whatsapp - mobile */

.btn-whatsapp {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background-color:#d4af37;
  color:#000;
  border-radius:13px;  /* Forme arrondie */
  padding:18px 28px;  /* Espace interne pour rendre le bouton plus large */
  text-decoration:none;
  font-weight:600;
  font-size:1.05rem;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow:0px 6px 18px rgba(0, 0, 0, 0.25);
}

/* Icône */

.btn-whatsapp img {
  width:48px;  /* Taille de l'icône */
  height:48px;
}

/* Texte sur 2 lignes */

.btn-whatsapp span {
  text-align:left;
  line-height:1.3;
  display:block;
}

/* Effet au survol */

.btn-whatsapp:hover {
  transform:translateY(-2px);  /* Légère animation de survol */
  box-shadow:0px 10px 22px rgba(0, 0, 0, 0.3);
}

/* Bouton whatsapp - mobile */

/* Mobile : taille et alignement optimisé */

@media (max-width:576px) {
.btn-whatsapp {
    width:90%;  /* Pleine largeur sur mobile */
    padding:16px 20px;  /* Ajuster pour mobile */
}

.btn-whatsapp img {
    width:40px;  /* Icône plus petite pour mobile */
    height:40px;
}

  .btn-whatsapp span {
    font-size: 0.9rem;  /* Taille du texte réduite pour mobile */
    text-align: center;  /* Centrer le texte */
}
}

/* Section contact */

/* Section formulaire de contact */

.contact-form {
    background-color:#252728; /* Fond sombre, en harmonie avec la page */
    padding:40px 30px;
    border-radius:10px;
    box-shadow:0 2px 10px rgba(0, 0, 0, 0.2);
    margin-top:40px;
    width:100%;
    max-width:650px;
    margin:0 auto;
}

/* Champs du formulaire */

.contact-form input,
.contact-form textarea {
    width:100%;
    padding:12px;
    margin-bottom:20px;
    background-color:#43464b; /* Fond gris foncé pour les champs */
    color:#fff;
    border:1px solid #666; /* Bordure grise douce */
    border-radius:8px;
    font-size:16px;
}

/* Placeholder */

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color:#bbb; /* Texte placeholder légèrement plus clair */
}

/* Label des champs */

.contact-form label {
    color:#fff;
    font-size:16px;
    font-weight:bold;
    margin-bottom:5px;
    display:block;
}

/* Bouton d'envoi du formulaire */

.contact-form button {
    background-color:#d7b645; /* Jaune comme les autres boutons */
    color:#000;
    font-size:18px;
    padding:15px 30px;
    font-weight:600;
    border:none;
    border-radius:8px;
    cursor:pointer;
    width:100%;
    transition:background-color 0.3s ease;
}
.contact-form button:hover {
    background-color:#c9a93c; /* Jaune plus foncé au survol */
}

/* Message d'info pour les champs Whatsapp ou Email */

.contact-form .info-message {
    font-size:14px;
    color:#aaa;
    margin-bottom:10px;
}

/* Footer */

.footer {
  background-color:#252728;
  color:#fff;
  padding:40px 20px;
  text-align:center;
}

.footer-logo {
  max-width:150px;
  margin-bottom:20px;
}

.footer-info p {
  font-size:14px;
  margin:10px 0;
}

.footer-link {
  text-decoration:none;
  font-weight:bold;
  color:#d7b645;
}
.footer-link:hover {
  text-decoration:none;
  color:#FFF;
}

.footer-socials {
  margin-top:20px;
}

.footer-socials .social-icon {
  display:inline-block;
  margin:0 10px;
  color:#FFF;
  text-decoration:none;
}

.footer-socials img {
  width:30px;
  height:30px;
  transition:transform 0.3s ease;
}

.footer-socials img:hover {
  transform:scale(1.1);
}