/*!
 * Valideo — CSS du site vitrine.
 *
 * FICHIER GÉNÉRÉ — ne pas modifier à la main.
 * Source : resources/css/valideo/valideo.css
 * Régénérer : node build-valideo-css.cjs
 */
/* ==========================================================================
   Valideo — point d'entrée CSS du site vitrine.

   Les maquettes de référence (reference/*.dc.html) n'emploient aucune classe
   « vd-* » : tout y est en styles inline adossés aux variables de tokens.
   On importe donc l'intégralité des tokens, mais seulement les deux feuilles
   de composants réellement rendues — Button et IconTile. Les feuilles
   applicatives du design system (Sidebar, AppShell, Table, Modal, Popover,
   ListingCard, KpiCard, FilterMenu…) restent disponibles dans components/
   mais ne sont pas chargées : environ 43 Ko de CSS mort pour un vitrine.
   ========================================================================== */

/* ---------- Tokens : valeurs reprises telles quelles du dépôt source ---------- */

/* ---------- ./tokens/fonts.css ---------- */
/* ==========================================================================
   Valideo — Webfont
   Manrope, famille unique du produit (400/500/600/700/800).
   Le dépôt source ne livre pas les binaires : la famille est chargée depuis
   Google Fonts, qui en est l'éditeur officiel. Remplacer par des @font-face
   locaux si les fichiers doivent être auto-hébergés.
   ========================================================================== */
/* fonte chargée par <link> dans le layout : https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap */


/* ---------- ./tokens/color.css ---------- */
/* ==========================================================================
   Valideo — Couleurs
   Valeurs relevées telles quelles dans « Valideo Pro Desktop », non arrondies.
   Deux niveaux : valeurs de base (--fg-*, --accent-*…) puis alias sémantiques.
   ========================================================================== */

:root {
  /* ---------- Base : encre ---------- */
  --fg-900: #10273a; /* corps de texte du shell applicatif */
  --fg-800: #1e2836; /* encre de marque : titres, sidebar active, cards sélectionnées */
  --fg-700: #4a5b6b; /* libellés renforcés (carte d'aide) */
  --fg-600: #6b7f91; /* texte secondaire */
  --fg-500: #93a4b3; /* texte tertiaire, labels majuscules, icônes de champ */
  --fg-400: #a9b7c4; /* texte désactivé, valeurs passées, placeholders */
  --fg-300: #c3cfda; /* icônes désactivées (cadenas, chevrons) */
  --fg-250: #c3cdd8; /* chevron de la carte d'aide */

  /* ---------- Base : surfaces neutres ---------- */
  --neutral-0: #ffffff;
  --neutral-25: #fbfcfd; /* barre supérieure, fond de panneau, cards internes */
  --neutral-50: #f7f9fb; /* survol de surface claire */
  --neutral-75: #f7f9fc;
  --neutral-100: #f4f6f8; /* fond application */
  --neutral-150: #f1f4f7; /* séparateurs fins, barres de graphe inactives */
  --neutral-200: #eef1f4; /* canevas de prévisualisation, fond de badge neutre */
  --neutral-250: #eef3f8; /* tuile d'icône neutre */
  --neutral-300: #edf1f5;

  /* ---------- Base : bordures ---------- */
  --border-100: #ebeff4; /* bordure par défaut */
  --border-200: #e7ecf1; /* bordure de champ de formulaire */
  --border-250: #e4e9ef; /* bordure marquée (carte d'aide) */
  --border-300: #e1e7ec;
  --border-400: #dce3ea; /* bordure au survol d'une card de listing */
  --border-500: #d6dee6;
  --border-600: #c9d4de;

  /* ---------- Base : accent marque ---------- */
  --accent-500: #ff6b2c; /* accent principal */
  --accent-600: #e2551a; /* survol de lien */
  --accent-700: #c24e12; /* texte sur fond accent doux */
  --accent-750: #d5471b;
  --accent-100: #fff0e8; /* fond accent doux */
  --accent-75: #fff8f4;
  --accent-50: #fff6f2;
  --accent-200: #ffc5a6;
  --accent-selection: #ffd9c4; /* ::selection */

  /* ---------- Base : états ---------- */
  --success-600: #0e9f5e; /* évolution positive */
  --success-700: #1f7a55; /* texte de statut sur fond succès */
  --success-300: #9be4be; /* barre de graphe, mois précédent */
  --success-100: #dcf6e9; /* fond de badge d'évolution positive */
  --success-50: #eaf6f0; /* fond de pill de statut succès */
  --success-25: #e7f7ee;

  --danger-600: #e0281c; /* erreur / alerte */
  --danger-500: #c0392b; /* action destructive */
  --danger-100: #fce0dc;
  --danger-50: #fdecea; /* fond destructif */
  --danger-75: #fbe3da;

  --info-600: #2d5fcc; /* texte de statut informatif */
  --info-500: #1c5fa8;
  --info-100: #eaf1fc; /* fond de statut informatif */
  --info-75: #e9f1fb;

  --teal-600: #12807f;
  --teal-100: #e9f6f6;

  /* ---------- Base : surfaces sombres ---------- */
  --dark-surface: #1e2836; /* carte d'offre, avatars, boutons foncés */
  --dark-gradient: linear-gradient(135deg, #1e2836 0%, #2e2119 55%, #4a2a16 100%); /* @kind color */

  /* ---------- Base : voiles sur fond sombre ---------- */
  --on-dark-strong: rgba(255, 255, 255, 0.9);
  --on-dark: rgba(255, 255, 255, 0.7);
  --on-dark-muted: rgba(255, 255, 255, 0.55);
  --on-dark-track: rgba(255, 255, 255, 0.16);
  --on-dark-divider: rgba(255, 255, 255, 0.14);

  /* ======================================================================
     Alias sémantiques — c'est ce que les composants consomment.
     ====================================================================== */

  /* Texte */
  --text-body: var(--fg-900);
  --text-heading: var(--fg-800);
  --text-muted: var(--fg-600);
  --text-subtle: var(--fg-500);
  --text-disabled: var(--fg-400);
  --text-icon-disabled: var(--fg-300);
  --text-on-accent: var(--neutral-0);
  --text-on-dark: var(--neutral-0);
  --text-link: var(--accent-500);
  --text-link-hover: var(--accent-600);
  --text-danger: var(--danger-500);

  /* Surfaces */
  --surface-app: var(--neutral-100);
  --surface-card: var(--neutral-0);
  --surface-panel: var(--neutral-25);
  --surface-topbar: rgba(251, 252, 253, 0.9);
  --surface-canvas: var(--neutral-200);
  --surface-hover: var(--neutral-50);
  --surface-muted: var(--neutral-150);
  --surface-tile: var(--neutral-250);
  --surface-inverse: var(--dark-surface);
  --surface-accent-soft: var(--accent-100);

  /* Bordures */
  --border-subtle: var(--border-100);
  --border-field: var(--border-200);
  --border-strong: var(--border-250);
  --border-hover: var(--border-400);
  --border-selected: var(--fg-800);

  /* États — pill de statut et badges */
  --state-success-bg: var(--success-50);
  --state-success-fg: var(--success-700);
  --state-info-bg: var(--info-100);
  --state-info-fg: var(--info-600);
  --state-warning-bg: var(--accent-100);
  --state-warning-fg: var(--accent-700);
  --state-danger-bg: var(--danger-50);
  --state-danger-fg: var(--danger-500);
  --state-neutral-bg: var(--neutral-200);
  --state-neutral-fg: var(--fg-600);

  /* Évolution (trend) */
  --trend-up-bg: var(--success-100);
  --trend-up-fg: var(--success-600);
  --trend-down-bg: var(--danger-100);
  --trend-down-fg: var(--danger-600);

  /* Accent */
  --accent: var(--accent-500);
  --accent-hover: var(--accent-600);
  --accent-on-soft: var(--accent-700);
  --accent-soft: var(--accent-100);

  /* Overlay */
  --overlay-modal: rgba(16, 39, 58, 0.45);
  --overlay-modal-light: rgba(16, 39, 58, 0.42);
}

::selection {
  background: var(--accent-selection);
}


/* ---------- ./tokens/typography.css ---------- */
/* ==========================================================================
   Valideo — Typographie
   Famille unique Manrope (400/500/600/700/800), fallback system-ui.
   Les tailles sont celles relevées dans les maquettes, au demi-pixel près.
   ========================================================================== */

:root {
  --font-sans: 'Manrope', system-ui, sans-serif;

  /* Graisses */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* Échelle de taille */
  --text-8-5: 8.5px;
  --text-9: 9px;
  --text-10: 10px;
  --text-10-5: 10.5px;
  --text-11: 11px;
  --text-11-5: 11.5px;
  --text-12: 12px;
  --text-12-5: 12.5px;
  --text-13: 13px;
  --text-13-5: 13.5px; /* taille de corps la plus fréquente de l'interface */
  --text-14: 14px;
  --text-14-5: 14.5px;
  --text-15: 15px;
  --text-15-5: 15.5px;
  --text-16: 16px;
  --text-16-5: 16.5px;
  --text-17: 17px;
  --text-18: 18px;
  --text-20: 20px;
  --text-24: 24px;
  --text-30: 30px;

  /* Interlignage */
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.45;
  --leading-relaxed: 1.6;

  /* Interlettrage */
  --tracking-h1: -0.035em;
  --tracking-kpi: -0.04em;
  --tracking-card-title: -0.02em;
  --tracking-tight: -0.03em;
  --tracking-snug: -0.01em;
  --tracking-label: 0.08em;
  --tracking-label-wide: 0.12em;
  --tracking-label-widest: 0.14em;
  --tracking-label-narrow: 0.04em;

  /* Rôles composés */
  --font-h1-size: clamp(24px, 2.1vw, 31px);
  --font-card-title-size: var(--text-16-5);
  --font-kpi-size: var(--text-30);
  --font-value-size: var(--text-17);
  --font-body-size: var(--text-13-5);
  --font-body-secondary-size: var(--text-12-5);
  --font-micro-size: var(--text-11);
}

/* Classes utilitaires — chaque rôle typographique du brief, prêt à l'emploi. */

.vd-h1 {
  margin: 0;
  font-size: var(--font-h1-size);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-h1);
  line-height: var(--leading-tight);
  color: var(--text-heading);
}

.vd-card-title {
  margin: 0;
  font-size: var(--text-16-5);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-card-title);
  color: var(--text-heading);
}

.vd-kpi {
  font-size: var(--text-30);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-kpi);
  line-height: 1;
  color: var(--text-heading);
  font-variant-numeric: tabular-nums;
}

.vd-value {
  font-size: var(--text-17);
  font-weight: var(--weight-black);
  color: var(--text-heading);
  font-variant-numeric: tabular-nums;
}

.vd-label {
  font-size: var(--text-11-5);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-subtle);
}

.vd-label-sm {
  font-size: var(--text-10-5);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-label-wide);
  text-transform: uppercase;
  color: var(--text-disabled);
}

.vd-body {
  font-size: var(--text-13-5);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}

.vd-body-strong {
  font-size: var(--text-13-5);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
}

.vd-secondary {
  font-size: var(--text-12-5);
  font-weight: var(--weight-medium);
  color: var(--text-subtle);
}

.vd-micro {
  font-size: var(--text-11);
  font-weight: var(--weight-semibold);
  color: var(--text-disabled);
}

/* Les nombres sont toujours tabulaires, les paragraphes toujours en text-wrap pretty. */
.vd-nums {
  font-variant-numeric: tabular-nums;
}

.vd-prose {
  text-wrap: pretty;
}


/* ---------- ./tokens/spacing.css ---------- */
/* ==========================================================================
   Valideo — Espacement et dimensions de gabarit
   L'échelle n'est pas une progression régulière : ce sont les pas réellement
   employés dans les maquettes. On les garde tels quels plutôt que d'arrondir.
   ========================================================================== */

:root {
  --space-2: 2px;
  --space-3: 3px;
  --space-6: 6px;
  --space-9: 9px;
  --space-10: 10px;
  --space-13: 13px;
  --space-16: 16px;
  --space-20: 20px;
  --space-22: 22px;

  /* Pas intermédiaires utilisés ponctuellement */
  --space-4: 4px;
  --space-7: 7px;
  --space-8: 8px;
  --space-11: 11px;
  --space-12: 12px;
  --space-14: 14px;
  --space-18: 18px;
  --space-24: 24px;
  --space-30: 30px;
  --space-34: 34px;
  --space-44: 44px;
  --space-60: 60px;

  /* Gouttières fluides entre cards d'une même grille */
  --gutter: clamp(14px, 1.3vw, 20px); /* @kind spacing */

  /* Padding de page */
  --page-padding: clamp(18px, 2.2vw, 30px) clamp(18px, 2.4vw, 44px) 60px;
  --page-padding-x: clamp(18px, 2.4vw, 44px);
  --panel-padding-x: clamp(20px, 2.4vw, 34px);
  --list-padding-x: clamp(12px, 1.6vw, 18px);

  /* Dimensions de gabarit relevées dans les maquettes */
  --sidebar-width: 252px;
  --topbar-height: 57px;
  --panel-header-height: 78px; /* en-tête de listing ET d'aperçu, des deux côtés */
  --list-panel-width: 420px; /* volet de listing (rapports, documents, demandes) */
  --fields-panel-width: 336px; /* volet des champs de l'éditeur de modèles */
  --drawer-width: 520px; /* tiroir latéral droit */
  --control-height: 36px; /* hauteur canonique des boutons et contrôles */

  /* Feuille A4 — jamais déformée, ratio strict */
  --sheet-ratio: 210 / 297; /* @kind other */
  --sheet-max-width: 794px;
}


/* ---------- ./tokens/radius.css ---------- */
/* ==========================================================================
   Valideo — Rayons
   ========================================================================== */

:root {
  --radius-card: 20px; /* card de dashboard */
  --radius-panel: 16px; /* card secondaire, popover, card de listing */
  --radius-modal: 20px; /* boîte de dialogue */
  --radius-drawer: 0px; /* le tiroir est collé au bord, pas de rayon */
  --radius-control: 12px; /* champ de formulaire, bouton large */
  --radius-button: 11px; /* bouton canonique */
  --radius-button-sm: 10px; /* bouton compact, item de menu */
  --radius-tile: 10px; /* tuile d'icône 36px */
  --radius-tile-sm: 8px; /* tuile d'icône 24px */
  --radius-tile-lg: 11px; /* tuile d'icône 44px, item de navigation */
  --radius-avatar: 9px; /* avatar carré à initiales */
  --radius-pill: 999px;
}


/* ---------- ./tokens/shadow.css ---------- */
/* ==========================================================================
   Valideo — Profondeur
   Toutes les ombres partent du même bleu d'encre rgba(16,39,58,·).
   ========================================================================== */

:root {
  --shadow-card: 0 1px 2px rgba(16, 39, 58, 0.04); /* card de listing, repos */
  --shadow-raised: 0 8px 30px rgba(16, 39, 58, 0.06);
  --shadow-soft: 0 10px 34px rgba(16, 39, 58, 0.1);
  --shadow-menu: 0 14px 32px rgba(16, 39, 58, 0.16); /* menu de statut, petit dropdown */
  --shadow-popover: 0 18px 40px rgba(16, 39, 58, 0.16); /* popover, menu de création */
  --shadow-drawer: -12px 0 36px rgba(16, 39, 58, 0.18); /* tiroir latéral droit */
  --shadow-modal: 0 30px 70px rgba(16, 39, 58, 0.28); /* modale plein écran */
  --shadow-sheet: 0 24px 60px rgba(16, 39, 58, 0.24); /* feuille A4 sur le canevas */
  --shadow-hairline: 0 0 0 1px var(--border-subtle);
  --shadow-inset-hairline: inset 0 0 0 1px rgba(16, 39, 58, 0.12);
}


/* ---------- ./tokens/motion.css ---------- */
/* ==========================================================================
   Valideo — Mouvement
   Deux animations d'entrée seulement, et une règle de survol unique.
   ========================================================================== */

:root {
  --motion-fast: 0.15s; /* @kind other */
  --motion-base: 0.16s; /* @kind other */
  --motion-enter: 0.18s; /* @kind other */
  --ease: ease; /* @kind other */

  --transition-surface: box-shadow var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease), background-color var(--motion-fast) var(--ease);
  --transition-knob: transform var(--motion-base) var(--ease);

  --animation-fade: vdFade var(--motion-enter) var(--ease);
  --animation-rise: vdRise var(--motion-enter) var(--ease);

  /* Survol : surfaces colorées. Les surfaces claires passent à --surface-hover. */
  --hover-brighten: brightness(1.08); /* @kind other */
  --hover-darken: brightness(0.97); /* @kind other */
}

@keyframes vdFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes vdRise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ---------- Bases du document ---------- */

/* ---------- ./base.css ---------- */
/* ==========================================================================
   Valideo — Bases du document (reprises de src/styles/styles.css du dépôt).
   ========================================================================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--surface-app);color:var(--text-body);font-family:var(--font-sans);font-size:var(--font-body-size);-webkit-font-smoothing:antialiased}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover)}
button{font-family:inherit}
input,textarea,select{font-family:inherit}
/* L'anneau de focus n'existe pas dans les maquettes : ajouté pour l'accessibilité. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Barres de défilement internes des panneaux. */
.vd-scroll{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border-500) transparent}
.vd-scroll::-webkit-scrollbar{width:8px;height:8px}
.vd-scroll::-webkit-scrollbar-thumb{background:var(--border-500);border-radius:var(--radius-pill)}
.vd-scroll::-webkit-scrollbar-track{background:transparent}
.vd-app{font-family:var(--font-sans);color:var(--text-body)}


/* ---------- Composants effectivement rendus ---------- */

/* ---------- ./components/primitives/Button.css ---------- */
.vd-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: var(--radius-button);
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-surface), filter var(--motion-fast) var(--ease);
}

.vd-button:disabled {
  cursor: default;
  opacity: 0.5;
}

.vd-button__label {
  min-width: 0;
}

/* ---------- Tailles ---------- */

.vd-button--sm {
  height: 30px;
  padding: 0 11px;
  font-size: var(--text-12);
  border-radius: var(--radius-button-sm);
}

.vd-button--md {
  height: var(--control-height);
  padding: 0 14px;
  font-size: var(--text-13);
}

.vd-button--lg {
  min-height: 44px;
  padding: 12px 20px;
  font-size: var(--text-14);
  border-radius: var(--radius-control);
}

.vd-button--icon-only.vd-button--sm {
  width: 30px;
  padding: 0;
}

.vd-button--icon-only.vd-button--md {
  width: var(--control-height);
  padding: 0;
}

.vd-button--icon-only.vd-button--lg {
  width: 44px;
  padding: 0;
}

.vd-button--full {
  width: 100%;
}

/* ---------- Variantes ----------
   Règle de survol du design system : une surface colorée s'éclaircit
   (brightness 1.08), une surface claire passe au gris --surface-hover. */

.vd-button--primary {
  background: var(--accent);
  color: var(--text-on-accent);
}

.vd-button--primary:hover:not(:disabled) {
  filter: var(--hover-brighten);
}

.vd-button--dark {
  background: var(--surface-inverse);
  color: var(--text-on-dark);
}

.vd-button--dark:hover:not(:disabled) {
  filter: var(--hover-brighten);
}

.vd-button--secondary {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-heading);
}

.vd-button--secondary:hover:not(:disabled) {
  background: var(--surface-hover);
}

.vd-button--ghost {
  background: transparent;
  color: var(--text-muted);
}

.vd-button--ghost:hover:not(:disabled) {
  background: var(--surface-hover);
}

.vd-button--danger {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-danger);
}

.vd-button--danger:hover:not(:disabled) {
  background: var(--state-danger-bg);
}


/* ---------- Spécifique au vitrine ---------- */

/* ---------- ./site.css ---------- */
/* ==========================================================================
   Valideo — règles propres au site vitrine.

   Complète les tokens du design system avec ce que les maquettes de référence
   déclarent dans leurs propres blocs <style>, plus les deux classes émises par
   les composants Blade portés depuis le bundle (Icon, IconTile).
   ========================================================================== */

/* ---------- Bases reprises des blocs <style> des artboards ---------- */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface-app);
}

/* ---------- Classes émises par les composants portés ---------- */

/* Icon.tsx : le SVG ne participe pas au flex et ne traîne pas de ligne de base. */
.vd-icon {
  flex: 0 0 auto;
  display: block;
}

/* Card.tsx : la tuile carrée qui reçoit une icône. */
.vd-icon-tile {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

/* ---------- Ancrages ----------
   Les sections de la landing sont visées par des liens #fonctionnement,
   #tarifs, #faq… La barre de navigation est fixe : sans décalage, le titre
   de section se retrouve masqué derrière elle. */
[id] {
  scroll-margin-top: clamp(84px, 8vw, 104px);
}

/* ---------- Survols ----------
   Les maquettes portent 326 attributs « style-hover », une extension du canvas
   Claude Design qui n'existe pas en CSS. Ils sont traduits ici en vraies règles,
   déclenchées par des classes utilitaires posées sur le markup porté.
   Le design system l'impose : le survol ne colore jamais une bordure ni un
   texte — sauf l'entrée de menu, seule exception documentée. */

/* Lien de navigation : passe du gris au bleu d'encre. */
.vdh-nav-link {
  transition: color var(--motion-fast) var(--ease);
}
.vdh-nav-link:hover {
  color: var(--text-heading);
}

/* Lien d'accent : passe à l'orange de marque. */
.vdh-accent-link {
  transition: color var(--motion-fast) var(--ease);
}
.vdh-accent-link:hover {
  color: var(--accent);
}

/* Surface claire cliquable : fond --surface-hover, jamais de bordure colorée. */
.vdh-surface {
  transition: var(--transition-surface);
}
.vdh-surface:hover {
  background: var(--surface-hover);
}

/* Surface colorée (orange, navy) : brightness(1.08). */
.vdh-brighten {
  transition: filter var(--motion-fast) var(--ease);
}
.vdh-brighten:hover {
  filter: var(--hover-brighten);
}

/* Card de listing non sélectionnée : brightness(0.97). */
.vdh-darken {
  transition: filter var(--motion-fast) var(--ease);
}
.vdh-darken:hover {
  filter: var(--hover-darken);
}

/* Card cliquable : l'ombre se lève, la bordure se marque. Employée sur les
   cards d'article, seul listing du vitrine. Valeurs reprises de l'artboard
   « Articles » — pas de translation, pas d'échelle : le design system ne
   connaît pas d'état d'appui. */
.vdh-card {
  transition: box-shadow var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease);
}
.vdh-card:hover {
  box-shadow: 0 18px 40px rgba(16, 39, 58, 0.12);
  border-color: var(--border-strong, #e4e9ef);
}

/* ---------- Utilitaires de contenu ----------
   Repris du guide de typographie : nombres tabulaires et veuves évitées. */
.vd-nums {
  font-variant-numeric: tabular-nums;
}

.vd-prose {
  text-wrap: pretty;
}

/* ---------- Accessibilité ---------- */

/* Titre présent pour la structure du document mais non affiché. */
.vd-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Cible de saisie confortable au doigt sur les contrôles tactiles. */
@media (hover: none) {
  .vdh-surface:hover,
  .vdh-brighten:hover,
  .vdh-darken:hover,
  .vdh-card:hover {
    background: revert;
    filter: none;
    border-color: revert;
    box-shadow: revert;
  }
}

/* ---------- Alpine ----------
   Un élément marqué x-cloak reste masqué jusqu'à l'initialisation d'Alpine.
   Sans cette règle, il apparaît brièvement au chargement. */
[x-cloak] {
  display: none !important;
}


/* ---------- ./chrome.css ---------- */
/* ==========================================================================
   Valideo — barre de navigation et pied de page.

   Les maquettes portent tout en styles inline, ce qui interdit la moindre
   media query. Or la barre change de gabarit entre les deux artboards :
   pilule de 66 px avec navigation centrée au-delà de 768 px, pilule de 54 px
   avec bouton burger en dessous. Ces différences sont donc reprises ici en
   classes, seule forme qui accepte un point de rupture.

   Point de rupture unique : 768 px, la largeur qui sépare les deux maquettes.
   ========================================================================== */

/* ---------- Enveloppe fixe ---------- */
.vd-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: clamp(12px, 1.4vw, 18px) clamp(14px, 3vw, 30px) 0;
  pointer-events: none;
}

/* ---------- La pilule ---------- */
.vd-topbar__pill {
  pointer-events: auto;
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(16, 39, 58, 0.06);
  transition: box-shadow var(--motion-fast) var(--ease);
  animation: vdRise 200ms ease both;
}

/* Au-delà de 24 px de défilement, l'ombre se renforce. */
.vd-topbar__pill.is-compact {
  box-shadow: 0 14px 34px rgba(16, 39, 58, 0.12);
}

.vd-topbar__inner {
  padding: clamp(9px, 1vw, 14px) clamp(14px, 2vw, 22px);
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 10px clamp(16px, 3vw, 40px);
}

.vd-topbar__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.vd-topbar__logo img {
  height: 26px;
  width: auto;
  display: block;
  transition: filter var(--motion-fast) var(--ease);
}

.vd-topbar__logo:hover img {
  filter: var(--hover-brighten);
}

/* ---------- Navigation de bureau ---------- */
.vd-topbar__nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px clamp(18px, 2.6vw, 36px);
}

/* Le lien reçoit un soulignement orange qui se déplie depuis la gauche.
   Les maquettes l'obtiennent par une propriété personnalisée « --u » pilotée
   au survol ; on la reprend telle quelle. */
.vd-topbar__link {
  position: relative;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  --u: 0;
  transition: color var(--motion-fast) var(--ease);
}

.vd-topbar__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  transform: scaleX(var(--u, 0));
  transform-origin: left center;
  transition: transform var(--motion-fast) var(--ease);
}

.vd-topbar__link:hover {
  color: var(--text-heading);
  --u: 1;
}

.vd-topbar__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px 18px;
}

.vd-topbar__login {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color var(--motion-fast) var(--ease);
}

.vd-topbar__login:hover {
  color: var(--text-heading);
}

/* ---------- CTA révélé au défilement ----------
   Sur la landing, le bouton n'apparaît qu'une fois le hero dépassé : le hero
   porte déjà son propre appel à l'action, en afficher deux à la fois
   contredirait la règle « une seule action orange par écran ». */
.vd-topbar__cta {
  display: flex;
  overflow: hidden;
  transition: opacity 240ms var(--ease), transform 240ms var(--ease),
    max-width 300ms var(--ease);
}

.vd-topbar__cta--reveal {
  opacity: 0;
  transform: translateY(-6px);
  max-width: 0;
  pointer-events: none;
}

.vd-topbar__cta--reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  max-width: 240px;
  pointer-events: auto;
}

/* ---------- Bouton burger ---------- */
.vd-topbar__burger {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-heading);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background-color var(--motion-fast) var(--ease);
}

.vd-topbar__burger:hover {
  background: var(--surface-hover);
}

/* ---------- Panneau de menu mobile ---------- */
.vd-menu__veil {
  position: fixed;
  inset: 0;
  z-index: 58;
  background: var(--overlay-modal, rgba(16, 39, 58, 0.45));
  animation: vdFade 180ms ease both;
}

.vd-menu__panel {
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  margin: 0 auto;
  max-width: 406px;
  z-index: 59;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  box-shadow: var(--shadow-popover, 0 18px 40px rgba(16, 39, 58, 0.16));
  animation: vdRise 200ms ease both;
  box-sizing: border-box;
  padding: 0 18px 18px;
}

.vd-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
}

.vd-menu__head img {
  height: 24px;
  width: auto;
  display: block;
}

.vd-menu__nav {
  display: flex;
  flex-direction: column;
}

.vd-menu__nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-heading);
  border-bottom: 1px solid var(--border-subtle);
}

.vd-menu__foot {
  display: flex;
  margin-top: 8px;
}

/* ==========================================================================
   Point de rupture — en dessous de 768 px, on passe au gabarit de la maquette
   mobile : pilule de 54 px, marges latérales, navigation repliée.
   ========================================================================== */
@media (max-width: 767.98px) {
  .vd-topbar {
    padding: 12px 12px 0;
  }

  .vd-topbar__pill {
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 28px rgba(16, 39, 58, 0.1);
  }

  .vd-topbar__inner {
    min-height: 54px;
    padding: 0 8px 0 16px;
    justify-content: space-between;
  }

  .vd-topbar__logo img {
    height: 24px;
  }

  /* La navigation et les actions de bureau cèdent la place au burger. */
  .vd-topbar__nav,
  .vd-topbar__actions {
    display: none;
  }
}

/* Au-delà du point de rupture, le burger et son panneau n'existent pas. */
@media (min-width: 768px) {
  .vd-topbar__burger,
  .vd-menu__veil,
  .vd-menu__panel {
    display: none !important;
  }
}

/* ==========================================================================
   Pied de page

   Le pied de page des maquettes s'organise en flex-wrap : il se replie seul,
   sans point de rupture. Son markup est donc porté verbatim avec ses styles
   inline, et seules les règles de survol — impossibles en inline — vivent ici.
   ========================================================================== */

/* Lien de pied de page : passe au blanc pur au survol. */
.vd-foot-link {
  transition: color var(--motion-fast) var(--ease);
}

.vd-foot-link:hover {
  color: #fff;
}

/* Pastille de réseau social : le voile blanc s'épaissit, l'icône blanchit.
   Seuls endroits du site où un voile blanc est permis — sur fond navy. */
.vd-foot-social {
  transition: background-color var(--motion-fast) var(--ease),
    color var(--motion-fast) var(--ease);
}

.vd-foot-social:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}


/* ---------- ./article.css ---------- */
/* ==========================================================================
   Valideo — corps d'article.

   Deux parties bien distinctes :

   1. La prose. Les valeurs sont celles de l'artboard « Article ». À la
      différence des autres pages portées, le markup n'est pas écrit ici : il
      arrive en HTML libre depuis l'API de l'intranet. On style donc les
      balises, pas des classes.

   2. Une couche de compatibilité. Les 35 articles publiés sont rédigés dans un
      CMS externe qui émet des classes Bootstrap — grille, espacements,
      list-group, card, lead. Bootstrap n'étant plus chargé globalement, ces
      classes sont réimplémentées ici, et uniquement dans « .vd-prose-article ».
      Sans cela, du contenu qu'on ne maîtrise pas se disloque.

      Ne pas étendre cette liste par précaution : elle reprend exactement les
      classes relevées dans le contenu réel de l'API. Ce qui n'y figure pas
      n'est pas employé.
   ========================================================================== */

.vd-prose-article {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ---------- Titres ---------- */
.vd-prose-article h2 {
  margin: 14px 0 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--text-heading);
  text-wrap: pretty;
}

/* Le CMS descend jusqu'au h5 ; on prolonge l'échelle sans la casser. */
.vd-prose-article h3 {
  margin: 10px 0 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--text-heading);
  text-wrap: pretty;
}

.vd-prose-article h4,
.vd-prose-article h5 {
  margin: 8px 0 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--text-heading);
}

/* Un h1 dans le corps est une erreur de rédaction : la page en a déjà un.
   On l'aligne sur le h2 plutôt que de laisser deux titres de premier rang. */
.vd-prose-article h1 {
  margin: 14px 0 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--text-heading);
}

/* ---------- Corps ---------- */
.vd-prose-article p {
  margin: 0;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--text-body);
  text-wrap: pretty;
}

.vd-prose-article strong,
.vd-prose-article b {
  font-weight: 700;
  color: var(--text-heading);
}

.vd-prose-article a:not(.btn):not(.btn-valideo) {
  font-weight: 700;
  color: var(--text-heading);
  border-bottom: 1px solid var(--border-strong, #e4e9ef);
  transition: color var(--motion-fast) var(--ease);
}

.vd-prose-article a:not(.btn):not(.btn-valideo):hover {
  color: var(--accent);
}

/* ---------- Listes ----------
   L'artboard coche chaque item d'un chevron orange. Le CMS n'émet que des
   <li> nus : la coche est donc dessinée en CSS, en image de fond masquée. */
.vd-prose-article ul,
.vd-prose-article ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vd-prose-article li {
  position: relative;
  padding-left: 26px;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--text-body);
  text-wrap: pretty;
}

.vd-prose-article ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 15px;
  height: 15px;
  background-color: var(--accent, #ff6b2c);
  /* Tracé de la coche de l'artboard : M5 12.5l4.5 4.5L19 7.5 */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Une liste ordonnée garde ses numéros : ils portent du sens. */
.vd-prose-article ol {
  counter-reset: vd-ol;
}

.vd-prose-article ol > li {
  counter-increment: vd-ol;
}

.vd-prose-article ol > li::before {
  content: counter(vd-ol) '.';
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent, #ff6b2c);
}

/* ---------- Citation ---------- */
.vd-prose-article blockquote {
  margin: 18px 0;
  padding: 20px 22px;
  background: var(--surface-panel, #fbfcfd);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
}

.vd-prose-article blockquote p {
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: var(--text-heading);
}

/* ---------- Média ---------- */
.vd-prose-article img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 4px auto;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
}

.vd-prose-article hr {
  width: 100%;
  height: 1px;
  margin: 8px 0;
  border: 0;
  background: var(--border-subtle);
}

/* ---------- Tableau ----------
   Il défile dans son propre conteneur plutôt que de pousser la page : c'est
   ce qui évite les débordements sur mobile. */
.vd-prose-article table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  display: block;
  overflow-x: auto;
  scrollbar-width: thin;
}

.vd-prose-article th,
.vd-prose-article td {
  padding: 10px 13px;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}

.vd-prose-article th {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
  white-space: nowrap;
}

.vd-prose-article td {
  font-weight: 500;
  color: var(--text-body);
}

/* ==========================================================================
   Couche de compatibilité — classes émises par le CMS externe.
   Portée volontairement limitée à « .vd-prose-article ».
   ========================================================================== */

/* ---------- Grille ---------- */
.vd-prose-article .row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0;
}

.vd-prose-article .col,
.vd-prose-article .col-12 {
  flex: 1 1 100%;
  min-width: 0;
}

.vd-prose-article .col-md-6 {
  flex: 1 1 100%;
  min-width: 0;
}

@media (min-width: 768px) {
  .vd-prose-article .col-md-6 {
    flex: 1 1 calc(50% - 10px);
  }
}

.vd-prose-article .row-cols-1 > * {
  flex: 1 1 100%;
}

.vd-prose-article .container-fluid {
  width: 100%;
  padding: 0;
}

.vd-prose-article .g-4 {
  gap: 20px;
}

.vd-prose-article .h-100 {
  height: 100%;
}

.vd-prose-article .align-items-center {
  align-items: center;
}

/* ---------- Ordre ---------- */
.vd-prose-article .order-1 { order: 1; }
.vd-prose-article .order-2 { order: 2; }

@media (min-width: 768px) {
  .vd-prose-article .order-md-1 { order: 1; }
  .vd-prose-article .order-md-2 { order: 2; }
}

/* ---------- Espacements ----------
   Échelle Bootstrap : 1=0.25rem … 5=3rem. */
.vd-prose-article .mt-4 { margin-top: 1.5rem; }
.vd-prose-article .mt-5 { margin-top: 3rem; }
.vd-prose-article .mb-4 { margin-bottom: 1.5rem; }
.vd-prose-article .mb-5 { margin-bottom: 3rem; }
.vd-prose-article .my-3 { margin-top: 1rem; margin-bottom: 1rem; }
.vd-prose-article .py-5 { padding-top: 3rem; padding-bottom: 3rem; }
.vd-prose-article .px-4 { padding-left: 1.5rem; padding-right: 1.5rem; }

@media (min-width: 768px) {
  .vd-prose-article .mt-md-0 { margin-top: 0; }
  .vd-prose-article .px-md-5 { padding-left: 3rem; padding-right: 3rem; }
  .vd-prose-article .ps-md-5 { padding-left: 3rem; }
  .vd-prose-article .pe-md-5 { padding-right: 3rem; }
}

/* ---------- Typographie ---------- */
.vd-prose-article .lead {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.65;
  color: var(--text-heading);
}

.vd-prose-article .fw-bold {
  font-weight: 700;
  color: var(--text-heading);
}

.vd-prose-article .text-danger {
  color: var(--text-danger, #e0281c);
}

.vd-prose-article .img-fluid {
  max-width: 100%;
  height: auto;
}

/* ---------- Card ----------
   Anatomie du design system : fond blanc, bordure 1 px, rayon 20, ombre basse.
   Pas de dégradé, pas d'en-tête teinté. */
.vd-prose-article .card {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card, 20px);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.vd-prose-article .card-body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.vd-prose-article .card-title {
  margin: 0;
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-heading);
}

/* ---------- List group ---------- */
.vd-prose-article .list-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  overflow: hidden;
}

.vd-prose-article .list-group-item {
  padding: 13px 16px;
  padding-left: 16px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-body);
}

.vd-prose-article .list-group-item:last-child {
  border-bottom: 0;
}

/* La puce en coche ne s'applique pas dans un list-group : l'item y est une
   ligne pleine, pas une énumération. */
.vd-prose-article .list-group-item::before {
  content: none;
}

.vd-prose-article .list-group-flush {
  border: 0;
  border-radius: 0;
}

.vd-prose-article .list-group-numbered {
  counter-reset: vd-lg;
}

.vd-prose-article .list-group-numbered > .list-group-item {
  counter-increment: vd-lg;
}

.vd-prose-article .list-group-numbered > .list-group-item::before {
  content: counter(vd-lg) '. ';
  font-weight: 800;
  color: var(--accent);
  position: static;
}

/* ---------- Boutons ----------
   Un bouton dans un article est une action principale : il prend l'accent. */
.vd-prose-article .btn,
.vd-prose-article .btn-valideo {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--radius-control, 12px);
  background: var(--accent);
  color: var(--text-on-accent, #fff);
  font-size: var(--text-14, 14px);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: filter var(--motion-fast) var(--ease);
}

.vd-prose-article .btn:hover,
.vd-prose-article .btn-valideo:hover {
  filter: var(--hover-brighten);
  color: var(--text-on-accent, #fff);
}

/* Un bouton secondaire reste une surface claire bordée. */
.vd-prose-article .btn-secondary {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-heading);
}

.vd-prose-article .btn-secondary:hover {
  background: var(--surface-hover);
  filter: none;
  color: var(--text-heading);
}

/* ---------- Résidus de copier-coller ----------
   Quelques articles portent des classes venues d'un autre outil
   (« flex », « w-fit », « min-w-(--thread-content-width) »…). On neutralise
   celles qui déforment la mise en page, sans chercher à les réimplémenter. */
.vd-prose-article [class*='min-w-('] {
  min-width: 0 !important;
}

.vd-prose-article .flex {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.vd-prose-article .flex-col-reverse {
  flex-direction: column-reverse;
}

.vd-prose-article .w-fit {
  width: auto;
}

.vd-prose-article .whitespace-normal {
  white-space: normal;
}

/* ==========================================================================
   Message promotionnel — HTML libre du CMS, posé sur fond navy.
   Les voiles blancs ne sont permis que là : sur fond sombre.
   ========================================================================== */
.vd-promo p {
  margin: 0;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: #fff;
  text-wrap: pretty;
}

.vd-promo p + p {
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
}

.vd-promo strong,
.vd-promo b {
  color: var(--accent, #ff6b2c);
  font-weight: 800;
}

.vd-promo a {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}


/* ---------- ./landing.css ---------- */
/* ==========================================================================
   Valideo — page d'accueil.

   Deux blocs, tous deux extraits mécaniquement de
   reference/Valideo Landing.dc.html :

   1. Les animations. La maquette en déclare une nonantaine dans son propre
      <style> : la séquence de 17 s du hero, les trois temps de l'espace
      client, la signature, le calculateur. Reprises verbatim.

   2. Les survols. La maquette les porte en attribut « style-hover », qui
      n'existe pas en CSS. Chaque valeur distincte est devenue une classe.
   ========================================================================== */

/* Séquence globale : 17s, une étape active à la fois */
@keyframes vdCol1 { 0%, 40% { filter: none; opacity: 1 } 43%, 98% { filter: grayscale(0.95); opacity: 0.48 } 100% { filter: none; opacity: 1 } }
@keyframes vdCol2 { 0%, 39% { filter: grayscale(0.95); opacity: 0.48 } 42%, 55% { filter: none; opacity: 1 } 57.5%, 100% { filter: grayscale(0.95); opacity: 0.48 } }
@keyframes vdCol3 { 0%, 54% { filter: grayscale(0.95); opacity: 0.48 } 57%, 98% { filter: none; opacity: 1 } 100% { filter: grayscale(0.95); opacity: 0.48 } }
@keyframes vdNum1 { 0%, 40% { background-color: var(--accent, #FF6B2C); color: #fff } 43%, 98% { background-color: var(--surface-canvas, #EEF1F4); color: var(--text-secondary, #6B7F91) } 100% { background-color: var(--accent, #FF6B2C); color: #fff } }
@keyframes vdNum2 { 0%, 39% { background-color: var(--surface-canvas, #EEF1F4); color: var(--text-secondary, #6B7F91) } 42%, 55% { background-color: var(--accent, #FF6B2C); color: #fff } 57.5%, 100% { background-color: var(--surface-canvas, #EEF1F4); color: var(--text-secondary, #6B7F91) } }
@keyframes vdNum3 { 0%, 54% { background-color: var(--surface-canvas, #EEF1F4); color: var(--text-secondary, #6B7F91) } 57%, 98% { background-color: var(--accent, #FF6B2C); color: #fff } 100% { background-color: var(--surface-canvas, #EEF1F4); color: var(--text-secondary, #6B7F91) } }
@keyframes vdTrack1 { 0%, 2.4% { background-color: var(--border-600, #E4E9EF) } 3.4%, 41% { background-color: var(--accent, #FF6B2C) } 42%, 100% { background-color: var(--border-600, #E4E9EF) } }
@keyframes vdKnob1 { 0%, 2.4% { transform: translateX(0) } 3.4%, 41% { transform: translateX(13px) } 42%, 100% { transform: translateX(0) } }
@keyframes vdTrack2 { 0%, 5.4% { background-color: var(--border-600, #E4E9EF) } 6.4%, 41% { background-color: var(--accent, #FF6B2C) } 42%, 100% { background-color: var(--border-600, #E4E9EF) } }
@keyframes vdKnob2 { 0%, 5.4% { transform: translateX(0) } 6.4%, 41% { transform: translateX(13px) } 42%, 100% { transform: translateX(0) } }
@keyframes vdTrack3 { 0%, 8.4% { background-color: var(--border-600, #E4E9EF) } 9.4%, 41% { background-color: var(--accent, #FF6B2C) } 42%, 100% { background-color: var(--border-600, #E4E9EF) } }
@keyframes vdKnob3 { 0%, 8.4% { transform: translateX(0) } 9.4%, 41% { transform: translateX(13px) } 42%, 100% { transform: translateX(0) } }
@keyframes vdSigVeil { 0%, 12.4% { opacity: 0 } 15%, 34.7% { opacity: 1 } 37.6%, 100% { opacity: 0 } }
@keyframes vdSigSheet { 0%, 12.4% { transform: translateY(102%) } 16.8%, 34.7% { transform: translateY(0) } 37.6%, 100% { transform: translateY(102%) } }
@keyframes vdSigDraw { 0%, 20% { stroke-dashoffset: 100 } 23.5%, 100% { stroke-dashoffset: 0 } }
@keyframes vdSigBtn { 0%, 29% { transform: none } 29.8% { transform: scale(0.96) } 30.6%, 100% { transform: none } }
@keyframes vdSigEmpty { 0%, 34.5% { opacity: 1 } 35.5%, 41% { opacity: 0 } 42%, 100% { opacity: 1 } }
@keyframes vdSigFilled { 0%, 34.5% { opacity: 0 } 35.5%, 41% { opacity: 1 } 42%, 100% { opacity: 0 } }
@keyframes vdCta { 0%, 38% { transform: none } 39% { transform: scale(0.965) } 40%, 100% { transform: none } }
@keyframes vdGauge2 { 0%, 42.4% { height: 0% } 45.6% { height: 26% } 49% { height: 54% } 52.4% { height: 80% } 55%, 59% { height: 100% } 60.5%, 100% { height: 0% } }
@keyframes vdBar2 { 0%, 42.4% { width: 6% } 45.6% { width: 32% } 49% { width: 58% } 52.4% { width: 82% } 55%, 59% { width: 100% } 60.5%, 100% { width: 6% } }
@keyframes vdRingA { 0%, 43.2% { border-color: var(--border-strong, #E4E9EF) } 44.2%, 47.8% { border-color: var(--accent, #FF6B2C) } 49%, 59% { border-color: var(--state-success-fg, #1F7A55) } 60.5%, 100% { border-color: var(--border-strong, #E4E9EF) } }
@keyframes vdCoreA { 0%, 43.6% { opacity: 0; transform: scale(0.4) } 44.6%, 47.4% { opacity: 1; transform: scale(1) } 48.6%, 100% { opacity: 0; transform: scale(0.4) } }
@keyframes vdChkA { 0%, 48% { opacity: 0; transform: scale(0.6) } 49%, 59% { opacity: 1; transform: scale(1) } 60.5%, 100% { opacity: 0; transform: scale(0.6) } }
@keyframes vdTxtA { 0%, 43.6% { color: var(--text-tertiary, #93A4B3) } 44.6%, 47.8% { color: var(--accent-on-soft, #C24E12) } 49%, 59% { color: var(--state-success-fg, #1F7A55) } 60.5%, 100% { color: var(--text-tertiary, #93A4B3) } }
@keyframes vdRingB { 0%, 48.6% { border-color: var(--border-strong, #E4E9EF) } 49.6%, 53.2% { border-color: var(--accent, #FF6B2C) } 54.4%, 59% { border-color: var(--state-success-fg, #1F7A55) } 60.5%, 100% { border-color: var(--border-strong, #E4E9EF) } }
@keyframes vdCoreB { 0%, 49% { opacity: 0; transform: scale(0.4) } 50%, 52.8% { opacity: 1; transform: scale(1) } 54%, 100% { opacity: 0; transform: scale(0.4) } }
@keyframes vdChkB { 0%, 53.4% { opacity: 0; transform: scale(0.6) } 54.4%, 59% { opacity: 1; transform: scale(1) } 60.5%, 100% { opacity: 0; transform: scale(0.6) } }
@keyframes vdTxtB { 0%, 49% { color: var(--text-tertiary, #93A4B3) } 50%, 53.2% { color: var(--accent-on-soft, #C24E12) } 54.4%, 59% { color: var(--state-success-fg, #1F7A55) } 60.5%, 100% { color: var(--text-tertiary, #93A4B3) } }
@keyframes vdTile3 {
  0%, 57% { transform: scale(0.9); background-color: var(--accent-soft, #FFF0E8); color: var(--accent, #FF6B2C); animation-timing-function: cubic-bezier(0.22, 0.9, 0.3, 1) }
  60.2% { transform: scale(1.13); background-color: var(--accent, #FF6B2C); color: #fff; animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1) }
  62.4% { transform: scale(0.99); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1) }
  64.2%, 67% { transform: scale(1); background-color: var(--accent, #FF6B2C); color: #fff; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) }
  70.5%, 100% { transform: scale(1); background-color: var(--accent-soft, #FFF0E8); color: var(--accent, #FF6B2C) }
}
@keyframes vdHalo3 {
  0%, 58% { opacity: 0; transform: scale(0.8); animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1) }
  60.5% { opacity: 0.45; transform: scale(1.08); animation-timing-function: cubic-bezier(0.25, 0, 0.35, 1) }
  68%, 100% { opacity: 0; transform: scale(1.9) }
}
@keyframes vdType3 { 0%, 64% { max-width: 0ch; animation-timing-function: steps(37, end) } 71.5%, 100% { max-width: 38ch } }
@keyframes vdCaret3 { 0%, 63.6% { opacity: 0 } 64%, 71.5% { opacity: 1 } 73%, 100% { opacity: 0 } }
@keyframes vdSend3 { 0%, 76% { transform: none } 76.9% { transform: scale(0.965) } 77.9%, 100% { transform: none } }
@keyframes vdSent3 { 0%, 79% { opacity: 0; transform: translateY(5px) } 82%, 100% { opacity: 1; transform: translateY(0) } }
@keyframes vdPulse { 0%, 100% { opacity: 0.3 } 50% { opacity: 1 } }
@keyframes vdCaret { 0%, 44% { opacity: 1 } 50%, 94% { opacity: 0 } 100% { opacity: 1 } }
[style*="animation: vdKnobOn"], [style*="animation: vdStepCore"], [style*="animation: vdStepChk"], [style*="animation: vdBarFill"] { will-change: transform, opacity, width; backface-visibility: hidden }
@keyframes vdFloatA { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-2.5px) } }
@keyframes vdFloatB { 0%, 100% { transform: translateY(-1.5px) } 50% { transform: translateY(1.5px) } }
@keyframes vdFloatC { 0%, 100% { transform: translateY(1px) } 50% { transform: translateY(-2px) } }
/* Espace client — 3 temps, un seul écran actif à la fois */
@keyframes vdPanClient { 0%, 30% { filter: none; opacity: 1 } 34%, 64% { filter: grayscale(0.85); opacity: 0.45 } 68%, 100% { filter: none; opacity: 1 } }
@keyframes vdPanPro { 0%, 30% { filter: grayscale(0.85); opacity: 0.45 } 34%, 64% { filter: none; opacity: 1 } 68%, 100% { filter: grayscale(0.85); opacity: 0.45 } }
@keyframes vdS1 { 0%, 30% { background-color: var(--accent, #FF6B2C); color: #fff } 34%, 97% { background-color: var(--surface-canvas, #EEF1F4); color: var(--text-secondary, #6B7F91) } 100% { background-color: var(--accent, #FF6B2C); color: #fff } }
@keyframes vdS2 { 0%, 31% { background-color: var(--surface-canvas, #EEF1F4); color: var(--text-secondary, #6B7F91) } 34%, 64% { background-color: var(--accent, #FF6B2C); color: #fff } 68%, 100% { background-color: var(--surface-canvas, #EEF1F4); color: var(--text-secondary, #6B7F91) } }
@keyframes vdS3 { 0%, 65% { background-color: var(--surface-canvas, #EEF1F4); color: var(--text-secondary, #6B7F91) } 68%, 97% { background-color: var(--accent, #FF6B2C); color: #fff } 100% { background-color: var(--surface-canvas, #EEF1F4); color: var(--text-secondary, #6B7F91) } }
@keyframes vdClForm { 0%, 30% { opacity: 1 } 33%, 97% { opacity: 0 } 100% { opacity: 1 } }
@keyframes vdClSuivi { 0%, 30% { opacity: 0 } 33%, 97% { opacity: 1 } 100% { opacity: 0 } }
@keyframes vdClType { 0%, 4% { max-width: 0ch; animation-timing-function: steps(30, end) } 16%, 97% { max-width: 30ch } 100% { max-width: 0ch } }
@keyframes vdClCaret { 0%, 3.6% { opacity: 0 } 4%, 16% { opacity: 1 } 17.5%, 100% { opacity: 0 } }
@keyframes vdClChip { 0%, 19% { background-color: var(--surface-card, #fff); border-color: var(--border-subtle); color: var(--text-body) } 21%, 97% { background-color: var(--surface-inverse, #1E2836); border-color: var(--surface-inverse, #1E2836); color: #fff } 100% { background-color: var(--surface-card, #fff); border-color: var(--border-subtle); color: var(--text-body) } }
@keyframes vdClSend { 0%, 26% { transform: none } 27% { transform: scale(0.965) } 28%, 100% { transform: none } }
@keyframes vdMk1 { 0%, 31% { background-color: var(--surface-canvas, #EEF1F4); border-color: var(--border-strong, #E4E9EF); color: transparent } 34%, 97% { background-color: var(--accent, #FF6B2C); border-color: var(--accent, #FF6B2C); color: #fff } 100% { background-color: var(--surface-canvas, #EEF1F4); border-color: var(--border-strong, #E4E9EF); color: transparent } }
@keyframes vdMk2 { 0%, 69% { background-color: var(--surface-canvas, #EEF1F4); border-color: var(--border-strong, #E4E9EF); color: transparent } 72%, 97% { background-color: var(--accent, #FF6B2C); border-color: var(--accent, #FF6B2C); color: #fff } 100% { background-color: var(--surface-canvas, #EEF1F4); border-color: var(--border-strong, #E4E9EF); color: transparent } }
@keyframes vdMk3 { 0%, 75% { background-color: var(--surface-canvas, #EEF1F4); border-color: var(--border-strong, #E4E9EF); color: transparent } 78%, 97% { background-color: var(--accent, #FF6B2C); border-color: var(--accent, #FF6B2C); color: #fff } 100% { background-color: var(--surface-canvas, #EEF1F4); border-color: var(--border-strong, #E4E9EF); color: transparent } }
@keyframes vdMk4 { 0%, 81% { background-color: var(--surface-canvas, #EEF1F4); border-color: var(--border-strong, #E4E9EF); color: transparent } 84%, 97% { background-color: var(--accent, #FF6B2C); border-color: var(--accent, #FF6B2C); color: #fff } 100% { background-color: var(--surface-canvas, #EEF1F4); border-color: var(--border-strong, #E4E9EF); color: transparent } }
@keyframes vdLb1 { 0%, 31% { color: var(--text-tertiary, #93A4B3) } 34%, 97% { color: var(--text-heading) } 100% { color: var(--text-tertiary, #93A4B3) } }
@keyframes vdLb2 { 0%, 69% { color: var(--text-tertiary, #93A4B3) } 72%, 97% { color: var(--text-heading) } 100% { color: var(--text-tertiary, #93A4B3) } }
@keyframes vdLb3 { 0%, 75% { color: var(--text-tertiary, #93A4B3) } 78%, 97% { color: var(--text-heading) } 100% { color: var(--text-tertiary, #93A4B3) } }
@keyframes vdLb4 { 0%, 81% { color: var(--text-tertiary, #93A4B3) } 84%, 97% { color: var(--text-heading) } 100% { color: var(--text-tertiary, #93A4B3) } }
@keyframes vdClReport { 0%, 82% { opacity: 0; transform: translateY(7px) } 85%, 97% { opacity: 1; transform: none } 100% { opacity: 0; transform: translateY(7px) } }
@keyframes vdPrBadge { 0%, 34% { opacity: 0; transform: scale(0.5) } 38%, 97% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(0.5) } }
@keyframes vdPrCard { 0%, 34% { opacity: 0; transform: translateY(-10px) } 38%, 97% { opacity: 1; transform: none } 100% { opacity: 0; transform: translateY(-10px) } }
@keyframes vdPrP1 { 0%, 37% { opacity: 0 } 39%, 48% { opacity: 1 } 50%, 100% { opacity: 0 } }
@keyframes vdPrP2 { 0%, 49% { opacity: 0 } 51%, 97% { opacity: 1 } 100% { opacity: 0 } }
@keyframes vdPrSlot { 0%, 48% { opacity: 1 } 51%, 97% { opacity: 0 } 100% { opacity: 1 } }
@keyframes vdPrEvent { 0%, 47% { opacity: 0; transform: scale(0.9) } 51%, 97% { opacity: 1; transform: none } 100% { opacity: 0; transform: scale(0.9) } }
@keyframes vdPrAssign { 0%, 55% { opacity: 0; transform: translateY(-5px) } 58%, 97% { opacity: 1; transform: none } 100% { opacity: 0; transform: translateY(-5px) } }
/* Avant / depuis — fragment signé puis envoyé, 9s */
@keyframes vdChSig { 0%, 12% { stroke-dashoffset: 180 } 40%, 99.5% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: 180 } }
@keyframes vdChHint { 0%, 11% { opacity: 1 } 19%, 99.5% { opacity: 0 } 100% { opacity: 1 } }
@keyframes vdChBtn { 0%, 51% { opacity: 1; transform: none } 53% { opacity: 1; transform: scale(0.96) } 55% { opacity: 1; transform: none } 58%, 99.5% { opacity: 0; transform: none } 100% { opacity: 1 } }
@keyframes vdChSent { 0%, 56% { opacity: 0; transform: translateY(6px) } 61%, 99.5% { opacity: 1; transform: none } 100% { opacity: 0; transform: translateY(6px) } }
@keyframes vdTradeGlow { 0%, 100% { opacity: 0.55 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important } }


/* ---------- ./landing-hover.css ---------- */
/* ==========================================================================
   Valideo — survols de la page d'accueil.

   FICHIER GÉNÉRÉ — ne pas modifier à la main.
   Régénérer : node build-landing.cjs

   Les maquettes portent ces états en attribut « style-hover », qui n'existe
   pas en CSS. Chaque valeur distincte est devenue une classe, et les règles au
   corps identique sont regroupées ici sous un même sélecteur.
   ========================================================================== */

.vd-hero-d-1:hover {
  --hx: 3px;
}

.vd-hero-d-2:hover,
.vd-hero-m-1:hover,
.vd-fonctionnement-d-1:hover,
.vd-fonctionnement-m-1:hover,
.vd-modeles-m-1:hover,
.vd-editeur-d-1:hover,
.vd-editeur-m-1:hover,
.vd-tarifs-d-2:hover,
.vd-bloc11-d-1:hover,
.vd-bloc11-m-1:hover,
.vd-bloc13-d-1:hover,
.vd-bloc13-m-1:hover,
.vd-faq-d-1:hover {
  background: var(--surface-hover, #F7F9FB);
}

.vd-calcul-d-1:hover {
  --th: 24px;
}

.vd-modeles-d-1:hover {
  box-shadow: 0 10px 24px rgba(16, 39, 58, 0.12);
  transform: translateX(3px);
}

.vd-bloc8-d-1:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(16, 39, 58, 0.16) rotate(-0.7deg);
}

.vd-bloc8-d-2:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 32px rgba(16, 39, 58, 0.16);
}

.vd-bloc8-d-3:hover {
  transform: translateY(-5px) rotate(1.2deg);
  box-shadow: 0 20px 40px rgba(16, 39, 58, 0.16);
}

.vd-bloc8-d-4:hover {
  transform: translateY(-5px) rotate(-1.4deg);
  box-shadow: 0 20px 40px rgba(16, 39, 58, 0.16);
}

.vd-bloc8-d-5:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 36px rgba(16, 39, 58, 0.16);
}

.vd-bloc8-d-6:hover {
  transform: translateY(-5px) rotate(0.6deg);
  box-shadow: 0 20px 40px rgba(16, 39, 58, 0.16);
}

.vd-bloc8-d-7:hover {
  transform: translateY(-5px) rotate(-1deg);
  box-shadow: 0 20px 40px rgba(16, 39, 58, 0.16);
}

.vd-tarifs-d-1:hover {
  filter: brightness(1.08);
}

.vd-tarifs-d-3:hover {
  background: var(--surface-hover);
}



/* ---------- ./landing-mobile.css ---------- */
/* ==========================================================================
   Valideo — page d'accueil, gabarit mobile.

   Les deux maquettes ne sont pas la même page reflowée. Une comparaison
   structurelle des deux artboards (similarité des séquences de balises) sépare
   nettement deux familles :

     reflow  — avant-depuis 0,81 · calcul 1,00 · tarifs 1,00 · faq 1,00
               « Le rapport part… » 0,89
     refonte — hero · fonctionnement 0,37 · editeur 0,43 · IA 0,35
               témoignages 0,59 · articles 0,67

   Les six refontes sont portées depuis l'artboard mobile et basculent au point
   de rupture (voir plus bas). Les cinq reflows partagent le markup desktop :
   ses clamp() ont été écrits pour que la borne basse rejoigne le mobile — à
   390 px, « clamp(48px, 6vw, 88px) clamp(20px, 4vw, 48px) » vaut déjà
   48px 20px, le padding mobile exact. Seuls leurs titres restent à caler.

   Tout est porté par « .vd-landing » : sans ce préfixe, une règle comme
   « section h2 » atteindrait les pages légales, dont les titres font 21 px.

   Point de rupture 768 px, celui qui sépare les deux artboards.
   ========================================================================== */

@media (max-width: 767.98px) {

  /* ---------- Titres des sections en reflow ----------
     Tailles relevées section par section dans l'artboard mobile. Les sections
     basculées portent déjà les leurs : elles viennent de la maquette mobile. */
  .vd-landing .vd-desktop-only h2,
  .vd-landing section:not(.vd-mobile-only):not(.vd-desktop-only) h2 {
    font-size: 26px !important;
    letter-spacing: -0.035em !important;
    line-height: 1.1 !important;
  }

  .vd-landing #calcul h2,
  .vd-landing #tarifs h2 {
    font-size: 25px !important;
  }
}

/* ==========================================================================
   Bascule de composition

   Six sections ont deux compositions distinctes selon le gabarit. Les deux
   sont dans le HTML et le point de rupture choisit. C'est le seul endroit du
   site où du contenu est dupliqué : la séquence animée du « fonctionnement »
   (821 lignes, chorégraphie de 17 s) est illisible à 390 px, et la liste
   verticale du mobile perdrait tout son intérêt sur un écran large.

   Ces règles ne font que MASQUER. Elles ne posent jamais de « display » sur la
   composition visible : chaque section porte le sien en style inline — flex
   pour certaines, bloc pour d'autres. Une première version imposait
   « display: flex » à toutes les sections mobiles ; celle des témoignages, un
   bloc contenant une grille, voyait alors ses enfants devenir des items de
   rangée et la grille s'effondrer à zéro de large.

   « !important » reste nécessaire pour masquer : c'est la seule façon de
   battre un attribut style.
   ========================================================================== */
@media (min-width: 768px) {
  .vd-mobile-only {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  .vd-desktop-only {
    display: none !important;
  }
}