/* Custom fixes: responsive layout, better image handling, and smoother interactions */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Palette or premium unifiee (coherente avec le logo) */
:root {
  --brand-gold: #bd8b17;
  --brand-gold-deep: #a97a12;
  --brand-gold-soft: #d4aa44;

  --theme-color2: var(--brand-gold);
  --theme-color2-rgb: 189, 139, 23;
  --theme-color7: var(--brand-gold);
  --theme-color8: var(--brand-gold);
  --link-hover-color: var(--brand-gold);
  --theme-black: var(--brand-gold);
  --gradient-1: linear-gradient(110deg, var(--brand-gold-deep) 0%, var(--brand-gold) 52%, var(--brand-gold-soft) 100%);
}

html {
  scroll-behavior: smooth;
}

/* Selection lisible sur tout le site */
::selection {
  background: rgba(189, 139, 23, 0.3);
  color: #111111;
}

::-moz-selection {
  background: rgba(189, 139, 23, 0.3);
  color: #111111;
}

body {
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
}
img, svg {
  max-width: 100%;
  height: auto;
  display: block;
}
.page-wrapper {
  min-height: 100vh;
}
.main-header .outer-box {
  align-items: center;
  gap: 0.9rem;
}

/* Header style identique au visuel fourni */
.header-style-one .header-lower {
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.header-style-one .main-box {
  min-height: 92px;
}

.header-style-one .logo img {
  max-height: 56px;
  width: auto;
}

.header-clean-layout {
  width: 100%;
  justify-content: flex-end;
}

.header-clean-layout .main-menu {
  margin-right: 28px;
}

.header-clean-layout .main-menu .navigation > li > a {
  font-size: 16px;
  font-weight: 500;
  color: #111111;
}

.header-clean-layout .main-menu .navigation > li.current > a {
  color: #111111;
}

.header-clean-layout .main-menu .navigation > li.current > a::before {
  background: var(--brand-gold);
}

.header-cta-wrap {
  display: flex;
  align-items: center;
}

.header-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 30px;
  border-radius: 999px;
  background: #050505;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.2px;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.header-cta-btn:hover,
.header-cta-btn:focus-visible {
  color: #ffffff;
  opacity: 0.96;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.26);
}

/* Eviter le debordement du CTA dans le header sticky au scroll */
.sticky-header .inner-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.sticky-header .nav-outer {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.sticky-header .main-menu {
  min-width: 0;
}

.sticky-header .header-cta-wrap {
  flex: 0 0 auto;
}

.sticky-header .header-cta-btn {
  min-height: 46px;
  padding: 0 20px;
  font-size: 14px;
  white-space: nowrap;
}

@media (max-width: 1299px) {
  .sticky-header .header-cta-btn {
    min-height: 42px;
    padding: 0 16px;
    font-size: 13px;
  }
  /* Cache les icônes sociales du header pour éviter l'overflow.
     !important nécessaire : une règle .header-social{display:flex} non conditionnelle,
     placée plus bas dans ce fichier, gagnait sinon la cascade (même spécificité, source plus tardive). */
  .header-social {
    display: none !important;
  }
}

@media (max-width: 1199px) {
  .sticky-header .header-cta-wrap {
    display: none !important;
  }
}
.main-menu .navigation > li {
  margin-right: 1.5rem;
}
.main-menu .navigation > li:last-child {
  margin-right: 0;
}
.navigation li a {
  transition: color 0.2s ease, transform 0.2s ease;
}
.navigation li a:hover,
.navigation li a:focus-visible {
  color: var(--link-hover-color);
  transform: translateY(-1px);
  outline: none;
}
.theme-btn,
.info-btn,
.mobile-nav-toggler {
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.theme-btn:hover,
.info-btn:hover,
.mobile-nav-toggler:hover {
  transform: translateY(-2px);
}
.hero-content h1 {
  font-size: clamp(2.6rem, 4.5vw, 4.2rem);
}
.hero-content p {
  max-width: 42rem;
  margin: 1.4rem 0 0;
}

/* Le CTA "Parlons-en" est entièrement redéfini en fin de fichier
   (section "CTA PRINCIPAL DU HERO"). Les deux règles qui se trouvaient ici
   passaient la pastille en doré au survol — donc doré sur doré, la flèche
   disparaissait. */

/* Hero : conteneur texte au-dessus des décors de fond */
.hero-section .auto-container {
  position: relative;
  z-index: 3;
}

/* Le palier "cartes Services" qui se trouvait ici (1200-1399px) est devenu
   redondant : les valeurs qu'il appliquait sont désormais celles de tous les
   écrans (voir "DENSITÉ VERTICALE" en fin de fichier). Le garder aurait
   regonflé les cartes sur cette seule tranche. */

@media (max-width: 991px) {
  .header-clean-layout .main-menu {
    margin-right: 0;
  }

  .header-cta-wrap {
    display: none;
  }

  .header-style-one .main-box {
    min-height: 78px;
  }

  .header-style-one .logo img {
    max-height: 46px;
  }

  .main-header .outer-box {
    flex-wrap: wrap;
    justify-content: center;
  }
  .info-btn,
  .theme-btn {
    width: 100%;
    justify-content: center;
  }
}

/* En dessous de 991px, le CTA texte et les icônes sociales du header disparaissent tous les deux :
   il ne reste plus aucun contact direct visible avant d'ouvrir le menu. On restaure uniquement
   l'icône téléphone (déjà dans le DOM) comme action rapide, sans ajouter de texte. */
@media (max-width: 991px) {
  .main-header .header-lower .outer-box .header-social {
    display: flex !important;
    margin-left: 12px;
  }
  .header-social a {
    display: none !important;
  }
  .header-social a[href^="tel:"] {
    display: inline-flex !important;
  }
}
@media (max-width: 767px) {
  .hero-content h1 {
    font-size: clamp(2rem, 7vw, 3rem);
  }
  .hero-content p {
    font-size: 1rem;
  }
  .main-header .logo {
    margin-bottom: 1rem;
  }
  .header-contact,
  .social-icon {
    justify-content: center;
  }
}

/* 4 cartes "Services" en grille 3 colonnes entre 992px et 1399px (col-lg-4 / col-xl-4) :
   la 4e carte se retrouve seule sur sa ligne, collée à gauche avec un grand vide à droite.
   On la centre via les marges auto (le layout .row est déjà en flexbox). */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .service-wrapper .row > div:nth-child(4) {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Layout equal-height pour les cartes d'abonnement */
.pricing-section .row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
}

.pricing-section .row > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

.pricing-section .pricing-box-items {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
}

.pricing-section .pricing-box-items .pricing-header {
  flex: 0 0 auto;
}

.pricing-section .pricing-box-items .pricing-button {
  flex: 0 0 auto;
}

.pricing-section .pricing-box-items .pricing-list {
  flex: 1 1 auto;
}

/* Classe utilitaire manquante dans Bootstrap */
.mt-50 { margin-top: 50px; }

/* Styles pour les icônes sociales dans l'en-tête */
.header-social {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 20px;
}

.header-social a {
  display: inline-block;
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.1);
  text-align: center;
  color: #333;
  transition: all 0.3s ease;
}

.header-social a:hover {
  background: rgba(189, 139, 23, 0.8);
  color: #fff;
  transform: scale(1.1);
}

/* Améliorations pour la section pricing */
.pricing-section .pricing-box-items {
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  background: #fff;
  border: 1px solid #e0e0e0;
  overflow: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.pricing-section .pricing-box-items:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.pricing-section .pricing-box-items.active {
  border: 2px solid rgba(189, 139, 23, 0.35);
  background: #bd8b17;
}

.pricing-section .pricing-box-items.bg-black {
  background: #1a1e27;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

/* Couleurs uniformes par carte */

/* TPE — blanc pur */
.pricing-section .row > div:nth-child(1) .pricing-box-items {
  background: #ffffff;
  border: 1px solid #e8e0d0;
}

/* PME — or de marque uniforme */
.pricing-section .row > div:nth-child(2) .pricing-box-items {
  background: #bd8b17;
  border: 2px solid rgba(189, 139, 23, 0.35);
}

/* ONG — noir élégant */
.pricing-section .row > div:nth-child(3) .pricing-box-items.bg-black {
  background: #1a1e27;
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: #f0ece3;
  -webkit-font-smoothing: antialiased;
}

/* ── Textes PME sur fond doré ── */
.pricing-section .row > div:nth-child(2) .pricing-box-items h3,
.pricing-section .row > div:nth-child(2) .pricing-box-items .pricing-subtitle,
.pricing-section .row > div:nth-child(2) .pricing-box-items .pricing-list li {
  color: #ffffff !important;
}

/* ── Textes ONG sur fond noir ── */
.pricing-section .row > div:nth-child(3) .pricing-box-items.bg-black h3.text-white,
.pricing-section .row > div:nth-child(3) .pricing-box-items.bg-black .pricing-subtitle.text-white,
.pricing-section .row > div:nth-child(3) .pricing-box-items.bg-black .pricing-list li.text-white {
  color: #f0ece3 !important;
}

/* Le thème anime un calque ::before qui balaie tout bouton .btn-style-one au survol,
   avec --theme-color1 (#ffffff, blanc) comme couleur de remplissage.
   Or le texte de ces boutons reste blanc au survol lui aussi (cf. hero "Parlons-en",
   CTA "Appel"...) : texte blanc sur calque blanc = texte qui disparaît au survol.
   Sur les cartes pricing sombres, le même calque écrase en plus les couleurs
   noir/blanc prévues pour chaque carte. Le thème désactive déjà cette animation sur
   certaines de ses propres variantes de boutons pricing ailleurs : on la désactive
   ici pour tous les .theme-btn.btn-style-one du site plutôt que de la rafistoler
   au cas par cas. */
.theme-btn.btn-style-one::before {
  display: none !important;
}

/* Bouton "Appel" / "Parlons-en" des bandeaux CTA (.cta-contact-wrapper) : le thème leur
   applique un fond dégradé blanc-or-blanc (background-size:200%) qui glisse au survol
   (background-position 0%→100%), même effet de balayage animé que le ::before ci-dessus.
   On fige le dégradé sur sa position de repos pour supprimer l'animation sans changer
   l'apparence du bouton. */
.cta-contact-wrapper .btn-style-one:hover {
  background-position: 0% 0 !important;
}

/* Bouton PME sur fond doré → noir */
.pricing-section .row > div:nth-child(2) .pricing-button .theme-btn {
  background: #111111;
  border-color: #111111;
  color: #ffffff;
}

.pricing-section .row > div:nth-child(2) .pricing-button .theme-btn:hover {
  background: #333333;
  border-color: #333333;
}

/* Bouton ONG sur fond noir → doré */
.pricing-section .row > div:nth-child(3) .pricing-box-items.bg-black .pricing-button .theme-btn {
  background: #bd8b17;
  border-color: #bd8b17;
  color: #ffffff;
}

.pricing-section .row > div:nth-child(3) .pricing-box-items.bg-black .pricing-button .theme-btn:hover {
  background: #a97a12;
  border-color: #a97a12;
}

/* Styles pour les boutons Choisir */
.pricing-section .row > div:nth-child(1) .pricing-button .theme-btn {
  background: #bd8b17;
  border-color: #bd8b17;
  color: #ffffff;
}

/* ── Bouton réactif au survol de la carte entière ── */

/* TPE : fond blanc → survol carte → bouton devient noir */
.pricing-section .row > div:nth-child(1) .pricing-box-items:hover .pricing-button .theme-btn {
  background: #111111;
  border-color: #111111;
  color: #ffffff;
}

/* PME : fond doré → survol carte → bouton devient blanc */
.pricing-section .row > div:nth-child(2) .pricing-box-items:hover .pricing-button .theme-btn {
  background: #ffffff;
  border-color: #ffffff;
  color: #111111;
}

/* ONG : fond noir → survol carte → bouton devient blanc */
.pricing-section .row > div:nth-child(3) .pricing-box-items.bg-black:hover .pricing-button .theme-btn {
  background: #ffffff;
  border-color: #ffffff;
  color: #111111;
}

.pricing-section .plan-discount-badge {
  background: linear-gradient(45deg, #ff6b6b, #feca57);
  color: #fff;
  font-weight: bold;
  border-radius: 20px;
  padding: 5px 15px;
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 10;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.pricing-section .plan-top-tag {
  background: linear-gradient(45deg, var(--theme-color7), #d4af37);
  color: #fff;
  font-weight: bold;
  border-radius: 0 0 15px 15px;
  padding: 8px 20px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  /* La carte PME est surélevée (translateY) par rapport à ses voisines : à certaines
     positions de scroll, son badge "MEILLEURE PLAN" passe sous le header sticky (z-index 9999)
     et devient invisible. On le passe au-dessus du header pour qu'il reste toujours
     lisible, y compris pendant le survol de la carte. */
  z-index: 10000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.pricing-section .pricing-header {
  padding: 30px 20px 20px;
  text-align: center;
  position: relative;
}

.pricing-section .pricing-header .title-icon {
  margin-bottom: 15px;
}

.pricing-section .pricing-header h3 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #333;
}

.pricing-section .pricing-box-items.bg-black .pricing-header h3 {
  color: #fff;
}

.pricing-section .pricing-subtitle {
  font-size: 16px;
  color: #666;
  margin-bottom: 20px;
}

.pricing-section .pricing-box-items.bg-black .pricing-subtitle {
  color: #ccc;
}

.pricing-section .pricing-price-wrap {
  margin-bottom: 20px;
}

.pricing-section .plan-old-price {
  text-decoration: line-through;
  color: #999;
  font-size: 18px;
}

.pricing-section .plan-current-price {
  font-size: 32px;
  font-weight: 700;
  color: var(--theme-color7);
  margin: 5px 0;
}

.pricing-section .plan-current-price span {
  font-size: 16px;
  font-weight: 400;
  color: #666;
}

.pricing-section .plan-saving {
  color: #666;
  font-weight: 600;
  font-size: 14px;
}

.pricing-section .pricing-button {
  padding: 20px;
  text-align: center;
}

.pricing-section .pricing-button .theme-btn {
  background: linear-gradient(45deg, var(--theme-color7), #d4af37);
  color: #fff;
  border: none;
  padding: 12px 30px;
  border-radius: 25px;
  font-weight: 600;
  text-transform: uppercase;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(189, 139, 23, 0.3);
}

.pricing-section .pricing-button .theme-btn:hover {
  background: linear-gradient(45deg, #d4af37, var(--theme-color7));
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(189, 139, 23, 0.4);
}

.pricing-section .plan-guarantee {
  text-align: center;
  font-size: 14px;
  color: #666;
  margin: 15px 0;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 10px;
}

.pricing-section .pricing-box-items.bg-black .plan-guarantee {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.pricing-section .pricing-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pricing-section .pricing-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
  font-size: 0.95rem;
  line-height: 1.7;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(32, 38, 53, 0.08);
}

.pricing-section .pricing-list li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.pricing-section .pricing-list li .icon {
  width: 30px;
  height: 30px;
  min-width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--brand-gold-soft) 0%, var(--brand-gold) 100%);
  border: none;
  box-shadow: 0 3px 8px rgba(189, 139, 23, 0.35);
  flex-shrink: 0;
  margin-top: 3px;
  font-size: 0; /* masque les icônes Font Awesome non chargées */
}

/* Coche CSS fiable — pas de dépendance à Font Awesome */
.pricing-section .pricing-list li .icon::after {
  content: '✔';
  font-size: 13px;
  font-weight: 700;
  font-family: Arial, sans-serif;
  color: #fff;
  line-height: 1;
}

/* Masque explicitement l'élément <i> Font Awesome */
.pricing-section .pricing-list li .icon > i {
  display: none;
}

/* TPE — icône or sur fond blanc */
.pricing-section .row > div:nth-child(1) .pricing-list li .icon {
  background: #bd8b17;
  box-shadow: 0 2px 7px rgba(189, 139, 23, 0.35);
}

/* PME — icône blanc sur fond doré */
.pricing-section .row > div:nth-child(2) .pricing-list li .icon {
  background: rgba(255, 255, 255, 0.22);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  box-shadow: none;
}

.pricing-section .row > div:nth-child(2) .pricing-list li {
  border-bottom-color: rgba(255, 255, 255, 0.18);
}

/* ONG — icône doré sur fond noir */
.pricing-section .pricing-box-items.bg-black .pricing-list li {
  border-bottom-color: rgba(255, 255, 255, 0.10);
}

.pricing-section .pricing-box-items.bg-black .pricing-list li .icon {
  background: #bd8b17;
  border: none;
  box-shadow: 0 2px 8px rgba(189, 139, 23, 0.4);
}

.pricing-section .pricing-box-items.bg-black .plan-discount-badge {
  background: rgba(255, 255, 255, 0.12);
  color: #f0ece3;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Correction du badge RECOMMANDÉ */
.pricing-ribbon-wrapper {
  position: relative;
  overflow: visible;
}

.pricing-ribbon-wrapper .ribbon-badge {
  right: -18px;
  top: 14px;
  width: 140px;
  padding: 8px 0;
  font-size: 11px;
  background: linear-gradient(135deg, rgba(33, 37, 41, 0.95) 0%, rgba(55, 62, 70, 0.98) 100%);
  color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
  transform: rotate(45deg);
  text-align: center;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 12;
  white-space: nowrap;
}

.pricing-box-items.active {
  border-width: 2px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  z-index: 5;
  transform: translateY(-10px);
}

.pricing-box-items.active .pricing-header {
  padding-top: 52px;
}

/* Évite que le badge −% chevauche le bandeau MEILLEURE OFFRE */
.pricing-section .pricing-box-items.active .plan-discount-badge {
  top: 52px;
}

/* Empêche le débordement horizontal de la bulle décorative */
.pricing-section {
  overflow-x: clip;
}

/* ===== Compacité des blocs TPE / PME / ONG ===== */
/* Le rythme vertical de la section suit désormais --section-gap comme
   toutes les autres (voir "HARMONISATION GLOBALE" en fin de fichier). */

/* En-tête de chaque carte */
.pricing-section .pricing-header {
  padding: 18px 16px 12px;
}

.pricing-section .pricing-header h3 {
  font-size: 20px;
  margin-bottom: 6px;
}

.pricing-section .pricing-subtitle {
  font-size: 13px;
  margin-bottom: 10px;
  line-height: 1.45;
}

/* Bouton de souscription */
.pricing-section .pricing-button {
  padding: 12px 16px;
}

.pricing-section .pricing-button .theme-btn {
  padding: 9px 22px;
  font-size: 0.85rem;
}

/* Liste des prestations */
.pricing-section .pricing-list li {
  font-size: 0.84rem;
  line-height: 1.45;
  margin-bottom: 8px;
  padding-bottom: 8px;
  gap: 10px;
}

.pricing-section .pricing-list li .icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 6px;
}

.pricing-section .pricing-list li .icon::after {
  font-size: 11px;
}

/* Icône du titre */
.pricing-section .pricing-header .title-icon {
  margin-bottom: 8px;
}

.pricing-section .pricing-header .title-icon i {
  font-size: 28px;
}

/* Réduit la hauteur du décalage de la carte active */
.pricing-box-items.active {
  transform: translateY(-6px);
}

.pricing-box-items.active .pricing-header {
  padding-top: 44px;
}

/* ═══════════════════════════════════════════
   REDESIGN OFFRES — TPE / PME / ONG
═══════════════════════════════════════════ */

/* Carte : coins, ombre, transition */
.pricing-section .pricing-box-items {
  border-radius: 22px !important;
  box-shadow: 0 6px 30px rgba(17, 24, 40, 0.09) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  overflow: hidden;
}

.pricing-section .pricing-box-items:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 24px 56px rgba(17, 24, 40, 0.15) !important;
}

/* ── En-tête centré ── */
.pricing-section .pricing-header {
  padding: 28px 26px 18px !important;
  text-align: center !important;
}

/* Badge icône carré arrondi — centré */
.pricing-section .pricing-header .title-icon {
  width: 62px !important;
  height: 62px !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 18px !important;
  font-size: 0;
}

.pricing-section .pricing-header .title-icon i {
  font-size: 28px !important;
  display: block !important;
}

/* TPE : badge or pâle */
.pricing-section .row > div:nth-child(1) .pricing-header .title-icon {
  background: rgba(189, 139, 23, 0.12);
  color: #bd8b17;
}

/* PME : badge blanc translucide */
.pricing-section .row > div:nth-child(2) .pricing-header .title-icon {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

/* ONG : badge or foncé */
.pricing-section .row > div:nth-child(3) .pricing-header .title-icon {
  background: rgba(189, 139, 23, 0.18);
  color: #d4aa44;
}

/* Nom du plan */
.pricing-section .pricing-header h3 {
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -0.2px;
  margin-bottom: 8px !important;
  line-height: 1.1;
}

/* Sous-titre */
.pricing-section .pricing-subtitle {
  font-size: 13px !important;
  line-height: 1.5 !important;
  margin-bottom: 0 !important;
}

/* Couleurs texte selon fond */
.pricing-section .row > div:nth-child(1) .pricing-header h3 { color: #111111 !important; }
.pricing-section .row > div:nth-child(1) .pricing-subtitle   { color: #777777 !important; }
.pricing-section .row > div:nth-child(2) .pricing-header h3 { color: #ffffff !important; }
.pricing-section .row > div:nth-child(2) .pricing-subtitle   { color: rgba(255,255,255,0.75) !important; }
.pricing-section .row > div:nth-child(3) .pricing-header h3 { color: #f0ece3 !important; }
.pricing-section .row > div:nth-child(3) .pricing-subtitle   { color: rgba(240,236,227,0.65) !important; }

/* Sous-titre centré */
.pricing-section .pricing-subtitle {
  text-align: center !important;
}

/* ── Bouton pleine largeur ── */
.pricing-section .pricing-button {
  padding: 0 26px 20px !important;
}

.pricing-section .pricing-button .theme-btn {
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  border-radius: 12px !important;
  padding: 13px 20px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px;
  text-transform: none !important;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease !important;
}
/* Le "box-shadow: none !important" et le survol qui se trouvaient ici
   empêchaient les boutons d'offres de recevoir le relief commun. Ils sont
   désormais gérés par "SYSTÈME VISUEL DES BOUTONS" en fin de fichier. */

/* ── Badge "Meilleure plan" redesigné ── */
.pricing-section .plan-top-tag {
  background: #ffffff !important;
  color: #bd8b17 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px;
  text-transform: uppercase !important;
  border-radius: 0 0 12px 12px !important;
  padding: 6px 16px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.14) !important;
}

/* ── Liste des prestations ── */
.pricing-section .pricing-list {
  padding: 0 26px 26px !important;
  margin: 0 !important;
}

.pricing-section .pricing-list li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  font-size: 0.84rem !important;
  line-height: 1.55 !important;
  margin-bottom: 11px !important;
  padding-bottom: 11px !important;
}

/* ── Coches : cercle avec CSS checkmark ── */
.pricing-section .pricing-list li .icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border-radius: 50% !important;
  flex-shrink: 0;
  margin-top: 2px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  position: relative;
}

/* CSS checkmark pur — sans dépendance font */
.pricing-section .pricing-list li .icon::after {
  content: '' !important;
  display: block !important;
  width: 4px !important;
  height: 8px !important;
  border-right: 2px solid #ffffff !important;
  border-bottom: 2px solid #ffffff !important;
  transform: rotate(43deg) translateY(-1px) !important;
  font-size: unset !important;
}

/* TPE : cercle or, coche blanche */
.pricing-section .row > div:nth-child(1) .pricing-list li .icon {
  background: #bd8b17 !important;
  box-shadow: 0 2px 8px rgba(189, 139, 23, 0.4) !important;
  border: none !important;
}

/* PME : cercle blanc translucide, coche blanche */
.pricing-section .row > div:nth-child(2) .pricing-list li .icon {
  background: rgba(255,255,255,0.2) !important;
  border: 1.5px solid rgba(255,255,255,0.55) !important;
  box-shadow: none !important;
}

/* ONG : cercle or, coche blanche */
.pricing-section .row > div:nth-child(3) .pricing-box-items.bg-black .pricing-list li .icon {
  background: #bd8b17 !important;
  box-shadow: 0 2px 8px rgba(189, 139, 23, 0.45) !important;
  border: none !important;
}

/* Séparateurs entre items */
.pricing-section .row > div:nth-child(1) .pricing-list li { border-bottom-color: rgba(0,0,0,0.06) !important; }
.pricing-section .row > div:nth-child(2) .pricing-list li { border-bottom-color: rgba(255,255,255,0.14) !important; }
.pricing-section .row > div:nth-child(3) .pricing-list li { border-bottom-color: rgba(255,255,255,0.07) !important; }

/* PME active : pas de décalage inutile sur mobile */
@media (max-width: 1199.98px) {
  .pricing-box-items.active {
    transform: none !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.13) !important;
  }
}

@media (max-width: 991px) {
  .pricing-section .pricing-header { padding: 22px 20px 14px !important; }
  .pricing-section .pricing-button { padding: 0 20px 18px !important; }
  .pricing-section .pricing-list   { padding: 0 20px 22px !important; }
  .pricing-section .pricing-box-items.active .plan-top-tag {
    width: calc(100% + 2px);
    margin: 0;
  }
}

/* Laptop 13-14" (1200-1399px) : les cartes pricing (icône 62px + paddings "grand desktop")
   dépassent la hauteur d'écran visible sur cette tranche précise. On resserre un peu. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .pricing-section .pricing-header { padding: 22px 22px 14px !important; }
  .pricing-section .pricing-button { padding: 0 22px 16px !important; }
  .pricing-section .pricing-list   { padding: 0 22px 20px !important; }
  .pricing-section .pricing-header .title-icon {
    width: 52px !important;
    height: 52px !important;
    margin-bottom: 12px !important;
  }
  .pricing-section .pricing-list li {
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
  }
}

@media (max-width: 767px) {
  .pricing-section .pricing-list li { font-size: 0.82rem !important; }
}

/* Onglets Pourquoi nous choisir — segmented control
   Le thème peint l'onglet actif avec le dégradé blanc → or → blanc étalé sur 200%
   (même motif que les boutons CTA) : au repos c'est la moitié blanche qui s'affiche,
   donc l'onglet actif ressortait blanc sur fond blanc, sans repère visuel.
   On le remplace par une pastille dorée pleine. */
.why-choose-us-content-1 .nav.why-tabs {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 4px;
  border: 1px solid rgba(17, 24, 40, 0.08);
  border-bottom: 1px solid rgba(17, 24, 40, 0.08);
  border-radius: 100px;
  padding: 6px;
  box-shadow: 0 4px 16px rgba(17, 24, 40, 0.06);
}

.why-choose-us-content-1 .nav.why-tabs .nav-item {
  flex: 0 0 auto;
}

.why-choose-us-content-1 .nav.why-tabs .nav-item .nav-link {
  border: none;
  border-radius: 100px;
  padding: 12px 26px;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  color: #5a6070;
  background: transparent;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.why-choose-us-content-1 .nav.why-tabs .nav-item .nav-link:hover {
  color: #bd8b17;
  background-color: rgba(189, 139, 23, 0.08);
}

.why-choose-us-content-1 .nav.why-tabs .nav-item .nav-link.active,
.why-choose-us-content-1 .nav.why-tabs .nav-item .nav-link.active:hover {
  color: #ffffff !important;
  background-color: #bd8b17 !important;
  background-image: none !important;
  box-shadow: 0 4px 12px rgba(189, 139, 23, 0.32);
}

@media (max-width: 575.98px) {
  .why-choose-us-content-1 .nav.why-tabs {
    display: flex;
    width: 100%;
    border-radius: 18px;
  }
  .why-choose-us-content-1 .nav.why-tabs .nav-item {
    flex: 1 1 auto;
  }
  .why-choose-us-content-1 .nav.why-tabs .nav-item .nav-link {
    width: 100%;
    padding: 11px 14px;
    font-size: 0.88rem;
    text-align: center;
  }
}

/* L'onglet "Mission" contient une liste à puces en plus (~258px) que "Vision"/"Philosophie" (~110-144px) :
   sans hauteur minimale, changer d'onglet fait s'effondrer le bloc et se désaligne de l'image à côté. */
@media (min-width: 768px) {
  .why-choose-us-content-1 .tab-content {
    min-height: 270px;
  }
}

/* Lien skip-to-content accessible */
.visually-hidden-focusable {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.visually-hidden-focusable:focus {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 9999;
  width: auto;
  height: auto;
  padding: 12px 20px;
  clip: auto;
  white-space: normal;
  background: #fff;
  color: #111;
  border: 2px solid var(--brand-gold);
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
}

/* ═══════════════════════════════════════════
   FORMULAIRE DE CONTACT — REDESIGN
═══════════════════════════════════════════ */

.contact-form-section {
  background: #f4f1ea;
}

/* Wrapper global : coins arrondis, overflow caché pour les deux panneaux */
.cf-wrapper {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(17, 24, 40, 0.11);
}

/* ── Panneau gauche (infos) ── */
.cf-info-panel {
  background: #1a1e27;
  padding: 52px 40px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cf-info-panel h3 {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 14px;
  line-height: 1.3;
}

.cf-info-panel > p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.65;
  margin-bottom: 36px;
}

/* Liste de contacts */
.cf-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cf-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.cf-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  background: rgba(189, 139, 23, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-gold);
  font-size: 17px;
  margin-top: 2px;
}

.cf-contact-list li > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cf-contact-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--brand-gold);
}

.cf-contact-list li a,
.cf-contact-list li span:not(.cf-contact-label) {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.2s ease;
}

.cf-contact-list li a:hover {
  color: #ffffff;
}

/* ── Panneau droit (formulaire) ── */
.cf-form-panel {
  background: #ffffff;
  padding: 48px 44px;
  height: 100%;
}

/* Labels visibles */
.cf-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.cf-field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #333;
  letter-spacing: 0.2px;
}

.cf-required {
  color: var(--brand-gold);
  margin-left: 2px;
}

/* Champs de saisie */
.cf-input {
  width: 100%;
  padding: 13px 16px;
  font-size: 0.92rem;
  color: #1a1e27;
  background: #f8f6f2;
  border: 1.5px solid #e6ddd0;
  border-radius: 10px;
  outline: none;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
}

.cf-input:focus {
  border-color: var(--brand-gold);
  box-shadow: 0 0 0 3px rgba(189, 139, 23, 0.11);
  background: #ffffff;
}

.cf-input::placeholder {
  color: #bbb;
  font-size: 0.88rem;
}

.cf-textarea {
  resize: vertical;
  min-height: 128px;
}

select.cf-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23bd8b17' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}

/* Bouton d'envoi */
.cf-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #1a1e27;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 15px 34px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
  box-shadow: 0 6px 20px rgba(26, 30, 39, 0.22);
  letter-spacing: 0.2px;
}

.cf-submit-btn i {
  font-size: 16px;
  transition: transform 0.2s ease;
}

.cf-submit-btn:hover {
  background: var(--brand-gold);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(189, 139, 23, 0.35);
}

.cf-submit-btn:hover i {
  transform: translateX(4px);
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .cf-info-panel {
    padding: 36px 28px;
  }
  .cf-form-panel {
    padding: 36px 28px;
  }
}

@media (max-width: 767px) {
  .cf-wrapper {
    border-radius: 16px;
  }
  .cf-info-panel {
    padding: 28px 20px;
  }
  .cf-form-panel {
    padding: 28px 20px;
  }
  .cf-submit-btn {
    width: 100%;
    justify-content: center;
  }
  .cf-input {
    font-size: 0.9rem;
  }
}

/* ===== Bouton WhatsApp flottant ===== */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9998;
  width: 58px;
  height: 58px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  color: #fff;
  transform: scale(1.1);
  box-shadow: 0 6px 22px rgba(37, 211, 102, 0.65);
  outline: none;
}

.whatsapp-float::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25d366;
  animation: wa-pulse 2.4s ease-out infinite;
  z-index: -1;
}

@keyframes wa-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(1.6); opacity: 0;    }
  100% { transform: scale(1.6); opacity: 0;    }
}

/* WhatsApp plus petit sur mobile */
@media (max-width: 575px) {
  .whatsapp-float {
    width: 50px;
    height: 50px;
    font-size: 24px;
    bottom: 18px;
    right: 16px;
  }
}

/* Décale le bouton "retour en haut" pour ne pas chevaucher WhatsApp */
.scroll-to-top {
  bottom: 100px !important;
}

@media (max-width: 575px) {
  .scroll-to-top {
    bottom: 80px !important;
    right: 16px !important;
  }
}

.awards-section .why-choose-us-wrapper {
  margin-top: 0;
}

.awards-section .why-choose-us-content-1 .sec-title h3 {
  margin-top: 10px;
}

.awards-section .why-choose-list p {
  margin-bottom: 0;
}

.award-carousel-section {
  background: #f9f7f1;
}

.award-carousel-section .sec-title {
  margin-bottom: 45px;
}

.award-carousel-section .award-slide {
  overflow: hidden;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(17, 24, 40, 0.08);
  transition: transform 0.3s ease;
  min-height: 260px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.award-carousel-section .award-slide:hover {
  transform: translateY(-6px);
}

.award-carousel-section .award-slide img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}

.award-carousel-section .award-pagination {
  margin-top: 25px;
  text-align: center;
}

.award-carousel-section .award-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: rgba(33, 37, 41, 0.18);
  opacity: 1;
}

.award-carousel-section .award-pagination .swiper-pagination-bullet-active {
  background: #bd8b17;
}

/* ═══════════════════════════════════════════════════════════════
   ALIGNEMENT SUR LES MAQUETTES — SERVICES & OFFRES
   (référence : captures d'écran 2026-07-28)
═══════════════════════════════════════════════════════════════ */

/* ── Zone 1 : section Services ──────────────────────────────── */

/* Règle de centrage devenue inutile : la 4e carte n'est plus seule sur sa ligne. */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .service-wrapper .row > div:nth-child(4) {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Compteur "4" : chiffre plein gris clair au lieu du contour vert */
.service-section .section-counter-content h3 {
  -webkit-text-stroke-width: 0;
  color: rgba(255, 255, 255, 0.42);
  font-size: 100px;
}

/* ── Zone 2 : section Offres (TPE / PME / ONG) ──────────────── */

/* ONG passe en carte blanche, identique à TPE */
.pricing-section .row > div:nth-child(3) .pricing-box-items {
  background: #ffffff;
  border: 1px solid #e8e0d0;
  color: inherit;
}

.pricing-section .row > div:nth-child(3) .pricing-header h3 {
  color: #111111 !important;
}

.pricing-section .row > div:nth-child(3) .pricing-subtitle {
  color: #777777 !important;
}

.pricing-section .row > div:nth-child(3) .pricing-header .title-icon {
  background: rgba(189, 139, 23, 0.12);
  color: #bd8b17;
}

/* Icône de plan : pastille ronde */
.pricing-section .pricing-header .title-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  margin-bottom: 14px !important;
}

.pricing-section .pricing-header .title-icon i {
  font-size: 22px !important;
}

/* Badge PME : pastille blanche posée sur l'entête.
   Sa position et la réserve qu'elle occupe sont définies dans
   "BADGE MEILLEURE OFFRE" en fin de fichier — le padding-top de 46px qui
   se trouvait ici ne s'appliquait qu'à la carte PME et décalait tout son
   contenu de 27px vers le bas par rapport à TPE et ONG. */
.pricing-section .plan-top-tag {
  border-radius: 999px !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12) !important;
}

/* Boutons : pastille centrée à largeur automatique */
.pricing-section .pricing-button {
  text-align: center !important;
}

.pricing-section .pricing-button .theme-btn {
  width: auto !important;
  display: inline-block !important;
  border-radius: 999px !important;
  padding: 10px 26px !important;
}

/* Bouton ONG : or sur fond blanc, comme TPE */
.pricing-section .row > div:nth-child(3) .pricing-button .theme-btn {
  background: #bd8b17;
  border-color: #bd8b17;
  color: #ffffff;
}

.pricing-section .row > div:nth-child(3) .pricing-box-items:hover .pricing-button .theme-btn {
  background: #111111;
  border-color: #111111;
  color: #ffffff;
}

/* Liste : coche simple, sans pastille ni séparateur */
.pricing-section .pricing-list li {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 14px !important;
  gap: 10px !important;
  color: #5a5a5a;
}

.pricing-section .row > div:nth-child(2) .pricing-list li {
  color: #ffffff !important;
}

.pricing-section .row > div:nth-child(3) .pricing-list li {
  color: #5a5a5a !important;
}

.pricing-section .pricing-list li .icon {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  margin-top: 4px;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.pricing-section .pricing-list li .icon::after {
  width: 5px !important;
  height: 10px !important;
  border-right: 1.7px solid #bd8b17 !important;
  border-bottom: 1.7px solid #bd8b17 !important;
  transform: rotate(43deg) translate(1px, -1px) !important;
}

/* PME : coche blanche sur fond doré */
.pricing-section .row > div:nth-child(2) .pricing-list li .icon::after {
  border-right-color: #ffffff !important;
  border-bottom-color: #ffffff !important;
}

/* PME reste la carte mise en avant : légèrement agrandie sur ses deux voisines */
@media (min-width: 1200px) {
  .pricing-section .pricing-box-items.active {
    transform: scale(1.035) !important;
  }

  .pricing-section .pricing-box-items.active:hover {
    transform: scale(1.035) translateY(-8px) !important;
  }
}

/* Cartes Services de hauteur égale sur une même ligne */
.service-wrapper .row {
  align-items: stretch;
}

.service-wrapper .row > [class*="col-"] {
  display: flex;
}

.service-wrapper .row .service-card-items {
  width: 100%;
}

/* Le thème surélève la carte "active" via margin-top: -20px (vs 30px pour ses voisines),
   soit 50px d'écart : sur la maquette, PME dépasse d'une dizaine de pixels seulement.
   On remet la même marge partout — la mise en avant vient du scale(1.035) ci-dessus —
   ce qui aligne aussi les trois cartes sur une hauteur identique. */
.pricing-section .pricing-box-items.active {
  margin-top: 30px !important;
}

/* Filet de séparation entre le bouton et la liste : absent de la maquette */
.pricing-section .pricing-list {
  border-top: none !important;
}

/* Coches : contrairement aux règles par carte plus haut, la maquette n'affiche
   qu'un simple chevron coloré, sans pastille ni contour. */
.pricing-section .row > div:nth-child(1) .pricing-list li .icon,
.pricing-section .row > div:nth-child(2) .pricing-list li .icon,
.pricing-section .row > div:nth-child(3) .pricing-list li .icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
}

/* Sous 992px, le badge était étiré sur toute la largeur de la carte (bandeau) :
   il reste désormais une pastille centrée, comme sur desktop. */
@media (max-width: 991px) {
  .pricing-section .pricing-box-items.active .plan-top-tag {
    width: auto;
    margin: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ═══════════════════════════════════════════════════════════════
   BOUTONS — SUPPRESSION DU DÉGRADÉ BLANC
═══════════════════════════════════════════════════════════════ */

/* Le thème peint les boutons des bandeaux CTA ("Appel", "Parlons-en") et le bouton
   d'envoi de la newsletter avec un dégradé blanc → or → blanc étalé sur 200% de
   largeur. Au repos, seule la moitié gauche est visible : le bouton apparaît blanc
   délavé au lieu d'être franc. On repasse en aplat.

   Les bandeaux CTA ayant eux-mêmes un fond doré, un bouton doré s'y fondrait : on
   reprend le contraste déjà utilisé sur la carte PME (noir sur or). */
.cta-contact-wrapper .btn-style-one {
  /* Le dégradé de relief commun à tous les boutons remplace le balayage
     animé du thème (voir "SYSTÈME VISUEL DES BOUTONS" en fin de fichier). */
  background-image: var(--btn-sheen) !important;
  background-color: #111111 !important;
  background-size: auto !important;
  color: #ffffff !important;
  border: none;
  width: auto;
  display: inline-flex;
  padding: 14px 34px;
}

.cta-contact-wrapper .btn-style-one:hover {
  background-color: #000000 !important;
  background-position: 0 0 !important;
  color: #ffffff !important;
}

/* Newsletter : fond de pied de page sombre, l'or ressort bien */
.footer-newsletter-wrapper .form-clt .arrow-icon {
  background-image: var(--btn-sheen) !important;
  background-color: #bd8b17 !important;
  background-size: auto !important;
  color: #ffffff !important;
  border: none;
}

.footer-newsletter-wrapper .form-clt .arrow-icon:hover {
  background-color: #a97a12 !important;
  background-position: 0 0 !important;
}

/* Survol homogène pour tous les boutons principaux : l'animation de balayage blanc
   du thème (::before) étant désactivée, le survol ne produisait plus aucun retour
   visuel. On le remplace par une élévation discrète. */
.theme-btn.btn-style-one {
  transition: background-color 0.25s ease, color 0.25s ease,
              box-shadow 0.25s ease, transform 0.2s ease;
}

/* Le survol de tous les boutons est défini dans "SYSTÈME VISUEL DES BOUTONS"
   en fin de fichier. */

.footer-newsletter-wrapper .form-clt .arrow-icon {
  transition: background-color 0.25s ease, transform 0.2s ease;
}

.footer-newsletter-wrapper .form-clt .arrow-icon:hover {
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — BADGE DU HERO
═══════════════════════════════════════════════════════════════ */

/* Le thème fige la pastille "Accompagnements sur mesure…" à height/line-height 60px.
   Sous ~500px de large, le texte passe sur deux lignes et la seconde débordait
   sous la pastille. Hauteur libre + centrage vertical par flexbox : l'aspect reste
   identique sur une ligne, et la pastille s'agrandit quand le texte se coupe. */
.hero-1 .hero-content h6 {
  display: inline-flex;
  align-items: center;
  height: auto;
  min-height: 60px;
  line-height: 1.4;
  padding-top: 8px;
  padding-bottom: 8px;
}

.hero-1 .hero-content h6 .icon {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

/* ═══════════════════════════════════════════════════════════════
   HERO — PASTILLE D'ACCROCHE
═══════════════════════════════════════════════════════════════ */

/* La pastille arrivait juste sous l'étoile décorative animée : les deux se
   chevauchaient visuellement. On la descend et on affine son traitement
   (fond blanc franc, liseré doré discret, ombre légère). */
.hero-1 .hero-content h6 {
  margin-top: 46px;
  background-color: #ffffff;
  border: 1px solid rgba(189, 139, 23, 0.28);
  box-shadow: 0 6px 20px rgba(17, 24, 40, 0.07);
  color: #11151f;
  font-size: 15px;
  letter-spacing: 0.1px;
  padding-right: 30px;
}

/* L'icône utilisait le dégradé blanc → or → blanc du thème (moitié blanche
   visible au repos) : aplat doré, comme le reste des accents de la page. */
.hero-1 .hero-content h6 .icon {
  background-image: none !important;
  background-color: #bd8b17;
  box-shadow: 0 4px 12px rgba(189, 139, 23, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 991.98px) {
  .hero-1 .hero-content h6 {
    margin-top: 28px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   EN-TÊTE — ÉQUILIBRE ET ALIGNEMENT
═══════════════════════════════════════════════════════════════ */

/* 1. Les deux en-têtes utilisaient un conteneur plus large que celui des
      sections : le logo démarrait ~18px à gauche du contenu de la page.
      On les cale sur la même gouttière. */
.sticky-header .auto-container {
  max-width: 1290px;
}

/* 2. Le menu était collé au bouton CTA (16px) tout en laissant un grand vide
      après le logo. Marges automatiques : le menu se centre dans l'espace
      disponible et garde une vraie respiration avant le bouton. */
.sticky-header .nav-outer,
.header-clean-layout {
  gap: 34px;
}

.sticky-header .nav-outer .main-menu,
.header-clean-layout .main-menu {
  margin-left: auto;
  margin-right: auto;
}

/* 3. Bouton d'appel à l'action un peu plus aéré */
.main-header .header-cta-btn {
  padding: 0 28px;
  letter-spacing: 0.1px;
}

/* 4. Filet de séparation net sous l'en-tête collant (l'ombre seule se perdait
      sur les sections claires). */
.sticky-header.fixed-header {
  border-bottom: 1px solid rgba(17, 24, 40, 0.07);
  box-shadow: 0 6px 24px rgba(17, 24, 40, 0.06);
}

/* ═══════════════════════════════════════════════════════════════
   JEU D'ICÔNES SVG
═══════════════════════════════════════════════════════════════ */

/* Le site mélangeait trois polices d'icônes (Font Awesome, Linearicons,
   Flaticon) : styles, graisses et tailles optiques incohérents d'un bloc à
   l'autre. Elles sont remplacées par un jeu SVG unique (grille 24, trait 1.75,
   bouts arrondis). Le SVG est enveloppé dans le <i>/<span> d'origine et
   dimensionné en 1em : toutes les règles existantes qui pilotaient la taille
   via font-size, ainsi que les transitions au survol, continuent de fonctionner. */
.au-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  line-height: 1;
  vertical-align: middle;
}

.au-icon > svg {
  width: 1em;
  height: 1em;
  display: block;
  flex-shrink: 0;
  overflow: visible;
}

/* Les coches des offres étaient dessinées en CSS (::after) faute d'icône
   fiable, et le <i> était masqué : on affiche maintenant le vrai SVG. */
.pricing-section .pricing-list li .icon {
  font-size: 14px !important;
}

.pricing-section .pricing-list li .icon > i {
  display: inline-flex !important;
  color: #bd8b17;
}

.pricing-section .row > div:nth-child(2) .pricing-list li .icon > i {
  color: #ffffff;
}

.pricing-section .pricing-list li .icon::after {
  content: none !important;
}

/* Le SVG de la pastille hero était dessiné dans une grille 46 avec un
   translate(8,8) et un fill blanc en dur : remplacé par l'icône du jeu commun,
   il faut lui redonner sa taille (le conteneur .icon n'en fixait aucune). */
.hero-1 .hero-content h6 .icon {
  font-size: 22px;
  color: #ffffff;
}

/* Le fichier images/logo/white-logo.png porte mal son nom : son libellé
   "ALPHA UNIVERSE" y est en noir, donc illisible sur le panneau sombre du menu
   mobile. images/logo/white-logo-inverse.png est la version inversée générée à
   partir de cet original : libellé en blanc, étoile dorée conservée. */
.mobile-menu .nav-logo img {
  width: 152px;
  height: auto;
  display: block;
}

/* ═══════════════════════════════════════════════════════════════
   EN-TÊTE MOBILE
═══════════════════════════════════════════════════════════════ */

/* Le conteneur des actions était centré (justify-content: center) alors que le
   menu et le bouton CTA y sont masqués : le téléphone et le burger se
   retrouvaient groupés au milieu, avec un vide de ~80px à droite et un large
   trou après le logo. Ils sont désormais calés à droite, sur la même gouttière
   que le contenu de la page. */
@media (max-width: 991px) {
  .main-header .header-lower .nav-outer {
    align-items: center;
  }

  .main-header .outer-box.header-clean-layout,
  .main-header .outer-box {
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 14px;
  }

  /* Le thème ajoute en plus une marge de 25px sur le burger */
  .main-header .mobile-nav-toggler {
    margin-left: 0;
  }

  /* Le menu principal, masqué visuellement, occupait encore une case flex et
     ajoutait une gouttière parasite entre le téléphone et le burger. */
  .header-clean-layout .main-menu,
  .sticky-header .nav-outer .main-menu {
    display: none;
  }

  .main-header .header-lower .outer-box .header-social {
    margin-left: 0;
  }

  /* Bandeau un peu moins haut, logo un peu plus présent */
  .header-style-one .main-box {
    min-height: 72px;
  }

  .header-style-one .logo img {
    max-height: 42px;
    width: auto;
  }

  /* Raccourci d'appel : c'est la seule action rapide visible avant d'ouvrir le
     menu. Pastille dorée pleine plutôt que le rond gris pâle d'origine. */
  .header-social a[href^="tel:"] {
    width: 40px;
    height: 40px;
    line-height: 1;
    align-items: center;
    justify-content: center;
    background: #bd8b17;
    color: #ffffff;
    font-size: 18px;
    box-shadow: 0 4px 12px rgba(189, 139, 23, 0.32);
    transition: background-color 0.2s ease, transform 0.2s ease;
  }

  .header-social a[href^="tel:"]:hover {
    background: #a97a12;
    color: #ffffff;
    transform: translateY(-1px);
  }

  /* Burger : trait aligné sur le jeu d'icônes SVG */
  .mobile-nav-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 24px;
    color: #11151f;
    cursor: pointer;
  }
}

/* Dans la rangée sociale de l'en-tête, le téléphone est la seule icône en trait
   au milieu de logos de marque pleins : il paraissait plus pâle que ses voisines.
   Trait épaissi pour égaliser le poids optique de la ligne. */
.header-social a[href^="tel:"] .au-icon svg {
  stroke-width: 2.1;
}

/* ═══════════════════════════════════════════════════════════════
   LOGO DE L'EN-TÊTE
═══════════════════════════════════════════════════════════════ */

/* L'en-tête n'affichait que la marque graphique seule (black-logo.png, sans le
   nom) : pour un site d'entreprise, le nom doit être lisible dès l'en-tête.
   images/logo/logo-dark.png est la version recadrée de l'original — la marge
   transparente représentait 40% du fichier, ce qui écrasait le rendu. */
.main-header .logo img,
.sticky-header .logo img {
  width: 148px;
  height: auto;
  max-height: none;
  display: block;
}

@media (max-width: 991px) {
  .header-style-one .logo img,
  .main-header .logo img,
  .sticky-header .logo img {
    width: 132px;
    max-height: none;
  }
}

@media (max-width: 400px) {
  .main-header .logo img {
    width: 116px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CORRECTIFS AVANT MISE EN LIGNE
═══════════════════════════════════════════════════════════════ */

/* style.css référence ces fonds en chemin relatif ("images/…") alors que la
   feuille est dans /css/ : le navigateur les cherchait dans /css/images/… et
   recevait trois 404. Les sections s'affichaient sans leur fond. */
.bg-service {
  background-image: url('../images/home-1/service/service-bg.jpg');
}

.bg-choose-us {
  background-image: url('../images/home-1/choose-us/choose-us-shape.png');
}

.bg-testimonial {
  background-image: url('../images/home-1/testimonial/testimonial-bg.png');
}

/* ═══════════════════════════════════════════════════════════════
   HERO CENTRÉ (.hero-1.hero-centered)
   Le hero passe d'une mise en page 2 colonnes (texte à gauche / photo
   collée à droite) à une composition centrée et entièrement typographique :
   badge, titre, accroche et CTA alignés sur l'axe vertical, sans visuel.
   Charte inchangée : or de la marque, noir du thème, fond clair.
═══════════════════════════════════════════════════════════════ */

.hero-1.hero-centered {
  /* Le header fait ~93px et n'est pas superposé au hero : ces 112px étaient
     du vide pur avant le badge. */
  padding: 56px 0 var(--section-gap);
  background: linear-gradient(180deg, #F7F6F3 0%, #FBFAF7 46%, #FFFFFF 100%);
  overflow: hidden;
}

/* Halo doré discret derrière le titre : rappelle le logo sans salir le texte */
.hero-1.hero-centered::before {
  content: "";
  position: absolute;
  top: -160px;
  left: 50%;
  width: 900px;
  height: 620px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(189, 139, 23, 0.13), rgba(189, 139, 23, 0));
  pointer-events: none;
  z-index: -1;
}

/* ── Décors : renvoyés vers les bords pour libérer l'axe central ── */
.hero-1.hero-centered .shape-1 {
  top: 90px;
  left: 40px;
  opacity: 0.5;
  z-index: -1;
}
.hero-1.hero-centered .shape-1 img {
  width: 190px;
}
.hero-1.hero-centered .shape-3 {
  top: 40px;
  left: auto;
  right: 0;
  opacity: 0.85;
}
.hero-1.hero-centered .shape-3 img {
  width: 420px;
  transform: scaleX(-1);
}
@media (max-width: 1399.98px) {
  .hero-1.hero-centered .shape-1 img {
    width: 150px;
  }
  .hero-1.hero-centered .shape-3 img {
    width: 330px;
  }
}

/* ── Bloc de texte centré ── */
.hero-1.hero-centered .hero-content {
  margin: 0 auto;
  max-width: 940px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.hero-1.hero-centered .hero-content h6 {
  /* Le thème applique un margin-top de 46px à tous les h6 : sur le badge,
     premier élément du hero, c'était 46px de vide invisible sous le header. */
  margin-top: 0;
  margin-bottom: 20px;
  background: #ffffff;
  border-color: #E4DFD3;
  box-shadow: 0 6px 20px rgba(24, 20, 10, 0.06);
}

.hero-1.hero-centered .hero-content h1 {
  font-size: clamp(2.4rem, 4.4vw, 4.1rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 auto;
  max-width: 15ch;
  /* Le thème appliquait une ombre portée pensée pour un titre sur photo :
     inutile et sale sur ce fond clair. */
  text-shadow: none;
}

.hero-1.hero-centered .hero-content p {
  font-size: 1.125rem;
  line-height: 1.7;
  max-width: 620px;
  margin: 20px auto 0;
  color: #5C574C;
}

.hero-1.hero-centered .hero-content .hero-button {
  margin-top: 28px;
  display: flex;
  justify-content: center;
}

/* Sous 991px le thème étire tous les .theme-btn sur 100% de la largeur :
   sur un CTA isolé et centré, cela donne une barre pleine largeur peu élégante. */
.hero-1.hero-centered .hero-content .hero-button .theme-btn {
  width: auto;
}

.hero-1.hero-centered .hero-content .hero-note {
  font-size: 0.875rem;
  color: #6E6858;
  margin: 14px auto 0;
  max-width: 420px;
}

@media (max-width: 991.98px) {
  .hero-1.hero-centered {
    padding-top: 56px;
  }
  .hero-1.hero-centered .shape-1,
  .hero-1.hero-centered .shape-3 {
    display: none;
  }
  .hero-1.hero-centered .hero-content h6 {
    margin-bottom: 22px;
  }
}

@media (max-width: 767.98px) {
  .hero-1.hero-centered {
    padding-top: 44px;
  }
  .hero-1.hero-centered .hero-content h1 {
    max-width: 100%;
  }
  .hero-1.hero-centered .hero-content .hero-button {
    margin-top: 28px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   HARMONISATION GLOBALE — rythme, typographie fluide, boutons
   Le thème empile des tailles fixes en px avec des paliers par media
   query (56 → 50 → 44 → 38 → 30). D'une section à l'autre les valeurs
   avaient divergé au fil des correctifs. On repasse sur une échelle
   fluide unique : plus de sauts au redimensionnement, et une seule
   source de vérité par niveau.
═══════════════════════════════════════════════════════════════ */

:root {
  /* Respiration verticale des sections.
     Le thème était à 120px en haut ET en bas, soit 240px de vide entre deux
     sections : la page paraissait étirée et obligeait à beaucoup scroller
     pour peu de contenu. Ramené à ~65px de chaque côté sur desktop. */
  --section-gap: clamp(44px, 4.8vw, 72px);

  /* Échelle typographique fluide (min → max sur 360px → 1400px) */
  --fs-h2: clamp(2rem, 1.14rem + 2.45vw, 3.5rem);      /* 32 → 56 px */
  --fs-h3: clamp(1.375rem, 1.12rem + 0.71vw, 1.75rem); /* 22 → 28 px */
  --fs-body: clamp(1rem, 0.96rem + 0.12vw, 1.125rem);  /* 16 → 18 px */
  --fs-small: clamp(0.9375rem, 0.92rem + 0.09vw, 1rem);/* 15 → 16 px */
  --lh-body: 1.68;

  /* Boutons : une seule échelle pour tout le site */
  --btn-pad-y: 15px;
  --btn-pad-x: 34px;
  --btn-fs: 1rem;
  --btn-radius: 100px;
}

/* ── 1. Rythme vertical ──────────────────────────────────────── */

.section-padding {
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
}

/* La section Offres tournait à 60px alors que toutes les autres étaient
   à 120px : elle paraissait collée à ses voisines. */
.pricing-section {
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
}

/* ── 2. Typographie ──────────────────────────────────────────── */

.sec-title h2 {
  font-size: var(--fs-h2);
  line-height: 1.18;
  letter-spacing: -0.01em;
}

/* Le thème redéfinit la taille des h2 à chaque palier : neutralisé, le
   clamp ci-dessus couvre déjà toute la plage. */
@media (max-width: 1399.98px) {
  .sec-title h2,
  .sec-title-2 h2 {
    font-size: var(--fs-h2);
  }
}
@media (max-width: 767.98px) {
  .sec-title h2,
  .sec-title-2 h2 {
    font-size: var(--fs-h2);
  }
}
@media (max-width: 575.98px) {
  .sec-title h2,
  .sec-title-2 h2 {
    font-size: var(--fs-h2);
  }
}
@media (max-width: 469.98px) {
  .sec-title h2,
  .sec-title-2 h2 {
    font-size: var(--fs-h2);
  }
}

/* Chapô de section : même corps et même interlignage partout
   (18px/1.9 côté "À propos" contre 15px/1.6 côté Services auparavant). */
.sec-title p,
.about-content-1 .about-text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Texte courant des cartes : un cran en dessous du chapô, mais lisible. */
/* Le thème cible ces paragraphes avec .testimonial-box-items
   .testimonial-content p (line-height: 195%) : il faut la même
   spécificité pour reprendre la main. */
.service-card-items p,
.testimonial-box-items .testimonial-content p {
  font-size: var(--fs-small);
  line-height: 1.65;
}

/* Sur-titres : la casse et la taille variaient d'une section à l'autre. */
.sec-title .sub-title {
  font-size: 1rem;
  letter-spacing: 0.02em;
}

/* ── 3. Boutons ──────────────────────────────────────────────── */

/* a) "Parlons-en" s'affichait "Parlons-En" et "Appel téléphonique"
      "Appel Téléphonique" : capitalize met une majuscule à chaque mot,
      ce qui est faux en français. */
.btn-style-one,
.theme-btn,
.pricing-section .pricing-button .theme-btn {
  text-transform: none !important;
}

/* b) Dans les bandeaux CTA, le bouton est un élément flex qui pouvait
      être compressé sous sa largeur de contenu ; combiné au
      white-space:nowrap + overflow:hidden du thème, le libellé était
      tronqué ("Appel téléphoniqu…"). */
.theme-btn {
  flex-shrink: 0;
  max-width: 100%;
}

/* c) Une seule taille de référence. Les hauteurs relevées allaient de
      34px (Offres) à 70px (hero) pour des boutons de même niveau. */
.theme-btn.btn-style-one {
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-size: var(--btn-fs);
  border-radius: var(--btn-radius);
  line-height: 1.2;
}

.cta-contact-wrapper .btn-style-one {
  padding: var(--btn-pad-y) var(--btn-pad-x);
}

/* Exception assumée : le CTA du hero est le bouton principal du site et
   garde une taille propre, plus grande que l'échelle standard.
   Son habillage complet est défini en fin de fichier
   (section "CTA PRINCIPAL DU HERO"). */

/* d) Offres : les trois boutons faisaient 131/140/138px de large pour
      34/35/34px de haut, et ne partageaient pas la même ligne de base
      d'une carte à l'autre. On les met en pleine largeur de carte : ils
      deviennent identiques et alignés par construction. */
.pricing-section .pricing-button .theme-btn {
  display: block !important;
  width: 100% !important;
  padding: var(--btn-pad-y) var(--btn-pad-x) !important;
  font-size: var(--btn-fs) !important;
  border-radius: var(--btn-radius) !important;
  text-align: center !important;
}

/* Cartes d'offres de hauteur égale : sans cela, les trois cartes se
   terminaient à des hauteurs différentes selon la longueur de leur liste. */
.pricing-section .pricing-box-items {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* e) Formulaire de contact : le bouton d'envoi suivait sa propre échelle. */
.contact-form-section button[type="submit"] {
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-size: var(--btn-fs);
  border-radius: var(--btn-radius);
  line-height: 1.2;
}

/* f) Zone tactile : sous 992px le thème étirait tous les boutons sur
      100% de la largeur, y compris des CTA isolés. On garde une largeur
      naturelle et on assure seulement la cible tactile de 44px. */
@media (max-width: 991.98px) {
  .theme-btn,
  .info-btn {
    width: auto;
    min-height: 44px;
    align-items: center;
  }
  /* Exception : dans les cartes d'offres, la pleine largeur est voulue. */
  .pricing-section .pricing-button .theme-btn {
    width: 100% !important;
  }
}

/* ── 4. Section "À propos" sans visuel ───────────────────────── */

/* La photo en étoile occupait la colonne de gauche. Elle est retirée :
   le titre passe à gauche, le corps de texte à droite, et le bloc reste
   lisible en pleine largeur au lieu de s'entasser sur une demi-colonne. */
.about-row-text .sec-title h2 {
  max-width: 12ch;
}

.about-row-text .about-content-1 {
  max-width: 640px;
}

@media (max-width: 991.98px) {
  .about-row-text .sec-title h2 {
    max-width: 100%;
  }
  .about-row-text .about-content-1 {
    max-width: 100%;
  }
}

/* Le compteur "années d'expérience" était logé dans .about-list-items, en
   flex space-between avec la liste. Sans le visuel, la colonne de gauche
   se retrouvait vide sous le titre : le compteur y est déplacé et la
   liste reprend toute la largeur de la colonne de droite.
   Tout l'habillage du thème étant scopé sur
   ".about-content-1 .about-list-items .counter-box", il est redonné ici. */
.about-row-text .counter-box {
  margin-top: 40px;
  max-width: 260px;
  padding: 32px;
  border-radius: 20px;
  background: linear-gradient(180deg, #BD8B17 0%, #141818 100%);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.about-row-text .counter-box .butterfly-shape {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
}

.about-row-text .counter-box h2 {
  font-weight: 400;
  font-size: 64px;
  line-height: 1.1;
  color: #ffffff;
  margin: 0;
}

.about-row-text .counter-box .counter-bottom p {
  font-size: 18px;
  max-width: 173px;
  color: #ffffff;
  font-weight: 500;
  line-height: 1.33;
  margin: 6px 0 0;
}

.about-row-text .about-list-items {
  display: block;
  margin-top: 28px;
}

@media (max-width: 991.98px) {
  .about-row-text .counter-box {
    margin-top: 28px;
  }
}

/* Deux titres contenaient à la fois l'intitulé et sa phrase d'explication
   (section "Pourquoi nous choisir" et bandeau newsletter) : la phrase
   s'affichait donc au corps du titre — 56px et 28px. Elle est désormais
   dans un <p>, qui suit l'échelle de texte courant. */
.why-choose-section .sec-title p {
  margin-top: 18px;
  max-width: 46ch;
}

.footer-newsletter-wrapper .newsletter-lead {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 10px 0 0;
  opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════════
   DENSITÉ VERTICALE
   Le thème compose tout le texte courant en interlignage 1,9 (30,4px
   pour 16px, 34,2px pour 18px). Sur des paragraphes de 6 à 8 lignes,
   cela ajoute une centaine de pixels par bloc et donne cette impression
   de page étirée. Ramené à 1,65-1,7, qui reste très lisible.
═══════════════════════════════════════════════════════════════ */

body {
  line-height: 1.7;
}

section p,
footer p,
.sec-title p,
.about-content-1 .about-text {
  line-height: var(--lh-body);
}

/* Titre de section : l'écart avant le contenu suit le rythme général. */
.sec-title {
  margin-bottom: 26px;
}

/* Panneau coordonnées du formulaire : 52px de padding vertical pour
   quatre lignes d'information. */
.cf-info-panel {
  padding-top: 36px;
  padding-bottom: 36px;
}

/* Cercles de chiffres clés : 60px de retrait interne en haut. */
.counter-box-1 {
  padding-top: 40px;
}

/* Bandeaux CTA : la bande dorée occupait 165px pour une ligne + un bouton. */
.cta-contact-wrapper {
  padding-top: 34px;
  padding-bottom: 34px;
}

/* ═══════════════════════════════════════════════════════════════
   CORRECTIONS CIBLÉES (captures 3, 4 et 5)
═══════════════════════════════════════════════════════════════ */

/* ── Capture 3 : cercles de chiffres clés trop grands ──────────
   Le thème les fixait à 312px de diamètre (275px sous 1400px) avec un
   padding-top en dur recalculé à chaque palier — pour seulement 144px
   de contenu, soit 90px de vide sous le libellé. On passe à un diamètre
   fluide et on centre le contenu, ce qui supprime toute l'échelle de
   padding-top du thème. */
.counter-box-1 {
  width: clamp(150px, 14.5vw, 196px);
  height: clamp(150px, 14.5vw, 196px);
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.counter-box-1 h2 {
  font-size: clamp(1.875rem, 3vw, 2.75rem);
  line-height: 1.05;
  margin: 0;
}

.counter-box-1 p {
  font-size: 0.9375rem;
  line-height: 1.3;
  margin: 8px 0 0;
}

/* Des cercles plus petits dans la même largeur laissaient de grands
   trous : on les regroupe au centre au lieu de les écarter aux extrémités. */
.counter-wrapper {
  justify-content: center;
  gap: clamp(20px, 4vw, 64px);
}

/* ── Capture 4 : bloc doré "Services" trop haut ────────────────
   Le cadre cumulait 65px de padding vertical, 26px sous le titre et
   30px au-dessus des cartes, plus des cartes à 30px de padding avec une
   icône de 56px. */
.service-section {
  padding-top: 40px;
  padding-bottom: 40px;
}

.service-section .sec-title {
  margin-bottom: 8px;
}

.service-section .sec-title .sub-title {
  margin-bottom: 14px;
}

.service-card-items {
  padding: 24px;
  margin-top: 14px;
}

/* En dessous de 1200px les cartes s'empilent : cette marge devient leur
   seul séparateur, il lui faut plus d'air qu'en grille 4 colonnes. */
@media (max-width: 1199.98px) {
  .service-card-items {
    margin-top: 22px;
  }
}

.service-card-items .icon {
  width: 48px;
  height: 48px;
  font-size: 24px;
}

.service-card-items .content {
  margin-top: 16px;
}

/* ── Capture 5 : pied de page trop haut ────────────────────────
   60px de padding vertical pour le bandeau newsletter (109px de
   contenu), 30+60px pour les colonnes, 30px pour la barre copyright. */
.footer-newsletter-wrapper {
  padding-top: 34px;
  padding-bottom: 34px;
}

.footer-widget-wrapper {
  padding-top: 22px;
  padding-bottom: 34px;
}

.footer-bottom {
  padding-top: 18px;
  padding-bottom: 18px;
}

/* Même bug de casse que sur les boutons : le thème passe les textes du pied
   de page en text-transform: capitalize, ce qui donne "Libérez Le Plein
   Potentiel De Votre Entreprise Dès Aujourd'hui". Une majuscule à chaque mot
   n'existe pas en français. Les sélecteurs sont repris à l'identique de
   style.css : à spécificité égale, c'est le dernier chargé qui gagne. */
.footer-widget-wrapper .footer-widget-items .footer-content p,
.footer-widget-wrapper .footer-widget-items .contact-list li p,
.footer-newsletter-wrapper .form-clt input {
  text-transform: none;
}

/* ═══════════════════════════════════════════════════════════════
   CTA PRINCIPAL DU HERO — "Parlons-en"
   Deux problèmes dans la version du thème :
   1. La flèche tombait 5px sous le centre de la pastille. Cause : la
      pastille était en display:block avec line-height:68px dans une boîte
      de 62px — le SVG, élément inline, se posait sur une ligne de base
      calculée sur ces 68px. Aucun réglage de padding ne corrige ça
      proprement ; on passe la pastille en flex, qui centre les deux axes.
   2. La pastille était positionnée en absolu contre le bord droit
      (right:4px dans une boîte de 70px), ce qui la faisait lire comme un
      autocollant posé sur le bouton plutôt que comme un même objet.
      Le bouton devient un conteneur flex : libellé et pastille sont deux
      éléments du même flux, espacés par un gap.
═══════════════════════════════════════════════════════════════ */

.hero-1.hero-centered .hero-content .hero-button .theme-btn.btn-style-one {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  height: 64px;
  padding: 0 8px 0 34px;
  border-radius: 999px;

  /* Aplat doré réchauffé d'un dégradé très court : donne du volume au
     bouton sans le transformer en bouton "web 2.0". Le dégradé part de l'or
     de la marque et non de l'or clair : le libellé blanc, centré
     verticalement, ne se pose jamais sur la teinte la moins contrastée. */
  background-color: var(--brand-gold);
  background-image: linear-gradient(180deg, var(--brand-gold) 0%, var(--brand-gold-deep) 100%);
  color: #ffffff;

  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;

  /* L'ombre teintée or ancre le bouton sur le fond clair du hero ;
     le liseré interne clair adoucit l'arête haute. */
  box-shadow: 0 8px 22px rgba(189, 139, 23, 0.30),
              inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: box-shadow 0.25s ease, transform 0.2s ease,
              background-image 0.25s ease;
}

/* La pastille : sortie du positionnement absolu, centrée en flex. */
.hero-1.hero-centered .hero-content .hero-button .theme-btn .icon {
  position: static;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #ffffff;
  color: var(--brand-gold);
  transition: transform 0.25s ease;
}

.hero-1.hero-centered .hero-content .hero-button .theme-btn .icon svg {
  display: block;
  width: 20px;
  height: 20px;
  transition: transform 0.25s ease;
}

/* Survol : l'or se fonce, l'ombre s'ouvre, la flèche part en diagonale
   dans sa direction — la pastille reste blanche pour rester lisible. */
.hero-1.hero-centered .hero-content .hero-button .theme-btn.btn-style-one:hover {
  color: #ffffff;
  background-image: linear-gradient(180deg, var(--brand-gold) 0%, var(--brand-gold-deep) 100%);
  box-shadow: 0 14px 30px rgba(189, 139, 23, 0.38),
              inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
}

.hero-1.hero-centered .hero-content .hero-button .theme-btn:hover .icon {
  background-color: #ffffff;
  color: var(--brand-gold-deep);
}

.hero-1.hero-centered .hero-content .hero-button .theme-btn:hover .icon svg {
  transform: translate(2px, -2px);
}

/* Le thème ne prévoyait aucun état de focus : au clavier, le bouton
   principal du site n'était pas repérable. */
.hero-1.hero-centered .hero-content .hero-button .theme-btn.btn-style-one:focus-visible {
  outline: 3px solid var(--brand-gold-deep);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-1.hero-centered .hero-content .hero-button .theme-btn.btn-style-one,
  .hero-1.hero-centered .hero-content .hero-button .theme-btn .icon,
  .hero-1.hero-centered .hero-content .hero-button .theme-btn .icon svg {
    transition: none;
  }
  .hero-1.hero-centered .hero-content .hero-button .theme-btn.btn-style-one:hover {
    transform: none;
  }
  .hero-1.hero-centered .hero-content .hero-button .theme-btn:hover .icon svg {
    transform: none;
  }
}

@media (max-width: 575.98px) {
  .hero-1.hero-centered .hero-content .hero-button .theme-btn.btn-style-one {
    height: 58px;
    padding: 0 7px 0 26px;
    gap: 12px;
  }
  .hero-1.hero-centered .hero-content .hero-button .theme-btn .icon {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SYSTÈME VISUEL DES BOUTONS
   Le traitement mis au point sur le CTA du hero est étendu à tous les
   boutons : relief, ombre portée, élévation au survol, anneau de focus.

   Les boutons du site n'ont pas tous la même couleur — 4 dorés (#bd8b17)
   et 5 sombres (#050505 à #1a1e27), sans compter les variantes par carte
   dans les offres. Plutôt que de réécrire chaque fond (et de casser les
   règles de couleur existantes, y compris leurs survols), le relief est
   obtenu par un dégradé TRANSLUCIDE posé par-dessus : il éclaircit le haut
   et fonce le bas quelle que soit la couleur dessous. Un seul dégradé,
   valable pour les deux familles, et chaque bouton garde sa couleur.
═══════════════════════════════════════════════════════════════ */

:root {
  --btn-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(0, 0, 0, 0.14) 100%);
  --btn-ring: 0 0 0 1px rgba(255, 255, 255, 0.16) inset;
}

/* ── Relief ── */
.theme-btn.btn-style-one,
.header-cta-btn,
.cf-submit-btn,
.pricing-section .pricing-button .theme-btn {
  background-image: var(--btn-sheen);
  box-shadow: var(--btn-ring), 0 8px 20px rgba(12, 14, 20, 0.20);
  transition: box-shadow 0.25s ease, transform 0.2s ease,
              background-color 0.25s ease, color 0.25s ease;
}

/* Offres : les règles de couleur par carte (nth-child) emploient le raccourci
   "background:", qui remet background-image à none, et sont plus spécifiques
   que la règle générique ci-dessus. Le relief est donc forcé ici — la couleur
   de chaque carte, elle, reste définie par ses propres règles. */
.pricing-section .pricing-button .theme-btn {
  background-image: var(--btn-sheen) !important;
}

/* Les boutons dorés reçoivent une ombre teintée or plutôt que neutre :
   une ombre grise sous un aplat doré grise aussi le fond autour. */
.pricing-section .row > div:nth-child(1) .pricing-button .theme-btn,
.pricing-section .row > div:nth-child(3) .pricing-button .theme-btn,
.footer-newsletter-wrapper .form-clt .arrow-icon,
.scroll-top {
  box-shadow: var(--btn-ring), 0 8px 20px rgba(189, 139, 23, 0.28);
}

/* ── Survol : élévation + ombre plus ouverte ── */
.theme-btn.btn-style-one:hover,
.header-cta-btn:hover,
.cf-submit-btn:hover,
.pricing-section .pricing-button .theme-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--btn-ring), 0 14px 28px rgba(12, 14, 20, 0.28);
}

.pricing-section .row > div:nth-child(1) .pricing-button .theme-btn:hover,
.pricing-section .row > div:nth-child(3) .pricing-button .theme-btn:hover,
.footer-newsletter-wrapper .form-clt .arrow-icon:hover,
.scroll-top:hover {
  transform: translateY(-2px);
  box-shadow: var(--btn-ring), 0 14px 28px rgba(189, 139, 23, 0.36);
}

/* ── Focus clavier ──
   Aucun bouton du site n'avait d'état de focus visible : à la navigation
   au clavier, on ne savait pas où on se trouvait. */
.theme-btn:focus-visible,
.header-cta-btn:focus-visible,
.cf-submit-btn:focus-visible,
.footer-newsletter-wrapper .form-clt .arrow-icon:focus-visible,
.scroll-top:focus-visible {
  outline: 3px solid var(--brand-gold-deep);
  outline-offset: 3px;
}

/* Sur fond doré (bandeaux CTA, carte PME), un anneau doré serait invisible :
   on passe au noir. */
.cta-contact-wrapper .theme-btn:focus-visible,
.pricing-section .row > div:nth-child(2) .pricing-button .theme-btn:focus-visible {
  outline-color: #111111;
}

@media (prefers-reduced-motion: reduce) {
  .theme-btn.btn-style-one,
  .header-cta-btn,
  .cf-submit-btn,
  .pricing-section .pricing-button .theme-btn,
  .footer-newsletter-wrapper .form-clt .arrow-icon,
  .scroll-top {
    transition: none;
  }
  .theme-btn.btn-style-one:hover,
  .header-cta-btn:hover,
  .cf-submit-btn:hover,
  .pricing-section .pricing-button .theme-btn:hover,
  .footer-newsletter-wrapper .form-clt .arrow-icon:hover,
  .scroll-top:hover {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CENTRAGE DES ICÔNES DANS LEURS PASTILLES
   Le thème centre verticalement le contenu de ses pastilles rondes avec
   un line-height supérieur à la hauteur de la boîte (58px dans 52px,
   52px dans 48px, 90px dans 90px). Or le pictogramme est un <svg>
   inline : il se pose sur la ligne de base calculée sur ce line-height,
   donc systématiquement trop bas — de 2 à 4px selon la pastille.

   Le line-height ne peut pas centrer un élément inline de façon fiable :
   on passe ces pastilles en flex, qui centre sur les deux axes quelle
   que soit la taille du pictogramme.

   Écarts mesurés avant correction :
     .arrow-icon (newsletter)      52px  → +4,2px
     .service-card-items .icon     48px  → +3,4px
     .about-content-1 ... .icon    90px  → +2,1px
═══════════════════════════════════════════════════════════════ */

.footer-newsletter-wrapper .form-clt .arrow-icon,
.service-card-items .icon,
.about-content-1 .icon-items .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Les <i> servent d'enveloppe au svg : sans display:flex ils réintroduisent
   une ligne de base et le décalage revient. */
.footer-newsletter-wrapper .form-clt .arrow-icon > i,
.service-card-items .icon > i,
.about-content-1 .icon-items .icon > i {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.footer-newsletter-wrapper .form-clt .arrow-icon svg,
.service-card-items .icon svg,
.about-content-1 .icon-items .icon svg {
  display: block;
}

/* ═══════════════════════════════════════════════════════════════
   BANDEAUX CTA — texte à gauche, bouton à droite
   Le thème réservait 400px de padding à gauche pour loger le décor
   (carré + cercle + étoile), centrait le titre dans l'espace restant et
   laissait le bouton contre le bord droit. Résultat mesuré : le titre
   démarrait à 400px du bord, et l'écart entre la fin du titre et le
   bouton était de 0px — les deux se touchaient.

   Le décor est en position absolue : il n'a jamais eu besoin de ce
   padding. Il repasse en arrière-plan, le titre s'aligne à gauche et le
   bouton reste à droite, avec un écart garanti par le gap.
═══════════════════════════════════════════════════════════════ */

.cta-contact-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 64px);
  padding: 34px clamp(24px, 3.5vw, 56px);
}

.cta-contact-wrapper h3 {
  flex: 1 1 auto;
  margin: 0;
  max-width: 46ch;
  /* style.css:19849 impose "text-align: center !important" sur ce même
     sélecteur : il faut la même arme pour reprendre la main. */
  text-align: left !important;
  /* Ombre portée du thème, pensée pour un titre sur photo : sur l'aplat
     doré elle ne fait que salir les lettres. */
  text-shadow: none;
  /* Le décor est le dernier enfant du bandeau : sans z-index il se
     peindrait par-dessus le titre. */
  position: relative;
  z-index: 2;
}

.cta-contact-wrapper .theme-btn {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}

/* Décor renvoyé au fond et atténué : il occupe la même zone que le titre
   maintenant que celui-ci est aligné à gauche. */
.cta-contact-wrapper .left-shape {
  z-index: 0;
  opacity: 0.45;
  pointer-events: none;
}

/* Sous 767px, titre et bouton l'un au-dessus de l'autre, centrés. */
@media (max-width: 767.98px) {
  .cta-contact-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
  }
  .cta-contact-wrapper h3 {
    text-align: center !important;
    max-width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PASTILLE "À PROPOS" — lisibilité du pictogramme
   Relevé des cinq pastilles du site : quatre suivent la même règle
   (pictogramme blanc ou doré, occupant 46 à 50 % du disque). Celle-ci
   était la seule à porter un trait GRIS (#646464) sur l'or plein.

   Contraste mesuré : 1,94:1. Le minimum WCAG pour un élément graphique
   porteur de sens est de 3:1 — d'où cet aspect terne et délavé.
   En blanc, on passe à 3,06:1, la valeur des autres pastilles dorées
   du site (badge du hero, bouton newsletter).

   Le pictogramme n'occupait par ailleurs que 40 % du disque contre
   0,46 à 0,50 ailleurs : il flottait au milieu d'un aplat trop grand.
═══════════════════════════════════════════════════════════════ */

.about-content-1 .icon-items .icon {
  color: #ffffff;
}

.about-content-1 .icon-items .icon svg {
  width: 43px;
  height: 43px;
  /* Le trait est mis à l'échelle avec le pictogramme : à 43px dans un
     viewBox de 24, un stroke-width de 1,75 donnait un trait de 3,1px,
     bien plus lourd que les autres icônes du site (~1,8px). */
  stroke-width: 1.4;
}

/* ═══════════════════════════════════════════════════════════════
   BADGE "MEILLEURE OFFRE" — posé sur l'entête, sans décaler la carte
   Le badge est en position absolue au-dessus de l'entête. Pour lui faire
   de la place, une règle ne donnait 46px de padding haut qu'à la carte
   PME, contre 22px aux deux autres.

   Résultat mesuré : dans sa propre carte, le contenu de PME descendait de
   27px par rapport à TPE et ONG — icône à 50px du haut au lieu de 23,
   titre à 114 au lieu de 85, bouton à 202 au lieu de 172. Les trois
   colonnes ne s'alignaient donc sur aucune ligne.

   La réserve est désormais identique sur les trois entêtes : le badge
   occupe une bande qui existe dans toutes les cartes, et les trois plans
   s'alignent rangée par rangée.
═══════════════════════════════════════════════════════════════ */

.pricing-section .pricing-box-items .pricing-header {
  padding-top: 40px !important;
  position: relative;
}

/* Le badge se pose dans cette bande, centré sur l'entête. */
.pricing-section .plan-top-tag {
  top: 12px;
  padding: 4px 14px !important;
  font-size: 10px !important;
  line-height: 1.5 !important;
  white-space: nowrap;
}

@media (max-width: 991px) {
  .pricing-section .pricing-box-items .pricing-header {
    padding-top: 38px !important;
  }
  .pricing-section .plan-top-tag {
    top: 10px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   NEWSLETTER — pastille enveloppe écrasée en ovale
   Le thème déclare bien un cercle de 80x80 (style.css:19163), mais la
   pastille est un élément flex dans .footer-newsletter-left. Avec le
   flex-shrink par défaut (1), sa LARGEUR était comprimée jusqu'à la
   largeur de son contenu — 36px, celle du pictogramme — tandis que sa
   hauteur restait à 80px. Un border-radius de 50% sur une boîte 36x80
   ne donne pas un cercle mais une ellipse verticale.

   Rendu mesuré avant correction : 36x80. C'est le seul cercle déformé
   de la page (vérifié sur tous les éléments en border-radius: 50%).

   flex: 0 0 80px empêche toute compression. Le centrage passe en flex,
   comme les autres pastilles du site.
═══════════════════════════════════════════════════════════════ */

.footer-newsletter-wrapper .footer-newsletter-left .icon {
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.footer-newsletter-wrapper .footer-newsletter-left .icon > i {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.footer-newsletter-wrapper .footer-newsletter-left .icon svg {
  display: block;
}