body.theme-light {
  background-color: var(--tj-color-grey-1);
  color: var(--tj-color-text-body);
}

body.theme-light #smooth-content,
body.theme-light .site-main {
  background: transparent;
}

body.theme-light .bg-shape-1 img,
body.theme-light .bg-shape-2 img {
  opacity: 0.08 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

body.theme-light .tj-about-section-2,
body.theme-light .tj-working-process,
body.theme-light .tj-contact-area,
body.theme-light .tj-contact-section-2,
body.theme-light .h9-choose,
body.theme-light .h8-about,
body.theme-light .h8-funfact,
body.theme-light .h8-testimonial {
  background-color: var(--tj-color-theme-bg) !important;
}

body.theme-light .legal-content {
  background-color: var(--tj-color-common-white) !important;
}

body.theme-light section[style*="background:#060f14"],
body.theme-light section[style*="background: #060f14"],
body.theme-light section[style*="background:#060f14;"],
body.theme-light section[style*="background-color:#060f14"],
body.theme-light section[style*="background-color: #060f14"] {
  background: var(--tj-color-common-white) !important;
}

body.theme-light section[style*="background:#07131a"],
body.theme-light section[style*="background: #07131a"],
body.theme-light section[style*="background:#07131a;"],
body.theme-light section[style*="background-color:#07131a"],
body.theme-light section[style*="background-color: #07131a"] {
  background: var(--tj-color-theme-bg) !important;
}

body.theme-light .tj-about-section-2 .sec-title,
body.theme-light .tj-working-process .sec-title,
body.theme-light .tj-choose-section .sec-title,
body.theme-light .tj-contact-area .sec-title,
body.theme-light .tj-contact-section-2 .sec-title,
body.theme-light .h9-choose .sec-title,
body.theme-light .h8-about .sec-title,
body.theme-light .h8-funfact .sec-title,
body.theme-light .h8-testimonial .sec-title,
body.theme-light .about-content-area .title,
body.theme-light .mission-vision-box .title,
body.theme-light .choose-box .title,
body.theme-light .process-item .title,
body.theme-light .h9-choose-box .title,
body.theme-light .contact-title,
body.theme-light .contact-form .title,
body.theme-light .h8-funfact-item .counter-title,
body.theme-light .h8-testimonial-wrapper .testimonial-item .title,
body.theme-light .h8-testimonial-wrapper .author-header .title,
body.theme-light .tj-careers-title a,
body.theme-light .tj-careers-salary,
body.theme-light .legal-header h1,
body.theme-light .legal-article h2,
body.theme-light .legal-sidebar h5 {
  color: var(--tj-color-heading-primary) !important;
}

body.theme-light .sec-heading p,
body.theme-light .sec-heading .desc,
body.theme-light .about-content-area p,
body.theme-light .about-content-area .desc,
body.theme-light .mission-vision-box .desc,
body.theme-light .mission-vision-box .list-items li,
body.theme-light .list-items li,
body.theme-light .choose-box .desc,
body.theme-light .process-item .desc,
body.theme-light .process-item p,
body.theme-light .countup-item.style-2 p,
body.theme-light .countup-item.style-2 .count-text,
body.theme-light .contact-item.style-2 p,
body.theme-light .contact-list li,
body.theme-light .contact-list li a,
body.theme-light .h9-choose-box .customers-text,
body.theme-light .h8-about-item-desc .desc,
body.theme-light .h8-funfact-item .count-text,
body.theme-light .h8-testimonial-wrapper .testimonial-item .desc p,
body.theme-light .cio-testimonial-card p,
body.theme-light .tj-careers-bottom .location,
body.theme-light .tj-careers-tag span,
body.theme-light .tj-careers-salary span,
body.theme-light .legal-header p,
body.theme-light .legal-header .update-date,
body.theme-light .legal-sidebar ul li a,
body.theme-light .legal-article p,
body.theme-light .legal-article ul li,
body.theme-light .contact-form .text-muted {
  color: var(--tj-color-text-body) !important;
}

body.theme-light .process-item,
body.theme-light .choose-box,
body.theme-light .mission-vision-box,
body.theme-light .experience-box,
body.theme-light .customers-box,
body.theme-light .countup-item.style-2,
body.theme-light .contact-item.style-2,
body.theme-light .h9-choose-box,
body.theme-light .h8-about-item,
body.theme-light .h8-about-item-desc,
body.theme-light .h8-about-item-counter,
body.theme-light .h8-testimonial-wrapper .testimonial-item,
body.theme-light .cio-testimonial-card,
body.theme-light .tj-careers,
body.theme-light .contact-form,
body.theme-light .map-area {
  background: var(--tj-color-common-white) !important;
  border: 1px solid var(--tj-color-border-1) !important;
  box-shadow: 0 12px 30px rgba(12, 30, 33, 0.05) !important;
}

body.theme-light .process-item:hover,
body.theme-light .choose-box:hover,
body.theme-light .mission-vision-box:hover,
body.theme-light .contact-item.style-2:hover,
body.theme-light .h9-choose-box:hover,
body.theme-light .h8-testimonial-wrapper .testimonial-item:hover,
body.theme-light .cio-testimonial-card:hover {
  background: var(--tj-color-common-white) !important;
  border-color: rgba(30, 138, 138, 0.35) !important;
  box-shadow: 0 18px 40px rgba(12, 30, 33, 0.08) !important;
}

body.theme-light .choose-icon,
body.theme-light .contact-icon,
body.theme-light .tj-careers-icon,
body.theme-light .countup-item.style-2 .count-icon,
body.theme-light .h9-choose-box .choose-icon {
  background: var(--tj-color-theme-bg-2) !important;
  color: var(--tj-color-theme-primary) !important;
}

body.theme-light .choose-icon i,
body.theme-light .contact-icon i,
body.theme-light .tj-careers-icon i,
body.theme-light .countup-item.style-2 .count-icon i,
body.theme-light .list-items li i,
body.theme-light .contact-list li a i,
body.theme-light .h9-choose-box .choose-icon i {
  color: var(--tj-color-theme-primary) !important;
}

body.theme-light .countup-item.style-2 .inline-content,
body.theme-light .countup-item.style-2 .odometer,
body.theme-light .countup-item.style-2 .odometer .odometer-digit,
body.theme-light .countup-item.style-2 .odometer span,
body.theme-light .countup-item.style-2 .count-plus,
body.theme-light .h8-funfact-item .count-plus,
body.theme-light .h8-about-item-counter .count-plus {
  color: var(--tj-color-heading-primary) !important;
}

body.theme-light .h8-funfact-item,
body.theme-light .tj-careers-salary,
body.theme-light .legal-sidebar,
body.theme-light .legal-article {
  border-color: var(--tj-color-border-1) !important;
}

body.theme-light .h8-funfact-banner .call-box {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--tj-color-border-1) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.theme-light .h8-funfact-banner .call-box .title,
body.theme-light .h8-funfact-banner .call-box .number,
body.theme-light .h8-funfact-banner .call-box .number span {
  color: var(--tj-color-heading-primary) !important;
}

body.theme-light .star-ratings .empty-ratings {
  color: rgba(12, 30, 33, 0.12) !important;
}

body.theme-light .swiper-pagination-bullet {
  background: rgba(12, 30, 33, 0.14) !important;
}

body.theme-light .swiper-pagination-bullet-active {
  background: var(--tj-color-theme-primary) !important;
}

body.theme-light .tj-faq.style-2 .accordion-item {
  background: var(--tj-color-common-white) !important;
  border: 1px solid var(--tj-color-border-1) !important;
  border-radius: 12px !important;
}

body.theme-light .tj-faq.style-2 .accordion-item .faq-title {
  color: var(--tj-color-heading-primary) !important;
}

body.theme-light .tj-faq.style-2 .accordion-item .faq-title::after {
  color: var(--tj-color-theme-primary) !important;
}

body.theme-light .tj-faq.style-2 .accordion-item .accordion-body,
body.theme-light .tj-faq.style-2 .accordion-item .faq-text,
body.theme-light .tj-faq.style-2 .accordion-item .faq-text p {
  color: var(--tj-color-text-body) !important;
}

body.theme-light .tj-faq.style-2 .accordion-item.active {
  background: var(--tj-color-theme-primary) !important;
  border-color: var(--tj-color-theme-primary) !important;
}

body.theme-light .tj-faq.style-2 .accordion-item.active .faq-title,
body.theme-light .tj-faq.style-2 .accordion-item.active .accordion-body,
body.theme-light .tj-faq.style-2 .accordion-item.active .faq-text,
body.theme-light .tj-faq.style-2 .accordion-item.active .faq-text p,
body.theme-light .tj-faq.style-2 .accordion-item.active .faq-title::after {
  color: var(--tj-color-common-white) !important;
}

body.theme-light .contact-form .file-label,
body.theme-light .contact-form .form-check-label {
  color: var(--tj-color-text-body) !important;
}

body.theme-light .form-input input,
body.theme-light .form-input textarea,
body.theme-light .contact-form .form-input input,
body.theme-light .contact-form .form-input textarea,
body.theme-light .contact-form .form-input .nice-select,
body.theme-light .tj-nice-select-box .nice-select,
body.theme-light .tj-select select,
body.theme-light input[type="file"] {
  background: var(--tj-color-common-white) !important;
  border: 1px solid var(--tj-color-border-1) !important;
  color: var(--tj-color-text-body) !important;
}

body.theme-light .contact-form .form-input .nice-select .list,
body.theme-light .tj-nice-select-box .nice-select .list,
body.theme-light .nice-select .list {
  background: var(--tj-color-common-white) !important;
  border: 1px solid var(--tj-color-border-1) !important;
  box-shadow: 0 12px 30px rgba(12, 30, 33, 0.08) !important;
}

body.theme-light .contact-form .form-input .nice-select .option,
body.theme-light .tj-nice-select-box .nice-select .option,
body.theme-light .nice-select .option {
  background: transparent !important;
  color: var(--tj-color-text-body) !important;
}

body.theme-light .contact-form .form-input .nice-select .option:hover,
body.theme-light .contact-form .form-input .nice-select .option.focus,
body.theme-light .tj-nice-select-box .nice-select .option:hover,
body.theme-light .nice-select .option:hover {
  background: var(--tj-color-theme-bg) !important;
  color: var(--tj-color-heading-primary) !important;
}

body.theme-light .form-input input::placeholder,
body.theme-light .form-input textarea::placeholder,
body.theme-light input[type="file"]::file-selector-button {
  color: var(--tj-color-text-body-3) !important;
}

body.theme-light .form-input input:focus,
body.theme-light .form-input textarea:focus,
body.theme-light .contact-form .form-input .nice-select.open,
body.theme-light input[type="file"]:focus {
  border-color: var(--tj-color-theme-primary) !important;
  box-shadow: 0 0 0 3px rgba(30, 138, 138, 0.08) !important;
}

body.theme-light .form-check-input {
  background-color: var(--tj-color-common-white) !important;
  border-color: var(--tj-color-border-1) !important;
  accent-color: var(--tj-color-theme-primary);
}

body.theme-light .map-area iframe {
  filter: none !important;
}

body.theme-light .tj-careers-icon {
  background: var(--tj-color-theme-bg-2) !important;
}

body.theme-light .tj-careers-tag span {
  background: transparent !important;
  border: 1px dashed var(--tj-color-border-1) !important;
}

body.theme-light .tj-careers-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.theme-light .tj-careers-btn .btn-text,
body.theme-light .tj-careers-btn .btn-icon,
body.theme-light .tj-careers-bottom .location a,
body.theme-light .tj-careers-bottom .location i {
  color: var(--tj-color-heading-primary) !important;
}

body.theme-light .tj-careers:hover {
  background: var(--tj-color-theme-dark) !important;
  border-color: var(--tj-color-theme-dark) !important;
}

body.theme-light .tj-careers:hover .tj-careers-title a,
body.theme-light .tj-careers:hover .tj-careers-salary,
body.theme-light .tj-careers:hover .tj-careers-salary span,
body.theme-light .tj-careers:hover .tj-careers-bottom .location,
body.theme-light .tj-careers:hover .tj-careers-bottom .location a,
body.theme-light .tj-careers:hover .tj-careers-bottom .location i,
body.theme-light .tj-careers:hover .tj-careers-btn .btn-text,
body.theme-light .tj-careers:hover .tj-careers-btn .btn-icon {
  color: var(--tj-color-common-white) !important;
}

body.theme-light main section:not(.tj-page-header):not(.h9-cta-section):not(.cio-client-marquee-section):not(.h8-maquee) [style*="color:rgba(255,255,255,0.9)"],
body.theme-light main section:not(.tj-page-header):not(.h9-cta-section):not(.cio-client-marquee-section):not(.h8-maquee) [style*="color:rgba(255,255,255,0.92)"],
body.theme-light main section:not(.tj-page-header):not(.h9-cta-section):not(.cio-client-marquee-section):not(.h8-maquee) [style*="color:#fff"],
body.theme-light main section:not(.tj-page-header):not(.h9-cta-section):not(.cio-client-marquee-section):not(.h8-maquee) [style*="color:#ffffff"] {
  color: var(--tj-color-heading-primary) !important;
}

body.theme-light main section:not(.tj-page-header):not(.h9-cta-section):not(.cio-client-marquee-section):not(.h8-maquee) [style*="color:rgba(255,255,255,0.85)"],
body.theme-light main section:not(.tj-page-header):not(.h9-cta-section):not(.cio-client-marquee-section):not(.h8-maquee) [style*="color:rgba(255,255,255,0.75)"],
body.theme-light main section:not(.tj-page-header):not(.h9-cta-section):not(.cio-client-marquee-section):not(.h8-maquee) [style*="color:rgba(255,255,255,0.7)"],
body.theme-light main section:not(.tj-page-header):not(.h9-cta-section):not(.cio-client-marquee-section):not(.h8-maquee) [style*="color:rgba(255,255,255,0.65)"],
body.theme-light main section:not(.tj-page-header):not(.h9-cta-section):not(.cio-client-marquee-section):not(.h8-maquee) [style*="color:rgba(255,255,255,0.6)"],
body.theme-light main section:not(.tj-page-header):not(.h9-cta-section):not(.cio-client-marquee-section):not(.h8-maquee) [style*="color:rgba(255,255,255,0.55)"],
body.theme-light main section:not(.tj-page-header):not(.h9-cta-section):not(.cio-client-marquee-section):not(.h8-maquee) [style*="color:rgba(255,255,255,0.5)"],
body.theme-light main section:not(.tj-page-header):not(.h9-cta-section):not(.cio-client-marquee-section):not(.h8-maquee) [style*="color:rgba(255,255,255,0.45)"] {
  color: var(--tj-color-text-body) !important;
}

body.theme-light .contact-item.style-2 .contact-list li a:hover,
body.theme-light .h9-choose-box .contact-list li a:hover,
body.theme-light .legal-sidebar ul li a:hover,
body.theme-light .legal-article a:hover {
  color: var(--tj-color-theme-primary) !important;
}

/* ============================================================
 * Light theme — refinement pass
 * Fixes contrast, visibility and polishes the look on the pages
 * that opt into `.theme-light`. Selectors below intentionally use
 * higher specificity than the dark stylesheet so they always win
 * regardless of include order.
 * ============================================================ */

/* --- Title scroll-highlight (split-text) --------------------------------
 * The dark stylesheet hard-codes a white-on-white-25% gradient on every
 * `.line` produced by the title-anim splitter, which makes split headings
 * unreadable on a light background. Re-skin them with the heading colour
 * fading to a soft slate so the scroll fill effect still reads. */
body.theme-light .title-highlight .line,
body.theme-light .title-anim .line,
body.theme-light h1.line,
body.theme-light h2.line,
body.theme-light h3.line,
body.theme-light h4.line,
body.theme-light .sec-title.line,
body.theme-light .line {
  background-image: linear-gradient(
    90deg,
    var(--tj-color-heading-primary) var(--highlight-offset, 0%),
    rgba(12, 30, 33, 0.28) var(--highlight-offset, 0%)
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* --- Contact info cards (Address / Email / Phone / Hours) ----------------
 * The dark sheet selects `.contact-item.style-2 .contact-title` (0,3,0)
 * which beats the generic light heading list. Bump specificity so the
 * card titles, paragraphs and lists are legible on white. */
body.theme-light .contact-item.style-2 .contact-title,
body.theme-light .contact-item.style-2 h3,
body.theme-light .contact-item.style-2 h4 {
  color: var(--tj-color-heading-primary) !important;
}

body.theme-light .contact-item.style-2 p,
body.theme-light .contact-item.style-2 .contact-list li,
body.theme-light .contact-item.style-2 .contact-list li a {
  color: var(--tj-color-text-body) !important;
}

body.theme-light .contact-item.style-2 .contact-list li a:hover {
  color: var(--tj-color-theme-primary) !important;
}

/* --- "Pourquoi Nous Rejoindre" / customers cards on Carrières -----------
 * Make sure the empty-stars track and ratings text stay subtle but visible
 * on a white card, and the helper text under titles is properly muted. */
body.theme-light .h9-choose-box.customers-box .star-ratings .empty-ratings {
  color: rgba(12, 30, 33, 0.14) !important;
}

body.theme-light .h9-choose-box.customers-box .star-ratings .fill-ratings {
  color: var(--tj-color-theme-primary) !important;
}

body.theme-light .h9-choose-box .customers-text,
body.theme-light .h9-choose-box .desc,
body.theme-light .h9-choose-box p {
  color: var(--tj-color-text-body) !important;
}

/* Keep the photo-overlay variant ("Évolution de Carrière") readable: the
 * card uses a real background image with a dark overlay, so its title and
 * description must stay on white — re-assert that here. */
body.theme-light .h9-choose-bg .title,
body.theme-light .h9-choose-bg h4,
body.theme-light .h9-choose-bg .desc,
body.theme-light .h9-choose-bg p {
  color: var(--tj-color-common-white) !important;
}

/* --- About / highlight headings inside light sections -------------------
 * `.h8-about-content-inner .sec-title` has 0,2,0 specificity in dark CSS;
 * ensure the in-page narrative heading uses the proper ink colour. */
body.theme-light .h8-about-content-inner .sec-title,
body.theme-light .h8-about-content-inner .title-highlight,
body.theme-light .h8-about-content-inner h1,
body.theme-light .h8-about-content-inner h2,
body.theme-light .h8-about-content-inner h3 {
  color: var(--tj-color-heading-primary) !important;
}

/* --- Process steps (01 → 04) --------------------------------------------
 * The numbered glyph fades to white via background-clip: text. On a white
 * card that erases the bottom half of each digit. Replace the white stop
 * with a soft pastel teal so the numerals remain legible. */
body.theme-light .process-item .process-step,
body.theme-light .process-item .process-step span {
  background: linear-gradient(
    180deg,
    var(--tj-color-theme-primary) 0%,
    rgba(30, 138, 138, 0.12) 95%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* --- Sub-titles ("PROSPECTION B2B/B2C", "FAQ", "NOTRE PROCESSUS"...) ----
 * Pill styling on a teal-tint background; make sure the wrapper has a
 * crisp border and the icon + text hit AA contrast. */
body.theme-light .sec-heading .sub-title,
body.theme-light .sub-title {
  color: var(--tj-color-theme-primary) !important;
}

body.theme-light .sec-heading .sub-title i,
body.theme-light .sub-title i {
  color: var(--tj-color-theme-primary) !important;
}

/* --- Form labels & helper text ------------------------------------------
 * Labels above file inputs ("Votre CV", "Lettre de motivation"...) and the
 * RGPD reassurance line are direct text nodes with no class — promote them
 * via context so they don't fall through to a white default. */
body.theme-light .contact-form .file-label,
body.theme-light .contact-form label,
body.theme-light .contact-form .form-check-label,
body.theme-light .contact-form .form-help,
body.theme-light .contact-form .form-disclaimer,
body.theme-light .contact-form small,
body.theme-light .form-input label {
  color: var(--tj-color-text-body) !important;
}

body.theme-light .contact-form .file-label strong,
body.theme-light .contact-form label strong {
  color: var(--tj-color-heading-primary) !important;
}

/* The native file picker button rendered by the browser — give it the
 * same teal pill treatment it has in dark mode so it reads as a button. */
body.theme-light input[type="file"]::file-selector-button {
  background: var(--tj-color-theme-primary) !important;
  color: var(--tj-color-common-white) !important;
  border: none !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  margin-right: 12px !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  transition: background-color 0.2s ease !important;
}

body.theme-light input[type="file"]::file-selector-button:hover {
  background: var(--tj-color-theme-dark) !important;
}

/* --- Testimonial cards (clients & careers) ------------------------------
 * Dark sheet leaves a few inner nodes white-on-white. Pin the author name
 * to ink and the body copy to body grey for proper hierarchy. */
body.theme-light .h8-testimonial-wrapper .testimonial-item .author-header .title,
body.theme-light .h8-testimonial-wrapper .testimonial-item .author-name,
body.theme-light .cio-testimonial-card .author-name,
body.theme-light .cio-testimonial-card .title {
  color: var(--tj-color-heading-primary) !important;
}

body.theme-light .h8-testimonial-wrapper .testimonial-item .desc,
body.theme-light .h8-testimonial-wrapper .testimonial-item .desc p,
body.theme-light .cio-testimonial-card .desc,
body.theme-light .cio-testimonial-card .desc p,
body.theme-light .cio-testimonial-card blockquote {
  color: var(--tj-color-text-body) !important;
}

body.theme-light .testimonial-item .author-designation,
body.theme-light .cio-testimonial-card .designation {
  color: var(--tj-color-text-body-3) !important;
}

/* --- Stat / counter cards (98%, 4.2/5, 775K+, 20 ans...) ----------------
 * Punchier numerals + lighter labels for proper visual weight on white. */
body.theme-light .countup-item.style-2 .inline-content,
body.theme-light .countup-item.style-2 .odometer,
body.theme-light .countup-item.style-2 .count-plus,
body.theme-light .countup-item.style-2 .count-suffix,
body.theme-light .h8-funfact-item .count-text,
body.theme-light .h8-funfact-item .count-plus,
body.theme-light .h8-funfact-item .odometer {
  color: var(--tj-color-heading-primary) !important;
}

body.theme-light .countup-item.style-2 p,
body.theme-light .countup-item.style-2 .label,
body.theme-light .h8-funfact-item .counter-title {
  color: var(--tj-color-text-body) !important;
}

/* --- Card polish (shadows, borders, hover lift) -------------------------
 * Tighten the surface treatment so the white cards feel intentional, not
 * floating. Slightly stronger borders + a softer shadow + a subtle lift
 * on hover gives the page a more premium feel without changing the
 * structural CSS. */
body.theme-light .process-item,
body.theme-light .choose-box,
body.theme-light .mission-vision-box,
body.theme-light .countup-item.style-2,
body.theme-light .contact-item.style-2,
body.theme-light .h9-choose-box,
body.theme-light .h8-about-item,
body.theme-light .h8-testimonial-wrapper .testimonial-item,
body.theme-light .cio-testimonial-card,
body.theme-light .tj-careers,
body.theme-light .contact-form {
  border: 1px solid rgba(12, 30, 33, 0.06) !important;
  box-shadow: 0 1px 2px rgba(12, 30, 33, 0.04),
              0 8px 24px rgba(12, 30, 33, 0.05) !important;
  transition: transform 0.25s ease,
              box-shadow 0.25s ease,
              border-color 0.25s ease !important;
}

body.theme-light .process-item:hover,
body.theme-light .choose-box:hover,
body.theme-light .mission-vision-box:hover,
body.theme-light .countup-item.style-2:hover,
body.theme-light .contact-item.style-2:hover,
body.theme-light .h9-choose-box:hover,
body.theme-light .h8-about-item:hover,
body.theme-light .h8-testimonial-wrapper .testimonial-item:hover,
body.theme-light .cio-testimonial-card:hover,
body.theme-light .tj-careers:hover,
body.theme-light .contact-form:hover {
  transform: translateY(-2px);
  border-color: rgba(30, 138, 138, 0.28) !important;
  box-shadow: 0 4px 8px rgba(12, 30, 33, 0.05),
              0 18px 36px rgba(12, 30, 33, 0.08) !important;
}

/* Keep the careers hover state flush — the dark hover swap should not
 * also lift the card twice. */
body.theme-light .tj-careers:hover {
  transform: none;
}

/* Icon bubbles: round them and give them breathing room so they read as
 * actual UI affordances rather than empty teal stamps. */
body.theme-light .choose-icon,
body.theme-light .contact-icon,
body.theme-light .tj-careers-icon,
body.theme-light .countup-item.style-2 .count-icon,
body.theme-light .h9-choose-box .choose-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 14px !important;
  background: rgba(30, 138, 138, 0.12) !important;
  color: var(--tj-color-theme-primary) !important;
  font-size: 24px !important;
  margin-bottom: 18px !important;
}

body.theme-light .h9-choose-box.customers-box .choose-icon,
body.theme-light .h9-choose-bg .choose-icon {
  /* Customers (rating) and photo-overlay variants don't have an icon
   * bubble — keep them untouched. */
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* --- Section background unification -------------------------------------
 * The original template alternates sections between #060f14 and #07131a.
 * In light mode we already remap those, but a couple of marketing pages
 * use slightly different inline tones — normalize anything that's still
 * very dark inside a `theme-light` body so we never get a near-black
 * section sandwiched between two light ones. */
body.theme-light section[style*="background:#0c1a20"],
body.theme-light section[style*="background: #0c1a20"],
body.theme-light section[style*="background-color:#0c1a20"],
body.theme-light section[style*="background-color: #0c1a20"],
body.theme-light section[style*="background:#040d11"],
body.theme-light section[style*="background: #040d11"] {
  background: var(--tj-color-grey-1) !important;
}

/* --- FAQ accordion polish -----------------------------------------------
 * Slightly larger hit area, cleaner separators, primary teal active state.
 * (The base rules already exist; these are additive for visual rhythm.) */
body.theme-light .tj-faq.style-2 .accordion-item {
  border-radius: 14px !important;
  padding: 4px 8px !important;
}

body.theme-light .tj-faq.style-2 .accordion-item + .accordion-item {
  margin-top: 12px !important;
}

body.theme-light .tj-faq.style-2 .accordion-item .faq-title {
  font-weight: 600 !important;
}

/* --- Marquee / "running text" strip below the hero on Carrières & co. ---
 * The h8-maquee strip is excluded from the light remap because it stays
 * teal by design. Make sure its body text stays crisp white regardless of
 * the parent rule cascade. */
body.theme-light .h8-maquee,
body.theme-light .cio-client-marquee-section {
  color: var(--tj-color-common-white);
}

body.theme-light .h8-maquee .maquee-content,
body.theme-light .h8-maquee .text,
body.theme-light .h8-maquee span {
  color: var(--tj-color-common-white) !important;
}

/* --- Page header (hero band) keeps its dark treatment ------------------
 * Make sure the breadcrumb pill and inline subtitle stay legible on the
 * dark hero — they use inline rgba(255,255,255,...) styles which are
 * stripped by our generic [style*="color:#fff"] rule. Re-allow them. */
body.theme-light .tj-page-header .tj-page-title,
body.theme-light .tj-page-header h1 {
  color: var(--tj-color-common-white) !important;
}

body.theme-light .tj-page-header .tj-page-subtitle,
body.theme-light .tj-page-header p {
  color: rgba(255, 255, 255, 0.78) !important;
}

body.theme-light .tj-page-header .tj-page-link,
body.theme-light .tj-page-header .tj-page-link a,
body.theme-light .tj-page-header .tj-page-link i,
body.theme-light .tj-page-header .tj-page-link span {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* --- Buttons --------------------------------------------------------------
 * Primary CTA (`.tj-btn`, `.cio-btn`) already uses theme-primary in main;
 * just make sure outline / text variants don't inherit white-on-white. */
body.theme-light .tj-btn-outline,
body.theme-light .btn-outline,
body.theme-light a.btn-outline {
  color: var(--tj-color-theme-primary) !important;
  border-color: var(--tj-color-theme-primary) !important;
}

body.theme-light .tj-btn-outline:hover,
body.theme-light .btn-outline:hover {
  background: var(--tj-color-theme-primary) !important;
  color: var(--tj-color-common-white) !important;
}

/* --- Legal pages (mentions / politique) ---------------------------------
 * Generally already styled, just polish the sticky sidebar and active
 * link state for a more premium feel. */
body.theme-light .legal-sidebar {
  background: var(--tj-color-common-white) !important;
  border: 1px solid var(--tj-color-border-1) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(12, 30, 33, 0.04) !important;
}

body.theme-light .legal-sidebar ul li a {
  display: block;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

body.theme-light .legal-sidebar ul li a:hover,
body.theme-light .legal-sidebar ul li a.active {
  background: rgba(30, 138, 138, 0.08) !important;
  color: var(--tj-color-theme-primary) !important;
}

body.theme-light .legal-article h2 {
  border-bottom: 1px solid var(--tj-color-border-1);
  padding-bottom: 12px;
  margin-bottom: 18px;
}

/* --- Misc fixes ---------------------------------------------------------- */

/* List item check icons inside benefit lists ("Stratégie Outbound Ciblée"
 * etc.) — keep the bullet teal regardless of the inline color cascade. */
body.theme-light .list-items li i,
body.theme-light .list-items li::marker {
  color: var(--tj-color-theme-primary) !important;
}

/* Inline icons used inside paragraphs (e.g. lock icon next to RGPD line)
 * sometimes inherit transparent due to the generic [style*="color:rgba"]
 * rule. Allow common font-awesome / tji icons inside form helper text. */
body.theme-light .contact-form i,
body.theme-light .contact-form .form-disclaimer i {
  color: var(--tj-color-theme-primary) !important;
}

/* Swiper navigation arrows on testimonial sliders. */
body.theme-light .swiper-button-next,
body.theme-light .swiper-button-prev {
  color: var(--tj-color-theme-primary) !important;
}

/* Make sure the body background never falls back to the dark theme bg
 * if some script toggles classes on <html>. */
html:has(body.theme-light) {
  background-color: var(--tj-color-grey-1);
}