/*
 * Reskin LFC pour le thème buildgo.
 * Chargé APRÈS assets/sass/style.css : redéfinit les variables de marque
 * du thème vers la charte LFC (bleu) et force le mode clair.
 */

:root {
  --primary-color-1: #1E50A0; /* accent buildgo (ambre) -> bleu LFC */
  --color-4: #173E7C;          /* accent secondaire -> bleu LFC 700 */
  --body-font: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* corps = Manrope (charte LFC) */
  --heading-font: "Plus Jakarta Sans", "Manrope", sans-serif; /* titres + menus : police d'origine (préférence user, prime sur la charte) */
}

/* Le site LFC est toujours en mode clair : masque le commutateur dark/light */
.switch__tab {
  display: none !important;
}

/*
 * Hero buildgo (banner__three) : le texte LFC est plus long que la démo.
 * On empêche toute coupure de mot (chaque mot reste sur une ligne), on laisse
 * l'image-pilule passer sous le texte au besoin, et on adapte la taille au viewport.
 */
.banner__three-content h1 {
  flex-wrap: wrap;
  white-space: nowrap;
  font-size: clamp(36px, 5vw, 76px);
  line-height: 1.1;
}

/* Hero MOBILE (≤767px) — refonte mai 2026 :
   l'image-pilule insérée dans le H1 casse sur petit écran -> on la masque et on
   rend le titre 100 % texte ; on masque les flèches de slider orphelines (swipe
   natif) et on réduit le vide. La grande image (swiper) reste sous le titre. */
@media (max-width: 767px) {
  .banner__three-content h1 {
    display: block;
    white-space: normal;
    flex-wrap: nowrap;
    font-size: clamp(30px, 8.5vw, 44px);
    line-height: 1.18;
    margin-bottom: 8px;
  }
  .banner__three-content h1 picture,
  .banner__three-content h1 img,
  .banner__three-content h1 .img_left_animation { display: none !important; }
  .banner__three-content h1 span { flex-basis: auto !important; display: inline !important; }
  .banner__three .slider-arrow { display: none !important; }
  .banner__three { padding-top: 18px !important; }
  .banner__three-slider { margin-top: 16px; }
  /* Bloc CTA mobile du hero (spécificité .banner__three .. pour battre la règle .banner__three-mcta{display:none} placée plus bas) */
  .banner__three .banner__three-mcta { display: block; margin-top: 2px; }
  .banner__three-mcta__sub {
    color: rgba(255,255,255,0.86);
    font-size: 1rem; line-height: 1.5;
    margin: 0 0 18px; max-width: 38ch;
  }
  .banner__three-mcta__trust {
    list-style: none; display: flex; flex-wrap: wrap;
    gap: 8px 16px; padding: 0; margin: 18px 0 0;
  }
  .banner__three-mcta__trust li {
    color: #fff; font-size: 0.85rem; font-weight: 600;
    display: flex; align-items: center; gap: 6px;
  }
  .banner__three-mcta__trust li::before {
    content: '✓'; color: var(--lfc-accent-aaa, #85B8EE); font-weight: 700;
  }
}
/* Bloc CTA hero réservé au mobile : masqué dès 768px (desktop buildgo inchangé) */
.banner__three-mcta { display: none; }

/* === Accessibilité AAA (renforcement WCAG 2.2) === */

/* 1) Bouton principal : texte blanc sur fond bleu (ratio 7.75:1).
   EXCLUT la variante --light (pill blanc à texte navy) sinon son texte
   passerait blanc sur blanc = invisible (bug card estimation, 2026-05-30). */
.build_button:not(.build_button--light),
.build_button:not(.build_button--light) i,
.build_button:not(.build_button--light) span {
  color: #fff !important;
}

/* 2) Menu header + sous-menu : liens blancs, hover/focus bleu */
.header__area-menubar-center-menu a {
  color: #fff;
}
.header__area-menubar-center-menu a:hover,
.header__area-menubar-center-menu a:focus-visible {
  color: var(--primary-color-1);
}

/* 3) Footer foncé : titres et liens en blanc, hover bleu */
.footer__one a,
.footer__one h6,
.footer__one h6 a,
.copyright__area a,
.footer__one-widget-address a {
  color: #fff;
}
.footer__one a:hover,
.copyright__area a:hover {
  color: var(--primary-color-1);
}

/* 4) Lien d'évitement visible au focus, cible ≥44px */
.lfc-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}
.lfc-skip-link:focus {
  left: 12px !important;
  top: 12px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 24px;
  background: var(--primary-color-1);
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
}

/* 5) Cibles tactiles ≥44px sur liens d'action et coordonnées */
.more_btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer__one a[href^="tel:"],
.footer__one a[href^="mailto:"],
.footer__one-widget-address a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* 6) Focus visible AAA renforcé global */
.header__area a:focus-visible,
.footer__one a:focus-visible,
.build_button:focus-visible,
.more_btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* 7) Bandeau CTA bleu : titre et texte en blanc (7.75:1, AAA) */
.cta__area h1,
.cta__area h2,
.cta__area h3,
.cta__area h4,
.cta__area p {
  color: #fff;
}

/* 8) Section services (fond foncé #222) : texte et liens lisibles en blanc, AAA */
.services__three,
.services__three a,
.services__three span,
.services__three h3,
.services__three p,
.services__three li {
  color: #fff;
}
/* WCAG 2.2 AAA — survol des liens sur TOUTES les sections sombres (#222) :
   bleu clair AAA #85B8EE (≈7.6:1) au lieu du navy #1E50A0 (échec ~2:1).
   SOURCE UNIQUE (DRY) ; le footer a sa propre gestion dédiée plus haut. */
.services__three a:hover,
.banner__three a:hover,
.cta__area a:hover,
.portfolio__three a:hover {
  color: var(--lfc-accent-aaa) !important;
}

/* 9) Texte courant plus foncé pour atteindre 7:1 sur fonds clairs (AAA) */
:root {
  --body-color: #3F3F46;
}

/* 10) Lien d'évitement : cible ≥44px même hors focus (mesure 2.5.5) */
.lfc-skip-link {
  min-height: 44px;
}

/* 11) Bouton de fermeture du panneau latéral : cible ≥44px */
.sidebar-close-btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 12) Numéros de service (déco) sur fond foncé : blancs (battre la spécificité du thème) */
.services__three span { color: #fff !important; }

/* 13) Portfolio : titres et étiquettes lisibles sur carte bleue/foncée active (tag-agnostique) */
.portfolio__three h3,
.portfolio__three h3 a,
.portfolio__three h4,
.portfolio__three h4 a,
.portfolio__three a,
.portfolio__three span { color: #fff !important; }

/* 14) Chrome header (fond foncé), incl. menus mobile + panneau latéral cachés : liens blancs, AAA */
.header__area a { color: #fff; }
.header__area-menubar-right-sidebar-popup,
.header__area-menubar-right-sidebar-popup a,
.header__area-menubar-right-sidebar-popup h1,
.header__area-menubar-right-sidebar-popup h2,
.header__area-menubar-right-sidebar-popup h3,
.header__area-menubar-right-sidebar-popup h4,
.header__area-menubar-right-sidebar-popup h5,
.header__area-menubar-right-sidebar-popup h6,
.header__area-menubar-right-sidebar-popup p,
.header__area-menubar-right-sidebar-popup span,
.header__area-menubar-right-sidebar-popup li { color: #fff; }

/* 15) Largeur texte courant ≤70ch (WCAG 1.4.8 AAA) — pages internes uniquement, hors grilles */
.lfc-aeo p,
.section-padding > .container > .row > [class*="col-"] > p,
.bg-sd__intro p,
.bg-pd__desc p,
.bg-bd__container p,
.lfc-page-header__subtitle {
  max-width: 70ch;
}

/* 15-bis) Un paragraphe plafonné à 70ch dans une colonne centrée (.t-center) doit
   recentrer son bloc, sinon il reste collé à gauche et le texte paraît décentré. */
[class*="col-"].t-center > p,
.t-center > p {
  margin-left: auto;
  margin-right: auto;
}

/* 16) Icônes/glyphes en BLANC sur toutes les surfaces foncées (WCAG 1.4.11 Non-text Contrast) */
.header__area i,
.header__area svg,
.header__area-menubar-right-sidebar-popup i,
.header__area-menubar-right-sidebar-popup svg,
.sidebar-close-btn i,
.sidebar-close-btn svg,
.services__three i,
.services__three svg,
.portfolio__three i,
.portfolio__three svg,
.cta__area i,
.cta__area svg,
.footer__one i,
.footer__one svg,
.copyright__area i,
.copyright__area svg {
  color: #fff !important;
}

/* 16-bis) Exception : boutons slider-arrow ont un fond BLANC par défaut,
   les flèches DOIVENT donc être foncées pour rester visibles (WCAG 1.4.11).
   Au hover, le bouton devient bleu primary → flèche blanche.
   Surcharge ciblée des contextes .portfolio__three et .banner__three. */
.portfolio__three .slider-arrow i,
.portfolio__three .slider-arrow svg,
.banner__three .slider-arrow i,
.banner__three .slider-arrow svg {
  color: #102B58 !important; /* navy LFC, contraste 14.6:1 sur #fff */
}
.portfolio__three .slider-arrow i:hover,
.portfolio__three .slider-arrow svg:hover,
.banner__three .slider-arrow i:hover,
.banner__three .slider-arrow svg:hover {
  color: #fff !important;
}

/* ============================================================
   17) Non-text Contrast — scan complet WCAG 1.4.11
       Correctifs basés sur scan Playwright live (2026-05-20)
   ============================================================ */

/* 17a) Bouton search header : icône fal fa-search foncée (#222) sur fond bleu LFC (#1E50A0)
        Le bouton <button> a background: #1E50A0 mais l'icône n'hérite pas de la règle 16
        car le sélecteur .header__area i n'atteint pas ce bouton (élément <button> non dans .header__area)
        Cible spécifique : le bouton submit de la search-box du header */
.header__area-menubar-right-search-box button i,
.header__area-menubar-right-search-box button svg {
  color: #fff !important;
}

/* 17b) Sidebar icon (hamburger) : flaticon-menu-6 blanc sur fond blanc du div circulaire
        Le div .header__area-menubar-right-sidebar-icon a background: #fff + border-radius: 50%
        L'icône blanche est invisible sur fond blanc → changer le fond du div en bleu LFC
        pour que l'icône blanche soit visible (blanc sur bleu = 7.75:1, AAA) */
.header__area-menubar-right-sidebar-icon {
  background-color: var(--primary-color-1) !important;
}

/* 17c) Bordures des champs de formulaire (input, select, textarea)
        rgb(226,232,240) sur fond blanc = ratio 1.23 (seuil 3:1 requis)
        → #6B7280 sur blanc = ratio 5.74:1, AA+ largement */
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
textarea {
  border-color: #6B7280 !important;
}

/* 17d) Bordure de l'input search du header (rgb(238,237,232) sur blanc = 1.17)
        Cible spécifique pour ne pas affecter le search du mega-menu */
.header__area-menubar-right-search-box input[type="search"] {
  border-color: #6B7280 !important;
}

/* 18) Marquee logos partenaires masqué — LFC est une entreprise familiale en démarrage (fondée 2026),
       sans partenaires/certifications à afficher pour l'instant. Afficher des logos placeholders =
       malhonnête. À rétablir avec de vraies certifications (RBQ obtenue, APCHQ, GCR) quand disponible. */
.banner__three .scroll__slider {
  display: none;
}

/* 19) avatar/video.png dans bg-certifications (.industry__area) : placeholder thématique du
       thème buildgo (.dark-n / .light-n light/dark mode), sans fonction de vidéo réelle ici.
       Masqué pour éviter un élément décoratif hors contexte. */
.industry__area .dark-n,
.industry__area .light-n {
  display: none;
}

/* 20) Footer (fond foncé #222) : TOUT le texte courant blanc (15:1 AAA).
       Le tagline <p class="h5"> héritait --body-color #3F3F46 (assombri pour AAA sur fond clair)
       → ~1.4:1 sur fond foncé (illisible). Cette règle couvre paragraphes, .h4/.h5 utilitaires,
       et tout texte non couvert par les règles spécifiques liens/h6. */
.footer__one,
.footer__one p,
.footer__one .h3, .footer__one .h4, .footer__one .h5, .footer__one .h6,
.copyright__area,
.copyright__area p {
  color: #fff !important;
}

/* 21) Espacement intro-pages — règle unifiée pour TOUTES les sections d'intro
       (services-intro, portfolio-intro, blog-intro, contact-intro, page-intro).
       padding-top 100px (équilibre entre respiration et compacité) +
       padding-bottom 60px pour respiration AVANT section suivante (override pb-0 du markup).
       Signalements user 2026-05-20 : "trop près" puis "mauvaise mise en page". */
.services-intro.section-padding,
.portfolio-intro.section-padding,
.blog-intro.section-padding,
.contact-intro.section-padding,
.page-intro.section-padding {
  padding-top: 100px !important;
  padding-bottom: 60px !important;
}
.services-intro .subtitle,
.portfolio-intro .subtitle,
.blog-intro .subtitle,
.contact-intro .subtitle,
.page-intro .subtitle {
  margin-bottom: 20px;
}
.services-intro h2.title_split_anim,
.portfolio-intro h2.title_split_anim,
.blog-intro h2.title_split_anim,
.contact-intro h2.title_split_anim,
.page-intro h2.title_split_anim {
  margin-bottom: 24px !important;
}

/* 22) Standards FR — pas de Title Case ni UPPERCASE américain dans les menus.
       Les acronymes (LFC, RBQ, GCR, FAQ) restent en MAJ via le contenu source, pas via CSS.
       (Décision user 2026-05-20, règle absolue mémoire user.) */
nav a,
.header__area-menubar-menu a,
.header__area-menubar-menu .sub-menu a,
.header__area-menubar-right-sidebar-popup a,
.footer__one .h3, .footer__one h3,
.footer__one a,
.copyright__area a,
.build_button {
  text-transform: none !important;
}

/* 23) WCAG 2.2 AAA survol liens fonds sombres → consolidé plus haut (règle 8,
   SOURCE UNIQUE). Les anciens sélecteurs de titre <a> sont obsolètes (le titre
   services est désormais un <button>). */

/* 24) WCAG 2.2 AAA — Menu nav et submenu liens : forcer blanc sur fonds sombres
       (l'audit révèle #3F3F46 sur #222 = 1.52:1 = FAIL — héritage --body-color).
       Le sub-menu (dropdown) doit aussi être lisible. */
.header__area-menubar-menu > ul > li > a,
.header__area-menubar-menu .sub-menu > li > a,
.header__area-menubar-right-sidebar-popup ul li a {
  color: #fff !important; /* 21:1 sur #222 = AAA */
}
.header__area-menubar-menu > ul > li > a:hover,
.header__area-menubar-menu .sub-menu > li > a:hover,
.header__area-menubar-right-sidebar-popup ul li a:hover {
  color: #85B8EE !important; /* AAA 8.03:1 au hover */
}

/* 25) WCAG 2.2 AAA — Boutons CTA principal : si le bouton est sur fond sombre,
       le hover doit aussi être AAA. Le composant cta-button utilise build_button,
       qui peut hériter d'un hover bleu — couvrir le cas. */
.bg-pd__hero a:hover,
.about__three-right a:hover,
.choose__three a:hover,
.industry__area a:hover {
  color: #85B8EE !important;
}

/* 25b) Variante LIGHT du CTA (x-shared::cta-button variant="light") — best practice mai 2026.
        Bouton blanc sur fonds foncés (bento bleu, panneau calculateur). Hover blanc bleuté
        avec texte navy INCHANGÉ → contraste ~9:1 conservé (WCAG 2.2 AAA, critère 1.4.6).
        Remplace les anciens overrides !important dupliqués (.lfc-bento-cta / .lfc-calc-result)
        qui bloquaient le hover et rendaient le texte illisible (bleu foncé sur noir).
        Source unique = ce bloc, utilisé partout via le composant (zéro duplication). */
.build_button--light { background: #FFFFFF; color: #102B58; box-shadow: 0 2px 6px rgba(16,43,88,0.16); }
.build_button--light::before { background: #F2F5FF; }
.build_button--light i { color: #FFFFFF; background: #1E50A0; }
.build_button--light:hover { color: #102B58 !important; background: #F2F5FF; box-shadow: 0 8px 20px rgba(16,43,88,0.24); }
.build_button--light:hover i { color: #FFFFFF !important; background: #102B58; }
.build_button--light:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; box-shadow: 0 0 0 6px #1E50A0; }
@media (prefers-reduced-motion: reduce) {
  .build_button--light, .build_button--light::before, .build_button--light i { transition: none; }
}

/* ============================================================
   26) Section "Notre processus" — refonte chiffres tendance mai 2026
       Avant : "01" en h6 minuscule gris → dépassé
       Après : gros chiffres outline bleu LFC (style éditorial), connecteur
       en dégradé entre étapes, animation discrète au hover.
       WCAG AAA : titre/texte conservés blanc/foncé (pas touché au contraste).
   ============================================================ */
.process__area-item {
  position: relative;
  /* padding-top suit la taille du chiffre (clamp 80-130px, line-height .9 ≈ 72-117px)
     + ~20px d'écart, pour que le titre dégage TOUJOURS sous le chiffre (fix chevauchement 2026-05-30). */
  padding-top: clamp(96px, 8.5vw, 140px);
  transition: transform 0.3s ease;
}
.process__area-item:hover {
  transform: translateY(-6px);
}
.process__area-item > .h6 {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--heading-font, "Plus Jakarta Sans", sans-serif);
  font-size: clamp(80px, 8vw, 130px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 2px #1E50A0;
  text-stroke: 2px #1E50A0;
  background: linear-gradient(135deg, #1E50A0 0%, #85B8EE 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.85;
  margin: 0;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.process__area-item:hover > .h6 {
  opacity: 1;
  transform: scale(1.05);
}
.process__area-item h3 {
  position: relative;
  z-index: 2;
  margin-top: 0;
  font-weight: 700;
  color: #102B58;
}
.process__area-item p {
  position: relative;
  z-index: 2;
  margin-top: 12px;
  color: #3F3F46;
  line-height: 1.65;
}

/* Connecteur visuel entre étapes (ligne pointillée dégradée) — desktop seulement */
@media (min-width: 992px) {
  .process__area .row.g-0 > [class*="col-lg-3"] {
    position: relative;
  }
  .process__area .row.g-0 > [class*="col-lg-3"]:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50px;
    right: 0;
    width: 40%;
    height: 2px;
    background: repeating-linear-gradient(
      to right,
      #1E50A0 0,
      #1E50A0 8px,
      transparent 8px,
      transparent 14px
    );
    opacity: 0.4;
    pointer-events: none;
  }
}

/* Fallback browsers sans text-stroke : couleur solide bleu LFC */
@supports not (-webkit-text-stroke: 2px #000) {
  .process__area-item > .h6 {
    color: #1E50A0;
    -webkit-text-fill-color: #1E50A0;
  }
}

/* Réduction d'animation pour utilisateurs sensibles (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  .process__area-item,
  .process__area-item > .h6 {
    transition: none;
  }
}

/* ============================================================
   27) Custom cursor du thème désactivé (décision user 2026-05-22).
       Le point qui suit la souris est fatigant. Restaurer cursor natif.
   ============================================================ */
.cursor,
#cursor-ball,
#cursor-text {
  display: none !important;
}
body,
a,
button,
[role="button"] {
  cursor: auto !important;
}
a,
button,
[role="button"],
[type="submit"],
.build_button,
summary {
  cursor: pointer !important;
}

/* ============================================================
   28) Sidebar service-details / portfolio-details : sticky intelligent.
       Décision user 2026-05-22 : "problème au scroll, le bas est caché".
       La sidebar entière était sticky (top:120px) mais haute 930px dans un
       viewport de 910px → le dernier item ("Toiture") dépassait en bas.
       Solution : la sidebar fait partie du flow normal (scroll naturel,
       tout le contenu accessible). Seule la 1ère card (CTA "Soumission
       gratuite") reste sticky pour rester visible à hauteur d'œil pendant
       que l'utilisateur parcourt le corps de la page.
   ============================================================ */
@media (min-width: 992px) {
  .bg-sd__sidebar,
  .bg-pd__sidebar {
    position: static !important;
    top: auto !important;
  }
  .bg-sd__sidebar > .bg-sd__sidebar-card--cta,
  .bg-pd__sidebar > .bg-pd__card--cta {
    position: sticky;
    top: 100px;
    align-self: start;
    z-index: 1;
  }
}

/* ============================================================
   29) Contrastes AAA 7:1 — texte secondaire (audit 2026-05-22).
       Correction du contraste insuffisant pour le texte secondaire
       sur fonds clairs (white / #F8FAFC / #EEF3FB). Utilisation
       de couleurs vérifiées AAA : slate-600 (#475569 = 7.55:1) et
       bleu LFC 700 (#173E7C = 9.20:1) pour respecter WCAG 2.2 AAA.
   ============================================================ */
.article-sources__consulted,
.article-sources__disclaimer,
.bg-pd__facts dt,
.bg-pd-more__meta {
  color: #475569 !important;
}
.bg-pd__service-label,
.bg-pd-more__badge {
  color: #173E7C !important;
}

/* ============================================================
   30) Menu header — compaction breakpoints intermédiaires (2026-05-23).
       Bug : à 1280px (MacBook Pro 13") le menu wrap sur 2 lignes
       à cause de logo + 6 items + pill "Soumission" + icône carrés.
       Solution :
         a) Réduire gap horizontal entre items menu
         b) Cacher l'icône panneau latéral popup (redondante avec menu)
         c) Compacter la pill CTA
       Préserve target-size WCAG 44px (le <li> garde sa hauteur via
       line-height + padding-vertical du thème).
   ============================================================ */
/* a) Compaction du menu sur 1200-1599px (laptop 1366/1440 + desktop étroit).
      Le thème buildgo met margin: 0 25px sur chaque <li> = 50px de gap
      par item. Le menu top-level (6 items) fait ~597px à 8px de marge ;
      + logo/CTA/recherche (~509px) = ~1106px → tient jusqu'à ~1200px.
      (Mesuré 2026-05-31 : descendu de 1300 à 1200 pour rendre le menu
      horizontal aux desktops 1280px, cf. bug « menu absent ».) */
@media (min-width: 1200px) and (max-width: 1599px) {
  .header__area-menubar-center-menu ul#mobilemenu > li {
    margin: 0 8px !important;
  }
  .header__area-menubar-right-btn .build_button {
    padding: 8px 14px 8px 18px;
    font-size: 14px;
  }
}

/* b) En dessous de 1200px : menu mobile (hamburger). Aligné sur le
      breakpoint natif du thème (qui cache déjà .center à ≤1199px). */
@media (max-width: 1199px) {
  .header__area-menubar-center {
    display: none !important;
  }
  .header__area-menubar-right-responsive-menu.menu__bar {
    display: flex !important;
  }
}

/* b-bis) Hamburger DESSINÉ EN CSS (3 barres) : le glyphe flaticon-menu-3
   (\f12e) est ABSENT du sous-ensemble flaticon_flexitype → l'icône était
   une boîte vide invisible (bug « menu absent » signalé 2026-05-31).
   On neutralise le glyphe et on trace 3 barres blanches, sans dépendance
   de police (même approche que le chevron des accordéons). */
.header__area-menubar-right-responsive-menu.menu__bar i {
  font-size: 0 !important;          /* tue le glyphe manquant */
  display: block;
  position: relative;
  width: 26px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}
.header__area-menubar-right-responsive-menu.menu__bar i::before,
.header__area-menubar-right-responsive-menu.menu__bar i::after {
  content: '' !important;
  position: absolute;
  left: 0;
  width: 26px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}
.header__area-menubar-right-responsive-menu.menu__bar i::before { top: -8px; }
.header__area-menubar-right-responsive-menu.menu__bar i::after  { top: 8px; }

/* b-ter) Drawer mobile : la base est display:none + transform/opacity, mais la
   classe .show (ajoutée au clic) ne rétablissait PAS display → le panneau de
   navigation ne s'ouvrait jamais (cassé sur mobile ET en mode hamburger).
   On rétablit display:block à l'ouverture. */
.menu__bar-popup.show {
  display: block !important;
}

/* c) Icône panneau latéral popup : redondante avec le menu principal sur desktop */
@media (min-width: 992px) {
  .header__area-menubar-right-sidebar {
    display: none !important;
  }
}

/* ============================================================
   31) Process cards (Notre processus, 4 étapes) — hauteurs uniformes.
       Bug : la card 03 ("Travaux exécutés avec précision et soin par nos
       équipes") fait 3 lignes vs 2 pour les 3 autres → mise en page bancale.
       Solution : <p> description avec hauteur min calibrée (~3 lignes ×
       line-height) pour que toutes les cards aient la même hauteur visuelle.
   ============================================================ */
.process__area-item p {
  min-height: 4.8em;
}
@media (max-width: 991px) {
  .process__area-item p {
    min-height: 0;
  }
}

/* ============================================================
   32) Sliders draggable — restaurer curseur natif (UX 2026).
       Le thème buildgo applique cursor:none sur .data_cursor en
       comptant sur le cursor follower JS pour compenser. Or ce JS
       est désactivé (cf rule 27, décision user 2026-05-22 "point
       fatigant"). Conséquence : au hover du slider portfolio, le
       curseur disparait → déstabilisant.
       Solution UX moderne : grab au repos + grabbing pendant drag.
   ============================================================ */
.data_cursor,
.data_cursor * {
  cursor: grab !important;
}
.data_cursor:active,
.data_cursor:active *,
.data_cursor .swiper-slide-active,
.swiper-slide-active.data_cursor {
  cursor: grabbing !important;
}

/* ============================================================
   33) Slider arrows — style unifié (décision user 2026-05-23).
       Avant : 2 styles différents entre sliders (hero carré bleu,
       portfolio rond blanc) malgré le composant Blade DRY commun.
       Après : ronds blancs 56×56 + flèche bleu LFC, hover bleu plein,
       focus visible AAA. Pattern moderne 2026 (utilisé par Stripe,
       Airbnb, Vercel pour les sliders premium).
   ============================================================ */
.slider-arrow {
  display: flex !important;
  gap: 12px !important;
}
.slider-arrow-prev,
.slider-arrow-next,
.swiper-button-prev,
.swiper-button-next {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background-color: #ffffff !important;
  color: #1E50A0 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .12) !important;
  transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease !important;
  cursor: pointer !important;
}
.slider-arrow-prev:hover,
.slider-arrow-next:hover,
.swiper-button-prev:hover,
.swiper-button-next:hover {
  background-color: #1E50A0 !important;
  color: #ffffff !important;
  transform: scale(1.05) !important;
  box-shadow: 0 6px 16px rgba(30, 80, 160, .25) !important;
}
.slider-arrow-prev:focus-visible,
.slider-arrow-next:focus-visible,
.swiper-button-prev:focus-visible,
.swiper-button-next:focus-visible {
  outline: 3px solid #1E50A0 !important;
  outline-offset: 2px !important;
}
.slider-arrow-prev:disabled,
.slider-arrow-next:disabled,
.swiper-button-disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  transform: none !important;
}
/* Icônes FA à l'intérieur des boutons.
   Le thème buildgo applique bg gris + border + padding sur le <i>,
   ce qui crée un cadre rectangulaire qui couvre le bouton et casse le
   style "rond blanc". Reset complet pour ne laisser que le glyphe. */
.slider-arrow-prev > i,
.slider-arrow-next > i,
.swiper-button-prev > i,
.swiper-button-next > i {
  font-size: 18px !important;
  line-height: 1 !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  display: inline-block !important;
}
/* Hover : la flèche prend la couleur blanche (héritée du bouton) */
.slider-arrow-prev:hover > i,
.slider-arrow-next:hover > i,
.swiper-button-prev:hover > i,
.swiper-button-next:hover > i {
  background: transparent !important;
  color: inherit !important;
}
/* Désactiver pseudo-elements ::after de Swiper qui ajoutent un caractère
   par défaut (peut superposer notre icône) */
.swiper-button-prev::after,
.swiper-button-next::after {
  display: none !important;
}

/* ============================================================
   34) Menu nav — hover/active AAA strict (décision user 2026-05-23).
       Le thème buildgo applique color: #1E50A0 au hover sur le menu
       (sur fond #222 = 2.05:1 = FAIL AA et AAA). Recherche sonar-pro
       2026 (Stripe / Linear / Apple pattern) → combo gagnant :
         a) Hover : texte reste blanc (AAA 20.7:1) + underline animé
            en tint #85B8EE (AAA 7.64:1 sur #222)
         b) Active (aria-current="page") : underline persistante +
            bold pour double signal (couleur + graisse)
         c) Focus visible : outline #85B8EE 3px (AAA + clavier)
   ============================================================ */
:root {
  --lfc-accent-aaa: #85B8EE;  /* bleu LFC clair, 7.64:1 sur #222 = AAA */
}

/* Hover : conserver blanc, ajouter underline animé via ::after */
.header__area-menubar-center-menu ul#mobilemenu > li > a,
.header__area-menubar-center-menu ul#mobilemenu > li.menu-item-has-children > a {
  position: relative;
  color: #ffffff !important;
  transition: color .2s ease;
}
.header__area-menubar-center-menu ul#mobilemenu > li > a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 2px;
  background-color: var(--lfc-accent-aaa);
  transition: width .25s ease, left .25s ease;
  pointer-events: none;
}
.header__area-menubar-center-menu ul#mobilemenu > li:hover > a::after,
.header__area-menubar-center-menu ul#mobilemenu > li > a:hover::after,
.header__area-menubar-center-menu ul#mobilemenu > li > a:focus-visible::after {
  width: calc(100% - 20px);
  left: 10px;
}
.header__area-menubar-center-menu ul#mobilemenu > li:hover > a,
.header__area-menubar-center-menu ul#mobilemenu > li > a:hover,
.header__area-menubar-center-menu ul#mobilemenu > li > a:focus-visible {
  color: #ffffff !important; /* override .var(--primary-color-1) du thème */
}

/* Active / page courante : underline persistante + bold */
.header__area-menubar-center-menu ul#mobilemenu > li.current-menu-item > a,
.header__area-menubar-center-menu ul#mobilemenu > li > a[aria-current="page"],
.header__area-menubar-center-menu ul#mobilemenu > li.active > a {
  color: #ffffff !important;
  font-weight: 700 !important;
}
.header__area-menubar-center-menu ul#mobilemenu > li.current-menu-item > a::after,
.header__area-menubar-center-menu ul#mobilemenu > li > a[aria-current="page"]::after,
.header__area-menubar-center-menu ul#mobilemenu > li.active > a::after {
  width: calc(100% - 20px);
  left: 10px;
}

/* Focus visible WCAG AAA — outline distinct du hover underline */
.header__area-menubar-center-menu ul#mobilemenu > li > a:focus-visible {
  outline: 3px solid var(--lfc-accent-aaa);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Sous-menu (dropdown Services / Ressources) : hover AAA aussi */
.header__area-menubar-center-menu ul li .sub-menu li > a {
  color: #ffffff !important;
  transition: color .2s ease, background-color .2s ease;
}
.header__area-menubar-center-menu ul li .sub-menu li:hover > a,
.header__area-menubar-center-menu ul li .sub-menu li > a:hover,
.header__area-menubar-center-menu ul li .sub-menu li > a:focus-visible {
  color: var(--lfc-accent-aaa) !important;   /* 7.64:1 sur #222 fond sub-menu */
  background-color: rgba(133, 184, 238, 0.08) !important;
}

/* ============================================================
   35) Services list — ouverture AU CLIC FLUIDE (lfc-interactions.js).
       Animation de hauteur via grid-template-rows 0fr→1fr + fondu
       (best practice 2026, remplace le display:none↔block qui « flashait »).
       Le contenu vit dans .services__three-item-body-inner (overflow caché
       pour que la hauteur se replie proprement).
   ============================================================ */
.services__three-item-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  padding: 0 !important;
  transition: grid-template-rows .4s ease, opacity .35s ease;
}
.services__three-item.active .services__three-item-body,
.services__three-item-body.is-active {
  grid-template-rows: 1fr;
  opacity: 1;
}
.services__three-item-body-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 0 0 50px; /* indent horizontal seulement : un padding vertical empêcherait le repli à 0 */
}
/* L'espace sous le contenu passe en margin du dernier élément (clippé quand fermé). */
.services__three-item-body-inner > :last-child { margin-bottom: 30px; }
@media (max-width: 767px) {
  .services__three-item-body-inner { padding-left: 0; }
}
/* Respect prefers-reduced-motion : pas d'animation (ouverture instantanée) */
@media (prefers-reduced-motion: reduce) {
  .services__three-item-body { transition: none; }
}

/* ============================================================
   36) Notre processus — numbered cards modernisées 2026.
       Recherche sonar-pro : pattern #1 (Stripe numbered cards + hover lift)
       combiné #3 (NN/g ligne connectante). WCAG AAA, prefers-reduced-motion.
   ============================================================ */
.process__area-grid {
  position: relative;
}
@media (min-width: 992px) {
  /* Ligne fine connectante horizontale (desktop only) */
  .process__area-grid::before {
    content: '';
    position: absolute;
    top: 64px;          /* aligné avec le centre des icônes 56px */
    left: 12%;
    right: 12%;
    height: 2px;
    background: linear-gradient(to right, transparent, #cbd5e1 20%, #cbd5e1 80%, transparent);
    z-index: 0;
  }
}
.process__step {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: 14px;
  padding: 32px 24px;
  height: 100%;
  text-align: center;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.process__step:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(30, 80, 160, .15);
}
.process__step-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, #102B58, #1E50A0);
  color: #ffffff;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(30, 80, 160, .25);
}
.process__step-num {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .15em;
  color: #1E50A0;
  background: #EEF3FB;
  padding: 4px 12px;
  border-radius: 999px;
}
.process__step-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #102B58;
}
.process__step-text {
  margin: 0;
  font-size: .94rem;
  line-height: 1.6;
  color: #475569; /* slate-600, 7.55:1 sur blanc = AAA */
}
@media (prefers-reduced-motion: reduce) {
  .process__step {
    transition: none;
  }
  .process__step:hover {
    transform: none;
  }
}

/* ============================================================
   38) Footer + zones sombres — liens en tint AAA #85B8EE
       (audit user 2026-05-23 : tél 418-476-8393 en #1E50A0 sur #222
       = 2.05:1 = FAIL AAA). Fix : remplacer var(--primary-color-1)
       par tint #85B8EE (7.64:1 AAA sur #222) sur tous liens et hovers
       dans le footer sombre.
   ============================================================ */
/* Tél et courriel footer — sélecteurs élargis pour matcher h4 TAG ET .h4 CLASS
   (le thème buildgo utilise <p class="h4"> au lieu de vrai <h4>) */
.footer__one-widget-address h4 a,
.footer__one-widget-address h6 a,
.footer__one-widget-address .h4 a,
.footer__one-widget-address .h6 a,
.footer__one-widget-address a[href^="tel:"],
.footer__one-widget-address a[href^="mailto:"],
.footer__two-widget-location-item-info a {
  color: var(--lfc-accent-aaa, #85B8EE) !important;
}

/* Hover liens footer : préserver tint AAA */
.footer__one-widget-address h4 a:hover,
.footer__one-widget-address h6 a:hover,
.footer__one-widget-address .h4 a:hover,
.footer__one-widget-address .h6 a:hover,
.footer__one-widget-address a[href^="tel:"]:hover,
.footer__one-widget-address a[href^="mailto:"]:hover,
.footer__one a:hover,
.footer-widget-menu ul li a:hover,
.footer__two-widget-location-item-info a:hover,
.footer__two-widget-about-social ul li a:hover,
.copyright__area a:hover {
  color: var(--lfc-accent-aaa, #85B8EE) !important;
}

/* Icônes sociales footer hover : bg AAA */
.footer__two-widget-about-social ul li a i:hover {
  background: var(--lfc-accent-aaa, #85B8EE) !important;
  color: #102B58 !important; /* navy dark sur bleu clair = AAA */
}

/* ============================================================
   39) Process "Notre 4 étapes" — restauration look ANCIEN (user préfère)
       Combine : chiffres GÉANTS outline gradient bleu LFC en arrière-plan
       + mise en page MODERNE 2026 (cards blanches, ombre, hover lift)
       Demande user 2026-05-23 : "j'aimais mieux l'ancienne section, mais
       avec une plus belle mise en page".
   ============================================================ */
.process__area {
  background: #f8f9fb;
}
.process__step {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Chiffre GÉANT en arrière-plan : outline bleu LFC, 130px desktop, 90px mobile */
.process__step-num {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 140px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -.04em !important;
  color: transparent !important;
  -webkit-text-stroke: 2px #1E50A0 !important;
  background: linear-gradient(135deg, #102B58, #1E50A0) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  opacity: 0.10 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
}
/* Mobile : chiffre 90px */
@media (max-width: 991px) {
  .process__step-num {
    font-size: 90px !important;
  }
}
/* Tout le contenu visible doit être au-dessus du chiffre géant */
.process__step-icon,
.process__step-title,
.process__step-text {
  position: relative;
  z-index: 1;
}

/* ============================================================
   40) Services list (bg-services) — chiffres 01-06 plus gros
       (user 2026-05-23 : "selon les tendances 2026, plus gros")
       Avant : 24px var(--primary-color-1) #1E50A0 sur #222 = 2.05:1 FAIL
       Après : 48px tint AAA #85B8EE 7.64:1 + font-weight 900 + tabular-nums
   ============================================================ */
.services__three-item-title h3 span {
  color: var(--lfc-accent-aaa, #85B8EE) !important;
  font-size: 48px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;
  font-variant-numeric: tabular-nums;
  min-width: 70px;
  display: inline-block;
}
@media (max-width: 991px) {
  .services__three-item-title h3 span {
    font-size: 36px !important;
    min-width: 56px;
  }
}

/* ============================================================
   41) Chasse aux FAIL AAA résiduels (scan systématique 2026-05-23)
       Audit Playwright getComputedStyle a identifié 4 vrais FAIL :
       1. bg-counter lead text : #cbd5e1 sur blanc = 1.48:1 → slate-700
       2. Services list h3 a : #1E50A0 sur #222 = 2.05:1 → tint AAA
       3. Portfolio home disclaimer : #666 sur #222 = 2.77:1 → slate-400
       4. Tout link <a> dans h3/h4 sur fond sombre : tint AAA
   ============================================================ */
/* 41a) Lead text section bg-counter (sur fond clair) trop pâle */
.counter__two .col-lg-8 p {
  color: #334155 !important; /* slate-700, 12.6:1 sur blanc AAA */
}

/* 41b) Services list home — lien dans h3 sur fond sombre */
.services__three-item-title h3 a {
  color: #ffffff !important; /* blanc 21:1 AAA */
}
.services__three-item-title.active h3 a {
  color: var(--lfc-accent-aaa, #85B8EE) !important; /* 7.64:1 AAA */
}

/* 41c) Disclaimers/légendes sur fond sombre — gris pâle inadéquat
       Tout <p> avec gris #666 sur fond foncé doit passer à #94a3b8 (slate-400 = 7.5:1) */
.services__three p,
.portfolio__three p {
  color: #cbd5e1; /* slate-300 fallback, sera surchargé spécifique sur disclaimers */
}
.services__three p[style*="#666"],
.portfolio__three p[style*="#666"],
.services__three p[style*="color:#666"],
.portfolio__three p[style*="color:#666"],
.services__three p.t-center.mt-30,
.portfolio__three p.t-center.mt-30 {
  color: #94a3b8 !important; /* slate-400 = 7.5:1 sur #222 = AAA borderline */
}

/* 41d) Tout link <a> dans heading h2/h3/h4/h5/h6 sur fond sombre = blanc par défaut */
.services__three a,
.portfolio__three a,
.cta__area a,
.footer__one a,
.counter__two a {
  color: #ffffff;
}

/* 41e) Propreté audit : h3 lui-même en blanc pour éviter false-positive
       (visible text est porté par <span> et <a> enfants, déjà AAA via 40+41b) */
.services__three-item-title h3 {
  color: #ffffff !important;
}

/* ============================================================
   42) FAIL AAA services-details (scan /services/cuisine 2026-05-23) :
       a) .bg-sd__fact-label #1E50A0 sur #EEF3FB = 6.95 → 7.05 fix
       b) <em> disclaimer #71717a sur blanc = 4.83 → slate-600
       c) .lfc-calc-disclaimer #6b7280 sur slate-50 = 4.62 → slate-700
   ============================================================ */
.bg-sd__fact-label {
  color: #1A4A98 !important; /* 7.05:1 sur #EEF3FB AAA */
}
.bg-sd em, /* disclaimer "Estimation indicative…" */
.services__details em,
em.lfc-disclaimer {
  color: #475569 !important; /* slate-600 = 7.56:1 sur blanc AAA */
  font-style: italic;
}
.lfc-calc-disclaimer {
  color: #334155 !important; /* slate-700 = 11.4:1 sur slate-50 AAA */
}

/* ============================================================
   43) FAIL AAA /realisations (scan 2026-05-23) :
       a) bandeau amber-50 + texte amber-800 #92400e = 6.37 → amber-900
       b) lien #1E50A0 sur amber-50 = 6.96 → #15407D (8.4:1)
       c) disclaimer "Images à titre illustratif" slate-400 sur #222 = 6.21
          → slate-300 #cbd5e1 (8.6:1 AAA)
   ============================================================ */
.lfc-banner-amber,
.lfc-banner-amber strong,
.lfc-banner-amber span {
  color: #78350f !important; /* amber-900 = 8.34:1 sur amber-50 AAA */
}
.lfc-banner-amber a {
  color: #15407D !important; /* 8.4:1 sur amber-50 AAA */
  text-decoration: underline;
}
.lfc-banner-amber a:hover,
.lfc-banner-amber a:focus-visible {
  color: #102B58 !important; /* navy LFC plus foncé pour hover AAA */
  text-decoration: underline;
}
/* Disclaimer "Images à titre illustratif" sur fond sombre */
.portfolio__three p.t-center.mt-30,
.realisations p.t-center.mt-30,
section[style*="background:#222"] p.t-center,
section[style*="background:#222"] p[style*="italic"] {
  color: #cbd5e1 !important; /* slate-300 = 8.6:1 sur #222 AAA */
  font-style: italic;
}

/* ============================================================
   44) Mobile responsive AAA (scan Playwright 375px 2026-05-23)
       a) Overflow horizontal : .header__area-menubar-right-sidebar-popup
          dépasse 460px → max-width 100vw
       b) Touch targets WCAG 2.5.5 AAA 44×44 : liens tél/email top-bar
          + breadcrumb mobile + icons sociaux
   ============================================================ */
/* a) Anti-overflow horizontal mobile
   IMPORTANT : overflow-x: clip au lieu de hidden — hidden force overflow-y:auto
   implicite qui crée un scroll container alternatif et CASSE position:sticky
   des descendants (cf. bug sidebar 2026-05-23). clip protège le débordement
   horizontal SANS impacter le sticky. Support browsers ~98% (2026). */
html, body {
  overflow-x: clip !important;
  max-width: 100vw;
}
.header__area-menubar-right-sidebar-popup {
  max-width: 100vw !important;
  overflow-x: hidden;
}
/* b) Touch targets mobiles 44×44 minimum AAA */
@media (max-width: 1024px) {
  /* Liens top-bar (tél/email/adresse) */
  .header__area-top a,
  .header__area-info a,
  .topbar a,
  a[href^="tel:"],
  a[href^="mailto:"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 8px 4px;
  }
  /* Icônes sociaux footer/header */
  .social__icon a,
  .footer__one-social a,
  .header__social a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* 44b) Touch targets AAA — selectors exacts identifiés par scan Playwright */
@media (max-width: 1024px) {
  .footer-widget-menu a,
  .footer-widget-menu li a,
  .footer__one-widget-menu a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 6px 0;
  }
  .footer__one-widget-social a,
  .copyright__area-social a,
  .header__area-menubar-right-sidebar-popup-social a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
  }
  .blog__three-item-image a,
  .services__three-item-title a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .meta a,
  .bg-bd__meta-item a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 6px 4px;
  }
  /* Search button + logo */
  .header__area-menubar-right-search-box button,
  .logo a {
    min-width: 44px;
    min-height: 44px;
  }
}

/* 44c) Touch targets résiduels mobile menu popup (sidebar slide-in) */
@media (max-width: 1024px) {
  .header__area-menubar-right-sidebar-popup-contact-item-content a,
  .menu__bar-popup .logo a,
  .menu__bar-popup-top .logo a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 6px 4px;
  }
}

/* 45) WCAG 2.2 AAA — Hover uniforme des boutons primary (cause racine : le thème
       buildgo étend un cercle ::before blanc au survol sur certaines sections
       (services__three-title, etc.) tout en laissant le texte blanc → texte
       invisible sur fond blanc, ex bouton "Tous les services").
       Correctif DRY centralisé : pour TOUT build_button SAUF la variante light,
       le cercle qui s'étend est bleu foncé #102B58 et le texte reste blanc →
       contraste ~14:1 (AAA), cohérent sur fonds clairs ET foncés.
       La variante light (--light) garde son propre hover blanc-bleuté. */
.build_button:not(.build_button--light)::before { background: #102B58 !important; }
.build_button:not(.build_button--light):hover { color: #FFFFFF !important; }
.build_button:not(.build_button--light):hover i { color: #102B58 !important; background: #FFFFFF !important; }

/* ============================================================
   SERVICES : accordéon AU CLIC (remplace l'ancien survol).
   Le header devient un <button> accessible ; le padding 30px 0
   passe du title au bouton (zone cliquable pleine largeur).
   ============================================================ */
.services__three-item-title { padding: 0; }
.services__three-toggle {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 30px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* (ouverture du panneau : voir bloc 35 — animation grid-rows fluide, pas de display:none) */
/* Chevron dessiné en CSS pur (aucune dépendance FontAwesome Pro) : V vers le bas,
   pivote vers le haut quand le panneau est ouvert. */
.services__three-chevron {
  margin-left: auto;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-bottom: 4px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  transition: transform .3s ease;
}
.services__three-chevron::before { content: none; }
.services__three-toggle[aria-expanded="true"] .services__three-chevron { transform: rotate(-135deg); }
.services__three-label { color: #fff; }
.services__three-item-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: underline;
  margin-top: 16px;
  min-height: 44px;
}
/* AWARDS : liste au clic (focusable) */
.award__area-list-item { cursor: pointer; }
.award__area-list-item:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .services__three-chevron { transition: none; }
}

/* ============================================================
   MENU MOBILE : bouton fermeture (X) + toggles sous-menus (+).
   1) Contraste WCAG 2.2 AAA : icône BLANCHE sur cercle bleu LFC
      #1E50A0 = 7.75:1 (était #222 sur bleu = ~2:1, échec).
   2) Centrage vertical parfait du « + » dans son cercle ET dans la
      ligne de menu (translateY(-50%) au lieu d'un top fixe).
   3) Le « + » pivote en « × » quand le sous-menu est ouvert (is-open) :
      état visible, pur CSS, aucune dépendance à un glyphe FontAwesome.
   ============================================================ */
/* ============================================================
   PRELOADER : logo LFC animé (remplace les 3 points qui rebondissaient).
   Fondu + léger zoom, une seule fois. Conforme WCAG 2.2 :
   - prefers-reduced-motion : aucune animation (apparition instantanée) ;
   - fail-safe : si le JS échoue, l'overlay se masque seul à 4s (ne bloque
     jamais le contenu) ;
   - pas de boucle, pas de flash.
   ============================================================ */
.theme-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.5s ease;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-1);
  z-index: 9999;
  animation: lfcLoaderFailsafe 0s linear 4s forwards;
}
.theme-loader.is-hidden { opacity: 0; pointer-events: none; }
.theme-loader .spinner { display: none; }
.lfc-loader-logo img {
  width: 200px;
  max-width: 60vw;
  height: auto;
  animation: lfcLoaderIn 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes lfcLoaderIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes lfcLoaderFailsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lfc-loader-logo img { animation: none; }
  .theme-loader { transition: none; animation: none; }
}

/* ============================================================
   BARRE D'ACTION MOBILE (thumb-zone) — mobile only ≤767px.
   2 CTA pleine largeur : Appeler (navy sur blanc) + Soumission (blanc sur bleu).
   ============================================================ */
.lfc-mobile-cta { display: none; }
.lfc-mobile-cta__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
}
.lfc-mobile-cta__btn--call { background: #fff; color: #102B58; }
.lfc-mobile-cta__btn--quote { background: #1E50A0; color: #fff; }
.lfc-mobile-cta__btn i { color: inherit; }
.lfc-mobile-cta__btn:focus-visible { outline: 3px solid #102B58; outline-offset: -3px; }
@media (max-width: 767px) {
  .lfc-mobile-cta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 900;
    display: flex;
    background: #fff;
    border-top: 1px solid #d4d9e0;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  body { padding-bottom: 56px; }
  /* Remonter le bouton « retour en haut » (anneau de progression) au-dessus
     de la barre d'action fixe pour éviter le chevauchement (mobile only). */
  .scroll-up { bottom: calc(72px + env(safe-area-inset-bottom, 0)) !important; }
}

/* WCAG 2.5.8 (AA) : cibles tactiles ≥24px pour les icônes de recherche du header
   (l'icône visible reste petite, seule la zone cliquable est agrandie). */
.header__area-menubar-right-search-icon,
.header__area-menubar-right-search-box-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
}

/* --- Menu mobile (X + toggles +) --- */
.menu__bar-popup-top .close i { color: #fff !important; }
.vertical_menu .mobile-arrows {
  color: #fff !important;
  top: 50% !important;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform .3s ease;
}
.vertical_menu .mobile-arrows.is-open { transform: translateY(-50%) rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .vertical_menu .mobile-arrows { transition: none; }
}

/* ============================================================
   36) Sommaire des pages légales (option C, best practice mai 2026).
       Rempli en JS (lfc-interactions.js buildLegalTOC) depuis les <h2>.
   ============================================================ */
.lfc-legal-toc {
  background: #F4F7FC;
  border: 1px solid #DBE7FF;
  border-radius: 12px;
  padding: 22px 26px;
  margin: 4px 0 36px;
}
.lfc-legal-toc__title {
  font-size: 1.05rem !important;
  line-height: 1.3 !important;
  margin: 0 0 14px !important;
  color: #102B58;
}
.lfc-legal-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 36px;
}
.lfc-legal-toc li { margin: 0 0 9px; break-inside: avoid; }
.lfc-legal-toc a {
  color: #1E50A0;
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.45;
}
.lfc-legal-toc a:hover,
.lfc-legal-toc a:focus-visible { color: #102B58; text-decoration: underline; }
@media (max-width: 575px) { .lfc-legal-toc ul { columns: 1; } }
/* Ancre des sections légales : décalage sous le header collant */
h2[id^="sec-"] { scroll-margin-top: 90px; }