
/* Accent line on top */
.navbar-accent{position:fixed;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#35b26f,#0b2a4a);z-index:1031}

/* Light navbar */
.navbar-custom{background:#fff;border-bottom:1px solid rgba(0,0,0,.06);
  box-shadow:none;transition:box-shadow .2s ease, background-color .2s ease}
.navbar-custom.is-scrolled{box-shadow:0 6px 18px rgba(15,28,45,.06)}

.navbar-custom .navbar-brand{color:#0b2a4a;font-weight:600;letter-spacing:.2px}
.navbar-custom .navbar-brand:hover{color:#0a2440}

/* BS5 nav links */
.navbar-custom .navbar-nav .nav-link{color:#203551;padding-top:18px;padding-bottom:18px}
.navbar-custom .navbar-nav .nav-link:hover,
.navbar-custom .navbar-nav .nav-link:focus{color:#0b2a4a;background:transparent}

/* underline animation */
.navbar-custom .navbar-nav .nav-link::after{
  content:'';display:block;height:2px;background:#35b26f;
  transform:scaleX(0);transform-origin:50% 50%;transition:transform .2s ease;
  margin-top:8px
}
.navbar-custom .navbar-nav .nav-link:hover::after,
.navbar-custom .navbar-nav .nav-link.active::after{transform:scaleX(1)}

/* Dropdown */
.navbar-custom .dropdown-menu{border:0;box-shadow:0 8px 24px rgba(15,28,45,.08);
  border-radius:8px;padding:8px}
.navbar-custom .dropdown-menu .dropdown-item{padding:8px 14px;color:#203551}
.navbar-custom .dropdown-menu .dropdown-item:hover{background:#f2f7ff;color:#0b2a4a}
.navbar-custom .dropdown-header{color:#7a8ba8;font-weight:600;font-size:12px;text-transform:uppercase}

/* CTA link (Espace client) */
.navbar-cta{padding:8px 12px;margin:8px 0;border:1px solid rgba(11,42,74,.25);
  border-radius:16px;line-height:20px;color:#0b2a4a;background:transparent;display:inline-block}
.navbar-cta:hover{color:#fff;background:#0b2a4a;border-color:#0b2a4a;text-decoration:none}

/* fine tune icons baseline */
.navbar-custom .fa{position:relative;top:1px}

/* Mobile: simplify dropdown shadow */
@media (max-width: 991.98px){
  .navbar-custom .dropdown-menu{box-shadow:none;border-radius:0}
}

/* Evite les retours à la ligne sur les liens à droite */
.navbar-custom .navbar-nav.ms-auto .nav-link { white-space: nowrap; }

/* Icône burger visible même avec navbar-custom */
.navbar-custom .navbar-toggler { border-color: rgba(11,42,74,.25); }
.navbar-custom .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='rgba(11,42,74,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Le téléphone peut revenir à la ligne sur desktop */
@media (min-width: 992px){
  .navbar-custom .navbar-nav.ms-auto .nav-link.phone-link{
    white-space: normal;        /* annule le nowrap global */
    display: inline-block;      /* pour que max-width s'applique */
    max-width: 10.2rem;         /* ajuste 9.6–10.6rem selon ton rendu */
    line-height: 1.15;
    text-align: right;          /* joli alignement avec l'icône */
    padding-top: 14px;          /* micro-alignement vertical */
    padding-bottom: 14px;
  }
}

/* Garder le nowrap pour les autres liens (email, etc.) */
@media (min-width: 992px){
  .navbar-custom .navbar-nav.ms-auto .nav-link:not(.phone-link){
    white-space: nowrap;
  }
}

/* Ne pas rétrécir le <li> téléphone et le faire tenir sur 2 lignes */
@media (min-width: 992px){
  /* le <li> devient un flex-item de largeur fixe */
  .navbar-custom .navbar-nav.ms-auto .phone-item{
    flex: 0 0 12.5rem;   /* ajuste entre 11.5rem et 13rem selon ton rendu */
  }
  /* le lien peut passer à la ligne à l'intérieur */
  .navbar-custom .navbar-nav.ms-auto .phone-link{
    white-space: normal;
    display: block;
    text-align: right;
    line-height: 1.2;
    padding-top: 14px;   /* aligne verticalement avec l'email */
    padding-bottom: 14px;
  }
}

/* Les autres liens (email, etc.) restent sur une ligne */
@media (min-width: 992px){
  .navbar-custom .navbar-nav.ms-auto .nav-link:not(.phone-link){
    white-space: nowrap;
  }
}

/* 2 lignes de navbar sur desktop (≥992px) */
@media (min-width: 992px){
  /* autorise la navbar à passer sur 2 lignes */
  .navbar-custom .navbar-collapse{ flex-wrap: wrap; }

  /* l’élément "rupture" prend toute la largeur et crée la 2e ligne */
  .navbar-custom .break-lg{ flex-basis: 100%; height: 0; }

  /* la ligne contact occupe toute la largeur de la 2e ligne, alignée à droite */
  .navbar-custom .contact-line{
    width: 100%;
    justify-content: flex-end;
    gap: .75rem;           /* espace entre email / tel / bouton */
  }

  /* un peu moins haut que le menu pour l’équilibre visuel */
  .navbar-custom .contact-line .nav-link{
    padding-top: 6px;
    padding-bottom: 6px;
    white-space: nowrap;   /* chaque élément tient sur 1 ligne */
  }

  /* si besoin, fixe une largeur minimum au téléphone pour éviter qu'il se casse */
  .navbar-custom .contact-line .phone-item{ flex: 0 0 auto; }
}

/* === CAROUSEL_BS5_FIX (preserve slides) === */
#myCarousel .carousel-item img{
  display:block;
  width:100%;
  height:auto;
}
#myCarousel .carousel-caption{ text-shadow: 0 1px 2px rgba(0,0,0,.35); }
@media (min-width: 992px){
  #myCarousel .carousel-item{ max-height: 70vh; overflow:hidden; }
  #myCarousel .carousel-item img{ object-fit: cover; height: 70vh; }
}



/* === NAVBAR : réaligner la marque sur la 1re ligne (desktop) === */
@media (min-width: 992px){
  /* place brand/toggler/collapse en haut du conteneur */
  .navbar-custom > .container { align-items: flex-start; }

  /* hauteur visuelle harmonisée */
  .navbar-custom .navbar-brand { padding-top: 6px; padding-bottom: 6px; margin-top: 0; }
  .navbar-custom .navbar-nav .nav-link { padding-top: 6px; padding-bottom: 6px; }

  /* petit écart entre ligne 1 et 2 (optionnel) */
  .navbar-custom .contact-line { margin-top: .125rem; }
}

/* === CAROUSEL : éviter que le contenu démarre "sous" le slider === */
#myCarousel { margin-bottom: 2.25rem; }                 /* espace sous le slider */
#myCarousel + .container { margin-top: 1rem; }          /* sécurité : 1er bloc de texte */


/* Espace sous le carrousel pour éviter tout chevauchement visuel */
#myCarousel{ margin-bottom: 2.5rem; }

/* Espace garanti sous le carousel + démarrage du contenu */
.after-hero { margin-top: 2rem; }           /* force un “vrai” espace sous #myCarousel */
#myCarousel { margin-bottom: 2.5rem; }      /* garde aussi l’espace côté slider */


/* --- Séparation nette entre carousel et contenu --- */
#myCarousel{ 
  margin-bottom: 3.5rem;           /* espace sous le slider */
  position: relative; z-index: 1;  /* évite que la légende déborde au-dessus du texte */
}
.after-hero{ 
  margin-top: 3rem;                /* espace en plus côté contenu */
}

/* Garde la légende à l'intérieur de l'image, pas collée en bas */
#myCarousel .carousel-caption,
#myCarousel .carousel-caption1{
  bottom: 3rem;                    /* ajuste 2–4rem si besoin */
}

/* Si une ancienne règle donnait des marges bizarres à la box de légende */
.Titre-carouselle{ margin: 0 !important; }


/* BS3 → BS5 : remettre les images en cercle */
.img-circle,
.rounded-circle {                /* compat + classe BS5 native */
  border-radius: 50% !important;
}

.img-rounded {                   /* ex-BS3, arrondis doux */
  border-radius: .25rem;
}

/* Pour tes pictos 140x140 : cercle net et centré */
.img-circle {
  width: 140px;
  height: 140px;
  object-fit: cover;             /* recadre si l’image n’est pas carrée */
  display: block;
  margin: 0 auto 12px;
}

/* === NAVBAR 2 lignes – mode compact (forcé) === */
@media (min-width: 992px){
  .navbar-custom > .container{ align-items:flex-start !important; }
  .navbar-custom{ padding-top:0 !important; padding-bottom:0 !important; }

  /* Ligne 1 */
  .navbar-custom .navbar-brand{ padding:8px 0 !important; margin-top:0 !important; line-height:1.1 !important; }
  .navbar-custom .navbar-nav.me-auto .nav-link{ padding:8px 10px !important; line-height:1.1 !important; }

  /* Saut de ligne */
  .navbar-custom .break-lg{ height:0 !important; margin:0 !important; padding:0 !important; }

  /* Ligne 2 */
  .navbar-custom .contact-line{
    width:100% !important;
    justify-content:flex-end !important;
    gap:.6rem !important;
    margin-top:0 !important;
  }
  .navbar-custom .contact-line .nav-link{
    padding:2px 0 !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
    font-size:.95rem !important;
  }
  .navbar-custom .navbar-cta{
    padding:6px 12px !important;
    border-radius:12px !important;
    line-height:1.1 !important;
  }

  /* Compense la hauteur totale (ajuste +/- 6px selon ton rendu) */
  body{ padding-top:92px !important; }
}


/* --- Vos Avantages : steps + bénéfices --- */
.cc-advantages h2{ color:#0b2a4a; font-weight:700; letter-spacing:.2px; }

/* Steps */
.cc-step{
  display:flex; gap:14px; align-items:flex-start;
  background:#f8fbff; border:1px solid rgba(11,42,74,.08);
  border-radius:14px; padding:14px 16px; margin-bottom:12px;
  box-shadow:0 2px 10px rgba(15,28,45,.04);
}
.cc-step-number{
  flex:0 0 40px; width:40px; height:40px; border-radius:50%;
  background:#0b2a4a; color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 3px rgba(11,42,74,.08);
}

/* Benefits */
.cc-benefits li{
  display:flex; align-items:flex-start; gap:8px;
  padding:10px 0; border-bottom:1px dashed rgba(11,42,74,.15);
}
.cc-benefits li:last-child{ border-bottom:0; }
.cc-benefits .fa{
  color:#35b26f; margin-top:3px; width:18px; text-align:center;
}

/* Petits ajustements responsifs */
@media (min-width: 992px){
  .cc-step{ padding:16px 18px; }
}

/* === CC advantages hover/animation === */
.cc-step{ transition: box-shadow .2s ease, transform .2s ease; }
.cc-step:hover{ box-shadow:0 8px 24px rgba(15,28,45,.12); transform: translateY(-2px); }
.cc-benefits li:hover .fa{ transform: scale(1.05); transition: transform .2s ease; }


/* --- Nouvelles (accueil) --- */
.cc-news h2{ color:#0b2a4a; font-weight:700; letter-spacing:.2px; }

/* Option A – accordéon */
.cc-news .accordion-button{ font-weight:600; color:#203551; }
.cc-news .accordion-button:not(.collapsed){ background:#f5faff; color:#0b2a4a; }
.cc-news .accordion-item{ border-radius:12px; overflow:hidden; box-shadow:0 4px 18px rgba(15,28,45,.06); margin-bottom:.6rem; border:0; }
.cc-news .accordion-body{ padding:12px 16px; }

/* Option B – cartes "dernières nouvelles" */
.cc-news-card{
  display:block; padding:14px 16px; border:1px solid rgba(11,42,74,.08);
  border-radius:12px; background:#fff; text-decoration:none; color:#203551;
  box-shadow:0 2px 10px rgba(15,28,45,.04); transition:transform .16s ease, box-shadow .16s ease;
}
.cc-news-card:hover{ transform:translateY(-2px); box-shadow:0 8px 26px rgba(15,28,45,.12); }
.cc-news-badge{
  display:inline-block; font-size:.75rem; font-weight:700; color:#0b2a4a; background:#e9f3ff;
  border:1px solid rgba(11,42,74,.12); border-radius:999px; padding:.2rem .5rem; margin-bottom:.4rem;
}
.cc-news-meta{ font-size:.85rem; color:#6b7b93; }


.cc-trust .cc-kpi{ border-right:1px solid #eef1f6; padding-right:14px; }
.cc-trust .col-6:nth-child(2n) .cc-kpi{ border-right:0; }
.cc-kpi-n{ font-weight:800; font-size:42px; color:#35b26f; line-height:1; margin-bottom:.25rem; }
.cc-kpi-l{ color:#415167; }
@media (min-width:992px){ .cc-kpi-n{ font-size:48px; } }


/* Blog cards */
.cc-news-card{ display:block; text-decoration:none; color:#203551; border:1px solid #e8eaf0; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 2px 10px rgba(15,28,45,.04); transition:transform .16s ease, box-shadow .16s ease; padding:0 14px 12px; }
.cc-news-card:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(15,28,45,.12); }
.cc-news-img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px; margin:12px 0 6px; }
.cc-news-pill{ display:inline-block; font-size:.75rem; font-weight:700; color:#0b2a4a; background:#e9f3ff; border:1px solid rgba(11,42,74,.12);
  border-radius:999px; padding:.2rem .5rem; }
.cc-news-meta{ display:flex; align-items:center; gap:.4rem; color:#6b7b93; font-size:.9rem; }
.cc-avatar{ width:24px; height:24px; border-radius:50%; object-fit:cover; }


/* Badges par thématique */
.pill-assurance{ background:#e6effa; border-color:#d2e1f6; color:#184273; }
.pill-fiduciaire{ background:#e9f7e7; border-color:#cfeacc; color:#589a36; }
.pill-immobilier{ background:#fff1e7; border-color:#ffe0cb; color:#e9792b; }

/* Si tu veux garder la même base visuelle pour les cartes */
.cc-news-card{
  display:block; text-decoration:none; color:#203551; border:1px solid #e8eaf0; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 2px 10px rgba(15,28,45,.04); transition:transform .16s ease, box-shadow .16s ease; padding:0 14px 12px;
}
.cc-news-card:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(15,28,45,.12); }
.cc-news-img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px; margin:12px 0 6px; }
.cc-news-pill{ display:inline-block; font-size:.75rem; font-weight:700; border:1px solid rgba(11,42,74,.12);
  border-radius:999px; padding:.2rem .5rem; }
.cc-news-meta{ display:flex; align-items:center; gap:.4rem; color:#6b7b93; font-size:.9rem; }
.cc-avatar{ width:24px; height:24px; border-radius:50%; object-fit:cover; }


/* WhatsApp floating button */
.wa-widget{
  position:fixed; right:18px; bottom:18px; z-index:1080;
  display:flex; align-items:center; gap:.6rem;
}
.wa-widget{ z-index: 10050; } /* au lieu de 1080 */

.wa-btn{
  width:56px; height:56px; border-radius:50%;
  background:#25D366; border:0; color:#fff; cursor:pointer;
  box-shadow:0 8px 26px rgba(15,28,45,.25);
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease, box-shadow .15s ease;
}
.wa-btn:hover{ transform:translateY(-1px); box-shadow:0 12px 30px rgba(15,28,45,.3); }
.wa-badge{
  background:#ffffff; border:1px solid #e8eaf0; color:#203551;
  padding:.45rem .7rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 6px 18px rgba(15,28,45,.12);
}
@media (max-width: 576px){
  .wa-btn{ width:54px; height:54px; }
  .wa-badge{ display:none; }
}

/* Si tu utilises une bannière cookies en bas, garde un espace de sécurité */
:root{ --cookie-offset: 0px; } /* modifie la valeur via JS quand la bannière s'affiche */
.wa-widget{ bottom: calc(18px + var(--cookie-offset)); }

/* Marquee partenaires : visible, agréable, accessible */
.partner-marquee{
  overflow: hidden;
  mask-image: linear-gradient(90deg, rgba(0,0,0,0), #000 8%, #000 92%, rgba(0,0,0,0));
  padding: 6px 0;
}
.partner-marquee .track{
  display: inline-flex;
  align-items: center;
  gap: 56px;                     /* espace entre logos */
  animation: partners-scroll 28s linear infinite;
  will-change: transform;
}
@keyframes partners-scroll{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }  /* set dupliqué = boucle fluide */
}
.partner-marquee .partner-logo{
  height: 52px;                  /* plus grand = plus lisible */
  width: auto;
  opacity: 1;                    /* pas d’atténuation */
  filter: none;                  /* pas de grayscale sur placeholders */
  transition: transform .15s ease;
}
.partner-marquee .partner-logo:hover{ transform: translateY(-2px); }

@media (max-width: 576px){
  .partner-marquee .partner-logo{ height: 38px; }
}

/* Respecte les utilisateurs “réduire les animations” */
@media (prefers-reduced-motion: reduce){
  .partner-marquee .track{ animation: none; }
}


.cc-advantages{
  background:#f7fafc;               /* léger fond */
  border:1px solid #e8eaf0;
  border-radius:16px;
}

.cc-logos img{
  height: 36px; /* ajuste (32–48px) selon ta maquette */
  width: auto;
  opacity: .9;
  transition: transform .2s ease, opacity .2s;
}
.cc-logos img:hover{ opacity: 1; transform: scale(1.05); }

/* Empêche la légende du carousel de recouvrir le contenu suivant */
#myCarousel{
  overflow: hidden;   /* on clippe tout ce qui dépasse */
  z-index: 0;         /* pas besoin d'empiler au-dessus du contenu */
  margin-bottom: 3rem;/* espace sous le slider (ajuste au besoin) */
}

/* Légende bien à l'intérieur de l'image */
#myCarousel .carousel-caption{ bottom: 2.5rem; }







