/* ------------------------------------------------------------------ Pages démo détail / légal */
.breadcrumb { padding: 26px 0 0; font-size: 0.82rem; color: var(--text-dim); }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb .sep { margin: 0 8px; }

.detail-hero { padding: 40px 0 20px; }
.detail-hero h1 { margin: 14px 0 18px; }
.detail-lead { max-width: 640px; color: var(--text-muted); font-size: 1.08rem; }
.detail-lead-wide { max-width: 820px; }

.detail-frame {
  margin: 40px 0;
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-soft);
  box-shadow: var(--shadow-soft);
}
.detail-frame .frame-wrap { position: relative; width: 100%; aspect-ratio: 16 / 10; }
.detail-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.detail-frame .frame-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.detail-frame-cap { padding: 12px 18px; border-top: 1px solid var(--border); font-size: 0.82rem; color: var(--text-dim); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* Variante illustration (pages Expertise) : même cadre que les démos interactives,
   mais volontairement plus petite — une image fixe n'a pas besoin de toute la
   largeur du wrap. */
.detail-frame.detail-frame-sm { max-width: 480px; margin: 32px auto; }

/* Hero pages Expertise : titre pleine largeur, puis sous-titre + illustration
   côte à côte (centrés verticalement l'un par rapport à l'autre). Mêmes
   proportions de colonnes que .detail-grid (1.6fr/1fr) plus bas, pour que le
   bord droit de l'image tombe exactement sur celui de la carte .detail-aside
   sans calcul spécifique. L'image garde ses proportions d'origine (hauteur
   automatique, pas de recadrage) : pas de .detail-frame/.frame-wrap ici. */
/* `.detail-grid` (même bloc .wrap plus bas) annule le padding latéral de
   .wrap (40px 0 20px -> gauche/droite à 0) pour aller bord à bord ; sans ce
   même reset ici, le hero garderait les 24px de .wrap et l'image ne
   tomberait plus sur le bord de la carte .detail-aside. */
.detail-hero-split { padding-left: 0; padding-right: 0; }
.detail-hero-split h1 { margin: 14px 0 24px; }
.detail-hero-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: center; }
.detail-hero-row .detail-lead { max-width: none; }
.detail-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
@media (max-width: 900px) {
  .detail-hero-row { grid-template-columns: 1fr; gap: 24px; }
}

.detail-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; padding: 40px 0 20px; }
.detail-grid h2 { margin-bottom: 18px; }
.detail-grid h2:not(:first-child) { margin-top: 40px; }
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.feature-list li { display: flex; gap: 12px; font-size: 0.95rem; color: var(--text-muted); }
.feature-check {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  box-shadow: var(--shadow-soft-sm);
  color: var(--accent-ink);
}
.feature-check svg { width: 13px; height: 13px; }
.detail-aside {
  border: none;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  padding: 24px;
  align-self: start;
}
.detail-aside h3 { font-size: 0.95rem; margin-bottom: 8px; }
.detail-aside h3 + p { margin-bottom: 20px; }
.detail-aside p { font-size: 0.88rem; color: var(--text-muted); }
.detail-aside a { color: var(--accent-ink); font-weight: 500; }
.detail-aside a:hover { color: var(--accent); }

.video-box { max-width: 720px; margin: 0 auto; }
.video-box video {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  background: #000;
}
.video-cta-row { text-align: center; margin-top: 24px; }

.cta-banner {
  margin: 48px 0 80px;
  border: none;
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--accent) 6%, var(--surface));
  box-shadow: var(--shadow-soft);
  padding: 40px;
  text-align: center;
}
.cta-banner h2 { margin-bottom: 10px; }
.cta-banner p { color: var(--text-muted); margin-bottom: 22px; }

.legal { max-width: 760px; padding: 30px 0 90px; }
.legal h1 { margin-bottom: 26px; }
.legal h2 { font-size: 1.2rem; margin: 34px 0 12px; }
.legal p, .legal li { color: var(--text-muted); font-size: 0.95rem; }
.legal ul { padding-left: 20px; }
.legal a { color: var(--accent-ink); }
.notice-box {
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--surface);
}

/* ------------------------------------------------------------------ Animations
   Entrée du hero, halo de fond, bandeau défilant, reflet sur le badge.
   Toutes désactivées si prefers-reduced-motion. */

/* Le halo bleu du fond apparaît en fondu au chargement */
body::before { animation: bg-glow-in 1.4s ease both; }
@keyframes bg-glow-in { from { opacity: 0; } to { opacity: 1; } }

/* Titre du hero : arrivée nette depuis un léger flou, puis stagger du reste */
@keyframes hero-blur-in {
  from { opacity: 0; filter: blur(12px); transform: translateY(-12px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.hero h1 { animation: hero-blur-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both; }
.hero .lead { animation: hero-rise 0.6s ease 0.18s both; }
.hero-actions { animation: hero-rise 0.6s ease 0.28s both; }

/* Badge du hero : simple arrivée, pas de reflet animé (mat, pas de dégradé) */
.eyebrow {
  animation: hero-rise 0.6s ease both;
}

/* Bande défilante générique : contenu dupliqué en boucle, pas de bouton
   (voir js/main.js, initMarquee — ex. bande « confiance » si réactivée un
   jour, carrousel compact des domaines d'expertise sur l'accueil). */
.marquee {
  display: flex;
  gap: 22px;
  overflow: hidden;
  padding: 32px 0;
  margin: -32px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
/* Le carrousel de domaines (accueil) est suivi d'un lien juste en dessous : la
   marge négative ci-dessus annule tout le padding de dégagement des ombres et
   colle les deux (0px d'écart mesuré), rendant le lien difficile à cliquer
   sans toucher une pastille. On redonne un peu d'air en dessous seulement. */
.xp-carousel { margin-bottom: -8px; }
.marquee-track {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 22px;
  animation: marquee-scroll 34s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* ------------------------------------------------------------------ Reveal */
/* Utilise `translate` (et pas `transform`) pour ne pas entrer en conflit avec
   les effets de survol `transform` des cartes une fois révélées. */
.reveal { opacity: 0; translate: 0 16px; transition: opacity 0.6s ease, translate 0.6s ease; }
.reveal.is-visible { opacity: 1; translate: none; }

/* ------------------------------------------------------------------ Responsive */
@media (max-width: 900px) {
  .grid-3, .grid-4, .demo-grid { grid-template-columns: 1fr 1fr; }
  .detail-grid { grid-template-columns: 1fr; gap: 28px; }
  .demo-carousel { padding: 0 60px; }
  .demo-carousel .demo-card { flex-basis: calc((100% - 22px) / 2); }
  .carousel-arrow { width: 50px; height: 50px; }
  .carousel-arrow svg { width: 24px; height: 24px; }
}
/* Menu replié en tiroir dès que la barre de nav manque de place.
   Seuil relevé à 980px : en dessous, le méga-menu à 3 colonnes (intro + liste
   de liens sur une seule ligne + carte) n'a plus la place de tenir. */
@media (max-width: 980px) {
  .main-nav { display: none; }
  .nav-toggle { display: block; }
  .site-header.open .main-nav {
    display: flex;
    grid-column: 1 / -1;
    justify-self: stretch;
    position: absolute;
    top: 100%; left: 0; right: 0;
    max-height: calc(100vh - 92px);
    max-height: calc(100dvh - 92px);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: none;
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 16px;
    background: color-mix(in oklab, var(--bg) 96%, transparent);
    border-bottom: 1px solid var(--border);
  }
  .site-header.open .main-nav a { padding: 12px 0; border-bottom: 1px solid var(--border); }

  /* menus déroulants : affichés à plat dans le tiroir mobile */
  .nav-mega { display: none !important; }
  .site-header.open .main-nav .nav-item { display: block; margin-right: 0; }
  .site-header.open .main-nav .nav-item.has-menu::after { display: none; }
  .site-header.open .main-nav .nav-caret { display: none; }
  .site-header.open .main-nav .nav-menu {
    position: static;
    display: block;
    width: auto;
    min-width: 0;
    padding: 0 0 10px 14px;
    gap: 0;
    background: none;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .site-header.open .main-nav .nav-menu a {
    display: block;
    min-height: 0;
    padding: 8px 0;
    border-bottom: 0;
    border-radius: 0;
    margin: 0;
    background: none;
    font-size: 0.82rem;
    color: var(--text-dim);
    white-space: normal;
  }
  .site-header.open .main-nav .nav-menu a.nav-menu-all {
    color: var(--text-muted);
    padding-bottom: 8px;
  }
  .site-header.open .main-nav .nav-menu a:hover { background: none; color: var(--text-muted); }
  .site-header.open .main-nav .nav-menu-group {
    display: block;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
  }
  .site-header.open .main-nav .nav-menu-group:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
}
/* Aperçus (hero d'accueil, démos interactives) : l'appli garde son rendu 1920x1080,
   réduit d'un facteur --fit posé par js/main.js (largeur du cadre / 1920). */
@media (max-width: 980px) {
  .hero-preview .frame-wrap, .detail-frame .frame-wrap { aspect-ratio: 16 / 9; overflow: hidden; }
  .hero-preview .frame-wrap iframe, .detail-frame .frame-wrap iframe {
    inset: auto;
    top: 0; left: 0;
    width: 1920px; height: 1080px;
    transform: scale(var(--fit, 0.2));
    transform-origin: top left;
  }
}
@media (max-width: 640px) {
  .demo-carousel { padding: 0; }
  .demo-carousel .demo-card { flex-basis: 86%; }
  .carousel-arrow { display: none; }
  .grid-3, .grid-4, .demo-grid { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
  .hero { padding: 70px 0 50px; }
  .contact-panel, .cta-banner { padding: 34px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1; translate: none; transition: none; }
  body::before,
  .hero .eyebrow,
  .hero h1,
  .hero .lead,
  .hero-actions,
  .eyebrow,
  .marquee-track {
    animation: none !important;
  }
  .card::before,
  .demo-card::before { display: none; }
  .btn:hover,
  .btn:active,
  .carousel-arrow:hover,
  .carousel-arrow:active,
  .card:hover,
  .demo-card:hover,
  .nav-mega-card:hover { transform: none; }
  .demo-track { transition: none; }
  .nav-mega { transition: opacity 0.15s ease, visibility 0s 0.15s; transform: none; }
  .nav-mega.open { transition: opacity 0.15s ease; transform: none; }
  .nav-mega-list a:hover { padding-left: 0; }
}

/* ------------------------------------------------------------------ Démarche (enchaînement numéroté) */
.method-flow { list-style: none; margin: 0; padding: 0; counter-reset: mf; }
.mf-step {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 20px;
  padding-bottom: 30px;
  counter-increment: mf;
}
.mf-step:last-child { padding-bottom: 0; }
/* Le numéro est centré sur toute la hauteur du texte (titre + description).
   Le connecteur est donc scindé en 2 segments ancrés sur %/calc() de CE
   step (jamais sur le step voisin) : au-dessus et en dessous du rond, quelle
   que soit sa hauteur (variable selon la longueur du texte).
   Le % d'un enfant en position absolute se calcule sur la boîte AVEC padding
   (79.7px de haut = 49.7px de contenu + 30px de padding-bottom), alors que le
   rond n'est centré que sur les 49.7px de contenu : il faut donc retrancher
   la moitié du padding-bottom (15px) pour retomber sur le centre réel. */
.mf-step::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 0;
  height: calc(50% - 37px);
  width: 2px;
  background: linear-gradient(var(--accent-soft), var(--border));
}
.mf-step:first-child::before { display: none; }
.mf-step:last-child::before { height: calc(50% - 22px); } /* pas de padding-bottom à retrancher ici */
.mf-step::after {
  content: "";
  position: absolute;
  left: 21px;
  top: calc(50% + 7px);
  bottom: -2px;
  width: 2px;
  background: linear-gradient(var(--accent-soft), var(--border));
}
.mf-step:last-child::after { display: none; }
.mf-num {
  z-index: 1;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: none;
  background: var(--bg-soft);
  box-shadow: var(--shadow-soft-sm);
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.mf-num::before { content: counter(mf); }
.mf-body { min-width: 0; }
.mf-body h3 { font-size: 1.05rem; margin-bottom: 6px; }
.mf-body p { color: var(--text-muted); font-size: 0.92rem; }
.mf-tag {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-ink);
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid rgba(47, 102, 144, 0.25);
}
.mf-step.is-tool .mf-num {
  background: var(--accent);
  color: #fff;
}
@media (max-width: 640px) {
  .mf-step { grid-template-columns: 36px 1fr; gap: 14px; padding-bottom: 24px; }
  .mf-step::before { left: 17px; height: calc(50% - 30px); }
  .mf-step:last-child::before { height: calc(50% - 18px); }
  .mf-step::after { left: 17px; top: calc(50% + 6px); }
  .mf-num { width: 36px; height: 36px; font-size: 0.9rem; }
}

/* Page 404 : boutons alignés à gauche sous le texte d'introduction. */
.detail-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }