/* ============================================================
   OTI — Integrated logistics provider
   Base visuelle du template réutilisable, adaptée aux couleurs OTI.
   ============================================================ */
:root {
  --ink-navy:    #1A2744;
  --ink-navy-2:  #1E2D55;
  --ink-navy-3:  #263567;
  --paper:       #F5F7FA;
  --paper-dim:   #EDF0F5;
  --ink:         #1E2535;
  --muted:       #5E6880;
  --white:       #ffffff;
  --line:        rgba(30,37,53,0.11);

  --primary:       #123F73;
  --primary-light: #2D6DA3;
  --primary-dark:  #0B2F5B;
  --primary-glow:  rgba(18,63,115,0.18);

  --accent-magenta: #D52B35;
  --accent-orange:  #C75A0A;
  --accent-red:     #D52B35;
  --accent-green:   #2C8A78;
  --accent-blue:    #123F73;

  /* Fond du hero : blanc épuré + touches dégradées des couleurs ICOM
     (orange/rouge dominants, bleu/vert/rose en accent discret).
     Remplacé plus tard par un carrousel vidéo — la logique d'alternance
     entre 3 ambiances est conservée pour brancher les vidéos facilement. */
  --hero-bg: #FFFFFF;

  --font-display: 'Manrope', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;

  --container: 1180px;
  --radius:    14px;
  --ease:      cubic-bezier(.22,.61,.36,1);
}

/* ── Dark mode ── */
[data-theme="dark"] {
  --paper:      #0D1626;
  --paper-dim:  #111E32;
  --ink:        #D8E2F0;
  --ink-navy:   #C4D3E8;
  --ink-navy-2: #14203A;
  --ink-navy-3: #192B4A;
  --muted:      #8099BB;
  --white:      #162035;
  --line:       rgba(196,211,232,0.10);
  --primary-glow: rgba(74,159,212,0.22);
  --hero-bg:    #0B1220;
}
[data-theme="dark"] body { background: var(--paper); color: var(--ink); }
[data-theme="dark"] .site-header { background: rgba(13,22,38,.92); border-color: rgba(196,211,232,0.1); }
[data-theme="dark"] .main-nav a { color: var(--ink-navy); }
[data-theme="dark"] .main-nav a:hover { color: var(--primary-light); }
[data-theme="dark"] .btn-ghost { color: var(--ink-navy); border-color: rgba(196,211,232,0.2); }
[data-theme="dark"] .btn-ghost:hover { border-color: var(--primary-light); color: var(--primary-light); background: rgba(74,159,212,0.1); }
[data-theme="dark"] .btn-icon { background: rgba(196,211,232,0.08); color: var(--ink-navy); border-color: rgba(196,211,232,0.15); }
[data-theme="dark"] .btn-icon:hover { background: rgba(27,117,188,0.2); color: var(--primary-light); border-color: var(--primary-light); }
[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .catalogue-strip { background: rgba(27,117,188,.09); border-color: rgba(74,159,212,.22); }
[data-theme="dark"] .pourquoi  { background: var(--paper); }
[data-theme="dark"] .services  { background: var(--paper-dim); }
[data-theme="dark"] .contact   { background: var(--paper); }
[data-theme="dark"] .realisations { background: var(--paper); }
[data-theme="dark"] .service-card { background: var(--white); border-color: var(--line); }
[data-theme="dark"] .service-card:hover { box-shadow: 0 24px 50px -20px rgba(0,0,0,.5); }
[data-theme="dark"] .contact-form { background: var(--white); border-color: var(--line); }
[data-theme="dark"] .contact-panel { background: var(--white); border-color: var(--line); }
[data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background: var(--paper-dim); color: var(--ink); border-color: rgba(196,211,232,0.18); }
[data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
[data-theme="dark"] .temoignages-block { background: var(--paper-dim); }
[data-theme="dark"] .testimonial-slide p { color: var(--ink-navy); }
[data-theme="dark"] .testimonial-slide footer strong { color: var(--ink-navy); }
[data-theme="dark"] .back-to-top { background: var(--ink-navy-2); color: var(--primary-light); }
[data-theme="dark"] .nav-toggle span { background: var(--ink-navy); }
[data-theme="dark"] .floating-chip { background: var(--white); color: var(--ink-navy); }
[data-theme="dark"] .floating-chip strong { color: var(--primary-light); }
[data-theme="dark"] .site-footer { background: #080F1C; }
[data-theme="dark"] .real-viewport { background: var(--white); border-color: var(--line); }
[data-theme="dark"] .real-card h4 { color: var(--ink-navy); }
[data-theme="dark"] .real-space { background: var(--paper-dim); border-color: var(--line); }
[data-theme="dark"] .video-placeholder { background: linear-gradient(135deg, var(--ink-navy-3), #060E1E); }
[data-theme="dark"] .hero-apa-inner { background: rgba(22,30,62,.95); }
[data-theme="dark"] .methode-subblock { border-color: rgba(196,211,232,0.1); }
[data-theme="dark"] .method-body { background: var(--white); border-color: var(--line); }
[data-theme="dark"] .method-arrow { color: rgba(196,211,232,0.3); }
[data-theme="dark"] .method-arrow--magenta { color: var(--accent-magenta); }
[data-theme="dark"] .method-arrow--orange  { color: var(--accent-orange); }
[data-theme="dark"] .stats-strip { background: var(--paper-dim); border-color: var(--line); }
[data-theme="dark"] .stats-strip .stat-number,
[data-theme="dark"] .stats-strip .stat-suffix { color: var(--primary-light); }
[data-theme="dark"] .stats-strip .stat p { color: var(--muted); }
[data-theme="dark"] .select-wrap select { background: var(--paper-dim); }
[data-theme="dark"] .pourquoi-img-wrap { border-color: rgba(196,211,232,0.1); }
[data-theme="dark"] .histoire { background: var(--paper); }
[data-theme="dark"] .parcours { background: var(--paper-dim); }
[data-theme="dark"] .illustration-frame { background: var(--white); border-color: var(--line); }
[data-theme="dark"] .team-card { background: var(--white); border-color: var(--line); }
[data-theme="dark"] .team-nav button { background: var(--paper-dim); border-color: var(--line); color: var(--ink-navy); }
[data-theme="dark"] .real-space { background: var(--paper-dim); }

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, [role="button"] { -webkit-tap-highlight-color: transparent; }
html.nav-open, html.nav-open body { overflow: hidden; height: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
body {
  margin: 0; font-family: var(--font-body); color: var(--ink);
  background: var(--paper); -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  transition: background .35s var(--ease), color .35s var(--ease);
}
html, body { max-width: 100%; overflow-x: hidden; }
h1,h2,h3,h4 { font-family: var(--font-display); color: var(--ink-navy); line-height: 1.12; margin: 0 0 .5em; letter-spacing:-.01em; }
p  { margin: 0 0 1em; color: var(--muted); }
a  { color: inherit; text-decoration: none; }
ul { margin:0; padding:0; list-style:none; }
img { max-width:100%; display:block; }
.container { width:100%; max-width:var(--container); margin:0 auto; padding:0 28px; }
.text-brass  { color: var(--primary-dark); }
.text-accent { color: var(--primary-light); }

/* ── Progress bar ── */
.progress-bar {
  position:fixed; top:0; left:0; height:3px; width:0%;
  background: linear-gradient(90deg, var(--primary-dark), var(--primary-light));
  z-index:1000; transition: width .1s linear;
}

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border-radius:999px;
  font-family:var(--font-display); font-weight:700; font-size:.95rem;
  border:1px solid transparent; cursor:pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  white-space:nowrap; text-decoration:none;
}
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; box-shadow: 0 10px 28px -8px rgba(27,117,188,.45);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 16px 36px -6px rgba(27,117,188,.6); background:linear-gradient(135deg, var(--primary-light), var(--primary)); }
.btn-ghost { background:transparent; color:var(--ink-navy); border-color:rgba(26,39,68,.22); padding:10px 20px; font-size:.88rem; }
.btn-ghost:hover { border-color:var(--primary); color:var(--primary-dark); background:var(--primary-glow); }
.btn-catalogue-dl {
  display:inline-flex; align-items:center; gap:9px; padding:13px 26px;
  border-radius:999px; border:none;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:#fff; font-family:var(--font-display); font-weight:700; font-size:.93rem;
  cursor:pointer; white-space:nowrap; flex-shrink:0; text-decoration:none;
  box-shadow:0 10px 28px -8px rgba(27,117,188,.45);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.btn-catalogue-dl:hover { transform:translateY(-2px); box-shadow:0 16px 36px -6px rgba(27,117,188,.6); background:linear-gradient(135deg, var(--primary-light), var(--primary)); }
.btn-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(26,39,68,.18); background:rgba(26,39,68,.05);
  color:var(--ink-navy); cursor:pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .25s var(--ease);
  flex-shrink:0;
  position:relative;
}
.btn-icon::before { content:''; position:absolute; inset:-3px; }
.btn-icon:hover { background:var(--primary-glow); color:var(--primary-dark); border-color:var(--primary); transform:scale(1.08); }
.theme-toggle .icon-sun  { display:none; }
.theme-toggle .icon-moon { display:block; }
.lang-text { font-family:var(--font-display); font-size:.75rem; font-weight:800; letter-spacing:.05em; }

/* ── Header ── */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:12px 0;
  background:rgba(245,247,250,.93); backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition: padding .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease), background .35s var(--ease);
}
.site-header.is-scrolled { padding:8px 0; border-color:var(--line); box-shadow:0 8px 30px -16px rgba(26,39,68,.2); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; }
.brand-logo { height:44px; width:auto; display:block; }
.main-nav { display:flex; gap:28px; }
.main-nav a { color:var(--ink-navy); font-size:.91rem; font-weight:600; position:relative; padding:4px 0; transition:color .3s; }
.main-nav a::after { content:''; position:absolute; left:0; bottom:-2px; height:1.5px; width:0; background:var(--primary); transition:width .3s var(--ease); }
.main-nav a:hover { color:var(--primary-dark); }
.main-nav a:hover::after { width:100%; }
.header-actions { display:flex; align-items:center; gap:10px; }
.nav-toggle {
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  background:none; border:none; cursor:pointer;
  width:44px; height:44px; padding:0; margin:-3px; flex-shrink:0;
}
.nav-toggle span { width:22px; height:2px; background:var(--ink-navy); border-radius:2px; transition:transform .3s var(--ease), opacity .3s var(--ease); }
[data-theme="dark"] .nav-toggle span { background:var(--ink-navy); }
/* Hamburger → croix, piloté par l'état aria-expanded déjà géré en JS */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* CTA dupliqué dans le tiroir mobile : sur desktop le bouton d'origine
   (.header-actions .btn-ghost) reste visible jusqu'à 1080px, puis le
   tiroir prend le relais pour ne jamais perdre l'appel à l'action. */
.main-nav-cta { display:none; }

/* Voile derrière le tiroir de navigation mobile */
.nav-backdrop {
  display:none;
  position:fixed; inset:0; z-index:590;
  background:rgba(10,16,32,.45);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  opacity:0; transition:opacity .35s var(--ease);
}
.nav-backdrop.is-visible { display:block; opacity:1; }

/* ── Eyebrow ── */
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--primary-light); margin-bottom:18px; }
.eyebrow-dot { width:6px; height:6px; border-radius:50%; background:var(--primary-light); box-shadow:0 0 0 4px rgba(74,159,212,.22); }
.eyebrow--magenta { color:var(--accent-magenta); }
.eyebrow-dot--magenta { background:var(--accent-magenta); box-shadow:0 0 0 4px rgba(214,19,108,.18); }
.eyebrow--orange { color:var(--accent-orange); }
.eyebrow-dot--orange { background:var(--accent-orange); box-shadow:0 0 0 4px rgba(240,128,30,.18); }
.section-head .eyebrow { justify-content:center; color:var(--primary-dark); }
.section-head .eyebrow-dot { background:var(--primary-dark); box-shadow:0 0 0 4px rgba(20,93,150,.14); }
.section-head-left .eyebrow { justify-content:flex-start; }

/* ================================================================
   HERO — DIAPORAMA VIDÉO
   ================================================================ */
.hero {
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  color:var(--ink-navy); padding:120px 0 90px; overflow:hidden;
  background:var(--hero-bg);
}

/* Slides en fond */
.hero-slides {
  position:absolute; inset:0; z-index:0;
}
.hero-slide {
  position:absolute; inset:0;
  opacity:0; transition:opacity 1.2s var(--ease);
  display:flex; align-items:flex-end; justify-content:flex-end;
  padding:40px 60px;
  background:var(--hero-bg); /* couleur de secours tant que la vidéo charge */
  overflow:hidden;
}
.hero-slide.is-active { opacity:1; }

/* Vidéo de fond — remplit toute la slide, cadrée en cover */
.hero-slide-video {
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  pointer-events:none;
}

/* Voile de lecture : assombrit/éclaircit la vidéo pour garder le texte
   du hero lisible quel que soit le contenu filmé, tout en laissant
   deviner les couleurs de la marque ICOM. */
.hero-slide-overlay {
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(100deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.82) 22%, rgba(255,255,255,.42) 46%, rgba(255,255,255,.16) 62%, rgba(255,255,255,.30) 100%),
    linear-gradient(0deg, rgba(15,20,38,.30) 0%, rgba(15,20,38,0) 30%);
}
[data-theme="dark"] .hero-slide-overlay {
  background:
    linear-gradient(100deg, rgba(12,16,32,.90) 0%, rgba(12,16,32,.74) 22%, rgba(12,16,32,.36) 46%, rgba(12,16,32,.14) 62%, rgba(12,16,32,.34) 100%),
    linear-gradient(0deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,0) 30%);
}
/* Grille de fond subtile, par-dessus le voile pour garder la texture de marque */
.hero-slide::before {
  content:'';
  position:absolute; inset:0; z-index:2;
  background-image: linear-gradient(rgba(27,117,188,.07) 1px,transparent 1px),
                    linear-gradient(90deg, rgba(27,117,188,.07) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 100% at 30% 20%, black 20%, transparent 75%);
  pointer-events:none;
}
/* Légende discrète en bas à droite de chaque vidéo */
.hero-slide-scene {
  position:relative; z-index:3;
  display:flex; flex-direction:column; align-items:flex-end; gap:4px;
  padding:10px 16px;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-radius:12px;
  border:1px solid rgba(255,255,255,.5);
}
[data-theme="dark"] .hero-slide-scene { background:rgba(12,16,32,.55); border-color:rgba(255,255,255,.08); }
.scene-label { font-family:var(--font-display); font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-navy); }
.scene-sub   { font-size:.72rem; color:var(--muted); max-width:220px; text-align:right; }

/* Indicateurs (dots) du diaporama hero */
.hero-slide-dots {
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  z-index:2; display:flex; gap:10px;
}
.hero-dot {
  width:8px; height:8px; border-radius:50%; border:none;
  background:rgba(30,39,68,.2); cursor:pointer; padding:0;
  transition:background .3s, width .3s, border-radius .3s;
  position:relative;
}
.hero-dot::before {
  content:''; position:absolute; inset:-10px;
}
.hero-dot.is-active { background:var(--accent-orange); width:26px; border-radius:4px; }

/* Contenu hero */
.hero-inner {
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center;
}

.hero h1 { font-size:clamp(2rem,4vw,3.3rem); color:var(--ink-navy); font-weight:800; }
.hero-lede { font-size:1.05rem; color:var(--muted); max-width:480px; }

/* Avant/Pendant/Après banner — image mise en avant + contenu texte, côte à côte */
.hero-apa { margin-top:28px; max-width:540px; }
.hero-apa-inner {
  display:flex; align-items:stretch; gap:0;
  padding:1px;
  background: linear-gradient(90deg, var(--primary), var(--accent-magenta), var(--accent-orange));
  border-radius:14px;
  overflow:hidden;
}
.hero-apa-content { background: rgba(26,39,68,.96); border-radius:13px 0 0 13px; padding:16px 20px; flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.hero-apa-icon {
  flex-shrink:0; width:118px; height:auto; aspect-ratio:800/674;
  align-self:stretch;
  border-radius:0 13px 13px 0; object-fit:cover;
  border-left:1px solid rgba(255,255,255,.18);
  box-shadow:-6px 0 16px -8px rgba(10,16,32,.4);
}
.hero-apa-labels {
  display:flex; align-items:center; gap:14px;
  font-family:var(--font-display); font-weight:800; font-size:1rem; letter-spacing:.14em;
  color:#fff; text-transform:uppercase;
}
.apa-dot { width:7px; height:7px; border-radius:50%; background:var(--accent-magenta); flex-shrink:0; }
.apa-dot--orange { background:var(--accent-orange); }
.hero-apa-placeholder { margin:8px 0 0; font-size:.8rem; color:rgba(245,247,250,.5); font-weight:500; }

/* Hero visual card */
.hero-visual { position:relative; }
.hero-pres-card {
  position:relative;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:24px; padding:40px 32px; text-align:center;
  box-shadow:0 30px 70px -24px rgba(226,59,46,.22), 0 10px 30px -14px rgba(20,93,150,.12);
  overflow:hidden;
}
.hero-pres-card::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background: radial-gradient(ellipse at 70% 15%, rgba(240,128,30,.10), transparent 60%),
              radial-gradient(ellipse at 15% 90%, rgba(27,117,188,.08), transparent 55%);
  pointer-events:none;
}

/* Variante hébergeant l'objet animé "Pourquoi ICOM" (voir plus bas dans ce
   fichier pour .icom-anim-wrap et consorts). Remplace l'ancien carrousel
   d'images de présentation. Carte réduite et habillée en verre translucide
   (fond semi-transparent + flou) : l'objet garde toute sa lisibilité et son
   utilité pédagogique, tout en laissant deviner le carrousel vidéo du hero
   derrière lui — cohérent avec l'esprit "diaporama vidéo" de la section. */
.hero-pres-card--anim {
  padding:30px 20px 24px;
  overflow:visible;
  max-width:400px;
  margin:0 auto;
  background: color-mix(in srgb, var(--white) 58%, transparent);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow:0 22px 54px -22px rgba(226,59,46,.20), 0 8px 22px -12px rgba(20,93,150,.10);
}
.hero-pres-card--anim::before { opacity:.6; }
.hero-anim-slot { position:relative; z-index:1; display:flex; justify-content:center; }
.hero-anim-slot .icom-anim-wrap { margin:0 auto; }

.floating-chip {
  position:absolute; background:var(--white); color:var(--ink-navy);
  border-radius:12px; padding:10px 16px; font-size:.72rem;
  box-shadow:0 16px 36px -10px rgba(0,0,0,.35);
  display:flex; flex-direction:column; gap:2px;
  animation:floatChip 5s ease-in-out infinite;
  z-index:6;
}
.floating-chip strong { font-family:var(--font-display); font-size:.82rem; color:var(--primary-dark); }
.chip-1 { top:-16px; right:-20px; }
@keyframes floatChip { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

.scroll-cue { position:relative; z-index:1; display:flex; align-items:center; gap:10px; margin:50px auto 0; width:fit-content; }
.scroll-cue span { width:1px; height:34px; background:rgba(30,39,68,.18); position:relative; overflow:hidden; }
.scroll-cue span::after { content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--primary-light); animation:scrollLine 2s ease-in-out infinite; }
@keyframes scrollLine { to { top:100%; } }

/* ── Generic sections ── */
.section { padding:110px 0; }
.section-head { max-width:680px; margin:0 auto 64px; text-align:center; }
.section-head h2 { font-size:clamp(1.7rem,3vw,2.4rem); }
/* Variante alignée à gauche — utilisée pour Notre Méthode et Nos Services */
.section-head--left { margin:0 0 64px; text-align:left; }
.section-head--left .section-lede { margin-left:0; }
.section-head-left { max-width:700px; margin:0 0 48px; }
.section-lede { font-size:1.03rem; }

/* ================================================================
   NOTRE HISTOIRE / NOTRE PARCOURS
   Contenu à gauche, CARROUSEL d'images à droite (même schéma pour
   les deux blocs, comme demandé). Chaque carrousel affiche plusieurs
   images en boucle, une à la fois (fondu + léger zoom). Les visuels
   viennent de HISTOIRE_IMAGES / PARCOURS_IMAGES (voir script.js) —
   remplacez chaque entrée par une vraie image, sans toucher au HTML.
   ================================================================ */
.histoire { background:var(--paper); }
.parcours { background:var(--paper-dim); }

.histoire-grid, .parcours-grid {
  display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center;
}
.histoire-copy .section-lede, .parcours-copy .section-lede { margin-bottom:0; }

.illustration-frame {
  position:relative; border-radius:22px; overflow:hidden;
  aspect-ratio:4/3; background:var(--white);
  border:1px solid var(--line);
  box-shadow:0 26px 60px -24px rgba(226,59,46,.18), 0 10px 26px -14px rgba(20,93,150,.12);
}
.illustration-frame::before {
  content:''; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(60% 60% at 15% 20%, rgba(226,59,46,.14), transparent 70%),
    radial-gradient(55% 55% at 85% 15%, rgba(240,128,30,.16), transparent 70%),
    radial-gradient(45% 45% at 80% 85%, rgba(27,117,188,.10), transparent 70%),
    radial-gradient(40% 40% at 15% 85%, rgba(124,182,61,.10), transparent 70%);
}

/* Diapositives du carrousel — une seule visible à la fois */
.img-slide {
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(1.03);
  transition:opacity .9s var(--ease), transform 1.1s var(--ease);
  pointer-events:none;
}
.img-slide.is-active { opacity:1; transform:scale(1); pointer-events:auto; }
.img-slide img { width:100%; height:100%; object-fit:cover; display:block; }
.img-slide span {
  position:relative; font-size:.82rem; font-weight:600;
  color:var(--muted); text-align:center; padding:0 24px;
}

/* Légende optionnelle (titre + texte) superposée en bas d'une slide —
   utilisée quand une entrée du tableau d'images fournit `title`/`text`
   (voir buildImageCarousel() dans script.js). Sans impact sur les
   carrousels qui n'utilisent que des images simples. */
.img-slide-caption {
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:26px 26px 20px;
  background:linear-gradient(0deg, rgba(10,16,32,.85) 0%, rgba(10,16,32,.5) 60%, transparent 100%);
  color:#fff; text-align:left;
}
.img-slide-caption strong {
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:1.05rem; margin-bottom:5px;
}
.img-slide-caption p { margin:0; font-size:.85rem; line-height:1.45; color:rgba(255,255,255,.85); }

/* Dots de navigation, superposés en bas du cadre */
.img-dots {
  position:absolute; z-index:2; bottom:16px; left:50%; transform:translateX(-50%);
  display:flex; gap:7px;
}
.img-dots button {
  width:7px; height:7px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:rgba(255,255,255,.55); box-shadow:0 0 0 1px rgba(30,39,68,.12);
  transition:background .3s, width .3s, border-radius .3s;
  position:relative;
}
.img-dots button::before { content:''; position:absolute; inset:-10px; }
.img-dots button.is-active { background:var(--accent-orange); width:20px; border-radius:4px; }

/* ================================================================
   NOTRE ÉQUIPE
   Présentation + carrousel de cartes membres (photo/avatar + fonction).
   Données injectées depuis un tableau JS (voir script.js).
   ================================================================ */
.equipe { background:var(--paper); }
.team-intro { max-width:720px; margin:0 0 48px; }

.team-carousel { position:relative; }
.team-track {
  display:grid; grid-auto-flow:column; grid-auto-columns:29%;
  gap:24px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:8px; scrollbar-width:none;
}
.team-track::-webkit-scrollbar { display:none; }

.team-card {
  scroll-snap-align:start;
  background:var(--white); border:1px solid var(--line); border-radius:18px;
  padding:26px 22px; text-align:center;
  box-shadow:0 18px 40px -22px rgba(20,93,150,.16);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.team-card:hover { transform:translateY(-6px); box-shadow:0 24px 50px -20px rgba(226,59,46,.2); }

.team-avatar {
  width:96px; height:96px; margin:0 auto 18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:1.4rem; color:#fff;
  background:linear-gradient(135deg, var(--accent-red), var(--accent-orange));
  overflow:hidden;
}
.team-avatar--photo {
  background:var(--paper-dim);
  box-shadow:0 0 0 3px var(--white), 0 0 0 4px var(--line), 0 12px 24px -12px rgba(7,15,36,.3);
}
.team-avatar img { width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block; }
.team-card:nth-child(4n+2) .team-avatar { background:linear-gradient(135deg, var(--primary-dark), var(--primary)); }
.team-card:nth-child(4n+3) .team-avatar { background:linear-gradient(135deg, var(--accent-magenta), var(--accent-red)); }
.team-card:nth-child(4n+4) .team-avatar { background:linear-gradient(135deg, #5C9A2A, var(--accent-green)); }

.team-card h4 { font-size:1rem; margin:0 0 4px; }
.team-card p  { font-size:.83rem; color:var(--muted); margin:0; }

.team-nav { display:flex; justify-content:center; gap:12px; margin-top:26px; }
.team-nav button {
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  background:var(--paper-dim); color:var(--ink-navy); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s, color .25s, border-color .25s;
}
.team-nav button:hover { background:var(--primary); border-color:var(--primary); color:#fff; }

/* ================================================================
   POURQUOI ICOM
   ================================================================ */
.pourquoi { background:var(--paper); }
.pourquoi-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; margin-bottom:90px; }
.feature-list { display:flex; flex-direction:column; gap:28px; margin-top:34px; }
.feature-item { display:flex; gap:18px; align-items:flex-start; }
.feature-num { font-family:var(--font-display); font-weight:800; color:var(--primary-dark); font-size:1.1rem; padding-top:2px; flex-shrink:0; }
.feature-item h4 { font-family:var(--font-display); font-size:1rem; color:var(--ink-navy); margin:0 0 .3em; }
.feature-item p { margin:0; font-size:.91rem; }

/* Image Pourquoi ICOM */
.pourquoi-visual { display:flex; justify-content:center; align-items:center; width:100%; }
.pourquoi-img-wrap {
  width:100%; max-width:420px;
  border-radius:24px; overflow:hidden;
  box-shadow:0 30px 70px -20px rgba(7,15,36,.22);
  border:1px solid var(--line);
  background:var(--white);
}
.pourquoi-img { width:100%; height:auto; display:block; }

/* Grand carrousel "Pourquoi ICOM" — remplace l'ancienne animation (cercle +
   4 blocs), déplacée vers la section Contact. Réutilise le composant
   .illustration-frame / .img-carousel (voir plus bas + script.js), avec un
   gabarit plus grand et plus haut pour occuper pleinement l'espace libéré. */
.pourquoi-carousel {
  width:100%;
  max-width:560px;
  aspect-ratio:4/4.4;
  border-radius:24px;
}
@media (max-width:1180px) {
  .pourquoi-carousel { aspect-ratio:4/3.6; }
}
/* Les slides du carrousel Pourquoi ICOM portent une légende en bas :
   les dots de navigation remontent donc en haut pour ne pas se superposer. */
.pourquoi-carousel .img-dots { bottom:auto; top:18px; }

/* ================================================================
   ANIMATION "POURQUOI ICOM" — cercle central + 4 blocs
   Remplace l'ancienne image statique assets/pourquoi-icom.png.
   Toutes les couleurs/rayons/easings réutilisent les tokens déjà
   définis en haut de ce fichier (--accent-*, --primary, --radius,
   --line, --white, --ease, --font-display).
   ================================================================ */

/* Grille principale (desktop / tablette) : 4 blocs en 2x2,
   cercle central superposé au milieu */
.icom-anim-wrap {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 22px 24px;
  min-height: 310px;
  max-width: 340px;
  margin: 0 auto;
  width: 100%;
}

.icom-block-1 { grid-column: 1; grid-row: 1; }
.icom-block-2 { grid-column: 2; grid-row: 1; }
.icom-block-3 { grid-column: 1; grid-row: 2; }
.icom-block-4 { grid-column: 2; grid-row: 2; }

/* Lignes de connexion — tracé recalculé dynamiquement en JS (script.js) */
.icom-anim-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.icom-line {
  fill: none;
  stroke-width: 2.5px;
  stroke-linecap: round;
  transition: stroke-dashoffset .75s var(--ease);
}
.icom-line[data-block="1"] { stroke: var(--accent-red); }
.icom-line[data-block="2"] { stroke: var(--accent-green); }
.icom-line[data-block="3"] { stroke: var(--accent-orange); }
.icom-line[data-block="4"] { stroke: var(--accent-blue); }

.icom-dot { opacity: 0; transition: opacity .35s ease; }
.icom-dot[data-block="1"] { fill: var(--accent-red); }
.icom-dot[data-block="2"] { fill: var(--accent-green); }
.icom-dot[data-block="3"] { fill: var(--accent-orange); }
.icom-dot[data-block="4"] { fill: var(--accent-blue); }
.icom-dot.is-visible { opacity: 1; }

/* Cercle central + logo */
.icom-center {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  width: min(24%, 112px);
  aspect-ratio: 1 / 1;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.7);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}
.icom-center.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.icom-center-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 24px 60px -18px rgba(7,15,36,.28), 0 0 0 1px var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14%;
}
.icom-logo { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Blocs */
.icom-block {
  position: relative;
  z-index: 2;
  --tx: 0px; --ty: 0px;
  opacity: 0;
  transform: translate(var(--tx), var(--ty)) scale(.86);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
  display: flex;
}
.icom-block.is-visible { opacity: 1; transform: translate(0, 0) scale(1); }

.icom-block-1 { --tx: 18px;  --ty: 16px; justify-content: flex-start; }
.icom-block-2 { --tx: -18px; --ty: 16px; justify-content: flex-end; }
.icom-block-3 { --tx: 18px;  --ty: -16px; justify-content: flex-start; }
.icom-block-4 { --tx: -18px; --ty: -16px; justify-content: flex-end; }

.icom-block-card {
  position: relative;
  width: 100%;
  max-width: 152px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 10px 10px;
  box-shadow: 0 16px 34px -18px rgba(7,15,36,.22);
  text-align: center;
}
.icom-block-num {
  position: absolute;
  top: -8px;
  left: -7px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .66rem;
  color: #fff;
  box-shadow: 0 8px 18px -6px rgba(7,15,36,.35);
}
.icom-num-red    { background: var(--accent-red); }
.icom-num-green  { background: var(--accent-green); }
.icom-num-orange { background: var(--accent-orange); }
.icom-num-blue   { background: var(--accent-blue); }

.icom-block-icon {
  width: 26px;
  height: 26px;
  margin: 0 auto 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icom-block-icon svg { width: 100%; height: 100%; }
.icom-icon-red    { color: var(--accent-red); }
.icom-icon-green  { color: var(--accent-green); }
.icom-icon-orange { color: var(--accent-orange); }
.icom-icon-blue   { color: var(--accent-blue); }

.icom-block-card p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .68rem;
  line-height: 1.28;
  color: var(--ink-navy);
}
[data-theme="dark"] .icom-block-card { background: var(--white); border-color: var(--line); }
[data-theme="dark"] .icom-center-circle { background: var(--white); border-color: var(--line); }

/* Notre Méthode sub-block */
.methode-subblock { border-top:1px solid var(--line); padding-top:80px; }
.methode-layout { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:stretch; }
.method-track { display:flex; flex-direction:column; gap:0; }

.method-step { display:flex; gap:24px; align-items:flex-start; }
.method-index {
  flex-shrink:0; width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:.9rem;
  color:#fff; z-index:1;
  border:3px solid var(--paper); box-shadow:0 0 0 1px var(--line);
}
.method-index--blue    { background:var(--primary); }
.method-index--magenta { background:var(--accent-magenta); }
.method-index--orange  { background:var(--accent-orange); }

.method-body { background:var(--paper-dim); border:1px solid var(--line); border-radius:14px; padding:18px 22px; flex:1; }
.method-tag {
  display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:3px 10px; border-radius:999px;
  background:var(--primary); color:#fff; margin-bottom:8px;
}
.method-tag--magenta { background:var(--accent-magenta); }
.method-tag--orange  { background:var(--accent-orange); }
.method-body h3 { font-size:1.05rem; margin-bottom:.35em; }
.method-body p  { font-size:.9rem; margin:0; }

/* Flèches entre les étapes — pleines (filled), plus imposantes, et
   alignées exactement sous les pastilles numérotées (01 → 02 → 03).
   Espace vertical resserré entre les cartes (hauteur réduite du
   conteneur) tout en gardant une flèche visuellement plus grande. */
.method-arrow {
  display:flex; justify-content:center; align-items:center;
  width:56px; height:40px; margin:0; color:var(--primary);
}
.method-arrow--magenta { color:var(--accent-magenta); }
.method-arrow--orange  { color:var(--accent-orange); }
.method-arrow svg {
  width:24px; height:34px;
  filter:drop-shadow(0 5px 10px rgba(20,39,68,.22));
  animation: methodFlow 2.2s ease-in-out infinite;
}
@keyframes methodFlow { 0%,100% { transform:translateY(0); } 50% { transform:translateY(4px); } }

/* Colonne droite de "Notre Méthode" : carrousel d'images en haut,
   vidéo explicative descendue en bas. Les deux cartes se partagent la
   hauteur totale de la timeline (colonne de gauche) pour combler l'espace
   auparavant laissé vide au-dessus de la vidéo. */
.methode-media { display:flex; flex-direction:column; gap:26px; height:100%; }

.methode-carousel-card {
  flex:1 1 0; min-height:220px; aspect-ratio:auto;
}

/* Video placeholder */
.video-placeholder {
  background:linear-gradient(135deg, var(--ink-navy), #060E1E);
  border-radius:20px; aspect-ratio:auto; flex:1.15 1 0; min-height:240px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; cursor:pointer; position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 50px -18px rgba(0,0,0,.5);
  transition:transform .3s var(--ease);
}
.video-placeholder:hover { transform:scale(1.015); }
.video-placeholder::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,.18); pointer-events:none; transition:opacity .35s var(--ease); }
.video-play-btn { width:72px; height:72px; position:relative; z-index:2; color:rgba(245,247,250,.85); transition:transform .3s var(--ease), opacity .3s var(--ease); background:none; border:0; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.video-placeholder:hover .video-play-btn { transform:scale(1.1); }
.video-play-btn svg { width:100%; height:100%; }
.video-play-btn:focus-visible { outline:2px solid var(--accent-magenta); outline-offset:4px; border-radius:50%; }
.video-label { color:rgba(245,247,250,.7); font-size:.9rem; font-weight:600; z-index:1; position:relative; text-align:center; transition:opacity .3s var(--ease); }
.video-bar { position:absolute; bottom:0; left:0; right:0; height:4px; background:rgba(255,255,255,.12); z-index:1; }
.video-bar-fill { height:100%; width:0%; background:var(--accent-magenta); transition:width .15s linear; }

/* Élément vidéo réel, calé derrière les contrôles */
.video-element {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; background:#000;
}

/* Une fois la lecture démarrée : assombrit le voile, estompe le bouton et le libellé */
.video-placeholder.is-playing::after { opacity:0; }
.video-placeholder.is-playing .video-play-btn { opacity:0; transform:scale(.85); pointer-events:none; }
.video-placeholder.is-playing .video-label { opacity:0; pointer-events:none; }
.video-placeholder.is-playing:hover .video-play-btn { opacity:1; transform:scale(1.1); pointer-events:auto; }
.video-placeholder.is-playing:hover::after { opacity:1; }
.video-placeholder.is-playing:hover .video-label { opacity:1; }

/* ================================================================
   NOS SERVICES
   ================================================================ */
.services { background:var(--paper-dim); }
.services-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.service-card {
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.service-card:hover { transform:translateY(-6px); box-shadow:0 24px 50px -20px rgba(20,93,150,.2); }

.service-band {
  height:140px; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.service-band--magenta { background:linear-gradient(135deg, #A80E56, var(--accent-magenta)); }
.service-band--orange  { background:linear-gradient(135deg, #C4630F, var(--accent-orange));  }
.service-band--green   { background:linear-gradient(135deg, #5C9A2A, var(--accent-green));   }
.service-band--blue    { background:linear-gradient(135deg, var(--primary-dark), var(--primary)); }
.service-band::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,.12); }
.service-band-label { font-family:monospace; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.75); position:relative; z-index:1; }

.service-body { padding:28px 28px 32px; flex:1; display:flex; flex-direction:column; }
.service-body h3 { font-size:1.15rem; margin-bottom:.6em; }

/* Titre service = lien vers PDF */
.service-title-link {
  color:var(--ink-navy); text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  transition:color .25s;
}
.service-title-link:hover { color:var(--primary-dark); }
.service-pdf-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:6px; flex-shrink:0;
  background:var(--primary-glow); color:var(--primary-dark);
  font-size:.75rem; font-style:normal; font-weight:700;
  border:1px solid rgba(27,117,188,.2);
  transition:background .25s, transform .25s;
}
.service-title-link:hover .service-pdf-icon { background:var(--primary); color:#fff; transform:translateY(-1px); }

.card-points { display:flex; flex-direction:column; gap:9px; flex:1; margin-top:8px; }
.card-points li { font-size:.87rem; color:var(--muted); padding-left:18px; position:relative; }
.card-points li::before { content:''; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:var(--primary); }
.service-card:nth-child(1) .card-points li::before { background:var(--accent-magenta); }
.service-card:nth-child(2) .card-points li::before { background:var(--accent-orange); }
.service-card:nth-child(3) .card-points li::before { background:var(--accent-green); }
.service-card:nth-child(4) .card-points li::before { background:var(--primary); }
.service-card:nth-child(1):hover { border-color:rgba(214,19,108,.35); }
.service-card:nth-child(2):hover { border-color:rgba(240,128,30,.35); }
.service-card:nth-child(3):hover { border-color:rgba(124,182,61,.35); }
.service-card:nth-child(4):hover { border-color:rgba(27,117,188,.4); }

/* Bouton "Télécharger le catalogue" — un catalogue dédié par service */
.service-catalogue-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:20px; padding:11px 16px;
  font-family:var(--font-display); font-size:.82rem; font-weight:700;
  text-decoration:none; border-radius:10px;
  border:1px solid var(--line); background:var(--paper-dim); color:var(--ink-navy);
  transition:background .25s, border-color .25s, color .25s, transform .25s;
}
.service-catalogue-btn svg { width:15px; height:15px; flex-shrink:0; transition:transform .25s; }
.service-catalogue-btn:hover { transform:translateY(-2px); color:#fff; }
.service-card:nth-child(1) .service-catalogue-btn:hover { background:var(--accent-magenta); border-color:var(--accent-magenta); }
.service-card:nth-child(2) .service-catalogue-btn:hover { background:var(--accent-orange); border-color:var(--accent-orange); }
.service-card:nth-child(3) .service-catalogue-btn:hover { background:var(--accent-green); border-color:var(--accent-green); }
.service-card:nth-child(4) .service-catalogue-btn:hover { background:var(--primary); border-color:var(--primary); }
.service-catalogue-btn:hover svg { transform:translateY(2px); }

/* Catalogue strip */
.catalogue-strip {
  margin-top:48px; display:flex; align-items:center; gap:28px;
  background:linear-gradient(135deg,rgba(27,117,188,.07) 0%,rgba(20,93,150,.04) 100%);
  border:1px solid rgba(27,117,188,.22); border-radius:var(--radius); padding:28px 36px;
}
.catalogue-strip-icon {
  flex-shrink:0; width:58px; height:58px; border-radius:15px;
  background:linear-gradient(135deg, var(--primary-dark), var(--primary));
  display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow:0 10px 24px -8px rgba(27,117,188,.45);
}
.catalogue-strip-copy { flex:1; display:flex; flex-direction:column; gap:5px; min-width:0; }
.catalogue-strip-copy strong { font-family:var(--font-display); font-size:1.05rem; font-weight:700; color:var(--ink-navy); }
.catalogue-strip-copy span  { font-size:.9rem; color:var(--muted); line-height:1.45; }

/* ================================================================
   NOS RÉALISATIONS
   Chaque réalisation (catégorie) possède son propre mini-carrousel
   INDÉPENDANT : une seule carte visible à la fois, défilement auto
   en boucle infinie (translate + opacity + léger scale).
   Le carrousel n'occupe que ~32% de la largeur ; le reste (~68%)
   est volontairement laissé libre pour du contenu futur.
   ================================================================ */
.realisations { background:var(--paper); padding:110px 0; }

.real-groups { display:flex; flex-direction:column; gap:56px; }

/* Une "ligne" = 1 carrousel (gauche) + 1 zone libre (droite) */
.real-group {
  display:flex; align-items:stretch; gap:44px;
}

/* ── Carrousel (≈ 32% de la largeur) ── */
.real-carousel {
  flex:0 0 32%; max-width:400px; min-width:280px;
  display:flex; flex-direction:column;
}
.real-carousel-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.real-carousel-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.real-carousel-title { font-family:var(--font-display); font-size:1rem; font-weight:800; color:var(--ink-navy); margin:0; }

.real-viewport {
  position:relative; flex:1; min-height:280px; overflow:hidden;
  background:var(--white); border:1px solid var(--line); border-radius:18px;
  box-shadow:0 20px 46px -24px rgba(20,93,150,.18);
}
.real-card {
  position:absolute; inset:0; padding:26px 26px 22px;
  display:flex; flex-direction:column;
  opacity:0; transform:translateX(26px) scale(.97);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  pointer-events:none;
}
.real-card.is-active { opacity:1; transform:none; pointer-events:auto; position:relative; }
.real-card.is-leaving { transform:translateX(-26px) scale(.97); }

.real-badge {
  display:inline-block; align-self:flex-start; margin-bottom:14px;
  font-size:.68rem; font-weight:700; padding:4px 12px; border-radius:999px; letter-spacing:.04em;
}
.real-badge--blue    { background:rgba(27,117,188,.12); color:var(--primary-dark); border:1px solid rgba(27,117,188,.25); }
.real-badge--magenta { background:rgba(214,19,108,.1);  color:var(--accent-magenta); border:1px solid rgba(214,19,108,.2); }
.real-badge--green   { background:rgba(124,182,61,.1);  color:#4D7A20; border:1px solid rgba(124,182,61,.2); }
.real-badge--orange  { background:rgba(240,128,30,.1);  color:#C06A10; border:1px solid rgba(240,128,30,.2); }

.real-card h4 { font-family:var(--font-display); font-size:1.1rem; font-weight:800; color:var(--ink-navy); margin:0 0 6px; }
.real-meta { font-size:.78rem; font-weight:600; color:var(--primary-dark); margin:0 0 10px; }
.real-desc { font-size:.87rem; color:var(--muted); line-height:1.55; margin:0; flex:1; }

.real-dots { display:flex; gap:7px; margin-top:16px; }
.real-dots button {
  width:7px; height:7px; border-radius:50%; border:none;
  background:var(--line); cursor:pointer; padding:0;
  transition:background .3s, width .3s, border-radius .3s;
  position:relative;
}
.real-dots button::before { content:''; position:absolute; inset:-10px; }
.real-dots button.is-active { background:var(--primary); width:18px; border-radius:4px; }

/* ── Zone flipbook (≈ 68%) — réservée à l'intégration future d'un
     flipbook par catégorie (ex. <iframe> Issuu / FlipHTML5) ── */
.real-space {
  flex:1; min-height:280px; border-radius:18px;
  border:1.5px dashed var(--line); background:var(--paper-dim);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; /* prêt à accueillir un <iframe> plein cadre */
}
.real-space span { font-size:.8rem; color:var(--muted); opacity:.6; text-align:center; padding:0 20px; }

/* ── Stats strip (avant Témoignages) ── */
.stats-strip {
  background:var(--ink-navy-2); border-radius:20px;
  padding:50px 48px; margin-bottom:56px;
}
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.stat { text-align:center; }
.stat-number,.stat-suffix { font-family:var(--font-display); font-size:2.4rem; font-weight:800; color:var(--primary-light); }
.stat p { margin:8px 0 0; font-size:.85rem; color:rgba(245,247,250,.65); }

/* ── Témoignages ── */
.temoignages-block {
  background:var(--paper-dim); border-radius:24px; padding:60px 48px;
  border:1px solid var(--line);
}
.testimonial-slider { max-width:720px; margin:0 auto; text-align:center; }
.testimonial-track  { position:relative; min-height:200px; }
.testimonial-slide  { position:absolute; inset:0; margin:0; opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease); pointer-events:none; }
.testimonial-slide.is-active { opacity:1; transform:none; pointer-events:auto; position:relative; }
.testimonial-slide p { font-family:var(--font-display); font-size:1.2rem; font-weight:500; color:var(--ink-navy); line-height:1.55; margin-bottom:22px; }
.testimonial-slide footer { display:flex; flex-direction:column; gap:2px; }
.testimonial-slide footer strong { font-size:.92rem; color:var(--ink-navy); }
.testimonial-slide footer span  { font-size:.8rem;  color:var(--muted); }
.testimonial-dots { display:flex; justify-content:center; gap:10px; margin-top:28px; }
.testimonial-dots button { width:9px; height:9px; border-radius:50%; border:none; background:var(--line); cursor:pointer; padding:0; transition:background .3s, width .3s; position:relative; }
.testimonial-dots button::before { content:''; position:absolute; inset:-10px; }
.testimonial-dots button.is-active { background:var(--primary); width:26px; border-radius:5px; }

/* ================================================================
   NOS PARTENAIRES — bande de logos en défilement infini
   ================================================================ */
.partners-block { margin-top:70px; }
.partners-head { text-align:center; margin-bottom:32px; }

.partners-marquee {
  position:relative; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.partners-track {
  display:flex; align-items:center; gap:64px; width:max-content;
  animation: partnersScroll 32s linear infinite;
}
.partners-marquee:hover .partners-track { animation-play-state:paused; }

@keyframes partnersScroll {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); } /* la liste est dupliquée x2 : boucle parfaite */
}

.partner-logo {
  flex-shrink:0; height:46px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:1rem; letter-spacing:.02em;
  color:var(--muted); filter:grayscale(1); opacity:.55;
  transition:filter .35s var(--ease), opacity .35s var(--ease), transform .35s var(--ease);
  white-space:nowrap;
}
.partner-logo:hover { filter:grayscale(0); opacity:1; transform:translateY(-2px); color:var(--primary-dark); }
.partner-logo img { height:100%; width:auto; object-fit:contain; }

/* ================================================================
   CONTACT
   ================================================================ */
.contact { background:var(--paper); }
.contact-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:44px; align-items:start; }

/* Colonne gauche : panneau compact (accroche + repères + coordonnées).
   Dimensionné à son propre contenu (plus d'étirement forcé sur la
   hauteur du formulaire) pour un rendu plus léger et optimisé. */
.contact-copy { display:flex; align-self:center; }
.contact-panel {
  position:relative;
  width:100%;
  display:flex; flex-direction:column; justify-content:flex-start; gap:22px;
  background:var(--white); border:1px solid var(--line); border-radius:20px;
  padding:30px 28px;
  box-shadow:0 20px 40px -24px rgba(20,93,150,.15);
  overflow:hidden;
}
.contact-panel::before {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(ellipse at 85% 0%, rgba(27,117,188,.08), transparent 55%),
              radial-gradient(ellipse at 5% 100%, rgba(226,59,46,.07), transparent 55%);
}
.contact-lede { margin-bottom:0; position:relative; z-index:1; font-size:.94rem; line-height:1.5; }

.contact-highlights { display:flex; flex-direction:column; gap:13px; position:relative; z-index:1; }
.contact-highlight { display:flex; align-items:flex-start; gap:12px; }
.contact-highlight-dot {
  flex:none; width:8px; height:8px; margin-top:6px; border-radius:50%;
  background:var(--accent-red);
  box-shadow:0 0 0 3px rgba(226,59,46,.14);
}
.contact-highlight-dot--orange { background:var(--accent-orange); box-shadow:0 0 0 3px rgba(240,128,30,.14); }
.contact-highlight-dot--blue   { background:var(--accent-blue);   box-shadow:0 0 0 3px rgba(27,117,188,.14); }
.contact-highlight p { margin:0; font-size:.88rem; color:var(--muted); line-height:1.45; }
.contact-highlight strong { color:var(--ink-navy); font-weight:700; }

/* Carte des coordonnées — rapatriée depuis la colonne formulaire pour
   donner du corps au panneau de gauche */
.contact-info-card {
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:11px;
  padding-top:18px; border-top:1px solid var(--line);
}
.contact-info-row { display:flex; align-items:center; gap:11px; }
.contact-info-icon {
  flex:none; width:32px; height:32px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:var(--primary-glow); color:var(--primary-dark);
}
.contact-info-icon svg { width:16px; height:16px; }
.contact-info-row div { display:flex; flex-direction:column; gap:1px; }
.contact-info-row strong { font-family:var(--font-display); font-size:.76rem; color:var(--ink-navy); }
.contact-info-row span   { font-size:.83rem; color:var(--muted); }
[data-theme="dark"] .contact-info-icon { background:rgba(74,159,212,.14); }

/* Colonne droite : en-tête + formulaire */
.contact-main { display:flex; flex-direction:column; gap:30px; }
.contact-head .section-lede { margin-bottom:0; }
.contact-form {
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px; display:flex; flex-direction:column; gap:18px;
  box-shadow:0 30px 60px -30px rgba(20,93,150,.15);
  flex:1 1 auto;
}
/* Le champ "message" s'étire pour absorber l'espace disponible : le
   formulaire occupe ainsi toute la hauteur de la colonne, à égalité
   (ou plus bas) avec la carte de gauche, sans laisser de vide sous le
   bouton d'envoi. */
.form-message { flex:1 1 auto; display:flex; flex-direction:column; }
.form-message textarea { flex:1 1 auto; min-height:110px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
label { display:flex; flex-direction:column; gap:8px; font-size:.82rem; font-weight:600; color:var(--ink-navy); }
input,textarea,select {
  font-family:var(--font-body); font-size:.95rem; padding:12px 14px;
  border-radius:10px; border:1px solid var(--line);
  background:var(--paper); color:var(--ink); resize:vertical;
  transition:border-color .3s, box-shadow .3s;
  width:100%;
}
input:focus,textarea:focus,select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); }

/* Select avec flèche custom */
.select-wrap { position:relative; }
.select-wrap select { appearance:none; -webkit-appearance:none; padding-right:40px; cursor:pointer; }
.select-arrow {
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  pointer-events:none; color:var(--muted);
  display:flex; align-items:center; justify-content:center;
}

.form-full   { width:100%; }
.form-submit { align-self:flex-start; }
.form-note   { font-size:.85rem; color:var(--primary-dark); min-height:1.2em; margin:0; }

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer { background:var(--ink-navy); color:rgba(245,247,250,.7); padding:70px 0 0; }
.footer-inner { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(245,247,250,.1); }
.footer-brand { display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.footer-logo-badge { display:inline-flex; align-items:center; justify-content:center; background:transparent; border-radius:0; padding:0; }
.footer-logo-badge img { height:42px; width:auto; display:block; }
.footer-brand p { font-size:.85rem; color:rgba(245,247,250,.55); max-width:300px; }
.footer-petals { display:flex; gap:6px; }
.footer-petals span { width:10px; height:10px; border-radius:50%; display:block; }
.footer-col { display:flex; flex-direction:column; gap:10px; font-size:.88rem; }
.footer-col h5 { font-family:var(--font-display); color:var(--primary-light); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; margin:0 0 6px; }
.footer-col a:hover { color:var(--primary-light); }
.footer-bottom { display:flex; justify-content:space-between; padding:24px 28px; font-size:.78rem; color:rgba(245,247,250,.4); flex-wrap:wrap; gap:10px; }

/* ── Back to top ── */
.back-to-top {
  position:fixed; bottom:28px; right:28px; z-index:400;
  width:46px; height:46px; border-radius:50%;
  background:var(--ink-navy); color:var(--primary-light); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px -8px rgba(7,15,36,.45);
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .3s, transform .3s;
}
.back-to-top.is-visible { opacity:1; transform:none; pointer-events:auto; }

/* ── Reveal on scroll ── */
.reveal { transition:opacity .7s var(--ease), transform .7s var(--ease); }
html.has-js .reveal { opacity:0; transform:translateY(24px); }
html.has-js .reveal.is-visible { opacity:1; transform:none; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:1080px) {
  .header-actions .btn-ghost { display:none; }
}

@media (max-width:980px) {
  .hero-inner, .pourquoi-grid, .contact-grid, .methode-layout,
  .histoire-grid, .parcours-grid { grid-template-columns:1fr; }
  .services-grid { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .footer-inner { grid-template-columns:1fr 1fr; }
  .hero-visual { max-width:400px; margin:0 auto; }
  .pourquoi-img-wrap { max-width:100%; }
  .icom-anim-wrap { gap:20px 18px; min-height:300px; max-width:340px; margin:0 auto; }
  .icom-center { width:min(24%, 104px); }
  .stats-strip { padding:40px 32px; }
  .real-group { flex-direction:column; }
  .real-carousel { flex:1 1 auto; max-width:100%; }
  .real-space { min-height:120px; }
}

@media (max-width:760px) {
  .main-nav {
    position:fixed; top:0; right:0; height:100vh; height:100dvh; width:min(82vw,320px);
    background:var(--ink-navy); flex-direction:column; justify-content:center;
    gap:22px; padding:40px; padding-top:max(40px, env(safe-area-inset-top));
    padding-bottom:max(40px, env(safe-area-inset-bottom));
    transform:translateX(100%); overscroll-behavior:contain;
    transition:transform .4s var(--ease); z-index:600;
    box-shadow:-24px 0 60px -20px rgba(0,0,0,.35);
  }
  .main-nav.is-open { transform:translateX(0); }
  .main-nav a { color:rgba(245,247,250,.85); font-size:1.05rem; padding:6px 0; }
  .main-nav a:hover { color:var(--primary-light); }
  [data-theme="dark"] .main-nav { background:#060E1E; }
  .nav-toggle { display:flex; }
  .nav-backdrop { top:0; }
  /* CTA repris dans le tiroir : sans lui, l'appel à l'action principal
     disparaissait totalement du header sur mobile (masqué dès 1080px
     et absent de .main-nav). */
  .main-nav-cta {
    display:inline-flex; justify-content:center; margin-top:6px;
    background:linear-gradient(135deg, var(--primary), var(--primary-dark));
    color:#fff; box-shadow:0 10px 28px -8px rgba(27,117,188,.5);
  }
  .catalogue-strip { flex-direction:column; align-items:flex-start; gap:18px; padding:24px; }
  .btn-catalogue-dl { width:100%; justify-content:center; }
  .form-row { grid-template-columns:1fr; }
  .contact-panel { padding:26px 22px; }
  .footer-inner { grid-template-columns:1fr; }
  .section { padding:72px 0; }
  .hero { padding:118px 0 72px; min-height:auto; }
  .hero-slide-scene { display:none; }
  .temoignages-block { padding:40px 24px; }
  .stats-strip { border-radius:14px; padding:36px 24px; }
  .stats-grid { grid-template-columns:repeat(2,1fr); gap:20px; }
  .methode-subblock { padding-top:56px; }
  .methode-layout { grid-template-columns:1fr; gap:44px; }
  .methode-media { height:auto; }
  .methode-carousel-card { flex:none; aspect-ratio:4/3; min-height:0; }
  .video-placeholder { flex:none; aspect-ratio:16/10; min-height:0; }
  .pourquoi-grid { margin-bottom:56px; }
  .team-track { grid-auto-columns:78%; }
  .team-nav button { width:44px; height:44px; }
  .partners-track { animation-duration:18s; }
  /* Zone flipbook future : vide sur mobile, elle n'ajoute que du défilement
     inutile — on la retire et le carrousel prend toute la largeur. */
  .real-space { display:none; }
  /* Évite le zoom automatique de Safari iOS au focus (déclenché sous 16px) */
  input, textarea, select { font-size:16px; }

  /* Animation "Pourquoi ICOM" : bascule en chaîne verticale
     cercle en haut, puis les 4 blocs empilés dans l'ordre 1→4 */
  .icom-anim-wrap {
    display:flex; flex-direction:column; align-items:center;
    gap:26px; min-height:0; max-width:100%;
  }
  .icom-center {
    position:static; order:-1; width:96px;
    transform:scale(.7); margin-bottom:2px;
  }
  .icom-center.is-visible { transform:scale(1); }
  .icom-block { --tx:0px; --ty:24px; width:100%; justify-content:center !important; }
  .icom-block-card { max-width:190px; }
}

/* ── Mobile en paysage (hauteur réduite) : éviter qu'un hero en
   min-height:100vh n'oblige à scroller sur un écran très bas ── */
@media (max-width:900px) and (max-height:480px) and (orientation:landscape) {
  .hero { min-height:auto; padding:110px 0 48px; }
  .hero-slide-dots { bottom:14px; }
}

/* ── Petits téléphones (≤480px) : la 760px suffit sur la plupart
   des téléphones récents, ce palier affine les écrans les plus
   étroits (SE, petits Android) pour éviter tout élément trop serré ── */
@media (max-width:480px) {
  .container { padding:0 18px; }
  .hero { padding:104px 0 64px; }
  .hero h1 { font-size:clamp(1.7rem,7vw,2.2rem); }
  .hero-lede { font-size:.95rem; }
  .section { padding:64px 0; }
  .section-head h2 { font-size:clamp(1.4rem,6vw,1.8rem); }
  .stats-grid { grid-template-columns:1fr 1fr; gap:14px; }
  .stats-strip { padding:28px 18px; }
  .catalogue-strip { padding:18px; gap:14px; }
  .catalogue-strip-icon { width:48px; height:48px; }
  .temoignages-block { padding:28px 16px; }
  .contact-panel { padding:20px 16px; }
  .brand-logo { height:36px; }
  .btn, .btn-catalogue-dl { padding:12px 20px; font-size:.88rem; }
  .icom-block-card { max-width:100%; }
  .hero-apa-inner { gap:0; }
  .hero-apa-content { padding:12px 14px; }
  .hero-apa-icon { width:86px; height:auto; }
  .hero-apa-labels { flex-wrap:wrap; gap:8px 12px; font-size:.86rem; }
  .header-actions { gap:2px; }
  .header-inner { gap:10px; }
  .stat-number, .stat-suffix { font-size:1.9rem; }
  .floating-chip { max-width:calc(100% - 24px); }
  .chip-1 { top:-14px; right:0; }
}

/* ============================================================
   PAGE LOADER — écran de chargement au démarrage
   ============================================================ */
html.has-loader, html.has-loader body { overflow: hidden; height: 100%; }

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
[data-theme="dark"] .page-loader { background: var(--paper); }

.page-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.page-loader-logo {
  width: 84px;
  height: auto;
  animation: loaderPulse 1.4s ease-in-out infinite;
}

@keyframes loaderPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(.9); opacity: .65; }
}

.page-loader-bar {
  width: 140px;
  height: 3px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}
.page-loader-bar span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent-magenta));
  animation: loaderSlide 1.1s ease-in-out infinite;
}

@keyframes loaderSlide {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(140%); }
  100% { transform: translateX(140%); }
}

/* État masqué une fois le chargement terminé */
.page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .page-loader-logo { animation: none; }
  .page-loader-bar span { animation: none; width: 100%; }
}
\n/* ============================================================
   TEMPLATE — variables personnalisables depuis config.js
   ============================================================ */
.template-placeholder { color: inherit; }

/* ============================================================
   OTI — personnalisation visuelle spécifique
   Ces règles conservent les composants du template mais adaptent
   leur composition à une entreprise de logistique internationale.
   ============================================================ */

/* HERO : réseau logistique animé, à la place de l'objet ICOM */
.oti-logistics-visual{
  position:relative;
  width:min(100%, 560px);
  aspect-ratio:1 / .88;
  margin:auto;
  border-radius:28px;
  background:
    radial-gradient(circle at 50% 48%, rgba(18,63,115,.12), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(238,244,249,.88));
  border:1px solid rgba(18,63,115,.14);
  box-shadow:0 32px 80px -35px rgba(18,63,115,.34);
  overflow:hidden;
}
.oti-logistics-visual::before{
  content:"";
  position:absolute;
  inset:10%;
  border:1px dashed rgba(18,63,115,.16);
  border-radius:50%;
  transform:rotate(-12deg);
}
.oti-logistics-core{
  position:absolute;
  left:50%; top:50%;
  width:132px; height:132px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#fff;
  border:2px solid rgba(18,63,115,.18);
  box-shadow:0 16px 45px rgba(18,63,115,.22);
  display:flex; align-items:center; justify-content:center;
  z-index:4;
}
.oti-core-ring{
  position:absolute; inset:-9px;
  border:1px solid rgba(199,90,10,.55);
  border-radius:50%;
  animation:otiCorePulse 2.8s ease-in-out infinite;
}
.oti-core-logo{
  width:74px; height:74px; object-fit:contain; border-radius:50%;
}
.oti-core-label{
  position:absolute; bottom:8px;
  font:800 .68rem var(--font-display);
  letter-spacing:.18em; color:var(--primary-dark);
}
.oti-route-line{
  position:absolute;
  left:50%; top:50%;
  height:2px;
  width:43%;
  transform-origin:0 50%;
  background:linear-gradient(90deg, rgba(18,63,115,.7), rgba(199,90,10,.05));
  z-index:1;
}
.oti-route-line::after{
  content:"";
  position:absolute; right:0; top:50%;
  width:7px; height:7px; border-radius:50%;
  background:var(--accent-orange);
  transform:translateY(-50%);
  box-shadow:0 0 0 6px rgba(199,90,10,.08);
}
.oti-route-line--1{transform:rotate(-25deg)}
.oti-route-line--2{transform:rotate(34deg)}
.oti-route-line--3{transform:rotate(148deg)}
.oti-route-line--4{transform:rotate(208deg)}
.oti-node{
  position:absolute;
  min-width:116px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(18,63,115,.12);
  box-shadow:0 12px 30px -18px rgba(18,63,115,.45);
  z-index:3;
  display:grid;
  grid-template-columns:28px 1fr;
  column-gap:9px;
  align-items:center;
}
.oti-node-icon{
  grid-row:span 2;
  width:28px; height:28px;
  border-radius:9px;
  display:grid; place-items:center;
  background:rgba(18,63,115,.08);
  color:var(--primary);
  font-size:.9rem;
}
.oti-node strong{
  font:800 .7rem var(--font-display);
  letter-spacing:.08em; color:var(--primary-dark);
}
.oti-node small{
  font:600 .58rem var(--font-body);
  color:var(--muted);
  white-space:nowrap;
}
.oti-node--port{left:7%; top:20%}
.oti-node--air{right:7%; top:18%}
.oti-node--road{left:8%; bottom:17%}
.oti-node--world{right:6%; bottom:14%}
.oti-floating-stat{
  position:absolute;
  z-index:5;
  display:flex; align-items:baseline; gap:7px;
  padding:9px 13px;
  border-radius:999px;
  background:var(--primary-dark);
  color:#fff;
  box-shadow:0 14px 32px -18px rgba(18,63,115,.65);
}
.oti-floating-stat strong{font:900 1rem var(--font-display)}
.oti-floating-stat span{font:600 .62rem var(--font-body); opacity:.86}
.oti-floating-stat--top{right:19%; top:4%}
.oti-floating-stat--bottom{left:17%; bottom:4%; background:var(--accent-orange)}
@keyframes otiCorePulse{
  0%,100%{transform:scale(.96);opacity:.55}
  50%{transform:scale(1.04);opacity:1}
}

/* Les éléments ICOM de l'ancien objet ne sont plus utilisés par OTI. */
.hero-pres-card, .icom-anim-wrap, .floating-chip{display:none !important}

/* Les catalogues ICOM ne sont pas pertinents pour cette version OTI. */
.catalogue-strip, .service-catalogue-btn{display:none !important}

/* RÉALISATIONS : aucune zone vide réservée à un flipbook */
.real-group{display:block}
.real-carousel{
  flex:1 1 auto;
  max-width:none;
  min-width:0;
  width:100%;
}
.real-viewport{min-height:245px}
.real-card{max-width:900px}
.real-card h4{font-size:clamp(1.35rem,2.3vw,2rem)}
.real-card .real-desc{max-width:760px; line-height:1.75}

/* PARTENAIRES : même carrousel, mais chaque logo est présenté dans une carte */
.partners-marquee{
  padding:10px 2px 18px;
  overflow:hidden;
}
.partners-track{
  gap:18px;
}
.partner-card{
  flex:0 0 190px;
  min-height:126px;
  padding:18px 16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--white);
  box-shadow:0 14px 35px -24px rgba(18,63,115,.35);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.partner-card:hover{
  transform:translateY(-5px);
  border-color:rgba(18,63,115,.25);
  box-shadow:0 22px 42px -24px rgba(18,63,115,.45);
}
.partner-card-mark{
  width:64px; height:44px;
  margin-bottom:11px;
  display:grid; place-items:center;
  border-radius:10px;
  background:linear-gradient(135deg, rgba(18,63,115,.09), rgba(199,90,10,.10));
  color:var(--primary-dark);
  font:900 .95rem var(--font-display);
  letter-spacing:.08em;
  overflow:hidden;
}
.partner-card-mark img{
  max-width:90%; max-height:34px;
  object-fit:contain;
}
.partner-card-name{
  font:800 .82rem var(--font-display);
  color:var(--ink-navy);
}
.partner-card-type{
  margin-top:4px;
  font:600 .6rem var(--font-body);
  color:var(--muted);
}

/* Les témoignages non documentés ne doivent pas apparaître dans une
   présentation internationale : aucune citation client inventée. */
#realisations .temoignages-block{display:none !important}

@media (max-width:900px){
  .oti-logistics-visual{width:min(100%,500px)}
}
@media (max-width:620px){
  .oti-logistics-visual{aspect-ratio:1 / 1.02; border-radius:22px}
  .oti-logistics-core{width:108px;height:108px}
  .oti-core-logo{width:60px;height:60px}
  .oti-node{min-width:100px;padding:9px 10px}
  .oti-node--port{left:3%;top:18%}
  .oti-node--air{right:3%;top:17%}
  .oti-node--road{left:3%;bottom:16%}
  .oti-node--world{right:2%;bottom:14%}
  .oti-floating-stat{padding:7px 10px}
  .oti-floating-stat--top{right:8%;top:4%}
  .oti-floating-stat--bottom{left:8%;bottom:4%}
  .partner-card{flex-basis:165px;min-height:116px}
}

/* ================================================================
   OTI — adaptation institutionnelle / présentation DG
   ================================================================ */
.oti-hero .hero-inner{grid-template-columns:minmax(0,1fr) minmax(420px,1.05fr);align-items:center;gap:28px;min-height:calc(100vh - 92px)}
.oti-hero .hero-copy{max-width:720px;position:relative;z-index:4}
.oti-hero .hero-copy h1{font-size:clamp(2.4rem,4.7vw,5rem);line-height:.98;letter-spacing:-.035em;text-wrap:balance}
.oti-hero .hero-lede{max-width:650px}
.oti-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.oti-hero-visual{position:relative;z-index:3;display:flex;justify-content:center;align-items:center}
.oti-hero-center-card{position:relative;width:min(680px,100%);filter:drop-shadow(0 24px 38px rgba(8,31,63,.24));animation:otiFloat 7s ease-in-out infinite}
.oti-hero-center-card img{display:block;width:100%;height:auto;max-height:610px;object-fit:contain;border-radius:28px}
.oti-hero-badge{position:absolute;right:18px;bottom:18px;background:rgba(8,35,70,.9);color:#fff;border:1px solid rgba(255,255,255,.24);border-radius:14px;padding:10px 14px;display:flex;flex-direction:column;backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.oti-hero-badge strong{font-size:1rem;letter-spacing:.08em}.oti-hero-badge span{font-size:.68rem;opacity:.78}
.oti-hero-slide-image{background-image:var(--oti-bg);background-size:cover;background-position:center}
.oti-hero-slide-image .hero-slide-overlay{background:linear-gradient(90deg,rgba(4,21,44,.78),rgba(4,21,44,.32) 55%,rgba(4,21,44,.18))}
.oti-hero-slide-video .hero-slide-overlay{background:linear-gradient(90deg,rgba(4,21,44,.76),rgba(4,21,44,.26) 60%,rgba(4,21,44,.15))}
.oti-hero .hero-slide-scene{z-index:2}
@keyframes otiFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.oti-image-frame{height:470px;overflow:hidden;border-radius:26px;background:#eaf0f7;box-shadow:0 20px 50px rgba(10,42,78,.12)}
.oti-image-frame img{width:100%;height:100%;object-fit:cover;display:block}
.oti-pillar-note{display:flex;gap:18px;margin-top:30px;padding:20px 0;border-top:1px solid rgba(18,63,115,.16)}
.oti-pillar-note>span{font-size:.8rem;color:var(--accent-orange);font-weight:800;letter-spacing:.08em}.oti-pillar-note strong{display:block}.oti-pillar-note p{margin:6px 0 0;color:var(--muted);line-height:1.65}
.oti-values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:42px}
.oti-value-card{padding:28px;border:1px solid rgba(18,63,115,.12);border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(239,245,250,.8));box-shadow:0 12px 30px rgba(10,42,78,.06);position:relative;overflow:hidden}
.oti-value-card:after{content:"";position:absolute;right:-25px;bottom:-30px;width:90px;height:90px;border-radius:50%;background:rgba(199,90,10,.08)}
.oti-value-number{font-size:.72rem;color:var(--accent-orange);font-weight:800;letter-spacing:.12em}.oti-value-card h3{margin:24px 0 8px}.oti-value-card p{margin:0;color:var(--muted);line-height:1.65}
.oti-ambition{margin-top:24px;padding:30px 34px;border-radius:22px;background:linear-gradient(100deg,var(--primary-dark),var(--primary));color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;box-shadow:0 20px 45px rgba(11,47,91,.2)}
.oti-ambition .eyebrow{margin:0;color:#fff}.oti-ambition h3{font-size:clamp(1.45rem,2.4vw,2.3rem);margin:10px 0 0}.oti-ambition p{margin:0;opacity:.85;line-height:1.7}
.oti-capital-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.oti-director-card{position:relative;border-radius:26px;overflow:hidden;min-height:430px;background:#dfe8f0;box-shadow:0 20px 50px rgba(10,42,78,.14)}.oti-director-card img{width:100%;height:100%;min-height:430px;object-fit:cover;display:block}
.oti-qhse{background:linear-gradient(180deg,#f7f9fb,#eef4f8)}
.oti-qhse-list .feature-item{border-bottom-color:rgba(18,63,115,.12)}

.oti-services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:36px}
.oti-service-card{position:relative;padding:30px 26px 24px;border:1px solid rgba(18,63,115,.12);border-radius:22px;background:#fff;box-shadow:0 12px 32px rgba(9,40,75,.07);display:flex;flex-direction:column;min-height:380px;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.oti-service-card:hover{transform:translateY(-7px);box-shadow:0 22px 44px rgba(9,40,75,.14);border-color:rgba(18,63,115,.26)}
.oti-service-card--wide{grid-column:1/-1;min-height:auto;display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;padding:28px 32px;background:linear-gradient(100deg,#f7fafc,#fff)}
.oti-service-index{position:absolute;top:18px;right:22px;font-size:.68rem;font-weight:800;color:rgba(18,63,115,.38);letter-spacing:.1em}.oti-service-card--wide .oti-service-index{position:static}
.oti-service-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:rgba(18,63,115,.08);color:var(--primary);font-size:1.45rem;margin-bottom:24px}.oti-service-card--wide .oti-service-icon{margin:0}
.oti-service-card h3{font-size:1.28rem;line-height:1.15;margin:0 0 12px}.oti-service-card p{color:var(--muted);line-height:1.6;margin:0 0 16px}.oti-service-card ul{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:8px}.oti-service-card li{font-size:.86rem;color:#31485f;position:relative;padding-left:16px}.oti-service-card li:before{content:"";position:absolute;left:0;top:.58em;width:6px;height:6px;border-radius:50%;background:var(--accent-orange)}.oti-service-card>a{margin-top:auto;color:var(--primary);font-weight:750;text-decoration:none;font-size:.88rem;border-top:1px solid rgba(18,63,115,.1);padding-top:15px}.oti-service-card>a span{margin-left:6px;color:var(--accent-orange)}.oti-service-card--wide>a{margin:0;border:0;padding:0;white-space:nowrap}

.oti-presence-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;margin-top:38px;align-items:stretch}.oti-presence-image{position:relative;min-height:470px;border-radius:26px;overflow:hidden;box-shadow:0 20px 48px rgba(9,40,75,.15)}.oti-presence-image img{width:100%;height:100%;object-fit:cover;display:block}.oti-presence-caption{position:absolute;left:20px;bottom:20px;padding:14px 18px;border-radius:14px;background:rgba(7,32,63,.88);color:#fff;display:flex;flex-direction:column}.oti-presence-caption span{font-size:.8rem;opacity:.75;margin-top:3px}.oti-presence-copy{border-radius:26px;padding:28px;background:linear-gradient(145deg,#f4f8fb,#eaf1f6);display:flex;flex-direction:column;justify-content:center}.oti-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.oti-stats-grid .stat{padding:22px;border-radius:18px;background:#fff;border:1px solid rgba(18,63,115,.1);text-align:left}.oti-stats-grid .stat-number{font-size:2.6rem}.oti-stats-grid .stat p{margin:5px 0 0;color:var(--muted)}.oti-network-note{margin-top:18px;padding:20px;border-left:3px solid var(--accent-orange);background:#fff;border-radius:0 16px 16px 0}.oti-network-note strong{font-size:1.1rem}.oti-network-note p{margin:7px 0 0;color:var(--muted);line-height:1.65}.oti-presence .partners-block{margin-top:64px}

@media (max-width:1100px){.oti-hero .hero-inner{grid-template-columns:1fr;min-height:auto;padding-top:120px;padding-bottom:90px}.oti-hero .hero-copy{max-width:850px}.oti-hero-visual{order:2}.oti-hero-center-card{max-width:720px}.oti-values-grid{grid-template-columns:repeat(2,1fr)}.oti-services-grid{grid-template-columns:repeat(2,1fr)}.oti-service-card--wide{grid-column:1/-1}.oti-presence-layout{grid-template-columns:1fr}.oti-capital-grid{grid-template-columns:1fr}}
@media (max-width:700px){.oti-hero .hero-inner{padding-top:105px}.oti-hero .hero-copy h1{font-size:clamp(2rem,10vw,3.2rem)}.oti-hero-center-card img{border-radius:18px}.oti-hero-badge{right:10px;bottom:10px}.oti-values-grid,.oti-services-grid{grid-template-columns:1fr}.oti-service-card--wide{display:flex;align-items:flex-start;gap:0}.oti-service-card--wide .oti-service-icon{margin-bottom:20px}.oti-service-card--wide>a{margin-top:auto;padding-top:15px;border-top:1px solid rgba(18,63,115,.1);white-space:normal}.oti-ambition{grid-template-columns:1fr;padding:25px}.oti-presence-image{min-height:320px}.oti-stats-grid{grid-template-columns:1fr 1fr}.oti-stats-grid .stat-number{font-size:2rem}.oti-image-frame{height:320px}.oti-director-card,.oti-director-card img{min-height:340px}}


/* ================================================================
   OTI — COUCHE DYNAMIQUE / PRÉSENTATION DG V3
   ================================================================ */
.oti-hero-center-card{animation:none!important;transform:perspective(1200px) rotateX(var(--my,0deg)) rotateY(var(--mx,0deg));transition:transform .35s ease,filter .35s ease;will-change:transform;isolation:isolate}
.oti-hero-center-card::before{content:"";position:absolute;inset:-10px;border-radius:34px;background:linear-gradient(120deg,rgba(255,255,255,.35),transparent 28%,transparent 70%,rgba(199,90,10,.18));z-index:-2;filter:blur(1px);opacity:.8}
.oti-hero-glow{position:absolute;inset:10% 8%;z-index:-1;border-radius:40%;background:radial-gradient(circle,rgba(63,152,215,.35),rgba(199,90,10,.12) 45%,transparent 72%);filter:blur(28px);animation:otiGlow 5s ease-in-out infinite alternate}
.oti-hero-orbit{position:absolute;inset:-12px;border:1px solid rgba(255,255,255,.28);border-radius:32px;pointer-events:none;z-index:2}
.oti-hero-orbit--one{transform:rotate(2deg);animation:otiOrbit 11s linear infinite}
.oti-hero-orbit--two{inset:-25px;opacity:.45;border-style:dashed;transform:rotate(-5deg);animation:otiOrbitReverse 16s linear infinite}
.oti-hero-float{position:absolute;z-index:4;padding:9px 12px;border:1px solid rgba(255,255,255,.28);border-radius:13px;background:rgba(5,30,61,.82);color:#fff;box-shadow:0 12px 28px rgba(3,20,45,.22);backdrop-filter:blur(10px);font:800 .72rem var(--font-display);letter-spacing:.02em;animation:otiFloatChip 4.5s ease-in-out infinite}
.oti-hero-float small{display:block;font:500 .58rem var(--font-body);opacity:.72;margin-top:2px}
.oti-hero-float--rdc{left:-18px;top:15%;animation-delay:-1.2s}.oti-hero-float--matadi{right:-20px;top:48%;animation-delay:-2.2s}.oti-hero-float--global{left:8%;bottom:-15px;animation-delay:-3.2s}
@keyframes otiGlow{to{transform:scale(1.12);opacity:.72}}@keyframes otiOrbit{to{transform:rotate(362deg)}}@keyframes otiOrbitReverse{to{transform:rotate(-365deg)}}@keyframes otiFloatChip{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

.oti-section-carousel{position:relative;min-height:470px}
.oti-section-carousel::after,.oti-presence-carousel::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(4,21,44,.02),transparent 55%,rgba(4,21,44,.25));z-index:1}
.oti-section-carousel .img-slide img,.oti-presence-carousel .img-slide img{transition:transform 5s cubic-bezier(.2,.7,.2,1);transform:scale(1.04)}
.oti-section-carousel .img-slide.is-active img,.oti-presence-carousel .img-slide.is-active img{transform:scale(1.12)}
.oti-section-carousel .img-slide-caption,.oti-presence-carousel .img-slide-caption{padding:34px 28px 28px}
.oti-section-carousel .img-slide-caption strong,.oti-presence-carousel .img-slide-caption strong{font-size:1.15rem}
.oti-section-carousel .img-slide-caption p,.oti-presence-carousel .img-slide-caption p{max-width:520px}
.oti-presence-image{min-height:470px}.oti-presence-caption{z-index:5}.oti-presence-carousel{position:absolute;inset:0;border-radius:inherit;overflow:hidden}.oti-presence-carousel .img-dots{bottom:18px}

.oti-value-card,.oti-service-card{transform:perspective(900px) rotateX(var(--card-y,0deg)) rotateY(var(--card-x,0deg));transition:transform .25s ease,box-shadow .35s ease,border-color .35s ease}
.oti-value-card::before,.oti-service-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.8),transparent 32%);opacity:.55}
.oti-value-card:hover{box-shadow:0 24px 50px rgba(9,40,75,.14);border-color:rgba(199,90,10,.25)}
.oti-value-card h3{transition:transform .3s ease;color:var(--ink-navy)}.oti-value-card:hover h3{transform:translateX(4px)}
.oti-service-card .oti-service-icon{transition:transform .45s cubic-bezier(.2,.8,.2,1),background .3s ease}.oti-service-card:hover .oti-service-icon{transform:translateY(-4px) rotate(-6deg) scale(1.08);background:rgba(199,90,10,.12)}
.oti-service-card>a{transition:letter-spacing .25s ease}.oti-service-card:hover>a{letter-spacing:.02em}
.oti-service-card:nth-child(3n+2) .oti-service-icon{background:rgba(44,138,120,.1);color:#267766}.oti-service-card:nth-child(3n) .oti-service-icon{background:rgba(213,43,53,.1);color:#b3232c}

.partner-card{position:relative;overflow:hidden;border-color:color-mix(in srgb,var(--partner-color) 22%, var(--line));animation:partnerBob 5s ease-in-out infinite}
.partner-card:nth-child(2n){animation-delay:-1.5s}.partner-card:nth-child(3n){animation-delay:-3s}
.partner-card::before{content:"";position:absolute;inset:auto -25px -35px;width:100px;height:100px;border-radius:50%;background:var(--partner-color);opacity:.09;filter:blur(4px);transition:transform .4s ease}
.partner-card:hover::before{transform:scale(1.8)}
.partner-card-mark{background:linear-gradient(135deg,color-mix(in srgb,var(--partner-color) 16%,#fff),rgba(255,255,255,.92));color:var(--partner-color);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--partner-color) 15%,transparent)}
.partner-card-name{position:relative}.partner-card-type{position:relative}
@keyframes partnerBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

.oti-map-card{position:relative;z-index:1;margin-top:4px;padding:12px;border-radius:18px;background:rgba(245,249,252,.9);border:1px solid var(--line);box-shadow:0 14px 34px -24px rgba(18,63,115,.32)}
.oti-map-head{display:flex;justify-content:space-between;align-items:center;padding:4px 5px 10px}.oti-map-head>div{display:flex;flex-direction:column;gap:2px}.oti-map-kicker{font:800 .58rem var(--font-body);letter-spacing:.13em;color:var(--accent-orange)}.oti-map-head strong{font:800 .82rem var(--font-display);color:var(--ink-navy)}
.oti-map-action{width:30px;height:30px;border:0;border-radius:9px;background:var(--white);color:var(--primary);cursor:pointer;box-shadow:0 5px 14px rgba(18,63,115,.12);font-size:1.05rem;transition:transform .25s ease}.oti-map-action:hover{transform:rotate(-12deg) scale(1.05)}
.oti-map{height:190px;border-radius:13px;overflow:hidden;background:#dfe9ef}.oti-map-note{margin:8px 4px 1px;font-size:.68rem;color:var(--muted)}
.oti-map-pin{background:transparent!important;border:0!important}.oti-map-pin span{display:block;width:18px;height:18px;margin:4px;border-radius:50%;background:var(--accent-orange);border:3px solid #fff;box-shadow:0 0 0 7px rgba(199,90,10,.16),0 5px 15px rgba(18,63,115,.3);animation:mapPulse 1.8s ease-out infinite}@keyframes mapPulse{0%{box-shadow:0 0 0 0 rgba(199,90,10,.35),0 5px 15px rgba(18,63,115,.3)}70%{box-shadow:0 0 0 12px rgba(199,90,10,0),0 5px 15px rgba(18,63,115,.3)}100%{box-shadow:0 0 0 0 rgba(199,90,10,0),0 5px 15px rgba(18,63,115,.3)}}

@media (prefers-reduced-motion:reduce){.oti-hero-center-card,.oti-hero-glow,.oti-hero-orbit,.oti-hero-float,.partner-card{animation:none!important;transition:none!important}.oti-value-card,.oti-service-card{transform:none!important}.oti-section-carousel .img-slide img,.oti-presence-carousel .img-slide img{transition:none}}
@media (max-width:700px){.oti-hero-float{font-size:.62rem;padding:7px 9px}.oti-hero-float--rdc{left:-5px}.oti-hero-float--matadi{right:-5px}.oti-hero-float--global{left:4%;bottom:-10px}.oti-section-carousel{min-height:320px}.oti-presence-image{min-height:340px}.oti-map{height:180px}}

/* ================================================================
   OTI — CHARTE DG : BLEU · BLEU CIEL · ORANGE
   Dernière couche visuelle : cohérence chromatique + mouvement maîtrisé.
   ================================================================ */
:root {
  --primary-light: #4FA9DC;
  --accent-magenta: #4FA9DC;
  --accent-red: #C75A0A;
  --accent-green: #4FA9DC;
  --accent-blue: #123F73;
  --accent-orange: #C75A0A;
  --primary-glow: rgba(79,169,220,.22);
}

/* Titres : signature OTI plus nette */
.text-accent { color: var(--primary-light); }
.text-brass { color: var(--primary-dark); }
.hero h1 span.text-accent { background: linear-gradient(90deg,var(--primary-light),#8BD2F4,var(--accent-orange)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Carrousels : effet vivant sans distraire */
.oti-section-carousel, .oti-presence-carousel { isolation:isolate; }
.oti-section-carousel::before, .oti-presence-carousel::before {
  content:""; position:absolute; z-index:2; pointer-events:none; inset:0;
  background:linear-gradient(110deg,rgba(18,63,115,.08),transparent 38%,rgba(199,90,10,.08));
  mix-blend-mode:screen; animation:otiImageLight 8s ease-in-out infinite alternate;
}
.oti-section-carousel .img-slide.is-active::after, .oti-presence-carousel .img-slide.is-active::after {
  content:""; position:absolute; z-index:2; left:-30%; top:0; width:24%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-16deg); animation:otiSweep 6.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes otiImageLight { from{opacity:.35;transform:translateX(-1%)} to{opacity:.85;transform:translateX(1%)} }
@keyframes otiSweep { 0%,45%{left:-30%;opacity:0} 55%{opacity:1} 85%,100%{left:120%;opacity:0} }

/* Cartes : micro-lift, lueur et ligne d'accent */
.oti-value-card, .oti-service-card { overflow:hidden; }
.oti-value-card::after, .oti-service-card::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,var(--primary),var(--primary-light),var(--accent-orange));
  transform:scaleX(.18); transform-origin:left; transition:transform .45s var(--ease);
}
.oti-value-card:hover::after, .oti-service-card:hover::after { transform:scaleX(1); }
.oti-service-card:nth-child(3n+2) .oti-service-icon { background:rgba(79,169,220,.12); color:#2B78B5; }
.oti-service-card:nth-child(3n) .oti-service-icon { background:rgba(199,90,10,.12); color:#D66F14; }

/* Partenaires : lettres colorées, présence plus organique */
.partner-card { border-color:color-mix(in srgb,var(--partner-color) 28%,var(--line)); }
.partner-card-mark { min-width:64px; min-height:64px; display:grid; place-items:center; font-weight:900; letter-spacing:.03em; }
.partner-card:hover { transform:translateY(-7px) scale(1.015); box-shadow:0 22px 42px rgba(18,63,115,.14); }
.partner-card:hover .partner-card-mark { transform:rotate(-3deg) scale(1.06); }
.partner-card-mark { transition:transform .35s var(--ease),box-shadow .35s ease; }
.partners-track { will-change:transform; }

/* Hero central : point focal premium */
.oti-hero-center-card { box-shadow:0 30px 70px rgba(6,34,66,.25),0 0 0 1px rgba(255,255,255,.16); }
.oti-hero-center-card::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:3;
  border:1px solid rgba(255,255,255,.18); background:linear-gradient(135deg,rgba(79,169,220,.08),transparent 42%,rgba(199,90,10,.12));
  animation:otiHeroSheen 5s ease-in-out infinite alternate;
}
.oti-hero-badge strong { color:var(--accent-orange); }
.oti-hero-float--rdc { border-color:rgba(79,169,220,.45); }
.oti-hero-float--matadi { border-color:rgba(199,90,10,.45); }
@keyframes otiHeroSheen { from{opacity:.45} to{opacity:1} }

/* Statistiques : accent bleu ciel / orange */
.oti-stats-grid .stat:nth-child(odd) .stat-number { color:var(--primary); }
.oti-stats-grid .stat:nth-child(even) .stat-number { color:var(--accent-orange); }
.oti-network-note { border-left-color:var(--accent-orange); box-shadow:0 10px 30px rgba(18,63,115,.05); }

/* Mini-carte : objet JS plus vivant */
.oti-map-card { border-top:3px solid var(--primary-light); }
.oti-map-action { color:var(--primary); }
.oti-map-pin span { background:var(--accent-orange); }

@media (prefers-reduced-motion:reduce){
  .oti-section-carousel::before,.oti-section-carousel .img-slide.is-active::after,.oti-presence-carousel::before,.oti-presence-carousel .img-slide.is-active::after,.oti-hero-center-card::after{animation:none!important}
}

/* Mouvement continu — discret et institutionnel */
.oti-service-card .oti-service-icon { animation:otiIconFloat 4.8s ease-in-out infinite; }
.oti-service-card:nth-child(2) .oti-service-icon { animation-delay:-.8s; }
.oti-service-card:nth-child(3) .oti-service-icon { animation-delay:-1.6s; }
.oti-service-card:nth-child(4) .oti-service-icon { animation-delay:-2.4s; }
.oti-service-card:nth-child(5) .oti-service-icon { animation-delay:-3.2s; }
.oti-service-card:nth-child(6) .oti-service-icon { animation-delay:-4s; }
.oti-service-card:nth-child(7) .oti-service-icon { animation-delay:-1.2s; }
@keyframes otiIconFloat { 0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)} }
.oti-value-card { animation:otiCardBreath 6s ease-in-out infinite; }
.oti-value-card:nth-child(2){animation-delay:-1.5s}.oti-value-card:nth-child(3){animation-delay:-3s}.oti-value-card:nth-child(4){animation-delay:-4.5s}
@keyframes otiCardBreath { 0%,100%{box-shadow:0 12px 30px rgba(9,40,75,.07)}50%{box-shadow:0 17px 36px rgba(18,63,115,.11)} }
.oti-presence-copy::before { content:""; display:block; width:44px; height:3px; border-radius:4px; margin-bottom:18px; background:linear-gradient(90deg,var(--primary),var(--primary-light),var(--accent-orange)); animation:otiLinePulse 3.5s ease-in-out infinite; }
@keyframes otiLinePulse { 0%,100%{width:44px;opacity:.65}50%{width:90px;opacity:1} }
@media (prefers-reduced-motion:reduce){.oti-service-card .oti-service-icon,.oti-value-card,.oti-presence-copy::before{animation:none!important}}


/* ================================================================
   OTI — CORRECTIFS FINAUX / COHÉRENCE DG
   ================================================================ */
:root {
  --accent-magenta: var(--primary-light);
  --accent-red: var(--accent-orange);
  --accent-green: var(--primary-light);
}

/* Hero : le texte reste lisible sur toutes les images de fond. */
.oti-hero .hero-lede {
  color: rgba(255,255,255,.94);
  text-shadow: 0 2px 12px rgba(3,22,45,.55);
  background: rgba(5,31,62,.34);
  border-left: 3px solid var(--accent-orange);
  border-radius: 0 12px 12px 0;
  padding: 10px 14px;
  max-width: 650px;
  backdrop-filter: blur(3px);
}

/* Plus aucune accentuation hors charte OTI dans les blocs visibles. */
.oti-ambition .eyebrow--magenta,
.oti-capital-copy .eyebrow--magenta { color: var(--primary-light); }
.oti-ambition .eyebrow-dot--magenta,
.oti-capital-copy .eyebrow-dot--magenta { background: var(--accent-orange); box-shadow: 0 0 0 4px rgba(199,90,10,.16); }
.contact-panel::before { background: radial-gradient(ellipse at 85% 0%, rgba(79,169,220,.09), transparent 55%), radial-gradient(ellipse at 5% 100%, rgba(199,90,10,.08), transparent 55%); }
.contact-highlight-dot { background: var(--primary-light); box-shadow: 0 0 0 3px rgba(79,169,220,.14); }

/* Coordonnées : aucune collision de texte, même avec les adresses longues. */
.contact-info-row { align-items: flex-start; min-width: 0; }
.contact-info-row > div { min-width: 0; flex: 1 1 auto; }
.contact-info-row strong,
.contact-info-row span { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.contact-info-row span { line-height: 1.45; }
.contact-info-card { min-width: 0; }

/* Mini-carte OTI autonome, sans dépendance aux tuiles externes. */
.oti-map { position: relative; height: 205px; border-radius: 14px; overflow: hidden; background: #e6f0f6; cursor: pointer; isolation: isolate; }
.oti-map-svg { display: block; width: 100%; height: 100%; }
.oti-map-road { fill: none; stroke: rgba(18,63,115,.42); stroke-width: 5; stroke-linecap: round; }
.oti-map-road--secondary { stroke: rgba(18,63,115,.17); stroke-width: 3; }
.oti-map-labels text { fill: rgba(18,63,115,.68); font: 800 13px var(--font-display); letter-spacing: .11em; }
.oti-map-marker { cursor: pointer; transform-origin: 401px 132px; }
.oti-map-marker-pulse { fill: rgba(199,90,10,.13); stroke: rgba(199,90,10,.34); stroke-width: 2; animation: otiMapPulse 2.1s ease-out infinite; }
.oti-map-marker-ring { fill: #fff; stroke: var(--accent-orange); stroke-width: 4; }
.oti-map-marker-core { fill: var(--primary); }
.oti-map-marker.is-selected .oti-map-marker-ring { stroke: var(--primary-light); }
.oti-map-marker.is-selected .oti-map-marker-core { fill: var(--accent-orange); }
.oti-map-overlay { position: absolute; left: 13px; bottom: 13px; display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 11px; background: rgba(255,255,255,.91); border: 1px solid rgba(18,63,115,.1); box-shadow: 0 10px 22px rgba(18,63,115,.12); pointer-events: none; }
.oti-map-overlay span { font: 900 .62rem var(--font-display); letter-spacing: .12em; color: var(--accent-orange); }
.oti-map-overlay strong { color: var(--ink-navy); font: 800 .78rem var(--font-display); }
.oti-map-overlay small { color: var(--muted); font-size: .64rem; }
.oti-map.is-focused .oti-map-marker-ring { animation: otiMapFocusRing .65s var(--ease) both; }
.oti-map-note { line-height: 1.45; }
@keyframes otiMapPulse { 0%{transform:scale(.7);opacity:.8} 70%{transform:scale(1.65);opacity:0} 100%{transform:scale(1.65);opacity:0} }
@keyframes otiMapFocusRing { 0%{transform:scale(1)} 45%{transform:scale(1.25)} 100%{transform:scale(1)} }

/* ============================================================
   OTI ASSISTANT — vidéo d'accueil + chat d'orientation
   ============================================================ */
.oti-assistant-widget{position:fixed;right:24px;bottom:24px;z-index:1200;font-family:var(--font-body,Inter,sans-serif)}
.oti-assistant-launcher{display:flex;align-items:center;gap:10px;min-width:202px;padding:9px 12px 9px 9px;border:1px solid rgba(255,255,255,.75);border-radius:18px;background:rgba(255,255,255,.96);color:var(--ink-navy,#142b47);box-shadow:0 16px 38px rgba(18,63,115,.2);cursor:pointer;transition:transform .25s var(--ease,ease),box-shadow .25s ease}
.oti-assistant-launcher:hover{transform:translateY(-3px);box-shadow:0 21px 42px rgba(18,63,115,.26)}
.oti-assistant-launcher-avatar,.oti-assistant-head-avatar{position:relative;display:block;overflow:hidden;flex:none;border-radius:13px;background:#dcecf7}
.oti-assistant-launcher-avatar{width:42px;height:42px}
.oti-assistant-launcher-avatar img,.oti-assistant-head-avatar img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 29%}
.oti-assistant-online{position:absolute;right:1px;bottom:1px;width:9px;height:9px;border:2px solid #fff;border-radius:50%;background:#2eb67d}
.oti-assistant-launcher-copy{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}
.oti-assistant-launcher-copy strong{font:800 .82rem var(--font-display,Manrope,sans-serif);color:var(--primary-dark,#0b2f5b)}
.oti-assistant-launcher-copy small{font-size:.68rem;color:#6c8499}
.oti-assistant-launcher-arrow{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;background:var(--accent-orange,#C75A0A);color:#fff;font-size:1rem}
.oti-assistant-panel{position:absolute;right:0;bottom:70px;width:min(370px,calc(100vw - 32px));overflow:hidden;border:1px solid rgba(205,222,235,.95);border-radius:24px;background:#fbfdff;box-shadow:0 24px 70px rgba(11,47,91,.28);opacity:0;transform:translateY(12px) scale(.97);transform-origin:bottom right;transition:opacity .22s ease,transform .22s ease}
.oti-assistant-panel.is-open{opacity:1;transform:translateY(0) scale(1)}
.oti-assistant-head{display:flex;align-items:center;justify-content:space-between;padding:14px 15px;border-bottom:1px solid #e1ebf2;background:#fff}
.oti-assistant-agent{display:flex;align-items:center;gap:10px}
.oti-assistant-head-avatar{width:38px;height:38px;border-radius:12px}
.oti-assistant-agent strong{display:block;font:800 .84rem var(--font-display,Manrope,sans-serif);color:var(--primary-dark,#0b2f5b)}
.oti-assistant-agent small{display:flex;align-items:center;gap:5px;margin-top:3px;color:#6f879a;font-size:.68rem}
.oti-assistant-status-dot{width:6px;height:6px;border-radius:50%;background:#2eb67d;box-shadow:0 0 0 3px #e2f6ed}
.oti-assistant-close{width:30px;height:30px;border:0;border-radius:9px;background:#f1f6fa;color:#55728b;font-size:1.25rem;line-height:1;cursor:pointer}
.oti-assistant-video-wrap{position:relative;background:#0a2e58}
.oti-assistant-video{display:block;width:100%;height:206px;object-fit:cover;object-position:center 28%;background:#0a2e58}
.oti-assistant-video-label{position:absolute;left:12px;bottom:12px;padding:5px 8px;border-radius:999px;background:rgba(8,40,76,.78);color:#fff;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase}
.oti-assistant-chat{display:flex;flex-direction:column;gap:8px;max-height:135px;overflow-y:auto;padding:13px 14px 5px}
.oti-assistant-message{width:fit-content;max-width:90%;padding:9px 11px;border-radius:13px 13px 13px 4px;background:#edf5fb;color:#294b67;font-size:.76rem;line-height:1.45}
.oti-assistant-message--user{align-self:flex-end;border-radius:13px 13px 4px 13px;background:var(--primary,#123f73);color:#fff}
.oti-assistant-quick-actions{display:flex;flex-wrap:wrap;gap:6px;padding:8px 14px}
.oti-assistant-quick-actions button{padding:7px 9px;border:1px solid #cfe1ee;border-radius:999px;background:#fff;color:var(--primary,#123f73);font:600 .67rem var(--font-body,Inter,sans-serif);cursor:pointer}
.oti-assistant-quick-actions button:hover{border-color:var(--primary-light,#4fa9dc);background:#eef7fc}
.oti-assistant-form{display:flex;gap:7px;margin:0 14px;padding:6px 6px 6px 11px;border:1px solid #d3e3ed;border-radius:13px;background:#fff}
.oti-assistant-form input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--ink-navy,#142b47);font:400 .76rem var(--font-body,Inter,sans-serif)}
.oti-assistant-form input::placeholder{color:#9aabba}
.oti-assistant-form button{width:30px;height:30px;border:0;border-radius:9px;background:var(--accent-orange,#C75A0A);color:#fff;cursor:pointer}
.oti-assistant-disclaimer{margin:8px 15px 12px;color:#93a5b3;font-size:.6rem;line-height:1.35}
.oti-assistant-widget .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden].oti-assistant-panel{display:block;visibility:hidden;pointer-events:none}
@media (max-width:600px){
  .oti-assistant-widget{right:12px;bottom:12px}
  .oti-assistant-panel{bottom:66px}
  .oti-assistant-launcher{min-width:0;padding:8px}
  .oti-assistant-launcher-copy{display:none}
  .oti-assistant-launcher-arrow{display:none}
}
@media (prefers-reduced-motion:reduce){
  .oti-assistant-launcher,.oti-assistant-panel{transition:none}
}

/* Mobile : priorité au confort de lecture et suppression des débordements. */
@media (max-width:760px) {
  .oti-hero .hero-lede { max-width: calc(100vw - 36px); padding: 9px 11px; font-size: .9rem; }
  .oti-map { height: 190px; }
  .oti-map-labels text { font-size: 11px; }
  .oti-map-overlay { left: 9px; bottom: 9px; max-width: 72%; }
  .oti-map-overlay strong { font-size: .72rem; }
  .oti-map-overlay small { font-size: .59rem; }
  .contact-info-row { gap: 9px; }
  .contact-info-icon { width: 30px; height: 30px; flex: 0 0 30px; }
  .contact-info-row span { font-size: .79rem; }
}
@media (max-width:420px) {
  .oti-map { height: 175px; }
  .oti-map-overlay { max-width: 78%; }
  .contact-panel { padding: 19px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .oti-map-marker-pulse, .oti-map.is-focused .oti-map-marker-ring { animation: none !important; }
}

/* OTI final contact cleanup: coordinates are intentionally kept in the footer only. */
.contact-info-card { display:none !important; }
.footer-col .footer-address, .footer-col .footer-location { display:block; line-height:1.55; overflow-wrap:anywhere; }


/* ================================================================
   OTI — NOS VALEURS / COMPOSITION CENTRALE
   ================================================================ */
.oti-values-orbit{
  position:relative;
  min-height:480px;
  margin-top:48px;
  padding:0;
  isolation:isolate;
  overflow:hidden;
  border-radius:30px;
  background:linear-gradient(135deg,#f7fbfe 0%,#eef5fa 48%,#f9fbfd 100%);
  box-shadow:inset 0 0 0 1px rgba(18,63,115,.06)
}
.oti-values-backdrop{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.oti-values-backdrop:before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.98) 0 19%,rgba(255,255,255,.55) 31%,rgba(255,255,255,0) 62%)
}
.oti-values-backdrop:after{
  content:"";position:absolute;inset:0;opacity:.25;
  background-image:radial-gradient(circle,rgba(18,63,115,.18) 1px,transparent 1.5px);
  background-size:18px 18px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 18%,black 82%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,black 18%,black 82%,transparent 100%)
}
.oti-backdrop-glow{position:absolute;width:42%;height:70%;border-radius:50%;filter:blur(45px);opacity:.16}
.oti-backdrop-glow--left{left:-14%;top:22%;background:#2d9ad6}
.oti-backdrop-glow--right{right:-14%;top:18%;background:#C75A0A}

.oti-values-branches{
  position:absolute;inset:0;width:100%;height:100%;z-index:2;
  pointer-events:none;overflow:visible
}
.oti-branch{
  fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  opacity:.9;filter:drop-shadow(0 3px 5px rgba(18,63,115,.12));
  vector-effect:non-scaling-stroke
}
.oti-branch--tl{stroke:#123f73}
.oti-branch--tr{stroke:#C75A0A}
.oti-branch--bl{stroke:#d9291c}
.oti-branch--br{stroke:#2c3550}

/* Les marker-end (pointes de flèche) sont hors du tracé stroke-dasharray :
   ils ne sont donc jamais masqués par l'animation du trait. On les cache
   nous-mêmes et on les révèle en JS uniquement quand la ligne atteint sa carte. */
.oti-arrowhead{opacity:0;transition:opacity .3s ease}

.oti-values-logo{
  position:absolute;left:50%;top:50%;z-index:4;
  width:170px;height:170px;
  transform:translate(-50%,-50%) scale(.72);
  opacity:0;
  border-radius:50%;
  background:rgba(255,255,255,.98);
  border:1px solid rgba(18,63,115,.09);
  box-shadow:0 25px 60px rgba(10,42,78,.18),0 0 0 10px rgba(255,255,255,.38);
  display:flex;align-items:center;justify-content:center;
  padding:16px;
  transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)
}
.oti-values-logo:after{
  content:"";position:absolute;inset:9px;border:1px solid rgba(199,90,10,.25);
  border-radius:50%;pointer-events:none
}
.oti-values-logo img{
  width:100%;height:auto;max-width:145px;object-fit:contain;
  display:block;position:relative;z-index:1
}
.oti-values-orbit.is-inview .oti-values-logo{
  opacity:1;transform:translate(-50%,-50%) scale(1)
}

/* ── Mouvement continu après l'animation d'entrée (boucle infinie) ── */
@keyframes otiLogoFloat{
  0%,100%{transform:translateY(0) scale(1) rotate(0deg)}
  25%{transform:translateY(-7px) scale(1.025) rotate(-0.6deg)}
  50%{transform:translateY(-12px) scale(1.045) rotate(0.7deg)}
  75%{transform:translateY(-6px) scale(1.025) rotate(-0.4deg)}
}
@keyframes otiLogoGlow{
  0%,100%{box-shadow:0 25px 60px rgba(10,42,78,.18),0 0 0 10px rgba(255,255,255,.38)}
  50%{box-shadow:0 34px 78px rgba(10,42,78,.28),0 0 0 15px rgba(255,255,255,.46)}
}
@keyframes otiBranchPulse{
  0%,100%{opacity:.82}
  50%{opacity:.97}
}
.oti-values-orbit.is-idle .oti-values-logo{
  animation:otiLogoGlow 7s ease-in-out infinite
}
.oti-values-orbit.is-idle .oti-values-logo img{
  animation:otiLogoFloat 7s ease-in-out infinite
}
.oti-values-orbit.is-idle .oti-branch{
  animation:otiBranchPulse 6.5s ease-in-out infinite
}
.oti-values-orbit.is-idle .oti-branch--tr{animation-delay:.5s}
.oti-values-orbit.is-idle .oti-branch--bl{animation-delay:1s}
.oti-values-orbit.is-idle .oti-branch--br{animation-delay:1.5s}

.oti-values-orbit .oti-values-grid{
  position:absolute;inset:0;z-index:3;display:block;margin:0
}
.oti-values-orbit .oti-value-anim{
  position:absolute;
  width:calc(50% - 270px);
  max-width:320px;min-width:250px;
  opacity:0;
  transform:translateY(20px) scale(.97);
  transition:opacity .65s ease,transform .65s cubic-bezier(.2,.8,.2,1)
}
.oti-value-anim--tl{left:42px;top:20px}
.oti-value-anim--tr{right:42px;top:20px}
.oti-value-anim--bl{left:42px;bottom:20px}
.oti-value-anim--br{right:42px;bottom:20px}
.oti-values-orbit .oti-value-anim.is-active{opacity:1;transform:none}

.oti-values-orbit .oti-value-card{
  min-height:172px;
  padding:20px 22px 20px 78px;
  border-radius:24px;
  background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(239,245,250,.9));
  border:1px solid rgba(18,63,115,.1);
  box-shadow:0 18px 42px rgba(10,42,78,.1);
  backdrop-filter:blur(8px);
  position:relative;overflow:hidden
}
.oti-values-orbit .oti-value-card:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(to bottom,var(--primary),var(--primary-light),var(--accent-orange));
  opacity:.9
}
.oti-values-orbit .oti-value-card:after{
  right:-28px;bottom:-38px;width:110px;height:110px;background:rgba(79,169,220,.07)
}
.oti-value-icon{
  position:absolute;left:20px;top:21px;width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;box-shadow:0 10px 20px rgba(10,42,78,.12)
}
.oti-value-icon svg{
  width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round
}
.oti-value-icon--blue{color:#fff;background:#123f73}
.oti-value-icon--orange{color:#fff;background:#C75A0A}
.oti-value-icon--red{color:#fff;background:#d9291c}
.oti-value-icon--navy{color:#fff;background:#2c3550}
.oti-values-orbit .oti-value-number{
  display:block;font-size:.72rem;color:var(--accent-orange);font-weight:800;
  letter-spacing:.12em;margin-bottom:5px
}
.oti-values-orbit .oti-value-card h3{
  margin:0 0 6px;font-size:clamp(1.05rem,1.45vw,1.28rem);color:var(--primary-dark)
}
.oti-values-orbit .oti-value-card p{
  margin:0;color:var(--muted);line-height:1.5;font-size:.88rem
}

@media (max-width:1100px){
  .oti-values-orbit{min-height:700px}
  .oti-values-orbit .oti-value-anim{width:calc(50% - 250px);max-width:300px;min-width:240px}
  .oti-value-anim--tl,.oti-value-anim--bl{left:22px}
  .oti-value-anim--tr,.oti-value-anim--br{right:22px}
  .oti-values-logo{width:220px;height:220px;padding:22px}
  .oti-values-logo img{max-width:195px}
}
@media (max-width:800px){
  .oti-values-orbit{
    min-height:0;padding:24px 18px 30px;border-radius:24px;overflow:visible
  }
  .oti-values-backdrop:after{opacity:.14}
  .oti-values-branches{display:none}
  .oti-values-logo{
    position:relative;left:auto;top:auto;width:190px;height:190px;padding:20px;
    margin:0 auto 30px;transform:scale(.82)
  }
  .oti-values-orbit.is-inview .oti-values-logo{transform:scale(1)}
  .oti-values-orbit .oti-values-grid{
    position:relative;inset:auto;display:grid;grid-template-columns:1fr;gap:16px
  }
  .oti-values-orbit .oti-value-anim{
    position:relative;left:auto;right:auto;top:auto;bottom:auto;
    width:100%;min-width:0;max-width:none;transform:translateY(18px) scale(.98)
  }
  .oti-values-orbit .oti-value-card{
    min-height:0;padding:25px 24px 24px 88px
  }
  .oti-value-icon{left:22px;top:24px}
  .oti-values-orbit .oti-value-card h3{font-size:1.25rem}
}
@media (prefers-reduced-motion:reduce){
  .oti-values-logo,.oti-values-orbit .oti-value-anim{
    opacity:1!important;transform:none!important;transition:none!important
  }
  .oti-branch{stroke-dashoffset:0!important;transition:none!important}
  .oti-arrowhead{opacity:1!important;transition:none!important}
  .oti-values-logo,.oti-values-logo img,.oti-branch{animation:none!important}
}

/* ============================================================
   OTI — language picker / multilingual support
   ============================================================ */
.lang-picker{position:relative;display:inline-flex;align-items:center}
.lang-picker .lang-toggle{position:relative;z-index:2}
.lang-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:205px;padding:8px;border:1px solid rgba(205,222,235,.95);border-radius:16px;background:var(--surface,#fff);box-shadow:0 18px 45px rgba(11,47,91,.18);z-index:1000}
.lang-menu[hidden]{display:none}
.lang-menu button{width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border:0;border-radius:10px;background:transparent;color:var(--ink,#123F73);font:inherit;text-align:left;cursor:pointer}
.lang-menu button:hover,.lang-menu button:focus-visible{background:rgba(18,63,115,.08);outline:none}
.lang-menu button span{display:grid;place-items:center;min-width:29px;height:24px;border-radius:7px;background:rgba(18,63,115,.08);font-size:.7rem;font-weight:800}
.lang-menu button strong{font-size:.82rem;font-weight:700}
html[dir="rtl"] .lang-menu{right:auto;left:0}
html[dir="rtl"] .lang-menu button{text-align:right;flex-direction:row-reverse}
html[dir="rtl"] .main-nav{text-align:right}
html[dir="rtl"] .contact-form label,html[dir="rtl"] .oti-assistant-form{text-align:right}
@media (max-width:760px){.lang-menu{position:fixed;top:74px;right:14px;left:auto;width:min(205px,calc(100vw - 28px))}html[dir="rtl"] .lang-menu{right:auto;left:14px}}


/* ── Catalogue OTI ── */
.oti-catalogue{background:linear-gradient(180deg,var(--paper),var(--paper-dim));}
.catalogue-actions-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:980px;margin:0 auto;}
.catalogue-action-card{display:flex;align-items:center;gap:20px;padding:28px;border:1px solid rgba(18,63,115,.11);border-radius:22px;background:rgba(255,255,255,.9);box-shadow:0 16px 42px rgba(18,63,115,.08);}
.catalogue-action-icon{width:52px;height:52px;flex:0 0 52px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:var(--primary-glow);color:var(--primary);font:800 1.7rem var(--font-display);}
.catalogue-action-icon--flip{background:rgba(199,90,10,.1);color:var(--accent-orange);}
.catalogue-action-card>div:nth-child(2){flex:1;}
.catalogue-action-kicker{display:block;font:800 .68rem var(--font-display);letter-spacing:.14em;color:var(--primary);margin-bottom:7px;}
.catalogue-action-card h3{margin:0 0 7px;font-size:1.08rem;color:var(--ink-navy);}
.catalogue-action-card p{margin:0;color:var(--muted);font-size:.84rem;line-height:1.55;}
.catalogue-action-card .btn{margin-left:auto;}
.catalogue-open-btn{flex-shrink:0;}
.catalogue-modal[hidden]{display:none;}
.catalogue-modal{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;padding:24px;}
.catalogue-modal-backdrop{position:absolute;inset:0;background:rgba(4,21,44,.72);backdrop-filter:blur(7px);}
.catalogue-modal-dialog{position:relative;width:min(980px,96vw);max-height:92vh;overflow:hidden;border-radius:24px;background:var(--paper);box-shadow:0 30px 90px rgba(0,0,0,.3);z-index:1;}
.catalogue-modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line);}
.catalogue-modal-head h2{margin:0;color:var(--ink-navy);font-size:1.35rem;}
.catalogue-modal-close{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink-navy);font-size:1.7rem;cursor:pointer;line-height:1;}
.flipbook-stage{display:flex;align-items:center;justify-content:center;gap:14px;padding:24px;background:linear-gradient(145deg,#edf4f9,#f8fafc);}
.flipbook{position:relative;width:min(640px,76vw);height:min(520px,62vh);perspective:1600px;}
.flip-page{position:absolute;inset:0;display:none;transform-origin:left center;}
.flip-page.is-current{display:block;animation:cataloguePageIn .38s ease both;}
.flip-page-inner{height:100%;box-sizing:border-box;padding:38px 42px;border-radius:8px 16px 16px 8px;background:#fff;box-shadow:8px 10px 30px rgba(18,63,115,.14);border-left:5px solid var(--primary);overflow:auto;}
.flip-page-inner h3{font-size:1.35rem;color:var(--ink-navy);margin:8px 0 10px;}
.flip-page-inner p{font-size:.9rem;line-height:1.6;color:var(--muted);margin:0 0 16px;}
.flip-page-inner img{width:100%;height:145px;object-fit:cover;border-radius:12px;margin-top:8px;}
.flip-page-number{position:absolute;right:22px;top:18px;font:800 .7rem var(--font-display);letter-spacing:.1em;color:var(--muted);} 
.flip-page-cover{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(145deg,#fff,#eef5fa);border-left:0;border-right:5px solid var(--primary);}
.flip-page-cover img{width:190px;height:auto;object-fit:contain;margin:0 0 25px;}
.flip-page-cover p{font:800 .7rem var(--font-display);letter-spacing:.18em;color:var(--accent-orange);margin:0 0 10px;}
.flip-page-cover h3{font-size:2rem;line-height:1.15;margin:0 0 16px;}
.flip-page-meta{font-size:.78rem;color:var(--muted);letter-spacing:.08em;}
.flipbook-nav{width:46px;height:46px;border:1px solid rgba(18,63,115,.14);border-radius:50%;background:#fff;color:var(--primary);font-size:2rem;cursor:pointer;box-shadow:0 8px 22px rgba(18,63,115,.1);flex-shrink:0;}
.flipbook-nav:disabled{opacity:.35;cursor:not-allowed;}
.flip-method{padding:12px 0;border-bottom:1px solid var(--line);}.flip-method strong{display:block;color:var(--ink-navy);font-size:.9rem;margin-bottom:4px;}.flip-method p{margin:0;font-size:.82rem;}
.flip-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0;}.flip-stats span{padding:12px;border-radius:12px;background:var(--paper-dim);text-align:center;font-size:.72rem;color:var(--muted);}.flip-stats b{display:block;font-size:1.35rem;color:var(--primary);}
.flip-page-contact{display:flex;flex-direction:column;justify-content:center;gap:12px;}.flip-page-contact strong{font-size:.88rem;color:var(--ink-navy);}.flip-page-contact .btn{align-self:flex-start;margin-top:8px;}
.catalogue-modal-foot{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;font-size:.78rem;color:var(--muted);border-top:1px solid var(--line);}.catalogue-modal-foot a{color:var(--primary);font-weight:800;text-decoration:none;}
@keyframes cataloguePageIn{from{opacity:0;transform:rotateY(-8deg) translateX(12px)}to{opacity:1;transform:none}}
@media(max-width:820px){.catalogue-actions-grid{grid-template-columns:1fr}.catalogue-action-card{align-items:flex-start;flex-wrap:wrap}.catalogue-action-card .btn{margin-left:72px}.flipbook{width:calc(100vw - 110px);height:min(500px,60vh)}.flip-page-inner{padding:30px 28px}.flipbook-nav{width:40px;height:40px}.catalogue-modal{padding:10px}.catalogue-modal-dialog{width:100%;max-height:96vh}}
@media(max-width:600px){.catalogue-action-card .btn{margin-left:0;width:100%;justify-content:center}.flipbook-stage{gap:5px;padding:14px 5px}.flipbook{width:calc(100vw - 74px);height:58vh}.flip-page-cover h3{font-size:1.5rem}.flip-page-inner img{height:105px}.catalogue-modal-head{padding:16px}.catalogue-modal-foot{padding:11px 16px}}

body.catalogue-modal-open{overflow:hidden;}


/* ============================================================
   NOTRE RÉSEAU — objet dynamique OTI
   Le schéma est volontairement construit en HTML/SVG + JS :
   aucun visuel composite statique n'est utilisé.
   ============================================================ */
.oti-network-visual{
  margin:clamp(52px,7vw,92px) auto 42px;
  padding:clamp(28px,4vw,48px);
  border:1px solid rgba(18,63,115,.11);
  border-radius:28px;
  background:
    radial-gradient(circle at 50% 50%, rgba(45,109,163,.08), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(237,240,245,.78));
  box-shadow:0 24px 70px rgba(26,39,68,.08);
  overflow:hidden;
}
.oti-network-visual-head{
  max-width:720px;
  margin:0 auto 10px;
  text-align:center;
}
.oti-network-visual-head h2{
  margin:10px 0 12px;
}
.oti-network-stage{
  position:relative;
  width:min(100%, 760px);
  height:clamp(390px,52vw,520px);
  margin:10px auto 0;
  isolation:isolate;
}
.oti-network-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  z-index:0;
}
.oti-network-path{
  fill:none;
  stroke:url(#otiNetworkLineGradient);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-dasharray:7 9;
  opacity:.72;
}
.oti-network-pulse{
  fill:#fff;
  stroke:#2D6DA3;
  stroke-width:2;
  filter:url(#otiNetworkGlow);
}
.oti-network-node{
  position:absolute;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  will-change:transform;
  user-select:none;
}
.oti-network-node--center{
  left:50%;
  top:50%;
  width:clamp(190px,28vw,240px);
  min-height:132px;
  padding:18px 20px 16px;
  transform:translate(-50%,-50%);
  border-radius:24px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(18,63,115,.18);
  box-shadow:0 18px 48px rgba(18,63,115,.16), 0 0 0 7px rgba(45,109,163,.04);
}
.oti-network-node--top,
.oti-network-node--bottom{
  left:50%;
  width:clamp(180px,27vw,220px);
  padding:13px 18px 15px;
  border-radius:20px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(18,63,115,.10);
  box-shadow:0 13px 35px rgba(26,39,68,.10);
}
.oti-network-node--top{ top:7%; }
.oti-network-node--bottom{ top:68%; }
.oti-network-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  background:#fff;
  border-radius:13px;
  overflow:hidden;
}
.oti-network-logo--oti{
  height:62px;
  padding:7px 12px;
}
.oti-network-logo--oti img{
  max-width:100%;
  max-height:50px;
  object-fit:contain;
}
.oti-network-logo--wca{
  height:82px;
  padding:4px 12px;
}
.oti-network-logo--wca img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  /* la capture fournie est utilisée comme source du logo, sans effet visuel supplémentaire */
}
.oti-network-logo--cargo{
  height:66px;
  padding:5px 14px;
}
.oti-network-logo--cargo img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.oti-network-node strong{
  margin-top:8px;
  font-size:.92rem;
  color:var(--ink-navy);
}
.oti-network-node--center > span{
  margin-top:7px;
  font-size:.7rem;
  color:var(--muted);
  letter-spacing:.04em;
}
.oti-network-orbit-label{
  margin-bottom:6px;
  font-size:.65rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--primary-light);
}
.oti-network-particle{
  position:absolute;
  z-index:1;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#2D6DA3;
  box-shadow:0 0 0 5px rgba(45,109,163,.08), 0 0 16px rgba(45,109,163,.35);
  pointer-events:none;
  will-change:transform;
}
.oti-network-particle--1{ left:23%; top:48%; }
.oti-network-particle--2{ left:72%; top:39%; background:#D52B35; }
.oti-network-particle--3{ left:36%; top:74%; }

@media (max-width:700px){
  .oti-network-visual{ padding:24px 14px; border-radius:22px; }
  .oti-network-stage{ height:430px; }
  .oti-network-node--top,
  .oti-network-node--bottom{ width:170px; }
  .oti-network-node--center{ width:188px; }
  .oti-network-logo--wca{ height:68px; }
  .oti-network-logo--cargo{ height:58px; }
  .oti-network-logo--oti{ height:54px; }
}

/* ================================================================
   OTI — NAVBAR REFINEMENT v2
   Objectif : navigation corporate, compacte et parfaitement alignée.
   ================================================================ */
.site-header {
  padding: 10px 0;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(18,63,115,.08);
}

.site-header.is-scrolled {
  padding: 7px 0;
  background: rgba(255,255,255,.97);
  border-color: rgba(18,63,115,.11);
  box-shadow: 0 10px 30px -18px rgba(18,63,115,.28);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 58px;
}

.brand {
  flex: 0 0 auto;
  line-height: 0;
}

.brand-logo {
  display: block;
  width: auto;
  height: 50px;
  max-width: 158px;
  object-fit: contain;
}

.main-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 1.8vw, 30px);
}

.main-nav a {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--ink-navy);
  font-size: .88rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.01em;
  position: relative;
  padding: 7px 0;
}

.main-nav a::after {
  bottom: 0;
  height: 2px;
  border-radius: 2px;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--primary);
}

.header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-actions .btn-icon {
  width: 40px;
  height: 40px;
  background: transparent;
  border-color: rgba(18,63,115,.16);
}

.header-actions .btn-icon:hover {
  transform: none;
  background: rgba(18,63,115,.06);
}

.header-actions > .btn-ghost {
  min-height: 42px;
  padding: 10px 22px;
  margin-left: 4px;
  border-color: rgba(18,63,115,.20);
  font-size: .88rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Sur les écrans intermédiaires, on garde les six liens sur une ligne
   et on retire uniquement le CTA redondant de la zone d'actions. */
@media (max-width: 1180px) and (min-width: 761px) {
  .header-inner { gap: 14px; }
  .brand-logo { height: 46px; max-width: 145px; }
  .main-nav { gap: clamp(11px, 1.25vw, 18px); }
  .main-nav a { font-size: .82rem; }
  .header-actions .btn-ghost { display: none; }
}

@media (max-width: 900px) and (min-width: 761px) {
  .header-inner { gap: 10px; }
  .brand-logo { height: 42px; max-width: 132px; }
  .main-nav { gap: 10px; }
  .main-nav a { font-size: .76rem; }
  .header-actions { gap: 5px; }
  .header-actions .btn-icon { width: 36px; height: 36px; }
}

[data-theme="dark"] .site-header {
  background: rgba(13,22,38,.94);
  border-color: rgba(196,211,232,.10);
}

[data-theme="dark"] .site-header.is-scrolled {
  background: rgba(13,22,38,.98);
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.55);
}

@media (max-width: 760px) {
  .site-header,
  .site-header.is-scrolled { padding: 8px 0; }
  .header-inner { min-height: 52px; }
  .brand-logo { height: 42px; max-width: 138px; }
}

@media (max-width: 480px) {
  .brand-logo { height: 38px; max-width: 128px; }
}


/* ================================================================
   OTI — Raffinements visuels v2
   ================================================================ */
.text-orange-strong{color:var(--accent-orange)!important;font-weight:800}

/* Hero : meilleure lisibilité sur les visuels */
.oti-hero .hero-copy h1{color:#fff;text-shadow:0 2px 18px rgba(4,21,44,.26)}
.oti-hero .hero-copy .hero-lede{color:rgba(255,255,255,.94);text-shadow:0 1px 10px rgba(4,21,44,.2)}
.oti-hero .hero-copy .eyebrow{color:rgba(255,255,255,.92)}
.oti-hero .hero-copy .text-accent{color:#fff;background:none;-webkit-text-fill-color:#fff}

/* Notre ambition : lecture verticale, paragraphe immédiatement sous le titre */
.oti-ambition{grid-template-columns:1fr;gap:12px;padding:28px 34px}
.oti-ambition h3{margin-top:8px}
.oti-ambition p{max-width:780px;color:rgba(255,255,255,.96);opacity:1}

/* Vision : objet central légèrement réduit et mouvement avec pauses */
.oti-values-orbit{min-height:450px}
.oti-values-logo{width:142px;height:142px;padding:13px}
.oti-values-logo img{max-width:120px}
@keyframes otiLogoFloat{
  0%,42%{transform:translateY(0) scale(1)}
  52%{transform:translateY(-5px) scale(1.012)}
  62%,100%{transform:translateY(0) scale(1)}
}
@keyframes otiLogoGlow{
  0%,42%{box-shadow:0 25px 60px rgba(10,42,78,.18),0 0 0 10px rgba(255,255,255,.38)}
  52%{box-shadow:0 28px 66px rgba(10,42,78,.22),0 0 0 13px rgba(255,255,255,.42)}
  62%,100%{box-shadow:0 25px 60px rgba(10,42,78,.18),0 0 0 10px rgba(255,255,255,.38)}
}
@keyframes otiBranchPulse{
  0%,42%,100%{opacity:.82}
  52%{opacity:1}
  62%{opacity:.82}
}
.oti-values-orbit.is-idle .oti-values-logo,
.oti-values-orbit.is-idle .oti-values-logo img,
.oti-values-orbit.is-idle .oti-branch{animation-duration:8s}

/* Services : survol orange franc, texte blanc */
.oti-service-card:hover{background:var(--accent-orange);border-color:var(--accent-orange);box-shadow:0 24px 48px rgba(125,55,5,.25)}
.oti-service-card:hover h3,.oti-service-card:hover p,.oti-service-card:hover li,.oti-service-card:hover>a,.oti-service-card:hover>a span{color:#fff}
.oti-service-card:hover .oti-service-index{color:rgba(255,255,255,.65)}
.oti-service-card:hover .oti-service-icon{background:rgba(255,255,255,.16)!important;color:#fff!important}
.oti-service-card:hover li:before{background:#fff}
.oti-service-card:hover>a{border-top-color:rgba(255,255,255,.25)}

/* Présence mondiale : chiffres orange foncé partout */
.oti-stats-grid .stat-number{color:var(--accent-orange)!important}

/* Catalogue : galerie à gauche + espace flipbook à droite */
.catalogue-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);gap:28px;margin-top:38px;align-items:stretch}
.catalogue-gallery{min-width:0}
.catalogue-gallery-track{position:relative;height:360px;border-radius:24px;overflow:hidden;background:#dfe8ef;box-shadow:0 20px 48px rgba(18,63,115,.14)}
.catalogue-gallery-slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transform:scale(1.025);transition:opacity .65s ease,transform 1.2s ease,visibility .65s ease}
.catalogue-gallery-slide.is-active{opacity:1;visibility:visible;transform:scale(1)}
.catalogue-gallery-slide img{width:100%;height:100%;object-fit:cover}
.catalogue-gallery-slide:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,21,44,.02) 35%,rgba(4,21,44,.76) 100%)}
.catalogue-gallery-slide figcaption{position:absolute;left:24px;right:24px;bottom:22px;z-index:2;color:#fff;font:600 1rem/1.45 var(--font-display);max-width:620px;text-shadow:0 2px 10px rgba(0,0,0,.3)}
.catalogue-gallery-controls{position:absolute;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:-58px;padding:0 14px;width:100%;z-index:3;pointer-events:none}
.catalogue-gallery-controls button{pointer-events:auto;width:38px;height:38px;border:1px solid rgba(255,255,255,.42);border-radius:50%;background:rgba(4,21,44,.45);backdrop-filter:blur(8px);color:#fff;font-size:1.55rem;line-height:1;cursor:pointer}
.catalogue-gallery-dots{display:flex;align-items:center;justify-content:center;gap:7px;pointer-events:auto}
.catalogue-gallery-dots button{width:7px;height:7px;padding:0;border:0;background:rgba(255,255,255,.55);box-shadow:none}
.catalogue-gallery-dots button.is-active{width:22px;border-radius:8px;background:var(--accent-orange)}
.catalogue-download-btn{margin-top:18px;padding:10px 18px;font-size:.84rem;width:max-content}
.catalogue-flipbook-placeholder{min-height:360px;border:1px solid rgba(18,63,115,.11);border-radius:24px;padding:34px;background:linear-gradient(145deg,#f6f9fb,#eaf1f6);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;box-shadow:0 16px 42px rgba(18,63,115,.08)}
.catalogue-placeholder-icon{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:rgba(199,90,10,.1);color:var(--accent-orange);font:800 1.6rem var(--font-display);margin-bottom:22px}
.catalogue-flipbook-placeholder h3{margin:0 0 10px;font-size:1.45rem}
.catalogue-flipbook-placeholder p{max-width:420px;line-height:1.65;margin:0 0 22px}
.catalogue-flipbook-placeholder .btn{padding:11px 19px;font-size:.85rem}
@media(max-width:900px){.catalogue-layout{grid-template-columns:1fr}.catalogue-gallery-track,.catalogue-flipbook-placeholder{min-height:320px;height:320px}.catalogue-flipbook-placeholder{height:auto}.oti-values-logo{width:130px;height:130px}.oti-values-logo img{max-width:110px}}
@media(max-width:700px){.oti-ambition{padding:24px}.catalogue-gallery-track{height:290px}.catalogue-download-btn{width:auto}.oti-values-orbit{min-height:0}.oti-values-logo{width:150px;height:150px}.oti-values-logo img{max-width:125px}}

/* ================================================================
   OTI — Présentation DG / finitions premium v3
   ================================================================ */

/* Accueil : restaurer la hiérarchie chromatique du titre */
.oti-hero .hero-copy h1 .text-accent{
  background:linear-gradient(90deg,var(--primary-light),#8BD2F4,var(--accent-orange));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
}

/* Notre ambition : tout le texte de la phrase explicative reste blanc */
.oti-ambition p,
.oti-ambition p strong,
.oti-ambition p span{color:#fff!important;opacity:1!important}

/* Vision : animation visible, avec de vraies pauses entre les mouvements */
@keyframes otiLogoFloatPause{
  0%,52%{transform:translateY(0) scale(1)}
  58%{transform:translateY(-7px) scale(1.018)}
  66%{transform:translateY(0) scale(1)}
  100%{transform:translateY(0) scale(1)}
}
@keyframes otiLogoGlowPause{
  0%,52%{box-shadow:0 25px 60px rgba(10,42,78,.18),0 0 0 10px rgba(255,255,255,.38)}
  58%{box-shadow:0 30px 72px rgba(10,42,78,.24),0 0 0 14px rgba(255,255,255,.44)}
  66%,100%{box-shadow:0 25px 60px rgba(10,42,78,.18),0 0 0 10px rgba(255,255,255,.38)}
}
@keyframes otiBranchPulsePause{
  0%,52%,100%{opacity:.78}
  58%{opacity:1}
  66%{opacity:.82}
}
.oti-values-orbit.is-idle .oti-values-logo{animation:otiLogoGlowPause 10s ease-in-out infinite}
.oti-values-orbit.is-idle .oti-values-logo img{animation:otiLogoFloatPause 10s ease-in-out infinite}
.oti-values-orbit.is-idle .oti-branch{animation:otiBranchPulsePause 10s ease-in-out infinite}
.oti-values-orbit.is-idle .oti-branch--tr{animation-delay:.35s}
.oti-values-orbit.is-idle .oti-branch--bl{animation-delay:.7s}
.oti-values-orbit.is-idle .oti-branch--br{animation-delay:1.05s}

/* Catalogue : composition plus compacte et plus institutionnelle */
.catalogue-layout{grid-template-columns:minmax(0,1.28fr) minmax(280px,.72fr);gap:24px;align-items:start}
.catalogue-gallery-track{height:330px;border-radius:22px}
.catalogue-flipbook-placeholder{
  min-height:0;
  height:330px;
  padding:26px 25px;
  border-radius:22px;
  justify-content:center;
  box-shadow:0 14px 34px rgba(18,63,115,.07)
}
.catalogue-placeholder-icon{width:46px;height:46px;border-radius:13px;margin-bottom:16px;font-size:1.35rem}
.catalogue-flipbook-placeholder h3{font-size:1.28rem;margin-bottom:8px}
.catalogue-flipbook-placeholder p{font-size:.82rem;line-height:1.55;margin-bottom:18px}
.catalogue-flipbook-placeholder .btn{padding:9px 15px;font-size:.78rem}
.catalogue-download-btn{padding:9px 16px;font-size:.8rem;margin-top:14px}
@media(max-width:900px){
  .catalogue-layout{grid-template-columns:1fr}
  .catalogue-gallery-track{height:320px}
  .catalogue-flipbook-placeholder{height:auto;min-height:250px}
}

/* Footer : logo sans pastille blanche */
.footer-logo-badge{background:transparent!important;border-radius:0!important;padding:0!important;box-shadow:none!important}
.footer-logo-badge img{height:42px!important;max-width:260px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.18))}
.site-footer .footer-brand{max-width:310px}

/* Carte réelle : Leaflet au lieu du faux SVG */
.oti-map{height:245px!important;position:relative;overflow:hidden;border-radius:14px;background:#e6f0f6;isolation:isolate}
.oti-leaflet-map{position:absolute;inset:0;z-index:1}
.oti-map-live-badge{position:absolute;left:12px;bottom:12px;z-index:600;display:flex;flex-direction:column;gap:2px;padding:9px 12px;border-radius:11px;background:rgba(255,255,255,.94);border:1px solid rgba(18,63,115,.1);box-shadow:0 10px 22px rgba(18,63,115,.14);pointer-events:none}
.oti-map-live-badge strong{font:800 .75rem var(--font-display);color:var(--ink-navy)}
.oti-map-live-badge small{font-size:.62rem;color:var(--muted)}
.oti-map-live-dot{width:7px;height:7px;border-radius:50%;background:#2c9b68;box-shadow:0 0 0 4px rgba(44,155,104,.13);margin-bottom:3px;animation:otiLocationPulse 2s ease-out infinite}
@keyframes otiLocationPulse{0%,55%{box-shadow:0 0 0 4px rgba(44,155,104,.13)}70%{box-shadow:0 0 0 9px rgba(44,155,104,0)}100%{box-shadow:0 0 0 4px rgba(44,155,104,0)}}
.oti-map-footer{display:flex;align-items:center;justify-content:space-between;gap:12px}
.oti-map-footer .oti-map-note{margin:8px 4px 1px;font-size:.67rem;line-height:1.45;flex:1}
.oti-map-directions{font:800 .68rem var(--font-display);color:var(--primary);text-decoration:none;white-space:nowrap}
.oti-map-directions:hover{color:var(--accent-orange)}
.leaflet-control-zoom{border:0!important;box-shadow:0 8px 18px rgba(18,63,115,.14)!important}
.leaflet-control-zoom a{color:var(--primary)!important;border:0!important}
.oti-leaflet-pin{width:22px;height:22px;border-radius:50% 50% 50% 0;background:var(--accent-orange);border:3px solid #fff;box-shadow:0 5px 15px rgba(18,63,115,.3);transform:rotate(-45deg)}
.oti-leaflet-pin span{display:block;width:6px;height:6px;margin:5px;border-radius:50%;background:#fff}

/* Formulaire : état d'envoi professionnel */
.form-submit:disabled{opacity:.7;cursor:wait;transform:none!important}
.form-note{min-height:20px}
.form-note.is-success{color:#23734b!important;font-weight:700}
.form-note.is-error{color:#b42318!important;font-weight:700}

@media(max-width:700px){
  .oti-map{height:220px!important}
  .oti-map-footer{align-items:flex-start;flex-direction:column;gap:4px}
}


/* ================================================================
   OTI — Vision : composition compacte + mouvement plus perceptible
   ================================================================ */
.oti-values-orbit .oti-value-anim{
  width:clamp(240px, 25%, 305px);
  min-width:0;
  max-width:305px;
}
.oti-values-orbit .oti-value-card{
  min-height:158px;
  padding:18px 20px 18px 70px;
  border-radius:20px;
}
.oti-values-orbit .oti-value-card h3{font-size:1.12rem;margin-bottom:5px}
.oti-values-orbit .oti-value-card p{font-size:.84rem;line-height:1.45}
.oti-values-orbit .oti-value-icon{left:17px;top:18px;width:40px;height:40px;border-radius:12px}
.oti-values-orbit .oti-value-icon svg{width:21px;height:21px}

/* Les flèches arrivent avec leurs cartes : aucun élément ne reste figé avant elles. */
.oti-arrowhead{opacity:0;transition:opacity .55s cubic-bezier(.2,.8,.2,1)}

/* Mouvement central plus lisible : montée, légère rotation, respiration, puis pause. */
@keyframes otiLogoFloatPresentation{
  0%,48%{transform:translateY(0) scale(1) rotate(0deg)}
  56%{transform:translateY(-10px) scale(1.035) rotate(-.8deg)}
  64%{transform:translateY(-15px) scale(1.055) rotate(.8deg)}
  72%{transform:translateY(0) scale(1) rotate(0deg)}
  100%{transform:translateY(0) scale(1) rotate(0deg)}
}
@keyframes otiLogoGlowPresentation{
  0%,48%,100%{box-shadow:0 25px 60px rgba(10,42,78,.18),0 0 0 10px rgba(255,255,255,.38)}
  64%{box-shadow:0 36px 82px rgba(10,42,78,.3),0 0 0 16px rgba(255,255,255,.48)}
}
.oti-values-orbit.is-idle .oti-values-logo{animation:otiLogoGlowPresentation 8s ease-in-out infinite}
.oti-values-orbit.is-idle .oti-values-logo img{animation:otiLogoFloatPresentation 8s ease-in-out infinite}

/* Carte intégrée : pas de faux fond, pas de bord blanc parasite. */
.oti-map{background:#e8f0f5}
.oti-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.oti-map-live-badge{z-index:5}

@media (max-width:1100px) and (min-width:801px){
  .oti-values-orbit .oti-value-anim{width:270px}
  .oti-values-orbit .oti-value-card{min-height:150px;padding-left:68px}
}
@media (max-width:800px){
  .oti-values-orbit .oti-value-anim{width:100%;max-width:none}
  .oti-values-orbit .oti-value-card{min-height:0;padding:22px 20px 20px 76px}
}
@media (prefers-reduced-motion:reduce){
  .oti-values-orbit.is-idle .oti-values-logo,.oti-values-orbit.is-idle .oti-values-logo img{animation:none!important}
}

/* ================================================================
   OTI — Boucle de sortie / retour des cartes de valeurs
   ================================================================ */
.oti-values-orbit .oti-value-anim--tl { transform:translate(58px,58px) scale(.92); }
.oti-values-orbit .oti-value-anim--tr { transform:translate(-58px,58px) scale(.92); }
.oti-values-orbit .oti-value-anim--bl { transform:translate(58px,-58px) scale(.92); }
.oti-values-orbit .oti-value-anim--br { transform:translate(-58px,-58px) scale(.92); }
.oti-values-orbit .oti-value-anim.is-active { opacity:1; transform:translate(0,0) scale(1); }
.oti-values-orbit .oti-value-anim { transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1); }
@media (max-width:800px){
  .oti-values-orbit .oti-value-anim,
  .oti-values-orbit .oti-value-anim--tl,
  .oti-values-orbit .oti-value-anim--tr,
  .oti-values-orbit .oti-value-anim--bl,
  .oti-values-orbit .oti-value-anim--br { transform:translateY(18px) scale(.98); }
  .oti-values-orbit .oti-value-anim.is-active { transform:translateY(0) scale(1); }
}