/* ═══════════════════════════════════════════════════════════════════
   IGOR — Design System v1
   Référence : planche « MASCOTTE IGOR » + maquette app (DA officielle).
   Chargé par TOUTES les pages : <link rel="stylesheet" href="/assets/igor.css">
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Couleurs — planche officielle :
     #7B5CFF primaire · #EDE9E3 coque · #0D0F17 fond · #1A1D2A surfaces ·
     #9B8CFF accent glow */
  --bg:        #0D0F17;
  --bg-2:      #10131D;
  --surface:   #151824;
  --surface-2: #1A1D2A;
  --line:      #262B3D;
  --line-soft: #1E2231;
  --text:      #EDEBF4;
  --muted:     #9A9DB5;
  --faint:     #6C7089;
  --accent:    #7B5CFF;
  --accent-2:  #9B8CFF;
  --accent-deep: #5B41E0;
  --accent-soft: rgba(123, 92, 255, 0.12);
  --glow:      rgba(123, 92, 255, 0.35);
  --shell:     #EDE9E3;   /* coque de la mascotte — accents marketing */
  --ok:        #4ADE80;
  --warn:      #FBBF24;
  --crit:      #F87171;

  /* Géométrie */
  --radius:    14px;
  --radius-sm: 9px;

  /* Mouvement — courbes « ease-out » douces (esprit Linear / Stripe) */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:       0.22s;

  /* Ombres — douces, superposées, jamais lourdes. Toujours un soupçon de
     halo violet sur les états actifs plutôt qu'une grosse ombre noire. */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-md:   0 8px 24px -12px rgba(0, 0, 0, 0.5);
  --shadow-lg:   0 22px 60px -26px rgba(0, 0, 0, 0.6);
  --glow-ring:   0 0 0 1px rgba(123, 92, 255, 0.16);
  --glow-soft:   0 0 0 1px rgba(123, 92, 255, 0.18),
                 0 12px 36px -14px rgba(123, 92, 255, 0.32);

  /* Typo */
  --font: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", sans-serif;
  --mono: "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@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;
  }
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

::selection { background: var(--accent-deep); color: #fff; }

a { color: var(--accent-2); text-decoration: none; }

/* PLEINE PAGE : gouttières proportionnelles à l'écran, pas de plafond fixe
   (retour d'usage : le conteneur borné paraissait perdu sur grand écran). */
.i-container { max-width: none; margin: 0 auto; padding: 0 clamp(24px, 4vw, 96px); }
.i-container-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }

/* ── Typographie ─────────────────────────────────────────────────── */
.i-eyebrow {
  font-size: 12px; font-weight: 650;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-2);
}
.i-h1 {
  font-size: clamp(34px, 5.6vw, 58px);
  font-weight: 750; line-height: 1.08;
  letter-spacing: -0.025em; text-wrap: balance;
}
.i-h2 {
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 720; line-height: 1.15;
  letter-spacing: -0.02em; text-wrap: balance;
}
.i-h3 { font-size: 18px; font-weight: 650; letter-spacing: -0.01em; }
.i-lede { font-size: clamp(16px, 1.8vw, 19px); color: var(--muted); line-height: 1.65; }
.i-muted { color: var(--muted); }
.i-faint { color: var(--faint); }
.i-gradient-text {
  background: linear-gradient(92deg, var(--accent-2), var(--accent) 60%, var(--accent-deep));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ── Boutons ─────────────────────────────────────────────────────── */
.i-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font); font-size: 15px; font-weight: 620;
  padding: 12px 26px; border-radius: 11px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  white-space: nowrap; line-height: 1.2;
  will-change: transform;
}
.i-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.i-btn:active { transform: translateY(0) scale(0.985); transition-duration: 0.06s; }

.i-btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #fff;
  box-shadow: 0 4px 18px -4px var(--glow), inset 0 1px 0 rgba(255,255,255,0.16);
}
.i-btn-primary:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 12px 34px -8px var(--glow), inset 0 1px 0 rgba(255,255,255,0.22);
}
.i-btn-primary:active { box-shadow: 0 3px 14px -4px var(--glow), inset 0 1px 0 rgba(255,255,255,0.16); }
.i-btn-ghost {
  background: transparent; color: var(--text);
  border-color: var(--line);
}
.i-btn-ghost:hover {
  border-color: rgba(123, 92, 255, 0.5); background: var(--accent-soft);
  transform: translateY(-1px); box-shadow: var(--glow-ring);
}
.i-btn-soft {
  background: var(--surface-2); color: var(--text);
  border-color: var(--line-soft);
}
.i-btn-soft:hover {
  border-color: rgba(123, 92, 255, 0.5);
  transform: translateY(-1px); box-shadow: var(--glow-ring);
}
.i-btn-sm { font-size: 13.5px; padding: 8px 16px; border-radius: 9px; }
.i-btn-lg { font-size: 16.5px; padding: 15px 34px; border-radius: 13px; }
.i-btn-full { width: 100%; }
.i-btn[disabled], .i-btn.disabled {
  opacity: 0.45; pointer-events: none;
}

/* ── Cartes ──────────────────────────────────────────────────────── */
.i-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 26px 28px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.i-card-hover:hover {
  border-color: rgba(123, 92, 255, 0.5);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md), var(--glow-soft);
}
.i-card-glow {
  border-color: rgba(123, 92, 255, 0.35);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(123, 92, 255, 0.10) 0%, transparent 55%),
    var(--surface);
}

/* ── Champs ──────────────────────────────────────────────────────── */
.i-label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--text); margin-bottom: 7px;
}
.i-hint { font-size: 12.5px; color: var(--faint); font-weight: 400; margin-top: 3px; }
.i-input, .i-textarea, .i-select {
  width: 100%; font-family: var(--font); font-size: 15px;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 15px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.i-input::placeholder, .i-textarea::placeholder { color: var(--faint); }
.i-input:focus, .i-textarea:focus, .i-select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.i-textarea { resize: vertical; min-height: 120px; line-height: 1.55; }

/* ── Design Language global : zéro composant HTML natif blanc ─────────
   color-scheme dark : popups de select, calendriers et ascenseurs natifs
   rendus sombres. Selects sans flèche navigateur (chevron dessiné). */
:root { color-scheme: dark; }
select, input[type="text"], input[type="number"], input[type="email"],
input[type="password"], input[type="search"], input[type="url"],
input[type="tel"], textarea {
  background-color: #171922; color: var(--text);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
  font-family: inherit;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
::placeholder { color: #6A7086; opacity: 1; }
select:hover, textarea:hover,
input:hover:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  border-color: rgba(123, 92, 255, 0.4);
  box-shadow: 0 0 0 3px rgba(123, 92, 255, 0.06);
}
select:focus, textarea:focus,
input:focus:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  outline: none; border-color: var(--accent);
  background-color: #1A1C27;
  box-shadow: 0 0 0 3px rgba(123, 92, 255, 0.18), 0 4px 18px -8px var(--glow);
}
select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 2.2rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239AA0B5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
/* Anti-mosaïque : une classe redéfinissant le fond en shorthand faisait
   TUILER le chevron au hover (motif zébré). Verrouillé sur tous les états. */
select, select:hover, select:focus, select:active {
  background-repeat: no-repeat !important;
  background-position: right 0.8rem center !important;
  background-size: 12px 8px !important;
}
select:hover, select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A88BFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
select option, select optgroup { background: #151823; color: var(--text); }
select::-ms-expand { display: none; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* Scrollbars 6px (Linear) : quasi invisibles, jamais blanches */
* { scrollbar-width: thin; scrollbar-color: #2A2E3C transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #2A2E3C; border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--accent); }
*::-webkit-scrollbar-corner { background: transparent; }

/* ── Badges & pills ──────────────────────────────────────────────── */
.i-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 680;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 11px; border-radius: 999px;
}
.i-badge-accent { color: var(--accent-2); background: var(--accent-soft);
  border: 1px solid rgba(123, 92, 255, 0.35); }
.i-badge-ok   { color: var(--ok);   background: rgba(74,222,128,0.10);
  border: 1px solid rgba(74,222,128,0.30); }
.i-badge-warn { color: var(--warn); background: rgba(251,191,36,0.10);
  border: 1px solid rgba(251,191,36,0.30); }
.i-badge-crit { color: var(--crit); background: rgba(248,113,113,0.10);
  border: 1px solid rgba(248,113,113,0.30); }

/* ── Barre de navigation ─────────────────────────────────────────── */
.i-nav {
  position: sticky; top: 0; z-index: 90;
  /* Pas de backdrop-filter : blur sur élément sticky = compositeur fragile
     (captures bloquées, jank sur machines modestes). Opacité élevée à la place. */
  background: rgba(13, 15, 23, 0.94);
  border-bottom: 1px solid var(--line-soft);
}
.i-nav-inner {
  max-width: none; margin: 0 auto; padding: 14px clamp(24px, 4vw, 96px);
  display: flex; align-items: center; gap: 28px;
}
.i-nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 19px; font-weight: 800; letter-spacing: 0.14em;
  color: var(--text); text-decoration: none;
}
.i-nav-links { display: flex; gap: 22px; margin-left: 8px; }
.i-nav-links a {
  color: var(--muted); font-size: 14.5px; font-weight: 520;
  transition: color 0.15s ease;
}
.i-nav-links a:hover { color: var(--text); }
.i-nav-cta { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* Menu déroulant « Fonctionnalités » → 4 pages dédiées */
.nav-dd { position: relative; }
.nav-dd-trigger { display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  color: var(--muted); font-size: 14.5px; font-weight: 520; transition: color 0.15s ease; }
.nav-dd:hover .nav-dd-trigger, .nav-dd:focus-within .nav-dd-trigger { color: var(--text); }
.nav-dd-trigger .caret { font-size: 10px; opacity: 0.7; transition: transform 0.18s ease; }
.nav-dd:hover .nav-dd-trigger .caret { transform: rotate(180deg); }
.nav-dd-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 12px; opacity: 0; visibility: hidden; pointer-events: none; z-index: 120;
  transition: opacity 0.18s ease; }
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu {
  opacity: 1; visibility: visible; pointer-events: auto; }
.nav-dd-card { min-width: 320px; padding: 8px; border-radius: 16px;
  background: var(--surface-2, #171922); border: 1px solid var(--line);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.75), 0 0 40px -20px rgba(123,92,255,0.4); }
.nav-dd-card a { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: 11px; text-decoration: none; transition: background 0.15s ease; }
.nav-dd-card a:hover { background: rgba(123,92,255,0.12); }
.ndd-eye { flex: none; }
.ndd-txt { flex: 1; display: flex; flex-direction: column; }
.ndd-t { font-size: 14px; font-weight: 640; color: var(--text); display: flex; align-items: center; gap: 7px; }
.ndd-d { font-size: 12px; color: var(--muted); line-height: 1.35; margin-top: 1px; }
.ndd-tag { font-size: 9.5px; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px; background: rgba(123,92,255,0.16);
  color: var(--accent-3); border: 1px solid rgba(123,92,255,0.3); }

/* ── Barre de navigation sur téléphone ──────────────────────────────
   Elle était purement et simplement SUPPRIMÉE en dessous de 780 px
   (display: none). Conséquence mesurée par Mohamed : sur son téléphone,
   aucune fonctionnalité d'IGOR n'était visible. Sur un site dont le but est
   de faire découvrir ce que fait le produit, c'est le pire endroit où
   économiser de la place.

   Choix : deux lignes plutôt qu'un menu caché. Les intitulés RESTENT
   visibles (un menu burger demande un geste de plus, et ce qu'on ne voit
   pas n'existe pas pour un visiteur qui découvre), et la rangée défile
   horizontalement si elle dépasse. Aucun JavaScript, donc rien qui puisse
   casser. */
@media (max-width: 780px) {
  .i-nav-inner { flex-wrap: wrap; row-gap: 10px; }
  .i-nav-links {
    order: 3;
    flex: 1 0 100%;
    margin-left: 0;
    gap: 18px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Dégradé de bord : dit qu'il reste quelque chose à droite, sans
       occuper de place ni demander un clic. */
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
  }
  .i-nav-links::-webkit-scrollbar { display: none; }
  .i-nav-links a { white-space: nowrap; padding-bottom: 2px; }
  .i-nav-cta { margin-left: auto; }
}
@media (max-width: 420px) {
  /* « Se connecter » etait MASQUE sous 420 px, au motif qu'il restait dans le
     pied de page. Mauvais calcul : un client qui revient ouvre le site pour
     entrer, pas pour lire. Lui demander de parcourir toute la page d'accueil
     avant de trouver la porte, c'est le pire moment pour economiser 60 px.
     Il ne disparait donc plus, il MAIGRIT : simple lien texte au lieu d'un
     bouton encadre. L'action principale garde son bouton plein, la hierarchie
     est conservee, et la porte reste visible. */
  .i-nav-cta .i-btn-ghost {
    padding: 8px 2px; border: 0; background: none;
    font-size: 13px; color: var(--muted);
  }
  .i-nav-cta .i-btn-ghost:hover { color: var(--text); background: none; }
}

/* ── Footer ──────────────────────────────────────────────────────── */
.i-footer {
  border-top: 1px solid var(--line-soft);
  padding: 34px 24px; text-align: center;
  color: var(--faint); font-size: 13.5px;
}
.i-footer a { color: var(--muted); margin: 0 10px; }
.i-footer a:hover { color: var(--text); }

/* ── Loaders ─────────────────────────────────────────────────────── */
.i-spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: #fff;
  animation: i-spin 0.7s linear infinite;
  display: inline-block; vertical-align: -3px;
}
@keyframes i-spin { to { transform: rotate(360deg); } }

.i-dots { display: inline-flex; gap: 5px; align-items: center; }
.i-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-2);
  animation: i-dot 1.2s ease-in-out infinite;
}
.i-dots span:nth-child(2) { animation-delay: 0.15s; }
.i-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes i-dot {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}

.i-skeleton {
  border-radius: 8px;
  background: linear-gradient(90deg, var(--surface-2) 25%,
              #232840 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: i-shimmer 1.4s ease-in-out infinite;
}
@keyframes i-shimmer { to { background-position: -200% 0; } }

/* ── Accordéon (FAQ) ─────────────────────────────────────────────── */
.i-details {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 0 20px;
  transition: border-color 0.2s ease;
}
.i-details[open] { border-color: rgba(123, 92, 255, 0.4); }
.i-details summary {
  cursor: pointer; list-style: none;
  font-size: 15.5px; font-weight: 600;
  padding: 17px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.i-details summary::-webkit-details-marker { display: none; }
.i-details summary::after {
  content: "+"; font-size: 20px; font-weight: 400;
  color: var(--accent-2); transition: transform 0.2s ease; flex: none;
}
.i-details[open] summary::after { transform: rotate(45deg); }
.i-details .i-details-body {
  padding: 0 0 18px; color: var(--muted); font-size: 14.5px; line-height: 1.65;
}

/* ── Divider & sections ──────────────────────────────────────────── */
.i-divider { border: none; border-top: 1px solid var(--line-soft); margin: 0; }
/* Rythme vertical resserré : le scroll s'enchaîne, moins de vide mort. */
.i-section { padding: 76px 0; }
.i-section-tight { padding: 52px 0; }
@media (max-width: 640px) { .i-section { padding: 56px 0; } .i-section-tight { padding: 44px 0; } }

/* ── Révélation au scroll (avec .reveal + IntersectionObserver) ──── */
.reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* Stagger : les enfants directs d'un conteneur .reveal-stagger entrent en
   cascade quand le conteneur devient visible (.in). Pur CSS, subtil. */
.reveal-stagger > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0.03s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 0.09s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 0.15s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 0.21s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 0.27s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 0.33s; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: 0.39s; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
}

/* ── Utilitaires ─────────────────────────────────────────────────── */
.i-grid { display: grid; gap: 18px; }
.i-grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.i-grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.i-grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.i-center { text-align: center; }
.i-stack { display: flex; flex-direction: column; }
.i-row { display: flex; align-items: center; }
.i-mono { font-family: var(--mono); }
.i-tnum { font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════════
   FLUX DE GÉNÉRATION (demo /essai + app) — composants partagés
   ═══════════════════════════════════════════════════════════════════ */

/* ── Stepper horizontal (3 étapes) ───────────────────────────────── */
.i-stepper {
  display: flex; align-items: center; gap: 0;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--surface); overflow: hidden; margin-bottom: 22px;
}
.i-step {
  flex: 1; display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; font-size: 14px; font-weight: 550; color: var(--faint);
  border-right: 1px solid var(--line-soft); white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
}
.i-step:last-child { border-right: none; }
.i-step-dot {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700;
  background: var(--surface-2); color: var(--faint);
  border: 1px solid var(--line); transition: all 0.2s ease;
}
.i-step.active { color: var(--text); background: var(--accent-soft); }
.i-step.active .i-step-dot {
  background: var(--accent); color: #fff; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.i-step.done { color: var(--accent-2); }
.i-step.done .i-step-dot { background: var(--accent-deep); color: #fff; border-color: var(--accent-deep); }
@media (max-width: 620px) {
  .i-step span { display: none; }
  .i-step { justify-content: center; padding: 12px; }
}

/* ── Carte verrouillée (étape pas encore atteinte) ───────────────── */
.i-locked { opacity: 0.4; pointer-events: none; filter: saturate(0.6); }

/* ── Dropzone CV ─────────────────────────────────────────────────── */
.i-dropzone {
  border: 1.5px dashed var(--line); border-radius: var(--radius);
  background: var(--bg-2); padding: 34px 24px; text-align: center;
  cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease;
}
.i-dropzone:hover, .i-dropzone.drag {
  border-color: var(--accent); background: var(--accent-soft);
}
.i-dropzone-title { font-weight: 620; font-size: 15px; margin-bottom: 5px; }
.i-dropzone-hint { font-size: 13px; color: var(--faint); }
.i-dropzone-file {
  margin-top: 12px; font-size: 13.5px; color: var(--accent-2); font-weight: 550;
}

/* ── Sélecteur de fiabilité ──────────────────────────────────────── */
.i-fidelity { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.i-fid {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 15px; cursor: pointer; background: var(--bg-2);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.i-fid:hover { border-color: var(--accent); }
.i-fid.sel {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.i-fid-name { font-weight: 650; font-size: 14px; display: flex; align-items: center;
  gap: 7px; flex-wrap: wrap; margin-bottom: 5px; }
.i-fid-desc { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.i-risk { font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.04em; }
.i-risk-low  { background: rgba(74,222,128,0.12);  color: var(--ok); }
.i-risk-mid  { background: rgba(251,191,36,0.12);  color: var(--warn); }
.i-risk-high { background: rgba(248,113,113,0.12); color: var(--crit); }
@media (max-width: 560px) { .i-fidelity { grid-template-columns: 1fr; } }

/* ── Révision du profil extrait ──────────────────────────────────── */
.i-review {
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--bg-2); padding: 18px 20px; margin-top: 14px;
  display: flex; flex-direction: column; gap: 14px;
}
.i-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.i-review-grid label { font-size: 12px; }
.i-review ul { margin: 6px 0 0 18px; font-size: 13.5px; color: var(--muted); }
.i-review li { margin-bottom: 4px; }
@media (max-width: 560px) { .i-review-grid { grid-template-columns: 1fr; } }

/* ── Pipeline théâtralisé (IGOR travaille) ───────────────────────── */
.i-pipeline {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 20px 0 8px;
}
.i-pipeline-eye { position: relative; margin-bottom: 8px; }
.i-pipeline-eye::before {
  content: ""; position: absolute; inset: 50% auto auto 50%;
  width: 200px; height: 200px; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(123,92,255,0.22) 0%, transparent 68%);
  pointer-events: none;
}
.i-pipeline-eye > * { position: relative; }
.i-pipeline-narr {
  font-size: 17px; font-weight: 620; margin: 6px 0 22px; min-height: 24px;
  color: var(--text); text-wrap: balance;
}
.i-pipeline-steps { width: 100%; max-width: 420px; display: flex;
  flex-direction: column; gap: 2px; }
.i-pstep {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border-radius: var(--radius-sm); font-size: 14px; color: var(--faint);
  transition: color 0.25s ease, background 0.25s ease; text-align: left;
}
.i-pstep-ic {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  border: 1px solid var(--line); color: var(--faint);
}
.i-pstep.run { color: var(--text); background: var(--accent-soft); }
.i-pstep.run .i-pstep-ic { border-color: var(--accent); }
.i-pstep.done { color: var(--text); }
.i-pstep.done .i-pstep-ic {
  background: var(--accent-deep); border-color: var(--accent-deep); color: #fff;
}

/* ── Score (jauge) ───────────────────────────────────────────────── */
.i-score {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-variant-numeric: tabular-nums; font-weight: 750;
  padding: 6px 16px; border-radius: 999px; font-size: 22px;
}
.i-score small { font-size: 13px; font-weight: 500; opacity: 0.7; }
.i-score-ok   { background: rgba(74,222,128,0.12);  color: var(--ok); }
.i-score-mid  { background: rgba(251,191,36,0.12);  color: var(--warn); }
.i-score-low  { background: rgba(248,113,113,0.12); color: var(--crit); }

/* ── Cartes documents (téléchargement) ───────────────────────────── */
.i-docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.i-doc {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: 14px 16px; text-decoration: none;
  color: var(--text); transition: border-color 0.15s ease, transform 0.15s ease;
}
.i-doc:hover { border-color: var(--accent); transform: translateY(-1px); }
.i-doc-ic {
  width: 38px; height: 38px; flex: none; border-radius: 9px;
  background: var(--accent-soft); color: var(--accent-2);
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.i-doc-name { font-weight: 600; font-size: 14px; }
.i-doc-sub { font-size: 12px; color: var(--faint); }

/* ── Bandeaux inline (info / erreur / succès) ────────────────────── */
.i-msg {
  font-size: 13.5px; padding: 11px 14px; border-radius: var(--radius-sm);
  margin-top: 12px; line-height: 1.5; display: none;
}
.i-msg.show { display: block; }
.i-msg-info { background: var(--accent-soft); color: var(--accent-2);
  border: 1px solid rgba(123,92,255,0.3); }
.i-msg-ok   { background: rgba(74,222,128,0.10); color: var(--ok);
  border: 1px solid rgba(74,222,128,0.3); }
.i-msg-err  { background: rgba(248,113,113,0.10); color: var(--crit);
  border: 1px solid rgba(248,113,113,0.3); }

/* ── Toast (notification flottante) ──────────────────────────────── */
.i-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text); font-size: 14px; font-weight: 550;
  padding: 13px 20px; border-radius: 11px; z-index: 200;
  box-shadow: 0 10px 40px rgba(0,0,0,0.45);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: min(90vw, 460px);
}
.i-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.i-toast-err { border-color: rgba(248,113,113,0.5); }
.i-toast-ok  { border-color: rgba(74,222,128,0.5); }

/* ── Onglets pilule (Texte / URL) ────────────────────────────────── */
.i-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 11px;
  background: var(--bg-2); border: 1px solid var(--line-soft); }
.i-tab {
  border: none; background: transparent; color: var(--muted); cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 550; padding: 7px 16px;
  border-radius: 8px; transition: background 0.15s ease, color 0.15s ease;
}
.i-tab.sel { background: var(--accent); color: #fff; }

/* ── Interrupteur (checkbox premium) ─────────────────────────────── */
.i-check { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.i-check input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }

/* ── Maquettes décoratives : ce sont des IMAGES, pas du contenu ─────
   Retour de Mohamed sur la page Découvrir : « quand je mets ma souris sur
   le texte je vois le truc comme si je pouvais écrire ou effacer sur Word,
   je crois que c'est pas pro ». Il a raison, et le défaut était sur TOUTES
   les pages vitrine : les fausses cartes d'offre, la scène du hero et le
   téléphone sont dessinés en HTML, donc le navigateur les traite comme du
   texte sélectionnable. Un curseur en I sur un faux écran casse l'illusion
   du produit en une seconde.

   Deux règles, volontairement séparées :
   - `user-select` sur tout ce qui est déjà marqué aria-hidden (c'est la
     définition même d'un élément décoratif, on ne maintient pas une seconde
     liste) ;
   - `cursor` uniquement sur les CONTENEURS de maquette. Jamais sur
     aria-hidden en général : une icône décorative dans un bouton hériterait
     d'un curseur « flèche » alors que le bouton, lui, est cliquable. */
[aria-hidden="true"] {
  -webkit-user-select: none;
  user-select: none;
}
.hero-visual, .fx-visual, .fx-scene, .sw-visuel, .sw-tel, .igs-stage,
.step-eye, .fl-eye {
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}
/* Le texte reste sélectionnable partout ailleurs : c'est un site, pas une
   image. On ne bride que ce qui simule une interface. */

/* ── Le curseur « écriture » ne s'affiche que là où l'on écrit ──────
   Deuxième passe après retour de Mohamed : « le curseur là qui se met quand
   tu veux écrire sur Word », cette fois sur le TEXTE de la page, pas
   seulement sur les maquettes.

   Par défaut, un navigateur affiche le curseur en I sur tout texte, parce
   qu'il est sélectionnable. Sur une page produit, ça donne l'impression d'un
   document éditable plutôt que d'une application. On repasse donc à la
   flèche par défaut sur l'ensemble de la page.

   Le texte RESTE sélectionnable : `cursor` ne change que l'icône, pas le
   comportement. Un visiteur qui veut copier une phrase le peut toujours.
   Et là où l'on écrit vraiment (champs de saisie), le curseur en I revient,
   parce que là il informe au lieu de tromper. */
body { cursor: default; }
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
textarea,
[contenteditable="true"] { cursor: text; }
input[type="checkbox"], input[type="radio"], input[type="file"], select,
button, a[href], label[for], summary, [role="button"] { cursor: pointer; }