/* ============================================================
   global.css — Big Bang 360
   Aligned with Big Bang Design System (colors_and_type.css v2)
   Primary colors: Orange #F15E32 · Blue #0F97C7 · Grey #58585A
   Fonts: Open Sans (web) + Bebas Neue (display/Intro fallback)
   Hard rules: NO gradients. PNG logos only. No Wigrum in UI.
   ============================================================ */

/* ── Reset & Variables ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Couleur d erreur des formulaires : utilisee depuis le depart par .form-error-msg
     et .form-input.error mais jamais definie, donc les messages s affichaient en gris
     (Lea n a pas vu le refus d une adresse Gmail, 2026-10-07). */
  --c-error: #E74C3C;
  /* ---- PRIMARY COLORS (design system exact) ---- */
  --bb-orange:        #F15E32;
  --bb-orange-hover:  #D9482A;
  --bb-orange-active: #BF3E22;
  --bb-orange-50:     #F9AB88;
  --bb-orange-25:     #FDD3BD;

  --bb-blue:          #0F97C7;
  --bb-blue-hover:    #0C7DA6;
  --bb-blue-active:   #096584;
  --bb-blue-50:       #97C1DE;
  --bb-blue-25:       #C8DDED;

  --bb-grey:          #58585A;
  --bb-grey-50:       #A7A9AC;
  --bb-grey-25:       #D1D2D4;

  /* ---- ALIASES (keep compatibility with existing pages) ---- */
  --c-primary:        var(--bb-orange);
  --c-primary-hover:  var(--bb-orange-hover);
  --c-primary-light:  var(--bb-orange-25);
  --c-accent:         var(--bb-blue);
  --c-accent-light:   var(--bb-blue-25);
  --c-gray:           var(--bb-grey);

  /* ---- NEUTRALS ---- */
  --c-bg:             #FFFFFF;
  --c-bg-2:           #F5F5F5;
  --c-bg-card:        #FFFFFF;
  --c-bg-dark:        #58585A;
  --c-border:         #D1D2D4;
  --c-border-soft:    #E5E5E7;
  --c-border-dark:    rgba(255,255,255,0.15);
  --c-text:           #1A1A1A;
  /* Texte courant : #2F2F2F comme le live (classe txt_dark relevée le
     2026-09-07) — le gris charte #58585A reste disponible via --bb-grey. */
  --c-text-2:         #2F2F2F;
  --c-text-3:         #A7A9AC;
  --c-white:          #FFFFFF;

  /* ---- SEMANTIC TOKENS ---- */
  --color-heading:      var(--bb-blue);
  --color-heading-alt:  var(--bb-orange);
  --color-link:         var(--bb-blue);
  --color-link-hover:   var(--bb-blue-hover);
  --color-action:       var(--bb-orange);
  --color-action-hover: var(--bb-orange-hover);

  /* ---- TYPOGRAPHY ---- */
  --font-sans: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; /* pile système du live (Computed relevé par Léa) — Open Sans reste chargée pour les widgets qui la déclarent */
  --font-display: 'Bebas Neue', 'Arial Black', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* ---- SPACING (8-pt grid) ---- */
  --space-1: 0.25rem;   /* 4px  */
  --space-2: 0.5rem;    /* 8px  */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 2rem;      /* 32px */
  --space-8: 4rem;      /* 64px */
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---- BORDER RADIUS ---- */
  --r-sm:   0.25rem;   /* 4px  — inputs */
  --r-md:   0.375rem;  /* 6px  — buttons */
  --r-lg:   0.375rem;  /* 6px  */
  --r-xl:   0.5rem;    /* 8px  — cards */
  --r-2xl:  0.75rem;   /* 12px — hero */
  --r-full: 9999px;

  /* ---- SHADOWS (restrained, no glow) ---- */
  --shadow-sm:   0 1px 2px rgba(15,23,42,.04);
  --shadow-md:   0 4px 12px rgba(15,23,42,.06);
  --shadow-lg:   0 12px 32px rgba(15,23,42,.08);
  --shadow-card: 0 1px 2px rgba(15,23,42,.04);

  /* ---- TRANSITIONS ---- */
  --ease-out:       cubic-bezier(.22,.61,.36,1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:  150ms;
  --duration-base:  180ms;
  --duration-slow:  240ms;

  /* ---- LAYOUT ---- */
  --max-w:    1240px;
  --nav-h:    72px;
  --prenav-h: 36px;
}

/* ── Base ── */
html {
  font-family: var(--font-sans);
  background-color: var(--c-bg);
  color: var(--c-text);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
}

/* height:auto est indispensable : avec des attributs width/height sur la balise,
   max-width seul garde la hauteur fixe et etire l image des que la largeur est
   contrainte (logos etires sur mobile, revue SEO du 2026-09-22). */
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul, ol { list-style: none; }

/* ── Typography Scale ── */
.t-hero    { font-size: clamp(2.25rem, 5vw, 3.7rem);  font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; }
.t-display { font-size: clamp(1.75rem, 3.5vw, 3rem);  font-weight: 800; line-height: 1.15; letter-spacing: -0.015em; }
.t-h1      { font-size: clamp(1.5rem, 2.5vw, 2.25rem); font-weight: 700; line-height: 1.2; }
.t-h2      { font-size: clamp(1.25rem, 2vw, 1.875rem); font-weight: 700; line-height: 1.3; color: var(--c-text-2); }
.t-h3      { font-size: clamp(1rem, 1.5vw, 1.375rem);  font-weight: 600; line-height: 1.35; }
.t-h4      { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
.t-body    { font-size: 1rem; line-height: 1.5; font-weight: 400; }
.t-body-sm { font-size: 0.875rem; line-height: 1.6; }
.t-label   { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.t-caption { font-size: 0.75rem; color: var(--c-text-3); }

/* Texte coloré accent */
.t-accent  { color: var(--c-primary); }
.t-teal    { color: var(--c-accent); }

/* ── Layout ── */
.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

@media (max-width: 768px) {
  .container { padding-inline: var(--space-4); }
}

.section    { padding-block: var(--space-16); }
.section-sm { padding-block: var(--space-12); }
.section-lg { padding-block: var(--space-20); }

/* ── Grid ── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ── Flex ── */
.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.flex-col    { display: flex; flex-direction: column; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.75rem 1.5rem;
  border-radius: var(--r-sm);
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-sans);
  transition: all var(--duration-base) var(--ease-out);
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid transparent;
}

.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--c-primary);
  color: var(--c-white);
  border-color: var(--c-primary);
}
.btn-primary:hover {
  background: var(--c-primary-hover);
  border-color: var(--c-primary-hover);
}

.btn-secondary {
  background: var(--c-white);
  color: var(--c-accent);
  border-color: var(--c-accent);
}
.btn-secondary:hover {
  background: var(--bb-blue-25);
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.btn-dark {
  background: var(--c-bg-dark);
  color: var(--c-white);
  border-color: var(--c-bg-dark);
}
.btn-dark:hover { background: #444444; border-color: #444444; }

.btn-ghost {
  background: transparent;
  color: var(--c-text-2);
  border-color: transparent;
  padding: 0.5rem 0.75rem;
}
.btn-ghost:hover { color: var(--c-primary); }

.btn-sm  { padding: 0.5rem 1rem;  font-size: 0.875rem; }
.btn-lg  { padding: 0.875rem 2rem; font-size: 1.0625rem; }

/* ── Cards ── */
.card {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--space-8);
  transition: box-shadow var(--duration-base), transform var(--duration-base);
  position: relative;
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.card-sm { padding: var(--space-6); border-radius: var(--r-lg); }

/* ── Pre-Navigation Bar ── */
.prenav {
  height: var(--prenav-h);
  /* comme le live : barre blanche, liens courriel/telephone en orange
     (capture Léa, barre du haut de bigbang360.com) */
  background: var(--c-bg);
  color: var(--c-text-2);
  font-size: 0.8125rem;
  display: flex;
  align-items: center;
}

/* .prenav est en display:flex : sans width:100%, son .container (item flex)
   retombe a la largeur du contenu et margin:auto le CENTRE — le groupe
   courriel/telephone/langue paraissait centre au lieu d'etre cale a droite
   (retour Léa 2026-09-14). */
.prenav > .container { width: 100%; }
.prenav-inner {
  display: flex;
  align-items: center;
  /* tout le groupe (courriel, telephone, langue) aligne a droite comme le live */
  justify-content: flex-end;
  gap: var(--space-6);
  width: 100%;
}

.prenav-contact {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.prenav-contact a {
  color: var(--c-primary);
  font-weight: 600;
  transition: color var(--duration-fast);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.prenav-contact a:hover { color: var(--c-primary-dark, #d24a20); }

@media (max-width: 768px) {
  .prenav { display: none; }
}

/* Cibles d'ancres internes (sommaires « How can we help? », FAQ) : degage la
   barre de navigation sticky (--nav-h) au scroll vers un id. */
h1[id], h2[id], h3[id], h4[id], section[id] {
  scroll-margin-top: calc(var(--nav-h) + var(--space-6));
}

/* ── Navigation ── */
.nav {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  /* Les mega-dropdowns absolus (visibility:hidden) participent au layout et
     etendaient le scrollWidth du document sous 1536px (sweep 2026-09-14 :
     +127px sur 1139 pages). clip horizontal seulement : l'axe vertical reste
     visible pour laisser les panneaux se deployer sous la barre. */
  overflow-x: clip;
  overflow-y: visible;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
  transition: box-shadow var(--duration-base);
}

.nav.scrolled {
  box-shadow: 0 2px 16px rgba(0,0,0,0.1);
}

/* La nav a plus d'items que le reste du site (contenu chrome, pas du contenu
   éditorial) : elle a besoin de plus de largeur que le container standard
   1240px pour ne pas comprimer/couper les items et les boutons. */
.nav .container {
  max-width: 1440px;
  /* .nav est display:flex, donc son unique enfant .container se comporte comme
     un flex item et se réduit à la taille de son contenu (shrink-to-fit) au
     lieu de remplir l'espace disponible jusqu'à max-width — sans width:100%
     ici, la règle max-width ci-dessus n'a aucun effet réel. */
  width: 100%;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.nav-logo img {
  height: 36px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 var(--space-2);
  min-width: 0;
  /* Ne jamais rétrécir en silence : un flex-shrink par défaut sur cette rangée
     peut comprimer chaque item sous sa largeur de texte naturelle (nowrap)
     sans que .nav-links elle-même ne rapetisse en apparence — le texte
     déborde alors visuellement et chevauche .nav-actions, un vrai bug déjà
     rencontré. flex-shrink:0 force un vrai débordement mesurable plutôt
     qu'un chevauchement de texte invisible dans les mesures de layout. */
  flex-shrink: 0;
}

.nav-link {
  /* display:flex : sans ca, les entrees SANS sous-menu (IA, Carrieres) sont des
     boites en ligne et retombent 2,6px plus bas que les entrees a sous-menu,
     qui sont des boites flex. Aligne les 9 libelles sur la meme ligne de base. */
  display: flex;
  align-items: center;
  color: var(--c-text-2);
  font-size: 0.875rem;
  font-weight: 500;
  /* Espacement horizontal des entrees du menu. Retour Lea 2026-09-14 puis
     2026-09-18 (« il doit y avoir plus d'espace dans le menu superieur, les
     mots sont trop colles ») : le pas texte-a-texte passe de 16 a 32 px
     au-dela de 1600 px (14 px de padding de chaque cote + 4 px de gap de
     rangee). La bande compacte 1400-1599 est reglee plus bas, elle aussi
     fortement desserree (8 -> 28 px). Mesures Playwright : aucun
     debordement horizontal et le CTA reste entier a 1025 / 1280 / 1400 /
     1440 / 1535 / 1600 / 1920 px, en EN, FR et ES. */
  padding: var(--space-2) 0.875rem;
  border-radius: var(--r-sm);
  transition: color var(--duration-fast), background var(--duration-fast);
  white-space: nowrap;
}
.nav-link:hover,
.nav-link[aria-current="page"] {
  color: var(--c-primary);
}

.nav-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

.nav-lang {
  display: flex;
  gap: var(--space-1);
  border-left: 1px solid var(--c-border);
  padding-left: var(--space-3);
}
/* Le sélecteur de langue de la pré-nav (barre du haut) fait déjà ce travail
   au-delà de 768px ; celui-ci est redondant et contribue au débordement de
   la barre de menu principale sur les résolutions d'ordinateur portable. */
@media (min-width: 769px) {
  .nav-actions .nav-lang { display: none; }
}
.nav-lang a {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-text-3);
  padding: 0.25rem 0.5rem;
  border-radius: var(--r-sm);
  transition: color var(--duration-fast);
  text-transform: uppercase;
}
.nav-lang a:hover          { color: var(--c-text); }
.nav-lang a[aria-current="true"] { color: var(--c-primary); }

/* Sélecteur de langue compact (globe + chevron) de la pré-nav, calqué sur
   le site live : remplace les liens EN/FR/ES épelés. */
.nav-lang-select { position: relative; }
.nav-lang-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-text-2);
  padding: 0.25rem 0.375rem;
  border-radius: var(--r-sm);
  transition: color var(--duration-fast);
}
.nav-lang-trigger:hover { color: var(--c-primary); }
.nav-lang-globe { font-size: 0.9375rem; line-height: 1; }
.nav-lang-trigger .nav-chevron { transform: none; }
.nav-lang-select:hover .nav-lang-trigger .nav-chevron,
.nav-lang-select:focus-within .nav-lang-trigger .nav-chevron,
.nav-lang-select.open .nav-lang-trigger .nav-chevron { transform: rotate(180deg); }

.nav-lang-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  padding: var(--space-2);
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-fast), visibility var(--duration-fast);
  z-index: 210;
}
.nav-lang-select:hover .nav-lang-dropdown,
.nav-lang-select:focus-within .nav-lang-dropdown,
.nav-lang-select.open .nav-lang-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
}
.nav-lang-dropdown a {
  padding: 0.5rem 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-text-2);
  border-radius: 6px;
  text-decoration: none;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.nav-lang-dropdown a:hover { background: var(--c-primary-light); color: var(--c-primary); }
.nav-lang-dropdown a[aria-current="true"] { color: var(--c-primary); font-weight: 700; }

/* ── Dropdown / Mega-menu ── */
.nav-item { position: relative; }

/* Libelle parent = VRAI lien vers la page d'apercu + chevron separe qui ouvre
   le panneau (demande agence SEO 2026-09-23 : « most of the top-level items
   are no longer links to their landing pages »). Le couple lien+chevron doit
   conserver l'espacement demande par Lea (pas texte-a-texte de 32px au-dela de
   1600px) : le lien porte le padding de GAUCHE (0.875rem), le bouton chevron
   porte le padding de DROITE, la somme reste celle d'un ancien .nav-link-btn. */
.nav-parent { display: flex; align-items: center; }
.nav-parent-link {
  padding-right: 0.125rem;
}
.nav-parent-toggle {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-text-2);
  padding: var(--space-2) 0.875rem var(--space-2) 0.125rem;
  border-radius: var(--r-sm);
  transition: color var(--duration-fast);
}
.nav-parent:hover .nav-parent-toggle,
.nav-parent-toggle:hover,
.nav-parent-link.active + .nav-parent-toggle { color: var(--c-primary); }

.nav-chevron { transition: transform var(--duration-fast); flex-shrink: 0; }
.nav-item.open .nav-chevron,
.nav-item:hover .nav-chevron { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute;
  /* Pas d'espace entre le déclencheur et le panneau : un vrai espace vide (même
     petit) casse la chaîne :hover quand la souris se déplace du bouton vers le
     menu, ce qui referme le menu au milieu du geste. */
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10);
  padding: var(--space-3);
  min-width: 230px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-base), transform var(--duration-base), visibility var(--duration-base);
  z-index: 200;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown,
.nav-item.open .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* Les panneaux des derniers items, centres sous leur declencheur, sortiraient
   de l'ecran a droite (et .nav les clippe depuis le correctif overflow-x) :
   on les ancre au bord droit de leur item. */
.nav-links .nav-item:nth-last-child(-n+3) .nav-dropdown {
  left: auto;
  right: 0;
  transform: translateY(6px);
}
.nav-links .nav-item:nth-last-child(-n+3):hover .nav-dropdown,
.nav-links .nav-item:nth-last-child(-n+3):focus-within .nav-dropdown,
.nav-links .nav-item:nth-last-child(-n+3).open .nav-dropdown {
  transform: translateY(0);
}

.nav-mega {
  left: 0;
  transform: translateX(0) translateY(6px);
  min-width: 520px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  padding: var(--space-5);
}
.nav-item:hover .nav-mega,
.nav-item:focus-within .nav-mega,
.nav-item.open .nav-mega { transform: translateX(0) translateY(0); }

/* Variante large (3 colonnes) pour les mega-menus avec plus de sections, ex: Solutions */
.nav-mega-wide {
  grid-template-columns: repeat(3, minmax(190px, 1fr));
  min-width: 720px;
}

.nav-dropdown-col { display: flex; flex-direction: column; gap: 2px; }

.nav-dropdown-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-3);
  padding: 0.25rem 0.625rem 0.5rem;
}

.nav-dropdown-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0.5rem 0.625rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background var(--duration-fast);
}
.nav-dropdown-item:hover,
.nav-dropdown-item.active,
/* Un trigger de flyout reste en surbrillance tant que son flyout est ouvert,
   pas seulement quand la souris est littéralement dessus (elle est souvent
   plus loin, dans le panneau descendant) — comme sur le site live. */
.nav-dropdown-item-parent:hover > .nav-dropdown-item-flyout-trigger,
.nav-dropdown-item-parent:focus-within > .nav-dropdown-item-flyout-trigger {
  background: var(--c-primary-light);
}
.nav-dropdown-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--c-text);
  transition: color var(--duration-fast);
}
.nav-dropdown-item:hover .nav-dropdown-label,
.nav-dropdown-item.active .nav-dropdown-label,
.nav-dropdown-item-parent:hover > .nav-dropdown-item-flyout-trigger .nav-dropdown-label,
.nav-dropdown-item-parent:focus-within > .nav-dropdown-item-flyout-trigger .nav-dropdown-label { color: var(--c-primary); }
.nav-dropdown-desc { font-size: 0.75rem; color: var(--c-text-3); line-height: 1.4; }

/* Flyout niveau 3 (ex: Solutions > Cloud Solutions > ERP > NetSuite ERP) */
.nav-dropdown-item-parent { position: relative; }
.nav-dropdown-item-flyout-trigger {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.nav-flyout-chevron { flex-shrink: 0; opacity: 0.5; color: var(--c-text-3); }
.nav-flyout {
  position: absolute;
  top: calc(-1 * var(--space-3));
  left: 100%;
  margin-left: 0;
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10);
  padding: var(--space-3);
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-fast), visibility var(--duration-fast);
  z-index: 220;
}
/* Combinateur d'enfant direct (>) obligatoire : le menu se déplie maintenant
   sur plusieurs niveaux imbriqués (flyout dans un flyout, ex. Solutions >
   Cloud Solutions > ERP > Oracle NetSuite). Un sélecteur descendant simple
   survolerait le premier niveau et révélerait TOUS les flyouts imbriqués en
   dessous d'un coup, pas seulement celui réellement survolé. */
.nav-dropdown-item-parent:hover > .nav-flyout,
.nav-dropdown-item-parent:focus-within > .nav-flyout {
  opacity: 1; visibility: visible; pointer-events: auto;
}

/* ── Accordeon mobile ──
   Le libelle parent est un <a> et le chevron un <button> VOISIN (avant, le <a>
   etait imbrique DANS le <button> : HTML invalide, et le lecteur d'ecran
   n'annoncait qu'un seul controle pour deux actions). La rangee aligne les
   deux, chacun avec sa propre cible tactile. */
.nav-mobile-item { border-bottom: 1px solid var(--c-border); }
.nav-mobile-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.nav-mobile-trigger,
.nav-mobile-subtoggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  /* --c-text-3 (#A7A9AC) sur blanc plafonne a 2,4:1 : sous le minimum de 3:1
     exigé pour un pictogramme porteur de sens. */
  color: var(--c-text-2);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
}
/* Cible tactile confortable, separee du lien parent qui reste tapable. */
.nav-mobile-trigger { width: 48px; align-self: stretch; }
.nav-mobile-subtoggle { width: 40px; min-height: 40px; }
.nav-mobile-trigger[aria-expanded="true"],
.nav-mobile-subtoggle[aria-expanded="true"] { color: var(--c-primary); }
.nav-mobile-trigger[aria-expanded="true"] .nav-chevron,
.nav-mobile-subtoggle[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
.nav-mobile-link {
  display: block;
  padding: var(--space-4) var(--space-2) var(--space-4) var(--space-4);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--c-text);
  text-decoration: none;
  flex: 1;
  min-width: 0;
  text-align: left;
}
.nav-mobile-link:hover { color: var(--c-primary); }
.nav-mobile-sub {
  padding: var(--space-1) var(--space-2) var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* display:flex ci-dessus gagne sur le display:none par défaut de [hidden]
   (les styles auteur l'emportent sur les styles user-agent) — sans cette
   règle, l'accordéon mobile reste toujours déplié, attribut hidden ignoré. */
.nav-mobile-sub[hidden] {
  display: none;
}
/* Sous-groupes replies par defaut : sans ca le groupe Solutions deployait
   d'un coup 115 sous-liens (100 en FR), soit 5713px de haut a 360px. */
.nav-mobile-subgroup {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: var(--space-3);
  padding-left: var(--space-2);
  border-left: 2px solid var(--c-border);
}
.nav-mobile-subgroup[hidden] { display: none; }
.nav-mobile-row--sub { gap: 2px; }
.nav-mobile-subtitle {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-3);
  padding: var(--space-3) 0.75rem 0.25rem;
}
.nav-mobile-sub-link {
  display: block;
  flex: 1;
  min-width: 0;
  padding: 0.625rem 0.75rem;
  font-size: 0.9375rem;
  color: var(--c-text-2);
  text-decoration: none;
  border-radius: var(--r-sm);
}
.nav-mobile-sub-link:hover { background: var(--c-primary-light); color: var(--c-primary); }
/* La hierarchie passe par l'indentation et le filet de gauche, pas par un gris
   plus pale : --c-text-3 sur blanc ne tient pas le contraste AA (2,4:1). */
.nav-mobile-sub-link--child {
  font-size: 0.875rem;
}

/* Mobile toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
  border-radius: var(--r-sm);
  background: transparent;
}
.nav-toggle span {
  width: 22px; height: 2px;
  background: var(--c-text);
  border-radius: 2px;
  transition: all var(--duration-base);
  display: block;
}

/* Seuil vérifié empiriquement (Playwright, mesure de collision réelle entre
   .nav-links et .nav-actions, pas juste scrollWidth qui compte aussi les
   panneaux de dropdown/flyout invisibles [visibility:hidden] non pertinents
   visuellement) : après suppression du bouton "Free assessment" en double du
   header (gardé uniquement comme lien secondaire dans les dropdowns), les 9
   items + bouton "Get in touch" tiennent sans chevauchement jusqu'à 769px.
   Seuil fixé à 1024px (marge de sécurité), très proche du comportement du
   site live réel. */
/* Seuil du burger. L'agence SEO (2026-09-23) : « The full menu only appears on
   screens 1400px and wider, so most laptops see the mobile menu ». Le menu
   complet descend donc a 1280px. Verifie au Playwright en EN/FR/ES a 1280 /
   1366 / 1440 / 1535 / 1600 / 1920 : aucun debordement de document, aucun
   chevauchement entre la rangee de liens et le bouton CTA.
   Le bouton Get in touch reste TOUJOURS visible (demande Léa 2026-09-14),
   y compris en mode burger. */
@media (max-width: 1279px) {
  .nav-links  { display: none; }
  .nav-toggle { display: flex; }
}
/* Bande compacte : la typo et le CTA restent un cran plus petits qu'au-dela
   de 1600px, mais l'espacement entre les mots n'est plus sacrifie (retour
   Lea 2026-09-18). Pas texte-a-texte : 2 + 13 + 13 = 28px, contre 8px avant. */
@media (min-width: 1280px) and (max-width: 1599px) {
  .nav-link { font-size: 0.8125rem; padding: var(--space-2) 0.8125rem; }
  .nav-parent-link { padding-right: 0.125rem; }
  .nav-parent-toggle { padding: var(--space-2) 0.8125rem var(--space-2) 0.125rem; }
  .nav-links { gap: 2px; margin: 0 4px; }
  .nav-actions { gap: 4px; }
  .nav-actions .btn { padding: 8px 12px; font-size: 0.8125rem; }
}
/* Sous-bande 1280-1399 : 160px de largeur utile en moins qu'a 1440, pour la
   MEME rangee de 9 entrees. On ne resserre que ce qu'il faut pour que le pire
   cas (francais, libelles les plus longs) garde de la marge devant le CTA :
   logo un cran plus petit, marges de la rangee reduites. Le pas texte-a-texte
   reste a 2 + 11 + 11 = 24px, le menu reste aere (demande Lea 2026-09-14 puis
   2026-09-18 : « les mots sont trop colles »). */
@media (min-width: 1280px) and (max-width: 1399px) {
  .nav-link { font-size: 0.78125rem; padding: var(--space-2) 0.6875rem; }
  .nav-parent-toggle { padding: var(--space-2) 0.6875rem var(--space-2) 0.125rem; }
  .nav-links { margin: 0 2px; }
  /* Gouttieres de la barre seule (pas du contenu) : 20px au lieu de 32px. */
  .nav .container { padding-inline: var(--space-5); }
  /* !important : la hauteur du logo est posee en style inline sur la balise. */
  .nav-logo img { height: 32px !important; }
}

/* ── Tiroir mobile ──
   Avant : panneau opaque occupant tout l'ecran sous la barre, sans bouton de
   fermeture (retour agence SEO 2026-09-23 : « The open menu takes up almost
   the whole screen and the close state is not very obvious »). Maintenant :
   tiroir lateral de largeur bornee, voile sombre derriere, en-tete collant
   avec une croix de fermeture, corps qui defile seul. */
.nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(20, 22, 26, 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-base), visibility var(--duration-base);
  z-index: 110;
}
.nav-scrim.open { opacity: 1; visibility: visible; pointer-events: auto; }

.nav-mobile {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  /* 86vw : une bande de la page reste visible a cote du tiroir, pour qu'on
     comprenne d'un coup d'oeil qu'il s'agit d'un panneau superpose et non de
     la page entiere (retour agence SEO : « takes up almost the whole screen »).
     Sur tablette/portable en mode burger, le tiroir se cale a 400px. */
  width: min(400px, 86vw);
  max-width: 100vw;
  background: var(--c-white);
  z-index: 120;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--c-border);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
  /* Ferme : hors ecran ET hors de l'ordre de tabulation (visibility:hidden),
     sinon les ~180 liens du menu restent focalisables derriere la page.
     La visibilite ne doit PAS etre interpolee : pendant une transition sur
     `visibility`, la valeur calculee reste `hidden` a l'instant 0, ce qui fait
     echouer le deplacement du focus vers le bouton de fermeture. On la commute
     donc d'un coup (delai 0 a l'ouverture, delai = duree a la fermeture, pour
     que le tiroir reste visible le temps de sortir de l'ecran). */
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--duration-base), visibility 0s linear var(--duration-base);
}
.nav-mobile.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--duration-base), visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .nav-mobile { transition: none; }
}

.nav-mobile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
}
.nav-mobile-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
/* Fermeture explicite : croix pleine, contrastee, cible de 44px. */
.nav-mobile-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-text);
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.nav-mobile-close:hover { background: var(--c-primary-light); color: var(--c-primary); }

/* Le corps defile seul : l'en-tete et le pied (CTA + langues) restent visibles. */
.nav-mobile-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--space-2) var(--space-3) var(--space-4);
}
.nav-mobile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  flex-shrink: 0;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--c-border);
  background: var(--c-white);
}

/* Page figee derriere le tiroir (double verrou html + body : sur iOS, body
   seul ne suffit pas). */
html.nav-locked { overflow: hidden; }

/* ── Hero Section ── */
.hero {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
  background: var(--c-bg);
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--c-primary);
}

/* ── Hero deux colonnes : texte gauche / logos droite ── */
.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
  /* plafonne : sur les ecrans hauts (>1000px), 100vh creusait un grand vide
     entre les stats du hero et la bande clients (signalement collegue de
     Léa, 2026-09-14) */
  min-height: min(calc(100vh - var(--nav-h) - var(--prenav-h)), 720px);
}

.hero-content { position: relative; z-index: 1; }

@media (max-width: 1024px) {
  .hero-split { grid-template-columns: 1fr; min-height: auto; }
}

/* ── Grille logos statique (colonne droite) ── */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.logo-grid-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 14px;
  padding: var(--space-3) var(--space-2);
  min-height: 76px;
  transition: box-shadow var(--duration-base), border-color var(--duration-fast);
  text-decoration: none;
}

.logo-grid-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.09);
  border-color: var(--c-primary);
}

.logo-grid-card img {
  height: 52px;
  max-width: 130px;
  width: auto;
  object-fit: contain;
  display: block;
}

.logo-grid-card--lg {
  padding: 2px;
  overflow: hidden;
}

.logo-grid-card--lg img {
  width: 100%;
  height: auto;
  transform: scale(1.28);
}

.logo-grid-card--xl img {
  height: 72px;
}

/* "and more" — 20ème cellule dans la grille */
.logo-grid-card--more {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: white;
  font-weight: 700;
  font-size: 0.9375rem;
  font-family: var(--font-sans);
}
.logo-grid-card--more:hover {
  background: var(--c-primary-hover);
  border-color: var(--c-primary-hover);
  box-shadow: none;
}

@media (max-width: 1280px) {
  .logo-grid-card img { height: 44px; max-width: 110px; }
}

@media (max-width: 1024px) {
  .logo-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 640px) {
  /* minmax(0,1fr) : sans le 0, une colonne ne peut pas descendre sous la
     largeur intrinseque de son logo et la grille deborde du hero (audit
     responsive 2026-09-22 : 4e colonne rognee a 360 et 390 px). */
  .logo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-width: 100%; }
  .logo-grid-card { min-width: 0; padding: 6px; }
  .logo-grid-card img { max-width: 100%; height: auto; }
  .logo-grid-card { min-height: 60px; border-radius: 10px; }
  .logo-grid-card img { height: 26px; max-width: 80px; }
}

/* ── Grille logos large (Extenders / intégrations complémentaires) ── */
.logo-grid--wide { grid-template-columns: repeat(9, 1fr); }
.logo-grid--wide .logo-grid-card { min-height: 64px; padding: var(--space-2); }
.logo-grid--wide .logo-grid-card img { height: 34px; max-width: 90px; }

@media (max-width: 1280px) {
  .logo-grid--wide { grid-template-columns: repeat(7, 1fr); }
}
@media (max-width: 1024px) {
  .logo-grid--wide { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 640px) {
  .logo-grid--wide { grid-template-columns: repeat(3, 1fr); }
}

/* ── Bandeau "Trusted by" défilant en continu ── */
.logo-marquee {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.logo-marquee-track {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  width: max-content;
  padding-block: var(--space-2); /* marge pour l'agrandissement au survol */
  animation: logo-marquee-scroll 55s linear infinite;
}
/* Pause du défilement au survol de la bande */
.logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }
.logo-marquee-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  /* Meme hauteur que .logo-uniform : la piste ne rogne plus les logos hauts
     (retour Lea 2026-09-18, voir la regle .logo-uniform plus bas). */
  height: 48px;
  transition: transform var(--duration-base) ease;
}
.logo-marquee-item img {
  height: 100%;
  width: auto;
  max-width: 300px;
  object-fit: contain;
  filter: grayscale(1) opacity(0.55);
  transition: filter var(--duration-base) ease;
}

/* ── Gabarit uniforme des logos « Experts in / Experts en » ──
   Retour Lea 2026-09-18 : « certains logos sont coupes (trop gros, trop
   petit, coupes) uniformise le tout ». Les 38 sections concernees portaient
   le meme style en ligne (max-height:84px + max-width:230px + height:auto),
   qui laissait chaque logo se rendre a sa taille intrinseque : hauteurs
   reelles de 26 a 84 px et 22 logos sur 30 rognes par la bande (48 px utiles).
   Regle unique a la place :
   - hauteur de boite identique pour tous (48 px), donc alignement vertical
     centre et espacement regulier ;
   - largeur automatique (ratio naturel), plafonnee pour les rares logos
     tres larges (NetSuite fait 536x60) afin qu'aucun n'ecrase la bande ;
   - object-fit:contain : le visuel est contenu dans la boite, jamais
     deforme ni rogne.
   Selecteur img.logo-uniform (meme specificite que .logo-marquee-item img,
   place apres) : il emporte la regle de la piste sans !important. */
img.logo-uniform {
  height: 48px;
  width: auto;
  max-width: 300px;
  max-height: none;
  object-fit: contain;
  object-position: center;
  filter: grayscale(1);
  transition: filter var(--duration-base) ease;
}
/* Le logo survolé grossit et reprend ses couleurs (!important : certains
   logos générés portent le grayscale en style inline) */
.logo-marquee-item:hover { transform: scale(1.18); }
.logo-marquee-item:hover img { filter: none !important; }
@keyframes logo-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track { animation: none; }
  .logo-marquee-item, .logo-marquee-item img { transition: none; }
  .logo-marquee-item:hover { transform: none; }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--c-primary-light);
  border-left: 3px solid var(--c-primary);
  padding: var(--space-2) var(--space-4);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-primary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-6);
  animation: fadeInUp 0.5s var(--ease-out) both;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-title {
  color: var(--c-text);
  margin-bottom: var(--space-6);
  animation: fadeInUp 0.5s var(--ease-out) 0.1s both;
}

.hero-title .highlight { color: var(--c-primary); }

.hero-subtitle {
  font-size: clamp(1rem, 1.75vw, 1.125rem);
  color: var(--c-text-2);
  max-width: 600px;
  margin-bottom: var(--space-8);
  animation: fadeInUp 0.5s var(--ease-out) 0.2s both;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  animation: fadeInUp 0.5s var(--ease-out) 0.3s both;
}

/* ── Stats Bar ── */
.stats-bar {
  display: flex;
  gap: var(--space-8);
  padding-top: var(--space-10);
  border-top: 1px solid var(--c-border);
  margin-top: var(--space-10);
  animation: fadeInUp 0.5s var(--ease-out) 0.4s both;
}
.stat-item { flex: 1; }
.stat-number {
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 900;
  color: var(--c-primary);
  line-height: 1;
}
.stat-label {
  font-size: 0.875rem;
  color: var(--c-text-3);
  margin-top: var(--space-1);
}

@media (max-width: 640px) {
  .stats-bar { gap: var(--space-6); flex-wrap: wrap; }
  .stat-item { min-width: calc(50% - var(--space-3)); }
}

/* ── Section Headers ── */
.section-header {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-12);
}

/* Variante alignée à gauche (parité avec les titres du site d'origine) */
.section-header-left {
  text-align: left;
  max-width: 920px;
  margin-inline: 0;
  margin-bottom: var(--space-12);
}
.section-title .accent { color: var(--c-primary); }

.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: var(--space-3);
}

.section-title   { margin-bottom: var(--space-4); color: var(--c-text); font-size: clamp(1.5rem, 2.4vw, 2rem); }
.section-subtitle { color: var(--c-text-2); font-size: 1.0625rem; line-height: 1.7; }

/* ── Accent Bar (Big Bang Design System) ── */
.bb-accent-bar {
  width: 48px; height: 4px; background: var(--bb-orange);
  border: 0; margin: 0 0 var(--space-4);
  display: block;
}
.bb-accent-bar--blue { background: var(--bb-blue); }

/* ── Solution Cards ── */
.solution-card {
  position: relative;
  border-radius: var(--r-xl);
  padding: var(--space-8);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  overflow: hidden;
  transition: box-shadow var(--duration-base), transform var(--duration-base), border-color var(--duration-base);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.solution-card:hover {
  transform: translateY(-4px);
  border-color: var(--c-primary);
  box-shadow: var(--shadow-lg);
}

.solution-card .card-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: var(--space-5);
  background: var(--c-primary-light);
  flex-shrink: 0;
}

.solution-card .card-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: var(--space-2);
}
.solution-card .card-desc {
  font-size: 0.9rem;
  color: var(--c-text-2);
  line-height: 1.6;
  flex: 1;
  margin-bottom: var(--space-5);
}
.solution-card .card-link {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--c-primary);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  transition: gap var(--duration-fast);
}
.solution-card:hover .card-link { gap: var(--space-2); }

/* ── Industry Pills ── */
.industry-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.industry-pill {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--c-text-2);
  transition: all var(--duration-base) var(--ease-out);
  text-decoration: none;
}
.industry-pill:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
  background: var(--c-primary-light);
  transform: translateY(-2px);
}
.industry-pill .icon { font-size: 1.125rem; }

/* ── Partner Logos — bande centrée sous le hero ── */
.hero-partners {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--c-border);
}

.hero-partners-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-3);
  text-align: center;
  margin-bottom: var(--space-6);
}

/* Fenêtre — fondu gauche/droite */
.logos-row {
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}

/* Piste défilante */
.logos-track {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  width: max-content;
  animation: marquee-left 40s linear infinite;
}

.hero-partners:hover .logos-track {
  animation-play-state: paused;
}

@keyframes marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Logo : juste l'image, sans cadre */
.logo-card {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  text-decoration: none;
}

.logo-card img {
  height: 40px;
  max-width: 130px;
  width: auto;
  object-fit: contain;
  display: block;
  transition: opacity var(--duration-base);
}

.logo-card--wide img { height: 48px; max-width: 148px; }

@media (max-width: 768px) {
  .logo-card img       { height: 30px; }
  .logo-card--wide img { height: 36px; }
  .hero-partners       { margin-top: var(--space-8); }
}

/* ── CTA Band ── */
.cta-band {
  /* gris anthracite comme toutes les bandes CTA du live (gabarit 186),
     demande de Léa 2026-09-08 (etait orange) */
  background: #2F2F2F;
  color: var(--c-white);
}

.cta-band .t-h1,
.cta-band h2 {
  color: var(--c-white);
}

/* ── Footer ── */
.footer {
  background: var(--c-bg-dark);
  color: rgba(255,255,255,0.75);
  /* hauteur divisee par 2 (demande Léa 2026-09-08) : marges serrees et
     listes de liens sur 2 colonnes internes */
  padding-block: var(--space-6) var(--space-3);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 0.8fr 0.9fr 1.7fr;
  gap: var(--space-6);
  margin-bottom: var(--space-4);
}
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.footer-brand { max-width: 280px; }
.footer-logo  { margin-bottom: var(--space-4); }
.footer-logo img { height: 36px; filter: brightness(0) invert(1); }
.footer-tagline { font-size: 0.8125rem; color: rgba(255,255,255,0.82); line-height: 1.5; }

.footer-col h4 {
  font-size: 0.8125rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  font-size: 0.75rem;
}
/* listes de liens en colonne simple (Case Studies etc. sous Ressources) ;
   les bureaux en grille 2 colonnes a rangees alignees */
.footer-col ul  { font-size: 0.8125rem; line-height: 1.4; color: rgba(255,255,255,0.82); }
.footer-col li  { margin-bottom: 4px; }
.footer-offices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-5);
  align-items: start;
}
.footer-offices li { margin-bottom: 0; }
.footer-col li a {
  font-size: 0.8125rem;
  line-height: 1.25;
  display: inline-block;
  color: rgba(255,255,255,0.82);   /* 0,6 donnait 3,7:1 sur le gris de marque ; 0,82 = 5,4:1 (revue agence, 2026-09-28) */
  transition: color var(--duration-fast);
}
.footer-col li a:hover { color: var(--c-primary); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.45);
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ── Contact Form ── */
.bb-form { display: flex; flex-direction: column; gap: var(--space-4); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

.form-field { display: flex; flex-direction: column; gap: var(--space-2); }
.form-label { font-size: 0.875rem; font-weight: 600; color: var(--c-text); }

.form-input, .form-textarea, .form-select {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  color: var(--c-text);
  font-family: var(--font-sans);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
  width: 100%;
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--c-text-3); }
.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(241,94,50,0.12);
}
.form-input.error { border-color: var(--c-error); }
.form-input.error:focus { box-shadow: 0 0 0 3px rgba(231,76,60,0.12); }
.form-error-msg { font-size: 0.8125rem; color: var(--c-error); display: none; }
.form-input.error ~ .form-error-msg { display: block; }

.form-textarea { resize: vertical; min-height: 120px; }
.bb-hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.form-status {
  font-size: 0.9375rem;
  padding: var(--space-4);
  border-radius: var(--r-sm);
  text-align: center;
  display: none;
}
.form-status.success {
  background: rgba(39,174,96,0.08);
  border: 1px solid rgba(39,174,96,0.3);
  color: var(--c-success);
  display: block;
}
.form-status.error {
  background: rgba(231,76,60,0.08);
  border: 1px solid rgba(231,76,60,0.3);
  color: var(--c-error);
  display: block;
}

/* ── Breadcrumb ── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.875rem;
  color: var(--c-text-3);
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--c-text-2); transition: color var(--duration-fast); }
.breadcrumb a:hover { color: var(--c-primary); }
.breadcrumb-sep { color: var(--c-text-3); }

/* ── Page Hero (pages internes) ── */
.page-hero {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
  background: var(--c-bg-2);
  border-bottom: 3px solid var(--c-primary);
}

.page-hero-content { position: relative; z-index: 1; }

/* Titres de hero : le site d'origine compose ses h1 en graisse moyenne
   (500 en niveau-grotesk, 59px sur l'accueil), pas en noir extra-gras.
   On aligne : semi-gras en Open Sans, l'equivalent visuel le plus proche. */
.page-hero h1 { font-weight: 600; }

/* ── Page Hero avec image de contenu (variante 2 colonnes) ── */
.page-hero-grid {
  display: grid;
  /* colonne visuelle élargie : la pyramide du live occupe près de la moitié
     du héro (retour Léa, capture comparée du 2026-09-07) */
  grid-template-columns: 1fr minmax(300px, 500px);
  gap: var(--space-12);
  /* l'image du héro s'aligne sur le HAUT du texte, comme le live */
  align-items: start;
}
.page-hero-image { border-radius: var(--r-lg); overflow: hidden; }
.page-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .page-hero-grid { grid-template-columns: 1fr; }
  .page-hero-image { order: -1; max-height: 280px; }
}

/* ── Image de contenu au fil d'une section (variante inline) ── */
.section-image { border-radius: var(--r-lg); overflow: hidden; margin-block: var(--space-8); }
.section-image img { width: 100%; height: auto; display: block; }

/* ── Utility ── */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.mt-4  { margin-top: var(--space-4); }
.mt-8  { margin-top: var(--space-8); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-8  { margin-bottom: var(--space-8); }
.w-full { width: 100%; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--c-bg-2); }
::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-gray); }

/* ── Focus (accessibilité) ── */
:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ── Liste à puces Big Bang (SVG de marque, reflète BulletPointBigBang du site d'origine) ── */
.bullet-list { display: flex; flex-direction: column; gap: var(--space-5); }
.bullet-item { display: flex; gap: var(--space-3); align-items: flex-start; }
.bullet-item::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 0.2em;
  background: url('/images/icons/bullet-point-big-bang.svg') no-repeat center / contain;
}

/* ── Cartes industries avec photo (parité visuelle avec le widget industries du site d'origine) ── */
.industry-photo-card {
  position: relative;
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  aspect-ratio: 3 / 1.4;
  background-size: cover;
  background-position: center;
  /* le libellé est en position absolue : sans base de taille, la carte
     s'écraserait dans un conteneur flex. Valable en grid comme en flex. */
  flex: 1 1 240px;
  min-width: 220px;
}
.industry-photo-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(88, 88, 90, 0.55);
  transition: background var(--duration-base);
}
.industry-photo-card:hover::after { background: rgba(241, 94, 50, 0.72); }
.industry-photo-card .industry-photo-label {
  position: absolute;
  z-index: 1;
  bottom: var(--space-3);
  left: var(--space-4);
  right: var(--space-4);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
}

/* ── Logos awards/certifications (piste carrousel) ── */
.award-logo {
  height: 170px;
  width: auto;
  max-width: 330px;
  object-fit: contain;
  filter: grayscale(85%) opacity(0.85);
  transition: filter var(--duration-base);
}
.award-logo:hover { filter: none; }

/* ── Carrousels dynamiques (défilement lent + survol) ──
   Les logos des diapos (certifications, tuiles produits) sont en gris par
   défaut et reprennent leurs couleurs au survol de la diapo. La galerie
   photo (.bb-gallery-item) est exclue : ses photos restent en couleur. */
.bb-carousel-track > div:not(.bb-gallery-item) {
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  transition: transform var(--duration-base) ease, border-color var(--duration-base), box-shadow var(--duration-base), background var(--duration-base);
}
.bb-carousel-track > div:not(.bb-gallery-item):hover { background: var(--c-bg); }
.bb-carousel-track > div:not(.bb-gallery-item) img {
  filter: grayscale(1) opacity(0.75);
  transition: filter var(--duration-base) ease;
}
.bb-carousel-track > div:not(.bb-gallery-item):hover img { filter: none; }
/* La diapo survolée passe aux couleurs de la marque (bordure orange, nom en
   orange). !important : le balisage généré porte des styles inline. */
.bb-carousel-track > div:not(.bb-gallery-item):hover,
.bb-carousel-track > blockquote:hover,
.bb-carousel-track > a:hover {
  border-color: var(--c-primary) !important;
  box-shadow: var(--shadow-lg);
}
.bb-carousel-track > div:not(.bb-gallery-item):hover p {
  color: var(--c-primary) !important;
}
@media (prefers-reduced-motion: reduce) {
  .bb-carousel-track > div:not(.bb-gallery-item) img { transition: none; }
}

/* Split texte|image 50/50 des sections de contenu, comme le live (Elementor
   50/50). Posé par codemod-media-split.mjs (repasse design 2026-08-26). Les
   grilles internes (cartes) repassent en 1 colonne dans la colonne texte. */
/* Les photos s'alignent en HAUT avec le début du texte, comme le live
   (retour de Léa 2026-09-07) — plus de centrage vertical. */
.bb-media-split { align-items: start !important; }
.bb-media-split > div > .grid-2,
.bb-media-split > div > .grid-3 { grid-template-columns: 1fr; }
.bb-media-split > div > .section-header { margin-bottom: var(--space-4); }
@media (max-width: 768px) {
  .bb-media-split > img { order: 2; }
}

/* ── Puces Big Bang sur toutes les listes de contenu, comme le live ──
   Le live applique BulletPointBigBang.svg à chaque <li> de contenu via
   .circle_list ; ici la règle couvre les listes des sections de page
   (nav et footer exclus par le scope `section`). Les listes-grilles de
   cartes et .bullet-list (déjà stylée) sont exclues. */
section ul:not(.bullet-list):not([class*="grid"]):not([style*="grid"]) {
  list-style: none;
  padding-left: 0 !important;
}
section ul:not(.bullet-list):not([class*="grid"]):not([style*="grid"]) > li {
  background: url('/images/icons/bullet-point-big-bang.svg') 0 0.42em / 14px auto no-repeat;
  padding-left: 26px;
}

/* ── Classes de mise en valeur héritées du live (contenu ACF rendu tel quel) ── */
.txt_primary { color: var(--bb-orange); }
.txt_secondary { color: var(--bb-blue); }
/* Liens de contenu du live : gras orange partout (héros, textes, puces,
   sous-titres) — jamais bleu souligné (retours Léa des 2026-09-02 et 09-07) */
.linkColor a,
.bb-points a,
.acf-subtitle a,
.page-hero a:not(.btn),
.t-body a,
.hero-first-line a {
  color: var(--bb-orange);
  font-weight: 700;
  text-decoration: none;
}
.linkColor a:hover,
.bb-points a:hover,
.acf-subtitle a:hover,
.page-hero a:not(.btn):hover,
.t-body a:hover,
.hero-first-line a:hover { text-decoration: underline; }
.bb-points { list-style: none; padding-left: 0 !important; display: flex; flex-direction: column; gap: var(--space-4); }
/* La puce de marque appartient à la classe elle-même : elle s'affiche dans
   TOUS les contextes (héros compris), pas seulement dans les sections
   (retour de Léa : puce absente devant le point du héro kantata). */
.bb-points > li {
  background: url('/images/icons/bullet-point-big-bang.svg') 0 0.42em / 14px auto no-repeat;
  padding-left: 26px;
}
.bb-points li strong { display: block; color: var(--c-text); margin-bottom: 2px; }
.bb-points li span { color: var(--c-text-2); font-size: 0.9375rem; }
.hero-first-line img { max-width: 320px; height: auto; margin-top: var(--space-5); }

/* ── Styles exacts des gabarits content-processor du live (extraits de
   l'export : gabarits Elementor 5528/5620/186) ── */
.acf-h1 { font-size: 40px; font-weight: 600; line-height: 48px; color: var(--c-text); }
.acf-subtitle { font-size: 25px; font-weight: 400; color: var(--c-text-2); line-height: 1.45; }
.acf-cta { background: #2F2F2F; }
.acf-cta-text { color: #fff; font-size: 32px; font-weight: 600; max-width: 900px; margin: 0 auto var(--space-6); }
.bb-points-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-8); }
@media (max-width: 768px) { .bb-points-2col { grid-template-columns: 1fr; } }

/* Fil d'Ariane du gabarit héro du live (breadcrumbs 15px orange, favicon) */
.acf-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--bb-orange);
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-6);
  /* fils courts type Yoast (repasse 2026-09-14) : la chaine d'ancetres peut
     etre longue sur les pages profondes, elle passe a la ligne comme le live */
  flex-wrap: wrap;
  row-gap: 2px;
  min-width: 0;
}
.acf-breadcrumb a { color: var(--bb-orange); text-decoration: none; }
.acf-breadcrumb a:hover { text-decoration: underline; }
.acf-breadcrumb span:last-child { font-weight: 700; }
.acf-breadcrumb img { width: 20px; height: 20px; }

/* h2 des sections content-processor : 32px/600 (25px mobile), relevé des
   gabarits du live — remplace t-display (800) sur les pages régénérées */
.acf-h2 {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--c-text);
  margin-bottom: var(--space-4);
}
.bb-points li strong { font-size: 1rem; font-weight: 700; }
.bb-points li span { font-size: 1rem; font-weight: 400; line-height: 1.5; }

/* Points portés par les bandes CTA sombres : texte clair lisible */
.acf-cta-points li strong { color: #fff; }
.acf-cta-points li span { color: rgba(255,255,255,0.8); }

/* Surtitre bleu des gabarits du live (22px/600, txt_secondary) */
.acf-overline { display:block; color: var(--bb-blue); font-size: 22px; font-weight: 600; margin-bottom: var(--space-2); }

/* Titres des boîtes de services (gabarit 6035 : base bleue, spans orange) */
.acf-box-title {
  color: var(--bb-blue);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.25;
  margin: var(--space-2) 0 var(--space-3);
}

/* ── Typo des titres identique au live (relevé des feuilles Elementor du
   2026-09-07) : tous les titres en niveau-grotesk 600, textes en Open Sans.
   Le kit Adobe Fonts du live est chargé par BaseLayout ; repli Open Sans. ── */
:root { --font-heading: "niveau-grotesk", "Open Sans", sans-serif; }
h1, h2, h3, h4, h5, h6,
.t-display, .t-h1, .t-h2, .t-h3, .t-h4,
.acf-h1, .acf-h2, .acf-cta-text, .acf-box-title, .acf-overline,
.section-title, .btn {
  font-family: var(--font-heading);
}

/* Puces de marque aussi dans les héros (listes d'ancres des landing pages) */
.page-hero ul:not([class]) { list-style: none; padding-left: 0 !important; }
.page-hero ul:not([class]) > li {
  background: url('/images/icons/bullet-point-big-bang.svg') 0 0.42em / 14px auto no-repeat;
  padding-left: 26px;
  margin-bottom: var(--space-2);
}
/* Titres « big » du live (40px/600, gabarit 5620 title_size=big) */
.acf-h2--big { font-size: 40px; line-height: 48px; }


/* Bascule mobile des tailles du live : un seul point de rupture à 767px,
   comme les gabarits Elementor (typography_font_size_mobile) */
@media (max-width: 767px) {
  .acf-h1, .acf-h2--big { font-size: 32px; line-height: 38px; }
  .acf-h2, .acf-cta-text, .acf-box-title { font-size: 25px; }
  .acf-overline { font-size: 18px; }
  .acf-subtitle { font-size: 20px; }
}

/* Liens des listes du héro : orange gras, comme tous les liens de contenu */
.page-hero ul a, .page-hero ul a span { color: var(--bb-orange) !important; font-weight: 700; }

/* Texte des boîtes de services : Open Sans 16px/500 (gabarit 6035 du live) */
.acf-box-text {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--c-text-2);
}

/* Ligne d'intro orange des encadrés : config exacte du Computed live relevé
   par Léa (Open Sans 24px/400, 28.8px, 0.2px, bloc). Le live l'encode sous
   plusieurs formes : span.txt_primary, ou <h4><strong><span style=…>>. */
.acf-box-text .txt_primary,
.acf-box-text h4,
.acf-box-sub {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 28.8px;
  letter-spacing: 0.2px;
  margin: 8px 0 16px;
  color: var(--bb-orange);
}
.acf-box-text h4 strong, .acf-box-text h4 b, .acf-box-text h4 span,
.acf-box-text .txt_primary strong, .acf-box-text .txt_primary b,
.acf-box-text strong span[style*="f15e32"], .acf-box-text b span[style*="f15e32"] { font-weight: 400 !important; }

/* Sous-listes DANS un point à puce : disque simple compact, jamais l'anneau
   de marque (retour Léa sur /artificial-intelligence/) */
.bb-points li ul,
section ul:not(.bullet-list) ul {
  list-style: disc !important;
  padding-left: 1.3em !important;
  margin-top: var(--space-2);
  display: block;
}
.bb-points li ul > li,
section ul:not(.bullet-list) ul > li {
  background: none !important;
  padding-left: 0 !important;
  margin-bottom: var(--space-1);
}

/* ---- Page BSA5 : le live est entierement sur fond sombre (classe bg_dark,
   anthracite #2F2F2F comme les bandes CTA des gabarits Elementor). Le
   generateur enveloppe ces pages dans .bb-dark. ---- */
.bb-dark { background: #2F2F2F; }
.bb-dark .page-hero,
.bb-dark section:not(.acf-cta) { background: transparent !important; border: 0 !important; }
.bb-dark :is(.acf-h1, .acf-h2, .acf-subtitle, .hero-first-line, .t-body, .section-title, .acf-breadcrumb) { color: #fff !important; }
.bb-dark .t-body :is(h3, h4) { color: #fff; margin: var(--space-5) 0 var(--space-2); }
.bb-dark .txt_white { color: #fff; }
.bb-dark .txt_secondary { color: var(--bb-blue); }
.bb-dark .bb-points > li { color: #fff; }
/* boites de services : sur le live ce sont de simples colonnes de texte sur
   le fond sombre, pas des cartes blanches */
.bb-dark .card { background: transparent; border: 0; box-shadow: none; padding: 0; }
.bb-dark .acf-box-text { color: #fff; }
.bb-dark .acf-box-text .txt_white { color: #fff !important; }

/* Titres des points a puce : spec du live (wp-custom-css : 16px/700 ;
   Computed de Léa sur /contact/rfp/ : niveau-grotesk, 16px, lh 24px, et
   graisse 900 quand le titre ACF porte txt_secondary+strong - le bleu vient
   du balisage txt_secondary, pas d'une regle globale) */
.bb-points li strong {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.bb-points li strong .txt_secondary { font-weight: 900; }

/* h4 dans le contenu texte (hors encadres) : le live les rend en Open Sans
   24px/400 (Computed de Léa sur /contact/rfp/, "Only work with the best") */
.t-body h4 {
  font-family: 'Open Sans', sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 28.8px;
  margin: 8px 0 16px;
}

/* ---- Passe responsive (2026-09-08) ---- */
/* Les blocs texte|image s'empilent au meme point que le live (colonnes
   Elementor : 767px), pas seulement a 640px via .grid-2 */
@media (max-width: 768px) {
  .bb-media-split { grid-template-columns: 1fr !important; }
  .bb-media-split > img { order: 2; }
}
/* Les mots tres longs (URLs, noms techniques) ne debordent jamais du
   viewport sur mobile */
body { overflow-wrap: break-word; }
/* Le widget BambooHR et tout contenu injecte restent dans la colonne */
#BambooHR, #BambooHR * { max-width: 100%; }
/* (Ancienne regle de recalage du panneau plein ecran sous la barre : le menu
   mobile est maintenant un tiroir lateral plein hauteur avec son propre
   en-tete, il n'y a plus de trou a rattraper.) */
/* Utilitaire de la passe responsive : toute grille marquee bb-md-1col
   s'empile sur mobile (grilles posees en style inline dans les pages
   construites a la main : home, contact, gabs-pyramid, trainings) */
@media (max-width: 768px) {
  .bb-md-1col { grid-template-columns: 1fr !important; }
}

/* Repasse finale 2026-09-09 : sur tres petits ecrans le bouton CTA du header
   debordait de 94px (507 pages) - compacte sous 520px (jamais masque,
   demande Léa 2026-09-14) */
@media (max-width: 520px) {
  /* Le bouton reste visible (demande Léa 2026-09-14) : version compacte
     au lieu du masquage, les libellés sont courts dans les 3 langues.
     Le sélecteur EN/FR/ES en ligne cède sa place (il est dans le panneau
     burger via .nav-mobile-lang). */
  .nav-actions .btn { padding: 6px 10px; font-size: 0.75rem; }
  .nav-actions .nav-lang { display: none; }
}
.nav-mobile-lang { display: flex; gap: var(--space-1); }
.nav-mobile-lang a {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-text-3);
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  text-transform: uppercase;
}
.nav-mobile-lang a[aria-current="true"] { color: var(--c-primary); border-color: var(--c-primary); }
@media (max-width: 380px) {
  .nav-logo img { height: 30px !important; }
  .nav-actions .btn { padding: 5px 8px; font-size: 0.7rem; }
}

/* Repasse finale : les enfants de grilles ne retrecissent pas sous leur
   min-content (le fil d'Ariane nowrap forcait des colonnes de 500px sur
   mobile). min-width:0 permet aux textes de casser et a l'ellipse du fil
   d'Ariane de fonctionner. */
.page-hero-grid > *,
.grid-2 > *, .grid-3 > *, .grid-4 > *,
.bb-media-split > *, .bb-reach-grid > * { min-width: 0; }
/* Boutons a libelles longs : autorises a casser sur mobile (627px sinon) */
@media (max-width: 640px) {
  .btn { white-space: normal; text-align: center; }
}
/* chiffres cles : 5 colonnes -> 2 puis 1 sur mobile */
@media (max-width: 1024px) { .grid-4[style*="repeat(5"] { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 640px) { .grid-4[style*="repeat(5"] { grid-template-columns: 1fr !important; } }

/* Étapes de The Big Bang Experience® : la grille 100px|1fr passe en pile
   sous 480px (le pas fixe + les gaps ne tiennent pas en 360px). */
@media (max-width: 480px) {
  .bb-exp-step { grid-template-columns: 1fr !important; gap: var(--space-4) !important; }
}

/* ── Page Témoignages (archive du CPT testimonials, export WP) ── */
.bb-testi-grid {
  columns: 3 340px;
  column-gap: var(--space-6);
}
.bb-testi-card {
  break-inside: avoid;
  margin: 0 0 var(--space-6);
  padding: var(--space-6);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.bb-testi-card footer {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: auto;
}
.bb-testi-card footer img {
  height: 44px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Carte etude de cas + encart telechargement cote a cote */
@media (max-width: 900px) {
  .bb-cs-duo { grid-template-columns: 1fr !important; }
}

/* ── Retours de la revue SEO (2026-09-22) ─────────────────────────────── */

/* 1. Fil d'Ariane : l'ecart avec le contenu atteignait 68 px sur les pages
   ressource. On le ramene a une valeur reguliere. */
.acf-breadcrumb, .breadcrumb { margin-bottom: var(--space-4); }
.page-hero .acf-breadcrumb, .page-hero .breadcrumb { margin-bottom: var(--space-4); }
.breadcrumb.mb-8 { margin-bottom: var(--space-4); }

/* 2. FAQ redigees dans les articles (markdown) : les questions et les
   reponses se suivaient sans respiration. On separe chaque question et on
   la distingue visuellement de sa reponse. */
.prose h2[id*="faq" i] + p,
.prose h2[id*="frequently" i] + p { margin-top: var(--space-4); }
/* Dans les articles importes, TOUTE la FAQ tient dans un seul paragraphe :
   les questions sont des <strong> au fil du texte, collees a leur reponse.
   On remet chaque question sur sa propre ligne, avec de l air au-dessus. */
.prose h2[id*="faq" i] + p strong,
.prose h2[id*="frequently" i] + p strong,
.prose h2[id*="faq" i] + p + p strong,
.prose h2[id*="frequently" i] + p + p strong {
  display: block;
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  color: var(--c-text);
  font-size: 1.0625rem;
  line-height: 1.45;
}
.prose h2[id*="faq" i] + p strong:first-child,
.prose h2[id*="frequently" i] + p strong:first-child { margin-top: var(--space-2); }

.prose h2[id*="faq" i] ~ h3,
.prose h2[id*="frequently" i] ~ h3 {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--c-border);
  font-size: 1.0625rem;
  line-height: 1.45;
}
.prose h2[id*="faq" i] ~ h3 + p,
.prose h2[id*="frequently" i] ~ h3 + p { margin-top: var(--space-3); }

/* 3. Images d'en-tete : beaucoup de sources importees font moins de 600 px
   de large. Le site actuel les affiche a leur taille native ; les agrandir
   les rend floues. On ne depasse donc pas leur largeur reelle (la valeur
   exacte est posee par la route via max-width en ligne). */
.post-hero img, .case-hero img { image-rendering: auto; }