/* ==========================================================================
   KairHub — Design system « papier & terminal »
   --------------------------------------------------------------------------
   Parti pris : un fond papier crème, une serif éditoriale pour le discours,
   une monospace pour tout ce qui relève de la machine (étiquettes, tableaux,
   chiffres, commandes). Filets noirs francs, ombres portées pleines sans flou,
   encadrés en pointillés. Un seul accent, bleu ciel, toujours associé à
   l'encre — jamais de texte clair sur l'accent.

   Aucune valeur n'est choisie au cas par cas : tout vient des échelles
   déclarées ci-dessous.

   Contrastes vérifiés (WCAG 2.1 AA) :
     encre / papier      16.17:1     discret / papier     5.12:1
     encre / accent       9.59:1     papier / bloc encre 16.17:1
     succès / papier      5.29:1     erreur / papier      5.65:1
   ========================================================================== */

/* --------------------------------------------------------------- 1. Reset */

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

* {
  margin: 0;
  padding: 0;
}

/* -------------------------------------------------------------- 2. Tokens */

:root {
  /* Surfaces */
  --paper: #f2eee6;
  --card: #fbf9f4;
  --ink: #14120e;
  --ink-soft: #2a2620;

  /* Texte */
  --text: #14120e;
  --muted: #6b6355;
  --on-ink: #f2eee6;
  --on-ink-muted: #a8a093;

  /* Accent unique. Toujours en fond, avec du texte encre par-dessus. */
  --accent: #7fc0f5;
  --accent-soft: #c8e3f9;

  /* Sémantique */
  --success: #1f6f4a;
  --danger: #b3261e;

  /* Filets. Un seul ton : l'encre. La hiérarchie se fait à l'épaisseur et au
     style (plein / pointillé), pas à la couleur. */
  --line: var(--ink);
  --line-w: 1px;
  --line-w-strong: 2px;

  /* Typographie — deux familles, deux rôles */
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo,
    Consolas, monospace;

  --fs-1: 0.75rem; /*   12 — étiquettes mono */
  --fs-2: 0.8125rem; /* 13 — mono dense */
  --fs-3: 0.9375rem; /* 15 — texte secondaire */
  --fs-4: 1.0625rem; /* 17 — corps */
  --fs-5: 1.3125rem; /* 21 — chapô */
  --fs-6: 1.625rem; /*    26 — h3 */
  --fs-7: clamp(2rem, 1.3rem + 3vw, 3.25rem); /*   h2 */
  --fs-8: clamp(2.75rem, 1.5rem + 5.5vw, 5.25rem); /* h1 */

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.6;

  --track-mono: 0.08em;
  --track-display: -0.02em;

  /* Espacement — rythme de 4 px */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Rayons — francs, presque nuls */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* Ombres portées pleines, sans flou : c'est la signature du style. */
  --sh-1: 3px 3px 0 var(--ink);
  --sh-2: 6px 6px 0 var(--ink);

  /* Mouvement */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* Structure */
  --maxw: 1180px;
  --maxw-prose: 66ch;
  --gutter: var(--s-6);
  --nav-h: 76px;
}

/* ---------------------------------------------------------------- 3. Base */

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--s-5));
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-serif);
  font-size: var(--fs-4);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Grain. Une turbulence SVG en data-URI : donne la matière du papier sans
   aucune requête réseau ni image binaire. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

img,
svg {
  display: block;
  max-width: 100%;
}

ul,
ol {
  list-style: none;
}

/* Le focus reprend le vocabulaire du style : trait franc, pas de halo. */
:focus-visible {
  outline: var(--line-w-strong) solid var(--ink);
  outline-offset: 3px;
}

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

/* Tout ce qui relève de la machine passe en monospace : étiquettes, chiffres,
   métadonnées. C'est la moitié de l'identité. */
.tag,
.table-hint,
.data-table th,
.price,
.price-tag,
.app-badge,
.hero-badge,
.stack span,
.flow-step,
.footer-column h4,
.legal-updated,
.form-field label,
.form-legal,
.form-status,
.field-error,
.step-number,
.error-code,
.nav-links a,
.btn,
.proof-item span,
.contact-details li > span:first-child,
.back-link,
.footer-bottom {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
}

.price,
.price-tag,
.proof-item strong,
.step-number,
.error-code,
.data-table td {
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- 4. Layout */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 2;
}

section {
  padding-block: var(--s-9);
  position: relative;
  z-index: 2;
}

/* Titre de section : une étiquette mono en surtitre, puis la serif. */
.section-title {
  font-size: var(--fs-7);
  line-height: var(--lh-tight);
  margin-bottom: var(--s-4);
}

.section-subtitle {
  font-size: var(--fs-5);
  color: var(--muted);
  max-width: var(--maxw-prose);
  margin-bottom: var(--s-8);
}

.subsection-title {
  font-size: var(--fs-6);
  margin-top: var(--s-9);
  margin-bottom: var(--s-3);
  padding-top: var(--s-5);
  border-top: var(--line-w) solid var(--ink);
}

.subsection-intro {
  color: var(--muted);
  max-width: var(--maxw-prose);
  margin-bottom: var(--s-5);
}

.section-note {
  margin-top: var(--s-7);
  padding: var(--s-5) var(--s-6);
  background: var(--accent-soft);
  border: var(--line-w) solid var(--ink);
  border-radius: var(--r-md);
  max-width: var(--maxw-prose);
}

/* Le fond animé du thème sombre n'a plus lieu d'être : le papier et le grain
   font le travail. L'élément reste dans le HTML des 5 pages, on le neutralise. */
.bg-animated,
.bg-orb {
  display: none;
}

/* ---------------------------------------------------------- 5. Navigation */

.navbar {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: var(--paper);
  border-bottom: var(--line-w) solid transparent;
  transition: border-color var(--dur-2) var(--ease);
}

.navbar.scrolled {
  border-bottom-color: var(--ink);
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

.nav-brand a {
  text-decoration: none;
}

.logo {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: var(--track-display);
  color: var(--ink);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.nav-links a {
  font-size: var(--fs-1);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--muted);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease);
}

.nav-links a:not(.btn):hover,
.nav-links a:not(.btn).active {
  color: var(--ink);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--card);
  border: var(--line-w) solid var(--ink);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: box-shadow var(--dur-1) var(--ease);
}

.nav-toggle:hover {
  box-shadow: var(--sh-1);
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  transition:
    transform var(--dur-2) var(--ease),
    opacity var(--dur-1) var(--ease);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ------------------------------------------------------------- 6. Boutons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-3) var(--s-5);
  border: var(--line-w) solid var(--ink);
  border-radius: var(--r-sm);
  font-size: var(--fs-1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  background: transparent;
  color: var(--ink);
  transition:
    box-shadow var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease);
}

/* L'action principale porte l'accent et l'ombre pleine. */
.btn-primary {
  background: var(--accent);
  color: var(--ink);
  box-shadow: var(--sh-1);
}

.btn-primary:hover {
  color: var(--ink);
  transform: translate(-1px, -1px);
  box-shadow: var(--sh-2);
}

.btn-primary:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink);
}

.btn-secondary {
  background: var(--card);
  color: var(--ink);
}

.btn-secondary:hover {
  color: var(--ink);
  box-shadow: var(--sh-1);
}

.btn-large {
  min-height: 54px;
  padding: var(--s-4) var(--s-6);
  font-size: var(--fs-2);
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ---------------------------------------------------------------- 7. Hero */

.hero {
  padding-block: calc(var(--nav-h) + var(--s-8)) var(--s-9);
}

.hero .container {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--s-8);
  align-items: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  margin-bottom: var(--s-5);
  background: var(--accent-soft);
  border: var(--line-w) solid var(--ink);
  border-radius: var(--r-pill);
  font-size: var(--fs-1);
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--ink);
}

.hero-badge .pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  flex: none;
}

.hero-title {
  font-size: var(--fs-8);
  font-weight: 600;
  line-height: var(--lh-tight);
  margin-bottom: var(--s-5);
}

/* Ancien texte en dégradé. Ici : italique de la serif, souligné à l'accent.
   Un dégradé sur du texte rend toute mesure de contraste impossible. */
.gradient-text {
  font-style: italic;
  font-weight: 500;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 100% 0.28em;
  background-position: 0 82%;
}

.hero-subtitle {
  font-size: var(--fs-5);
  color: var(--muted);
  max-width: 46ch;
  margin-bottom: var(--s-6);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.hero-proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: var(--line-w) solid var(--ink);
}

.proof-item strong {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-6);
  font-weight: 600;
  line-height: 1.1;
}

.proof-item span {
  font-size: var(--fs-1);
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--muted);
}

/* Visuel du hero : la carte des services. Une fiche unique tenant les onze
   offres du catalogue, groupées par famille — plus dense et plus utile que
   trois étiquettes isolées, et cohérente avec le vocabulaire du style
   (en-tête à l'accent, filets francs, ombre pleine). */
.hero-visual {
  display: grid;
  align-content: center;
}

.service-map {
  background: var(--card);
  border: var(--line-w-strong) solid var(--ink);
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
  overflow: hidden;
}

.service-map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  background: var(--accent-soft);
  border-bottom: var(--line-w) solid var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--ink);
}

.service-map-head span:last-child {
  font-weight: 400;
  color: var(--muted);
}

.service-group {
  padding: var(--s-4) var(--s-5);
  border-bottom: var(--line-w) dashed var(--ink);
}

.service-group-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}

.service-group-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  background: var(--accent-soft);
  border: var(--line-w) solid var(--ink);
  border-radius: var(--r-sm);
  color: var(--ink);
}

.service-group-name {
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
}

.service-group ul {
  display: grid;
  gap: var(--s-1);
  padding-left: calc(30px + var(--s-3));
}

.service-group li {
  font-size: var(--fs-3);
  color: var(--muted);
  line-height: 1.5;
}

.service-map-link {
  display: block;
  padding: var(--s-3) var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--ink);
  text-decoration: none;
  transition: background var(--dur-1) var(--ease);
}

.service-map-link::after {
  content: " →";
}

.service-map-link:hover {
  background: var(--accent-soft);
}

/* -------------------------------------------------------------- 8. Icônes */

.icon {
  width: 20px;
  height: 20px;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.icon-lg {
  width: 24px;
  height: 24px;
}

/* ------------------------------------------------------- 9. Grille Vision */

.vision-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: var(--s-5);
}

.vision-item {
  padding: var(--s-6);
  background: var(--card);
  border: var(--line-w) solid var(--ink);
  border-radius: var(--r-md);
  transition: box-shadow var(--dur-2) var(--ease);
}

.vision-item:hover {
  box-shadow: var(--sh-1);
}

.vision-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: var(--s-4);
  background: var(--accent-soft);
  border: var(--line-w) solid var(--ink);
  border-radius: var(--r-sm);
  color: var(--ink);
}

.vision-item h3 {
  font-size: var(--fs-6);
  margin-bottom: var(--s-2);
}

.vision-item p {
  color: var(--muted);
  font-size: var(--fs-3);
}

/* ----------------------------------------------------------- 10. Tableaux */

.table-hint {
  display: none;
  margin-top: var(--s-5);
  font-size: var(--fs-1);
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--muted);
}

.table-wrapper {
  position: relative;
  margin-top: var(--s-6);
  overflow-x: auto;
  background: var(--card);
  border: var(--line-w) solid var(--ink);
  border-radius: var(--r-md);
}

.data-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: var(--fs-3);
}

.data-table th {
  padding: var(--s-4) var(--s-5);
  text-align: left;
  font-size: var(--fs-1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--ink);
  background: var(--accent-soft);
  border-bottom: var(--line-w) solid var(--ink);
  white-space: nowrap;
}

.data-table td {
  padding: var(--s-4) var(--s-5);
  color: var(--muted);
  border-bottom: var(--line-w) solid rgba(20, 18, 14, 0.14);
  vertical-align: top;
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr:hover {
  background: rgba(127, 192, 245, 0.09);
}

.data-table strong {
  color: var(--ink);
  font-weight: 600;
}

.data-table .price {
  color: var(--ink);
  font-size: var(--fs-2);
  font-weight: 600;
  white-space: nowrap;
}

.data-table .highlight {
  color: var(--ink);
  box-shadow: inset 0 -0.45em 0 var(--accent-soft);
}

.tag {
  display: inline-block;
  margin-left: var(--s-2);
  padding: 1px var(--s-2);
  border: var(--line-w) dashed var(--ink);
  border-radius: var(--r-pill);
  font-size: var(--fs-1);
  color: var(--muted);
  white-space: nowrap;
}

/* ------------------------------------------------------------- 11. Tarifs */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--s-5);
  margin-top: var(--s-6);
}

.price-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  background: var(--card);
  border: var(--line-w) dashed var(--ink);
  border-radius: var(--r-md);
}

/* L'offre mise en avant quitte le pointillé, prend le trait plein et l'ombre. */
.price-card.featured {
  border-style: solid;
  border-width: var(--line-w-strong);
  box-shadow: var(--sh-2);
}

.price-card h3,
.price-card h4 {
  font-size: var(--fs-6);
}

.price-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-5);
  font-weight: 700;
  color: var(--ink);
}

.price-tag span {
  font-size: var(--fs-1);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--muted);
  /* « / mois HT » ne doit jamais se couper : sur les libellés longs
     (« dès 800 € »), « HT » partait seul à la ligne. */
  white-space: nowrap;
}

.price-detail {
  color: var(--muted);
  font-size: var(--fs-3);
}

.price-card .app-badge {
  align-self: flex-start;
}

/* ------------------------------------------------------- 12. Réalisations */

.app-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: center;
  padding: var(--s-8);
  margin-bottom: var(--s-6);
  background: var(--card);
  border: var(--line-w) solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}

.app-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  padding: var(--s-1) var(--s-3);
  background: var(--card);
  border: var(--line-w) solid var(--ink);
  border-radius: var(--r-pill);
  font-size: var(--fs-1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--success);
}

.app-title {
  font-size: var(--fs-7);
  line-height: var(--lh-tight);
  margin-bottom: var(--s-2);
}

.app-subtitle {
  color: var(--muted);
  margin-bottom: var(--s-5);
}

.app-features {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

.app-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--fs-3);
  color: var(--muted);
}

.app-features li .icon {
  margin-top: 4px;
  color: var(--ink);
}

.stack {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}

.stack span {
  padding: 2px var(--s-3);
  background: var(--paper);
  border: var(--line-w) solid var(--ink);
  border-radius: var(--r-sm);
  font-size: var(--fs-1);
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--ink);
}

/* Maquettes produit : bloc encre, contenu en réserve claire. */
.mockup {
  padding: var(--s-4);
  background: var(--ink);
  border: var(--line-w) solid var(--ink);
  border-radius: var(--r-lg);
}

.mockup-screen {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
  min-height: 250px;
  align-content: center;
  background: var(--paper);
  border-radius: var(--r-md);
}

.stock-preview {
  display: grid;
  gap: var(--s-2);
}

.stock-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--card);
  border: var(--line-w) solid var(--ink);
  border-radius: var(--r-sm);
  font-size: var(--fs-3);
}

.stock-item span {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  color: var(--muted);
}

.ludicare-preview {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  text-align: center;
}

.ludicare-badge {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--accent);
  border: var(--line-w-strong) solid var(--ink);
  color: var(--ink);
}

.ludicare-title {
  font-weight: 600;
}

.ludicare-bar {
  width: 100%;
  height: 10px;
  border: var(--line-w) solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--card);
  overflow: hidden;
}

.ludicare-bar span {
  display: block;
  height: 100%;
  background: var(--accent);
}

.ludicare-streak {
  display: inline-block;
  padding: 2px var(--s-4);
  background: var(--card);
  border: var(--line-w) solid var(--ink);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--success);
}

/* ---------------------------------------------------------- 13. Agents IA */

.integration-examples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--s-5);
  margin-top: var(--s-6);
}

.example-card {
  padding: var(--s-6);
  background: var(--card);
  border: var(--line-w) solid var(--ink);
  border-radius: var(--r-md);
}

.example-card h3 {
  font-size: var(--fs-6);
  margin-bottom: var(--s-3);
}

.example-card p {
  color: var(--muted);
  font-size: var(--fs-3);
}

/* Enchaînement d'étapes : vocabulaire terminal. */
.example-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: var(--line-w) dashed var(--ink);
}

.flow-step {
  padding: 2px var(--s-3);
  background: var(--paper);
  border: var(--line-w) solid var(--ink);
  border-radius: var(--r-sm);
  font-size: var(--fs-1);
  color: var(--ink);
}

.flow-arrow {
  font-family: var(--font-mono);
  color: var(--muted);
}

/* ----------------------------------------------------------- 14. Déroulé */

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--s-5);
  margin-top: var(--s-6);
}

.step-card {
  padding: var(--s-6);
  background: var(--card);
  border: var(--line-w) solid var(--ink);
  border-radius: var(--r-md);
}

.step-number {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: var(--s-4);
  background: var(--accent);
  border: var(--line-w) solid var(--ink);
  border-radius: 50%;
  font-size: var(--fs-2);
  font-weight: 700;
  color: var(--ink);
}

.step-card h3 {
  font-size: var(--fs-5);
  margin-bottom: var(--s-2);
}

.step-card p {
  color: var(--muted);
  font-size: var(--fs-3);
}

/* ----------------------------------------------------------- 15. Contact */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--s-8);
  align-items: start;
  margin-top: var(--s-6);
}

.contact-aside h3 {
  font-size: var(--fs-6);
  margin-bottom: var(--s-4);
}

.contact-aside h3:not(:first-child) {
  margin-top: var(--s-7);
}

.contact-steps {
  display: grid;
  gap: var(--s-4);
  color: var(--muted);
  font-size: var(--fs-3);
  counter-reset: step;
}

.contact-steps li {
  display: flex;
  gap: var(--s-3);
  counter-increment: step;
}

.contact-steps li::before {
  content: counter(step, decimal-leading-zero);
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  font-weight: 700;
  color: var(--ink);
  padding-top: 2px;
}

.contact-details {
  display: grid;
  gap: var(--s-4);
}

.contact-details li {
  display: grid;
  gap: 2px;
  padding-bottom: var(--s-4);
  border-bottom: var(--line-w) dashed var(--ink);
}

.contact-details li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.contact-details li > span:first-child {
  font-size: var(--fs-1);
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--muted);
}

.contact-details a,
.contact-details p {
  color: var(--ink);
  font-size: var(--fs-3);
}

.contact-details a {
  word-break: break-word;
}

.contact-details .icon {
  color: var(--ink);
}

/* ------------------------------------------------------- 16. Formulaire */

.contact-form {
  display: grid;
  gap: var(--s-5);
  padding: var(--s-6);
  background: var(--card);
  border: var(--line-w-strong) solid var(--ink);
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--s-5);
}

.form-field {
  display: grid;
  gap: var(--s-2);
}

.form-field label {
  font-size: var(--fs-1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--ink);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 46px;
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-serif);
  font-size: var(--fs-4);
  color: var(--ink);
  background: var(--paper);
  border: var(--line-w) solid var(--ink);
  border-radius: var(--r-sm);
  transition: box-shadow var(--dur-1) var(--ease);
}

.form-field textarea {
  min-height: 130px;
  resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--muted);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  box-shadow: var(--sh-1);
}

.form-field input.invalid,
.form-field textarea.invalid,
.form-field select.invalid {
  border-color: var(--danger);
  border-width: var(--line-w-strong);
}

.field-error {
  font-size: var(--fs-1);
  color: var(--danger);
  min-height: 1em;
}

.form-consent {
  display: grid;
  gap: var(--s-2);
}

/* Le consentement est une phrase, pas une étiquette : il échappe au mono
   majuscule des libellés de champ, illisible sur trois lignes. */
.form-consent .checkbox-label,
.form-field .checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-family: var(--font-serif);
  font-size: var(--fs-3);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  line-height: var(--lh-body);
  color: var(--muted);
  cursor: pointer;
}

.checkbox-label a {
  color: var(--ink);
  box-shadow: inset 0 -0.35em 0 var(--accent-soft);
  text-decoration: none;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 4px;
  flex: none;
  accent-color: var(--ink);
  cursor: pointer;
}

.form-legal {
  font-size: var(--fs-1);
  color: var(--muted);
}

.form-submit {
  justify-self: start;
}

.form-status {
  font-size: var(--fs-2);
  color: var(--muted);
  min-height: 1.5em;
}

.form-status.success {
  color: var(--success);
}

.form-status.error {
  color: var(--danger);
}

.form-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-honeypot input {
  width: 1px;
  height: 1px;
}

/* ------------------------------------------------------------ 17. Footer */

.footer {
  position: relative;
  z-index: 2;
  margin-top: var(--s-8);
  padding-block: var(--s-8) var(--s-6);
  background: var(--ink);
  color: var(--on-ink);
}

.footer a {
  color: var(--on-ink);
}

.footer-content {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr);
  gap: var(--s-8);
  margin-bottom: var(--s-7);
}

.footer-brand h3 {
  font-size: var(--fs-6);
  margin-bottom: var(--s-3);
}

.footer-brand p {
  color: var(--on-ink-muted);
  font-size: var(--fs-3);
  max-width: 42ch;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: var(--s-6);
}

.footer-column h4 {
  font-size: var(--fs-1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--on-ink-muted);
  margin-bottom: var(--s-4);
}

.footer-column a {
  display: block;
  margin-bottom: var(--s-3);
  color: var(--on-ink);
  text-decoration: none;
  font-size: var(--fs-3);
  transition: opacity var(--dur-1) var(--ease);
}

.footer-column a:hover {
  opacity: 0.65;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: var(--line-w) solid rgba(242, 238, 230, 0.25);
  font-size: var(--fs-1);
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--on-ink-muted);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
}

.footer-legal a {
  color: var(--on-ink-muted);
  text-decoration: none;
}

.footer-legal a:hover {
  color: var(--on-ink);
}

/* ------------------------------------------------- 18. Pages légales */

.legal-page {
  padding-block: calc(var(--nav-h) + var(--s-7)) var(--s-9);
}

.legal-page .container {
  max-width: 760px;
}

.back-link {
  display: inline-block;
  margin-bottom: var(--s-6);
  font-size: var(--fs-1);
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--muted);
  text-decoration: none;
}

.back-link:hover {
  color: var(--ink);
}

.legal-title {
  font-size: var(--fs-7);
  line-height: var(--lh-tight);
  margin-bottom: var(--s-2);
}

.legal-updated {
  font-size: var(--fs-1);
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--muted);
  margin-bottom: var(--s-7);
}

.legal-page h2 {
  font-size: var(--fs-6);
  margin-top: var(--s-8);
  margin-bottom: var(--s-4);
  padding-top: var(--s-5);
  border-top: var(--line-w) solid var(--ink);
}

.legal-page h2:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: var(--s-6);
}

.legal-page h3 {
  font-size: var(--fs-5);
  margin-top: var(--s-6);
  margin-bottom: var(--s-3);
}

.legal-page p,
.legal-page li {
  color: var(--muted);
  margin-bottom: var(--s-3);
}

.legal-page ul,
.legal-page ol {
  list-style: revert;
  padding-left: var(--s-5);
  margin-bottom: var(--s-5);
}

.legal-page strong {
  color: var(--ink);
  font-weight: 600;
}

.legal-page a {
  color: var(--ink);
  box-shadow: inset 0 -0.4em 0 var(--accent-soft);
  text-decoration: none;
}

.legal-page a:hover {
  box-shadow: inset 0 -0.4em 0 var(--accent);
}

.legal-page .data-table {
  min-width: 0;
}

.legal-note {
  padding: var(--s-5) var(--s-6);
  margin-bottom: var(--s-6);
  background: var(--accent-soft);
  border: var(--line-w) solid var(--ink);
  border-radius: var(--r-md);
}

.legal-note p:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------- 19. 404 */

.error-page {
  min-height: 68vh;
  min-height: 68dvh;
  display: grid;
  place-items: center;
  padding-block: calc(var(--nav-h) + var(--s-8)) var(--s-9);
  text-align: center;
}

.error-page .container {
  max-width: 620px;
}

.error-code {
  font-size: var(--fs-8);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  margin-bottom: var(--s-4);
}

.error-title {
  font-size: var(--fs-7);
  line-height: var(--lh-tight);
  margin-bottom: var(--s-4);
}

.error-subtitle {
  font-size: var(--fs-5);
  color: var(--muted);
  margin-bottom: var(--s-7);
}

.error-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-bottom: var(--s-8);
}

.error-links {
  padding-top: var(--s-6);
  border-top: var(--line-w) dashed var(--ink);
}

.error-links p {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--muted);
  margin-bottom: var(--s-4);
}

.error-links nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-5);
}

.error-links a {
  font-size: var(--fs-3);
  color: var(--ink);
  box-shadow: inset 0 -0.4em 0 var(--accent-soft);
  text-decoration: none;
}

/* ---------------------------------------------------------- 20. Motion */

.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 420ms var(--ease),
    transform 420ms var(--ease);
}

/* La classe est posée par script.js : c'est `visible`, pas `active`. */
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Filets de sécurité : le contenu ne doit jamais dépendre d'une animation.
   `reveal-off` est posé par script.js si l'observateur ne délivre rien. */
.no-js .reveal,
.reveal-off .reveal {
  opacity: 1;
  transform: none;
}

/* Apparition orchestrée du hero, en cascade. Purement décorative : elle part
   d'un état visible pour ne jamais retenir le contenu. */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero-badge,
.hero-title,
.hero-subtitle,
.hero-cta,
.hero-proof,
.service-map {
  animation: rise 620ms var(--ease) backwards;
}

/* Le badge d'accroche a été retiré du hero : la cascade démarre donc sur le
   titre. Les règles du badge restent disponibles s'il devait revenir. */
.hero-badge {
  animation-delay: 40ms;
}
.hero-title {
  animation-delay: 40ms;
}
.hero-subtitle {
  animation-delay: 120ms;
}
.hero-cta {
  animation-delay: 190ms;
}
.hero-proof {
  animation-delay: 260ms;
}
.service-map {
  animation-delay: 230ms;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal.visible {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------- 21. Responsive */

@media (max-width: 1024px) {
  .hero .container,
  .app-card,
  .contact-layout,
  .footer-content {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero .container {
    gap: var(--s-7);
  }

  .app-card {
    gap: var(--s-6);
  }

  .app-card .app-visual {
    order: 2;
  }

  .app-card .app-content {
    order: 1;
  }
}

@media (max-width: 860px) {
  .nav-toggle {
    display: flex;
  }

  .nav-links {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-1);
    padding: var(--s-3) var(--gutter) var(--s-5);
    background: var(--paper);
    border-bottom: var(--line-w-strong) solid var(--ink);
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    padding: var(--s-3) var(--s-2);
    font-size: var(--fs-2);
    color: var(--ink);
  }

  .nav-links .btn {
    margin-top: var(--s-3);
    width: 100%;
  }
}

@media (max-width: 768px) {
  :root {
    --gutter: var(--s-5);
  }

  section {
    padding-block: var(--s-8);
  }

  .table-hint {
    display: block;
  }

  .table-hint + .table-wrapper {
    margin-top: var(--s-3);
  }

  /* --- Tableaux empilés -------------------------------------------------
     Sous 768 px, chaque ligne devient une fiche autonome et chaque cellule
     porte le libellé de sa colonne : plus aucun défilement horizontal, et
     l'en-tête reste lisible au niveau de la donnée qu'il qualifie.

     L'attribut data-stack et les data-label sont posés par script.js. Sans
     JavaScript, rien de tout cela ne s'applique et le tableau reste
     défilable — d'où la mention « faites défiler », qui n'est masquée que
     lorsque l'empilement a effectivement eu lieu. */

  .tables-stacked .table-hint {
    display: none;
  }

  .data-table[data-stack] {
    display: block;
    min-width: 0;
  }

  .data-table[data-stack] thead {
    /* Masqué à l'affichage mais conservé pour les lecteurs d'écran, qui
       continuent d'annoncer la structure du tableau. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .data-table[data-stack] tbody,
  .data-table[data-stack] tr,
  .data-table[data-stack] td {
    display: block;
    width: 100%;
  }

  .data-table[data-stack] tr {
    padding: var(--s-5);
    border-bottom: var(--line-w) solid var(--ink);
  }

  .data-table[data-stack] tr:last-child {
    border-bottom: none;
  }

  .data-table[data-stack] tbody tr:hover {
    background: transparent;
  }

  .data-table[data-stack] td {
    padding: 0;
    border: none;
    /* Une URL ou une référence longue ne doit pas rouvrir un débordement. */
    overflow-wrap: anywhere;
  }

  .data-table[data-stack] td + td {
    margin-top: var(--s-4);
  }

  /* Tableaux à en-tête : le libellé de colonne est recopié au-dessus de
     chaque valeur. */
  .data-table[data-stack="cols"] td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-family: var(--font-mono);
    font-size: var(--fs-1);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--track-mono);
    color: var(--muted);
  }

  /* La première colonne nomme la ligne : elle sert de titre à la fiche. */
  .data-table[data-stack="cols"] td:first-child {
    font-weight: 600;
    color: var(--ink);
  }

  /* Tableaux libellé / valeur : la première cellule EST le libellé, inutile
     d'en recopier un. Elle prend le même traitement mono que les en-têtes. */
  .data-table[data-stack="pairs"] td:first-child {
    margin-bottom: 2px;
    font-family: var(--font-mono);
    font-size: var(--fs-1);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--track-mono);
    color: var(--muted);
  }

  .data-table[data-stack="pairs"] td + td {
    margin-top: 0;
    color: var(--ink);
  }

  .app-card {
    padding: var(--s-6);
    box-shadow: var(--sh-1);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  :root {
    --gutter: var(--s-4);
  }

  .app-card,
  .vision-item,
  .example-card,
  .step-card,
  .price-card,
  .contact-form {
    padding: var(--s-5);
  }

  .mockup {
    padding: var(--s-3);
  }

  .mockup-screen {
    padding: var(--s-4);
  }

  .hero-cta .btn,
  .error-cta .btn {
    width: 100%;
  }
}