/* =========================================================================
   NovaAI Tech — système de design
   =========================================================================
   Deux règles gouvernent la couleur :
     --signal ne porte jamais de texte lisible (frontière, nœuds, traits) ;
     --action ne porte jamais de décoration (liens, boutons).
   Le vert du logo devient le vert de la frontière, le vert foncé le vert
   de l'action. Contrastes vérifiés : voir le tableau en fin de fichier.
   ========================================================================= */

:root {
  /* Couleur */
  --surface: #ffffff;
  --tint: #f1f6f1;
  --ink: #101f0c;
  --text: #212529;
  --signal: #7ed956;
  --action: #046b3a;
  --border: #dfe6df;
  --muted: #5a685a;
  --danger: #b3121f;

  /* Typographie */
  --display: "Archivo", system-ui, sans-serif;
  --body: "Public Sans", system-ui, sans-serif;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.45rem, 1.3rem + 0.75vw, 1.85rem);
  --step-3: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
  --step-4: clamp(2.1rem, 1.6rem + 2.5vw, 3.6rem);

  /* Rythme */
  --space-xs: 0.5rem;
  --space-s: 0.875rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4.5rem;

  --container: 76rem;
  --measure: 65ch;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #0d1a0b;
    --tint: #14240f;
    --ink: #f2f7ef;
    --text: #dde5d9;
    --action: #9ae577;   /* sur fond sombre, c'est le vert clair qui devient lisible */
    --border: #27391f;
    --muted: #9fae98;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text);
  background: var(--surface);
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, .display {
  font-family: var(--display);
  color: var(--ink);
  line-height: 1.1;
  text-wrap: balance;
  margin: 0 0 var(--space-s);
}

h1 {
  font-size: var(--step-4);
  font-weight: 700;
  /* Axe de largeur d'Archivo : les grands titres s'élargissent. */
  font-variation-settings: "wdth" 112;
  letter-spacing: -0.02em;
}
h2 { font-size: var(--step-2); font-weight: 650; font-variation-settings: "wdth" 105; }
h3 { font-size: var(--step-1); font-weight: 600; }

p, li, dd { max-width: var(--measure); }
p { margin: 0 0 var(--space-s); }

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

:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 3px;
  border-radius: 2px;
}

img, svg, video { max-width: 100%; height: auto; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--surface);
  padding: var(--space-xs) var(--space-m); border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; top: 0; z-index: 100; }

.lead { font-size: var(--step-1); color: var(--text); max-width: 54ch; }
.meta { font-size: var(--step--1); color: var(--muted); font-family: var(--body); }
.updated { font-size: var(--step--1); color: var(--muted); margin-top: var(--space-l); }

/* --------------------------------------------------------- mise en page -- */
main { display: block; }

.wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-m); }

section { margin-block: var(--space-xl); }
section > :is(h2, h3):first-child { margin-top: 0; }

.section-head { margin-bottom: var(--space-l); }

/* --------------------------------------------------- en-tête, pied de page -- */
.site-header {
  display: flex; align-items: center; gap: var(--space-m);
  max-width: var(--container); margin-inline: auto;
  padding: var(--space-s) var(--space-m);
  flex-wrap: wrap;
}

.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  color: var(--ink); text-decoration: none;
  font-variation-settings: "wdth" 108;
}

.site-nav { margin-inline-start: auto; }
.site-nav ul, .footer-nav ul, .footer-social {
  display: flex; flex-wrap: wrap; gap: var(--space-m);
  list-style: none; margin: 0; padding: 0;
}
.site-nav a, .footer-nav a, .footer-social a {
  color: var(--text); text-decoration: none; font-size: var(--step--1);
}
.site-nav a:hover, .footer-nav a:hover { color: var(--action); text-decoration: underline; }
/* La rubrique active : soulignement épais, doublé par aria-current. La couleur
   seule ne suffirait pas — elle est invisible pour un daltonien. */
.site-nav a.est-actif {
  color: var(--ink); font-weight: 600;
  border-bottom: 2px solid var(--signal); padding-bottom: 2px;
}

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: var(--space-xl);
  padding-block: var(--space-l);
}
.footer-inner {
  max-width: var(--container); margin-inline: auto; padding-inline: var(--space-m);
  display: grid; gap: var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.footer-nap p { margin: 0 0 0.2rem; }
.brand-name { font-family: var(--display); font-weight: 700; color: var(--ink); }
.footer-legal {
  max-width: var(--container); margin: var(--space-l) auto 0;
  padding-inline: var(--space-m);
  font-size: var(--step--1); color: var(--muted);
}

/* -------------------------------------------------------------- actions -- */
.cta, .btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.35rem;
  font-family: var(--display); font-weight: 600; font-size: var(--step-0);
  color: var(--surface); background: var(--action);
  border: 1px solid var(--action); border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
}
.cta:hover { background: var(--ink); border-color: var(--ink); color: var(--surface); }

.btn-ghost {
  color: var(--action); background: transparent;
}
.btn-ghost:hover { background: var(--tint); color: var(--action); }

.actions { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; }

/* ===================================================== LA FRONTIÈRE ======
   Le sujet réel de l'entreprise : la donnée qui ne sort pas.
   overflow: hidden n'est pas une précaution, c'est la démonstration —
   il est physiquement impossible qu'un nœud franchisse le liseré.
   ========================================================================= */
.frontier {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--signal);
  border-radius: var(--radius);
  padding: clamp(var(--space-l), 6vw, 5rem) clamp(var(--space-m), 5vw, 4rem);
  background: var(--surface);
  isolation: isolate;
}
.frontier > * { position: relative; z-index: 1; }

.frontier__tick {
  position: absolute; width: 14px; height: 14px;
  border: 0 solid var(--signal); z-index: 2;
}
.frontier__tick--tl { top: -1px; left: -1px; border-top-width: 3px; border-left-width: 3px; }
.frontier__tick--tr { top: -1px; right: -1px; border-top-width: 3px; border-right-width: 3px; }
.frontier__tick--bl { bottom: -1px; left: -1px; border-bottom-width: 3px; border-left-width: 3px; }
.frontier__tick--br { bottom: -1px; right: -1px; border-bottom-width: 3px; border-right-width: 3px; }

/* À l'intérieur du liseré : overflow: hidden rognerait toute position négative,
   et de toute façon rien ne doit dépasser de la frontière — pas même son nom. */
.frontier__label {
  position: absolute; top: 0.85rem; left: 1.25rem;
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--display); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  z-index: 2;
}
.frontier__label::before {
  content: ""; width: 6px; height: 6px; border-radius: 2px;
  background: var(--signal);
}

/* Les nœuds : le vocabulaire géométrique du logo, en mouvement. */
.frontier__nodes {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}
.frontier__node {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 3px;
  background: var(--signal);
  opacity: 0.28;
  animation: derive 26s ease-in-out infinite alternate;
}
.frontier__node:nth-child(1) { top: 12%; left: 6%;  width: 20px; height: 20px; animation-duration: 31s; }
.frontier__node:nth-child(2) { top: 68%; left: 14%; animation-duration: 24s; animation-delay: -6s; }
.frontier__node:nth-child(3) { top: 26%; left: 78%; width: 24px; height: 24px; animation-duration: 35s; animation-delay: -12s; }
.frontier__node:nth-child(4) { top: 80%; left: 62%; animation-duration: 28s; animation-delay: -3s; }
.frontier__node:nth-child(5) { top: 8%;  left: 46%; width: 10px; height: 10px; animation-duration: 22s; animation-delay: -16s; }
.frontier__node:nth-child(6) { top: 52%; left: 90%; animation-duration: 33s; animation-delay: -9s; }
.frontier__node:nth-child(7) { top: 88%; left: 34%; width: 18px; height: 18px; animation-duration: 27s; animation-delay: -20s; }

@keyframes derive {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(38px, -22px); }
  50%  { transform: translate(-26px, 30px); }
  75%  { transform: translate(20px, 18px); }
  100% { transform: translate(-34px, -14px); }
}

.frontier--hero { margin-top: var(--space-l); padding-top: clamp(3.5rem, 8vw, 5.5rem); }
.frontier--hero h1 { max-width: 20ch; }
.frontier--hero .lead { margin-block: var(--space-m); }

/* ---------------------------------------------------------- composants -- */
.cards {
  display: grid; gap: var(--space-m);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  list-style: none; margin: 0; padding: 0;
}
.cards > li {
  max-width: none;
  padding: var(--space-m);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.cards > li > :last-child { margin-bottom: 0; }
/* balance équilibrerait les lignes en coupant « IA on-premise » au trait
   d'union : sur des titres courts, pretty coupe au bon endroit. */
.cards :is(h2, h3) { font-size: var(--step-1); text-wrap: pretty; }
.cards a { text-decoration: none; }
.cards a:hover { text-decoration: underline; }
/* Un titre de carte reste un titre : c'est le survol qui signale le lien,
   pas une couleur d'accent répétée vingt fois sur la page. */
.cards :is(h2, h3) a { color: var(--ink); }
.cards :is(h2, h3) a:hover { color: var(--action); }

/* Les chiffres des cas clients : c'est la preuve, donc c'est énorme. */
.metrics {
  display: grid; gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  list-style: none; margin: var(--space-l) 0; padding: 0;
}
.metrics li { max-width: none; }
.metrics strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.4rem, 7vw, 4.25rem);
  font-weight: 700; line-height: 0.95;
  font-variation-settings: "wdth" 118;
  color: var(--ink);
  letter-spacing: -0.03em;
}
.metrics span { display: block; font-size: var(--step--1); color: var(--muted); margin-top: 0.35rem; }
.metric strong { font-family: var(--display); color: var(--ink); }

.answer {
  font-size: var(--step-1);
  max-width: 58ch;
  padding-left: var(--space-m);
  border-left: 3px solid var(--signal);
  margin-block: var(--space-m) var(--space-l);
}
.answer p:last-child { margin-bottom: 0; }

.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.tags li { max-width: none; }
.tags li, .tags a {
  display: inline-block; padding: 0.25rem 0.7rem;
  background: var(--tint); border-radius: 999px;
  font-size: var(--step--1); color: var(--text); text-decoration: none;
}

.client-logos {
  display: flex; flex-wrap: wrap; align-items: center;
  /* Gouttières dissociées : serrées entre les rangées, larges entre les noms. */
  gap: var(--space-s) var(--space-l);
  list-style: none; margin: 0; padding: 0;
}
.client-logos li { max-width: none; font-family: var(--display); font-weight: 600; color: var(--muted); }
.client-logos img { max-height: 2.5rem; width: auto; }

.breadcrumbs { max-width: var(--container); margin-inline: auto; padding: var(--space-m) var(--space-m) 0; }
.breadcrumbs ol {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  list-style: none; margin: 0; padding: 0; font-size: var(--step--1); color: var(--muted);
}
.breadcrumbs li { max-width: none; }
.breadcrumbs li + li::before { content: "›"; margin-inline-end: 0.5rem; color: var(--signal); }
.breadcrumbs a { color: var(--muted); }

.prose > :first-child { margin-top: 0; }
.prose h2 { margin-top: var(--space-l); }
.prose ul, .prose ol { padding-inline-start: 1.25rem; }
.prose li { margin-bottom: 0.35rem; }

table { border-collapse: collapse; width: 100%; margin-block: var(--space-m); font-size: var(--step--1); }
.table-scroll { overflow-x: auto; }
caption {
  text-align: left; font-family: var(--display); font-weight: 600;
  color: var(--ink); padding-bottom: var(--space-xs);
}
th, td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); }
thead th { font-family: var(--display); color: var(--ink); background: var(--tint); }
tbody th { font-weight: 600; }

blockquote {
  margin: var(--space-l) 0; padding: var(--space-m) var(--space-l);
  background: var(--tint); border-radius: var(--radius);
  border-left: 3px solid var(--signal);
  font-size: var(--step-1);
}
blockquote p:last-of-type { margin-bottom: var(--space-xs); }
blockquote footer { font-size: var(--step--1); color: var(--muted); }

figure { margin: var(--space-l) 0; }
figcaption { font-size: var(--step--1); color: var(--muted); margin-top: var(--space-xs); }

.faq details {
  border-bottom: 1px solid var(--border);
  padding-block: var(--space-s);
}
.faq summary {
  cursor: pointer; font-family: var(--display); font-weight: 600;
  color: var(--ink); font-size: var(--step-1); list-style-position: outside;
}
.faq summary::marker { color: var(--signal); }

.toc {
  background: var(--tint); border-radius: var(--radius);
  padding: var(--space-m) var(--space-l); margin-block: var(--space-l);
}
.toc h2 { font-size: var(--step-1); margin-top: 0; }
.toc ol { padding-inline-start: 1.1rem; }
.toc-h3 { margin-inline-start: 1rem; }

.modules { padding-inline-start: 1.25rem; }
.modules > li { margin-bottom: var(--space-m); max-width: none; }

.fiche th { width: 40%; }

/* --------------------------------------------------------- formulaires -- */
.contact-grid {
  display: grid; gap: var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.lead-form { max-width: 34rem; }
.field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: var(--space-m); max-width: none; }
.field label { font-size: var(--step--1); font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.7rem 0.85rem;
  font: inherit; font-size: var(--step-0);
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--action); }
.honeypot { position: absolute; left: -9999px; }
.error { color: var(--danger); font-size: var(--step--1); }
.message {
  padding: var(--space-s) var(--space-m); margin-bottom: var(--space-m);
  background: var(--tint); border-left: 3px solid var(--action); border-radius: 0 var(--radius) var(--radius) 0;
}

.whatsapp {
  position: fixed; inset-block-end: var(--space-m); inset-inline-end: var(--space-m);
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  background: var(--ink); color: var(--surface);
  border-radius: 999px; text-decoration: none;
  font-family: var(--display); font-size: var(--step--1); font-weight: 600;
  box-shadow: 0 6px 24px rgb(16 31 12 / 0.22);
  z-index: 50;
}

/* ----------------------------------------------------------- réglages -- */
@media (prefers-reduced-motion: reduce) {
  .frontier__node { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 40rem) {
  .site-header { gap: var(--space-s); padding-inline: var(--space-s); }
  /* À 360 px, logo et bouton doivent tenir sur la même rangée. */
  .brand { font-size: 0.95rem; }
  .brand img { width: 28px; height: 28px; }
  /* Le bouton reste sur la ligne du logo : il ne doit pas repousser la
     navigation ni occuper une rangée à lui seul. */
  .site-header .cta {
    margin-inline-start: auto;
    padding: 0.5rem 0.85rem;
    font-size: var(--step--1);
  }
  .site-nav { margin-inline-start: 0; width: 100%; order: 3; }
  .site-nav ul { gap: var(--space-s) var(--space-m); }
  .frontier { padding-inline: var(--space-m); }
  .frontier__node { display: none; } /* rien d'inutile sur petit écran */
}

/* -------------------------------------------------------------------------
   Contrastes vérifiés sur --surface clair :
     --ink   #101f0c  17,17:1   AA + AAA
     --text  #212529  15,43:1   AA + AAA
     --action #046b3a  6,63:1   AA texte
     --signal #7ed956  1,76:1   jamais utilisé pour du texte
   Sur --surface sombre #0d1a0b : --signal 10,21:1.
   ------------------------------------------------------------------------- */

/* ------------------------------------------------------ IA nommées ------ */
.cards--ai > li { display: flex; flex-direction: column; gap: 0.4rem; }
.cards--ai :is(h2, h3) { font-size: var(--step-0); font-weight: 600; margin: 0; }
/* Quatorze cartes : on borne la description pour que la section reste lisible. */
.cards--ai > li > p:not(.ai-head):not(.meta) {
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cards--ai .meta { margin-top: auto; padding-top: 0.5rem; }

/* Badge toujours sous le nom : sinon il saute d'une ligne à l'autre selon
   la longueur du nom, et la grille paraît bancale. */
.ai-head { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; margin: 0; }
.ai-name {
  font-family: var(--display); font-weight: 700; font-size: var(--step-1);
  color: var(--ink); font-variation-settings: "wdth" 108;
}

.badge {
  font-family: var(--body); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.15rem 0.5rem; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted);
}
/* Seul l'état « en production » porte la couleur : un prospect doit voir en un
   coup d'œil ce qui tourne déjà chez un client. */
.badge--production { border-color: var(--action); color: var(--action); }

/* =========================================================================
   Rythme visuel
   =========================================================================
   Le premier jet enchaînait des sections blanches identiques : rien ne
   hiérarchisait la page. On introduit des bandes teintées, un intitulé de
   section, et un relief au survol des cartes.
   ========================================================================= */

/* Intitulé de section : reprend le carré du logo comme puce. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--display); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  margin-bottom: var(--space-s);
}
.eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 2px;
  background: var(--signal); flex: none;
}

/* Bande teintée : casse la succession de blocs blancs sans plein écran. */
.band {
  background: var(--tint);
  border-radius: 18px;
  padding: clamp(var(--space-l), 5vw, var(--space-xl)) clamp(var(--space-m), 4vw, var(--space-l));
}
.band > :first-child { margin-top: 0; }
.band .cards > li { background: var(--surface); border-color: transparent; }

/* Les cartes gagnent un relief au survol et une arête d'accent en tête. */
.cards > li {
  position: relative;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.cards > li:hover {
  border-color: var(--signal);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgb(16 31 12 / 0.07);
}
.cards > li::before {
  content: ""; position: absolute; inset-inline: -1px; top: -1px; height: 3px;
  background: var(--signal); border-radius: var(--radius) var(--radius) 0 0;
  opacity: 0; transition: opacity 0.15s ease;
}
.cards > li:hover::before { opacity: 1; }

/* Trame de plan technique dans le hero, sous les nœuds. */
.frontier--hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--signal) 14%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--signal) 14%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 30% 40%, #000 20%, transparent 75%);
}

/* Le bandeau clients devient une preuve, pas une liste. */
.clients .client-logos li {
  padding: 0.4rem 0.9rem; border: 1px solid var(--border); border-radius: 999px;
  font-size: var(--step--1); color: var(--text);
}

/* ============================================ Une IA à votre nom ========= */
.namer {
  display: grid; gap: var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  align-items: center;
}

.namer-formula {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  font-family: var(--display); font-size: clamp(1.4rem, 4vw, 2.2rem);
  font-weight: 700; font-variation-settings: "wdth" 110; color: var(--ink);
}
.namer-slot {
  padding: 0.2rem 0.9rem; border: 2px dashed var(--signal); border-radius: 8px;
  color: var(--muted); font-weight: 600;
}
.namer-suffix { color: var(--action); }

.namer-examples { list-style: none; margin: var(--space-m) 0 0; padding: 0; display: grid; gap: 0.4rem; }
.namer-examples li {
  display: flex; gap: 0.6rem; align-items: baseline; max-width: none;
  font-size: var(--step--1);
}
.namer-examples b { font-family: var(--display); color: var(--ink); min-width: 8.5rem; }
.namer-examples span { color: var(--muted); }

/* Où tourne chaque IA : la preuve tient en une ligne. */
.ai-where {
  font-size: var(--step--1); color: var(--action);
  display: flex; align-items: baseline; gap: 0.4rem;
}
.ai-where::before { content: "▸"; color: var(--signal); }

/* Bénéfices dans les cartes de l'accueil : la puce par défaut parasitait le
   chiffre, qui est justement l'information. */
.benefits { list-style: none; margin: var(--space-s) 0 0; padding: 0; display: grid; gap: 0.3rem; }
.benefits li { max-width: none; font-size: var(--step--1); color: var(--muted); }
.benefits strong {
  font-family: var(--display); color: var(--ink); font-weight: 700;
  margin-inline-end: 0.35rem;
}