* {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-decoration: none;
    padding: 0;
    margin: 0;
  }

  :root {
    --dark-bg: #1F2839;
    --gold-color: #9C8052;
    --text-light: #e8e8e8;
  }

  body {
    background-color: #ffffff;
  }

  .navbar {
    background-color: var(--dark-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }

  .navbar-brand {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text-light) !important;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .brand-logo {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--text-light);
  }

  .navbar-nav .nav-link,
  .navbar-nav .nav-link1 {
    color: var(--text-light) !important;
    margin: 0 0.5rem;
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative;
    text-decoration: none;
  }

  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link1:hover {
    color: var(--gold-color) !important;
  }

  .navbar-nav .nav-link.active {
    color: var(--gold-color) !important;
  }

  .nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--gold-color);
    transition: width 0.3s ease;
  }

  .nav-link:hover::after {
    width: 100%;
  }

  .dropdown-menu {
    background-color: #252d3d;
    border-color: var(--gold-color);
  }

  .dropdown-menu .dropdown-item {
    color: var(--text-light);
    transition: all 0.3s ease;
  }

  .dropdown-menu .dropdown-item:hover {
    background-color: var(--gold-color);
    color: var(--dark-bg);
  }

  .btn-contact {
    background-color: var(--gold-color);
    color: var(--dark-bg);
    border: none;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
  }

  .btn-contact svg {
    color: var(--text-light);
  }

  .btn-contact:hover {
    background-color: #c9b86a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(168, 148, 95, 0.3);
    color: var(--dark-bg);
  }

  .phone-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .contact-section {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    color: var(--text-light);
  }

  .contact-label {
    font-size: 0.75rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .contact-number {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-light);
  }

  .navbar-toggler {
    border-color: var(--gold-color);
  }

  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23a8945f' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
  /* ============================= */
  /*      ANIMATIONS DECOblinds    */
  /* ============================= */

  /* Variables globales */
  :root {
    --anim-fast: 200ms;
    --anim-medium: 420ms;
    --anim-slow: 700ms;
    --easing: cubic-bezier(.2,.9,.3,1);
  }
  
  /* Accessibilité : désactive les animations si l'utilisateur préfère */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 1ms !important;
      transition-duration: 1ms !important;
      scroll-behavior: auto !important;
    }
  }
  
  /* ---------- HERO ---------- */
  .hero-parallax {
    position: relative;
    overflow: hidden;
  }
  
  .hero-parallax-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translateY(0);
    will-change: transform;
    transition: transform 450ms var(--easing);
    filter: blur(2px);
    transform-origin: center;
  }
  
  .hero-overlay {
    position: absolute;
    inset: 0;

  }
  /* Force images hero nettes (annule les blur hérités) */
  .decoblinds-hero .slide img,
  .hero-parallax-img {
    filter: none !important;        /* annule les blur */
    image-rendering: auto;          /* pas de scaling pixelisé */
    transform: translateY(0) scale(1.02); /* conserve léger scale si tu veux parallax */
    backface-visibility: hidden;    /* aide parfois le rendu GPU */
  }

  /* Si tu veux enlever toutes les règles floues globales sur .hero-parallax-img */
  .hero-parallax-img {
    filter: none !important;
  }

  .hero-content {
    position: absolute;
    left: 8%;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    z-index: 2;
    max-width: 600px;
  }
  
  /* Texte et bouton du hero qui apparaissent */
  .hero-animate {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--anim-slow) var(--easing), transform var(--anim-slow) var(--easing);
  }
  
  .hero-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Animation "pop" du titre principal */
  .hero-title-animated {
    display: inline-block;
  }
  
  .hero-title-animated.is-visible {
    animation: hero-pop var(--anim-slow) var(--easing) both;
  }
  
  @keyframes hero-pop {
    0% {
      opacity: 0;
      transform: translateY(18px) scale(.995);
    }
    60% {
      opacity: 1;
      transform: translateY(-6px) scale(1.01);
    }
    100% {
      transform: translateY(0) scale(1);
    }
  }
  
  /* ---------- REVEAL GÉNÉRIQUE (fade+slide) ---------- */
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--anim-medium) var(--easing), transform var(--anim-medium) var(--easing);
    will-change: opacity, transform;
  }
  
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* ---------- STAGGER (pour services / icônes) ---------- */
  .stagger-parent {
    --stagger-gap: 80ms;
  }
  
  .stagger-item {
    opacity: 0;
    transform: translateY(12px) scale(.997);
    transition: opacity 360ms var(--easing), transform 360ms var(--easing);
    will-change: opacity, transform;
  }
  
  .stagger-item.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  
  /* ---------- CARDS hover ---------- */
  .card.card-animate {
    transition: transform var(--anim-fast) var(--easing), box-shadow var(--anim-fast) var(--easing);
  }
  
  .card.card-animate:hover {
    transform: translateY(-8px) rotateZ(0.001deg);
    box-shadow: 0 18px 40px rgba(16, 18, 20, 0.12);
  }
  
  /* ---------- TABS (transition douce Bootstrap) ---------- */
  .tab-pane {
    opacity: 1;
    transition: opacity 360ms var(--easing);
  }
  
  .tab-pane.fade-out {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
  }
  
  .tab-pane.fade-in {
    opacity: 1;
    pointer-events: auto;
    position: relative;
  }
  
  /* ---------- PETITES AIDES ---------- */
  .u-translate-up {
    transform: translateY(-6px);
  }
  /* =========================
    DECOBLINDS — ANIMATIONS
    Paste at end of assets/css/style.css
    ========================= */

  /* Variables */
  :root{
    --anim-ease: cubic-bezier(.2,.9,.3,1);
    --anim-fast: 180ms;
    --anim-medium: 420ms;
    --anim-slow: 720ms;
    --gold: #b59563;
    --dark-bg: #1f2839;
  }

  /* Respect user motion preference */
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  }

  /* ===== HERO PARALLAX & CONTENT ===== */
  .hero-parallax { position: relative; overflow: hidden; }
  .hero-parallax-img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transform: translateY(0) scale(1.03);
    transition: transform 520ms var(--anim-ease);
    will-change: transform;
    filter: blur(2px);
  }

  .hero-content {
    position: absolute;
    left: 8%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    max-width: 600px;
  }

  /* hero reveal / pop */
  .hero-animate {
    opacity: 0;
    transform: translateY(18px) scale(.997);
    transition: opacity var(--anim-slow) var(--anim-ease), transform var(--anim-slow) var(--anim-ease);
    will-change: opacity, transform;
  }
  .hero-animate.is-visible { opacity: 1; transform: translateY(0) scale(1); }

  .hero-title-animated { display:inline-block; }
  @keyframes hero-pop {
    0% { opacity: 0; transform: translateY(18px) scale(.995); }
    60% { opacity: 1; transform: translateY(-6px) scale(1.01); }
    100% { transform: translateY(0) scale(1); }
  }
  .hero-title-animated.is-visible { animation: hero-pop var(--anim-slow) var(--anim-ease) both; }

  /* ===== GENERIC REVEAL ===== */
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--anim-medium) var(--anim-ease), transform var(--anim-medium) var(--anim-ease);
    will-change: opacity, transform;
  }
  .reveal.is-visible { opacity: 1; transform: translateY(0); }

  /* ===== STAGGER PARENT / ITEMS ===== */
  .stagger-parent { --stagger-gap: 80ms; }
  .stagger-item {
    opacity: 0;
    transform: translateY(12px) scale(.997);
    transition: opacity 360ms var(--anim-ease), transform 360ms var(--anim-ease);
    will-change: opacity, transform;
  }
  .stagger-item.is-visible { opacity: 1; transform: translateY(0) scale(1); }

  /* helper: stagger delay via inline style or via JS */

  /* ===== CARDS & HOVER ===== */
  .card.card-animate {
    transition: transform var(--anim-fast) var(--anim-ease), box-shadow var(--anim-fast) var(--anim-ease);
    transform-origin: center;
  }
  .card.card-animate:hover{
    transform: translateY(-10px) rotateZ(0.001deg);
    box-shadow: 0 22px 44px rgba(14,16,18,0.12);
  }

  /* ===== TAB TRANSITION HELPERS ===== */
  .tab-pane { transition: opacity 320ms var(--anim-ease); }
  .tab-pane.fade-out { opacity: 0; pointer-events: none; position: absolute; width:100%; top:0; left:0; }
  .tab-pane.fade-in { opacity: 1; pointer-events: auto; position: relative; }

  /* ===== SMALL UI FLAVOURS ===== */
  .phone-box { transition: transform 420ms var(--anim-ease), box-shadow 420ms var(--anim-ease); }
  .phone-box:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,0,0,0.12); }

  /* nav link underline (tiny) */
  .nav-link { position: relative; }
  .nav-link::after {
    content: ''; position: absolute; left:0; bottom:-6px; height:2px; width:0; background: var(--gold); transition: width 260ms var(--anim-ease);
  }
  .nav-link:hover::after, .nav-link.active::after { width: 100%; }

  /* small utility (force visible) */
  .u-visible { opacity:1 !important; transform: none !important; transition:none !important; }

  /* ensure images in hero and cards cover */
  .card img, .hero-parallax-img { display:block; width:100%; height:100%; object-fit:cover; }

  /* ensure stagger items are not visible before JS runs (prevents flashes) */
  .stagger-item { visibility: visible; }

  /* End of DECOBLINDS animations CSS */
  /* ===== DECO — main-header-gold-frame (frame dorée animée) ===== */

  :root{
    --accent-4: #b69d74;  /* gold */
  }

  /* utility reset for safe placement */
  .hero-parallax { position: relative; overflow: hidden; }

  /* Frame */
  .main-header-gold-frame{
    position: absolute;
    z-index: 0;
    width: 20em;              /* garde unité em pour ressemblance Webflow */
    height: 30em;
    top: 9em;                 /* position initiale (ajuste si besoin) */
    left: 0em;
    border: 5px solid var(--accent-4);
    border-radius: 1em;
    transform: translate3d(5em, 14em, 0) rotateZ(-70deg) scale3d(1,1,1);
    transform-style: preserve-3d;
    will-change: transform;
    pointer-events: none;     /* ne gêne pas les interactions */
    transition: border-radius 1s cubic-bezier(.165,.84,.44,1), box-shadow 420ms ease;
    box-shadow: 0 10px 10px rgba(21, 22, 24, 0);
    mix-blend-mode: normal;
  }

  /* border radius on hover (desktop) */
  @media (hover: hover) and (pointer: fine) {
    .main-header-gold-frame:hover {
      border-radius: 3em;
      box-shadow: 0 20px 60px rgba(21,22,24,0.10);
    }
  }

  /* responsive adjustments (reduce size on small screens) */
  @media (max-width: 1024px) {
    .main-header-gold-frame {
      width: 15em;
      height: 22em;
      top: 3.2em;
      left: 4.2em;
      transform: translate3d(3.6em, 11em, 0) rotateZ(-68deg) scale3d(1,1,1);
    }
  }
  @media (max-width: 640px) {
    .main-header-gold-frame { display: none; } /* hide on tiny screens */
  }

  /* small helper for dev: show outline if you need to debug */
  /* .main-header-gold-frame { outline: 1px dashed rgba(0,0,0,0.08); } */
  /* ===== EFFET GOLD FRAME SUR LES CARDS DE SERVICES ===== */

  .card-service-wrapper {
    position: relative;
    display: block;
    transition: all 0.6s cubic-bezier(.165, .84, .44, 1);
  }

  .card-service-wrapper .card {
    position: relative;
    z-index: 2;
    transition: all 1.5s cubic-bezier(.165, .84, .44, 1);
    background: white;
  }

  .card-gold-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid #B69D74;
    border-radius: 8px;
    transform: rotate(3deg) scale(0.95);
    opacity: 0;
    transition: all 0.6s cubic-bezier(.165, .84, .44, 1);
    z-index: 1;
    pointer-events: none;
  }

  /* Effet au hover */
  .card-service-wrapper:hover .card-gold-frame {
    transform: rotate(5deg) scale(1.02);
    opacity: 1;
  }

  .card-service-wrapper:hover .card {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(14, 16, 18, 0.15);
  }

  /* Pour le conteneur des services */
  .services-container .card-service-wrapper {
    height: 100%;
  }
  /* ===== ANIMATIONS SPECIFIQUES POUR LES TABS ===== */

  /* Animation fade-left */
  .reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity var(--anim-medium) var(--anim-ease), 
                transform var(--anim-medium) var(--anim-ease);
    will-change: opacity, transform;
  }

  .reveal-left.is-visible {
    opacity: 1;
    transform: translateX(0);
  }

  /* Animation fade-right */
  .reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity var(--anim-medium) var(--anim-ease), 
                transform var(--anim-medium) var(--anim-ease);
    will-change: opacity, transform;
  }

  .reveal-right.is-visible {
    opacity: 1;
    transform: translateX(0);
  }

  /* Délais en cascade pour un effet plus dynamique */
  .reveal-left.is-visible {
    transition-delay: 0.5s;
  }

  .reveal-right.is-visible {
    transition-delay: 0.7s;
  }
  /* ===== EFFET GOLD FRAME POUR LES CARDS NEWS & STUFF ===== */

  .card-news-wrapper {
    position: relative;
    display: block;
    transition: all 0.6s cubic-bezier(.165, .84, .44, 1);
    height: 100%;
  }

  .card-gold-frame-news {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid #B69D74;
    border-radius: 8px;
    transform: rotate(3deg) scale(0.95);
    opacity: 0;
    transition: all 0.6s cubic-bezier(.165, .84, .44, 1);
    z-index: 1;
    pointer-events: none;
    background: rgba(182, 157, 116, 0.03);
  }

  /* Effet au hover pour les cartes news */
  .card-news-wrapper:hover .card-gold-frame-news {
    transform: rotate(5deg) scale(1.02);
    opacity: 1;
  }

  .card-news-wrapper:hover .card {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(14, 16, 18, 0.15);
  }

  /* Adaptation spécifique pour les cartes news */
  .card-news-wrapper .card {
    position: relative;
    z-index: 2;
    transition: all 0.4s cubic-bezier(.165, .84, .44, 1);
    background: white;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* S'assurer que l'image garde ses proportions */
  .card-news-wrapper .card img {
    flex-shrink: 0;
  }

  .card-news-wrapper .card .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  /* Version avec effet plus prononcé (optionnel) */
  .card-gold-frame-news.behind {
    position: absolute;
    top: -8px;
    left: -8px;
    width: calc(100% + 16px);
    height: calc(100% + 16px);
    border: 3px solid #B69D74;
    border-radius: 12px;
    transform: rotate(2deg) scale(0.98);
    opacity: 0;
    transition: all 0.7s cubic-bezier(.165, .84, .44, 1);
    z-index: -1;
    background: rgba(182, 157, 116, 0.05);
  }

  .card-news-wrapper:hover .card-gold-frame-news.behind {
    transform: rotate(6deg) scale(1.05);
    opacity: 1;
    box-shadow: 4px 4px 25px rgba(0, 0, 0, 0.15);
  }
  /* ===== ANIMATIONS POUR LES TEMOIGNAGES EN DEUX TEMPS ===== */

  .testimonial-card-wrapper {
    position: relative;
  }

  .testimonial-content .content-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(.2, .9, .3, 1), 
                transform 0.6s cubic-bezier(.2, .9, .3, 1);
    will-change: opacity, transform;
  }

  /* Quand la carte parente est visible, on anime le contenu avec des délais */
  .stagger-item.is-visible .content-item {
    opacity: 1;
    transform: translateY(0);
  }

  /* Les délais sont gérés par JavaScript via l'attribut data-delay */
  /* Version CSS-only avec delays progressifs */
  .testimonial-content .content-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(.2, .9, .3, 1), 
                transform 0.6s cubic-bezier(.2, .9, .3, 1);
    will-change: opacity, transform;
  }

  .stagger-item.is-visible .content-item {
    opacity: 1;
    transform: translateY(0);
  }

  /* Délais progressifs fixes */
  .stagger-item.is-visible .content-item:nth-child(1) { transition-delay: 0.4s; }
  .stagger-item.is-visible .content-item:nth-child(2) { transition-delay: 0.6s; }
  .stagger-item.is-visible .content-item:nth-child(3) { transition-delay: 0.8s; }
  /* Définir la couleur principale de la maquette */
  :root {
    --faq-accent-color: #8c7851; /* Un brun/or similaire à votre image */
  }

  .faq-section {
    /* Police de base pour la section (si différente du reste du site) */
    font-family: sans-serif; 
  }

  /* Style du titre principal "FAQ" */
  .faq-section h2.fw-bold {
    font-family: 'Georgia', 'Times New Roman', serif; /* Police Serif */
    font-size: 3rem; /* Plus grand */
    color: #333; /* Noir/gris foncé */
  }

  /* Style de l'icône "oo" */
  .faq-section .faq-icon {
    font-family: 'Georgia', 'Times New Roman', serif;
    color: var(--faq-accent-color);
    font-weight: bold;
    font-size: 1.25rem;
    margin: 0.5rem 0 1rem;
    letter-spacing: -0.15em; /* Rapproche les 'o' */
  }

  /* Style du sous-titre */
  .faq-section p {
    font-size: 1rem;
    color: #555; /* Un peu plus foncé que 'text-muted' */
  }

  /*
  * STYLES DE L'ACCORDÉON
  */

  /* Remplacer les icônes flèches de Bootstrap par la bonne couleur */
  .faq-section .accordion {
    /* URL-encodage de la couleur #8c7851 */
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238c7851'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238c7851'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  }

  /* Style de chaque item (la ligne) */
  .faq-section .accordion-item {
    border: none; /* Supprimer toutes les bordures par défaut */
    border-bottom: 1px solid var(--faq-accent-color); /* Ajouter la ligne du bas */
    background-color: transparent; /* Fond transparent */
  }

  /* La maquette montre aussi une ligne sous le dernier élément */
  .faq-section .accordion-item:last-child {
    border-bottom: 1px solid var(--faq-accent-color);
  }

  /* Style du bouton (la question) */
  .faq-section .accordion-button {
    font-family: 'Georgia', 'Times New Roman', serif; /* Police Serif */
    color: var(--accent-3);
    font-weight: bold;
    font-size: 1.1rem;
    font-weight: normal;
    background-color: transparent;
    padding: 1.5rem 0.5rem; /* Plus d'espace vertical */
  }

  /* Supprimer l'ombre bleue au focus */
  .faq-section .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
  }

  /* Style du bouton quand il est ouvert */
  .faq-section .accordion-button:not(.collapsed) {
    color: var(--faq-accent-color);
    background-color: transparent;
    box-shadow: none; /* Supprimer l'ombre moche de l'accordéon */
  }

  /* Style du texte de la réponse */
  .faq-section .accordion-body {
    font-family: sans-serif; /* Revenir à une police sans-serif pour la réponse */
    color: #555;
    text-align: left; /* S'assurer que le corps est aligné à gauche */
  }
  /* ===== STYLES POUR LES TEMOIGNAGES AVEC BULLE ===== */

  .testimonial-card-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 20px;
  }

  .testimonial-bubble {
    position: relative;
    width: 100%;
    margin-bottom: 25px;
    border-radius: 12px !important;
  }

  .testimonial-arrow {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid white;
  }

  .testimonial-author {
    text-align: center;
    width: 100%;
  }

  /* Ajustements pour le contenu de la bulle */
  .testimonial-content {
    text-align: center;
    position: relative;
    z-index: 2;
  }

  /* Style pour la citation */
  .testimonial-content .bi-quote {
    display: block;
    margin-bottom: 15px;
  }

  /* Effet d'ombre et hover pour la bulle */
  .testimonial-bubble {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
    transition: all 0.4s cubic-bezier(.165, .84, .44, 1);
    border: none !important;
  }

  .testimonial-bubble:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15) !important;
  }

  /* Style pour la photo */
  .testimonial-author img {
    border: 3px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
  }

  .testimonial-card-wrapper:hover .testimonial-author img {
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.05);
  }

  /* Ajustement responsive */
  @media (max-width: 768px) {
    .testimonial-author .d-flex {
      flex-direction: column;
      text-align: center;
    }
    
    .testimonial-author .me-3 {
      margin-right: 0 !important;
      margin-bottom: 15px;
    }
    
    .testimonial-bubble {
      margin-bottom: 30px;
    }
    
    .testimonial-arrow {
      bottom: -15px;
    }
  }
  /* Définition des couleurs de la maquette */
  :root {
    --contact-dark-bg: #343c4d; /* Bleu/gris foncé du formulaire */
    --contact-accent: #b8a37d;   /* Or/beige pour les accents */
    --contact-border: #5a637a;   /* Bordure subtile des inputs */
    --contact-dark-text: #212529; /* Texte pour les boutons/icônes */
  }

  .contact-section {
    background-color: #f8f9fa; /* Fond général (équivalent de bg-light) */
    font-family: sans-serif; /* Assurez-vous d'une police de base */
  }

  /*
  * STYLES COLONNE DE GAUCHE (FORMULAIRE)
  */

  .contact-form-wrapper {
    background-color: var(--contact-dark-bg);
    height: 100%;
  }

  /* Titre "Get in touch" */
  .contact-form-wrapper h2 {
    font-family: 'Georgia', 'Times New Roman', serif; /* Police Serif */
    font-weight: 600;
    font-size: 2.5rem;
  }

  /* Icône "oo" */
  .contact-section .contact-icon {
    font-family: 'Georgia', 'Times New Roman', serif;
    color: var(--contact-accent);
    font-weight: bold;
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    letter-spacing: -0.15em; /* Rapproche les 'o' */
  }

  /* Style des champs de formulaire */
  .contact-form-wrapper .form-control {
    background: transparent;
    border: 1px solid var(--contact-border);
    color: #fff;
    border-radius: 0; /* Pas d'arrondi */
    padding: 0.75rem 1rem;
  }

  .contact-form-wrapper .form-control::placeholder {
    color: #adb5bd;
  }

  .contact-form-wrapper .form-control:focus {
    background: transparent;
    color: #fff;
    border-color: var(--contact-accent);
    box-shadow: none;
  }

  /* Style du bouton "Submit" */
  .btn-submit-custom {
    background-color: var(--contact-accent);
    color: var(--contact-dark-text);
    border: none;
    border-radius: 0; /* Pas d'arrondi */
    padding: 0.75rem 1.5rem;
  }

  .btn-submit-custom:hover {
    background-color: #cbb99a; /* Version plus claire au survol */
    color: var(--contact-dark-text);
  }


  /*
  * STYLES COLONNE DE DROITE (INFOS)
  */

  .contact-card {
    border-top: 3px solid var(--contact-accent);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Ombre très légère */
  }

  /* Titres des cartes (Location, Contact, etc.) */
  .contact-card h5 {
    font-family: 'Georgia', 'Times New Roman', serif; /* Police Serif */
    font-size: 1.5rem;
    color: var(--contact-dark-text);
  }

  .contact-card p {
    color: #555;
  }

  /*
  * STYLES DES ICÔNES (LA PARTIE IMPORTANTE)
  */

  /* Style de base pour les cercles d'icônes */
  .icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: var(--contact-accent);
    color: var(--contact-dark-bg);
    font-size: 0.9rem; /* Ajuste la taille de l'icône dans le cercle */
    flex-shrink: 0; /* Empêche le cercle de se déformer */
  }

  /* Alignement pour les infos de contact (Téléphone, Email) */
  .contact-info-item {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Espace entre l'icône et le texte */
    margin-bottom: 1rem;
    color: #555;
  }

  .contact-info-item:last-child {
    margin-bottom: 0;
  }

  /* Alignement pour les icônes sociales */
  .social-icons-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .social-icon .icon-circle {
    transition: opacity 0.2s ease-in-out;
  }

  .social-icon:hover .icon-circle {
    opacity: 0.8;
  }
  /* ===== GOLD FRAME POUR L'IMAGE ABOUT ===== */

  .image-gold-wrapper {
    position: relative;
    display: inline-block;
    transition: all 0.6s cubic-bezier(.165, .84, .44, 1);
  }

  .image-gold-frame {
    position: absolute;

    width: 100%;
    height: 100%;
    border: 3px solid #B69D74;
    border-radius: 8px;
    transform: rotate(2deg) scale(0.98);
    opacity: 0;
    transition: all 0.6s cubic-bezier(.165, .84, .44, 1);
    z-index: -1;
    pointer-events: none;
    background: rgba(182, 157, 116, 0.03);
  }

  .image-gold-wrapper:hover .image-gold-frame {
    transform: rotate(4deg) scale(1.01);
    opacity: 1;
  }

  .image-gold-wrapper:hover .card-animate {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(14, 16, 18, 0.15);
  }

  /* S'assurer que l'image garde son positionnement */
  .image-gold-wrapper .card-animate {
    position: relative;
    z-index: 2;
    transition: all 0.4s cubic-bezier(.165, .84, .44, 1);
  }
  /*
  * STYLES POUR LA SECTION NEWS
  */

  .news-section {
    /* Le fond de la maquette est gris clair, pas blanc */
    background-color: #f8f9fa; 
  }

  /* Le conteneur pour l'image et le texte */
  .article-card {
    text-align: left;
  }

  /* L'image de la carte */
  .article-card-img {
    width: 100%;
    /* La hauteur de 420px était un peu grande, ajustez si besoin */
    height: 300px; 
    object-fit: cover;
    display: block; /* Important pour éviter les espaces */
  }

  /* Le bloc de contenu blanc */
  .article-card-content {
    background: #ffffff;
    top: 3rem;
    padding: 1.5rem; /* Espace à l'intérieur du bloc blanc */
    
    /* L'ombre de la maquette */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    
    /* Rendre le bloc plus étroit et le centrer */
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    
    /* C'est la ligne la plus importante : */
    /* Elle fait remonter le bloc par-dessus l'image */
    margin-top: -60px;
    
    /* S'assurer qu'il est "au-dessus" de l'image */
    position: relative;
    z-index: 10;
  }

  /* Ajustements des polices pour correspondre à la maquette */
  .article-card-content h5 {
    font-family: 'Georgia', 'Times New Roman', serif; /* Police Serif comme la maquette */
    color: #333;
    font-size: 1.25rem; /* Un peu plus grand */
    font-weight: 600;
  }

  .article-card-content p {
    font-size: 0.9rem;
    margin: 0.75rem 0 1.25rem; /* Plus d'espace autour du paragraphe */
  }

  /* Assurer que le bouton a le bon style */
  .article-card-content .btn-dark {
    background-color: #28354E; /* J'utilise le bleu de votre titre */
    border-color: #28354E;
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
  }

  /* Mettre à jour le bouton "More blog posts" pour qu'il corresponde */
  .news-section .btn-warning {
    background-color: #28354E; /* Assorti aux autres boutons */
    border-color: #28354E;
    color: #fff; /* Texte blanc */
  }
  .news-section .btn-warning:hover {
    background-color: #3a4b6d;
    border-color: #3a4b6d;
    color: #fff;
  }
  /* Gold frame seulement sur l'image */
  .article-card-img-wrapper {
    position: relative;
    display: block;
  }

  .article-img-gold-frame {
    position: absolute;
    top: -8px;
    left: -8px;
    width: calc(100% + 16px);
    height: calc(100% + 16px);
    border: 3px solid #B69D74;
    border-radius: 8px;
    transform: rotate(2deg) scale(0.98);
    opacity: 0;
    transition: all 0.6s cubic-bezier(.165, .84, .44, 1);
    z-index: -1;
    pointer-events: none;
  }

  .article-card:hover .article-img-gold-frame {
    transform: rotate(4deg) scale(1.01);
    opacity: 1;
  }
  /* ===== GOLD FRAME POUR LES CARTES NEWS - VERSION CORRIGÉE ===== */

  .article-card {
    position: relative;
    width: 24rem;
    background: white;
    border-radius: 8px;
    overflow: visible;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(.165, .84, .44, 1);
    height: 25rem;
    display: flex;
    flex-direction: column;
  }

  .article-card-img-wrapper {
    position: relative;
    display: block;
    overflow: visible;
    height: 100%;
    border-radius: 8px;
  }

  .article-card-img {
    width: 100%;
    height: 25rem;
    display: block;
    position: relative;
    z-index: 2;
    transition: all 0.4s cubic-bezier(.165, .84, .44, 1);
    border-radius: 8px;
  }

  .article-img-gold-frame {
    position: absolute;
    top: -12px;
    left: -12px;
    width: calc(100% + 24px);
    height: calc(100% + 24px);
    border: 3px solid #B69D74;
    border-radius: 8px;
    transform: rotate(2deg) scale(0.98);
    opacity: 0;
    transition: all 0.6s cubic-bezier(.165, .84, .44, 1);
    z-index: 1;
    pointer-events: none;
    background: rgba(182, 157, 116, 0.03);
  }

  .article-card:hover .article-img-gold-frame {
    transform: rotate(4deg) scale(1.01);
    opacity: 1;
  }

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

  .article-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(14, 16, 18, 0.15);
  }

  .article-card-content {
  top: -4rem;
  border-radius: 5px;
    aspect-ratio: none;
    height: 14rem;
    max-height: none;
    background: #ffffff;
    padding: 1rem;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    margin-top: -60px;
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .article-card-content h5 {
    font-family: 'Georgia', 'Times New Roman', serif;
    color: #333;
    font-size: 1.25rem;
    font-weight: 600;
  }

  .article-card-content p {
    font-size: 0.9rem;
    margin: 0.75rem 0 1.25rem;
    flex: 1;
  }

  .article-card-content .btn {
    align-self: flex-start;
    margin-top: auto;
  }
  /* ===== DECOBLINDS HERO SLIDER (per-slide content) ===== */
  .decoblinds-hero { position: relative; width: calc(100% - 100px);  margin:0 50px; height:550px; background:var(--dark-bg, #1e2736); border-radius:8px; overflow:hidden; }

  /* slides & image */
  .decoblinds-hero .slides { position:absolute; inset:0; z-index:1; }
  .decoblinds-hero .slide { position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .8s var(--db-anim-ease), transform .8s var(--db-anim-ease); display:block; }
  .decoblinds-hero .slide.active { opacity:1; pointer-events:auto; transform:translateZ(0); }
  .decoblinds-hero .slide img { width:100%; height:100%; object-fit:cover; display:block; transform:translateY(0) scale(1.02); transition:transform 520ms var(--db-anim-ease); }

  /* per-slide content (positioned above image) */
  .decoblinds-hero .slide-content {
    position: absolute;
    left: 8%;
    top: 50%;
    transform: translateY(-50%) translateX(0);
    z-index:5;
    max-width: 600px;
    color: var(--text-light, #fff);
    pointer-events: auto;
    opacity: 0;
    transform-origin: left center;
    transition: opacity 520ms var(--db-anim-ease), transform 520ms var(--db-anim-ease);
  }

  /* visible content inside the active slide */
  .decoblinds-hero .slide.active .slide-content { opacity: 1; transform: translateY(-50%) translateX(0); }

  /* animate elements inside slide-content */
  .decoblinds-hero .slide-content .hero-title-animated { font-size:clamp(28px,4.5vw,58px); font-weight:800; margin:0 0 12px; transform: translateY(12px); opacity:0; transition:transform 620ms var(--db-anim-ease), opacity 620ms var(--db-anim-ease); color: 28354E;}
  .decoblinds-hero .slide.active .slide-content .hero-title-animated { transform: translateY(0); opacity:1; }

  .decoblinds-hero .slide-content .reveal { margin:0 0 18px; font-size:clamp(14px,1.1vw,18px); transform: translateY(10px); opacity:0; transition:transform 680ms var(--db-anim-ease), opacity 680ms var(--db-anim-ease); transition-delay:120ms; }
  .decoblinds-hero .slide.active .slide-content .reveal { transform: translateY(0); opacity:1; transition-delay:120ms; }

  .decoblinds-hero .slide-content .btn-cta { background: var(--gold-color, #b59563); color:#112; padding:10px 22px; border-radius:6px; border:none; cursor:pointer; opacity:0; transform: translateY(10px); transition: transform 520ms var(--db-anim-ease), opacity 520ms var(--db-anim-ease); transition-delay:240ms; }
  .decoblinds-hero .slide.active .slide-content .btn-cta { opacity:1; transform: translateY(0); transition-delay:240ms; }

  /* overlay + frame */
  .decoblinds-hero .gold-frame{position:absolute;inset:12px;border:3px solid rgba(181,149,99,0.10);z-index:2;border-radius:6px;pointer-events:none}
  .decoblinds-hero .hero-overlay{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg, rgba(30,39,54,0.28) 0%, rgba(30,39,54,0.42) 60%, rgba(30,39,54,0.6) 100%)}

  /* controls */
  .decoblinds-hero .controls{position:absolute;left:50%;right:12px;bottom:16px;display:flex;align-items:center;justify-content:space-between;z-index:6}
  .decoblinds-hero .dots{display:flex;gap:8px}
  .decoblinds-hero .dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.28);cursor:pointer;border:0}
  .decoblinds-hero .dot.active{background:#fff}
  .decoblinds-hero .nav-btn{background:rgba(0,0,0,0.45);border:0;color:#fff;padding:8px 10px;border-radius:999px;cursor:pointer}

  /* arrows */
  .decoblinds-hero .arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;background:rgb(255, 255, 255);border:0;color:#fff;padding:10px;border-radius:999px;cursor:pointer}
  .decoblinds-hero .arrow.prev{left:12px}
  .decoblinds-hero .arrow.next{right:12px}

  /* responsive */
  @media (max-width:900px){
    .decoblinds-hero{width:calc(100% - 32px);margin:0 16px;height:420px}
    .decoblinds-hero .slide-content{left:6%; max-width:70%}
    .decoblinds-hero .hero-title-animated{font-size:clamp(20px,6vw,36px)}
  }

  /* force slider images to be sharp if your global CSS blurs them */
  .decoblinds-hero .slide img { filter: none !important; }
  /* ===== Subtle non-blurry overlay + readable slide content ===== */
  /* Overlay: léger voile teinté (chaud) sans blur ni assombrissement */
  .decoblinds-hero .hero-overlay,
  .hero-parallax .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;

    /* subtle warm tint — change rgba(...) alpha to increase/decrease effect */
    background: linear-gradient(
      180deg,
      rgba(255, 245, 230, 0.06) 0%,   /* very light warm top */
      rgba(255, 245, 230, 0.03) 40%,  /* ultra subtle mid */
      rgba(255, 245, 230, 0.04) 100%  /* slight warm bottom */
    );

    /* NO blur, NO backdrop-filter */
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Ensure hero images remain sharp */
  .decoblinds-hero .slide img,
  .hero-parallax-img {
    filter: none !important;
    transform: translateY(0) scale(1) !important; /* keep parallax transform applied by JS separately */
    image-rendering: auto !important;
    backface-visibility: hidden !important;
  }

  /* Make slide-content more readable without a full dark overlay:
    add a soft, slightly translucent card behind the text (light tint)
    — it is subtle and preserves the image while increasing contrast. */
  .decoblinds-hero .slide-content,
  .hero-parallax .slide-content,
  .hero-content {
    position: absolute;
    left: 6%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    max-width: 600px;

    /* subtle backing: translucent, not dark */
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-radius: 8px;
    padding: 18px 22px;
    box-shadow: 0 6px 20px rgba(16,18,20,0.04); /* very light lift */
    color: var(--text-light, #ffffff);
    pointer-events: auto;
  }

  /* Title / text styles remain, but increase contrast slightly via text-shadow */
  .decoblinds-hero .hero-title-animated,
  .decoblinds-hero .slide-content .hero-title-animated,
  .hero-content .hero-title-animated {
    text-shadow: 0 6px 18px rgba(16,18,20,0.10); /* subtle, avoids heavy darkening */
  }

  /* Paragraphs */
  .decoblinds-hero .slide-content .reveal,
  .hero-content .reveal {
    color: var(--text-light, #ffffff);
    text-shadow: 0 6px 16px rgba(16,18,20,0.06);
  }

  /* Buttons: prefer light button with warm border so they pop on any image */
  .decoblinds-hero .btn-cta,
  .decoblinds-hero .slide-content .btn-cta {
    background: rgba(255,255,255,0.92); /* almost white button */
    color: #1b1b1b;
    border: 1px solid rgba(181,149,99,0.12);
    box-shadow: 0 8px 24px rgba(16,18,20,0.06);
  }

  /* Controls (dots/arrows) — subtle, non-dark */
  .decoblinds-hero .arrow,
  .decoblinds-hero .nav-btn {
    background: rgba(255,255,255,0.06);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.06);
  }

  /* Small responsive tweak so slide-content doesn't overlap on tiny screens */
  @media (max-width: 900px) {
    .decoblinds-hero .slide-content,
    .hero-content {
      left: 4%;
      max-width: 86%;
      padding: 14px;
      backdrop-filter: none !important;
    }
    .decoblinds-hero .btn-cta { padding: 8px 16px; }
  }
  /* ===== Enhanced slider animation + content backdrop ===== */

  /* animation easing variables (si non définies plus haut) */
  :root {
    --slider-ease: cubic-bezier(.2,.9,.25,1);
    --slider-duration: 820ms;
    --content-stagger: 140ms;
  }

  /* slide base & improved crossfade + scale */
  .decoblinds-hero .slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transform: scale(1.02) translateY(6px);
    transition:
      opacity var(--slider-duration) var(--slider-ease),
      transform calc(var(--slider-duration) * 1.05) var(--slider-ease);
    will-change: opacity, transform;
  }

  /* active slide fades in + scale to normal */
  .decoblinds-hero .slide.active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateY(0);
    z-index: 3;
  }

  /* leaving slide animates slightly up & fades faster */
  .decoblinds-hero .slide.leaving {
    opacity: 0;
    pointer-events: none;
    transform: scale(.98) translateY(-10px);
    transition-duration: 520ms;
    z-index: 2;
  }

  /* subtle difference for next slide when entering (immediate small pop) */
  .decoblinds-hero .slide.entering {
    opacity: 1;
    transform: scale(1.01) translateY(4px);
    transition-duration: 520ms;
  }

  /* image transform tuned for parallax + smooth crossfade */
  .decoblinds-hero .slide img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transform-origin:center;
    transition: transform 720ms var(--slider-ease), opacity 520ms var(--slider-ease);
  }

  /* -------- slide-content backdrop & staggered content -------- */
  .decoblinds-hero .slide-content {
    position: absolute;
    left: 6%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    max-width: 600px;
    padding: 18px 22px;
    border-radius: 10px;
    overflow: hidden;
    pointer-events: auto;

    /* keep it subtle: slightly warm translucent backing to lift text */
    background: linear-gradient(180deg, rgba(16,18,20,0.08), rgba(16,18,20,0.06));
    backdrop-filter: none; /* no blur */
  }

  /* small decorative soft highlight behind the text (pseudo-element) */
  .decoblinds-hero .slide-content::before {
    content: "";
    position: absolute;
    inset: -10%;
    transform: rotate(-2deg);

    z-index: 0;
    pointer-events: none;
    filter: none;
  }

  /* ensure text sits above the pseudo-element */
  .decoblinds-hero .slide-content > * { position: relative; z-index: 1; }

  /* content initial state for staggered entrance */
  .decoblinds-hero .slide-content .hero-title-animated,
  .decoblinds-hero .slide-content .reveal,
  .decoblinds-hero .slide-content .btn-cta {
    opacity: 0;
    transform: translateY(18px) scale(.995);
    transition: opacity 520ms var(--slider-ease), transform 520ms var(--slider-ease);
  }

  /* visible state (JS will add .is-visible to stagger elements) */
  .decoblinds-hero .slide.active .slide-content .hero-title-animated.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: calc(var(--content-stagger) * 0);
  }
  .decoblinds-hero .slide.active .slide-content .reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: calc(var(--content-stagger) * 1);
  }
  .decoblinds-hero .slide.active .slide-content .btn-cta.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: calc(var(--content-stagger) * 2);
  }

  /* small pop animation for title when it appears */
  @keyframes title-pop {
    0% { transform: translateY(18px) scale(.995); opacity: 0; }
    60% { transform: translateY(-6px) scale(1.02); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
  }
  .decoblinds-hero .slide.active .slide-content .hero-title-animated.pop {
    animation: title-pop 640ms var(--slider-ease) both;
  }

  /* arrows & controls subtle hover */
  .decoblinds-hero .arrow { transition: transform 220ms var(--slider-ease), background 220ms; }
  .decoblinds-hero .arrow:hover { transform: translateY(-3px) scale(1.03); background: rgba(255,255,255,0.09); }

  /* accessibility: remove motion if user prefers reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    .decoblinds-hero .slide,
    .decoblinds-hero .slide-content > * {
      transition: none !important;
      animation: none !important;
      transform: none !important;
      opacity: 1 !important;
    }
  }
  /* ===== EFFETS NÉONS VIOLETS ET MULTICOLORES AMÉLIORÉS ===== */
  :root {
    --neon-violet: #8b5cf6;
    --neon-pink: #ec4899;
    --neon-cyan: #00f3ff;
    --neon-gold: #ffd700;
    --neon-blue: #3b82f6;
  }

  /* Animation de pulsation néon globale */
  @keyframes neon-pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.8;
    }
  }

  @keyframes neon-rainbow {
    0% {
      filter: hue-rotate(0deg);
      box-shadow: 
        0 0 15px #8b5cf6,
        0 0 30px #8b5cf6,
        0 0 45px #8b5cf6;
    }
    25% {
      filter: hue-rotate(90deg);
      box-shadow: 
        0 0 15px #ec4899,
        0 0 30px #ec4899,
        0 0 45px #ec4899;
    }
    50% {
      filter: hue-rotate(180deg);
      box-shadow: 
        0 0 15px #00f3ff,
        0 0 30px #00f3ff,
        0 0 45px #00f3ff;
    }
    75% {
      filter: hue-rotate(270deg);
      box-shadow: 
        0 0 15px #ffd700,
        0 0 30px #ffd700,
        0 0 45px #ffd700;
    }
    100% {
      filter: hue-rotate(360deg);
      box-shadow: 
        0 0 15px #8b5cf6,
        0 0 30px #8b5cf6,
        0 0 45px #8b5cf6;
    }
  }

  /* NAVBAR NÉON VIOLET - SANS TEXTE LUMINEUX */
  .navbar {
    background: linear-gradient(135deg, #1e2736 0%, #2d1b69 100%) !important;
    border-bottom: 1px solid var(--neon-violet);
    box-shadow: 
      0 0 20px rgba(139, 92, 246, 0.3),
      inset 0 1px 0 rgba(139, 92, 246, 0.1);
  }

  /* SUPPRIMER LES EFFETS DE TEXTE LUMINEUX */
  .navbar-brand {
    color: var(--text-light) !important; /* Retour à la couleur normale */
    /* Supprimer text-shadow et animation */
  }

  .navbar-nav .nav-link {
    position: relative;
    color: var(--text-light) !important; /* Couleur normale */
    transition: all 0.4s ease;
  }

  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link.active {
    color: var(--gold-color) !important; /* Couleur gold normale au hover */
    transform: translateY(-2px);
  }

  .nav-link::after {
    background: var(--gold-color); /* Retour à la couleur gold normale */
  }

  /* HERO NÉON SPECTACULAIRE - SANS TEXTE LUMINEUX */
  .hero-parallax {
    position: relative;
  }

  .hero-parallax::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.2) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(236, 72, 153, 0.2) 0%, transparent 50%),
      radial-gradient(circle at 40% 40%, rgba(0, 243, 255, 0.15) 0%, transparent 50%);
    z-index: 1;
    pointer-events: none;
  }

  /* SUPPRIMER LES EFFETS LUMINEUX SUR LES TEXTES HERO */
  .hero-title-animated {
    color: white !important; /* Texte blanc normal */
    /* Supprimer text-shadow et animation */
  }

  .hero-content .reveal {
    color: var(--text-light) !important; /* Couleur normale */
  }

  /* CADRE NÉON RAINBOW ANIMÉ - CORRIGÉ */
  .main-header-gold-frame {
    border: 3px solid transparent;
  
    background-size: 400% 400%;
    animation: neon-rainbow 6s ease infinite;
    box-shadow: 
      0 0 10px rgba(139, 92, 246, 0.5),
      0 0 30px rgba(139, 92, 246, 0.3),
      inset 0 0 30px rgba(255, 255, 255, 0.1);
  }

  /* CARTES AVEC BORDURES NÉON */
  .card-service-wrapper,
  .card-news-wrapper {
    position: relative;
  }

  .card-service-wrapper::before,
  .card-news-wrapper::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg, var(--neon-violet), var(--neon-pink), var(--neon-cyan), var(--neon-gold));
    border-radius: 12px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: neon-rainbow 4s linear infinite;
  }

  .card-service-wrapper:hover::before,
  .card-news-wrapper:hover::before {
    opacity: 1;
  }

  .card.card-animate {
    background: white !important; /* Fond blanc normal */
    border: 1px solid rgba(139, 92, 246, 0.3);
    transition: all 0.4s ease;
  }

  .card.card-animate:hover {
    border-color: var(--neon-cyan);
    box-shadow: 
      0 0 20px rgba(0, 243, 255, 0.4),
      0 10px 40px rgba(0, 0, 0, 0.3);
    transform: translateY(-10px) scale(1.02);
  }

  /* BOUTON TÉLÉPHONE NÉON */
  .phone-box {
    background: var(--gold-color) !important; /* Retour à la couleur gold normale */
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
  }

  .phone-box::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background-size: 400% 400%;
    z-index: -1;
    border-radius: inherit;
    animation: neon-rainbow 3s ease infinite;
  }

  .phone-box:hover {
    transform: translateY(-5px);
    box-shadow: 
      0 0 30px rgba(139, 92, 246, 0.6),
      0 10px 40px rgba(0, 0, 0, 0.4);
  }

  /* SLIDER NÉON */
  .decoblinds-hero .dot.active {
    background: var(--neon-cyan);
    animation: neon-pulse 1.5s ease-in-out infinite;
  }

  .decoblinds-hero .arrow {
    background: rgba(255, 255, 255, 0.985);
    border: 1px solid var(--neon-violet);
    color:#28354E;
    transition: all 0.3s ease;
  }

  .decoblinds-hero .arrow:hover {
    background: rgb(255, 255, 255);
    box-shadow: 0 0 20px var(--neon-violet);
    transform: scale(1.1);
  }

  /* BOUTONS CTA NÉON - SANS TEXTE LUMINEUX */
  .btn-cta {
    background: linear-gradient(135deg, var(--neon-violet), var(--neon-pink)) !important;
    color: white !important;
    border: none;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
  }

  .btn-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s ease;
  }

  .btn-cta:hover::before {
    left: 100%;
  }

  .btn-cta:hover {
    transform: translateY(-3px);
    box-shadow: 
      0 0 20px rgba(139, 92, 246, 0.6),
      0 5px 25px rgba(0, 0, 0, 0.3);
  }

  /* SECTIONS AVEC FONDS NÉON */
  .services-container {
    position: relative;
  }

  .services-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      radial-gradient(circle at 10% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 40%),
      radial-gradient(circle at 90% 80%, rgba(236, 72, 153, 0.1) 0%, transparent 40%),
      radial-gradient(circle at 50% 50%, rgba(0, 243, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
  }

  /* ICÔNES NÉON */
  .icon-circle {
    background: linear-gradient(135deg, var(--neon-violet), var(--neon-pink)) !important;
    color: white;
    box-shadow: 
      0 0 10px rgba(139, 92, 246, 0.5),
      0 0 20px rgba(139, 92, 246, 0.3);
    transition: all 0.3s ease;
  }

  .icon-circle:hover {
    transform: scale(1.1) rotate(10deg);
    box-shadow: 
      0 0 20px rgba(139, 92, 246, 0.8),
      0 0 40px rgba(139, 92, 246, 0.5);
    animation: neon-pulse 1s ease-in-out;
  }

  /* FORMULAIRES NÉON */
  .contact-form-wrapper {
    background: linear-gradient(135deg, #1F2839 0%, #2d1b69 100%) !important;
    border: 1px solid rgba(139, 92, 246, 0.3);
    box-shadow: 
      0 0 30px rgba(139, 92, 246, 0.2),
      inset 0 0 30px rgba(139, 92, 246, 0.1);
  }

  .form-control {
    background: rgba(30, 39, 54, 0.8) !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
    color: var(--text-light) !important; /* Couleur texte normale */
    transition: all 0.3s ease;
  }

  .form-control:focus {
    border-color: var(--neon-cyan) !important;
    box-shadow: 
      0 0 10px rgba(0, 243, 255, 0.3),
      inset 0 0 10px rgba(0, 243, 255, 0.1) !important;
    background: rgba(30, 39, 54, 0.9) !important;
  }

  .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5) !important; /* Placeholder normal */
  }

  /* EFFETS DE PARTICULES NÉON */
  .neon-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
  }

  .particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--neon-cyan);
    border-radius: 50%;
    animation: float-particle 6s infinite linear;
    box-shadow: 0 0 5px currentColor;
  }

  @keyframes float-particle {
    0% {
      transform: translateY(100vh) translateX(0);
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      transform: translateY(-100px) translateX(100px);
      opacity: 0;
    }
  }

  /* RESPONSIVE - Adaptation mobile */
  @media (max-width: 768px) {
    .main-header-gold-frame {
      animation-duration: 8s;
    }
    
    .card-service-wrapper::before,
    .card-news-wrapper::before {
      display: none;
    }
  }

  /* Mode réduit de mouvement */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
  /* ===== EFFET GOLD FRAME IDENTIQUE POUR NEWS & ABOUT ===== */

  /* News - Même effet que les services */
  .card-news-wrapper {
    position: relative;
    display: block;
    transition: all 0.6s cubic-bezier(.165, .84, .44, 1);
  }

  .card-news-wrapper .card {
    position: relative;
    z-index: 2;
    transition: all 1.5s cubic-bezier(.165, .84, .44, 1);
    background: white;
  }

  .card-gold-frame-news {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid #B69D74;
    border-radius: 8px;
    transform: rotate(3deg) scale(0.95);
    opacity: 0;
    transition: all 0.6s cubic-bezier(.165, .84, .44, 1);
    z-index: 1;
    pointer-events: none;
  }

  /* Effet au hover - Identique aux services */
  .card-news-wrapper:hover .card-gold-frame-news {
    transform: rotate(5deg) scale(1.02);
    opacity: 1;
  }

  .card-news-wrapper:hover .card {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(14, 16, 18, 0.15);
  }

  /* About - Même effet que les services */
  .image-gold-wrapper {
    position: relative;
    display: inline-block;
    transition: all 0.6s cubic-bezier(.165, .84, .44, 1);
  }

  .image-gold-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid #B69D74;
    border-radius: 8px;
    transform: rotate(4deg) scale(0.98);
    opacity: 1;
    transition: all 0.6s cubic-bezier(.165, .84, .44, 1);
    z-index: -1;
    pointer-events: none;
    background: rgba(182, 157, 116, 0.03);
  }

  .image-gold-wrapper:hover .image-gold-frame {
    transform: rotate(8deg) scale(1.01);
    opacity: 1;
  }

  .image-gold-wrapper:hover .card-animate {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(14, 16, 18, 0.15);
  }

  /* S'assurer que l'image garde son positionnement */
  .image-gold-wrapper .card-animate {
    position: relative;
    z-index: 2;
    transition: all 0.4s cubic-bezier(.165, .84, .44, 1);
  }

  /* Pour le conteneur des cartes news */
  .news-container .card-news-wrapper {
    height: 100%;
  }
  /* ===== EFFETS NÉONS POUR ABOUT ET NEWS - IDENTIQUE AUX SERVICES ===== */

  /* About - Même effet néon que les services */
  .image-gold-wrapper {
    position: relative;
    display: inline-block;
    transition: all 0.6s cubic-bezier(.165, .84, .44, 1);
  }

  .image-gold-wrapper::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg, var(--neon-violet), var(--neon-pink), var(--neon-cyan), var(--neon-gold));
    border-radius: 12px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: neon-rainbow 4s linear infinite;
  }

  .image-gold-wrapper:hover::before {
    opacity: 1;
  }

  .image-gold-wrapper .card-animate {
    background: white !important;
    border: 1px solid rgba(139, 92, 246, 0.3);
    transition: all 0.4s ease;
  }

  .image-gold-wrapper:hover .card-animate {
    border-color: var(--neon-cyan);
    box-shadow: 
      0 0 20px rgba(0, 243, 255, 0.4),
      0 10px 40px rgba(0, 0, 0, 0.3);
    transform: translateY(-10px) scale(1.02);
  }

  /* News - Même effet néon que les services */
  .article-card {
    position: relative;
    transition: all 0.6s cubic-bezier(.165, .84, .44, 1);
  }

  .article-card::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg, var(--neon-violet), var(--neon-pink), var(--neon-cyan), var(--neon-gold));
    border-radius: 12px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: neon-rainbow 4s linear infinite;
  }

  .article-card:hover::before {
    opacity: 1;
  }

  .article-card {
    background: white !important;
    border: 1px solid rgba(139, 92, 246, 0.3);
    transition: all 0.4s ease;
  }

  .article-card:hover {
    border-color: var(--neon-cyan);
    box-shadow: 
      0 0 20px rgba(0, 243, 255, 0.4),
      0 10px 40px rgba(0, 0, 0, 0.3);
    transform: translateY(-10px) scale(1.02);
  }

  /* Adaptation pour le contenu des cartes News */
  .article-card-content {
    background: white !important;
    position: relative;
    z-index: 2;
    border: 1px solid #28354E;
  }

  /* S'assurer que les images gardent leur aspect */
  .image-gold-wrapper img,
  .article-card-img {
    position: relative;
    z-index: 1;
  }

  /* Gold frame existant - s'assurer qu'il fonctionne avec les nouveaux effets */
  .image-gold-frame,
  .article-img-gold-frame {

    z-index: 1;
  }

  /* Ajustement pour la superposition des effets */
  .image-gold-wrapper:hover .image-gold-frame,
  .article-card:hover .article-img-gold-frame {
    opacity: 0.7; /* Légèrement réduire l'opacité du gold frame pour laisser voir l'effet néon */
  }

  /* Responsive */
  @media (max-width: 768px) {
    .image-gold-wrapper::before,
    .article-card::before {
      display: none;
    }
    
    .image-gold-wrapper:hover .card-animate,
    .article-card:hover {
      transform: translateY(-5px) scale(1.01);
    }
  }
  .text-gold {
    color: #b59563 !important;
  }

  .hover-gold {
    transition: all 0.3s ease;
  }

  .hover-gold:hover {
    color: #b59563 !important;
    transform: translateX(5px);
  }

  .bg-dark {
    background-color: #2d3748 !important;
  }

  .footer-gold-frame {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #b59563, transparent);
  }

  /* Effets au hover pour les icônes sociales */
  .social-icon {
    transition: all 0.3s ease;
    display: inline-block;
  }

  .social-icon:hover {
    transform: translateY(-3px);
    color: #d4af37 !important;
  }

  /* Responsive */
  @media (max-width: 768px) {
    .border-start.border-end {
      border-left: none !important;
      border-right: none !important;
      border-top: 1px solid #4a5568 !important;
      border-bottom: 1px solid #4a5568 !important;
      padding: 2rem 0;
      margin: 1rem 0;
    }
    
    .contact-info {
      margin-bottom: 2rem !important;
    }}
    /* Responsive pour la section prestations professionnelles */
  @media (max-width: 991.98px) {
    .nav-pills.flex-lg-column {
      flex-direction: row !important;
      overflow-x: auto;
      flex-wrap: nowrap;
      padding-bottom: 1rem;
      -webkit-overflow-scrolling: touch;
    }
    
    .nav-pills.flex-lg-column .nav-item {
      flex: 0 0 auto;
      min-width: 220px;
    }
    
    .nav-pills.flex-lg-column .nav-link {
      white-space: normal;
      text-align: center !important;
      border-right: 1px solid #8b7355 !important;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem 0.5rem !important;
    }
    
    .nav-pills.flex-lg-column .nav-item:last-child .nav-link {
      border-right: none !important;
    }
    
    .border-right-lg {
      border-right: none !important;
      height: auto !important;
      min-height: auto !important;
    }
    
    .tab-content .d-flex.align-items-start {
      flex-direction: column;
      text-align: center;
      gap: 1rem !important;
    }
    
    .tab-content .bg-light {
      margin-bottom: 1rem;
      align-self: center;
    }
  }

  @media (max-width: 767.98px) {
    .nav-pills.flex-lg-column .nav-item {
      min-width: 200px;
    }
    
    .nav-pills.flex-lg-column .nav-link {
      font-size: 0.9rem !important;
      padding: 0.8rem 0.5rem !important;
    }
    
    .tab-content .fs-6 {
      font-size: 0.9rem !important;
    }
    
    .tab-pane .p-3.rounded {
      width: 50px !important;
      height: 50px !important;
    }
    
    .tab-pane .p-3.rounded img {
      width: 30px !important;
      height: 30px !important;
    }
  }

  @media (max-width: 575.98px) {
    .nav-pills.flex-lg-column .nav-item {
      min-width: 180px;
    }
    
    .nav-pills.flex-lg-column .nav-link {
      font-size: 0.85rem !important;
      padding: 0.7rem 0.4rem !important;
    }
  }

  /* Amélioration de l'apparence des onglets actifs */
  .nav-pills .nav-link.active {
    color: #b59563 !important;
    background-color: rgba(181, 149, 99, 0.1) !important;
    border-left: 3px solid #b59563 !important;
  }

  .nav-pills .nav-link {
    transition: all 0.3s ease;
    border-left: 3px solid transparent !important;
  }

  .nav-pills .nav-link:hover {
    color: #b59563 !important;
    background-color: rgba(181, 149, 99, 0.05) !important;
  }

  /* Pour les écrans larges uniquement */
  @media (min-width: 992px) {
    .nav-pills.flex-lg-column .nav-link {
      text-align: right !important;
      justify-content: flex-end !important;
    }
  }
  @media (max-width: 991.98px) {
    footer .border-start.border-secondary {
      border-left: none !important;
      border-top: 1px solid #4a5568 !important;
      padding-top: 2rem;
      margin-top: 2rem;
      padding-left: 0 !important;
    }
    
    footer .col-md-4 {
      margin-bottom: 2rem;
    }
  }

  @media (max-width: 767.98px) {
    footer .d-flex.align-items-center {
      flex-direction: column;
      text-align: center;
    }
    
    footer .d-flex.align-items-center img {
      margin-bottom: 1rem;
      margin-right: 0 !important;
    }
    
    footer .social-icons {
      justify-content: center;
      margin-top: 1rem;
    }
    
    footer .contact-info .d-flex {
      justify-content: flex-start;
    }
    
    footer .newsletter form {
      max-width: 100%;
    }
  }

  @media (max-width: 575.98px) {
    footer .container {
      padding-left: 1rem;
      padding-right: 1rem;
    }
    
    footer h4 {
      font-size: 1.3rem !important;
    }
    
    footer h5 {
      font-size: 1rem !important;
    }
    
    footer .text-light {
      font-size: 0.85rem !important;
    }
    
    .footer-gold-frame {
      width: 150px;
    }
  }

  /* Amélioration des transitions */
  .hover-gold {
    transition: all 0.3s ease;
  }

  .hover-gold:hover {
    color: #b59563 !important;
    transform: translateX(5px);
  }

  .social-icon {
    transition: all 0.3s ease;
    display: inline-block;
  }

  .social-icon:hover {
    transform: translateY(-3px);
    color: #d4af37 !important;
  }
  /* Styles pour la boîte téléphone améliorée */
  .phone-box-enhanced {
    background: linear-gradient(135deg, #b59563 0%, #d4af37 50%, #b59563 100%);
    color: white;
    padding: 1.75rem 1.5rem;
    min-height: 100px;
    border-radius: 20px;
    font-family: 'Segoe UI', 'Inter', system-ui, -apple-system, sans-serif;
    border: 2px solid rgba(255, 255, 255, 0.4);
    box-shadow: 
      0 12px 35px rgba(181, 149, 99, 0.5),
      0 6px 20px rgba(0, 0, 0, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
    margin-left: 1rem;
  }

  .phone-box-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.8s ease;
  }

  .phone-box-enhanced:hover::before {
    left: 100%;
  }

  .phone-box-enhanced:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 
      0 20px 45px rgba(181, 149, 99, 0.7),
      0 10px 30px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
    background: linear-gradient(135deg, #d4af37 0%, #b59563 50%, #d4af37 100%);
  }

  .phone-icon-container {
    background: rgba(255, 255, 255, 0.2);
    padding: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    backdrop-filter: blur(10px);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
  }

  .phone-box-enhanced:hover .phone-icon-container {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(12deg) scale(1.1);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
  }

  .phone-text-content {
    text-align: left;
    line-height: 1.3;
  }

  .phone-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #2d3748;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 4px;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
  }

  .phone-number-link {
    text-decoration: none;
    transition: all 0.3s ease;
  }

  .phone-number {
    font-size: 1.25rem;
    font-weight: 900;
    color: #1F2839;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
    display: inline-block;
  }

  .phone-number-link:hover .phone-number {
    color: #112240;
    transform: translateX(3px);
    text-shadow: 0 2px 8px rgba(255, 255, 255, 0.6);
  }

  /* Animation de pulsation subtile */
  @keyframes gentle-pulse {
    0%, 100% {
      box-shadow: 
        0 12px 35px rgba(181, 149, 99, 0.5),
        0 6px 20px rgba(0, 0, 0, 0.15);
    }
    50% {
      box-shadow: 
        0 12px 40px rgba(181, 149, 99, 0.7),
        0 6px 25px rgba(0, 0, 0, 0.2);
    }
  }

  .phone-box-enhanced {
    animation: gentle-pulse 4s ease-in-out infinite;
  }

  /* Effet au clic */
  .phone-box-enhanced:active {
    transform: translateY(-2px) scale(0.98);
    animation: none;
  }



  /* Responsive adjustments */
  @media (max-width: 1400px) {
    .phone-box-enhanced {
      width: 240px;
      padding: 1.5rem 1.25rem;
    }
    
    .phone-number {
      font-size: 1.15rem;
    }
  }

  /* Intégration avec votre thème existant */
  .phone-box-enhanced {
    background: linear-gradient(135deg, var(--gold-color) 0%, #d4af37 50%, var(--gold-color) 100%);
  }
  /* Styles pour les icônes étoiles */
  .star-icon-wrapper {
    width: 40px;
    height: 40px;
    background: #D8CDBB;
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .star-icon-wrapper:hover {
    background: #b59563;
    transform: scale(1.1) rotate(10deg);
  }

  .star-icon-wrapper:hover svg {
    fill: white;
    animation: starTwinkle 0.6s ease-in-out;
  }

  @keyframes starTwinkle {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.3);
      opacity: 0.8;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  /* Animation au survol de l'élément parent */
  .stagger-item:hover .star-icon-wrapper {
    background: #b59563;
  }

  .stagger-item:hover .star-icon-wrapper svg {
    fill: white;
    animation: starTwinkle 0.6s ease-in-out;
  }
  /* Styles pour les icônes étoiles en blanc */
  .star-icon-wrapper {
    width: 40px;
    height: 40px;
    background: #2d1b69; /* Fond or pour faire ressortir les étoiles blanches */
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.3);
  }

  .star-icon-wrapper:hover {
    background: #2d1b69;
    transform: scale(1.1) rotate(10deg);
    box-shadow: 0 4px 12px rgba(181, 149, 99, 0.4);
  }

  .star-icon-wrapper:hover svg {
    animation: starTwinkle 0.6s ease-in-out;
  }

  @keyframes starTwinkle {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.3);
      opacity: 0.8;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  /* Animation au survol de l'élément parent */
  .stagger-item:hover .star-icon-wrapper {
    background: #2d1b69;
  }

  .stagger-item:hover .star-icon-wrapper svg {
    animation: starTwinkle 0.6s ease-in-out;
  }

  /* Pour s'assurer que le texte reste lisible */
  .stagger-item span {
    color: #333;
    transition: color 0.3s ease;
  }

  .stagger-item:hover span {
    color: #b59563;
  }
  /* Styles pour la version moderne du téléphone */
  .phone-box-modern {
    background: linear-gradient(135deg, #2d1b69 0%, #3d2a8c 100%);
    color: white;
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    border: 2px solid rgba(255, 255, 255, 0.15);
    box-shadow: 
      0 10px 30px rgba(45, 27, 105, 0.4),
      0 4px 15px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
    width: 300px;
    margin-left: 1rem;
    cursor: pointer;
  }

  .phone-box-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.6s ease;
  }

  .phone-box-modern:hover::before {
    left: 100%;
  }

  .phone-box-modern:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 
      0 15px 40px rgba(45, 27, 105, 0.6),
      0 8px 25px rgba(0, 0, 0, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.25);
  }

  .phone-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 1rem;
  }

  .phone-icon-modern {
    background: rgba(255, 255, 255, 0.15);
    padding: 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    flex-shrink: 0;
  }

  .phone-box-modern:hover .phone-icon-modern {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(10deg) scale(1.1);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
  }

  .phone-text-modern {
    flex: 1;
    text-align: left;
    line-height: 1.3;
  }

  .phone-call-action {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 4px;
  }

  .phone-number-modern {
    text-decoration: none;
    display: block;
    transition: all 0.3s ease;
  }

  .number-display {
    white-space: nowrap;    
    font-size: 1.3rem;
    font-weight: 800;
    color: white;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 4px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  .call-now-badge {
    background: linear-gradient(135deg, #b59563 0%, #d4af37 100%);
    color: #2d1b69;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 20px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(181, 149, 99, 0.4);
  }

  .phone-arrow {
    opacity: 0.7;
    transition: all 0.3s ease;
    flex-shrink: 0;
  }

  .phone-box-modern:hover .phone-arrow {
    opacity: 1;
    transform: translateX(3px);
  }

  /* Animation de pulsation */
  @keyframes subtle-pulse {
    0%, 100% {
      box-shadow: 
        0 10px 30px rgba(45, 27, 105, 0.4),
        0 4px 15px rgba(0, 0, 0, 0.2);
    }
    50% {
      box-shadow: 
        0 10px 35px rgba(45, 27, 105, 0.6),
        0 4px 20px rgba(0, 0, 0, 0.25);
    }
  }

  .phone-box-modern {
    animation: subtle-pulse 3s ease-in-out infinite;
  }

  /* Effet au clic */
  .phone-box-modern:active {
    transform: translateY(-2px) scale(0.98);
    animation: none;
  }

  /* Responsive */
  @media (max-width: 1400px) {
    .phone-box-modern {
      width: 280px;
      padding: 1.1rem 1.25rem;
    }
    
    .number-display {
      font-size: 1.2rem;
    }
  }
  /* ===== BOUTONS FLÈCHES PARFAITEMENT RONDS ===== */
.decoblinds-hero .arrow {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: rgba(255, 255, 255, 0.95);
    color: #28354E;
    font-size: 1.2rem;
    font-weight: bold;
    transition: all 0.3s cubic-bezier(.165, .84, .44, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Assurer que les boutons restent ronds au hover */
.decoblinds-hero .arrow:hover {
    transform: translateY(3px) scale(1.05);
    background: rgb(255, 255, 255);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);

}

/* Version plus petite sur mobile */
@media (max-width: 768px) {
    .decoblinds-hero .arrow {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

/* S'assurer que les boutons spécifiques (prev/next) héritent de ces styles */
.decoblinds-hero .arrow.prev,
.decoblinds-hero .arrow.next {
    /* Ces propriétés sont déjà couvertes par .arrow */
}

/* Si vous avez d'autres boutons arrow ailleurs qui ne devraient pas être ronds */
.arrow:not(.decoblinds-hero .arrow) {
    /* Réinitialiser les styles pour les autres boutons arrow */
    border-radius: initial;
    width: auto;
    height: auto;
}
/* ===== CORRECTIONS RESPONSIVE POUR ÉLIMINER LES ESPACES VIDES ===== */

/* 1. CORRECTION GLOBALE DU BODY ET HTML */
html, body {
    width: 100%;
    overflow-x: hidden;
    position: relative;
}

/* 2. CORRECTION DU SLIDER HERO */


@media (max-width: 900px) {
    .decoblinds-hero {
        width: 100%;
        margin: 0;
        border-radius: 0;
    }
}

/* 3. CORRECTION DES SECTIONS AVEC CONTAINERS */
.container, .container-fluid {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

/* 4. CORRECTION SPÉCIFIQUE POUR LA SECTION SERVICES */
.services-container .row {
    margin-left: 0;
    margin-right: 0;
    justify-content: center;
}

.services-container .col {
    flex: 0 0 auto;
    width: auto;
}

/* 5. CORRECTION DES CARTES SERVICES */
@media (max-width: 1400px) {
    .services-container .col {
        width: 200px;
    }
}

@media (max-width: 1200px) {
    .services-container .col {
        width: 220px;
    }
}

@media (max-width: 992px) {
    .services-container .col {
        width: 250px;
    }
}

@media (max-width: 768px) {
    .services-container .col {
        width: 100%;
        max-width: 280px;
    }
}

/* 6. CORRECTION DES CARTES NEWS */
.news-section .row {
    margin-left: 0;
    margin-right: 0;
    justify-content: center;
}

.article-card {
    width: 100%;
    max-width: 24rem;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .article-card {
        max-width: 100%;
        margin: 0 10px;
    }
}



/* Styles spécifiques pour les SVG */
.decoblinds-hero .arrow svg {
    width: 24px;
    height: 24px;
    display: block;
    transition: all 0.3s ease;
    stroke: currentColor;
}

/* Centrage parfait des encoches */
.decoblinds-hero .arrow {
    display: grid;
    place-items: center;
}

.decoblinds-hero .arrow.prev svg {
    transform: translateX(-1px);
}

.decoblinds-hero .arrow.next svg {
    transform: translateX(1px);
}

/* Effets au hover */
.decoblinds-hero .arrow:hover {
    transform: translateY(-3px) scale(1.05);
    background: rgb(255, 255, 255);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    border-color: #28354E;
}

.decoblinds-hero .arrow:hover svg {
    transform: scale(1.1);
}

.decoblinds-hero .arrow.prev:hover svg {
    transform: translateX(-1px) scale(1.1);
}

.decoblinds-hero .arrow.next:hover svg {
    transform: translateX(1px) scale(1.1);
}

/* Version mobile */
@media (max-width: 768px) {
    .decoblinds-hero .arrow {
        width: 44px;
        height: 44px;
    }
    
    .decoblinds-hero .arrow svg {
        width: 20px;
        height: 20px;
    }
}

/* 8. CORRECTION DE LA NAVBAR POUR MOBILE */
.navbar-collapse {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

/* 9. CORRECTION DES PRESTATIONS PROFESSIONNELLES */
@media (max-width: 991.98px) {
    .nav-container {
        border-right: none !important;
        border-bottom: 2px solid #8b7355;
        margin-bottom: 2rem;
    }
    
    .nav-pills.flex-lg-column {
        flex-direction: row !important;
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    
    .nav-pills.flex-lg-column .nav-item {
        flex: 0 0 auto;
    }
}

/* 10. CORRECTION DU FOOTER */
footer .container {
    max-width: 100%;
}

/* 11. CORRECTION DES IMAGES RESPONSIVES */
img {
    max-width: 100%;
    height: auto;
}

/* 12. CORRECTION DES MARGES NÉGATIVES */
.row {
    margin-left: 0;
    margin-right: 0;
}

/* 13. CORRECTION DES ÉLÉMENTS AVEC POSITION ABSOLUTE */
.hero-parallax, .decoblinds-hero {
    position: relative;
}

/* 14. CORRECTION POUR LES PETITS ÉCRANS */
@media (max-width: 576px) {
    .container, .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .hero-content, .decoblinds-hero .slide-content {
        left: 5% !important;
        max-width: 90% !important;
        padding: 15px !important;
    }
    
    .phone-box-modern {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 1rem;
    }
}

/* 15. CORRECTION DES ANIMATIONS POUR MOBILE */
@media (max-width: 768px) {
    .reveal, .hero-animate, .stagger-item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* 16. CORRECTION DE LA SECTION ABOUT */
.image-gold-wrapper {
    max-width: 100%;
}

.image-gold-wrapper img {
    width: 100%;
    height: auto;
}

/* 17. CORRECTION DE LA SECTION CONTACT */
.contact-section .row {
    margin-left: 0;
    margin-right: 0;
}

/* 18. CORRECTION DES TESTIMONIALS */
.testimonial-card-wrapper {
    max-width: 100%;
}

/* 19. FORCER LE VIEWPORT SUR MOBILE */
@media (max-width: 768px) {
    .decoblinds-hero {
        height: 400px !important;
    }
    
    .hero-title-animated {
        font-size: clamp(20px, 8vw, 32px) !important;
    }
    
    .reveal {
        font-size: 14px !important;
    }
}

/* 20. CORRECTION FINALE POUR ÉLIMINER TOUT DÉBORDEMENT */
* {
    box-sizing: border-box;
}

body {
    position: relative;
}

/* Vérification visuelle des débordements (à désactiver en production) */
/*
* {
    outline: 1px solid red !important;
}
*/
/* ===== CORRECTIONS SPÉCIFIQUES POUR L'ALIGNEMENT DES FLÈCHES ===== */

.decoblinds-hero .arrow {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: rgba(255, 255, 255, 0.95);
    color: #28354E;
    font-size: 1.2rem;
    font-weight: bold;
    transition: all 0.3s cubic-bezier(.165, .84, .44, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    border: none;
    cursor: pointer;
}

/* Positionnement spécifique pour chaque flèche */
.decoblinds-hero .arrow.prev {
    left: 12px;
}

.decoblinds-hero .arrow.next {
    right: 12px;
}

/* Centrage parfait du contenu SVG */
.decoblinds-hero .arrow svg {
    width: 24px;
    height: 24px;
    display: block;
    margin: 0 auto;
}

/* Version mobile - alignement amélioré */
@media (max-width: 768px) {
    .decoblinds-hero .arrow {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }
    
    .decoblinds-hero .arrow svg {
        width: 20px;
        height: 20px;
    }
    
    /* Ajustement de la position sur mobile si nécessaire */
    .decoblinds-hero .arrow.prev {
        left: 8px;
    }
    
    .decoblinds-hero .arrow.next {
        right: 8px;
    }
}

/* Version très petits écrans */
@media (max-width: 480px) {
    .decoblinds-hero .arrow {
        width: 40px;
        height: 40px;
    }
    
    .decoblinds-hero .arrow svg {
        width: 18px;
        height: 18px;
    }
    
    .decoblinds-hero .arrow.prev {
        left: 6px;
    }
    
    .decoblinds-hero .arrow.next {
        right: 6px;
    }
}

/* S'assurer que les flèches restent bien alignées pendant les animations */
.decoblinds-hero .arrow:hover {
    transform: translateY(-50%) scale(1.05);
    background: rgb(255, 255, 255);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Correction pour le conteneur du slider */
.decoblinds-hero {
    position: relative;
    overflow: hidden;
}

/* S'assurer que les flèches sont toujours au-dessus du contenu */
.decoblinds-hero .arrow {
    z-index: 10;
}

/* Éviter tout débordement qui pourrait affecter l'alignement */
.decoblinds-hero .slides,
.decoblinds-hero .slide,
.decoblinds-hero .slide img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* ===== CORRECTIONS RESPONSIVE POUR LA SECTION QUALITÉS ===== */

/* Style de base pour la carte des qualités */
.qualities-card {
    max-width: 450px;
    border-top: 3px solid #2d1b69;
    min-height: 180px;
    background: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

/* Conteneur des items */
.qualities-container {
    width: 100%;
}

/* Style des items individuels */
.quality-item {
    display: flex;
    align-items: center;
    padding: 8px 4px;
    transition: all 0.3s ease;
}

.quality-item:hover {
    transform: translateX(5px);
    background: rgba(45, 27, 105, 0.05);
    border-radius: 6px;
}

/* Icône étoile améliorée */
.star-icon-wrapper {
    width: 36px;
    height: 36px;
    background: #2d1b69;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.quality-item:hover .star-icon-wrapper {
    background: #b59563;
    transform: scale(1.1) rotate(5deg);
}

.star-icon-wrapper svg {
    width: 16px;
    height: 16px;
    fill: #ffffff;
    transition: all 0.3s ease;
}

/* Texte des qualités */
.quality-text {
    font-weight: 600;
    font-style: italic;
    font-size: 0.875rem;
    color: #28354E;
    line-height: 1.3;
    margin: 0;
    transition: all 0.3s ease;
}

.quality-item:hover .quality-text {
    color: #2d1b69;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablettes */
@media (max-width: 991.98px) {
    .qualities-card {
        max-width: 400px;
        min-height: 160px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .quality-item {
        padding: 6px 3px;
    }
    
    .star-icon-wrapper {
        width: 32px;
        height: 32px;
    }
    
    .star-icon-wrapper svg {
        width: 14px;
        height: 14px;
    }
    
    .quality-text {
        font-size: 0.85rem;
    }
}

/* Mobiles */
@media (max-width: 767.98px) {
    .qualities-card {
        max-width: 100%;
        min-height: auto;
        padding: 1.5rem !important;
        margin: 0 auto;
    }
    
    .qualities-container .row {
        gap: 0.5rem !important;
    }
    
    .quality-item {
        padding: 8px 6px;
        margin-bottom: 4px;
    }
    
    .star-icon-wrapper {
        width: 30px;
        height: 30px;
        margin-right: 0.75rem;
    }
    
    .star-icon-wrapper svg {
        width: 13px;
        height: 13px;
    }
    
    .quality-text {
        font-size: 0.82rem;
        word-wrap: break-word;
        white-space: normal;
        line-height: 1.2;
    }
}

/* Très petits mobiles */
@media (max-width: 575.98px) {
    .qualities-card {
        padding: 1.25rem !important;
        border-top-width: 2px;
    }
    
    .qualities-container .row {
        gap: 0.25rem !important;
    }
    
    .quality-item {
        padding: 6px 4px;
        margin-bottom: 2px;
    }
    
    .star-icon-wrapper {
        width: 28px;
        height: 28px;
        margin-right: 0.5rem;
    }
    
    .star-icon-wrapper svg {
        width: 12px;
        height: 12px;
    }
    
    .quality-text {
        font-size: 0.78rem;
        line-height: 1.1;
    }
}

/* Orientation paysage mobile */
@media (max-width: 767.98px) and (orientation: landscape) {
    .qualities-card {
        min-height: 140px;
    }
    
    .quality-item {
        padding: 4px 3px;
    }
    
    .quality-text {
        font-size: 0.8rem;
    }
}

/* Pour les écrans très larges */
@media (min-width: 1400px) {
    .qualities-card {
        max-width: 500px;
        min-height: 200px;
    }
    
    .quality-text {
        font-size: 0.9rem;
    }
}

/* Animation d'apparition */
.quality-item {
    opacity: 0;
    transform: translateX(-20px);
    animation: slideInRight 0.6s ease forwards;
}

.quality-item:nth-child(1) { animation-delay: 0.1s; }
.quality-item:nth-child(2) { animation-delay: 0.2s; }
.quality-item:nth-child(3) { animation-delay: 0.3s; }
.quality-item:nth-child(4) { animation-delay: 0.4s; }

@keyframes slideInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}