/* OBC International — site vitrine. Reprend les tokens du design handoff. */

html, body { margin: 0; padding: 0; background: #FFFFFF; }
* { box-sizing: border-box; }
a { color: #C25A00; text-decoration: none; }
a:hover { color: #E06C00; }
::selection { background: #F47801; color: #FFFFFF; }
img { max-width: 100%; }

body {
  background: #FFFFFF;
  color: #0F2136;
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

/* ── Animations ─────────────────────────────────────────────── */
@keyframes obcDraw    { from { stroke-dashoffset: 1400 } to { stroke-dashoffset: 0 } }
@keyframes obcPulse   { 0%,100% { opacity:.25; transform:scale(1) } 50% { opacity:.9; transform:scale(1.6) } }
@keyframes obcScan    { 0% { transform:translateY(-100%) } 100% { transform:translateY(700%) } }
@keyframes obcMarquee { from { transform:translateX(0) } to { transform:translateX(-50%) } }
@keyframes obcFloat   { 0%,100% { translate:0 0 } 50% { translate:0 -10px } }
@keyframes obcBlink   { 0%,100% { opacity:1 } 50% { opacity:.15 } }
@keyframes obcKen     { from { transform:scale(1.08) } to { transform:scale(1) } }

/* ── Hero ───────────────────────────────────────────────────── */
.obc-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transform: scale(1.08);
  transition: opacity 1.6s ease;
}
.obc-hero-img.obc-hero-on { opacity: 1; animation: obcKen 9s linear forwards; }

.obc-stage { display: grid; align-items: start; margin-bottom: 36px; }
.obc-slide {
  grid-area: 1/1;
  transition: opacity .7s ease, transform .7s ease;
  opacity: 0; transform: translateY(18px); pointer-events: none;
}
.obc-slide.obc-on { opacity: 1; transform: none; pointer-events: auto; }
.obc-slide h1 { font-size: clamp(38px, 4.4vw, 70px) !important; }

.obc-shot { opacity: 0; transform: scale(1.06); transition: opacity 1.1s ease, transform 7s linear; }
.obc-shot.obc-shot-on { opacity: 1; transform: scale(1); }

.obc-laptop-scale { transform-origin: center center; transform: scale(var(--obc-lscale, 1)); }
.obc-wordmark, .obc-nav a { white-space: nowrap; }

/* ── Champs & boutons ───────────────────────────────────────── */
.obc-input {
  padding: 15px 16px; background: #FFFFFF; border: 1px solid rgba(0,51,91,.22);
  color: #0F2136; font-family: 'Manrope', sans-serif; font-size: 14px; outline: none;
  width: 100%; border-radius: 0;
}
.obc-input:focus { border-color: #F47801; }
.obc-input.obc-cyan:focus { border-color: #00335B; }
.obc-input::placeholder { color: #7A8798; }

/* Bouton principal en bleu marine : blanc sur orange ne dépasse pas 3,0:1,
   insuffisant pour un libellé de 12 px. Sur fond sombre — héros, en-tête —
   il s'inverse en blanc sur marine via `obc-on-dark`. */
.obc-btn-gold {
  background: #00335B; color: #FFFFFF; border: 0; cursor: pointer;
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  font-family: 'Manrope', sans-serif; transition: background .2s ease;
}
.obc-btn-gold:hover { background: #004B85; }
.obc-btn-gold.obc-on-dark { background: #FFFFFF; color: #00335B; }
.obc-btn-gold.obc-on-dark:hover { background: #DCE6F0; }
.obc-btn-cyan {
  background: #C25A00; color: #FFFFFF; border: 0; cursor: pointer;
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  font-family: 'Manrope', sans-serif; transition: background .2s ease;
}
.obc-btn-cyan:hover { background: #E06C00; }

/* Bouton secondaire : contour bleu marine sur fond clair. Le même bouton posé
   sur le héros — photo sombre — reçoit `obc-on-dark`, sans quoi son contour
   disparaîtrait dans l'image. */
.obc-btn-ghost {
  border: 1px solid rgba(0,51,91,.35); color: #00335B; background: none;
  cursor: pointer; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  font-family: 'Manrope', sans-serif; transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.obc-btn-ghost:hover { border-color: #00335B; color: #FFFFFF; background: #00335B; }
.obc-btn-ghost.obc-on-dark { border-color: rgba(255,255,255,.55); color: #FFFFFF; }
.obc-btn-ghost.obc-on-dark:hover { border-color: #FFFFFF; background: #FFFFFF; color: #00335B; }

.obc-industry { transition: border-color .2s ease; }
.obc-industry:hover { border-color: rgba(244,120,1,.55); }
.obc-sector { transition: background .2s ease; }
.obc-sector:hover { background: #E9EFF6; }

/* ── Points de rupture : 1439 / 1279 / 1099 / 1023 / 900 / 620 / 430 ──
   Les maquettes (portable, téléphones) sont construites en pixels fixes et
   réduites par `transform: scale`. Or une transformation ne change pas la
   boîte de mise en page : sans conteneur qui rogne, la maquette élargit la
   piste de grille et fait déborder toute la page sur téléphone.
   D'où, sous 900px : conteneur `overflow:hidden` + hauteur fixée. */

.obc-hero > div { min-width: 0; }
.obc-laptop-wrap { min-width: 0; max-width: 100%; }

@media (max-width: 1439px) {
  .obc-laptop-scale { --obc-lscale: .86 }
  .obc-nav { gap: 20px !important }
  .obc-nav a { font-size: 11px !important }
}
@media (max-width: 1279px) {
  .obc-laptop-scale { --obc-lscale: .72 }
  .obc-powered { display: none !important }
}
@media (max-width: 1099px) {
  .obc-laptop-scale { --obc-lscale: .58 }
  .obc-hero { grid-template-columns: 1fr !important }
  .obc-2col { grid-template-columns: 1fr !important; gap: 40px !important }

  /* Éventail de téléphones : on ne garde que l'appareil de premier plan,
     seul lisible sur un écran étroit. */
  /* Le halo décoratif (520px) déborde de la section : on le rogne ici, sinon
     il élargit la zone défilable du document sur téléphone. */
  .obc-mobile-mock { height: auto !important; padding: 10px 0; overflow: hidden }
  .obc-phone-back { display: none !important }
  .obc-phone-front { left: 0 !important; margin: 0 auto }
}
@media (max-width: 1023px) {
  .obc-header { padding-left: 22px !important; padding-right: 22px !important }
  .obc-nav { gap: 14px !important }
  .obc-nav a { letter-spacing: .08em !important }
  .obc-3col { grid-template-columns: 1fr 1fr !important }
  .obc-platform-body { grid-template-columns: 1fr !important }
}
@media (max-width: 900px) {
  .obc-nav a.obc-navlink { display: none !important }
  section { padding-left: 22px !important; padding-right: 22px !important }
  .obc-3col, .obc-4col { grid-template-columns: 1fr !important }
  .obc-contact-grid { grid-template-columns: 1fr !important }

  .obc-laptop-wrap { height: 268px; overflow: hidden; }
  .obc-laptop-scale { --obc-lscale: .44 }

  h1, .obc-slide h1 { font-size: clamp(30px, 8.4vw, 44px) !important }
  h2 { font-size: clamp(26px, 7.2vw, 38px) !important }
}
@media (max-width: 620px) {
  .obc-2col-stats { grid-template-columns: 1fr !important }
  footer { padding-left: 22px !important; padding-right: 22px !important }

  /* En-tête : plutôt que de retirer un accès, on rétrécit le lockup pour que
     « Espace client » et « Devis 24/7 » restent tous deux à portée de pouce. */
  .obc-header { gap: 10px !important; padding-top: 11px !important; padding-bottom: 11px !important }
  .obc-mark { width: 34px !important; height: 34px !important }
  .obc-mark > div:first-child { width: 20px !important }
  .obc-wordmark { font-size: 18px !important }
  .obc-header .obc-btn-gold { padding: 9px 12px !important; font-size: 10px !important; letter-spacing: .08em !important }
  .obc-nav { gap: 11px !important }
  .obc-nav a { font-size: 10px !important; letter-spacing: .06em !important }

  section { padding-top: 62px !important; padding-bottom: 62px !important }
}
@media (max-width: 430px) {
  .obc-laptop-wrap { height: 222px }
  .obc-laptop-scale { --obc-lscale: .36 }
  section { padding-left: 16px !important; padding-right: 16px !important }
  footer { padding-left: 16px !important; padding-right: 16px !important }
  .obc-header { padding-left: 16px !important; padding-right: 16px !important; gap: 8px !important }

  /* Le lockup se réduit à « OBC » et le lien à « Espace » : la marque et les
     deux actions tiennent alors sur une seule ligne, sans débordement. */
  .obc-wm-rest, .obc-space-rest { display: none }
  .obc-wordmark { font-size: 20px !important }
  .obc-header .obc-btn-gold { padding: 9px 11px !important }
}

/* Respect du réglage système : on coupe tout mouvement non essentiel. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ── Sélecteur de langue ────────────────────────────────────── */
.obc-lang { display: flex; align-items: center; gap: 2px; margin-right: 6px; }
.obc-lang button {
  background: none; border: 0; cursor: pointer; padding: 5px 7px;
  font-family: 'Manrope', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; color: rgba(255,255,255,.62); transition: color .15s ease;
}
.obc-lang button:hover { color: #FFFFFF; }
.obc-lang button[aria-current="true"] { color: #FFFFFF; }
.obc-lang button + button { border-left: 1px solid rgba(255,255,255,.22); }

/* ── Arabe : droite-à-gauche ──────────────────────────────────
   Le sens est porté par `dir` sur <html>, que le navigateur applique seul
   au texte. Ne restent ici que les cas qu'il ne peut pas deviner : les
   rangées en flex, qu'il faut inverser, et les maquettes d'écran, qui
   représentent une interface en caractères latins et doivent rester
   lues de gauche à droite. */
body.obc-rtl { text-align: right; }
body.obc-rtl .obc-header,
body.obc-rtl .obc-nav,
body.obc-rtl footer > div { flex-direction: row-reverse; }
body.obc-rtl .obc-lang { margin-right: 0; margin-left: 6px; }
body.obc-rtl .obc-slide h1,
body.obc-rtl .obc-slide p { text-align: right; }

/* Les maquettes du produit restent en lecture latine. */
body.obc-rtl .obc-laptop-wrap,
body.obc-rtl .obc-mobile-mock,
body.obc-rtl .obc-platform-body,
body.obc-rtl .obc-laptop-wrap *,
body.obc-rtl .obc-mobile-mock *,
body.obc-rtl .obc-platform-body * { direction: ltr; text-align: initial; }

/* L'arabe se lit mieux un peu plus grand et plus aéré. */
body.obc-rtl { font-size: 1.04em; line-height: 1.75; }
body.obc-rtl h1, body.obc-rtl h2, body.obc-rtl h3 { letter-spacing: 0; }