/* ============================================================
   Ozeille — Design system tokens & base styles
   Brand: Nunito (display) + Inter (body)
   Palette: #4BA564 (vert) + #454F49 (gris) — stricte officielle
   ============================================================ */

:root {
  /* Brand */
  --oz-green: #4BA564;
  --oz-green-700: #3D8A53;
  --oz-green-800: #2F6B40;
  --oz-green-50: #EFF7F1;
  --oz-green-100: #DCEEE2;

  --oz-ink: #454F49;
  --oz-ink-800: #2E3633;
  --oz-ink-700: #5A6661;
  --oz-ink-500: #7B8580;
  --oz-ink-400: #97A09B;
  --oz-ink-300: #C0C7C3;
  --oz-ink-200: #DDE2DF;
  --oz-ink-100: #ECEFED;
  --oz-ink-50:  #F6F8F7;

  --oz-bg: #FFFFFF;
  --oz-bg-soft: #F6F8F7;

  /* Radii */
  --r-btn: 8px;
  --r-card: 16px;
  --r-pill: 999px;

  /* Shadows — subtle, Stripe/Linear-like */
  --sh-xs: 0 1px 0 rgba(69, 79, 73, 0.04);
  --sh-sm: 0 1px 2px rgba(69, 79, 73, 0.06), 0 1px 1px rgba(69, 79, 73, 0.04);
  --sh-md: 0 4px 12px rgba(69, 79, 73, 0.06), 0 1px 2px rgba(69, 79, 73, 0.04);
  --sh-lg: 0 12px 32px rgba(69, 79, 73, 0.08), 0 2px 6px rgba(69, 79, 73, 0.04);
  --sh-xl: 0 24px 60px -16px rgba(47, 107, 64, 0.18), 0 8px 24px rgba(69, 79, 73, 0.06);

  /* Type scale */
  --font-display: 'Nunito', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Spacing tokens */
  --pad-section: 61px;
  --pad-container: 24px;
  --max-container: 1200px;
}

/* Dark mode */
[data-theme="dark"] {
  --oz-bg: #0F1411;
  --oz-bg-soft: #161D19;
  --oz-ink: #E8EDEA;
  --oz-ink-800: #F2F5F3;
  --oz-ink-700: #B8C0BC;
  --oz-ink-500: #8A938F;
  --oz-ink-400: #6B7570;
  --oz-ink-300: #4A544F;
  --oz-ink-200: #2A332E;
  --oz-ink-100: #1F2722;
  --oz-ink-50:  #161D19;
  --oz-green-50: #1A2E22;
  --oz-green-100: #213D2D;
}

/* Density */
[data-density="compact"] {
  --pad-section: 41px;
  --pad-container: 20px;
}

/* ============================================================
   Reset & base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; max-width: 100%; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--oz-ink);
  background: var(--oz-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--oz-ink-800);
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.05; }
h2 { font-size: clamp(32px, 3.5vw, 48px); line-height: 1.1; letter-spacing: -0.025em; }
h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; font-weight: 700; }
h4 { font-size: 18px; line-height: 1.3; font-weight: 700; }

p { margin: 0; text-wrap: pretty; }

/* ============================================================
   Layout primitives
   ============================================================ */
.oz-container {
  width: 100%;
  max-width: var(--max-container);
  margin: 0 auto;
  padding: 0 var(--pad-container);
}
.oz-section {
  padding: var(--pad-section) 0;
}
.oz-section--tight { padding: 41px 0; }
.oz-section--soft { background: var(--oz-bg-soft); }

.oz-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--oz-green-700);
  white-space: nowrap;
}
.oz-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--oz-green);
}

.oz-lede {
  font-size: clamp(17px, 1.4vw, 19px);
  color: var(--oz-ink-700);
  line-height: 1.55;
  max-width: 56ch;
}

/* ============================================================
   Buttons
   ============================================================ */
.oz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--r-btn);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
  white-space: nowrap;
  user-select: none;
}
.oz-btn:active { transform: translateY(1px); }

.oz-btn--primary {
  background: var(--oz-green);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 1px 2px rgba(47,107,64,.25);
}
.oz-btn--primary:hover {
  background: var(--oz-green-700);
}

.oz-btn--secondary {
  background: var(--oz-bg);
  color: var(--oz-ink-800);
  border-color: var(--oz-ink-200);
}
.oz-btn--secondary:hover {
  border-color: var(--oz-ink-300);
  background: var(--oz-ink-50);
}

.oz-btn--ghost {
  background: var(--oz-green);
  color: #fff;
  height: 50px;
  padding: 0 26px;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -.005em;
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 2px 6px rgba(47,107,64,.22);
  transition: background .22s ease, box-shadow .22s ease, transform .18s ease;
}
.oz-btn--ghost svg { transition: transform .22s cubic-bezier(.22,.7,.25,1); }
.oz-btn--ghost:hover {
  background: #1F2623;
  color: #fff;
  box-shadow: 0 4px 14px rgba(31,38,35,.22);
  transform: translateY(-1px);
}
.oz-btn--ghost:hover svg { transform: translateX(4px); }

.oz-btn--lg { height: 52px; padding: 0 26px; font-size: 16px; }
.oz-btn--sm { height: 36px; padding: 0 14px; font-size: 14px; }

/* ============================================================
   Cards
   ============================================================ */
.oz-card {
  background: var(--oz-bg);
  border: 1px solid var(--oz-ink-200);
  border-radius: var(--r-card);
  padding: 34px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.oz-card--hover:hover {
  border-color: var(--oz-ink-300);
  box-shadow: var(--sh-md);
}

/* ============================================================
   Badge
   ============================================================ */
.oz-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--oz-green-50);
  color: var(--oz-green-800);
  border: 1px solid var(--oz-green-100);
}

/* ============================================================
   Dot grid (hero bg)
   ============================================================ */
.oz-dotgrid {
  background-image:
    radial-gradient(circle, var(--oz-ink-200) 1px, transparent 1.2px);
  background-size: 24px 24px;
  background-position: 0 0;
}

/* ============================================================
   Inputs
   ============================================================ */
.oz-input, .oz-textarea, .oz-select {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border-radius: var(--r-btn);
  border: 1px solid var(--oz-ink-200);
  background: var(--oz-bg);
  color: var(--oz-ink-800);
  font-family: inherit;
  font-size: 15px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.oz-textarea { height: auto; padding: 12px 14px; resize: vertical; min-height: 100px; }
.oz-input:focus, .oz-textarea:focus, .oz-select:focus {
  outline: none;
  border-color: var(--oz-green);
  box-shadow: 0 0 0 3px var(--oz-green-50);
}
.oz-input--error { border-color: #C84A38; }
.oz-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--oz-ink-700);
  margin-bottom: 6px;
}
.oz-help { font-size: 12px; color: var(--oz-ink-500); margin-top: 6px; }
.oz-error { font-size: 12px; color: #C84A38; margin-top: 6px; }

/* ============================================================
   Scroll reveal — render visible by default with one-shot entry
   ============================================================ */
/* Icônes animées en continu — respiration douce, décalée d'une carte à l'autre */
@keyframes ozIcoBreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.05)}}
@keyframes ozIcoGlow{0%,100%{box-shadow:0 0 0 0 rgba(75,165,100,0)}50%{box-shadow:0 0 0 6px rgba(75,165,100,.10)}}
@media (prefers-reduced-motion:no-preference){
  .oz-ico-anim{animation:ozIcoGlow 3.6s ease-in-out infinite}  .oz-ico-anim>svg{animation:ozIcoBreathe 3.6s ease-in-out infinite}
  *:nth-child(2)>.oz-card .oz-ico-anim,*:nth-child(2)>.oz-card .oz-ico-anim>svg{animation-delay:.5s}
  *:nth-child(3)>.oz-card .oz-ico-anim,*:nth-child(3)>.oz-card .oz-ico-anim>svg{animation-delay:1s}
}

/* Logos partenaires — marques provisoires : monogramme + raison sociale */
.oz-logo-chip{display:inline-flex;align-items:center;gap:11px;margin:0 18px;padding:11px 20px 11px 12px;border:1px solid var(--oz-ink-200);border-radius:12px;background:var(--oz-bg);white-space:nowrap;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.oz-logo-chip:hover{border-color:var(--oz-green-100);box-shadow:var(--sh-md);transform:translateY(-2px)}
.oz-logo-chip__mark{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:9px;background:var(--oz-green-50);color:var(--oz-green-700);font-family:var(--font-display);font-weight:900;font-size:13.5px;letter-spacing:-.02em}
.oz-logo-chip__name{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:-.01em;color:var(--oz-ink-700)}

/* ===== Centre d'aide — recherche, filtres et résultats ===== */
.oz-help-search{position:relative;display:flex;align-items:center;gap:12px;max-width:620px;margin:0 auto;padding:0 18px;height:56px;border:1px solid var(--oz-ink-200);border-radius:14px;background:var(--oz-bg);box-shadow:var(--sh-sm);color:var(--oz-ink-500);transition:border-color .18s ease,box-shadow .18s ease}
.oz-help-search:focus-within{border-color:var(--oz-green);box-shadow:0 0 0 4px rgba(75,165,100,.12)}
.oz-help-search input{flex:1;border:0;outline:0;background:transparent;font-family:var(--font-body);font-size:15.5px;color:var(--oz-ink-800);min-width:0}
.oz-help-search input::placeholder{color:var(--oz-ink-500)}
.oz-help-search button{border:0;background:transparent;color:var(--oz-ink-500);cursor:pointer;padding:4px;display:grid;place-items:center;border-radius:6px}
.oz-help-search button:hover{color:var(--oz-ink-800);background:var(--oz-ink-50)}

.oz-help-ai{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:26px 30px;border:1px solid var(--oz-green-100);border-radius:18px;background:linear-gradient(120deg,var(--oz-green-50),rgba(75,165,100,.04))}
.oz-help-ai__mark{flex:none;width:52px;height:52px;border-radius:14px;background:var(--oz-green);color:#fff;display:grid;place-items:center;box-shadow:0 4px 14px rgba(47,107,64,.22)}
.oz-help-ai__acts{flex:none;display:grid;grid-template-columns:repeat(2,minmax(160px,1fr));gap:10px}
.oz-help-ai__acts>.oz-btn{width:100%;justify-content:center;text-align:center}

.oz-help-layout{display:grid;grid-template-columns:264px minmax(0,1fr);gap:36px;align-items:start}
.oz-help-filters{position:sticky;top:88px;display:grid;gap:26px}
.oz-help-fgroup{display:grid;gap:8px}
.oz-help-flabel{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--oz-ink-500);margin:0 0 2px}
.oz-help-fbtn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:10px 12px;border:1px solid transparent;border-radius:9px;background:transparent;cursor:pointer;font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--oz-ink-700);text-align:left;transition:background .15s ease,color .15s ease,border-color .15s ease}
.oz-help-fbtn span{display:inline-flex;align-items:center;gap:9px}
.oz-help-fbtn em{font-style:normal;font-size:12px;font-weight:600;color:var(--oz-ink-500)}
.oz-help-fbtn:hover{background:var(--oz-bg);border-color:var(--oz-ink-200);color:var(--oz-ink-800)}
.oz-help-fbtn.is-on{background:var(--oz-green);border-color:var(--oz-green);color:#fff}
.oz-help-fbtn.is-on em{color:rgba(255,255,255,.75)}
.oz-help-chips{display:flex;flex-wrap:wrap;gap:7px}
.oz-help-chip{padding:7px 12px;border:1px solid var(--oz-ink-200);border-radius:999px;background:var(--oz-bg);cursor:pointer;font-family:var(--font-body);font-size:12.5px;font-weight:600;color:var(--oz-ink-700);transition:background .15s ease,color .15s ease,border-color .15s ease}
.oz-help-chip em{font-style:normal;opacity:.6;margin-left:3px}
.oz-help-chip:hover{border-color:var(--oz-green-100);color:var(--oz-green-700)}
.oz-help-chip.is-on{background:var(--oz-green-800);border-color:var(--oz-green-800);color:#fff}
.oz-help-link{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:9px;font-size:14px;font-weight:600;color:var(--oz-ink-700);text-decoration:none}
.oz-help-link:hover{background:var(--oz-bg);color:var(--oz-green-700)}

.oz-help-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px;font-size:14px;color:var(--oz-ink-700)}
.oz-help-bar strong{color:var(--oz-ink-800);font-weight:700}
.oz-help-reset{border:1px solid var(--oz-ink-200);background:var(--oz-bg);border-radius:999px;padding:6px 14px;cursor:pointer;font-family:var(--font-body);font-size:12.5px;font-weight:600;color:var(--oz-ink-700)}
.oz-help-reset:hover{border-color:var(--oz-green-100);color:var(--oz-green-700)}

/* la colonne de résultats est bornée : au-delà de ~78 caractères une
   question devient pénible à lire d'un seul balayage */
.oz-help-results{max-width:780px}
.oz-help-secbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.oz-help-sectitle{display:flex;align-items:center;gap:9px;margin:0;font-family:var(--font-display);font-size:17px;font-weight:800;color:var(--oz-ink-800);letter-spacing:-.01em}
.oz-help-sectitle svg{color:var(--oz-green-700)}
.oz-help-sectitle em{font-style:normal;font-size:12px;font-weight:700;color:var(--oz-ink-500);background:var(--oz-bg-soft);border:1px solid var(--oz-ink-100);border-radius:999px;padding:2px 9px}
.oz-help-list{display:grid;gap:10px}
.oz-help-item{border:1px solid var(--oz-ink-200);border-radius:13px;background:var(--oz-bg);overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease}
.oz-help-item:hover{border-color:var(--oz-ink-300)}
.oz-help-item.is-open{border-color:var(--oz-green-100);box-shadow:var(--sh-md)}
.oz-help-q{display:flex;align-items:center;gap:14px;width:100%;padding:18px 56px 18px 20px;border:0;background:transparent;cursor:pointer;text-align:left;position:relative;font-family:var(--font-body)}
.oz-help-tag{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--oz-green-700);background:var(--oz-green-50);border-radius:999px;padding:4px 10px;white-space:nowrap}
.oz-help-qt{font-family:var(--font-display);font-weight:700;font-size:16.5px;line-height:1.35;color:var(--oz-ink-800);letter-spacing:-.01em}
.oz-help-plus{position:absolute;right:20px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;border:1px solid var(--oz-ink-200);background:
  linear-gradient(var(--oz-ink-700),var(--oz-ink-700)) center/12px 1.6px no-repeat,
  linear-gradient(var(--oz-ink-700),var(--oz-ink-700)) center/1.6px 12px no-repeat}
.oz-help-item.is-open .oz-help-plus{background:linear-gradient(var(--oz-green-700),var(--oz-green-700)) center/12px 1.6px no-repeat;border-color:var(--oz-green-100)}
.oz-help-a{padding:0 20px 22px;animation:oz-reveal-in .3s ease both}
.oz-help-a .a{font-size:15px;line-height:1.68;color:var(--oz-ink-700);max-width:70ch}
.oz-help-a .a>*+*{margin-top:12px}

@media (max-width:900px){
  .oz-help-layout{grid-template-columns:1fr;gap:26px}
  .oz-help-filters{position:static}
  .oz-help-ai{padding:22px}
  .oz-help-ai__acts{flex:1 1 100%;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .oz-help-q{flex-wrap:wrap;gap:9px;padding-right:48px}
}

@keyframes oz-reveal-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.oz-reveal {
  animation: oz-reveal-in .6s ease both;
  animation-delay: var(--delay, 0ms);
}
/* Avec JS actif, la révélation attend le défilement (pilotée par [data-rv]) */
html.js-reveal .oz-reveal { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .oz-reveal { animation: none !important; }
}

/* ============================================================
   Utilities
   ============================================================ */
.oz-divider { height: 1px; background: var(--oz-ink-100); width: 100%; }
.oz-hide-mobile { }
@media (max-width: 1080px) {
  .oz-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
  .oz-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 768px) {
  .oz-hide-mobile { display: none !important; }
  :root { --pad-section: 41px; --pad-container: 20px; }
}
@media (max-width: 620px) {
  .oz-grid-3, .oz-grid-4 { grid-template-columns: 1fr !important; }
}
@media (max-width: 540px) {
  :root { --pad-section: 36px; }
}
.oz-stack { display: flex; flex-direction: column; }
.oz-row { display: flex; }
.oz-gap-1 { gap: 8px; }
.oz-gap-2 { gap: 16px; }
.oz-gap-3 { gap: 24px; }
.oz-gap-4 { gap: 32px; }
.oz-center { display: flex; align-items: center; justify-content: center; }
.oz-mono { font-family: var(--font-mono); }

/* Tabs */
.oz-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--oz-ink-100);
}
.oz-tab {
  padding: 14px 18px;
  border: none;
  background: transparent;
  color: var(--oz-ink-700);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.oz-tab:hover { color: var(--oz-ink-800); }
.oz-tab.is-active {
  color: var(--oz-green-700);
  border-bottom-color: var(--oz-green);
}

/* Marquee */
@keyframes oz-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.oz-marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.oz-marquee__track {
  display: flex;
  width: max-content;
  animation: oz-marquee 40s linear infinite;
}

/* Skip animation for reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ============================================================
   MOTION — reflet diamant sur boutons + révélations au défilement
   ============================================================ */

/* Reflet miroir / diamant — uniquement sur les boutons « Planifier une démo » (.oz-btn--shine) */
@media (prefers-reduced-motion: no-preference) {
  .oz-btn--shine { position: relative; overflow: hidden; isolation: isolate; }
  .oz-btn--shine::after {
    content: ""; position: absolute; top: -60%; bottom: -60%; left: -75%; width: 45%;
    background: linear-gradient(100deg,
      rgba(255,255,255,0) 0%, rgba(255,255,255,0) 38%,
      rgba(255,255,255,.65) 50%, rgba(255,255,255,0) 62%, rgba(255,255,255,0) 100%);
    transform: skewX(-22deg);
    animation: oz-shine 3.6s ease-in-out infinite;
    pointer-events: none; z-index: 1;
  }
  /* si le bouton démo est clair : reflet teinté vert pour rester visible */
  .oz-btn--shine.oz-btn--secondary::after, .oz-btn--shine.oz-btn--ghost::after {
    background: linear-gradient(100deg,
      rgba(75,165,100,0) 0%, rgba(75,165,100,0) 38%,
      rgba(75,165,100,.22) 50%, rgba(75,165,100,0) 62%, rgba(75,165,100,0) 100%);
  }
  .oz-btn--shine:hover::after { animation-duration: 1.4s; }
}
@keyframes oz-shine {
  0%   { left: -75%; }
  22%  { left: 130%; }
  100% { left: 130%; }
}

/* Révélations directionnelles au défilement (slide up / down / left / right).
   N'est masqué que si JS est actif (html.js-reveal) → sûr pour print & no-JS. */
@media (prefers-reduced-motion: no-preference) {
  html.js-reveal [data-rv] { opacity: 0; will-change: opacity, transform; }
  html.js-reveal [data-rv="up"]    { transform: translateY(30px); }
  html.js-reveal [data-rv="down"]  { transform: translateY(-30px); }
  html.js-reveal [data-rv="left"]  { transform: translateX(46px); }   /* entre par la droite */
  html.js-reveal [data-rv="right"] { transform: translateX(-46px); }  /* entre par la gauche */
  html.js-reveal [data-rv="scale"] { transform: scale(.94); }
  html.js-reveal [data-rv].is-in {
    opacity: 1; transform: none;
    transition: opacity .7s cubic-bezier(.22,.7,.25,1),
                transform .75s cubic-bezier(.22,.7,.25,1);
    transition-delay: var(--rv-delay, 0ms);
  }
  /* Sur tablette/mobile : pas de translation horizontale (évite tout dépassement / ballotement) */
  @media (max-width: 860px) {
    html.js-reveal [data-rv="left"],
    html.js-reveal [data-rv="right"] { transform: translateY(26px); }
  }
}

/* Entrée de page — le héros se pose au chargement de chaque route */
@keyframes ozHeroIn { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }
@keyframes ozDecorIn { from { opacity: 0; transform: translateY(24px) scale(.96) } to { opacity: 1; transform: none } }
@keyframes ozDraw { from { stroke-dashoffset: var(--len, 400) } to { stroke-dashoffset: 0 } }
@keyframes ozBarUp { from { transform: scaleY(0) } to { transform: scaleY(1) } }
@keyframes ozFloat { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-7px) } }
@media (prefers-reduced-motion: no-preference) {
  .oz-hero-in > * { animation: ozHeroIn .62s cubic-bezier(.22,.7,.25,1) both; }
  .oz-hero-in > *:nth-child(1) { animation-delay: .04s }
  .oz-hero-in > *:nth-child(2) { animation-delay: .12s }
  .oz-hero-in > *:nth-child(3) { animation-delay: .2s }
  .oz-hero-in > *:nth-child(4) { animation-delay: .28s }
  .oz-hero-in > *:nth-child(5) { animation-delay: .36s }
}
@media (prefers-reduced-motion: reduce) {
  .oz-hero-in > * { animation: none !important }
}

/* ============================================================
   RESPONSIVE — empilement vertical épuré (mobile & tablette)
   ============================================================ */
/* Sur tablette/mobile, les dispositions en colonnes passent à l'empilement vertical */
@media (max-width: 860px) {
  main [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  main [style*="display: grid"], main [style*="display:grid"] { gap: 16px !important; }
}
/* Marges confortables loin des bords de l'écran */
@media (max-width: 768px) {
  .oz-container { padding-left: 22px; padding-right: 22px; }
}
@media (max-width: 400px) {
  .oz-container { padding-left: 18px; padding-right: 18px; }
}
/* Titres et descriptions réduits pour le format vertical */
@media (max-width: 640px) {
  main h1 { font-size: clamp(28px, 8.5vw, 38px) !important; }
  main h2 { font-size: clamp(24px, 7vw, 32px) !important; }
  main h3 { font-size: clamp(19px, 5.5vw, 23px) !important; }
  main .oz-lede { font-size: 14.5px !important; line-height: 1.5; }
  main .oz-section { padding-top: 31px !important; padding-bottom: 31px !important; }
}

/* Retour en haut — bas à gauche, symétrique du lanceur de Vigie */
.oz-totop{position:fixed;left:22px;bottom:22px;z-index:60;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:var(--oz-bg);color:var(--oz-green-700);border:1px solid var(--oz-green-100);
  box-shadow:0 8px 22px -8px rgba(31,38,35,.28);
  transition:opacity .22s ease,transform .22s cubic-bezier(.22,.7,.25,1),background .18s ease,color .18s ease,border-color .18s ease}
.oz-totop svg{width:19px;height:19px;transition:transform .22s cubic-bezier(.22,.7,.25,1)}
.oz-totop[data-show="0"]{opacity:0;transform:translateY(12px) scale(.9);pointer-events:none}
.oz-totop[data-show="1"]{opacity:1;transform:none}
.oz-totop:hover{background:var(--oz-green);color:#fff;border-color:var(--oz-green)}
.oz-totop:hover svg{transform:translateY(-2px)}
.oz-totop:focus-visible{outline:2px solid var(--oz-green);outline-offset:3px}
@media (max-width:640px){.oz-totop{left:16px;bottom:16px;width:42px;height:42px}}
@media (prefers-reduced-motion:reduce){.oz-totop,.oz-totop svg{transition:none}}


/* ============================================================
   Pages reprises de l'ancien site (ozeille.com) — mise en page
   d'origine. Extrait de son CSS en conservant les @media : les
   règles mobiles (.oz-split en une colonne, .oz-cta-row étirée)
   ne doivent PAS s'appliquer sur grand écran.
   ============================================================ */
/* règles de base (toutes largeurs) */
.oz-cta-row{flex-wrap:nowrap;align-items:center;gap:10px;display:flex}
.oz-mock-chip{white-space:nowrap;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;gap:6px;height:28px;padding:0 10px;font-size:11px;display:inline-flex}
.oz-dash-topbar{justify-content:space-between;align-items:center;gap:12px;display:flex}
.oz-dash-topbar__actions{flex-shrink:0;gap:8px;display:flex}
.oz-split>*{min-width:0}
.oz-feature-blocks{flex-direction:column;gap:clamp(64px,8vw,96px);display:flex}
.oz-feature-block .oz-eyebrow{margin-bottom:12px}
.oz-feature-split{grid-template-columns:1fr 1.4fr;align-items:center;gap:56px;display:grid}
.oz-feature-title{margin-bottom:14px;font-size:clamp(22px,4vw,28px);line-height:1.2}
.oz-feature-mockup{min-height:380px}
.oz-float{animation:5s ease-in-out infinite oz-float;animation-delay:var(--float-delay,0s)}
.oz-pulse-dot{background:var(--oz-green);border-radius:50%;width:8px;height:8px;animation:2s ease-out infinite oz-pulse}
.oz-bar{transform-origin:bottom;transition:transform .7s cubic-bezier(.22,.9,.36,1);transition-delay:var(--bar-delay,0s);transform:scaleY(0)}
.is-in .oz-bar,.oz-bars-in .oz-bar{transform:scaleY(1)}
.oz-row-in{animation:.5s both oz-row-in;animation-delay:var(--row-delay,0s)}
.oz-legal-page .oz-container{justify-content:flex-start;display:flex}
.oz-legal-wrap{width:100%;max-width:720px}
.oz-legal-hero{padding-top:72px;padding-bottom:40px}
.oz-legal-eyebrow{font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--oz-green-700);margin:0 0 14px;font-size:12px;font-weight:600}
.oz-legal-title{letter-spacing:-.02em;color:var(--oz-ink-800);text-wrap:balance;margin:0 0 12px;font-size:clamp(28px,4vw,40px);line-height:1.15}
.oz-legal-updated{color:var(--oz-ink-500);margin:0;font-size:14px}
.oz-legal-toc{background:var(--oz-bg-soft);border:1px solid var(--oz-ink-100);border-radius:var(--r-card);margin-top:32px;padding:20px 22px}
.oz-legal-toc__label{letter-spacing:.06em;text-transform:uppercase;color:var(--oz-ink-500);margin:0 0 12px;font-size:12px;font-weight:700}
.oz-legal-toc__list{flex-direction:column;gap:8px;margin:0;padding-left:1.25rem;font-size:14.5px;line-height:1.45;display:flex}
.oz-legal-toc__list a{color:var(--oz-green-700);font-weight:500;text-decoration:none}
.oz-legal-toc__list a:hover{text-underline-offset:2px;text-decoration:underline}
.oz-legal-body{color:var(--oz-ink-700);padding-bottom:48px;font-size:16px;line-height:1.7}
.oz-legal-section{margin-bottom:40px;scroll-margin-top:96px}
.oz-legal-section h2{color:var(--oz-ink-800);margin:0 0 16px;font-size:clamp(19px,2.2vw,22px);line-height:1.3}
.oz-legal-section h3{color:var(--oz-ink-800);margin:22px 0 10px;font-size:16px}
.oz-legal-section p{margin:0 0 14px}
.oz-legal-section ul,.oz-legal-section ol{flex-direction:column;gap:8px;margin:0 0 14px;padding-left:1.35rem;display:flex}
.oz-legal-section li ul{margin-top:8px}
.oz-legal-section a{color:var(--oz-green-700);font-weight:500}
.oz-legal-footer-note{border-top:1px solid var(--oz-ink-100);color:var(--oz-ink-500);margin:0 0 96px;padding-top:24px;font-size:14px}
.oz-legal-footer-note a{color:var(--oz-green-700);font-weight:600}
.oz-about-nav{flex-wrap:wrap;gap:0;display:flex;overflow:hidden}
.oz-about-nav__link{color:var(--oz-ink-700);white-space:nowrap;border-bottom:2px solid #0000;margin-bottom:-1px;padding:16px 18px;font-size:14px;font-weight:600;text-decoration:none;transition:color .15s}
.oz-about-nav__link:hover{color:var(--oz-ink-800)}
.oz-about-nav__link.is-active{color:var(--oz-green-700);border-bottom-color:var(--oz-green)}
@keyframes oz-float{0%,to{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes oz-pulse{0%{box-shadow:0 0 #49a76773}70%{box-shadow:0 0 0 7px #49a76700}to{box-shadow:0 0 #49a76700}}
@keyframes oz-row-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(width<=768px){.oz-cta-row{flex-direction:row;align-items:stretch}.oz-cta-row .oz-btn{white-space:nowrap;flex:1;justify-content:center;min-width:0;height:44px;padding-left:10px;padding-right:10px;font-size:12.5px}.oz-cta-row .oz-btn--lg{height:48px;padding-left:14px;padding-right:14px;font-size:14px}.oz-mock-kpis{grid-template-columns:1fr!important;gap:8px!important}.oz-mock-kpi{justify-content:space-between!important;align-items:center!important;gap:12px!important;padding:10px 12px!important;display:flex!important}.oz-mock-kpi__main{min-width:0}.oz-mock-kpi__sub{text-align:right;flex-shrink:0;margin-top:0!important}.oz-mock-kpi__value{font-size:16px!important}.oz-feature-blocks{gap:56px}.oz-feature-split{gap:28px!important}.oz-feature-mockup-wrap{order:-1}.oz-feature-mockup{min-height:260px}.oz-feature-cta{justify-content:center;width:100%}}
@media(width<=540px){.oz-dash-topbar{flex-direction:column;align-items:flex-start}.oz-dash-topbar__actions{width:100%}.oz-dash-topbar__actions .oz-mock-chip{flex:1;min-width:0}}
@media(width<=900px){.oz-split{grid-template-columns:1fr!important;gap:36px!important}.oz-split--flush{gap:0!important}}
@media(width<=640px){.oz-news-row,.oz-form-grid{grid-template-columns:1fr!important}.oz-dash-kpis{grid-template-columns:1fr 1fr!important}.oz-dash-panels{grid-template-columns:1fr!important}}
@media(width>=769px){.oz-feature-split--reverse{grid-template-columns:1.4fr 1fr}.oz-feature-split--reverse .oz-feature-copy{grid-area:1/2}.oz-feature-split--reverse .oz-feature-mockup-wrap{grid-area:1/1}}
@media(width<=480px){.oz-about-nav{justify-content:center}.oz-about-nav__link{padding:14px 12px;font-size:13px}}