/* ============================================================
   business.css — Design system OXO Consultants
   Chargé en DERNIER dans chaque page : l'emporte à spécificité égale
   sur style.css / responsive.css. Source : .brief/11-design-system.md
   Principe : on remappe les variables et classes utilitaires Crafto
   (--base-color, --alt-font, .bg-*, .btn-*) plutôt que de réécrire le HTML.
   ============================================================ */

/* --- 1. Polices : Source Serif 4 (titres) + Inter (corps) -------------- */
/* DOIT rester la toute première règle (un @import précède toute règle). */
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=Inter:wght@400;500;600;700&display=swap");

/* --- 2. Remap des variables Crafto + tokens OXO ----------------------- */
:root {
  /* Palette OXO (source de vérité) */
  --oxo-bleu-nuit: #16243F;
  --oxo-ardoise:   #2E3D57;
  --oxo-or:        #B8862F;
  --oxo-encre:     #1A1A1A;
  --oxo-gris-plomb:#4A4A4A;
  --oxo-brume:     #E2E5EA;
  --oxo-papier:    #FFFFFF;
  --oxo-givre:     #F5F7FA;

  /* Variante OR plus claire réservée au TEXTE sur fond bleu nuit (AA) */
  --oxo-or-clair:  #D9A441;

  /* Remap des custom properties Crafto (propagation automatique) */
  --base-color:    #16243F;   /* accent structurel = bleu nuit (PAS l'or) */
  --alt-font:      "Source Serif 4", Georgia, serif;        /* titres / nav */
  --primary-font:  "Inter", system-ui, Arial, sans-serif;  /* corps */
  --dark-gray:     #1A1A1A;    /* .text-dark-gray = couleur des titres */
  --medium-gray:   #4A4A4A;    /* couleur du body */
  --very-light-gray:#F5F7FA;   /* .bg-very-light-gray = givre */
  --solitude-blue: #EAEEF5;    /* fond des badges/pills → bleuté froid */
  --extra-medium-gray:#E2E5EA; /* bordures = brume */
}

/* --- 3. Base typographique -------------------------------------------- */
body {
  font-family: var(--primary-font);
  color: var(--oxo-encre);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: 0;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.alt-font {
  font-family: var(--alt-font);
  color: var(--oxo-bleu-nuit);
  letter-spacing: -0.25px;
  font-weight: 600;
}

h1, .h1 { font-size: 58px; line-height: 1.1;  font-weight: 700; }
h2, .h2 { font-size: 40px; line-height: 1.18; font-weight: 600; }
h3, .h3 { font-size: 26px; line-height: 1.3;  font-weight: 600; }

.text-medium-gray, p.lead, .widget-text { color: var(--oxo-gris-plomb); }
small, .fs-14, .text-meta {
  font-size: 14px; font-weight: 500; color: var(--oxo-gris-plomb);
}

@media (max-width: 991px) {
  body     { font-size: 16px; }
  h1, .h1  { font-size: 38px; }
  h2, .h2  { font-size: 28px; }
  h3, .h3  { font-size: 22px; }
}

/* --- 4. Liens & accents ----------------------------------------------- */
a { color: var(--oxo-bleu-nuit); }
a:hover { color: var(--oxo-or); }

/* --- 5. Boutons ------------------------------------------------------- */
.btn {
  font-family: var(--primary-font) !important; /* override de --alt-font sur .btn */
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: none;            /* Crafto force uppercase → on annule */
  border-radius: 5px;
  border-width: 1px;
  font-size: 16px;
}
.btn.btn-rounded, .btn.btn-rounded.btn-rounded { border-radius: 5px; }

/* PRIMAIRE — fond bleu nuit, texte blanc ; survol = apparition de l'or.
   Ombre douce + lift « bouton qui décolle » façon Crafto (.btn-box-shadow),
   easing cubic-bezier(.2,0,.3,1), ombres en bleu nuit (charte, pas de gris). */
.btn.btn-base-color {
  background-color: var(--oxo-bleu-nuit);
  border-color: var(--oxo-bleu-nuit);
  color: var(--oxo-papier);
  box-shadow: 0 5px 18px rgba(22, 36, 63, 0.18);
  transition: background-color .3s ease, border-color .3s ease,
              box-shadow .35s cubic-bezier(.2, 0, .3, 1),
              transform .35s cubic-bezier(.2, 0, .3, 1);
}
.btn.btn-base-color:hover,
.btn.btn-base-color:active,
.btn.btn-base-color:focus-visible {
  background-color: var(--oxo-bleu-nuit);
  border-color: var(--oxo-or);
  color: var(--oxo-papier);
  box-shadow: 0 10px 28px rgba(22, 36, 63, 0.26), inset 0 -2px 0 0 var(--oxo-or);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .btn.btn-base-color:hover,
  .btn.btn-base-color:active,
  .btn.btn-base-color:focus-visible { transform: none; }
}

/* SECONDAIRE — contour bleu nuit, fond transparent, texte bleu nuit */
.btn.btn-transparent-dark-gray,
.btn.btn-outline-oxo {
  background-color: transparent;
  border-color: var(--oxo-bleu-nuit);
  color: var(--oxo-bleu-nuit);
}
.btn.btn-transparent-dark-gray:hover,
.btn.btn-outline-oxo:hover {
  background-color: var(--oxo-bleu-nuit);
  border-color: var(--oxo-bleu-nuit);
  color: var(--oxo-papier);
}

/* Bouton sur fond bleu nuit (header/bannière) : contour clair → plein blanc */
.btn.btn-transparent-white-light {
  border-color: rgba(255,255,255,.65);
  color: var(--oxo-papier);
}
.btn.btn-transparent-white-light:hover {
  background-color: var(--oxo-papier);
  color: var(--oxo-bleu-nuit);
  border-color: var(--oxo-papier);
}

.btn .bg-white { background-color: var(--oxo-or) !important; }
.btn .text-base-color { color: var(--oxo-papier) !important; }

/* --- 6. Header & navigation ------------------------------------------- */
.header-light, header .navbar { background-color: var(--oxo-papier); }
header .navbar { border-bottom: 1px solid var(--oxo-brume); }

.header-light .navbar-nav .nav-link,
.navbar .navbar-nav .nav-link { color: var(--oxo-bleu-nuit); font-weight: 600; }
/* Header clair : actif/survol = texte bleu nuit (AA) + filet or (état non porté par la seule couleur, WCAG 1.4.1) */
.navbar .navbar-nav .nav-item:hover .nav-link,
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-item.active .nav-link {
  color: var(--oxo-bleu-nuit) !important;
  opacity: 1 !important;
  box-shadow: inset 0 -2px 0 0 var(--oxo-or);
}
.bg-dark-gray .navbar-nav .nav-link,
header[data-header-hover="dark"] .navbar-nav .nav-link { color: var(--oxo-papier); }
/* Header sur fond bleu nuit : actif/survol = OR clair (réservé aux fonds sombres, AA) */
.bg-dark-gray .navbar-nav .nav-item:hover .nav-link,
.bg-dark-gray .navbar-nav .nav-link.active,
.bg-dark-gray .navbar-nav .nav-item.active .nav-link {
  color: var(--oxo-or-clair) !important;
  opacity: 1 !important;
  box-shadow: inset 0 -2px 0 0 var(--oxo-or-clair);
}

/* Logotype texte OXO (aucun logo vectoriel fourni) */
.oxo-logo { display: inline-flex; flex-direction: column; line-height: 1; text-decoration: none; }
.oxo-logo .oxo-logo-mark {
  font-family: var(--alt-font);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 4px;
  color: var(--oxo-bleu-nuit);
  text-transform: uppercase;
}
.oxo-logo .oxo-logo-rule {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--oxo-or);
  margin: 5px 0 4px;
}
.oxo-logo .oxo-logo-sub {
  font-family: var(--primary-font);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: lowercase;
  color: var(--oxo-gris-plomb);
}
.oxo-logo .oxo-logo-baseline {
  font-family: var(--primary-font);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .2px;
  color: var(--oxo-gris-plomb);
  margin-top: 8px;
  display: block;
}
.oxo-logo--light .oxo-logo-mark,
.bg-dark-gray .oxo-logo .oxo-logo-mark { color: var(--oxo-papier); }
.oxo-logo--light .oxo-logo-sub,
.bg-dark-gray .oxo-logo .oxo-logo-sub { color: rgba(255,255,255,.75); }
.oxo-logo--light .oxo-logo-baseline { color: rgba(255,255,255,.65); }

/* --- 7. Filet signature OR -------------------------------------------- */
.bg-gold { background-color: var(--oxo-or) !important; }

.oxo-rule { position: relative; padding-bottom: 18px; margin-bottom: 24px; }
.oxo-rule::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 56px; height: 2px;
  background-color: var(--oxo-or);
}
.text-center .oxo-rule::after,
.oxo-rule.oxo-rule-center::after { left: 50%; transform: translateX(-50%); }
.bg-dark-gray .oxo-rule::after,
.bg-base-color .oxo-rule::after { background-color: var(--oxo-or); }

/* --- 8. Cartes (.feature-box) & badges -------------------------------- */
.feature-box {
  background-color: var(--oxo-papier);
  border: 1px solid var(--oxo-brume);
  border-radius: 6px;
  padding: 36px 32px;
  /* Ombre 2 couches au repos (contact + portée) — fini « papier collé ». */
  box-shadow: 0 1px 2px rgba(22, 36, 63, 0.05), 0 6px 16px rgba(22, 36, 63, 0.05);
  transition: box-shadow .4s cubic-bezier(0.37, 0, 0.63, 1),
              border-color .4s cubic-bezier(0.37, 0, 0.63, 1),
              transform .4s cubic-bezier(0.37, 0, 0.63, 1);
}
.feature-box:hover {
  border-color: var(--oxo-or);
  /* Ombre 2 couches accrue + lift plus « lourd » (-6px) façon Crafto. */
  box-shadow: 0 2px 4px rgba(22, 36, 63, 0.06), 0 18px 40px rgba(22, 36, 63, 0.13);
  transform: translateY(-6px);
}
.bg-very-light-gray .feature-box { background-color: var(--oxo-papier); }

.feature-box .feature-box-icon i,
.feature-box-icon i {
  color: var(--oxo-or);
  font-size: 34px;
  line-height: 1;
  display: inline-block;
  margin-bottom: 18px;
  stroke-width: 1.5;
}
.feature-box .feature-box-content h3,
.feature-box h3 { color: var(--oxo-bleu-nuit); margin-bottom: 12px; }
.feature-box .feature-box-content p { color: var(--oxo-gris-plomb); }

.bg-solitude-blue {
  background-color: var(--oxo-givre) !important;
  border: 1px solid var(--oxo-brume);
}
/* Sections pleines de fond (S4 onglets services) : givre d'un cran plus froid
   (#EEF1F6, entre givre #F5F7FA et brume) → accentue la distinction avec le
   papier blanc des sections S3/S5 et redonne le rythme clair de Crafto.
   Ciblé sur la SECTION : ne refroidit pas les badges pill .bg-solitude-blue. */
section.bg-solitude-blue {
  background-color: #EEF1F6 !important;
  border: 0;
}
.bg-solitude-blue.text-base-color,
.text-base-color { color: var(--oxo-bleu-nuit) !important; }

/* --- 9. Sections & conteneur ------------------------------------------ */
section { background-color: var(--oxo-papier); }
/* Voile vertical subtil givre → papier (profondeur, séparation douce) plutôt
   qu'un aplat gris uni. Reste dans la charte (givre + papier quasi blanc). */
.bg-very-light-gray {
  background-color: var(--oxo-givre) !important;
  background-image: linear-gradient(180deg, var(--oxo-givre) 0%, #FAFBFC 100%) !important;
}
/* Dégradé Crafto de la S7 (témoignages) remappé en givre OXO : supprime le bleu
   électrique rgb(240,244,253) et fond vers la transparence façon Crafto. */
.bg-gradient-solitude-blue-transparent {
  background: linear-gradient(to top, var(--oxo-givre) 0%, rgba(255,255,255,0) 100%) !important;
}
.bg-dark-gray, .bg-dark-gray:focus, .section-dark {
  background-color: var(--oxo-bleu-nuit) !important;
}
.bg-base-color { background-color: var(--oxo-bleu-nuit) !important; }
/* Vignette radiale très douce sur les sections bleu nuit pleines : casse
   l'aplat par une modulation de luminance (PAS de glassmorphism). */
.bg-base-color, .oxo-cta-parallax {
  background-image: radial-gradient(120% 90% at 50% -10%, rgba(255, 255, 255, 0.06), transparent 55%);
}

.container { max-width: 1140px; }

@media (min-width: 992px) {
  .oxo-section-pad { padding-top: 100px; padding-bottom: 100px; }
}

/* --- 10. Icônes linéaires --------------------------------------------- */
i[class*="icon-feather-"], i[class^="bi-"], i[class*=" bi-"] {
  color: var(--oxo-bleu-nuit);
  font-weight: 400;
}
.text-base-color i, i.text-gold, .list-style-02 i { color: var(--oxo-or); }
.header-icon .bg-base-color { background-color: var(--oxo-or) !important; }
svg.feather { stroke-width: 1.75; }

/* --- 11. Footer ------------------------------------------------------- */
footer, .footer-dark { background-color: var(--oxo-bleu-nuit); color: rgba(255,255,255,.78); }
footer a { color: rgba(255,255,255,.78); }
footer a:hover { color: var(--oxo-or); }
footer h3, footer .footer-title { color: var(--oxo-papier); font-family: var(--alt-font); }
footer .separator-line-1px, footer hr { background-color: rgba(255,255,255,.15); }
footer address.not-italic { font-style: normal; }
/* Liens légaux de la barre basse : zone cliquable >=24px et espacement anti-chevauchement (WCAG 2.5.8 AA) */
.oxo-legal-links a {
  display: inline-block;
  padding: 6px 4px;
  min-height: 24px;
}
.oxo-legal-links span { padding: 0 4px; }

/* --- 12. Garde-fous accessibilité WCAG AA ----------------------------- */
.text-gold-on-dark { color: var(--oxo-or-clair) !important; } /* #D9A441 sur #16243F ≈ AA */

a:focus-visible, .btn:focus-visible, .nav-link:focus-visible,
button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--oxo-or);
  outline-offset: 2px;
}
::selection { background: var(--oxo-bleu-nuit); color: #fff; }

/* Champs de formulaire (contact) : bordure + anneau doux bleu nuit au focus.
   L'outline or :focus-visible ci-dessus reste prioritaire au clavier (a11y). */
input, textarea, select, .form-control, .form-select {
  transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus, textarea:focus, select:focus,
.form-control:focus, .form-select:focus {
  border-color: var(--oxo-bleu-nuit);
  box-shadow: 0 0 0 3px rgba(22, 36, 63, 0.10);
}

/* --- 13. Utilitaires OXO + accessibilité mouvement -------------------- */
/* Skip-link (lien d'évitement) : caché jusqu'au focus clavier */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  background: var(--oxo-bleu-nuit);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 5px 0;
  font-family: var(--primary-font);
  font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

.text-white-90 { color: rgba(255,255,255,.9) !important; }

/* Voile bleu nuit sur les bannières (lisibilité du texte blanc) */
.oxo-hero-overlay { position: relative; }
.oxo-hero-overlay::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,36,63,.72) 0%, rgba(22,36,63,.82) 100%);
  z-index: 0;
}
.oxo-hero-overlay > .container,
.oxo-hero-overlay > .container-fluid { position: relative; z-index: 1; }

/* FAQ native <details> */
.oxo-faq details {
  border: 1px solid var(--oxo-brume);
  border-radius: 6px;
  margin-bottom: 14px;
  background: var(--oxo-papier);
}
.oxo-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  font-family: var(--alt-font);
  font-weight: 600;
  font-size: 20px;
  color: var(--oxo-bleu-nuit);
  position: relative;
}
.oxo-faq summary::-webkit-details-marker { display: none; }
.oxo-faq summary::after {
  content: "+";
  position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  color: var(--oxo-or); font-size: 24px; font-weight: 400; line-height: 1;
}
.oxo-faq details[open] summary::after { content: "–"; }
.oxo-faq details > div, .oxo-faq .oxo-faq-answer {
  padding: 0 24px 22px;
  color: var(--oxo-gris-plomb);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .feature-box:hover,
  .oxo-step:hover,
  .oxo-stat:hover,
  .oxo-profile-cta:hover,
  .oxo-pillar:hover .feature-box-icon i,
  .oxo-service-card:hover .oxo-service-icon i,
  .oxo-service-card:hover .oxo-card-link i,
  .oxo-profile-cta:hover .oxo-card-link i { transform: none; }
}

/* ============================================================
   14. COMPOSANTS RICHES CRAFTO RÉINTRODUITS — mapping charte OXO
   (accueil v2 « riche/animée »). N'écrase pas l'existant conforme :
   ne fait qu'AJOUTER le style des classes Crafto remappées
   (hero swiper, parallax, process-steps, badge expérience, CTA
   parallax, profils, citation) + garde-fous data-anime/no-js.
   ============================================================ */

/* --- 14.0 GARDE-FOU data-anime : visible si JS échoue / désactivé ----- */
/* Un script synchrone en tête de <head> retire .no-js (et ajoute .js) dès
   le 1er octet : avec JS actif, .no-js disparaît AVANT le 1er rendu, donc
   ces règles ne s'appliquent plus et anime.js gère librement l'état initial
   (plus de !important qui neutralisait les reveals stagger). Sans JS, .no-js
   demeure et force la visibilité pour ne JAMAIS masquer du contenu. */
html.no-js [data-anime] { opacity: 1 !important; transform: none !important; }
html.no-js [data-anime] * { opacity: 1 !important; transform: none !important; }
/* Idem si l'utilisateur réduit les animations : pas d'apparition différée */
@media (prefers-reduced-motion: reduce) {
  [data-anime], [data-anime] * { opacity: 1 !important; transform: none !important; }
  [data-bottom-top], [data-top-bottom] { transform: none !important; }
}

/* --- 14.1 HERO swiper : voile, pagination or, eyebrow, titres -------- */
/* La hauteur plein écran et le voile bleu nuit réutilisent .oxo-hero-overlay
   (déjà défini §13) ; ici on adapte au contexte swiper (overlay en absolute). */
.oxo-hero-swiper { position: relative; }
.oxo-hero-swiper .swiper-slide { position: relative; }
.oxo-hero-overlay.cover-background::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,36,63,.74) 0%, rgba(22,36,63,.84) 100%);
  z-index: 0;
}
/* sur-titre « pill » discrète sur fond sombre */
.oxo-hero-eyebrow {
  position: relative;
  padding-left: 34px;
}
.oxo-hero-eyebrow::before {
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 24px; height: 2px; background-color: var(--oxo-or);
}
/* slides 2 & 3 : on garde la même échelle visuelle que le H1 sans 2e H1 */
.oxo-hero-heading {
  font-size: 58px; line-height: 1.1; font-weight: 700;
  letter-spacing: -1px; margin-bottom: 25px;
}
/* Palier tablette intermédiaire : lisse le saut 58 → 38px (évite un titre trop dense sur iPad). */
@media (max-width: 1199px) { .oxo-hero-heading { font-size: 48px; } }
@media (max-width: 991px) { .oxo-hero-heading { font-size: 38px; } }

/* Pagination swiper → puces or sur l'active, blanc translucide sinon */
.swiper-light-pagination .swiper-pagination-bullet,
.oxo-hero-swiper .swiper-pagination-bullet {
  background-color: rgba(255,255,255,.55);
  opacity: 1;
  width: 9px; height: 9px;
  transition: background-color .3s ease, width .3s ease;
}
.swiper-light-pagination .swiper-pagination-bullet-active,
.oxo-hero-swiper .swiper-pagination-bullet-active {
  background-color: var(--oxo-or);
  width: 26px; border-radius: 6px;
}

/* Flèches de navigation manuelles du hero (focusables, charte OXO) */
.oxo-hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 54px; height: 54px;
  align-items: center; justify-content: center;
  background-color: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  color: #fff;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
  cursor: pointer;
}
.oxo-hero-arrow i { font-size: 22px; line-height: 1; color: #fff; }
.oxo-hero-prev { left: 30px; }
.oxo-hero-next { right: 30px; }
.oxo-hero-arrow:hover,
.oxo-hero-arrow:focus-visible {
  background-color: var(--oxo-or);
  border-color: var(--oxo-or);
}
.oxo-hero-arrow.swiper-button-disabled { opacity: .35; cursor: default; }

/* Indicateur de scroll */
.oxo-scroll-down {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 2; flex-direction: column; align-items: center;
  text-decoration: none; color: #fff;
}
.oxo-scroll-down-text {
  font-family: var(--primary-font); font-size: 12px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,.85); margin-bottom: 10px;
}
.oxo-scroll-down-line {
  position: relative; display: block;
  width: 1px; height: 46px; background-color: rgba(255,255,255,.4);
  overflow: hidden;
}
.oxo-scroll-down-line::after {
  content: ""; position: absolute; left: 0; top: -50%;
  width: 1px; height: 50%; background-color: var(--oxo-or);
  animation: oxo-scroll-pulse 1.8s ease-in-out infinite;
}
@keyframes oxo-scroll-pulse {
  0%   { top: -50%; }
  100% { top: 100%; }
}
.oxo-scroll-down:hover .oxo-scroll-down-text { color: var(--oxo-or-clair); }

/* --- 14.2 Bandeau preuves : cartes statistiques pleine largeur ------- */
.oxo-stat {
  padding: 22px 26px;
  width: 100%;
  align-items: center;
}
.oxo-stat .feature-box-icon i { margin-bottom: 0; }
.oxo-stat:hover { transform: translateY(-6px); }

/* --- 14.3 Badge expérience flottant sur l'image « Notre métier » -------
   Fond bleu nuit (et non or) pour garantir le contraste AA du label :
   blanc rgba(.95) sur or #B8862F = 3.08:1 (échec 1.4.3) ; sur bleu nuit
   #16243F = ~14:1 (OK). Le nombre passe en or clair #D9A441 (6.87:1 sur
   bleu nuit, AA même en texte normal), liseré or pour conserver la
   signature charte. */
.oxo-experience-badge {
  position: absolute;
  left: 18px; bottom: -30px;
  background-color: var(--oxo-bleu-nuit);
  color: #fff;
  border: 1px solid var(--oxo-or);
  border-radius: 8px;
  padding: 20px 26px;
  display: flex; align-items: center; gap: 14px;
  max-width: 280px;
}
/* Ombre portée riche en bleu nuit (la classe Crafto box-shadow-quadruple-large
   posée en HTML est en gris hors charte → on la surcharge). */
.oxo-experience-badge.box-shadow-quadruple-large {
  box-shadow: 0 24px 60px rgba(22, 36, 63, 0.22), 0 4px 12px rgba(22, 36, 63, 0.12) !important;
}
.oxo-experience-badge-number {
  font-family: var(--alt-font);
  font-size: 42px; font-weight: 700; line-height: 1;
  color: var(--oxo-or-clair);
}
.oxo-experience-badge-label {
  font-family: var(--primary-font);
  font-size: 13px; font-weight: 600; line-height: 1.35;
  color: rgba(255,255,255,.95);
}
@media (max-width: 575px) {
  .oxo-experience-badge { left: 50%; transform: translateX(-50%); padding: 16px 20px; }
  .oxo-experience-badge-number { font-size: 34px; }
}

/* --- 14.4 Piliers indépendance : icône en pastille givre ------------- */
.oxo-pillar .feature-box-icon i {
  width: 70px; height: 70px;
  display: inline-flex; align-items: center; justify-content: center;
  background-color: var(--oxo-givre);
  border: 1px solid var(--oxo-brume);
  border-radius: 14px;
  margin-bottom: 22px;
  font-size: 30px;
  /* Léger relief au repos (liseré interne + ombre de contact), easing Crafto. */
  box-shadow: inset 0 0 0 1px var(--oxo-brume), 0 2px 6px rgba(22, 36, 63, 0.04);
  transition: background-color .35s cubic-bezier(0.37, 0, 0.63, 1),
              border-color .35s cubic-bezier(0.37, 0, 0.63, 1),
              color .35s cubic-bezier(0.37, 0, 0.63, 1),
              box-shadow .35s cubic-bezier(0.37, 0, 0.63, 1),
              transform .35s cubic-bezier(0.37, 0, 0.63, 1);
}
.oxo-pillar:hover .feature-box-icon i {
  background-color: var(--oxo-bleu-nuit);
  border-color: var(--oxo-bleu-nuit);
  color: #fff;
  /* La pastille « décolle » : ombre portée bleu nuit + léger lift. */
  box-shadow: 0 8px 18px rgba(22, 36, 63, 0.22);
  transform: translateY(-2px);
}

/* --- 14.5 Cartes services : pastille icône + lien fléché ------------- */
.oxo-service-card { padding: 38px 34px; }
.oxo-service-icon i {
  width: 64px; height: 64px;
  display: inline-flex; align-items: center; justify-content: center;
  background-color: var(--oxo-givre);
  border-radius: 50%;
  margin-bottom: 20px; font-size: 28px;
  transition: background-color .35s cubic-bezier(0.37, 0, 0.63, 1),
              color .35s cubic-bezier(0.37, 0, 0.63, 1),
              box-shadow .35s cubic-bezier(0.37, 0, 0.63, 1),
              transform .35s cubic-bezier(0.37, 0, 0.63, 1);
}
.oxo-service-card:hover .oxo-service-icon i {
  background-color: var(--oxo-or);
  color: #fff;
  /* Léger pivot + zoom + relief or : la pastille « prend vie » au survol. */
  transform: rotate(-6deg) scale(1.06);
  box-shadow: 0 8px 18px rgba(184, 134, 47, 0.30);
}
.oxo-card-link {
  position: relative;
  color: var(--oxo-bleu-nuit);
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px;
}
.oxo-card-link i { transition: transform .3s cubic-bezier(.2, 0, .3, 1); }
/* Filet or qui se déploie sous le lien « En savoir plus » (signature Crafto). */
.oxo-card-link::after {
  content: ""; position: absolute; left: 0; bottom: -3px;
  height: 1px; width: 0; background: var(--oxo-or);
  transition: width .35s cubic-bezier(.2, 0, .3, 1);
}
.oxo-service-card:hover .oxo-card-link::after { width: calc(100% - 26px); }
.oxo-service-card:hover .oxo-card-link { color: var(--oxo-or); }
.oxo-service-card:hover .oxo-card-link i,
.oxo-profile-cta:hover .oxo-card-link i { transform: translateX(5px); }

/* --- 14.6 Process-steps : numéros or, connecteurs pointillés --------- */
.oxo-step {
  background-color: var(--oxo-papier);
  border: 1px solid var(--oxo-brume);
  border-radius: 8px;
  padding: 32px 28px;
  position: relative;
  /* Ombre 2 couches au repos + easing Crafto (cohérent avec .feature-box). */
  box-shadow: 0 1px 2px rgba(22, 36, 63, 0.05), 0 6px 16px rgba(22, 36, 63, 0.05);
  transition: box-shadow .4s cubic-bezier(0.37, 0, 0.63, 1),
              border-color .4s cubic-bezier(0.37, 0, 0.63, 1),
              transform .4s cubic-bezier(0.37, 0, 0.63, 1);
}
.oxo-step:hover {
  border-color: var(--oxo-or);
  box-shadow: 0 2px 4px rgba(22, 36, 63, 0.06), 0 18px 40px rgba(22, 36, 63, 0.13);
  transform: translateY(-6px);
}
.oxo-step-head {
  position: relative;
  display: flex; align-items: center;
  margin-bottom: 18px;
}
.oxo-step-number {
  width: 58px; height: 58px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background-color: var(--oxo-bleu-nuit);
  color: #fff;
  border-radius: 50%;
  font-size: 22px; font-weight: 700;
  position: relative; z-index: 1;
  transition: background-color .3s ease;
}
/* Survol : fond or + numéro bleu nuit (4.78:1) plutôt que blanc (3.24:1),
   marge de contraste confortable même si le chiffre n'était que « texte large ». */
.oxo-step:hover .oxo-step-number { background-color: var(--oxo-or); color: var(--oxo-bleu-nuit); }
/* connecteur or pointillé vers l'étape suivante (desktop) */
.oxo-step-connector {
  position: absolute;
  left: 70px; right: -40px; top: 29px;
  border-top: 2px dashed var(--oxo-or);
  opacity: .55;
  transition: opacity .3s ease;
}
/* Le lien vers l'étape suivante « s'illumine » quand l'étape est survolée. */
.oxo-step:hover .oxo-step-connector { opacity: .9; }
@media (max-width: 991px) { .oxo-step-connector { display: none; } }

/* --- 14.7 Profils interlocuteurs : icône or + carte CTA bleu nuit ---- */
.oxo-profile-card .feature-box-icon i {
  font-size: 30px; margin-bottom: 16px;
}
.oxo-profile-cta {
  background-color: var(--oxo-bleu-nuit);
  border-color: var(--oxo-bleu-nuit);
  transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
}
.oxo-profile-cta .feature-box-icon i,
.oxo-profile-cta i { color: var(--oxo-or-clair); font-size: 34px; }
.oxo-profile-cta:hover {
  background-color: var(--oxo-ardoise);
  border-color: var(--oxo-or);
  transform: translateY(-6px);
}
.oxo-profile-cta .oxo-card-link { color: #fff; }
.oxo-profile-cta:hover .oxo-card-link { color: var(--oxo-or-clair); }

/* --- 14.8 Citation de positionnement (remplace testimonials Crafto) --
   Encadrée dans une carte bleu nuit + filet or + ombre pour densifier
   la section (la plus plate comparée au gabarit) sans rien inventer.
   Texte blanc sur bleu nuit = AA largement respecté. */
.oxo-quote-card {
  position: relative;
  background-color: var(--oxo-bleu-nuit);
  border-radius: 10px;
  padding: 70px 60px;
  box-shadow: 0 24px 60px rgba(22,36,63,.18);
  overflow: hidden;
}
.oxo-quote-card::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 100%; height: 4px;
  background-color: var(--oxo-or);
}
.oxo-quote-icon { font-size: 48px; color: var(--oxo-or-clair) !important; }
.oxo-positioning-quote {
  font-size: 30px; line-height: 1.4; quotes: none;
  border: 0; padding: 0;
  color: #fff;
}
.oxo-quote-attr { color: var(--oxo-or-clair); }
@media (max-width: 991px) {
  .oxo-positioning-quote { font-size: 23px; }
  .oxo-quote-card { padding: 45px 28px; }
}

/* --- 14.9 CTA bas de page : bande parallax fond image + voile ------- */
/* .bg-dark-slate-blue est remappé en ardoise OXO ; on renforce le voile
   pour garantir le contraste AA du texte blanc par-dessus l'image. */
.bg-dark-slate-blue { background-color: var(--oxo-ardoise) !important; }
.oxo-cta-parallax { background-color: var(--oxo-bleu-nuit) !important; }
.oxo-cta-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,36,63,.86) 0%, rgba(22,36,63,.90) 100%) !important;
  opacity: 1 !important;
  z-index: 0;
}
.oxo-cta-parallax > .container { position: relative; z-index: 1; }
/* Padding du bloc CTA bas (S9) : pt-4/pb-4 couvrent le mobile ; dès lg on
   épaissit la bande sombre (lg-pt-6/lg-pb-6 de Crafto sont absents de ce
   build → no-op) pour équilibrer la hauteur avec la bannière S6.
   Le data-anime translateX(0) au scroll reste inchangé. */
@media (min-width: 992px) {
  .oxo-cta-parallax.lg-pt-6 { padding-top: 90px !important; }
  .oxo-cta-parallax.lg-pb-6 { padding-bottom: 90px !important; }
}

/* --- 14.10 Filet signature 9px : variante OR (séparateurs de section).
   Dégradé qui fond vers la transparence (finition Crafto) au lieu d'un trait
   or brut. background-color conservé en repli si gradients indisponibles. */
.separator-line-9px.bg-gold {
  background-color: var(--oxo-or) !important;
  background-image: linear-gradient(90deg, var(--oxo-or) 0%, rgba(184, 134, 47, 0.35) 100%) !important;
  height: 6px;
}

/* --- 14.11 Lien fléché sur boutons (icône) -------------------------- */
.btn .feather { vertical-align: middle; }
/* Flèche qui avance au survol des CTA texte secondaires (« Qui sommes-nous ?
   → », « Découvrir notre méthode → »). */
.btn.btn-transparent-dark-gray i.feather,
.btn.btn-outline-oxo i.feather {
  transition: transform .3s cubic-bezier(.2, 0, .3, 1);
}
.btn.btn-transparent-dark-gray:hover i.feather,
.btn.btn-transparent-dark-gray:focus-visible i.feather,
.btn.btn-outline-oxo:hover i.feather,
.btn.btn-outline-oxo:focus-visible i.feather {
  transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
  .btn.btn-transparent-dark-gray:hover i.feather,
  .btn.btn-transparent-dark-gray:focus-visible i.feather,
  .btn.btn-outline-oxo:hover i.feather,
  .btn.btn-outline-oxo:focus-visible i.feather { transform: none; }
}
/* Pastille fléchée Crafto « with-rounded » sur CTA primaires (mapping or/blanc
   déjà défini §5 : .btn .bg-white = or, .btn .text-base-color = blanc).
   On remplace l'ombre dure Crafto (rgba(0,0,0,.35), hors charte) par une ombre
   bleu nuit douce, et on fait GLISSER la flèche au survol (signature premium). */
.btn.with-rounded .bg-white,
.btn .with-rounded {
  display: inline-flex; align-items: center; justify-content: center;
}
.btn.with-rounded > span {
  box-shadow: 0 6px 14px rgba(22, 36, 63, 0.28);
  transition: transform .35s cubic-bezier(.2, 0, .3, 1),
              box-shadow .35s ease;
}
.btn.with-rounded > span i {
  transition: transform .35s cubic-bezier(.2, 0, .3, 1);
}
.btn.with-rounded:hover > span,
.btn.with-rounded:focus-visible > span {
  box-shadow: 0 9px 20px rgba(22, 36, 63, 0.34);
}
.btn.with-rounded:hover > span i,
.btn.with-rounded:focus-visible > span i {
  transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
  .btn.with-rounded:hover > span i,
  .btn.with-rounded:focus-visible > span i { transform: none; }
}

/* --- 14.12 Hooks de structure (fiabilisation rendu) ----------------- */
/* Espacement vertical de la grille des 6 étapes Méthode. */
.oxo-process { row-gap: 10px; }
/* Filet signature or par item de FAQ (séparateur discret en survol/ouvert). */
.oxo-faq-item { transition: border-color .3s ease, box-shadow .3s ease; }
.oxo-faq-item:hover,
.oxo-faq-item[open] {
  border-color: var(--oxo-or) !important;
  box-shadow: 0 6px 18px rgba(22,36,63,.06);
}

/* --- 15. Header immersif transparent (Accueil) ------------------------
   Au-dessus du hero : header transparent, logotype + nav BLANCS.
   Au scroll (header.sticky.sticky-active, ajouté par main.js) : fond papier
   opaque, logotype + nav BLEU NUIT. Crafto gère deja le fond blanc sticky via
   [data-header-hover=light] ; on impose ici la charte OXO (logotype texte). */

/* 15.1 État transparent (1er écran, au-dessus du hero) */
.header-transparent .oxo-logo .oxo-logo-mark { color: var(--oxo-papier); }
.header-transparent .oxo-logo .oxo-logo-sub  { color: rgba(255,255,255,.8); }
/* le filet du logo reste OR dans les deux états */
.header-transparent .navbar-nav .nav-link { color: var(--oxo-papier) !important; opacity: 1 !important; }
.header-transparent .navbar-nav .nav-item:hover .nav-link,
.header-transparent .navbar-nav .nav-link.active,
.header-transparent .navbar-nav .nav-item.active .nav-link {
  color: var(--oxo-papier) !important;
  box-shadow: inset 0 -2px 0 0 var(--oxo-or);
}
.header-transparent .navbar-toggler-line { background-color: var(--oxo-papier); }
/* Bouton Contact sur le hero : contour blanc (le fond bleu nuit serait peu lisible) */
.header-transparent .header-button .btn.btn-base-color {
  background-color: transparent;
  border-color: rgba(255,255,255,.7);
  color: var(--oxo-papier);
  box-shadow: none; /* annule l'ombre bleu nuit du CTA primaire (invisible/inutile sur header transparent) */
}
.header-transparent .header-button .btn.btn-base-color:hover,
.header-transparent .header-button .btn.btn-base-color:focus-visible {
  background-color: var(--oxo-papier);
  border-color: var(--oxo-papier);
  color: var(--oxo-bleu-nuit);
  box-shadow: none;
}

/* 15.2 État sticky (au défilement) : fond papier opaque + contenus bleu nuit */
header.sticky.sticky-active .navbar.header-transparent {
  background-color: var(--oxo-papier) !important;
  border-bottom: 1px solid var(--oxo-brume);
  box-shadow: 0 10px 35px rgba(22,36,63,.08);
}
header.sticky.sticky-active .header-transparent .oxo-logo .oxo-logo-mark { color: var(--oxo-bleu-nuit); }
header.sticky.sticky-active .header-transparent .oxo-logo .oxo-logo-sub  { color: var(--oxo-gris-plomb); }
header.sticky.sticky-active .header-transparent .navbar-nav .nav-link { color: var(--oxo-bleu-nuit) !important; }
header.sticky.sticky-active .header-transparent .navbar-nav .nav-item:hover .nav-link,
header.sticky.sticky-active .header-transparent .navbar-nav .nav-link.active,
header.sticky.sticky-active .header-transparent .navbar-nav .nav-item.active .nav-link {
  color: var(--oxo-bleu-nuit) !important;
  box-shadow: inset 0 -2px 0 0 var(--oxo-or);
}
header.sticky.sticky-active .header-transparent .navbar-toggler-line { background-color: var(--oxo-bleu-nuit); }
header.sticky.sticky-active .header-transparent .header-button .btn.btn-base-color {
  background-color: var(--oxo-bleu-nuit);
  border-color: var(--oxo-bleu-nuit);
  color: var(--oxo-papier);
}

/* 15.3 Mobile : barre transparente en haut + menu déplié sur fond papier. */
@media (max-width: 991px) {
  /* Sur mobile, la barre NE chevauche PAS le hero (la navbar fixe fait ~98px et
     le hero démarre EN DESSOUS). La barre transparente laissait donc voir le fond
     blanc de page avec un logo/hamburger BLANCS = invisible (« tout blanc »).
     On rend donc la barre lisible : fond papier + logo / hamburger / bouton en
     BLEU NUIT (même registre que l'état défilé), identique sur toutes les pages. */
  header .navbar.header-transparent { background-color: var(--oxo-papier); }
  .header-transparent .oxo-logo .oxo-logo-mark { color: var(--oxo-bleu-nuit); }
  .header-transparent .oxo-logo .oxo-logo-sub  { color: var(--oxo-gris-plomb); }
  .header-transparent .navbar-toggler-line { background-color: var(--oxo-bleu-nuit); }
  .header-transparent .header-button .btn.btn-base-color {
    background-color: var(--oxo-bleu-nuit); border-color: var(--oxo-bleu-nuit); color: var(--oxo-papier);
  }
  .header-transparent .navbar-collapse {
    background-color: var(--oxo-papier);
    border: 1px solid var(--oxo-brume);
    border-radius: 6px;
    margin-top: 12px;
    padding: 8px 4px;
    box-shadow: 0 12px 35px rgba(22,36,63,.12);
  }
  .header-transparent .navbar-collapse .navbar-nav .nav-link { color: var(--oxo-bleu-nuit) !important; }
  .header-transparent .navbar-collapse .navbar-nav .nav-link.active {
    color: var(--oxo-bleu-nuit) !important;
    box-shadow: inset 0 -2px 0 0 var(--oxo-or);
  }
}

/* 15.4 Pages à hero CLAIR (légales : .oxo-legal-head) — le header transparent
   héritait du blanc (header-reverse) -> logo/menu/Contact illisibles sur le givre.
   On force l'état haut-de-page en SOMBRE (l'état sticky 15.2 est déjà sombre,
   donc cohérence dans les deux états). */
body:has(.oxo-legal-head) .header-transparent .oxo-logo .oxo-logo-mark { color: var(--oxo-bleu-nuit); }
body:has(.oxo-legal-head) .header-transparent .oxo-logo .oxo-logo-sub  { color: var(--oxo-gris-plomb); }
body:has(.oxo-legal-head) .header-transparent .navbar-nav .nav-link { color: var(--oxo-bleu-nuit) !important; }
body:has(.oxo-legal-head) .header-transparent .navbar-nav .nav-item:hover .nav-link,
body:has(.oxo-legal-head) .header-transparent .navbar-nav .nav-link.active,
body:has(.oxo-legal-head) .header-transparent .navbar-nav .nav-item.active .nav-link {
  color: var(--oxo-bleu-nuit) !important;
  box-shadow: inset 0 -2px 0 0 var(--oxo-or);
}
body:has(.oxo-legal-head) .header-transparent .navbar-toggler-line { background-color: var(--oxo-bleu-nuit); }
body:has(.oxo-legal-head) .header-transparent .header-button .btn.btn-base-color {
  background-color: var(--oxo-bleu-nuit);
  border-color: var(--oxo-bleu-nuit);
  color: var(--oxo-papier);
  box-shadow: 0 6px 18px rgba(22,36,63,.18);
}
body:has(.oxo-legal-head) .header-transparent .header-button .btn.btn-base-color:hover,
body:has(.oxo-legal-head) .header-transparent .header-button .btn.btn-base-color:focus-visible {
  background-color: var(--oxo-ardoise);
  border-color: var(--oxo-ardoise);
  color: var(--oxo-papier);
}

/* --- 16. Vidéo de fond du hero (Accueil, slide 1) -------------------- */
/* Vidéo générée par IA, muette, en boucle. L'image banniere-accueil.jpg
   reste le poster / fallback (no-video, prefers-reduced-motion). */
.oxo-hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  border: 0;
  pointer-events: none;
}
/* Le voile bleu nuit passe AU-DESSUS de la vidéo (lisibilité du texte blanc) */
.oxo-hero-overlay.oxo-hero-has-video::before { z-index: 1; }
/* Accessibilité : pas de vidéo animée si l'utilisateur réduit les animations
   → on masque la vidéo, l'image de fond (poster) reste affichée. */
@media (prefers-reduced-motion: reduce) {
  .oxo-hero-video { display: none; }
}

/* ============================================================
   17. RAPPROCHEMENT CRAFTO v2 — fidélité structure/fonds/composants
   en charte OXO (correctifs issus des 6 analyses). N'ajoute que des
   surcharges ; ne réécrit pas le HTML conforme.
   ============================================================ */

/* --- 17.0 Garde-fou data-bottom-top / skrollr-zoom sous reduced-motion -
   Complète §14.0 : neutralise AUSSI le zoom skrollr (S6) et les transforms
   data-center-top résiduels, pour ne laisser aucun mouvement gênant. */
@media (prefers-reduced-motion: reduce) {
  .skrollr-zoom[data-bottom-top],
  .skrollr-zoom[data-top-bottom],
  [data-center-top] { transform: none !important; }
}

/* --- 17.1 S3 « Notre métier » : filet de sécurité ratio + hauteur colonne -
   Garantit la composition portrait (principale) + carré (flottante) même si
   une source est paysage, et empêche le collapse de la colonne (la flottante
   est en position-absolute → la colonne doit conserver une hauteur). */
.oxo-metier-visual { min-height: 1px; }
.oxo-metier-visual > .text-end img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 100%;
  height: auto;
  display: block;
}
.oxo-metier-visual .position-absolute img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  height: auto;
  display: block;
  /* Cadre papier clair (détache la flottante du portrait sombre) + liseré
     interne blanc + ombre de contact riche = 2 plans distincts façon Crafto. */
  border: 6px solid var(--oxo-papier);
  box-shadow: 0 24px 60px rgba(22,36,63,.18), inset 0 0 0 1px rgba(255,255,255,.6) !important;
}
/* Débord plus marqué vers la gauche : la flottante mord davantage hors du
   portrait (rupture de plan Crafto). Le bottom-minus-50px reste porté en HTML. */
@media (min-width: 992px) {
  .oxo-metier-visual .position-absolute { left: 0 !important; }
}
/* Dès lg, réserve de la hauteur pour le débord bas-gauche de la flottante
   (bottom-minus-50px) afin que la section ne se referme pas et que le
   centrage vertical align-items-center reste équilibré (couvre lg + xl). */
@media (min-width: 992px) {
  .oxo-metier-visual { padding-bottom: 60px; }
}

/* --- 17.2 Pie-chart « Notre métier » : fallback conique (jamais de cercle
   vide si le plugin easyPieChart ne génère pas le canvas). Le canvas réel,
   s'il est créé, se superpose et masque ce fond. data-percent=100 → 100%. */
.pie-chart-style-01 {
  position: relative;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: conic-gradient(var(--oxo-or) 0 100%, #ededed 0);
}
.pie-chart-style-01::before {
  content: "";
  position: absolute; inset: 7px;
  border-radius: 50%;
  background: var(--oxo-papier);
}
/* Anti double-anneau : quand easyPieChart a généré le canvas, on coupe le
   fond conique CSS pour ne laisser QU'UNE source de rendu (le canvas).
   Le fallback conique ne sert plus que si le plugin n'a rien créé. */
.pie-chart-style-01:has(canvas) { background: none; }
.pie-chart-style-01:has(canvas)::before { background: none; }
.pie-chart-style-01 canvas { position: relative; z-index: 1; }
.pie-chart-style-01 .percent {
  position: relative; z-index: 2;
  /* Force « 100% » sur une seule ligne, centré dans le cercle comme le
     « 90% » de Crafto (empêche le retour à la ligne « 1/0/0% »). */
  white-space: nowrap;
  width: 100%; height: 100%;
}
/* Affiche « 100% » via le ::after du .percent si le plugin ne l'a pas peuplé. */
.pie-chart-style-01 .percent:empty::after { content: "100%"; white-space: nowrap; }
/* La colonne du pie garde une largeur fixe → pas de compression du label. */
.chart-percent { width: 120px; min-width: 120px; }

/* --- 17.3 S2 bandeau 4 atouts : icône + texte inline SANS carte ---------
   Crafto présente ce bandeau sans fond/bordure/ombre. On neutralise le style
   carte .feature-box pour ce bandeau précis (les autres sections gardent la
   carte). On conserve la pastille icône or et le label alt-font. */
.icon-with-text-style-08 .feature-box {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  transform: none;
}
.icon-with-text-style-08 .feature-box:hover {
  transform: none;
  box-shadow: none;
  border: 0;
}

/* --- 17.4 Override charte des ombres Crafto neutres → bleu nuit ---------
   Homogénéise la profondeur (cartes témoignages, accordéon, image flottante
   S3) sur la teinte bleu nuit OXO. Exception .oxo-experience-badge conservée
   (définie §14.3, plus spécifique). */
.box-shadow-quadruple-large { box-shadow: 0 20px 60px rgba(22,36,63,.12), 0 3px 8px rgba(22,36,63,.06) !important; }
.box-shadow-extra-large     { box-shadow: 0 0 30px rgba(22,36,63,.10) !important; }
.box-shadow-medium-bottom   { box-shadow: 0 10px 20px rgba(22,36,63,.10) !important; }
.btn-box-shadow             { box-shadow: 0 5px 20px rgba(22,36,63,.12); }
.btn-box-shadow:hover       { box-shadow: 0 8px 30px rgba(22,36,63,.18); }

/* --- 17.5 Voile bannière parallax S6 → bleu nuit (charte) ---------------
   Le voile Crafto .bg-gradient-dark-transparent est gris-noir (#141622).
   On le remappe en bleu nuit, ciblé sur les bannières OXO (.oxo-banner-overlay)
   pour ne pas affecter d'autres usages. Renforce le contraste du texte blanc. */
.oxo-banner-overlay { position: relative; }
.oxo-banner-overlay .bg-gradient-dark-transparent {
  background: linear-gradient(to top, rgba(22,36,63,.92) 7%, transparent 100%) !important;
}
/* 2e couche de voile global très léger en haut de la bannière : homogénéise
   la profondeur sur toute la hauteur (le gradient bas seul laissait le haut
   plat). Reste sous le contenu (z-index 0) et au-dessus de l'image. */
.oxo-banner-overlay::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,36,63,.18) 0%, transparent 40%);
  z-index: 0;
  pointer-events: none;
}

/* --- 17.6 Hero : dégradé DIRECTIONNEL bleu nuit (profondeur Crafto) ------
   Remplace l'aplat 74→84% par une diagonale 135° + vignette radiale haute,
   pour retrouver la modulation de bg-gradient-sherpa-blue-black et harmoniser
   la profondeur des 3 zones sombres (S1/S6/S9), en gardant la lisibilité. */
.oxo-hero-overlay.cover-background::before {
  background: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.05), transparent 55%),
              linear-gradient(135deg, rgba(22,36,63,.70) 0%, rgba(22,36,63,.86) 100%);
}

/* --- 17.7 S6 bannière : médaillon rond Crafto re-détourné en LIEN méthode --
   Conserve la silhouette « cercle play » signature de la S6 Crafto, mais c'est
   un lien (pas une vidéo) : flèche or au centre + libellé visible à côté. */
.oxo-banner-medallion .video-icon-box {
  width: 64px; height: 64px;
  border-color: rgba(255,255,255,.6) !important;
  transition: background-color .35s cubic-bezier(.2,0,.3,1),
              border-color .35s cubic-bezier(.2,0,.3,1),
              transform .35s cubic-bezier(.2,0,.3,1);
}
.oxo-banner-medallion .video-icon { display: inline-flex; align-items: center; justify-content: center; }
.oxo-banner-medallion .video-icon i { font-size: 22px; line-height: 1; transition: transform .35s cubic-bezier(.2,0,.3,1); }
.oxo-banner-medallion .oxo-banner-medallion-label { transition: color .3s ease; }
.oxo-banner-medallion:hover .video-icon-box,
.oxo-banner-medallion:focus-visible .video-icon-box {
  background-color: var(--oxo-or);
  border-color: var(--oxo-or) !important;
}
.oxo-banner-medallion:hover .video-icon i,
.oxo-banner-medallion:focus-visible .video-icon i { transform: translateX(3px); }
.oxo-banner-medallion:hover .oxo-banner-medallion-label,
.oxo-banner-medallion:focus-visible .oxo-banner-medallion-label { color: var(--oxo-or-clair); }
@media (prefers-reduced-motion: reduce) {
  .oxo-banner-medallion:hover .video-icon i,
  .oxo-banner-medallion:focus-visible .video-icon i { transform: none; }
}

/* ============================================================
   18. TYPOGRAPHIE & RYTHME — échelle au plus près de Crafto (tour 2)
   Crafto rythme ses titres de SECTION en H3 ; OXO les a montés en H2 (40px)
   pour le SEO. On garde la balise <h2> (sémantique) mais on REDUIT la taille
   VISUELLE vers l'échelle Crafto pour retrouver le ratio hero/section ~1,7
   (58/34) au lieu de 1,45 (58/40). N'affecte pas le H1 hero ni les titres
   .oxo-rule (CTA S9) ni le statement de bannière (.oxo-banner-statement). */
h2.alt-font.text-dark-gray.fw-600.ls-minus-1px {
  font-size: 34px;
  line-height: 1.2;
}
@media (max-width: 991px) {
  h2.alt-font.text-dark-gray.fw-600.ls-minus-1px { font-size: 28px; }
}

/* 18.2 — S7 stats : échelle numérique compacte façon Crafto (« 200+ »).
   white-space:nowrap garde chaque chiffre/mot sur une seule ligne (« France »
   ne doit pas se casser en « Franc/e ») ; le garde-fou overflow-wrap §18.6 ne
   s'applique donc plus à ces tokens courts. */
.oxo-stat-number {
  font-size: 48px;
  line-height: 1;
  letter-spacing: -2px;
  white-space: nowrap;
  overflow-wrap: normal;
}
@media (max-width: 1199px) {
  .oxo-stat-number { font-size: 40px; }
}
@media (max-width: 991px) {
  .oxo-stat-number { font-size: 36px; }
}

/* 18.3 — S6 bannière statement : échelle H4 fw-300 légère de Crafto
   (et non un titre de section H2 40px). Conserve le fancy-text rotate. */
.oxo-banner-statement {
  font-size: 30px;
  line-height: 1.3;
  font-weight: 300;
}
@media (max-width: 991px) {
  .oxo-banner-statement { font-size: 24px; }
}

/* 18.4 — S5 accordéon : les 3 lignes-titres pèsent comme un H5 (prix Crafto),
   pas comme un titre de section. */
.pricing-table-style-04 .accordion-body h3 {
  font-size: 21px;
  line-height: 1.25;
}

/* 18.5 — S4 labels d'onglets : pas de coupure incontrôlée, rythme vertical net. */
.tab-style-05 .nav-tabs .nav-link span {
  line-height: 1.25;
  hyphens: none;
}

/* 18.6 — Garde-fou débordement : aucune ligne ne déborde après ajustements
   (Source Serif 4 est plus large que la police Crafto). */
h1, h2, h3, .oxo-hero-heading { overflow-wrap: break-word; }

/* ============================================================
   19. S8 cartes blog : tag détourné (date→tag) lisible — puce or
   ============================================================ */
.categories-text + .blog-date {
  position: relative;
  padding-left: 14px;
}
.categories-text + .blog-date::before {
  content: "";
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--oxo-or);
  position: absolute; left: 5px; top: 50%;
  transform: translateY(-50%);
}

/* ============================================================
   20. Badges pill : liseré or discret (relief sans perte de contraste)
   Le texte reste bleu nuit (a11y) ; on ajoute juste un anneau or à 25 %.
   ============================================================ */
.bg-solitude-blue.text-uppercase {
  box-shadow: inset 0 0 0 1px rgba(184,134,47,.25);
}

/* ============================================================
   21. CORRECTIONS UI / LISIBILITE — HERO + header (audit expert)
   ============================================================ */

/* 21.1 HERO — H1 : le clone a PERDU la classe .text-white -> le H1 etait
   rendu en BLEU NUIT sur le voile bleu nuit = quasi invisible. On force le
   blanc (l'ombre .text-shadow-double-large deja en place renforce la lecture). */
.oxo-hero-swiper h1,
.oxo-hero-swiper .oxo-hero-heading { color: var(--oxo-papier) !important; }

/* 21.2 HERO — eyebrow : etait blanc a opacity .6 (peu lisible). Or clair a
   plein contraste sur bleu nuit (AA), accent de marque, taille calibree. */
.oxo-hero-eyebrow {
  color: var(--oxo-or-clair) !important;
  opacity: 1 !important;
}
.oxo-hero-swiper .oxo-hero-eyebrow { font-size: 16px; letter-spacing: .5px; }

/* 21.3 HERO — espacement des 2 CTA : le me-sm-15px ne s'appliquait pas
   (~5px, pastille or quasi collee au 2e bouton). Gouttiere nette + pile mobile. */
@media (min-width: 576px) {
  .oxo-hero-swiper a.btn.with-rounded { margin-right: 22px !important; }
  /* Pages internes : 2 CTA hero dans .d-flex.flex-sm-row ; le me-sm-* Crafto
     n'est pas defini -> 0px. Gouttiere nette entre 2 boutons adjacents. */
  .d-flex.flex-sm-row.align-items-center > a.btn + a.btn { margin-left: 22px; }
}
@media (max-width: 575px) {
  .oxo-hero-swiper a.btn { display: block; width: 100%; margin-right: 0; margin-bottom: 14px; }
  .oxo-hero-swiper a.btn:last-child { margin-bottom: 0; }
}

/* 21.4 HEADER immersif — bouton « Contact » TRONQUE au bord droit.
   Cause : colonnes logo + Contact a 25% (col-xxl-3) + menu FR long -> la
   rangee depasse le viewport (bouton a 1450px pour 1440px). Fix : conteneur
   en flex space-between, colonnes a la largeur du contenu -> logo gauche /
   menu centre / Contact droite, sans aucun debordement. */
@media (min-width: 992px) {
  header .navbar > .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    column-gap: 24px;
    padding-left: 35px;
    padding-right: 35px;
  }
  header .navbar > .container-fluid > [class*="col-"] {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
}
header .header-button .btn { white-space: nowrap; }

/* ============================================================
   22. « 100 % Indépendants » (S3 Notre métier) — anneau CSS robuste.
   Remplace le pie-chart JS easyPieChart qui : (a) affichait « 21 % » au lieu
   de 100 %, (b) éjectait le label hors du cercle (boîte .percent ~47px),
   (c) re-déclenchait son animation au scroll. Rendu statique, lisible, centré.
   Texte en bleu nuit (AA) sur centre blanc ; anneau or = accent de marque.
   ============================================================ */
.oxo-pie {
  width: 120px; height: 120px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 7px solid var(--oxo-or);
  box-shadow: inset 0 0 0 1px rgba(184,134,47,.18);
  color: var(--oxo-bleu-nuit);
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.5px;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 575px) {
  .oxo-pie { width: 104px; height: 104px; font-size: 25px; border-width: 6px; }
}

/* ============================================================
   23. Vidéo de fond — bannière « statement » S6 (.oxo-banner-has-video).
   On garde l'image conteneurs-commerce.jpg comme POSTER/fallback et tout
   l'habillage existant (voile bleu nuit .bg-gradient-dark-transparent + ::after,
   zoom au scroll skrollr data-bottom-top/-top-bottom). La vidéo, 1er enfant du
   conteneur, est transformée AVEC lui (le zoom skrollr s'y applique) et reste
   SOUS le voile (z-index) et le contenu (.col z-index-1). Même pattern que le
   hero (§16) : muette, en boucle, masquée sous prefers-reduced-motion.
   ============================================================ */
.oxo-banner-has-video .oxo-banner-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  border: 0;
  pointer-events: none;
}
/* Voile bleu nuit explicitement au-dessus de la vidéo (lisibilité du texte) */
.oxo-banner-has-video .bg-gradient-dark-transparent { z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .oxo-banner-has-video .oxo-banner-video { display: none; }
}

/* ============================================================
   24. Bannière S6 — composition du contenu (respiration + médaillon CTA).
   Corrige : (a) statement collé au bord arrondi ; (b) médaillon flottant,
   mal aligné verticalement et « pas designé ». La vidéo et les voiles
   (absolute inset:0) restent PLEIN CADRE — seul le contenu en flux est inséré.
   ============================================================ */

/* 24.1 Respiration horizontale : le contenu (statement + médaillon) est inséré
   des bords arrondis. clamp() = 26px mini (mobile) → 5.5 % → 72px maxi (desktop). */
.oxo-banner-overlay {
  padding-left: clamp(26px, 5.5%, 72px);
  padding-right: clamp(26px, 5.5%, 72px);
}
@media (max-width: 575px) {
  .oxo-banner-overlay { padding-left: 22px; padding-right: 22px; }
}

/* 24.2 Voile directionnel : le texte est désormais aligné à GAUCHE (desktop).
   On ajoute un assombrissement gauche→droite très léger par-dessus le voile bas
   existant, pour ancrer le statement sur l'image portuaire chargée sans noircir
   la moitié droite (médaillon). Reste sous le contenu (z-index 1, comme le voile). */
@media (min-width: 992px) {
  .oxo-banner-has-video.oxo-banner-overlay::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(22,36,63,.40) 0%, rgba(22,36,63,.10) 38%, transparent 62%);
    z-index: 1;
    pointer-events: none;
  }
}

/* 24.3 Médaillon : cercle « contrôle » lisible (verre dépoli + ombre + anneau net),
   et non un fin anneau fantôme. Aligné à droite (text-lg-end) et centré
   verticalement avec le statement (.row.align-items-center). */
.oxo-banner-medallion .video-icon-box {
  /* Centrage RÉEL de la flèche : la boîte était en display:block, le contenu
     (spans imbriqués) se posait en haut-gauche → flèche décalée de ~16px. */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
  background-color: rgba(22,36,63,.30);
  border-color: rgba(255,255,255,.72) !important;
  box-shadow: 0 10px 28px rgba(7,12,24,.30);
}
/* Les spans intermédiaires ne doivent pas réintroduire de décalage. */
.oxo-banner-medallion .video-icon-box > span { display: inline-flex; line-height: 1; }
.oxo-banner-medallion .video-icon i { display: block; }
/* Correction optique : le glyphe feather « arrow-right » penche ~3px à droite
   dans sa gile. On recentre le CONTENEUR ; le nudge au survol (sur le <i>,
   translateX(3px)) compose et reste un déplacement net vers la droite. */
.oxo-banner-medallion .video-icon { transform: translateX(-3px); }
.oxo-banner-medallion .oxo-banner-medallion-label { letter-spacing: .2px; }
/* Pastille + libellé forment un seul groupe ; léger retrait au survol pour la vie. */
.oxo-banner-medallion:hover .video-icon-box,
.oxo-banner-medallion:focus-visible .video-icon-box {
  box-shadow: 0 12px 32px rgba(184,134,47,.34);
}
/* Accessibilité clavier : anneau de focus visible sur tout le lien. */
.oxo-banner-medallion:focus-visible {
  outline: 2px solid var(--oxo-or-clair);
  outline-offset: 6px;
  border-radius: 40px;
}
@media (min-width: 992px) {
  /* Le libellé garde un retrait du bord droit cohérent avec le statement à gauche. */
  .oxo-banner-medallion { padding-right: 2px; }
}

/* ============================================================
   25. Vidéo de fond — carte citation fondateur (.oxo-quote-has-video).
   La carte est déjà bleu nuit (§14.8). On glisse une vidéo SUBTILE sous un
   voile bleu nuit pour densifier la citation sans nuire à la lisibilité :
   texte blanc + accents or restent au-dessus du voile. Filet or (::before)
   au sommet de la pile. Poster/fallback + prefers-reduced-motion (carte fixe).
   ============================================================ */
.oxo-quote-has-video .oxo-quote-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0; border: 0; pointer-events: none;
}
/* Voile bleu nuit AU-DESSUS de la vidéo, SOUS le contenu (lisibilité AA). */
.oxo-quote-has-video::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(22,36,63,.88) 0%, rgba(22,36,63,.80) 100%);
  z-index: 1; pointer-events: none;
}
/* Contenu au-dessus du voile. */
.oxo-quote-has-video > .oxo-quote-icon,
.oxo-quote-has-video > .oxo-positioning-quote,
.oxo-quote-has-video > .oxo-quote-attr { position: relative; z-index: 2; }
/* Filet or conservé tout en haut de la pile. */
.oxo-quote-has-video::before { z-index: 3; }
@media (prefers-reduced-motion: reduce) {
  .oxo-quote-has-video .oxo-quote-video { display: none; }
}

/* ============================================================
   26. Passe de POLISH — cohérence inter-pages, états interactifs, contraste AA.
   Correctifs centralisés (audit polish). Ne touche PAS la charte : corrige des
   usages, des états manquants et des contrastes limites. Transforms sous
   garde prefers-reduced-motion.
   ============================================================ */

/* 26.1 Hero eyebrow : un seul registre sur tout le site (bas de casse, sans
   tracking) — supprime le tic « ALL-CAPS tracké » des pages internes. */
.oxo-hero-eyebrow { text-transform: none !important; letter-spacing: normal !important; }

/* 26.2 Or foncé dédié au TEXTE de lien (l'or #B8862F en 15px sur blanc echoue
   AA ~3.3:1 ; ce ton vise >=4.5:1 sur blanc). N'affecte pas les pictos. */
:root { --oxo-or-fonce: #7d5e1f; }
.oxo-service-card:hover .oxo-card-link,
.oxo-service-card:focus-within .oxo-card-link { color: var(--oxo-or-fonce); }

/* 26.3 Carte profil interlocuteur : même langage de survol que la carte service
   (lien or foncé + flèche qui glisse), au lieu de rester inerte. */
.oxo-profile-card:hover .oxo-card-link,
.oxo-profile-card:focus-visible .oxo-card-link { color: var(--oxo-or-fonce); }
.oxo-profile-card:hover .oxo-card-link i,
.oxo-profile-card:focus-visible .oxo-card-link i { transform: translateX(5px); }

/* 26.4 Onglets Services (S4) : état actif/survol en charte (laissés au thème
   Crafto). Indicateur de sélection = filet or (affordance d'onglet). */
.tab-style-05 .nav-tabs .nav-link { transition: color .25s ease, box-shadow .25s ease; }
.tab-style-05 .nav-tabs .nav-link:hover { color: var(--oxo-bleu-nuit); }
.tab-style-05 .nav-tabs .nav-link.active { color: var(--oxo-bleu-nuit); box-shadow: inset 3px 0 0 0 var(--oxo-or); }

/* 26.5 FAQ : le summary (grande zone cliquable) réagit au survol. */
.oxo-faq summary { transition: color .2s ease; }
.oxo-faq summary:hover, .oxo-faq summary:hover h3 { color: var(--oxo-or-fonce); }

/* 26.6 Cartes « Pour qui » (S8 accueil) : zoom doux de l'image + titre or au
   survol, cohérent avec les autres grilles (overflow:hidden déjà présent). */
.blog-image img { transition: transform .5s cubic-bezier(.2,0,.3,1); }
.grid-item:hover .blog-image img,
.grid-item:focus-within .blog-image img { transform: scale(1.04); }
.grid-item:hover .card-title a { color: var(--oxo-or-fonce); }

/* 26.7 Nav : état actif plus distinct du survol (filet 3px au lieu de 2px). */
.navbar-nav .nav-link.active { box-shadow: inset 0 -3px 0 0 var(--oxo-or); }

/* 26.8 Bouton d'envoi : état désactivé/chargement explicite (anti double-clic). */
.btn.btn-base-color:disabled,
.btn.btn-base-color[aria-disabled="true"] {
  opacity: .6; box-shadow: none; transform: none; cursor: not-allowed; pointer-events: none;
}

/* 26.9 Ombre « large » Crafto remappée en bleu nuit (carte plan/contact). */
.box-shadow-large { box-shadow: 0 15px 40px rgba(22,36,63,.12) !important; }

/* 26.10 Cible tactile des puces du swiper hero : zone activable ~24px (invisible),
   sans changer le rendu de la puce. */
.swiper-pagination-bullet { position: relative; }
.swiper-pagination-bullet::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 24px; height: 24px; transform: translate(-50%, -50%);
}

/* 26.11 Liens de la barre légale (footer) : espacement des cibles. */
.oxo-legal-links a { padding-left: 10px; padding-right: 10px; }

@media (prefers-reduced-motion: reduce) {
  .oxo-profile-card:hover .oxo-card-link i,
  .oxo-profile-card:focus-visible .oxo-card-link i { transform: none; }
  .grid-item:hover .blog-image img,
  .grid-item:focus-within .blog-image img { transform: none; }
}

/* ============================================================
   27. Cartes d'étapes « 6 temps » (notre-methode) : fond image FLOU + faible
   opacité, sous le contenu, pour densifier les cartes sans nuire à la lecture.
   L'image vient d'une variable --oxo-step-bg posée en inline par carte ; le
   ::before garde le rayon 8px (pas d'overflow:hidden pour ne pas couper le
   connecteur or qui déborde à droite). Texte au-dessus (z-index 1).
   ============================================================ */
.oxo-step.oxo-step-has-bg { position: relative; }
.oxo-step.oxo-step-has-bg::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 8px;
  background-image: var(--oxo-step-bg);
  background-size: cover;
  background-position: center;
  filter: blur(4px);
  opacity: .14;
  z-index: 0;
  pointer-events: none;
}
.oxo-step.oxo-step-has-bg > * { position: relative; z-index: 1; }
/* Au survol, l'image se révèle très légèrement (vie, sans gêner le texte). */
.oxo-step.oxo-step-has-bg:hover::before { opacity: .2; }

/* 27.2 Carte citation à vidéo plus VISIBLE (notre-methode) : la vidéo de nuages
   est sombre ; on allège le voile pour qu'on la voie clairement, et on protège
   le texte par une ombre portée (lisibilité maintenue). Ciblé sur cette carte
   seulement — la carte fondateur (qui-sommes-nous) garde son voile d'origine. */
.oxo-quote-has-video.oxo-quote-video-visible::after {
  background: linear-gradient(135deg, rgba(22,36,63,.58) 0%, rgba(22,36,63,.46) 100%);
}
.oxo-quote-video-visible .oxo-positioning-quote,
.oxo-quote-video-visible .oxo-quote-attr,
.oxo-quote-video-visible .oxo-quote-icon {
  text-shadow: 0 2px 16px rgba(7,12,24,.6);
}

/* ============================================================
   28. Hero accueil (swiper plein écran) : contenu AU-DESSUS du voile.
   Le voile bleu nuit de .oxo-hero-overlay::before est en z-index:1. Le conteneur
   de texte du swiper n'avait pas de z-index (≠ heros internes qui ont .z-index-1)
   → en mobile, le parallax crée un contexte d'empilement et le voile passait
   PAR-DESSUS le texte (« voile bleu » qui délavait le hero). On remonte le
   contenu au-dessus du voile sur toutes les tailles d'écran.
   ============================================================ */
.swiper.full-screen .swiper-slide > .container { position: relative; z-index: 2; }

/* ============================================================
   29. Hero accueil (swiper) : hauteur mobile ~plein écran mobile.
   Ne concerne QUE le hero swiper d'accueil (.oxo-hero-swiper) ; les héros
   internes non-swiper ne portent pas cette classe → non impactés.
   Surcharge la classe utilitaire Crafto .sm-h-500px (height:500px !important)
   en hauteur svh STABLE : svh = hauteur barre d'URL iOS déployée → aucun
   saut/reflow quand la barre se rétracte au scroll (contrairement à dvh).
   88svh (et non 100) laisse ~12svh de la section suivante visibles =
   affordance de scroll. Bornes : plancher 520px, plafond 760px. Double
   déclaration height = repli progressif (navigateurs sans svh gardent 500px).
   Aucun impact desktop (média <=767px). N'altère ni le voile §28 ni le repli
   reduced-motion + poster §16.
   ============================================================ */
@media (max-width: 767px) {
  .oxo-hero-swiper.swiper.full-screen.sm-h-500px {
    height: 500px !important;              /* repli si svh non supporté (vieux navigateurs) */
    height: min(88svh, 760px) !important;  /* navigateurs récents : stable, anti-saut barre URL iOS */
    min-height: 520px !important;          /* plancher : jamais plus court que l'actuel */
  }
}