/*
 * COGES public-site colour layer.
 *
 * This file intentionally contains no typography or megamenu geometry. It is
 * loaded on every public page, after Bootstrap 5.3, the brand palette and
 * page-specific styles. The controller selects the visitor's light/dark theme.
 */

:root {
  --coges-page-bg: #ffffff;
  --coges-surface-soft: #f8fafc;
  --coges-surface: #ffffff;
  --coges-surface-raised: #eff0f4;
  --coges-text-primary: #171a22;
  --coges-text-secondary: #595e6a;
  --coges-border: #c7ccd3;
  --coges-border-soft: #eff0f4;
  --coges-link: #2654e0;
  --coges-link-hover: #183cb3;
  --coges-brand-surface: #1d365a;
  --coges-always-white: #ffffff;
  --coges-control-bg: #eff0f4;
  --coges-control-border: #c7ccd3;
  --coges-control-icon: #595e6a;
}

[data-coges-theme="light"] {
  color-scheme: light;
}

[data-coges-theme="dark"] {
  color-scheme: dark;
  --coges-page-bg: #12151d;
  --coges-surface-soft: #1b1f27;
  --coges-surface: #21252d;
  --coges-surface-raised: #272b33;
  --coges-text-primary: #f8fafc;
  --coges-text-secondary: #c7ccd3;
  --coges-border: #3c414a;
  --coges-border-soft: #2e323a;
  --coges-link: #9bb2ff;
  --coges-link-hover: #c4d0ff;
  --coges-control-bg: #2e323a;
  --coges-control-border: #595e6a;
  --coges-control-icon: #f1f4f7;
  --bs-body-bg: var(--coges-page-bg);
  --bs-body-color: var(--coges-text-secondary);
  --bs-body-bg-rgb: 18, 21, 29;
  --bs-body-color-rgb: 199, 204, 211;
  --bs-border-color: var(--coges-border);
  /* Bootstrap 5.3 semantic tokens for the COGES dark palette. */
  --bs-emphasis-color: var(--coges-text-primary);
  --bs-emphasis-color-rgb: 248, 250, 252;
  --bs-secondary-color: var(--coges-text-secondary);
  --bs-secondary-color-rgb: 199, 204, 211;
  --bs-secondary-bg: var(--coges-surface-raised);
  --bs-secondary-bg-rgb: 39, 43, 51;
  --bs-tertiary-color: var(--coges-text-secondary);
  --bs-tertiary-color-rgb: 199, 204, 211;
  --bs-tertiary-bg: var(--coges-surface-soft);
  --bs-tertiary-bg-rgb: 27, 31, 39;
  --bs-heading-color: var(--coges-text-primary);
  --bs-link-color: var(--coges-link);
  --bs-link-color-rgb: 155, 178, 255;
  --bs-link-hover-color: var(--coges-link-hover);
  --bs-link-hover-color-rgb: 196, 208, 255;
}

/* Compact Capgemini-inspired switch. These are the only layout rules here. */
.coges-theme-control {
  display: none;
}

[data-coges-theme-ready="true"] .coges-theme-control {
  display: block;
}

/* Icon button rather than a sliding switch: it sits next to the search opener
 * and inherits the navbar's own colour, so it reads as one of the nav controls
 * instead of a widget dropped into the bar. */
.coges-theme-toggle {
  appearance: none;
  color: inherit;
  cursor: pointer;
  line-height: 1;
}

/* Sized here rather than with a display-* utility: those run from the heading
 * scale and made the icon 24px, half again as tall as the controls beside it. */
.coges-theme-toggle-icon {
  font-size: 1.125rem;
}

/* Only one icon shows, and it announces what the click will do — moon while
 * the page is light, sun while it is dark. The controller never touches these
 * classes: the root attribute alone decides, so no JavaScript is involved. */
.coges-theme-toggle-sun {
  display: none;
}

[data-coges-theme="dark"] .coges-theme-toggle-moon {
  display: none;
}

[data-coges-theme="dark"] .coges-theme-toggle-sun {
  display: inline-block;
}

.coges-theme-toggle:hover .coges-theme-toggle-icon {
  color: var(--coges-link);
}

.coges-theme-toggle:focus-visible {
  outline: 3px solid var(--coges-always-white) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--primary, #3d6dff);
}

[data-coges-theme] .user-menu-toggle:hover .avatar-small,
[data-coges-theme] .user-menu-toggle:focus-visible .avatar-small,
[data-coges-theme] .user-menu-toggle[aria-expanded="true"] .avatar-small {
  color: var(--coges-link) !important;
}

/* Page and semantic content surfaces. */
[data-coges-theme="dark"] body,
[data-coges-theme="dark"] main,
[data-coges-theme="dark"] .main-wrap {
  color: var(--coges-text-secondary);
  background-color: var(--coges-page-bg);
}

[data-coges-theme="dark"] .main-wrap h1,
[data-coges-theme="dark"] .main-wrap h2,
[data-coges-theme="dark"] .main-wrap h3,
[data-coges-theme="dark"] .main-wrap h4,
[data-coges-theme="dark"] .main-wrap h5,
[data-coges-theme="dark"] .main-wrap h6,
[data-coges-theme="dark"] .main-wrap .h1,
[data-coges-theme="dark"] .main-wrap .h2,
[data-coges-theme="dark"] .main-wrap .h3,
[data-coges-theme="dark"] .main-wrap .h4,
[data-coges-theme="dark"] .main-wrap .h5,
[data-coges-theme="dark"] .main-wrap .h6 {
  color: var(--coges-text-primary);
}

[data-coges-theme="dark"] .main-wrap :is(h1, h2, h3, h4, h5, h6) > a,
[data-coges-theme="dark"] .main-wrap a.index-iten-link,
[data-coges-theme="dark"] .main-wrap p.intro a {
  color: var(--coges-text-primary);
}

[data-coges-theme="dark"] .main-wrap a:not(.btn):not(.text-white) {
  color: var(--coges-text-primary);
}

[data-coges-theme="dark"] .main-wrap a:not(.btn):hover,
[data-coges-theme="dark"] .main-wrap a:not(.btn):focus {
  color: var(--primary-400);
}

[data-coges-theme="dark"] .main-wrap .breadcrumb-item a:hover,
[data-coges-theme="dark"] .main-wrap .breadcrumb-item a:focus,
[data-coges-theme="dark"] .main-wrap .breadcrumb-item a:active {
  color: var(--primary-400);
}

/* Line tabs use dark text for inactive labels in the light theme. Preserve
 * that semantic distinction in dark mode: inactive labels become light,
 * while active and interactive states keep the COGES brand blue. */
[data-coges-theme="dark"] .main-wrap .nav-tabs.nav-tabs-line {
  border-bottom: 1px solid #c5c9d1;
}

[data-coges-theme="dark"] .main-wrap .nav-tabs.nav-tabs-line .nav-item .nav-link {
  color: var(--coges-text-primary);
}

[data-coges-theme="dark"] .main-wrap .nav-tabs.nav-tabs-line .nav-item .nav-link.active,
[data-coges-theme="dark"] .main-wrap .nav-tabs.nav-tabs-line .nav-item .nav-link:hover,
[data-coges-theme="dark"] .main-wrap .nav-tabs.nav-tabs-line .nav-item .nav-link:focus {
  color: var(--primary-400);
}

[data-coges-theme="dark"] .main-wrap p,
[data-coges-theme="dark"] .main-wrap tr,
[data-coges-theme="dark"] .main-wrap .page-body p,
[data-coges-theme="dark"] .main-wrap .page-body tr,
[data-coges-theme="dark"] .main-wrap .intro-content p,
[data-coges-theme="dark"] .main-wrap .lead,
[data-coges-theme="dark"] .main-wrap :is(
  .page-body li,
  .intro-content li,
  address,
  blockquote,
  figcaption
) {
  color: var(--coges-text-secondary);
}

[data-coges-theme="dark"] .main-wrap .bg-white,
[data-coges-theme="dark"] .main-wrap .bg-light {
  background-color: var(--coges-surface) !important;
}

/* Capgemini-inspired cover-panel skin. The heading and divider retain their
 * existing Folio/COGES typography and effects. */
[data-coges-theme="dark"] .main-wrap .header-cover-label-emphasis.bg-white {
  background: linear-gradient(
    239deg,
    rgba(0, 88, 171, 0.8),
    rgba(28, 64, 118, 0.8)
  ) !important;
  border-radius: 4px;
  box-shadow: 0 25px 100px rgba(0, 0, 0, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.5) !important;
  opacity: 1;
  overflow: hidden;
}

[data-coges-theme="dark"] .main-wrap .text-dark,
[data-coges-theme="dark"] .main-wrap .text-body,
[data-coges-theme="dark"] .main-wrap .text-black,
[data-coges-theme="dark"] .main-wrap .text-black-50 {
  color: var(--coges-text-primary) !important;
}

[data-coges-theme="dark"] .main-wrap .text-muted,
[data-coges-theme="dark"] .main-wrap .text-secondary {
  color: var(--coges-text-secondary) !important;
}

[data-coges-theme="dark"] .main-wrap .text-primary {
  color: var(--coges-link) !important;
}

[data-coges-theme="dark"] .main-wrap .font-alt.display-8.bg-light.text-primary {
  color: #85a2fe !important;
}

[data-coges-theme="dark"] .list-group-icon-primary-bg i,
[data-coges-theme="dark"] .list-group-icon-primary-bg span {
  background: #e1e4ed12 !important;
}

[data-coges-theme="dark"] .main-wrap .text-dark-stroke {
  -webkit-text-stroke-color: var(--coges-text-primary);
}

[data-coges-theme="dark"] .main-wrap hr:not(.wp-block-separator.intro),
[data-coges-theme="dark"] .main-wrap .border,
[data-coges-theme="dark"] .main-wrap .border-top,
[data-coges-theme="dark"] .main-wrap .border-end,
[data-coges-theme="dark"] .main-wrap .border-bottom,
[data-coges-theme="dark"] .main-wrap .border-start {
  border-color: var(--coges-border) !important;
}

/* Reusable components outside photographic and brand-colour sections. */
[data-coges-theme="dark"] .main-wrap .card:not(.bg-dark):not(.bg-primary),
[data-coges-theme="dark"] .modal-content,
[data-coges-theme="dark"] .toast,
[data-coges-theme="dark"] .popover,
[data-coges-theme="dark"] .accordion-item,
[data-coges-theme="dark"] .accordion-button,
[data-coges-theme="dark"] .list-group-item:not(.bg-dark) {
  color: var(--coges-text-secondary);
  background-color: var(--coges-surface);
  border-color: var(--coges-border);
}

/* Les listes a icones sans bordure gardent le fond de leur section. */
[data-coges-theme="dark"] ul.list-group-borderless.list-group-icon-primary-bg
  > .list-group-item:not(.bg-dark) {
  background-color: transparent;
  border-color: transparent;
}

[data-coges-theme="dark"] .main-wrap .card:not(.bg-dark):not(.bg-primary) {
  --bs-card-bg: var(--coges-surface);
  --bs-card-color: var(--coges-text-secondary);
  --bs-card-cap-bg: var(--coges-surface);
  --bs-card-cap-color: var(--coges-text-primary);
  --bs-card-border-color: var(--coges-border);
}

[data-coges-theme="dark"] :is(.modal-content, .popover, .toast) :is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p
) {
  color: var(--coges-text-primary);
}

[data-coges-theme="dark"] .accordion-button:not(.collapsed),
[data-coges-theme="dark"] .list-group-item-action:hover,
[data-coges-theme="dark"] .list-group-item-action:focus {
  color: var(--coges-text-primary);
  background-color: var(--coges-surface-raised);
}

[data-coges-theme="dark"] .accordion {
  --bs-accordion-color: var(--coges-text-secondary);
  --bs-accordion-bg: var(--coges-surface);
  --bs-accordion-border-color: var(--coges-border);
  --bs-accordion-btn-color: var(--coges-text-primary);
  --bs-accordion-btn-bg: var(--coges-surface);
  --bs-accordion-active-color: var(--coges-link-hover);
  --bs-accordion-active-bg: var(--coges-surface-raised);
}

[data-coges-theme="dark"] .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23c7ccd3'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

[data-coges-theme="dark"] .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239bb2ff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

[data-coges-theme="dark"] .form-control,
[data-coges-theme="dark"] .form-select,
[data-coges-theme="dark"] .form-check-input,
[data-coges-theme="dark"] .input-group-text {
  color: var(--coges-text-primary);
  background-color: var(--coges-surface-soft);
  border-color: var(--coges-border);
}

[data-coges-theme="dark"] .form-select:not([multiple]):not([size]),
[data-coges-theme="dark"] .form-select:not([multiple])[size="1"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c7ccd3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

[data-coges-theme="dark"] .was-validated .form-select:valid:not([multiple]):not([size]),
[data-coges-theme="dark"] .was-validated .form-select:valid:not([multiple])[size="1"],
[data-coges-theme="dark"] .form-select.is-valid:not([multiple]):not([size]),
[data-coges-theme="dark"] .form-select.is-valid:not([multiple])[size="1"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c7ccd3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
}

[data-coges-theme="dark"] .was-validated .form-select:invalid:not([multiple]):not([size]),
[data-coges-theme="dark"] .was-validated .form-select:invalid:not([multiple])[size="1"],
[data-coges-theme="dark"] .form-select.is-invalid:not([multiple]):not([size]),
[data-coges-theme="dark"] .form-select.is-invalid:not([multiple])[size="1"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c7ccd3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
}

[data-coges-theme="dark"] .form-check-input:checked,
[data-coges-theme="dark"] .form-check-input[type="checkbox"]:indeterminate {
  background-color: #2654e0;
  border-color: #2654e0;
}

[data-coges-theme="dark"] .form-switch .form-check-input:not(:checked) {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23c7ccd3'/%3e%3c/svg%3e");
}

[data-coges-theme="dark"] .form-control:disabled,
[data-coges-theme="dark"] .form-select:disabled {
  color: var(--coges-text-secondary);
  background-color: var(--coges-surface-raised);
}

[data-coges-theme="dark"] .form-control::placeholder {
  color: var(--coges-text-secondary);
  opacity: 0.8;
}

[data-coges-theme="dark"] .form-control:focus,
[data-coges-theme="dark"] .form-select:focus {
  color: var(--coges-text-primary);
 /* background-color: var(--coges-surface);*/
}

/* Reprend la couleur de texte posee ligne 318 sur ces memes selecteurs :
 * sans effet au rendu, gardee comme repere de lecture. */
[data-coges-theme="dark"] .form-control,
[data-coges-theme="dark"] .form-select {
  color: var(--coges-text-primary);
}

[data-coges-theme="dark"] .table {
  --bs-table-color: var(--coges-text-secondary);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--coges-border);
}

[data-coges-theme="dark"] .page-link {
  color: var(--coges-text-primary);
  background-color: var(--coges-surface);
  border-color: var(--coges-border);
}

[data-coges-theme="dark"] .btn-primary {
  color: var(--coges-always-white);
  background-color: #2654e0;
  border-color: #2654e0;
}

[data-coges-theme="dark"] .btn-primary:hover,
[data-coges-theme="dark"] .btn-primary:focus,
[data-coges-theme="dark"] .btn-primary:active {
  color: var(--coges-always-white);
  background-color: #183cb3;
  border-color: #183cb3;
}

[data-coges-theme="dark"] .contactpage .offices address {
  color: var(--coges-text-secondary) !important;
}

/* Search has late legacy colours of its own, so it consumes explicit tokens. */
[data-coges-theme="dark"] .search-result-link {
  color: var(--coges-text-secondary) !important;
  background: var(--coges-surface);
  border-color: var(--coges-border);
}

[data-coges-theme="dark"] .search-result-link:hover {
  background: var(--coges-surface-raised);
  border-color: var(--coges-link);
}

[data-coges-theme="dark"] .search-result-link h5,
[data-coges-theme="dark"] .search-result-link:hover h5,
[data-coges-theme="dark"] .searchPage .searchResultsKeyCount h2,
[data-coges-theme="dark"] .searchPage .box :is(.box-tag, .box-date) {
  color: var(--coges-text-primary);
}

[data-coges-theme="dark"] .searchPage .box .box-tag::before {
  background: var(--coges-text-primary);
}

[data-coges-theme="dark"] .search-result-link p {
  color: var(--coges-text-secondary);
}

/* Header: colour only. The transparent header remains photographic. */
@media (min-width: 992px) {
  [data-coges-theme="light"] header.navbar-transparent.navbar-sticky-bg-dark.navbar-sticky:not(.navbar-sticky-on):hover,
  [data-coges-theme="light"] header.navbar-transparent.navbar-sticky-bg-dark.navbar-sticky:not(.navbar-sticky-on):has(:focus-visible) {
    background-color: var(--bs-gray-800);
  }

  [data-coges-theme="dark"] header.navbar-transparent.navbar-sticky-bg-dark.navbar-sticky:not(.navbar-sticky-on):hover,
  [data-coges-theme="dark"] header.navbar-transparent.navbar-sticky-bg-dark.navbar-sticky:not(.navbar-sticky-on):has(:focus-visible) {
    background-color: var(--coges-surface-soft);
  }
}

[data-coges-theme="dark"] header:not(.navbar-transparent),
[data-coges-theme="dark"] header.navbar-sticky-on {
  background-color: var(--coges-surface-soft);
}

[data-coges-theme="dark"] header.navbar-sticky-on {
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.38);
}

[data-coges-theme="dark"] header.navbar-light .navbar-top {
  border-color: var(--coges-border-soft);
}

[data-coges-theme="dark"] header.navbar-light .navbar-top span,
[data-coges-theme="dark"] header.navbar-light .navbar-top a,
[data-coges-theme="dark"] header.navbar-light .navbar-brand,
[data-coges-theme="dark"] header.navbar-light .logo-text,
[data-coges-theme="dark"] header.navbar-light .navbar-nav .nav-link,
[data-coges-theme="dark"] header.navbar-light .nav .nav-link {
  color: var(--coges-text-primary);
}

[data-coges-theme="dark"] header.navbar-light .navbar-top a:hover,
[data-coges-theme="dark"] header.navbar-light .navbar-nav .nav-link:hover,
[data-coges-theme="dark"] header.navbar-light .navbar-nav .nav-link:focus,
[data-coges-theme="dark"] header.navbar-light .navbar-nav .nav-link.active,
[data-coges-theme="dark"] header.navbar-light .nav .nav-link:hover {
  color: var(--primary-400);
}

[data-coges-theme="dark"] header.navbar-light .navbar-toggler-icon {
  filter: invert(1) grayscale(1) brightness(2);
}

/* Header dropdowns (language/account), excluding the always-dark offcanvas. */
[data-coges-theme="dark"] header .dropdown-menu {
  --bs-dropdown-bg: var(--coges-surface);
  --bs-dropdown-color: var(--coges-text-secondary);
  --bs-dropdown-border-color: var(--coges-border);
  --bs-dropdown-divider-bg: var(--coges-border);
  --bs-dropdown-link-color: var(--coges-text-primary);
  --bs-dropdown-link-hover-color: var(--primary-400);
  --bs-dropdown-link-hover-bg: transparent;
  --bs-dropdown-link-active-color: var(--primary-400);
  --bs-dropdown-link-active-bg: transparent;
  color: var(--coges-text-secondary);
  background: var(--coges-surface);
  border-color: var(--coges-border);
}

[data-coges-theme="dark"] header .dropdown-menu .dropdown-item,
[data-coges-theme="dark"] header .dropdown-menu .dropdown-item-text {
  color: var(--coges-text-primary);
}

[data-coges-theme="dark"] header .dropdown-menu :is(h1, h2, h3, h4, h5, h6) {
  color: var(--coges-text-primary);
}

[data-coges-theme="dark"] header .dropdown-menu p {
  color: var(--coges-text-secondary);
}

[data-coges-theme="dark"] header .dropdown-menu .dropdown-item:hover,
[data-coges-theme="dark"] header .dropdown-menu .dropdown-item:focus {
  color: var(--primary-400);
  background-color: transparent !important;
}

[data-coges-theme="dark"] header .dropdown-menu .bg-white {
  background-color: var(--coges-surface-raised) !important;
}

[data-coges-theme="dark"] header .dropdown-divider {
  border-color: var(--coges-border);
}

/* All five desktop/mobile megamenus consume the same semantic contract. */
[data-coges-theme="dark"] :is(
  #companyMenuPanel,
  #servicesMenuPanel,
  #insightsMenuPanel,
  #partnersMenuPanel,
  #aboutMenuPanel
) {
  --bs-dropdown-bg: var(--coges-surface-soft);
  --bs-dropdown-color: var(--coges-text-secondary);
  --bs-dropdown-border-color: var(--coges-border);
  --bs-dropdown-divider-bg: var(--coges-border);
  --bs-dropdown-link-color: var(--coges-text-primary);
  --bs-dropdown-link-hover-color: var(--primary-400);
  --bs-dropdown-link-hover-bg: transparent;
  --bs-dropdown-link-active-color: var(--primary-400);
  --bs-dropdown-link-active-bg: transparent;
  --bs-dropdown-link-disabled-color: var(--coges-text-secondary);
  --bs-dropdown-header-color: var(--coges-text-primary);
  color: var(--coges-text-secondary);
  background: var(--coges-surface-soft);
  border-color: var(--coges-border);
  box-shadow: 0 1.25rem 2rem rgba(0, 0, 0, 0.38);
}

[data-coges-theme="dark"] .dropdown-fullwidth .megamenu-content {
  color: var(--coges-text-secondary);
  background-color: var(--coges-surface-soft);
}

[data-coges-theme="dark"] .dropdown-fullwidth .dropdown-header {
  color: var(--coges-text-primary);
}

[data-coges-theme="dark"] .dropdown-fullwidth .dropdown-item,
[data-coges-theme="dark"] .dropdown-fullwidth .submenu ul li a {
  color: var(--coges-text-primary);
}

[data-coges-theme="dark"] .dropdown-fullwidth .dropdown-item:hover,
[data-coges-theme="dark"] .dropdown-fullwidth .dropdown-item:focus,
[data-coges-theme="dark"] .dropdown-fullwidth .submenu ul li a:hover,
[data-coges-theme="dark"] .dropdown-fullwidth .submenu ul li a:focus {
  color: var(--primary-400);
  background-color: transparent;
}

[data-coges-theme="dark"] .dropdown-fullwidth .dropdown-item.active,
[data-coges-theme="dark"] .dropdown-fullwidth .dropdown-item:active,
[data-coges-theme="dark"] .dropdown-fullwidth .submenu ul li a.active {
  color: var(--primary-400) !important;
  background-color: transparent;
}

[data-coges-theme="dark"] .dropdown-fullwidth .megamenu-content :is(p, li, strong),
[data-coges-theme="dark"] .dropdown-fullwidth .submenu :is(p, li, strong) {
  color: var(--coges-text-secondary);
}

/* Services and About have a compact presentation layer with ID-scoped light
 * colours. Match that specificity here so their headings and direct links do
 * not remain dark on the dark megamenu surface. */
[data-coges-theme="dark"] #servicesMenuPanel .megamenu-direct-heading,
[data-coges-theme="dark"] #aboutMenuPanel .megamenu-direct-heading,
[data-coges-theme="dark"] #servicesMenuPanel .megamenu-direct-heading-link {
  color: var(--coges-text-primary);
}

[data-coges-theme="dark"] #servicesMenuPanel .megamenu-domain-brand {
  color: var(--coges-text-primary);
}

[data-coges-theme="dark"] #servicesMenuPanel .megamenu-domain-brand:hover,
[data-coges-theme="dark"] #servicesMenuPanel .megamenu-domain-brand:focus,
[data-coges-theme="dark"] #servicesMenuPanel .megamenu-domain-brand.active,
[data-coges-theme="dark"] #servicesMenuPanel .megamenu-domain-brand:active {
  color: var(--primary-400);
}

[data-coges-theme="dark"] #servicesMenuPanel .megamenu-direct-link,
[data-coges-theme="dark"] #aboutMenuPanel .megamenu-direct-link {
  color: var(--coges-text-primary);
}

[data-coges-theme="dark"] #servicesMenuPanel .megamenu-direct-heading-link:hover,
[data-coges-theme="dark"] #servicesMenuPanel .megamenu-direct-heading-link:focus,
[data-coges-theme="dark"] #servicesMenuPanel .megamenu-direct-link:hover,
[data-coges-theme="dark"] #servicesMenuPanel .megamenu-direct-link:focus,
[data-coges-theme="dark"] #aboutMenuPanel .megamenu-direct-link:hover,
[data-coges-theme="dark"] #aboutMenuPanel .megamenu-direct-link:focus {
  color: var(--primary-400);
  background-color: transparent;
}

[data-coges-theme="dark"] .dropdown-fullwidth ul.dropdown-menu.puped {
  color: var(--coges-text-secondary);
  background-color: var(--coges-surface);
  border-color: var(--coges-border);
}

[data-coges-theme="dark"] .dropdown-fullwidth .see-more.btn-white {
  color: var(--coges-text-primary);
  background-color: var(--coges-surface-raised);
  border-color: var(--coges-border);
}

[data-coges-theme="dark"] .dropdown-fullwidth .see-more.btn-white:hover,
[data-coges-theme="dark"] .dropdown-fullwidth .see-more.btn-white:focus {
  color: var(--coges-always-white);
  background-color: var(--coges-brand-surface);
  border-color: var(--coges-link);
}

[data-coges-theme="dark"] .dropdown-fullwidth .see-more.btn-white::before,
[data-coges-theme="dark"] .dropdown-fullwidth .see-more.btn-white::after {
  background-color: var(--coges-text-primary);
}

/* Brand/photo panels are deliberately theme-invariant. Their blue multiply
 * treatment, white copy and original CTA colours remain exactly as authored
 * in the legacy Folio/blue styles, even when the surrounding page is dark. */
[data-coges-theme="dark"] .dropdown-fullwidth .submenu-label .megamenu-image-panel.bg-primary-multiply,
[data-coges-theme="dark"] .main-wrap .credo > .bg-primary-multiply.p-4.px-y {
  background-color: var(--primary);
  mix-blend-mode: normal;
  isolation: isolate;
}

[data-coges-theme="dark"] .dropdown-fullwidth .submenu-label .megamenu-image-panel .text-white,
[data-coges-theme="dark"] .main-wrap .credo > .bg-primary-multiply.p-4.px-y .text-white {
  color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}

[data-coges-theme="dark"] .main-wrap .credo > .bg-primary-multiply.p-4.px-y .text-secondary {
  color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;
}

[data-coges-theme="dark"] .main-wrap .credo > .bg-primary-multiply.p-4.px-y .btn-primary,
[data-coges-theme="dark"] .main-wrap .credo > .bg-primary-multiply.p-4.px-y .btn-primary:focus {
  color: var(--coges-always-white);
  background-color: var(--primary);
  border-color: var(--primary);
}

[data-coges-theme="dark"] .main-wrap .credo > .bg-primary-multiply.p-4.px-y .btn-primary:hover,
[data-coges-theme="dark"] .main-wrap .credo > .bg-primary-multiply.p-4.px-y .btn-primary:active,
[data-coges-theme="dark"] .main-wrap .credo > .bg-primary-multiply.p-4.px-y .btn-primary.active {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
}

@media (max-width: 991.98px) {
  [data-coges-theme="dark"] .navbar-expand-lg .navbar-collapse {
    background: var(--coges-surface-soft);
    border-color: var(--coges-border);
    box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.38);
  }

  [data-coges-theme="dark"] .navbar-expand-lg .navbar-collapse .navbar-nav .nav-item {
    border-color: var(--coges-border);
  }

  [data-coges-theme="dark"] .navbar-expand-lg .navbar-nav .nav-item > .dropdown-menu {
    background: var(--coges-surface);
  }

  [data-coges-theme="dark"] .navbar-expand-lg .navbar-nav .nav-item > .dropdown-menu .dropdown-submenu .dropdown-menu {
    background: var(--coges-surface-raised);
  }

  [data-coges-theme="dark"] .navbar-dark.navbar-expand-lg .navbar-collapse .nav-link,
  [data-coges-theme="dark"] header.navbar-light .navbar-expand-lg .navbar-collapse .nav-link {
    color: var(--coges-text-primary);
  }

  [data-coges-theme="dark"] .coges-theme-mobile-label {
    color: var(--coges-text-primary);
  }
}

/* The toggle no longer animates anything, so it needs no reduced-motion rule. */


/* Contour de focus des champs de formulaire.
 *
 * Le navigateur peignait ici un contour de 3px quasi noir, en retrait de 2px
 * donc a l'interieur du champ. Sur le fond sombre du theme il ne signalait
 * rien : il salissait le champ sans indiquer ou l'on se trouve.
 *
 * On ne le supprime pas — un utilisateur au clavier perdrait son seul repere
 * dans le formulaire. On le remplace par un contour lisible, pose a
 * l'exterieur, dans une couleur qui suit le theme. */
/* Dans .form-line, le theme pose deja son propre indicateur : un trait de 2px
 * qui se deploie sous le champ (.focus-border) quand il recoit le focus. Le
 * contour global fait donc double emploi et dessine un rectangle epais autour
 * de la saisie. On le retire la, et seulement la : le repere subsiste. */
.form-line .form-control:focus,
.form-line .form-control:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Ailleurs, aucun trait ne prend le relais : on garde un contour, simplement
 * plus discret que l'anneau blanc de 3px double d'un halo de 5px. */
.form-control:not(.form-line .form-control):focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
  outline: 2px solid var(--coges-link, #3d6dff) !important;
  outline-offset: 2px;
  box-shadow: none;
}


/* Champ de recherche en mode sombre.
 *
 * .input-text-black-stroke input impose color: var(--bs-dark) !important —
 * du texte sombre, avec un contour gris de 1px autour des glyphes. Concu pour
 * du texte sombre sur fond clair, l'ensemble devient illisible ici : la saisie
 * restait noire sur le fond sombre du champ.
 *
 * Le !important de la regle d'origine oblige a en poser un ici. Le contour
 * prend la couleur du texte plutot que de disparaitre : il epaissit legerement
 * les glyphes, ce que cherchait l'effet, sans les empater d'un halo gris.
 *
 * Le placeholder etait a opacity 0.2 sur un gris — invisible sur fond sombre. */
[data-coges-theme="dark"] .input-text-black-stroke input {
  color: var(--coges-text-primary) !important;
  -webkit-text-stroke-color: var(--coges-text-primary);
}

[data-coges-theme="dark"] .input-text-black-stroke input::placeholder,
[data-coges-theme="dark"] .input-text-black-stroke input::-webkit-input-placeholder {
  color: var(--coges-text-secondary);
  opacity: 0.6;
}


/* Cartes de listing des pages index : pas de panneau en mode sombre.
 *
 * Ces cartes n'ont aucun habillage en mode clair — --bs-card-bg vaut #fff,
 * --bs-card-border-width vaut 0, et la section qui les porte n'a pas de fond :
 * blanc sur blanc, sans bordure, la carte est invisible. Le dessin est donc
 * « image puis texte posés sur la page », pas « panneau ».
 *
 * Leur card-body porte px-0 : le texte affleure le bord gauche. Un panneau
 * visible sans rembourrage horizontal se lit comme un defaut.
 *
 * La regle generale du theme leur donnait --coges-surface (#21252d) sur un
 * fond de page a #12151d : un panneau apparaissait en sombre la ou le mode
 * clair n'en montre aucun. On rend le fond transparent pour retrouver le
 * meme dessin dans les deux themes.
 *
 * Limite aux trois classes de body qui portent ce motif de carte. Les autres
 * index — companiesIndexPage notamment — ont des cartes rembourrees dont le
 * panneau est voulu, et ne sont pas touchees. */
[data-coges-theme="dark"] body.blogindex .main-wrap .card:not(.bg-dark):not(.bg-primary),
[data-coges-theme="dark"] body.categoryindex .main-wrap .card:not(.bg-dark):not(.bg-primary),
[data-coges-theme="dark"] body.tagindex .main-wrap .card:not(.bg-dark):not(.bg-primary) {
  --bs-card-bg: transparent;
  background-color: transparent;
}


/* Badges gris en mode sombre : puce sombre a texte blanc.
 *
 * En clair, .bg-secondary donne #d0d4d9, une puce discrete qui ne se detache
 * qu'a 1,49:1 du fond blanc. La meme puce claire sur la page sombre ressortait
 * a 12,25:1 — un bloc lumineux plus voyant que le titre qu'il accompagne.
 *
 * #2c3340 se detache de la page a 1,44:1, soit la discretion du mode clair,
 * et porte du blanc a 12,69:1.
 *
 * Limite a .badge et non pose sur .bg-secondary en general : --bs-secondary-rgb
 * sert aussi a .text-secondary (color: rgba(var(--bs-secondary-rgb), ...)).
 * Redefinir la variable en sombre y peindrait du texte #2c3340 sur un fond
 * #12151d, donc invisible. La classe .text-bg-secondary, elle, est distincte
 * et code ses couleurs en dur : elle n'est pas concernee.
 *
 * !important necessaire : .bg-secondary pose deja son fond en !important. */
[data-coges-theme="dark"] .badge.bg-secondary {
  color: #fff;
  background-color: #2c3340 !important;
}


/* Liens des cartes sur les pages index, en mode sombre.
 *
 * Le mode clair les rend en texte sombre — --bs-gray-800 pour le titre,
 * --bs-body-color pour l'image et le chapo — et les passe au bleu au survol
 * (h5 > a:hover pose var(--primary)). En sombre, la regle generique
 * .main-wrap a:not(.btn):not(.text-white) les peignait tous en --coges-link :
 * des liens bleus en permanence, la ou le clair montre du texte.
 *
 * Blanc au repos, bleu au survol : le meme contrat que le mode clair.
 *
 * La specificite est le point delicat. La regle generique pese (0,4,1) ; une
 * regle visant a.index-iten-lead-link ne pese que (0,3,1) et perd. Le passage
 * par body:is(...) .card monte a (0,6,2), ce qui tranche sans ambiguite.
 *
 * Le survol porte !important car .text-primary-hover a:hover, qui vise les
 * liens d'etiquette, en pose deja un.
 *
 * Le bleu du survol est --primary, celui des liens de megamenu : ces liens
 * suivent la convention deja etablie par le menu plutot que d'en introduire
 * une seconde. A noter qu'il ne pese que 4,20:1 sur la page sombre, sous le
 * seuil AA de 4,5:1 ; --coges-link y atteindrait 8,87:1. Uniformite choisie
 * en connaissance de cause. */
[data-coges-theme="dark"] body:is(.blogindex, .categoryindex, .companiesIndexPage, .tagindex) .main-wrap .card a:not(.btn):not(.text-white) {
  color: var(--coges-text-primary);
}

[data-coges-theme="dark"] body:is(.blogindex, .categoryindex, .companiesIndexPage, .tagindex) .main-wrap .card a:not(.btn):not(.text-white):hover,
[data-coges-theme="dark"] body:is(.blogindex, .categoryindex, .companiesIndexPage, .tagindex) .main-wrap .card a:not(.btn):not(.text-white):focus {
  color: var(--primary-400) !important;
}


/* Traits des boutons .btn-line en mode sombre.
 *
 * Ces deux pseudo-elements dessinent les traits de part et d'autre du
 * libelle. Leur couleur depend de la variante du bouton : .text-dark pose
 * #19191c, invisible sur la page sombre, et le .btn-line nu retombe sur
 * var(--bs-body-color), soit --coges-text-secondary (#c7ccd3) — visible mais
 * grisatre. Les deux passent au blanc.
 *
 * .btn-white et .btn-light sont exclus : ces boutons ont un fond clair, et
 * leurs traits sombres y sont corrects dans les deux themes. Les autres
 * variantes a trait sombre (btn-secondary, btn-warning) ne sont employees
 * nulle part dans les gabarits.
 *
 * Specificite (0,4,1), au-dessus du .btn-line.text-dark:before d'origine
 * (0,2,1) qui regit le bouton « Read more » des cartes. */
[data-coges-theme="dark"] .btn-line:not(.btn-white):not(.btn-light)::before,
[data-coges-theme="dark"] .btn-line:not(.btn-white):not(.btn-light)::after {
  background: #fff;
}


/* Convention de couleur des liens en mode sombre.
 *
 * Blanc au repos, --primary au survol : la regle etablie par les megamenus,
 * etendue a l'ensemble du site — contenu, fil d'Ariane, pagination, cartes.
 *
 * Le pied de page et le panneau lateral gardent leur palette propre. Tous
 * deux portent bg-dark dans le gabarit : ils sont sombres dans les deux
 * themes, et la feuille de theme ne les touche pas du tout. Leurs gris ne
 * sont donc pas un ecart du mode sombre mais un choix du site.
 *
 * Les liens ne sont pas soulignes (text-decoration: none). Le passage au
 * blanc ne degrade pas leur reperage pour autant : face au texte courant
 * (#c7ccd3), l'ancien bleu #9bb2ff ne se detachait qu'a 1,27:1, le blanc
 * atteint 1,54:1. */


/* Lien actif de la pagination : pas de fondu au survol.
 *
 * Ce lien porte deja var(--primary) en fond, avec un numero blanc dessus.
 * La regle generique de survol lui imposait var(--primary) comme couleur de
 * texte, soit exactement son propre fond : combine a la transition de 0,15 s
 * sur color, le numero s'effacait en fondu au passage de la souris.
 *
 * Le texte reste donc blanc au survol. Rien d'autre ne change d'etat — le
 * fond et la bordure de l'item actif l'emportent deja sur .page-link:hover —
 * il n'y a donc plus aucune animation.
 *
 * Specificite (0,7,0), au-dessus de la regle generique (0,4,1). */
[data-coges-theme="dark"] .main-wrap .pagination .page-item.active .page-link:hover,
[data-coges-theme="dark"] .main-wrap .pagination .page-item.active .page-link:focus {
  color: var(--coges-text-primary);
}


/* Liens qui enveloppent un bloc de texte (section « Last Insights »).
 *
 * Le <a> reagit deja au survol, mais rien de visible n'en herite : ses
 * enfants portent leur propre couleur, et les regles de survol d'origine
 * perdent contre celles du theme sombre.
 *
 *   h3  — repos  .main-wrap .h4                (0,3,0)
 *         survol .storyTitle :is(h3, h4):hover (0,2,1)  perd
 *   p   — repos  .main-wrap p                  (0,2,1)
 *         survol .storyTitle p:hover           (0,2,1)  egalite, mais la
 *                regle du theme vient plus loin dans la cascade
 *
 * Ces regles d'origine ne se declenchent d'ailleurs qu'au survol de l'enfant
 * lui-meme, pas du lien entier.
 *
 * On colore donc les titres et paragraphes contenus dans un lien survole.
 * Specificite (0,5,2), au-dessus des deux regles de repos.
 *
 * Le mode clair n'etait pas touche : le h3 n'y a qu'une regle d'element
 * (0,0,1), que le survol d'origine battait sans peine. */
[data-coges-theme="dark"] .main-wrap a:not(.btn):hover :is(h1, h2, h3, h4, h5, h6),
[data-coges-theme="dark"] .main-wrap a:not(.btn):hover p,
[data-coges-theme="dark"] .main-wrap a:not(.btn):focus :is(h1, h2, h3, h4, h5, h6),
[data-coges-theme="dark"] .main-wrap a:not(.btn):focus p {
  color: var(--primary-400);
}


/* Meme exemption en mode sombre pour la couleur.
 *
 * La regle de blue.css pose color: inherit avec une specificite de (0,0,2),
 * insuffisante face au .main-wrap p du theme (0,2,1) : le titre se serait
 * rendu en --coges-text-secondary au lieu de --coges-text-primary, alors que
 * le <p> constitue tout son contenu. Specificite (0,2,2). */
[data-coges-theme="dark"] .main-wrap :is(h1, h2, h3, h4, h5, h6) > p {
  color: inherit;
}