/* 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: var(--warm-800);
  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 var(--warm-200);
  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é ──
   Le blanc donnait 3,06:1 pour le titre et les items, 2,50:1 sur la
   ligne "Toutes les offres TPE et…" que son voile blanc éclaircit
   encore. Seuls le titre 24px/800 passait, en tant que grand texte.
   La carte suit l'encre sombre des boutons : 6,18:1 sur toute la carte,
   et c'est la convention déjà appliquée aux bandeaux CTA. */
.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: var(--btn-gold-ink) !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: var(--warm-800);
  border-color: var(--warm-800);
}

/* 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: var(--btn-gold-ink);
}

/* ── 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: var(--ink);
}

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

.pricing-section .pricing-subtitle {
  font-size: 16px;
  color: var(--ink-muted);
  margin-bottom: 20px;
}

.pricing-section .pricing-box-items.bg-black .pricing-subtitle {
  color: var(--warm-300);
}

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

.pricing-section .plan-old-price {
  text-decoration: line-through;
  color: var(--warm-600);
  font-size: 18px;
}

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

.pricing-section .plan-current-price span {
  font-size: 16px;
  font-weight: 400;
  color: var(--ink-muted);
}

.pricing-section .plan-saving {
  color: var(--ink-muted);
  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(--gold-500), var(--gold-300));
  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: var(--ink-muted);
  margin: 15px 0;
  padding: 10px;
  background: var(--warm-100);
  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(0, 0, 0, 0.16);
}

/* 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. L'icône est en or-encre : sur la pastille teintée
   (#f7f1e3 une fois composée), l'or de marque tombait à 2,71:1, sous le
   seuil de 3:1 des éléments non textuels. */
.pricing-section .row > div:nth-child(1) .pricing-header .title-icon {
  background: rgba(189, 139, 23, 0.12);
  color: var(--gold-text);
}

/* PME : badge translucide sur la carte dorée. L'icône blanche donnait
   2,45:1 sur la pastille composée ; elle suit l'encre sombre de la carte. */
.pricing-section .row > div:nth-child(2) .pricing-header .title-icon {
  background: rgba(255, 255, 255, 0.18);
  color: var(--btn-gold-ink);
}

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

/* 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: var(--ink-muted) !important; }
.pricing-section .row > div:nth-child(2) .pricing-header h3 { color: var(--btn-gold-ink) !important; }
.pricing-section .row > div:nth-child(2) .pricing-subtitle   { color: rgba(17, 17, 17, 0.82) !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: var(--gold-text) !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(0,0,0,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: var(--gold-text);
  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: var(--btn-gold-ink) !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 que "Vision" et
   "Philosophie" : sans hauteur minimale, changer d'onglet fait s'effondrer
   le bloc et se désaligne de l'image à côté.

   Cette réserve était à 270px alors que le plus haut des trois panneaux
   n'en fait plus que 178 depuis le resserrement des espacements (voir bloc
   "ONGLET NOTRE MISSION" en fin de fichier) : elle laissait donc jusqu'à
   138px de vide sous "Philosophie". Ramenée au plus haut panneau. */
@media (min-width: 768px) {
  .why-choose-us-content-1 .tab-content {
    min-height: 180px;
  }
}

/* Entre 1200 et 1255px, la colonne de texte est à sa largeur la plus
   étroite (la grille vient de passer en xl mais le conteneur reste à
   1140px) : le paragraphe de "Mission" y tient sur trois lignes au lieu
   de deux, et dépassait la réserve. Mesuré aux bornes : 3 lignes de 1200
   à 1255, 2 lignes dès 1260. */
@media (min-width: 1200px) and (max-width: 1259.98px) {
  .why-choose-us-content-1 .tab-content {
    min-height: 200px;
  }
}

/* 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: var(--ink);
  letter-spacing: 0.2px;
}

/* L'astérisque porte du sens : c'est lui qui dit qu'un champ est
   obligatoire. En or de marque il était à 3,06:1 sur le panneau blanc,
   soit l'élément le moins lisible du formulaire. */
.cf-required {
  color: var(--gold-text);
  margin-left: 2px;
}

/* Piège à robots. Sorti de l'écran plutôt que masqué en display:none :
   une partie des robots ignore les champs non rendus, et le champ doit
   rester remplissable pour que le piège fonctionne. Reprend .rm-honey
   de la page roadmap, qui filtrait déjà ses envois.
   Le sélecteur est plus tardif que le ".row > *" de Bootstrap, à
   spécificité égale : la mise en page de la grille ne s'y applique pas. */
.cf-honey {
  position: absolute;
  left: -5000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 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;
}

/* Le fond passe du gris ardoise à l'or : le libellé blanc, qui tenait
   15:1 sur l'ardoise, tomberait à 3,06:1 sur l'or. Il passe à l'encre
   sombre en même temps que le fond. */
.cf-submit-btn:hover {
  background: var(--brand-gold);
  color: var(--btn-gold-ink);
  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" du thème pour ne pas chevaucher WhatsApp.
   Sans ce décalage, .scroll-to-top (bottom:20px/right:20px, 40px de large,
   défini dans style.css) et .whatsapp-float (bottom:28px/right:28px, 58px)
   se superposent presque exactement dès que le bouton "retour en haut"
   apparaît au défilement.
   Une règle équivalente existait déjà plus bas dans ce fichier (section
   "SYSTÈME VISUEL DES BOUTONS"), mais visait ".scroll-top" — une classe
   absente du HTML, le vrai bouton portant ".scroll-to-top" — donc sans le
   moindre effet. Corrigée au même endroit, avec les mêmes règles de
   relief, survol et focus que les autres boutons du site. */
.scroll-to-top {
  bottom: 100px !important;
}

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

/* ═══════════════════════════════════════════════════════════════
   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: var(--ink-muted) !important;
}

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

/* 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: var(--btn-gold-ink);
}

.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: var(--ink-muted);
}

.pricing-section .row > div:nth-child(2) .pricing-list li {
  color: var(--btn-gold-ink) !important;
}

.pricing-section .row > div:nth-child(3) .pricing-list li {
  color: var(--ink-muted) !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 sombre sur fond doré — la coche blanche etait a 3,06:1,
   sous le seuil de 3:1 une fois le voile du fond pris en compte. */
.pricing-section .row > div:nth-child(2) .pricing-list li .icon::after {
  border-right-color: var(--btn-gold-ink) !important;
  border-bottom-color: var(--btn-gold-ink) !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: var(--btn-gold-ink);
}

.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: var(--ink);
    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.

   13/09 — poids des images :
   - service-bg.jpg (150 Ko) n'est plus chargée. Le ::before opaque du
     panneau « Nos services » la recouvre entièrement (voir « d) » plus
     bas) : capture avant/après identique au pixel près. On la payait
     sans jamais la voir.
   - choose-us-shape passe en WebP : 157 → 71 Ko. Le motif n'est porté
     que par la transparence (lignes blanches, alpha ≤ 115), d'où une
     compression poussée sur l'alpha, sans écart visible sur fond clair
     ni sombre. */
.bg-service {
  background-image: none;
}

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

.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é va de l'or
     de la marque à l'or profond ; l'encre sombre tient 6,18:1 en haut et
     4,93:1 au point le plus foncé, donc sur toute la hauteur du bouton. */
  background-color: var(--brand-gold);
  background-image: linear-gradient(180deg, var(--brand-gold) 0%, var(--brand-gold-deep) 100%);
  color: var(--btn-gold-ink);

  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: var(--btn-gold-ink);
  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.
   Réservé aux boutons qui restent dorés en toutes circonstances. Les
   boutons d'offres en sont exclus : ils passent au noir au survol de leur
   carte, et une ombre dorée autour d'un bouton noir vire au halo fluo. */
.footer-newsletter-wrapper .form-clt .arrow-icon,
.scroll-to-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);
}

.footer-newsletter-wrapper .form-clt .arrow-icon:hover,
.scroll-to-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-to-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-to-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-to-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;
}

/* La section "Pourquoi nous choisir" était la seule à ne pas suivre le
   rythme vertical commun : padding-top à 0, donc collée au bandeau CTA
   doré qui la précède (écart mesuré : 0px, sur-titre à 17px du bord).
   Elle reprend --section-gap comme toutes les autres. */
.why-choose-section {
  padding-top: var(--section-gap);
}


/* ═══════════════════════════════════════════════════════════════
   BANDEAUX CTA — flèche manuscrite décorative
   Le titre à gauche, le bouton à droite : un vide s'était ouvert entre
   les deux. La flèche l'occupe et dirige le regard vers le bouton.

   Le fichier images/cta-arrow.svg n'est pas dessiné à la main mais
   CALCULÉ : ses axes sont relevés au pixel près sur la référence, et le
   trait est un contour à largeur variable — d'où les amorces effilées,
   comme un feutre qui se pose et se lève. Un <path stroke> d'épaisseur
   constante ne peut pas rendre cela.

   Purement décorative : aria-hidden sur le <span>, alt vide sur l'image.
   Masquée sous 1200px plutôt que de comprimer le titre ou le bouton.
═══════════════════════════════════════════════════════════════ */

.cta-contact-wrapper .cta-arrow {
  flex: 1 1 auto;
  min-width: 0;
  /* Hauteur nulle sur la ligne flex : la flèche est plus haute que le
     titre, mais elle déborde dans le rembourrage du bandeau au lieu de
     l'agrandir. Elle reste dans la boîte, donc aucun risque de rognage
     par le overflow:hidden de .fix. */
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.cta-contact-wrapper .cta-arrow img {
  width: 100%;
  /* 275px de large = 56px de haut : le zigzag chevauche la ligne du titre
     au lieu de plonger dessous (le dessin est rehaussé de 75 unités dans
     le générateur, viewBox recadré à 575x117, puis élargi à 584 pour
     loger la pointe refermée). */
  max-width: 275px;
  height: auto;
  display: block;
  /* La pointe est à y=48,5 sur 117, soit 8,5 % au-dessus du milieu du
     dessin : sans compensation elle viserait au-dessus du bouton. Les
     14px conservés la gardent dans la moitié haute du bouton, et la queue
     arrive au niveau de la ligne de base du titre. */
  transform: translateY(calc(8.5% - 14px));
}

/* Le second bandeau fait 145px de haut contre 117 (son titre tient sur deux
   lignes) : la flèche peut y être plus grande, ce qui resserre ses écarts. */
.cta-contact-wrapper:not(.bg-black) .cta-arrow img {
  max-width: 330px;
}

/* La flèche ne peut pas s'élargir aux dépens du titre : à 1200px le premier
   libellé n'a que 3px de marge avant de passer sur deux lignes. La place
   vient des écarts, resserrés tant que la flèche est visible.

   Surtout, le titre était en flex-grow : sa boîte absorbait l'espace libre
   et s'étirait de 99 à 145px au-delà de sa dernière lettre, ce qui éloignait
   d'autant le départ de la flèche. Il cesse de s'étirer. */
@media (min-width: 1200px) {
  .cta-contact-wrapper {
    gap: clamp(16px, 1.5vw, 24px);
  }

  .cta-contact-wrapper h3 {
    flex: 0 0 auto;
  }

  /* Le second titre tient sur deux lignes : sa boîte reste large même quand
     la ligne la plus longue s'arrête bien avant le bord (bord en drapeau).
     À 46ch le gâchis mesuré est de 127px. À 29,5ch la césure retombe juste :
     ligne la plus longue à 5px du bord, toujours deux lignes. */
  .cta-contact-wrapper:not(.bg-black) h3 {
    max-width: 29.5ch;
  }
}

/* Sous 1200px la place manque entre titre et bouton. */
@media (max-width: 1199.98px) {
  .cta-contact-wrapper .cta-arrow {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ANNOTATIONS MANUSCRITES — petites flèches légendées
   Comme sur la référence waalaxy.com : un mot en écriture manuscrite
   (Gochi Hand, la police qu'elle utilise) et une petite flèche
   griffonnée qui guide l'œil vers l'élément visé. Trois emplacements :
   le CTA du hero, le bouton d'envoi du formulaire, la newsletter.

   Les flèches sont générées par le même script que la grande
   (contour à largeur variable) et inlinées en SVG avec
   fill="currentColor" : elles héritent la couleur du contexte,
   ce qu'un <img> ne permettrait pas.

   Pointe redessinée (13/09) : les deux branches s'arrêtaient sur une
   encoche ronde, coupées à plat, et celle du haut longeait le trait à
   deux unités près. À 36px de haut la pointe paraissait dédoublée. Les
   branches partent désormais d'un sommet commun (prolongement de leurs
   bords extérieurs), s'écartent du trait et finissent arrondies.

   Décoratives : aria-hidden, pointer-events none, masquées sous
   1200px comme la grande flèche des bandeaux.
═══════════════════════════════════════════════════════════════ */

.doodle-note {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  /* Sans cela, une note posée près du bord droit de son conteneur voit sa
     largeur automatique réduite à la place restante — et son contenu, en
     nowrap, déborde de sa propre boîte. */
  width: max-content;
  font-family: 'Gochi Hand', cursive;
  font-size: 21px;
  line-height: 1.1;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}

.doodle-note svg {
  flex: 0 0 auto;
  height: 36px;
  width: auto;
}

/* Hero : à droite du bouton « Parlons-en » (373px libres mesurés à
   1440px), la flèche arc pointe vers lui. */
.hero-button {
  position: relative;
}

/* Hero et newsletter suivent le sens de lecture : écriture, flèche, puis
   bouton. L'œil part du mot, suit le trait et arrive sur l'action.
   Le formulaire de contact garde l'ordre inverse : son bouton est déjà
   collé au bord gauche de sa colonne, il n'y a rien à sa gauche. */
.doodle-hero {
  right: calc(50% + 122px);
  top: 50%;
  transform: translateY(-50%) rotate(-2deg);
  color: var(--ink-muted);
}

/* L'arc est dessiné pointe à gauche. Le miroir l'oriente vers la droite —
   et remet du même coup l'amorce fine côté texte : le trait part du mot et
   se termine par la pointe sur le bouton. */
.doodle-hero svg {
  transform: scaleX(-1);
}

/* Formulaire de contact : même dispositif que le hero. Le bouton est centré
   dans sa colonne (il est en inline-flex, text-align suffit), ce qui dégage
   à sa gauche la place de la note. Celle-ci est en position absolue : le
   bouton reste donc exactement au centre, la note ne le décale pas.

   Écart de 156px depuis le centre = 131 (demi-largeur du bouton) + 25 de
   respiration, la même valeur qu'au hero. */
.cf-submit-col {
  position: relative;
  text-align: center;
}

.doodle-contact {
  right: calc(50% + 156px);
  top: 50%;
  transform: translateY(-50%) rotate(-2deg);
  color: var(--ink-muted);
}

.doodle-contact svg {
  transform: scaleX(-1);
}

/* Newsletter : sous le champ e-mail (52px libres mesurés sous l'input),
   le gribouillis remonte vers le bouton rond d'abonnement. */
.footer-newsletter-wrapper .form-clt {
  position: relative;
}

/* La newsletter suivait un autre schéma (texte à gauche, bouton, flèche à
   droite, le tout sous le champ). Elle s'aligne sur les deux autres :
   bouton → flèche → écriture, sur la même ligne.

   Le bouton rond est logé dans le bord droit du champ : rien ne peut se
   glisser juste à sa gauche. La note se place donc avant le formulaire
   entier, sur la même ligne et à la même hauteur — la flèche part du mot,
   longe le champ et arrive sur le bouton d'abonnement.

   Le formulaire est décalé de 224px pour lui faire place. Il lui reste
   360px de champ, pour un texte indicatif qui en demande 229. */
@media (min-width: 1200px) {
  .footer-newsletter-wrapper form {
    margin-left: 224px;
  }
}

.doodle-newsletter {
  right: calc(100% + 24px);
  top: 50%;
  transform: translateY(-50%) rotate(-2deg);
  color: rgba(255, 255, 255, 0.82);
}

.doodle-newsletter svg {
  transform: scaleX(-1);
}

@media (max-width: 1199.98px) {
  .doodle-note {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PIED DE PAGE — densité verticale des colonnes
   Relevé : le bloc des colonnes (liens + coordonnées) faisait 285px de
   haut pour 8 lignes de texte. L'espace venait de cinq empilements
   indépendants — rembourrage du bloc (22+34), marge haute des colonnes
   (30), marge sous les titres (25), et l'écart entre les entrées
   (15px pour les liens, 22px pour les coordonnées).

   Chacun est resserré sans descendre sous l'écart de lecture confortable
   (les liens gardent 9px entre deux zones cliquables de 27px de haut).

   Les classes utilitaires mt-30 et mb-25 ont été retirées du HTML de ces
   trois colonnes : elles imposaient leurs 30 et 25px en !important, une
   règle d'ici n'aurait pu les battre qu'en surenchérissant.
   Les écarts entre entrées, eux, viennent d'un sélecteur à trois classes
   du thème — il faut le reprendre à l'identique pour passer devant.
═══════════════════════════════════════════════════════════════ */

.footer-widget-wrapper {
  padding-top: 12px;
  padding-bottom: 20px;
}

.footer-widget-wrapper .footer-widget-items {
  margin-top: 14px;
}

.footer-widget-wrapper .widget-title {
  margin-bottom: 15px;
}

.footer-widget-wrapper .footer-widget-items .user-links li:not(:last-child) {
  margin-bottom: 9px;
}

.footer-widget-wrapper .footer-widget-items .contact-list li:not(:last-child) {
  margin-bottom: 13px;
}

/* ═══════════════════════════════════════════════════════════════
   ONGLET « NOTRE MISSION » — densité verticale
   Relevé des trois panneaux : Mission 226px, Vision 162, Philosophie 132.
   L'écart vient d'abord du contenu (Mission porte une liste à puces que les
   deux autres n'ont pas), mais aussi de trois espacements plus larges que
   nécessaire. On reprend ces trois-là, le contenu reste intact.

   Les sélecteurs reprennent la forme exacte du thème (dont le
   li:not(:last-child), dont le pseudo-sélecteur pèse plus lourd) : sans
   cela les règles d'ici passeraient derrière.
═══════════════════════════════════════════════════════════════ */

/* La barre d'onglets laissait 54px avant le titre (24 de sa marge basse
   + 30 ici) — l'équivalent de deux lignes de texte pour un simple
   changement de bloc. Vaut pour les trois panneaux. */
.why-choose-us-content-1 .why-choose-list {
  margin-top: 10px;
}

/* Le titre porte déjà 8px de marge basse : 10px de plus sous le
   paragraphe faisaient 18px d'écart pour un simple saut de ligne. */
.why-choose-us-content-1 .why-choose-list p {
  margin-top: 2px;
}

/* Les puces sont en flex avec align-items:center et l'icône fait 22px :
   ramener l'interligne de 30,6 à 26px raccourcit chaque ligne sans
   décaler l'icône par rapport au texte. */
.why-choose-us-content-1 .why-choose-list-items .why-list li {
  line-height: 26px;
}

/* Écart entre le paragraphe et la liste à puces. */
.why-choose-us-content-1 .why-choose-list-items {
  margin-top: 10px;
}

/* Écart entre deux puces, pour des lignes de 31px de haut. */
.why-choose-us-content-1 .why-choose-list-items .why-list li:not(:last-child) {
  margin-bottom: 7px;
}

/* ═══════════════════════════════════════════════════════════════
   IDENTIFICATION DU DIRECTEUR GÉNÉRAL
   Une étiquette posée sur le bas du portrait : elle nomme la personne
   photographiée, que rien n'identifiait jusque-là.

   Elle chevauche l'image plutôt que de se placer dessous — sinon elle
   allongerait la colonne de gauche et casserait l'alignement avec le
   bloc d'onglets à droite, calé au centre.
═══════════════════════════════════════════════════════════════ */

/* La photo gardait sa largeur native (689px, « max-width: initial » du
   thème) dans une colonne de ~523px. Avec le « direction: rtl » du thème,
   le surplus partait vers la gauche : sur un écran de 1440px, l'image
   commençait à -90px, hors de l'écran ; à 1280px, à -167px.
   Elle est désormais contenue dans sa colonne et centrée, sur PC comme
   en version empilée (tablette, mobile). Le conteneur épouse l'image, ce
   qui garde l'étiquette du DG calée sur son coin. */
.why-choose-us-image-1 {
  position: relative;
  direction: ltr;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}

.why-choose-us-image-1 img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 18px 40px -18px rgba(17, 17, 17, 0.35);
}

/* Empilé : l'image passe au-dessus du texte. Un peu d'air en dessous,
   et une taille plafonnée pour qu'elle n'occupe pas tout l'écran d'une
   tablette. */
@media (max-width: 1199.98px) {
  .why-choose-us-image-1 {
    max-width: 480px;
    margin-bottom: 12px;
  }
}

.dg-card {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 12px 18px 11px;
  background: rgba(17, 17, 17, 0.88);
  /* Le portrait est clair et contrasté : sans flou, le texte accrocherait
     le fond. */
  backdrop-filter: blur(6px);
  border-radius: 12px;
  border-left: 3px solid var(--brand-gold, #bd8b17);
  /* Le thème pose "direction: rtl" sur .why-choose-us-image-1 — un détour
     pour caler l'image à droite de sa colonne. Sans ce retour explicite,
     l'étiquette s'afficherait alignée à droite. */
  direction: ltr;
  text-align: left;
  z-index: 2;
}

.dg-name {
  font-family: 'Gochi Hand', cursive;
  font-size: 22px;
  line-height: 1.15;
  color: var(--brand-gold, #bd8b17);
}

.dg-role {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 1199.98px) {
  .dg-card {
    left: 12px;
    bottom: 12px;
    padding: 10px 15px 9px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   OFFRES — ligne d'héritage de la formule PME
   Convention des grilles tarifaires : une formule supérieure reprend
   la précédente. L'annoncer évite de répéter les sept points de TPE
   dans PME, et fait comprendre d'un coup d'œil que PME est un
   sur-ensemble et non une alternative.

   Cette ligne n'est pas une prestation : elle ne porte donc pas de
   coche, et se distingue par un fond et un filet de séparation.
═══════════════════════════════════════════════════════════════ */

.pricing-section .pricing-list .pricing-inherit {
  /* Un correctif antérieur de ce fichier impose "display:flex !important"
     à toutes les puces, pour aligner la coche sur la première ligne du
     texte. Ici il n'y a pas de coche : le <strong> devenait un élément
     flex et récupérait le gap de 14px, d'où un blanc de part et d'autre
     de « TPE ». Il faut le même poids pour repasser en bloc. */
  display: block !important;
  padding: 9px 14px;
  margin-bottom: 14px;
  background: rgba(189, 139, 23, 0.1);
  border-radius: 8px;
  font-size: 0.94rem;
  line-height: 1.45;
}

.pricing-section .pricing-list .pricing-inherit strong {
  font-weight: 700;
}

/* Carte PME : fond doré, le même voile clair y serait invisible. */
.pricing-section .row > div:nth-child(2) .pricing-list .pricing-inherit {
  background: rgba(255, 255, 255, 0.16);
}

/* ═══════════════════════════════════════════════════════════════
   OFFRES — hauteur des cartes et passage en colonne
   Deux défauts mesurés :

   1. La rangée était en align-items:stretch : les trois cartes prenaient
      la hauteur de la plus haute. PME en compte dix points, TPE et ONG
      six — d'où 272 et 293px de blanc sous leur dernière ligne, soit un
      tiers de la carte. Chaque carte épouse maintenant son contenu ; PME,
      la formule mise en avant, ressort naturellement plus haute.

   2. Entre 768 et 991px, les colonnes étaient en col-md-6 : deux cartes
      côte à côte et la troisième seule sur la rangée suivante, à moitié
      de largeur. Elles passent en pleine largeur sous 992px (col-12
      col-lg-4 dans le HTML), une par rangée.
═══════════════════════════════════════════════════════════════ */

.pricing-section .tab-pane .row {
  align-items: flex-start;
}

/* Empilées, les cartes n'ont plus besoin de toute la largeur : au-delà
   d'une certaine mesure les lignes deviennent difficiles à parcourir. */
@media (max-width: 991.98px) {
  .pricing-section .tab-pane .row > div {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PIED DE PAGE — l'adresse devient cliquable
   Elle ouvre la position sur une carte, comme le numéro compose et
   l'e-mail ouvre la messagerie : les trois lignes des coordonnées se
   comportent enfin de la même façon.

   Le repère renvoie vers une RECHERCHE Google Maps sur l'adresse, pas
   vers des coordonnées : celles du bureau n'ont pas été relevées, et un
   point posé au jugé serait pire qu'une recherche qui tombe juste.
═══════════════════════════════════════════════════════════════ */

.footer-widget-items .contact-list a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-widget-items .contact-list a:hover,
.footer-widget-items .contact-list a:focus-visible {
  color: var(--brand-gold, #bd8b17);
}

/* ═══════════════════════════════════════════════════════════════
   MENU — repère de position et centrage
   Deux manques constatés :

   1. La barre collante n'avait AUCUN repère d'entrée active : le thème
      y masque le trait (`.sticky-header .main-menu .navigation > li:before
      { display: none }`) et donne la même couleur à l'entrée courante
      qu'aux autres. Impossible de savoir où l'on se trouve.
      On rétablit le trait doré, comme sur la barre du haut.

   2. Le menu n'était pas centré : dans la barre collante il tombait
      96px à droite du centre, la place libre à sa gauche étant plus
      grande qu'à sa droite.

   La classe `current` est posée au défilement par js/menu-actif.js.
═══════════════════════════════════════════════════════════════ */

/* ── Repère dans la barre collante ─────────────────────────── */
.sticky-header .main-menu .navigation > li:before {
  display: block;
  background-color: var(--brand-gold, #bd8b17);
}

.sticky-header .main-menu .navigation > li.current > a {
  font-weight: 500;
}

/* Le trait du thème est calé à 23px du bas, une valeur prévue pour la
   barre haute qui est plus grande : dans la barre collante il tombait
   au milieu du texte. */
.sticky-header .main-menu .navigation > li:before {
  bottom: 18px;
}

/* Trait doré aussi sur la barre du haut au survol, pour que les deux
   barres réagissent pareil. */
.header-clean-layout .main-menu .navigation > li:hover:before {
  background: var(--brand-gold, #bd8b17);
}

/* ── Centrage du menu ──────────────────────────────────────── */
/* Vrai centrage sur la largeur de l'en-tête, indépendant des largeurs
   du logo et du bouton. La borne basse suit celle du thème : sous 993px
   le menu passe dans le panneau mobile. Entre 993 et 1199 le bouton
   d'appel est masqué (d-none d-xl-flex) mais le menu reste affiché — il
   doit être centré là aussi. */
@media (min-width: 993px) {
  .sticky-header .inner-container {
    position: relative;
  }

  /* .nav-outer est en position:relative dans le thème : le menu s'y
     serait référé et se serait centré sur elle, donc très à droite.
     On la remet dans le flux normal pour que le repère soit la barre
     entière. */
  .sticky-header .nav-outer {
    position: static;
  }

  .sticky-header .main-menu {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* Sans cela, la largeur automatique se limite à la place restante
       depuis le milieu du conteneur, et les entrées s'empilent. */
    width: max-content;
  }

  /* Le menu retiré du flux, le bouton remonterait contre le logo :
     on le maintient à droite. */
  .sticky-header .nav-outer {
    margin-left: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════
   INTERRUPTEUR DE LA PAGE ROADMAP
   L'entrée « Roadmap dirigeant » du menu ne s'affiche que lorsque
   js/roadmap-actif.js pose la classe au-roadmap-on sur <html>, ce qu'il
   fait quand sa variable AU_ROADMAP_ACTIF vaut true. C'est là, et nulle
   part ailleurs, que l'activation se règle.

   Masquer par défaut plutôt que retirer au chargement : l'entrée ne
   clignote jamais avant de disparaître, puisque la règle s'applique dès
   le premier rendu. Le !important est nécessaire — le thème donne aux
   <li> du menu un display explicite, plus spécifique que celui-ci.
═══════════════════════════════════════════════════════════════ */
html:not(.au-roadmap-on) .au-roadmap-only {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION « DOCUMENT GRATUIT » DE L'ACCUEIL
   ───────────────────────────────────────────────────────────────
   POURQUOI ELLE EXISTE
   La page /roadmap était en ligne, active, complète — et personne ne
   la trouvait. Son seul chemin d'accès était une entrée de menu
   nommée « Plan d'action », qui ne dit pas qu'un PDF gratuit se
   trouve derrière, et que le visiteur ne lit pas : la page d'accueil
   se parcourt en défilant. La section rend le document visible dans
   le fil de lecture, entre « Pourquoi nous choisir » et les tarifs :
   le lecteur pas encore prêt à parler d'argent reçoit d'abord
   quelque chose de gratuit.

   C'est désormais le SEUL point d'entrée visible en dehors du menu.
   Un rappel avait été posé dans le premier écran, sous le bouton
   « Parlons-en » (.hero-lead-magnet) ; il a été retiré à la demande.
   Si la section devait disparaître, plus rien ne mènerait au document
   hormis l'entrée de menu — c'est-à-dire le problème d'origine.

   ELLE SUIT L'INTERRUPTEUR
   La section porte au-roadmap-only dans index.html : quand
   js/roadmap-actif.js est sur false, elle disparaît avec les entrées
   de menu (règle juste au-dessus). Ne jamais retirer cette classe,
   sinon le bouton mènerait à une page qui renvoie à l'accueil.

   LA COUVERTURE EST DESSINÉE, PAS PHOTOGRAPHIÉE
   Même construction que la maquette 3D de css/roadmap.css, en plus
   simple : ici le livre ne s'ouvre pas, il se présente. Aucune image
   n'est chargée hormis le logo, déjà sur le site. Tout est en em, et
   le seul réglage est --au-lm-w : la couverture se met à l'échelle
   d'un bloc, 1em valant un dixième de sa largeur.

   ATTENTION : cette couverture et celle de css/roadmap.css sont
   indépendantes. TOUTE CORRECTION DE LA COUVERTURE DU PDF DOIT ÊTRE
   REPORTÉE DANS LES DEUX.
═══════════════════════════════════════════════════════════════ */
.au-lm-section {
  padding: clamp(30px, 5vw, 70px) 0;
}

/* Bloc sombre : la section doit se lire comme un objet posé sur la
   page, pas comme une section de plus. Les deux voisines sont claires,
   le contraste fait tout le travail de repérage. */
.au-lm-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: clamp(28px, 4.4vw, 60px) clamp(20px, 3.6vw, 56px);
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(189, 139, 23, 0.16) 0%, rgba(189, 139, 23, 0) 58%),
    linear-gradient(158deg, #1c1c1c 0%, #070707 58%, #141414 100%);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.22);
}

/* Filet doré en haut du bloc : rappel du liseré de la couverture, et
   il empêche le grand aplat noir de paraître nu. */
.au-lm-wrapper::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--gradient-1);
}

/* ── Colonne texte ── */
.au-lm-content .sub-title {
  color: var(--brand-gold-soft);
}

.au-lm-content h2 {
  color: #ffffff;
  font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.75rem);
  line-height: 1.16;
  margin-bottom: 18px;
}

/* Seul le nom du document est doré : c'est ce que le visiteur doit
   retenir, et le seul mot qu'il retrouvera sur la page d'arrivée. */
.au-lm-or {
  color: var(--brand-gold-soft);
}

.au-lm-lead {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-body, 1rem);
  line-height: 1.7;
  margin-bottom: 22px;
  max-width: 58ch;
}

.au-lm-list {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 26px;
}

.au-lm-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-small, 0.95rem);
  line-height: 1.5;
}

.au-lm-list .icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(189, 139, 23, 0.18);
  color: var(--brand-gold-soft);
}

.au-lm-list .icon svg {
  width: 13px;
  height: 13px;
}

.au-lm-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}

/* Libellé en capitales et bouton plus large qu'ailleurs : c'est
   l'action principale de la section, elle doit se distinguer des
   boutons « Parlons-en » du reste de la page. */
.au-lm-btn {
  align-items: center;
  gap: 12px;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* Le thème habille la pastille du bouton contexte par contexte
   (.hero-1 .icon, .pricing-card-items .icon, etc.). Rien ne couvre
   celui-ci : sans cette règle, la flèche reste un glyphe nu collé au
   texte. Reprise du traitement du héros — pastille blanche, flèche
   dorée — pour que les deux boutons de la page se ressemblent. */
.au-lm-btn .icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--brand-gold-deep);
}

.au-lm-btn .icon svg {
  width: 15px;
  height: 15px;
}

/* ── Couverture du document ──
   --au-lm-w est la seule valeur à toucher : la largeur ET l'échelle
   du texte en dépendent. */
.au-lm-cover-wrap {
  --au-lm-w: clamp(190px, 22vw, 270px);
  position: relative;
  width: var(--au-lm-w);
  margin-inline: auto;
  perspective: 900px;
}

.au-lm-cover {
  position: relative;
  width: 100%;
  /* Proportion d'un livre broché, et non celle du PDF : la couverture
     est redessinée précisément pour se lire comme un ouvrage. */
  aspect-ratio: 1 / 1.42;
  /* Indispensable : les chevrons des angles sont posés en dehors du
     cadre et ne montrent que leur pointe. Sans cette coupe, on voit
     deux grands losanges flotter autour du livre. */
  overflow: hidden;
  font-size: calc(var(--au-lm-w) / 10);
  font-family: var(--heading-font-family, "DM Sans", sans-serif);
  display: flex;
  flex-direction: column;
  padding: 1.55em 1em 1.05em;
  border-radius: 3px 9px 9px 3px;
  background:
    radial-gradient(115% 78% at 50% 30%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(158deg, #242424 0%, #060606 56%, #161616 100%);
  /* Les deux ombres intérieures tiennent lieu de dos : un liseré clair
     puis un creux sombre à gauche suffisent à donner l'épaisseur, sans
     construire un volume en 3D comme sur /roadmap. */
  box-shadow:
    0 22px 44px rgba(0, 0, 0, 0.45),
    inset 7px 0 0 -3px rgba(255, 255, 255, 0.08),
    inset 12px 0 14px -10px rgba(0, 0, 0, 0.9);
  transform: rotateY(-11deg) rotateX(2deg);
  transition: transform 0.5s cubic-bezier(0.34, 0.02, 0.2, 1);
}

.au-lm-cover-wrap:hover .au-lm-cover {
  transform: rotateY(-4deg) rotateX(0deg) translateY(-6px);
}

/* Chevrons dorés des deux angles : deux carrés tournés de 45° dont on
   ne voit que la pointe. Construction reprise du document. */
.au-lm-cover__chevron {
  position: absolute;
  width: 3.5em;
  height: 3.5em;
  border: 0.42em solid var(--brand-gold);
  transform: rotate(45deg);
}

.au-lm-cover__chevron::before {
  content: "";
  position: absolute;
  inset: -1.15em;
  border: 0.4em solid #ffffff;
}

.au-lm-cover__chevron--haut {
  top: -1.75em;
  left: -1.9em;
}

.au-lm-cover__chevron--bas {
  bottom: -1.85em;
  right: -1.95em;
}

.au-lm-cover__titre {
  position: relative;
  font-size: 0.72em;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.005em;
  color: #ffffff;
  text-align: center;
  margin: 0 0 0.75em;
}

/* « Anti-risques » est le seul mot doré du titre, sur le document
   comme ici : c'est lui qui porte la promesse. */
.au-lm-cover__titre em {
  font-style: normal;
  color: var(--brand-gold-soft);
}

.au-lm-cover__accroche {
  position: relative;
  font-family: var(--body-font-family, "Poppins", sans-serif);
  font-size: 0.3em;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
  /* Pousse « Guide 2026 » vers le bas sans hauteur fixe à entretenir. */
  margin: 0 0 auto;
}

.au-lm-cover__guide {
  position: relative;
  font-size: 0.62em;
  font-weight: 400;
  letter-spacing: 0.42em;
  /* La lettre espacée ajoute un blanc APRÈS la dernière lettre : sans
     ce retrait, le mot paraît décalé vers la gauche. */
  text-indent: 0.42em;
  color: #ffffff;
  text-align: center;
  margin: 0;
}

.au-lm-cover__annee {
  position: relative;
  font-size: 1.72em;
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-align: center;
  margin: 0;
}

/* Le 6 seul en doré, comme sur le document. */
.au-lm-cover__annee em {
  font-style: normal;
  color: var(--brand-gold);
}

/* En bas à GAUCHE : en portrait, le chevron doré de l'angle droit
   viendrait barrer le logo en plein milieu du mot. */
.au-lm-cover__marque {
  position: relative;
  align-self: flex-start;
  width: 2.75em;
  height: auto;
  margin-top: 0.8em;
  opacity: 0.9;
}

/* La pastille dit le prix avant qu'on ait lu une ligne. Posée en
   débord sur l'angle du livre : à l'intérieur elle recouvrirait le
   titre, à côté elle se lirait comme un élément de la page et non
   comme une étiquette collée au document. */
.au-lm-cover__badge {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 2;
  padding: 9px 17px;
  border-radius: 100px;
  background: var(--gradient-1);
  color: var(--btn-gold-ink);
  font-family: var(--heading-font-family, "DM Sans", sans-serif);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
  transform: rotate(6deg);
}

@media (max-width: 991px) {
  /* Le texte passe sous la couverture : celle-ci devient la première
     chose vue, et doit rester lisible sans occuper l'écran entier. */
  .au-lm-cover-wrap {
    --au-lm-w: clamp(170px, 44vw, 230px);
    margin-bottom: 14px;
  }

  .au-lm-content {
    text-align: center;
  }

  .au-lm-lead {
    margin-inline: auto;
  }

  /* La liste reste alignée à gauche même quand tout le reste est
     centré : quatre lignes centrées se lisent comme un poème. */
  .au-lm-list {
    grid-template-columns: 1fr;
    text-align: left;
    max-width: 30rem;
    margin-inline: auto;
  }

  .au-lm-action {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .au-lm-cover,
  .au-lm-cover-wrap:hover .au-lm-cover {
    transform: none;
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CONTRASTE — AUDIT WCAG 2.2 DU 29/08/2026

   Deux défauts mesurés sur le code source, corrigés ici par des jetons
   plutôt que valeur par valeur, pour qu'une seule ligne les fasse bouger
   la prochaine fois.

   a) Libellé blanc sur l'aplat doré : 3,06:1. Le seuil applicable est
      4,5:1 — à 16px en graisse 700 (--btn-fs), un libellé de bouton
      n'entre pas dans la catégorie "grand texte", qui commence à 18,7px
      gras. Tous les CTA dorés étaient concernés : hero, offres TPE et
      ONG, survol du bouton d'envoi, badge du document offert, onglet
      actif de "Pourquoi nous choisir", bouton de la page roadmap.

      Deux sorties existaient : foncer l'or, ou foncer le libellé. On
      fonce le libellé. L'or de la marque n'est ainsi défini qu'une fois
      (--brand-gold) et reste identique partout ; foncer le fond aurait
      introduit un second or réservé aux boutons. C'est aussi le choix
      déjà fait plus haut dans ce fichier pour les bandeaux CTA et la
      carte PME ("noir sur or") : le site n'a donc qu'une convention.

      Marge vérifiée aux deux extrêmes : le relief --btn-sheen assombrit
      le bas du bouton de 14%, soit #a2781a au point le plus défavorable,
      où l'encre tient encore 4,71:1. Sur les boutons à dégradé (hero,
      roadmap), le point bas est #a97a12 → 4,93:1. En haut : 7,26:1.

   b) Gris de texte secondaire : quatre valeurs (#666666, #777777,
      #7d7d7d, #5a5a5a) pour un seul rôle, dont deux sous le seuil —
      #777777 à 4,48:1 et #7d7d7d à 4,12:1 sur blanc. Elles ne portaient
      aucune distinction : à l'œil elles sont interchangeables. Une seule
      valeur les remplace.

   Les icônes posées sur l'or (bouton de la newsletter, retour en haut,
   pastilles des listes d'offres) ne sont pas touchées : le seuil des
   éléments non textuels est 3:1 (WCAG 1.4.11) et elles sont à 3,06:1.
═══════════════════════════════════════════════════════════════ */

:root {
  /* Encre des libellés posés sur un fond doré. Volontairement l'encre du
     corps de texte et non du noir pur : le bouton reste dans la même
     famille de gris que le reste de la page. */
  --btn-gold-ink: #111111;

  /* Gris de texte secondaire, unique. 6,39:1 sur blanc, 5,91:1 sur le
     dégradé clair du hero (#f7f6f3). */
  --ink-muted: #5f5f5f;

  /* L'or quand il est ENCRE et non aplat. Palier 700 de l'échelle OKLCH
     dérivée de --brand-gold. 6,51:1 sur blanc, 5,53:1 sur #f0ece3,
     5,34:1 sur #f2e8cf : un seul jeton couvre les trois surfaces claires
     du site. Ne remplace jamais --brand-gold sur fond sombre, où l'or de
     la marque tient déjà 6,18:1 et reste la bonne couleur. */
  --gold-text: #7a5800;
}

/* Le thème peint tout .btn-style-one en color:var(--theme-color1) —
   blanc — quel que soit son fond, et ce fond vient de --bg-theme-color2,
   redéfini en or en tête de ce fichier. C'est la règle qui produisait le
   3,06:1 sur la majorité des CTA. Les boutons dont le fond passe au
   sombre (bandeaux CTA, survol des cartes d'offres) gardent leur libellé
   blanc : leurs propres règles sont plus spécifiques et l'emportent. */
.theme-btn.btn-style-one,
.theme-btn.btn-style-one:hover,
.theme-btn.btn-style-one:focus {
  color: var(--btn-gold-ink);
}

/* ═══════════════════════════════════════════════════════════════
   SYSTÈME CHROMATIQUE — PLANCHE 118 DE SANZO WADA

   La passe de contraste du 29/08 corrigeait des valeurs une par une.
   Ce bloc pose le système dont elles manquaient, sur une base réelle :
   la planche 118 du "Dictionary of Color Combinations" (Wada, 1933),
   qui apparie Yellow Ocher #e0b81f et Vandyke Brown #362304 — un accord
   analogue chaud, à large amplitude tonale (7,90:1 entre ses deux
   pigments). C'est la planche que l'audit désigne pour ce site : elle
   couvre l'or de la marque sans importer de teinte étrangère.

   Ce qui n'allait pas, et que le système corrige :

   a) Les gris étaient FROIDS et l'or est CHAUD. #666666, #999999,
      #cccccc, #5a6070 : quatre gris neutres à bleutés posés autour d'un
      doré. Cet écart de température est ce qui fait lire l'or comme du
      "jaune" plutôt que comme de l'or. L'échelle --warm-* remplace ces
      gris par la rampe désaturée dérivée du Vandyke Brown : même
      luminosité, température alignée sur la marque.

   b) Les fonds sombres étaient BLEU-NOIR. #1a1e27, #111828, #11151f,
      #0c0e14 — quatre noirs à dominante bleue, en opposition directe
      avec l'or qu'ils portent. --surface-dark* les remplace par des
      noirs chauds de même luminosité : l'or posé dessus gagne 0,4 point
      de contraste et surtout cesse de vibrer contre son fond.

   c) Un dégradé hors-système sur le badge de remise
      (#ff6b6b → #feca57, rouge corail vers jaune) : deux teintes qui
      n'existent nulle part ailleurs sur le site.

   Les rampes sont des échelles OKLCH à luminosité perceptuellement
   régulière — les paliers 600/700 servent d'encre, 500 d'aplat, 200/300
   de fond teinté, 800/900 de surface sombre. Un survol descend d'un
   palier ; il ne joue jamais sur l'opacité.
═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Or : échelle dérivée de --brand-gold (#bd8b17 = palier 500) ── */
  --gold-50:  #fff4e1;
  --gold-100: #ffe9c1;
  --gold-200: #f7d495;
  --gold-300: #e5bb6b;
  --gold-400: #cd9d3b;
  --gold-500: #bd8b17;
  --gold-600: #956b00;
  --gold-700: #765400;
  --gold-800: #5b4000;
  --gold-900: #412d00;
  --gold-950: #2a1b00;

  /* ── Neutres chauds : rampe désaturée du Vandyke Brown ──
     Remplace #333/#5a5a5a/#666/#777/#7d7d7d/#999/#ccc/#5a6070. */
  --warm-50:  #fcfaf7;
  --warm-100: #f3f0eb;
  --warm-200: #e6e1d9;
  --warm-300: #d6d1ca;
  --warm-400: #b3ada4;
  --warm-500: #8d8880;
  --warm-600: #68645e;
  --warm-700: #4e4a45;
  --warm-800: #35322d;
  --warm-900: #26221d;
  --warm-950: #1a1611;

  /* ── Rôles ──────────────────────────────────────────────────── */

  /* Encre principale. Chaude, pas #111111 froid. 16,7:1 sur blanc. */
  --ink: #1c1917;

  /* L'or QUAND IL EST ENCRE sur fond sombre. Palier 300.
     9,91:1 sur --surface-dark, contre 5,84:1 pour l'or de marque :
     la marge que réclament les libellés de 11-13px en capitales des
     panneaux sombres (coordonnées, pied de page). L'or de marque reste
     la bonne couleur pour le display et les aplats. */
  --gold-on-dark: var(--gold-300);

  /* Fonds sombres, trois niveaux au lieu de six valeurs ad hoc.
     L'élévation MONTE en luminosité, elle ne descend pas. */
  --surface-dark:    #1a1713;  /* panneaux, cartes sombres (ex-#1a1e27) */
  --surface-darker:  #131110;  /* sections pleine largeur (ex-#11151f)  */
  --surface-darkest: #0b0a09;  /* aplats les plus profonds (ex-#050505) */

  /* Bordures. La règle 1.4.11 (3:1) ne vaut que pour une bordure
     PORTEUSE d'information ; celles-ci délimitent, d'où le palier 300
     à l'intérieur et le 400 pour les champs de saisie, qui eux
     signalent une zone interactive. */
  --border-soft:   var(--warm-300);
  --border-strong: var(--warm-400);

  /* Dégradé de marque, unique. */
  --gradient-gold: linear-gradient(110deg, var(--gold-700) 0%, var(--gold-500) 52%, var(--gold-300) 100%);
}

/* ── a) Gris froids → rampe chaude ─────────────────────────────── */

/* Gris de texte secondaire. Reprend le rôle de --ink-muted en le
   réchauffant à luminosité égale : 5,88:1 sur blanc, 5,17:1 sur
   --warm-100. */
:root {
  --ink-muted: var(--warm-600);
}

.why-choose-us-content-1 .nav.why-tabs .nav-item .nav-link {
  color: var(--warm-600);
}

/* ── b) Noirs bleutés → noirs chauds ───────────────────────────── */

.cf-info-panel,
.pricing-section .row > div:nth-child(3) .pricing-box-items.bg-black {
  background: var(--surface-dark);
}

/* background-color et non background : le raccourci effacerait
   --btn-sheen, le relief posé plus haut sur ce bouton. */
.cf-submit-btn {
  background-color: var(--surface-dark);
}

.cf-wrapper {
  box-shadow: 0 20px 60px rgba(28, 25, 23, 0.13);
}

/* ── Or comme encre sur fond sombre ────────────────────────────── */

/* Libellé de 11px en capitales espacées : le cas où la marge compte le
   plus. 9,91:1 au lieu de 5,84:1. */
.cf-contact-label {
  color: var(--gold-on-dark);
}

.footer-widget-items .contact-list a:hover,
.footer-widget-items .contact-list a:focus-visible {
  color: var(--gold-on-dark);
}

/* La pastille d'icône garde l'or de marque : c'est un aplat de 40px,
   pas du texte, et son fond est déjà un voile doré. */
.cf-icon {
  background: rgba(189, 139, 23, 0.16);
  color: var(--gold-300);
}

/* ── c) Le dégradé hors-système ─────────────────────────────────
   Vérifié sur le balisage avant d'y toucher : le dégradé rouge→jaune
   est porté par .plan-discount-badge, classe qui n'existe dans AUCUNE
   page du site (0 occurrence dans index.html comme dans roadmap.html).
   Le badge réellement affiché est .plan-top-tag, déjà traité plus haut
   dans ce fichier et déjà conforme (or de texte sur blanc, 6,51:1).

   Le dégradé est donc du code mort, et une règle de plus pour le
   corriger serait du code mort aussi. Rien n'est écrit ici : les
   déclarations .plan-* héritées du thème gardent leur place, remises au
   passage sur les jetons du système au cas où le balisage les
   emploierait un jour. */

/* ── Bordures unifiées ─────────────────────────────────────────── */

.cf-input {
  border-color: var(--border-strong);
}

/* ── Sélection : chaude, et lisible sur les deux fonds ─────────── */

::selection {
  background: rgba(189, 139, 23, 0.26);
  color: var(--ink);
}

::-moz-selection {
  background: rgba(189, 139, 23, 0.26);
  color: var(--ink);
}

/* ═══════════════════════════════════════════════════════════════
   DEUX DÉFAUTS MESURÉS SUR LE DOM, PAS SUR LA FEUILLE DE STYLE

   L'audit du fichier ne les voyait pas : les deux couleurs fautives
   viennent de style.css, et un audit de fichier ne sait pas quel fond
   se retrouve réellement DERRIÈRE un texte une fois la page composée.
   Relevé sur la page rendue, couple par couple.

   a) .sub-title — le surtitre de chaque section ("Qui sommes-nous",
      "Pourquoi nous choisir", "Nos offres"…) : #9f9f9f sur blanc,
      soit 2,65:1 pour 4,5:1 exigés. C'est le texte le plus mal contrasté
      de la page, et ce n'est pas un détail décoratif : c'est la ligne
      qui annonce chaque section.

      Il passe à --gold-text plutôt qu'à un gris relevé. Un surtitre est
      un rôle d'ACCENT — c'est la seule ligne de la section qui a le droit
      d'être colorée — et le site a déjà un accent : son or. En gris, même
      corrigé, il reste une ligne grise de plus ; en or, il devient le fil
      qui relie toutes les sections entre elles et au logo. 6,51:1.

      Pour revenir à un gris chaud, remplacer --gold-text par --warm-600
      dans la règle ci-dessous : 5,88:1, conforme aussi.

   b) Auteur des témoignages : blanc sur l'aplat doré de
      .client-info-items, 3,06:1. Le nom est en 18px/700 — sous les
      18,7px qui font basculer dans la catégorie "grand texte", donc
      soumis au seuil de 4,5:1 — et sa fonction en 12px l'est encore plus
      nettement. Même convention que les boutons dorés du site, posée
      plus haut : sur l'or, l'encre est sombre. 4,71:1.
═══════════════════════════════════════════════════════════════ */

.sub-title:not(.text-white) {
  color: var(--gold-text);
}

/* Sélecteurs repris à l'identique de style.css — même convention que
   pour le pied de page plus haut : à spécificité égale, c'est la
   dernière feuille chargée qui l'emporte. La version courte
   (.client-info-items .client-content h5) perdait contre les trois
   classes du thème. */
.testimonial-box-items .client-info-items .client-content h5,
.testimonial-box-items .client-info-items .client-content span {
  color: var(--btn-gold-ink);
}

/* ═══════════════════════════════════════════════════════════════
   TROIS COUPLES RELEVÉS SUR LA PAGE COMPOSÉE

   Ceux-là échappent aussi bien à l'audit de fichier qu'à une lecture des
   sélecteurs : deux d'entre eux se jouent sur un ::before, et le
   troisième sur une couleur du thème posée sur une surface définie
   ailleurs. Mesurés sur le rendu, fond réellement peint compris.

   a) LE BANDEAU CTA DORÉ — l'aplat n'était pas l'or de la marque.
      style.css:4746 peint .cta-contact-wrapper::before en #BD8B17 puis
      lui applique opacity: 0.9. Sur le blanc de la page, cet or
      transparent se compose en rgb(195,150,45) : un or lavé de 10 % de
      blanc, plus pâle et moins saturé que le logo, sur le bandeau qui
      est justement le plus grand aplat de marque de la page.

      Le titre blanc y tombait à 2,73:1. En 32px/600 il relève du seuil
      "grand texte", 3:1 : il était sous la limite. L'opacité repasse à
      1. L'or redevient exactement celui du logo et le titre remonte à
      3,06:1, conforme.

      La marge reste courte, et c'est délibéré : le blanc sur l'or est
      ici tenu par un titre de 32px et rien d'autre — aucun texte de
      labeur n'est posé sur cet aplat. Le décor .left-shape qui passe
      derrière assombrit localement le fond, donc joue en faveur du
      contraste, jamais contre.

   b) BAS DE PIED DE PAGE — 1,64:1, le pire couple du site.
      .footer-bottom est un aplat doré, et la ligne de copyright y est
      posée en #bebebe : un gris clair sur un or moyen, deux valeurs
      presque identiques en luminosité. La mention est, en pratique,
      illisible. Convention du site : sur l'or, l'encre est sombre.
      6,18:1.

   c) .text-gray — #808080, utilitaire du thème, employé notamment sous
      le titre de la section contact ("Notre équipe vous répond sous
      24h") sur le crème #f4f1ea : 3,50:1 pour 4,5:1 exigés. Il rejoint
      --ink-muted, qui tient 5,21:1 sur cette même surface.

   Et un point de rendu, pas de contraste : le fond du pied de page
   était #212529, le gris-bleu de Bootstrap. C'est le dernier grand
   aplat froid de la page, et il porte le logo doré. Il passe à
   --surface-dark, qui remonte au passage le blanc de 15,4:1 à 17,9:1.
═══════════════════════════════════════════════════════════════ */

.cta-contact-wrapper::before {
  opacity: 1;
}

.footer-bottom p,
.footer-bottom a {
  color: var(--btn-gold-ink);
}

.text-gray {
  color: var(--ink-muted);
}

/* .bg-dark de Bootstrap est en !important (#212529) et écrase même le
   fond que le thème prévoyait pour .footer-bg. Il faut la même arme. */
.footer-section-1.bg-dark {
  background-color: var(--surface-dark) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DEUX DERNIERS POINTS

   a) .text-gray — l'utilitaire est déclaré en !important dans
      tm-utility-classes.css (#808080), ce qui bat la règle posée plus
      haut. Il faut la même arme. 3,50:1 → 5,21:1 sur le crème.

   b) LE SOULIGNÉ DU MENU ÉTAIT NOIR, ET LA RÈGLE QUI DEVAIT LE DORER
      NE DÉSIGNAIT RIEN. Plus haut dans ce fichier, une règle vise
      "... > li.current > a::before". Or le trait n'est pas sur le lien :
      style.css:1997 le pose sur le LI (.main-menu .navigation > li:before),
      en var(--headings-color), soit #0a0a0a. Le sélecteur ne
      correspondait donc à aucun élément, silencieusement, et le repère
      de la page courante — comme celui du survol — est resté noir
      depuis le début.

      C'est le seul repère de navigation de la page, et le site a une
      couleur faite pour ce rôle. Il passe à l'or de marque. C'est un
      aplat décoratif de 1px, pas du texte : le seuil applicable est
      3:1 (WCAG 1.4.11) et l'or le tient sur blanc (3,06:1).
═══════════════════════════════════════════════════════════════ */

.text-gray {
  color: var(--ink-muted) !important;
}

.main-menu .navigation > li:before {
  background-color: var(--brand-gold);
  /* 1px d'or sur blanc se voit mal ; le thème lui-même n'en donnait pas
     davantage, mais en noir. À 2px le repère existe vraiment. */
  height: 2px;
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   LES TROIS DERNIÈRES TEINTES ÉTRANGÈRES, ET LE PANNEAU "NOS SERVICES"

   Relevé en balayant toutes les couleurs réellement peintes sur la page
   et en écartant la famille ambre (teintes 28°–58°) et les gris. Ce qui
   restait ne venait pas de la marque : c'étaient les restes verts du
   thème d'origine.

   a) LE HALO VERT DE LA SECTION SERVICES. .ellipse-bg est un disque de
      180px en #c8f169 — un vert citron saturé à 83 % — passé au
      blur(100px) et posé sur le panneau doré. Il ne se voyait pas comme
      un disque : il se voyait comme un voile verdâtre sur l'or, qui
      tirait la couleur de marque vers le jaune-vert sur tout le
      quart haut-gauche du panneau. C'est la source du "l'or ne rend pas
      pareil selon l'endroit".

      Il devient un halo CHAUD et SOMBRE plutôt que clair : à cet
      endroit le panneau porte du texte blanc, et un halo clair y
      abaissait le contraste. En profondeur, il l'augmente et donne du
      relief au panneau.

   b) LE CERCLE VERT DU PIED DE PAGE. .footer-section-1 .circle-shape :
      un disque de 592px en dégradé sarcelle → olive
      (rgba(8,44,43) → rgba(128,167,82)). Même origine, même traitement.

   c) DERNIERS GRIS BLEUTÉS : #f4f5f8 et rgba(17,24,40,.08) — teintes
      222°–225°, soit franchement bleues — sur la croix de fermeture du
      menu et la bordure des onglets, plus l'encre #1a1e27 des champs du
      formulaire.

   d) LE PANNEAU "NOS SERVICES" — 3,06:1 SUR LE TEXTE DES QUATRE CARTES.
      Le fond du panneau n'est pas la photo service-bg.jpg : elle est
      entièrement recouverte par un ::before opaque
      (linear-gradient(280deg, #292825 15.04%, #bd8b17 0.27%)). Les deux
      arrêts sont donnés dans l'ordre inverse — 0,27 % après 15,04 % —
      donc le navigateur cale le second sur le premier : il n'y a aucun
      fondu, mais un coin sombre sur 15 % et un aplat d'or plein sur tout
      le reste.

      Le texte des cartes est en blanc de 15px sur cet aplat : 3,06:1,
      pour 4,5:1 exigés. Ce sont les descriptions des quatre services —
      le contenu de la section, pas un ornement.

      L'or du panneau descend donc au palier 600 (#956b00) : le blanc y
      tient 4,79:1. L'or de la MARQUE ne bouge pas — logo, boutons,
      bandeaux CTA, pied de page gardent #bd8b17 ; seul cet aplat-ci,
      qui est le seul du site à porter du texte de labeur, est descendu
      d'un cran. Un or plus profond sous du blanc est aussi ce que la
      planche 118 propose : l'ocre y est tenu par un brun sombre, pas
      par du jaune clair.

      Pour revenir à l'or clair, remplacer --gold-600 par --brand-gold
      ci-dessous — le texte des cartes repasse alors sous le seuil.
═══════════════════════════════════════════════════════════════ */

/* a) */
.service-section .ellipse-bg {
  background-color: var(--gold-800);
}

/* b) */
.footer-section-1 .circle-shape {
  background-image: linear-gradient(48deg,
    rgba(65, 45, 0, 0.55) 13.25%,
    rgba(189, 139, 23, 0.20) 83.21%);
}

/* c) */
.close-btn {
  color: var(--warm-100);
  border-color: var(--warm-100);
}

.why-choose-us-content-1 .nav.why-tabs {
  border-color: rgba(28, 25, 23, 0.09);
}

.cf-input,
.cf-textarea {
  color: var(--ink);
}

/* d) */
.service-section::before {
  background-image: linear-gradient(280deg,
    var(--warm-900) 15.04%,
    var(--gold-600) 15.04%);
}

/* ═══════════════════════════════════════════════════════════════
   LE CHEVRON DES SURTITRES — LE DERNIER VERT DU THÈME

   Chaque surtitre de section est précédé de deux triangles superposés
   (.triangle1 / .triangle2, style.css:2783). Le second est peint en
   #113c3d : un sarcelle très sombre, dernier vestige de la palette
   verte du thème d'origine, répété au-dessus de CHAQUE section du site.
   Le premier est en --theme-color1, soit blanc — invisible sur les
   sections claires, où le chevron n'était donc qu'une pointe verte.

   Les deux passent dans la famille de l'or, avec deux paliers d'écart
   pour que la superposition se lise encore comme deux plans. Sur les
   sections sombres (surtitre .text-white), le plan avant reste blanc et
   le plan arrière prend l'or clair.

   Élément décoratif : il ne porte aucune information que le texte du
   surtitre ne donne pas, aucun seuil de contraste ne s'y applique.
═══════════════════════════════════════════════════════════════ */

.sec-title .sub-title .triangle.triangle1 {
  border-left-color: var(--gold-500);
}

.sec-title .sub-title .triangle.triangle2 {
  border-left-color: var(--gold-700);
}

.sec-title .sub-title.text-white .triangle.triangle1 {
  border-left-color: #ffffff;
}

.sec-title .sub-title.text-white .triangle.triangle2 {
  border-left-color: var(--gold-200);
}

/* ═══════════════════════════════════════════════════════════════
   RELIQUATS — LE BLANC BLEUTÉ DU THÈME ET L'ANNEAU VERT

   a) --theme-color3 vaut #f4f5f8 : un blanc cassé BLEU (teinte 225°,
      saturation 22 %). Il sert de blanc secondaire au thème — croix de
      fermeture du menu, traits des icônes, quelques fonds — soit
      quatorze points d'emploi. Sur un site dont tout le reste est
      chaud, c'est un blanc qui tire au gris-bleu dès qu'il touche l'or.
      Le jeton est redéfini ici plutôt que ses usages, comme c'est déjà
      fait en tête de ce fichier pour --theme-color2, 7 et 8.

   b) .circle-shape-2 : le second anneau du pied de page, en bordure de
      5px du même vert citron #c8f169 que le halo traité plus haut. Il
      était passé au travers : la couleur y est une BORDURE, pas un fond.

   c) Deux encres #11151f restantes (badge du hero, croix du menu
      mobile) : même bleu-noir que les fonds déjà réchauffés.
═══════════════════════════════════════════════════════════════ */

:root {
  --theme-color3: var(--warm-100);
}

.footer-section-1 .circle-shape-2 {
  border-color: rgba(189, 139, 23, 0.55);
}

.hero-1 .hero-content h6 {
  color: var(--ink);
  box-shadow: 0 6px 20px rgba(28, 25, 23, 0.07);
}

/* ═══════════════════════════════════════════════════════════════
   CORRECTION DE LA RÈGLE DES SURTITRES

   La règle .sub-title:not(.text-white) posée plus haut supposait que
   .text-white marquait tous les surtitres de sections sombres. Vérifié
   sur les huit surtitres de la page : c'est vrai pour sept d'entre eux,
   faux pour "Document offert". Son panneau (.au-lm-wrapper) est un
   aplat quasi noir, mais son balisage ne porte pas .text-white — il
   tenait sa couleur d'une autre règle. L'or de TEXTE, prévu pour les
   fonds clairs, y tombait donc à 2,62:1.

   Il prend l'or des fonds sombres, comme les libellés du panneau de
   coordonnées et du pied de page. 9,46:1.

   Les six autres surtitres clairs sont confirmés sur fond clair
   (encre des titres voisins mesurée section par section : #0a0a0a
   partout), et "Nos services" est bien en .text-white.
═══════════════════════════════════════════════════════════════ */

.au-lm-wrapper .sub-title {
  color: var(--gold-on-dark);
}