/* ============================================================
   DESIGN SYSTEM INTEGRATION & PALETTE
   ============================================================ */
:root {
  /* Colors */
  --color-accent: #FF6B35;
  --color-accent-hover: #e85d22;
  --color-accent-soft: rgba(255, 107, 53, 0.12);
  --color-accent-text: #ef6c00;
  --color-accent-gradient: linear-gradient(135deg, #FF6B35 0%, #FF8552 100%);
  
  /* Surfaces - Light Mode */
  --color-bg: #f8f9fa;
  --color-surface: #ffffff;
  --color-surface-card: #ffffff;
  --color-border: #e9ecef;
  --color-border-card: #e9ecef;
  
  /* Text - Light Mode */
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-muted: #6b7280;      /* contraste WCAG AA (4,83:1) — cf. audit 2026-07 */
  --text-inverse: #ffffff;
  
  /* Layout */
  --container-width: 1200px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 24px;
  
  /* Typography */
  --font-heading: 'Outfit', 'Segoe UI', sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 16px 40px rgba(255, 107, 53, 0.08);
  /* Propriétés listées explicitement (jamais « all ») — cf. audit 2026-07.
     Couvre tous les états :hover du site (cartes, liens, boutons, icônes) :
     élévation, ombre, contour et couleur. Permet au navigateur d'optimiser
     et évite d'animer par erreur des propriétés de layout. */
  --transition-base: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                     box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                     border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                     background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                     color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode Variables */
/* Mode sombre aligné sur la palette des dialogues Reveal!t (dialog.markit) :
   gris neutre pur, cohérent avec le complément. */
[data-theme="dark"] {
  --color-bg: #1a1a1a;          /* fond de base (panneaux, colonnes) */
  --color-surface: #252526;     /* surfaces élevées (cartes, header, footer) */
  --color-surface-card: rgba(37, 37, 38, 0.72);
  --color-border: #3a3a3a;
  --color-border-card: rgba(255, 255, 255, 0.07);

  --text-primary: #d4d4d4;
  --text-secondary: #999999;
  --text-muted: #777777;
  
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   BASE STYLES
   ============================================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ---- Images à variante de thème (double <img> piloté par data-theme) ----
   Utilisation :
     <picture class="theme-img">
       <img class="theme-img-light" src="…​.png" alt="…">
       <img class="theme-img-dark"  src="….dark.png" alt="" aria-hidden="true">
     </picture>
   Réagit au toggle manuel (data-theme) ET, à défaut, à la préférence système. */
.theme-img { display: inline-flex; align-items: center; }
.theme-img img.theme-img-dark { display: none; }
[data-theme="dark"] .theme-img img.theme-img-light { display: none; }
[data-theme="dark"] .theme-img img.theme-img-dark { display: block; }

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 15px;
  background-color: var(--color-bg);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.25;
}

a {
  text-decoration: none;
  color: inherit;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================================
   BUTTONS & ACCENTS
   ============================================================ */
.btn-primary-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  background: var(--color-accent-gradient);
  color: var(--text-inverse);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255, 107, 53, 0.3);
  transition: var(--transition-base);
}

.btn-primary-custom:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
  background: linear-gradient(135deg, #e85d22 0%, #FF6B35 100%);
}

.btn-primary-custom:active {
  transform: translateY(0);
}

.btn-secondary-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  background: var(--color-surface);
  color: var(--text-primary);
  border: 1px solid var(--color-border);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
}

.btn-secondary-custom:hover {
  background: var(--color-bg);
  border-color: var(--text-secondary);
  transform: translateY(-2px);
}

.btn-secondary-custom.dark-border {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-secondary-custom.dark-border:hover {
  background: var(--color-accent-soft);
}

.btn-lg {
  padding: 14px 32px;
  font-size: 16px;
  border-radius: var(--radius-sm);
}

.text-gradient {
  background: var(--color-accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   HEADER
   ============================================================ */
.main-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: rgba(248, 249, 250, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  padding: 0;
  /* Seules propriétés GPU-safe pour éviter tout freeze */
  will-change: box-shadow;
  transition: box-shadow 0.3s ease;
}

[data-theme="dark"] .main-header {
  background-color: rgba(26, 26, 26, 0.95);
}

/* Header Rows — hauteur du top-row fixée pour que le passage à l'état
   scrollé (qui masque la 2e ligne) ne fasse pas "sauter" le contenu de page */
.header-top-row {
  padding: 10px 0;
  min-height: 56px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

/* Ancrage des sections : offset fixé sur la hauteur MAX du header (mode normal,
   2 lignes) pour que le scroll-to-anchor (clic menu, smooth-scroll natif) vise
   toujours le même point, que le header soit encore en mode normal ou déjà
   passé en mode "scrolled" (1 ligne) pendant l'animation. Sans cet offset fixe,
   le point de destination se déplaçait sous le curseur de scroll au moment où
   le header changeait de hauteur (franchissement du seuil de 20px), provoquant
   les sauts/gels observés en particulier au scroll remontant. */
section[id] {
  scroll-margin-top: 140px;
}

/* Pendant la mesure JS de la géométrie du menu voyageur : aucune transition
   ni animation, l'état scrollé s'applique instantanément pour lire les
   positions finales exactes sans flash visible. */
.main-header.measuring,
.main-header.measuring * {
  transition: none !important;
  animation: none !important;
}

.header-top-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* .header-top-row est flex : sans flex:1, ce .container (flex-item) rétrécit
     à la largeur de son contenu puis est centré par son margin auto — tout le
     header flottait au centre au lieu d'être ancré gauche/droite. */
  flex: 1;
}

.header-left-side {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

/* ============================================================
   CARTE FLIP — œil Reveal!t (face avant, mode normal) ↔ hamburger
   (face arrière, mode scrollé). Une seule icône qui se retourne
   autour de l'axe Y (flip horizontal droite→gauche).
   ============================================================ */
.brand-flip {
  position: relative;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.main-header.scrolled .brand-flip {
  transform: rotateY(180deg);
}
.brand-flip-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.brand-flip-burger { transform: rotateY(180deg); }
.brand-flip-eye .logo-mark {
  height: 26px;
  width: auto;
  display: block;
}
/* Le trait de l'icône est un gris foncé (~#393939), pas du noir pur : un
   simple invert(1) donne un gris clair. On ajoute brightness pour la
   pousser vers le blanc en mode sombre. */
[data-theme="dark"] .brand-flip-eye .logo-mark { filter: invert(1) brightness(1.6); }
.brand-flip-burger .revealit-menu-burger {
  width: 22px;
  height: 22px;
  color: var(--text-primary);
}
/* Focus clavier accessible sur la carte flip */
.brand-flip:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---- Logo wrap (wordmark Reveal!t seul) ---- */
.logo-wrap {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

/* Wordmark SVG : rétrécit au scroll */
.logo-wordmark {
  height: 26px;
  width: auto;
  display: block;
  transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.main-header.scrolled .logo-wordmark {
  height: 20px;
}

[data-theme="dark"] .logo-wordmark {
  filter: invert(1) hue-rotate(180deg);
}

/* ---- Suite navigation (normale) ---- */
.suite-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  border-left: 1px solid var(--color-border);
  padding-left: 12px;
  flex-shrink: 0;
  transition: gap 0.35s ease, padding-left 0.35s ease;
}

.suite-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  overflow: hidden;
  white-space: nowrap;
  max-width: 220px;
  transition: border-color 0.2s ease, background-color 0.2s ease,
    max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s ease, opacity 0.25s ease;
}

/* Compléments non-courants : se replient en largeur au scroll jusqu'à disparaître */
.main-header.scrolled .suite-nav-item.suite-collapse {
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  border-color: transparent;
}

/* Au scroll, les items repliés (max-width:0) laisseraient quand même le
   flex-gap de la suite-nav de chaque côté : on annule le gap pour que le
   menu voyageur se recolle à l'item actif au lieu de flotter à droite. */
.main-header.scrolled .suite-nav {
  gap: 0;
}

.suite-nav-item:not(.disabled):hover {
  border-color: var(--color-border);
  background-color: var(--color-surface);
}

.suite-nav-item.active {
  border-color: var(--color-border);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.suite-nav-icon {
  height: 18px;
  width: 18px;
  object-fit: contain;
  border-radius: 4px;
  display: block;
  flex-shrink: 0;
}

.suite-logo-img {
  height: 20px;
  width: auto;
  display: block;
}

[data-theme="dark"] .suite-logo-img {
  filter: invert(1) hue-rotate(180deg);
}

.suite-nav-item.disabled {
  font-family: 'Kaushan Script', cursive;
  font-weight: 400;
  font-size: 16px;
  color: var(--text-secondary);
  opacity: 0.4;
  cursor: not-allowed;
  user-select: none;
}

.suite-nav-item.disabled .pasteit-text { color: #888; }
.suite-nav-item.disabled .pasteit-text .bang { color: #888; }

/* ---- Play!t compact (caché par défaut) ---- */
.playit-compact {
  display: none;
  align-items: center;
  border-left: 1px solid var(--color-border);
  padding-left: 12px;
  flex-shrink: 0;
}

.playit-compact-img {
  height: 15px;
  width: auto;
  display: block;
}

[data-theme="dark"] .playit-compact-img {
  filter: invert(1) hue-rotate(180deg);
}

/* ---- Nav inline = FANTÔME de mesure : réserve la place naturelle du menu
   voyageur dans la 1re ligne en mode scrollé. Toujours invisible et sans
   interaction ; sert uniquement de cible pour aligner (x) et calculer le
   voyage vertical du vrai menu. ---- */
.nav-menu.nav-inline {
  visibility: hidden;
  pointer-events: none;
  gap: 24px;
  border-left: 1px solid var(--color-border);
  padding-left: 8px;
  flex-shrink: 1;
  min-width: 0;
}

/* ---- Header actions ---- */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* ---- Bottom nav row : se replie en hauteur au scroll pendant que le menu
   qu'elle contient voyage vers la 1re ligne (translateY). ---- */
.header-bottom-row {
  border-top: 1px solid var(--color-border);
  overflow: visible;
  max-height: 44px;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-top-color 0.25s ease;
}
.main-header.scrolled .header-bottom-row {
  max-height: 0;
  border-top-color: transparent;
}

.header-bottom-container {
  display: flex;
  justify-content: flex-start;
  padding: 8px 0;
  /* Masqué jusqu'à ce que app.js ait mesuré et appliqué le padding-left
     d'alignement : évite le flash « menu à gauche puis saut à droite ». */
  opacity: 0;
}
.header-bottom-container.is-aligned {
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* Le menu voyageur : translation verticale de la 2e vers la 1re ligne.
   --nav-travel est mesuré/injecté par app.js (distance exacte au pixel). */
.header-bottom-container .nav-menu {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.main-header.scrolled .header-bottom-container .nav-menu {
  transform: translateY(calc(-1 * var(--nav-travel, 46px)));
}

/* ---- Nav links ---- */
.nav-menu {
  display: flex;
  gap: 32px;
}

.nav-link {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color 0.2s ease;
  position: relative;
  padding: 4px 0;
  white-space: nowrap;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-accent);
  /* Soulignement animé via scaleX (GPU) plutôt que width — cf. audit 2026-07 */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.nav-link:hover { color: var(--color-accent); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active { color: var(--color-accent); font-weight: 600; }
.nav-link.active::after { transform: scaleX(1); }

/* =============================================================
   HEADER SCROLLED STATE
   Modèle animé : tout reste dans le layout, on transitionne
   transform / max-width / max-height / height / opacity. Le passage
   2 lignes → 1 ligne se fait donc de façon fluide et continue.
   ============================================================= */

/* Ombre au scroll */
.main-header {
  transition: box-shadow 0.35s ease;
}
.main-header.scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .main-header.scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Le top-row garde une hauteur stable ; seul le padding se resserre un peu */
.main-header.scrolled .header-top-row {
  padding: 8px 0;
}
.header-top-row {
  transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Theme toggle ---- */
.btn-theme {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.btn-theme:hover {
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
}

.btn-theme svg { width: 20px; height: 20px; }

.sun-icon { display: block; }
.moon-icon { display: none; }

[data-theme="dark"] .sun-icon { display: none; }
[data-theme="dark"] .moon-icon { display: block; }


/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-section {
  padding: 80px 0 100px 0;
  position: relative;
  /* overflow-x:clip contient le halo décoratif ::before sans bloquer le
     défilement vertical. `overflow:hidden` créait un conteneur de scroll qui,
     sur mobile (hero empilé très haut), perturbait le scroll de la page —
     cf. correctif 2026-07. */
  overflow-x: clip;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background-radial: radial-gradient(circle, rgba(255, 107, 53, 0.1) 0%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}

.hero-container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* Wordmark agrandi, ancré à gauche ; le badge est poussé à droite par le
   space-between du .badge-row. */
.badge-row-wordmark {
  font-size: 34px;
  line-height: 1;
}

/* .product-badge garde un margin-bottom:24px pour son usage standalone ;
   dans une badge-row (flex, align-items:center), ce margin fausse le centrage
   vertical (flexbox centre la margin-box) : le badge remonte de 12px et le
   wordmark paraît décalé vers le bas. On l'annule dans ce contexte. */
.badge-row .product-badge {
  margin-bottom: 0;
}

.badge-new {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--color-accent-soft);
  color: var(--color-accent-text);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid rgba(255, 107, 53, 0.2);
}

.badge-dot {
  width: 8px;
  height: 8px;
  background-color: var(--color-accent);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(255, 107, 53, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 107, 53, 0); }
}

.hero-title {
  font-size: 54px;
  font-weight: 800;
  letter-spacing: -1.5px;
  margin-bottom: 24px;
  line-height: 1.15;
}

.hero-title-plain {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-primary);
  white-space: nowrap;
}

@media (max-width: 480px) {
  .hero-title-plain { font-size: 22px; white-space: normal; }
}

/* Pages produit (Play!t/Mark!t) : même traitement que .hero-title-plain,
   sans nowrap car les phrases y sont plus longues */
.product-hero .hero-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text-primary);
}

@media (max-width: 480px) {
  .product-hero .hero-title { font-size: 22px; }
}

.hero-usage-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}

.usage-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background-color: var(--color-surface-card);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.usage-card-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.usage-card-icon svg {
  width: 17px;
  height: 17px;
}

/* Survol : mêmes effets que les autres cartes du site (feature/quick-start) —
   élévation + bordure orange, et l'icône passe au dégradé orange / blanc. */
.usage-card {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.usage-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}
.usage-card-icon {
  transition: background 0.2s ease, color 0.2s ease;
}
.usage-card:hover .usage-card-icon {
  background: var(--color-accent-gradient);
  color: var(--text-inverse);
}

.usage-card strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 2px;
}

.usage-card p {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.35;
}

@media (max-width: 480px) {
  .hero-usage-cards { grid-template-columns: 1fr; }
}

/* Wordmark "Reveal!t" dans le titre hero (Kaushan Script, "!" ambre) */
.wordmark-title {
  font-family: 'Kaushan Script', cursive;
  font-weight: 400;
  letter-spacing: 0;
  -webkit-text-stroke: 0.6px currentColor;
}
.wordmark-title .bang { color: #f59e0b; }

/* Variante pour fond orange (ex: bandeau CTA téléchargement) : texte blanc, "!" jaune clair pour rester lisible */
.wordmark-title--inverse { color: #ffffff; }
.wordmark-title--inverse .bang { color: #fff3d6; }

.hero-subtitle {
  font-size: 18px;
  color: var(--text-secondary);
  margin-bottom: 40px;
  font-weight: 400;
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.hero-stats {
  display: flex;
  gap: 40px;
  border-top: 1px solid var(--color-border);
  padding-top: 24px;
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.stat-num {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* PLAY!T HERO BADGE */
.playit-badge-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
}

.playit-badge-hero:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.playit-badge-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 8px;
}

.playit-badge-label {
  font-size: 13px;
  color: var(--text-secondary);
}

.playit-badge-label strong {
  color: var(--text-primary);
  font-weight: 700;
}

/* WORD MOCKUP VISUAL */
.hero-visual {
  position: relative;
}

.mockup-frame {
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transition: transform 0.5s ease;
}

.mockup-frame:hover {
  transform: translateY(-5px);
}

.mockup-header {
  background-color: #f1f5f9;
  padding: 12px 16px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 6px;
}

[data-theme="dark"] .mockup-header {
  background-color: #252526;
  border-bottom-color: #3a3a3a;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dot.red { background-color: #ef4444; }
.dot.yellow { background-color: #f59e0b; }
.dot.green { background-color: #10b981; }

.mockup-title {
  margin-left: 12px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  font-family: var(--font-heading);
}

[data-theme="dark"] .mockup-title {
  color: #999999;
}

.word-ribbon-stub {
  background-color: #f8fafc;
  padding: 8px 16px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  gap: 12px;
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
}

[data-theme="dark"] .word-ribbon-stub {
  background-color: #1a1a1a;
  border-bottom-color: #3a3a3a;
  color: #999999;
}

.word-ribbon-stub .tab.active {
  color: var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  font-weight: 600;
}

.word-ribbon-stub .tab.highlight {
  background-color: var(--color-accent-soft);
  color: var(--color-accent-text);
  border-radius: 4px;
  padding: 0 8px;
  font-weight: 600;
}

.word-document-content {
  padding: 24px;
  background-color: #ffffff;
  color: #333333;
  min-height: 280px;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
}

.word-document-content h3 {
  font-size: 16px;
  color: #2c3e50;
  margin-bottom: 12px;
}

.word-document-content p {
  line-height: 1.5;
  margin-bottom: 16px;
}

.video-block-mockup {
  border: 1px solid #dcdcdc;
  background-color: #fafafa;
  padding: 6px;
  margin-bottom: 16px;
  border-radius: 4px;
  max-width: 100%;
}

.video-thumbnail-mock {
  position: relative;
  aspect-ratio: 16/9;
  background-color: #1e293b;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
}

/* Vraie miniature YouTube (couvre tout le bloc) */
.video-thumbnail-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.video-thumbnail-mock:hover .play-btn-circle {
  transform: scale(1.08);
  background-color: var(--color-accent);
}

.video-overlay-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%);
  z-index: 1;
}

.play-btn-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgba(255, 107, 53, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: transform 0.2s ease;
}

.play-btn-circle svg {
  width: 20px;
  height: 20px;
  margin-left: 2px;
}

.video-title-overlay {
  position: absolute;
  bottom: 8px;
  left: 10px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  z-index: 2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 100px);
}

.qr-code-overlay {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #ffffff;
  padding: 4px;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  z-index: 2;
}

.qr-code-overlay.pos-top-right {
  top: 8px;
  right: 8px;
}

.qr-code-box {
  width: 100%;
  height: 100%;
  color: #000000;
}

.qr-svg {
  width: 100%;
  height: 100%;
}

.question-line {
  font-style: italic;
  color: #666;
}

/* ============================================================
   VIDEO SECTION
   ============================================================ */
.video-section {
  padding: 80px 0;
  background-color: var(--color-bg);
  transition: background-color 0.3s ease;
}

.video-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.video-wrapper {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16/9;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
}

.youtube-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ============================================================
   FEATURES SECTION
   ============================================================ */
.features-section {
  padding: 100px 0;
  background-color: var(--color-surface);
  transition: background-color 0.3s ease;
}

.section-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 60px auto;
}

.section-title-main {
  font-size: 38px;
  font-weight: 800;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.section-subtitle-main {
  font-size: 16px;
  color: var(--text-secondary);
}

/* ---- Groupe de fonctionnalités (ex: "Outils" / "Formes" sur Mark!t) :
   petite capture + titre à gauche, séparateur vertical, cards du groupe à droite ---- */
.features-group {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  margin-bottom: 56px;
}

.features-group:last-child {
  margin-bottom: 0;
}

.features-group-shot-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex-shrink: 0;
  width: 200px;
}

.features-group-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}

.features-group-shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.features-group-sep {
  align-self: stretch;
  width: 1px;
  background-color: var(--color-border);
  flex-shrink: 0;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
}

.features-group .features-grid {
  flex: 1;
  min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

@media (max-width: 860px) {
  .features-group {
    flex-direction: column;
  }
  .features-group-shot-col {
    width: 100%;
    max-width: 320px;
  }
  .features-group-sep {
    width: 100%;
    height: 1px;
    align-self: auto;
  }
}

.feature-card {
  background-color: var(--color-surface-card);
  border: 1px solid var(--color-border-card);
  padding: 32px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
}

.feature-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.feature-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.feature-icon {
  width: 44px;
  height: 44px;
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition-base);
}

.feature-card:hover .feature-icon {
  background: var(--color-accent-gradient);
  color: var(--text-inverse);
}

.feature-icon svg {
  width: 24px;
  height: 24px;
}

/* Carte "Multi-plateformes" : rangée de logos réels sous le texte, icône générique dans le header */
.feature-platforms-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.feature-platforms-row svg {
  flex-shrink: 0;
}

.feature-card-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.feature-card-text {
  color: var(--text-secondary);
  font-size: 14px;
}

/* ============================================================
   INTEGRATION SECTION
   ============================================================ */
.integration-section {
  padding: 100px 0;
  background-color: var(--color-bg);
  transition: background-color 0.3s ease;
}

.integration-container {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: center;
}

.integration-content {
  display: flex;
  flex-direction: column;
}

.badge-accent {
  align-self: flex-start;
  font-family: var(--font-heading);
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--color-accent);
  background-color: var(--color-accent-soft);
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 16px;
}

.section-title-main.text-left {
  text-align: left;
}

.integration-text {
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: 32px;
}

.integration-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.integration-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.check-icon {
  width: 20px;
  height: 20px;
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.integration-list li span {
  font-size: 15px;
  color: var(--text-primary);
}

.integration-visual {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.step-card-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.step-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 20px 24px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
}

.step-card.highlight {
  border-left: 4px solid var(--color-accent);
  background-color: var(--color-surface);
}

.step-card:hover {
  transform: translateX(5px);
  box-shadow: var(--shadow-md);
}

.step-num {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 800;
  color: var(--color-accent);
  opacity: 0.8;
}

.step-card h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 2px;
  flex-shrink: 0;
  width: 180px;
}

.step-card p {
  font-size: 13px;
  color: var(--text-secondary);
}

/* Réagit à la largeur de la CARTE (pas de l'écran) : ces cartes vivent dans
   une colonne étroite (~490px) même sur desktop, donc une media query sur le
   viewport ne suffit pas. Container query → dès que la carte est trop étroite
   pour aligner titre + texte confortablement, le texte passe sous le titre.
   cf. correctif 2026-07. */
.step-card-wrap {
  container-type: inline-size;
}

@container (max-width: 620px) {
  .step-card {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .step-card h4 {
    width: auto;          /* le titre ne réserve plus 180px fixes */
  }
  .step-card p {
    flex: 0 0 100%;       /* texte sur sa propre ligne, pleine largeur */
    padding-left: 45px;   /* aligné sous le titre (largeur du numéro + gap) */
  }
}

/* ============================================================
   FUTURE ADDINS (COMING SOON) SECTION
   ============================================================ */
.future-section {
  padding: 100px 0;
  background-color: var(--color-surface);
  transition: background-color 0.3s ease;
}

.future-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.future-card-item {
  background-color: var(--color-surface-card);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-md);
  padding: 32px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.future-card-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

/* Soft color indicator on hover */
.future-card-item:hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-accent-gradient);
}

.future-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-secondary);
  background-color: var(--color-bg);
  padding: 4px 10px;
  border-radius: 50px;
  letter-spacing: 0.5px;
}

.future-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.future-icon-wrap svg {
  width: 20px;
  height: 20px;
}

.future-card-item h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}

.future-card-item p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ============================================================
   FAQ SECTION
   ============================================================ */
.faq-section {
  padding: 100px 0;
  background-color: var(--color-bg);
  transition: background-color 0.3s ease;
}

.faq-container {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
}

.faq-intro {
  display: flex;
  flex-direction: column;
}

.faq-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  margin-top: 16px;
  margin-bottom: 32px;
}

.faq-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--color-accent);
  transition: var(--transition-base);
}

.faq-contact-link svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.faq-contact-link:hover {
  color: var(--color-accent-hover);
}

.faq-contact-link:hover svg {
  transform: translateX(4px);
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
}

.faq-question {
  width: 100%;
  padding: 20px 24px;
  background: none;
  border: none;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  outline: none;
  transition: var(--transition-base);
}

.faq-question:hover {
  color: var(--color-accent);
}

/* Focus clavier visible — cf. audit 2026-07 (remplace outline:none) */
.faq-question:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.faq-arrow {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
}

.faq-question[aria-expanded="true"] .faq-arrow {
  transform: rotate(180deg);
  color: var(--color-accent);
}

/* Accordéon : animé via grid-template-rows 0fr → 1fr plutôt que max-height
   (cf. audit 2026-07). Plus fluide, sans hauteur magique, et n'anime plus
   une propriété de layout coûteuse. Le <p> interne porte l'overflow. */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--text-secondary);
  font-size: 14.5px;
}

.faq-answer > * {
  overflow: hidden;
  min-height: 0;
  padding: 0 24px;
}

.faq-question[aria-expanded="true"] + .faq-answer {
  grid-template-rows: 1fr;
}

.faq-question[aria-expanded="true"] + .faq-answer > * {
  padding-bottom: 20px;
}

/* ============================================================
   DOWNLOAD SECTION
   ============================================================ */
.download-section {
  padding: 80px 0;
  background-color: var(--color-surface);
  transition: background-color 0.3s ease;
}

.download-container {
  display: flex;
  justify-content: center;
}

.download-box {
  background: var(--color-accent-gradient);
  color: var(--text-inverse);
  padding: 60px;
  border-radius: var(--radius-md);
  text-align: center;
  max-width: 800px;
  box-shadow: 0 10px 30px rgba(255, 107, 53, 0.25);
  position: relative;
  overflow: hidden;
}

.download-box::before {
  content: '';
  position: absolute;
  top: -80px;
  left: -80px;
  width: 240px;
  height: 240px;
  background-color: rgba(255,255,255,0.06);
  border-radius: 50%;
  pointer-events: none;
}

.download-title {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 16px;
}

.download-text {
  font-size: 16px;
  opacity: 0.9;
  margin-bottom: 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.download-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.download-buttons .btn-primary-custom {
  background: #ffffff;
  color: var(--color-accent-text);
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}

.download-buttons .btn-primary-custom:hover {
  background: #f8fafc;
  transform: translateY(-2px);
}

.download-buttons .btn-secondary-custom {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: none;
}

.download-buttons .btn-secondary-custom:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #ffffff;
}

/* ============================================================
   FOOTER
   ============================================================ */
.main-footer {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: 60px 0 24px 0;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.footer-container {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-brand .logo {
  display: inline-block;
  margin-bottom: 16px;
}

.footer-brand p {
  color: var(--text-secondary);
  font-size: 14px;
  max-width: 320px;
}

.footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.footer-links-col h5 {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.footer-links-col a {
  display: block;
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  transition: var(--transition-base);
}

.footer-links-col a:hover {
  color: var(--color-accent);
}

.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted);
}

/* ============================================================
   RESPONSIVE DESIGN
   ============================================================ */
@media (max-width: 992px) {
  .hero-container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }
  /* .product-hero .hero-container est traité par sa propre MQ, placée APRÈS
     sa règle de base plus bas dans le fichier (question de spécificité). */

  .hero-title {
    font-size: 42px;
  }
  
  .hero-actions {
    justify-content: center;
  }
  
  .hero-stats {
    justify-content: center;
  }
  
  .hero-visual {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
  }
  
  .integration-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .integration-content {
    order: -1;
  }
  
  .faq-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ---- Header compact / mobile (cf. correctif responsive 2026-07) ----
   Déclenché à 900px (et non 768) : la suite-nav complète
   (Reveal!t/Play!t/Mark!t/Paste!t) + le bouton thème dépassaient ~800px de
   large et débordaient sur tablette étroite. On masque la suite-nav et on
   bascule le brand-flip en hamburger permanent ; le menu déroulant
   .revealit-menu (déjà complet) devient l'unique accès à la navigation. */
@media (max-width: 900px) {
  .suite-nav {
    display: none;
  }
  .brand-flip {
    transform: rotateY(180deg); /* face hamburger en permanence */
  }
  .header-top-container {
    gap: 10px;
  }
  /* En mode hamburger, le menu déroulant est l'unique accès nav : on masque
     AUSSI la barre de navigation du bas (Features/Video demo/…) et on replie
     sa ligne. Sans ça, entre 768 et 900px elle restait affichée et venait
     chevaucher le wordmark (cf. correctif 2026-07). */
  .nav-menu {
    display: none;
  }
  .header-bottom-row {
    display: none;
  }
}

@media (max-width: 768px) {
  .footer-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .footer-links {
    grid-template-columns: 1fr 1fr;
  }
  
  .download-box {
    padding: 40px 24px;
  }
  
  .download-title {
    font-size: 26px;
  }
}

/* ============================================================
   PRODUCT PAGES ADDITIONS (playit.html / markit.html)
   ============================================================ */

/* Active suite-nav item : voir .suite-nav-item.active (carte) plus haut */

/* ---- Mark!t compact (caché par défaut, apparaît au scroll) ---- */
.markit-compact {
  display: none;
  align-items: center;
  border-left: 1px solid var(--color-border);
  padding-left: 12px;
  flex-shrink: 0;
}

.markit-compact-img {
  height: 15px;
  width: auto;
  display: block;
}

[data-theme="dark"] .markit-compact-img {
  filter: invert(1) hue-rotate(180deg);
}

/* Play!t/Mark!t compact désormais remplacés par le menu déroulant Reveal!t :
   ils restent masqués même au scroll. */
.main-header.scrolled .markit-compact,
.main-header.scrolled .playit-compact {
  display: none;
}

/* ---- Product hero (Play!t / Mark!t) ---- */
.product-hero {
  padding: 70px 0 90px 0;
  position: relative;
  /* Idem .hero-section : clip horizontal seul, ne bloque pas le scroll vertical. */
  overflow-x: clip;
}

.product-hero::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255, 107, 53, 0.1) 0%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}

.product-hero .hero-container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

/* Responsive : DOIT venir après la règle de base ci-dessus. À spécificité
   égale (0,2,0), c'est la dernière dans le fichier qui gagne — la MQ 992px
   plus haut était neutralisée par la règle de base située en dessous d'elle.
   Cf. correctif responsive 2026-07 (2e itération). */
@media (max-width: 992px) {
  .product-hero .hero-container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }
}

.product-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--color-accent-soft);
  color: var(--color-accent-text);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 24px;
  border: 1px solid rgba(255, 107, 53, 0.2);
}

.product-badge .badge-dot {
  width: 8px;
  height: 8px;
  background-color: var(--color-accent);
  border-radius: 50%;
}

/* ---- Mark!t editor mockup (canvas + tools panel) ---- */
.markit-mockup-body {
  display: flex;
  min-height: 300px;
  background-color: #ffffff;
}

[data-theme="dark"] .markit-mockup-body {
  background-color: #141414;
}

.markit-canvas {
  flex: 1;
  position: relative;
  background-color: #eef2f7;
  background-image:
    linear-gradient(45deg, #dfe6ee 25%, transparent 25%),
    linear-gradient(-45deg, #dfe6ee 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #dfe6ee 75%),
    linear-gradient(-45deg, transparent 75%, #dfe6ee 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

[data-theme="dark"] .markit-canvas {
  background-color: #141414;
  background-image:
    linear-gradient(45deg, #2a2a2a 25%, transparent 25%),
    linear-gradient(-45deg, #2a2a2a 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #2a2a2a 75%),
    linear-gradient(-45deg, transparent 75%, #2a2a2a 75%);
}

.markit-canvas-photo {
  width: 78%;
  aspect-ratio: 4/3;
  border-radius: 6px;
  background: linear-gradient(135deg, #FF8552 0%, #FF6B35 45%, #c94f2a 100%);
  box-shadow: 0 10px 26px rgba(0,0,0,0.22);
  position: relative;
  overflow: hidden;
}

/* Annotation elements on the mock photo */
.markit-anno-arrow {
  position: absolute;
  top: 22%;
  left: 18%;
  width: 34%;
  height: 3px;
  background: #ffffff;
  transform: rotate(22deg);
  transform-origin: left center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.markit-anno-arrow::after {
  content: '';
  position: absolute;
  right: -2px;
  top: -5px;
  border-left: 12px solid #ffffff;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.markit-anno-rect {
  position: absolute;
  bottom: 20%;
  right: 16%;
  width: 30%;
  height: 26%;
  border: 3px solid #ffffff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.markit-anno-text {
  position: absolute;
  top: 10%;
  right: 12%;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.markit-toolbar {
  width: 56px;
  flex-shrink: 0;
  background-color: #f8fafc;
  border-left: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 0;
}

[data-theme="dark"] .markit-toolbar {
  background-color: #1a1a1a;
  border-left-color: #3a3a3a;
}

.markit-tool {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
}

[data-theme="dark"] .markit-tool {
  background-color: #2d2d2d;
  border-color: #3a3a3a;
  color: #d4d4d4;
}

.markit-tool.active {
  background: var(--color-accent-gradient);
  color: #ffffff;
  border-color: transparent;
}

.markit-tool svg {
  width: 18px;
  height: 18px;
}

/* Vraie capture produit dans le hero (remplace le mockup CSS) — Reveal!t / Play!t / Mark!t */
.hero-real-capture {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- Animation de révélation au scroll (7 frames, crossfade) ---- */
.mockup-anim {
  position: relative;
}
.mockup-anim .anim-layer {
  transition: opacity 0.18s ease;
}
/* La couche B est superposée à la couche A pour le fondu entre frames */
.mockup-anim .anim-layer-b {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.mockup-anim .anim-layer.is-active {
  opacity: 1;
}
.mockup-anim .anim-layer:not(.is-active) {
  opacity: 0;
}

/* ---- Zoom + pan au scroll (page Mark!t) ---- */
.mockup-zoom {
  overflow: hidden;
}
.mockup-zoom .zoom-img {
  transform-origin: top left;
  will-change: transform;
  /* Léger lissage entre deux mises à jour de scroll */
  transition: transform 0.08s linear;
}

/* ---- Curseur de souris animé (page Play!t) ---- */
.mockup-anim-playit .anim-cursor {
  position: absolute;
  /* left/top pilotés en % par app.js selon la progression de scroll.
     translate(-2px,-2px) : la pointe de la flèche (et non son coin) tombe
     pile sur le point visé. */
  left: 12.92%;
  top: 62.88%;
  transform: translate(-2px, -2px);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  pointer-events: none;
  z-index: 2;
  will-change: left, top;
}

/* ============================================================
   REVEAL!T DROPDOWN MENU (bouton compact au scroll)
   Remplace l'ancienne icône + Play!t/Mark!t compacts.
   Cohérent avec le dropdown de langue (i18n.js).
   ============================================================ */

/* Wrapper positionnant le menu par rapport au bouton */
.revealit-menu-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* Panneau déroulant */
.revealit-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 230px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 2000;
}

.revealit-menu.open {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.revealit-menu-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  padding: 8px 10px 4px 10px;
  opacity: 0.7;
}

.revealit-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  width: 100%;
  text-align: left;
  transition: background-color 0.15s ease, color 0.15s ease;
  text-decoration: none;
}

.revealit-menu-item:hover {
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
}

.revealit-menu-item .revealit-menu-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Icône Reveal!t (œil PNG noir) inversée en dark */
[data-theme="dark"] .revealit-menu-item .revealit-menu-icon.invert-dark {
  /* Icône Reveal!t (trait gris ~#393939) : brightness pour la blanchir. */
  filter: invert(1) brightness(1.6);
}

.revealit-menu-item.disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

.revealit-menu-item.disabled:hover {
  background: none;
  color: var(--text-muted);
}

.revealit-menu-item .item-soon {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--color-bg);
  padding: 2px 7px;
  border-radius: 50px;
}

.revealit-menu-sep {
  height: 1px;
  background: var(--color-border);
  margin: 6px 4px;
  border: none;
}

/* ============================================================
   HOME — "COMMENT MARCHE REVEAL!T" (ruban + étapes)
   ============================================================ */
.how-section {
  padding: 100px 0;
  background-color: var(--color-surface);
  transition: background-color 0.3s ease;
}

.how-ribbon-frame {
  max-width: 960px;
  margin: 0 auto 56px auto;
}

.how-ribbon-frame img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  background-color: var(--color-bg);
}

/* ---- Démarrage rapide (contenu de la section #how) ---- */
.quickstart-block {
  text-align: center;
}

.quickstart-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 32px;
}

.quickstart-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
}

.qs-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 18px;
  background-color: var(--color-surface-card);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
}

.qs-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.qs-step-num {
  color: var(--color-accent);
  font-weight: 700;
}

.qs-card-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.qs-card-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.qs-card-icon svg {
  width: 22px;
  height: 22px;
}

/* Survol : le fond passe au dégradé orange, les icônes SVG (currentColor)
   deviennent blanches. */
.qs-card:hover .qs-card-icon {
  background: var(--color-accent-gradient);
  color: var(--text-inverse);
}

/* Icônes PNG à 2 états : variante orange au repos, blanche au survol.
   <span class="qs-card-icon qs-icon-swap">
     <img class="qs-icon-rest"  src="…​.orange.png" alt="">
     <img class="qs-icon-hover" src="….white.png"  alt="" aria-hidden="true">
   </span> */
.qs-icon-swap .qs-icon-hover { display: none; }
.qs-card:hover .qs-icon-swap .qs-icon-rest { display: none; }
.qs-card:hover .qs-icon-swap .qs-icon-hover { display: block; }

.qs-card-icon-double img {
  width: 16px;
  height: 16px;
}

.qs-card strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 14.5px;
  margin-bottom: 4px;
}

.qs-card p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Cadre du ruban sous "Démarrage rapide" */
.quickstart-ribbon {
  max-width: 1100px;
  margin: 24px auto 48px;
}

.quickstart-ribbon img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  background-color: var(--color-bg);
}

/* ============================================================
   HOME — "LA GAMME" (cartes compléments)
   ============================================================ */
.range-section {
  padding: 100px 0;
  background-color: var(--color-bg);
  transition: background-color 0.3s ease;
}

.range-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.range-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface-card);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
}

.range-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.range-card-badge {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 50px;
  margin-bottom: 20px;
}

.range-card-badge.available {
  color: #0f9d58;
  background-color: rgba(16, 185, 129, 0.12);
}

.range-card-badge.soon {
  color: var(--color-accent-text);
  background-color: var(--color-accent-soft);
}

.range-card-badge.planned {
  color: var(--text-secondary);
  background-color: var(--color-bg);
}

.range-card-logo {
  height: 24px;
  width: auto;
  object-fit: contain;
  margin-bottom: 14px;
  align-self: flex-start;
}

[data-theme="dark"] .range-card-logo.invert-dark {
  filter: invert(1) hue-rotate(180deg);
}

.range-card-name {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 10px;
}

.range-card p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.range-note {
  text-align: center;
  font-size: 16px;
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 auto;
}

.range-note strong {
  color: var(--text-primary);
}

/* ============================================================
   HOME — ROADMAP (frise)
   ============================================================ */
.roadmap-section {
  padding: 100px 0;
  background-color: var(--color-surface);
  transition: background-color 0.3s ease;
}

.roadmap-track {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 760px;
  margin: 0 auto;
  position: relative;
}

.roadmap-item {
  display: flex;
  gap: 24px;
  position: relative;
  padding-bottom: 32px;
}

.roadmap-item:last-child {
  padding-bottom: 0;
}

/* Ligne verticale reliant les points */
.roadmap-item::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 34px;
  bottom: -2px;
  width: 2px;
  background: var(--color-border);
}

.roadmap-item:last-child::before {
  display: none;
}

.roadmap-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14px;
  color: #ffffff;
  background: var(--color-accent-gradient);
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
  z-index: 1;
}

.roadmap-item.upcoming .roadmap-dot {
  background: var(--color-surface);
  color: var(--text-muted);
  border: 2px solid var(--color-border);
  box-shadow: none;
}

.roadmap-content {
  flex: 1;
  padding-top: 2px;
}

.roadmap-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.roadmap-name {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
}

.roadmap-status {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 50px;
  color: var(--text-secondary);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.roadmap-item.available .roadmap-status {
  color: #0f9d58;
  background-color: rgba(16, 185, 129, 0.12);
  border-color: transparent;
}

.roadmap-item.final .roadmap-status {
  color: var(--color-accent-text);
  background-color: var(--color-accent-soft);
  border-color: transparent;
}

.roadmap-content p {
  font-size: 14px;
  color: var(--text-secondary);
}

.roadmap-intro {
  text-align: center;
  font-size: 16px;
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 auto 56px auto;
}

/* Reveal!t hidden-text mockup (hero accueil) */
.reveal-hidden {
  background: var(--color-accent);
  color: transparent;
  border-radius: 3px;
  padding: 0 4px;
  user-select: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}

.reveal-shown {
  background: rgba(16, 185, 129, 0.18);
  color: #0f9d58;
  border-radius: 3px;
  padding: 0 4px;
  font-weight: 600;
}

.mockup-hint {
  font-size: 11px;
  color: #94a3b8;
  font-style: italic;
  margin-top: 8px;
}

/* ============================================================
   PAGE CONTACT
   ============================================================ */
.contact-section {
  padding: 72px 0 96px;
  min-height: 60vh;
}
.contact-container {
  max-width: 680px;
}
.contact-head {
  text-align: center;
  margin-bottom: 36px;
}
.contact-title {
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.contact-subtitle {
  font-size: 15px;
  color: var(--text-secondary);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.5;
}
.contact-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 560px) {
  .contact-row { grid-template-columns: 1fr; }
}
.contact-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-field label {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  transition: border-color 0.15s ease;
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}
/* Select : on retire l'apparence système (rendu très inégal d'un OS à
   l'autre) et on dessine une chevrette en SVG encodé, pour un champ
   visuellement identique aux inputs voisins. */
.contact-field select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235b6478' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  text-overflow: ellipsis;
}
.contact-field select:hover {
  border-color: var(--color-accent);
}
/* La chevrette doit rester lisible sur fond sombre. */
[data-theme="dark"] .contact-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23a0a6b6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Les options sont rendues par l'OS : on force au moins les couleurs
   pour éviter du texte blanc sur fond blanc en thème sombre. */
.contact-field select option {
  background: var(--color-surface);
  color: var(--text-primary);
}
.contact-field textarea {
  resize: vertical;
  min-height: 130px;
}
.contact-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none;
}
.contact-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}
/* Bouton "Envoyer" poussé à droite ; le message de retour reste à gauche. */
.contact-actions #cf-submit {
  margin-left: auto;
  order: 2;
}
.contact-actions .contact-feedback {
  order: 1;
}
.contact-feedback {
  font-size: 13.5px;
  font-weight: 500;
}
.contact-feedback.success { color: #10b981; }
.contact-feedback.error   { color: #ef4444; }

/* Lien "Retour au site" avec flèche (page contact) */
.nav-back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav-back-arrow {
  width: 16px;
  height: 16px;
  transition: transform 0.15s ease;
}
.nav-back-link:hover .nav-back-arrow {
  transform: translateX(-3px);
}

/* ============================================================
   MOUVEMENT RÉDUIT — cf. audit 2026-07
   Respecte la préférence système : neutralise animations,
   transitions et défilement doux pour les personnes sensibles
   au mouvement. Le pilotage JS de l'animation du hero est
   également court-circuité dans app.js.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Pages légales (politique de confidentialité) + note de support
   Ajouté le 3 août 2026 pour playit-confidentialite / playit-contact.
   Reprend les tokens et proportions de .contact-* ci-dessus.
   ============================================================ */
.legal-section {
  padding: 72px 0 96px;
  min-height: 60vh;
}
.legal-container {
  max-width: 720px;
}
.legal-head {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}
.legal-title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.2;
}
.legal-updated {
  font-size: 13px;
  color: var(--text-secondary);
}
.legal-intro {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.legal-container h2 {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 36px 0 12px;
}
.legal-container p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.legal-container ul {
  margin: 12px 0 16px;
  padding-left: 22px;
}
.legal-container li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.legal-container strong {
  color: var(--text-primary);
}
.legal-contact {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-top: 16px;
}
.legal-contact p:last-child {
  margin-bottom: 0;
}

/* Note sous le formulaire de support (cadre « best effort ») */
.contact-note {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}
.contact-note p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.contact-note p:last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .legal-section { padding: 48px 0 64px; }
  .legal-title   { font-size: 26px; }
  .legal-container h2 { font-size: 18px; margin-top: 28px; }
}

/* Mobile : espacements verticaux entre sections resserrés (100 px → 56 px, en-têtes 60 px → 32 px) */
@media (max-width: 768px) {
  .features-section, .how-section, .range-section, .roadmap-section, .integration-section,
  .future-section, .faq-section, .video-section { padding: 56px 0; }
  .section-header { margin-bottom: 32px; }
}

/* Pages Play!t / Mark!t, mobile : le wordmark du produit remplace Reveal!t dans l'en-tête
   (Reveal!t reste accessible par le menu et par le lien du logo vers l'accueil). */
.logo-product { display: none; }
@media (max-width: 900px) {
  .logo-wrap--product .logo-img { display: none; }
  .logo-wrap--product .logo-product {
    display: block;
    font-size: 28px;
    line-height: 1;
    color: var(--text-primary);
    transition: font-size 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .main-header.scrolled .logo-wrap--product .logo-product { font-size: 22px; }
}