/* ===========================================================================
   Oredrift - feuille de style commune a l'accueil et aux pages produit.

   Trois regles ont guide ce qui suit.

   1. AUCUNE RESSOURCE TIERCE. Les pages affirment en pied qu'elles ne
      chargent rien d'exterieur et ne posent aucun cookie ; une fonte
      distante contredirait cette phrase et enverrait l'adresse IP de chaque
      visiteur a un tiers. La typographie est donc celle du systeme, mais
      reglee serieusement : echelle fluide, interlettrage resserre sur les
      titres, chiffres tabulaires partout ou l'on compare.

   2. LE DESSIN DIT LE METIER. En mine, un drift est la galerie horizontale
      creusee le long d'un filon. Le motif revient en veine diagonale dans
      l'en-tete, en trait qui relie les etapes, et en liseres sur les cartes.

   3. RESPONSIVE PAR DEFAUT, pas en rattrapage. Les grilles se degradent de
      trois a deux a une colonne, les tableaux savent defiler seuls, et aucun
      bloc ne depasse la fenetre a 320 px.
   ======================================================================== */

:root {
  --ink:       #0f1319;
  --ink-2:     #3d4452;
  --muted:     #6b7382;
  --line:      #e3e7ee;
  --line-2:    #eef1f6;
  --bg:        #ffffff;
  --panel:     #f6f8fb;
  --panel-2:   #eef2f9;

  --accent:    #0b4fd0;
  --accent-2:  #e7eeff;
  --accent-ink:#0940ad;
  /* Le minerai : employe avec parcimonie, il ne sert qu'a marquer ce qui
     compte vraiment dans une page deja bleue. */
  --ore:       #c77d18;
  --ore-bg:    #fdf3e2;

  --ok:        #0f7a42;
  --ok-bg:     #e6f6ed;
  --warn-bg:   #fdf8e8;
  --warn-line: #ead9a6;

  --code-bg:   #10141b;
  --code-ink:  #dde3ee;
  --code-dim:  #78859e;
  --code-str:  #96d49d;

  --r-s: 8px;
  --r-m: 12px;
  --r-l: 18px;

  --ombre: 0 1px 2px rgba(15, 19, 25, .04), 0 8px 24px -12px rgba(15, 19, 25, .12);
  --ombre-f: 0 2px 4px rgba(15, 19, 25, .06), 0 18px 40px -16px rgba(15, 19, 25, .22);

  --gouttiere: clamp(16px, 4vw, 32px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:       #e9ecf2;
    --ink-2:     #bcc3d0;
    --muted:     #8c94a4;
    --line:      #262b35;
    --line-2:    #1b1f28;
    --bg:        #0d1015;
    --panel:     #141821;
    --panel-2:   #191e28;

    --accent:    #7ba8ff;
    --accent-2:  #152440;
    --accent-ink:#9dbeff;
    --ore:       #e0a248;
    --ore-bg:    #2a2113;

    --ok:        #5fcb8d;
    --ok-bg:     #13281d;
    --warn-bg:   #231e11;
    --warn-line: #463c20;

    --code-bg:   #070a0e;

    --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
    --ombre-f: 0 2px 4px rgba(0, 0, 0, .5), 0 18px 40px -16px rgba(0, 0, 0, .7);
  }
}

/* --- fondations ---------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.62 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.shell {
  width: 100%;
  max-width: 74rem;
  margin: 0 auto;
  padding-inline: var(--gouttiere);
}

h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -0.028em; }
h1 { font-size: clamp(2.05rem, 1.2rem + 3.6vw, 3.4rem); }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.05rem); }
h3 { font-size: 1.02rem; letter-spacing: -0.012em; }
p  { margin: 0 0 0.9rem; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-ink); }

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

code, pre, .mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
code { font-size: 0.875em; }
:not(pre) > code {
  background: var(--line-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.08em 0.36em;
  white-space: nowrap;
}

/* --- barre du haut ------------------------------------------------------- */

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
}
.top .shell {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 60px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.04rem;
  letter-spacing: -0.03em;
  color: inherit;
  text-decoration: none;
  flex: none;
}
.logo svg { display: block; color: var(--accent); }
.crumb {
  color: var(--muted);
  font-size: 0.92rem;
  padding-left: 0.9rem;
  border-left: 1px solid var(--line);
  white-space: nowrap;
}
.top nav {
  margin-left: auto;
  display: flex;
  gap: 1.35rem;
  font-size: 0.92rem;
}
.top nav a {
  color: var(--ink-2);
  text-decoration: none;
  padding-block: 0.2rem;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.top nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }

@media (max-width: 860px) { .crumb { display: none; } }
@media (max-width: 740px) {
  /* La navigation devient une bande qui defile plutot que de disparaitre :
     une page commerciale ne doit pas cacher son appel a l'action sur
     telephone, qui est justement la ou on la lira le plus. */
  .top .shell { flex-wrap: wrap; row-gap: 0; padding-bottom: 0; }
  .top nav {
    order: 3;
    width: 100%;
    margin: 0 calc(var(--gouttiere) * -1);
    padding: 0 var(--gouttiere) 0.55rem;
    gap: 1.1rem;
    overflow-x: auto;
    scrollbar-width: none;
    font-size: 0.88rem;
  }
  .top nav::-webkit-scrollbar { display: none; }
  .top nav a { white-space: nowrap; }
}

/* --- en-tete de page ----------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(2.6rem, 1rem + 6vw, 5.5rem) clamp(2rem, 1rem + 3vw, 3.5rem);
}
/* La veine : deux diagonales tres pales, du meme angle que le chevron de la
   marque. Elle donne de la profondeur sans image et sans requete. */
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 150%;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(142deg, transparent 38%, var(--accent-2) 38.4%, var(--accent-2) 39.2%, transparent 39.6%),
    linear-gradient(142deg, transparent 52%, var(--accent-2) 52.3%, var(--accent-2) 52.8%, transparent 53.1%),
    radial-gradient(60rem 30rem at 72% 0%, var(--accent-2), transparent 70%);
  opacity: .85;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 1rem + 3vw, 3.6rem);
  align-items: center;
}
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 1.9rem; align-items: start; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent-2);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  margin-bottom: 1.25rem;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.lede {
  font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.16rem);
  color: var(--ink-2);
  margin-top: 1.05rem;
  max-width: 36rem;
}

.cta { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.7rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.94rem;
  line-height: 1.2;
  padding: 0.68rem 1.15rem;
  border-radius: 10px;
  border: 1px solid transparent;
  text-decoration: none;
  transition: transform .12s, box-shadow .15s, background .15s, border-color .15s;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--ombre);
}
.btn-primary:hover {
  color: #fff;
  background: var(--accent-ink);
  transform: translateY(-1px);
  box-shadow: var(--ombre-f);
}
.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--bg); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.btn + .btn { margin-left: 0.5rem; }
@media (max-width: 420px) {
  .btn { width: 100%; justify-content: center; }
  .btn + .btn { margin-left: 0; margin-top: 0.5rem; }
}

/* --- blocs de code ------------------------------------------------------- */

.code-card {
  border-radius: var(--r-l);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--ombre);
  background: var(--bg);
}
.code-head {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 0.6rem 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.code-head::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ore);
  flex: none;
}
pre {
  margin: 0;
  background: var(--code-bg);
  color: var(--code-ink);
  padding: 1.05rem 1.15rem;
  overflow-x: auto;
  font-size: 0.845rem;
  line-height: 1.62;
  -webkit-overflow-scrolling: touch;
}
pre .c { color: var(--code-dim); }
pre .s { color: var(--code-str); }
@media (max-width: 560px) { pre { font-size: 0.76rem; padding: 0.85rem 0.9rem; } }

/* --- bande de chiffres --------------------------------------------------- */

.band {
  border-block: 1px solid var(--line);
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(90deg, var(--accent-2), transparent 60%) border-box;
}
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat {
  padding: clamp(1.1rem, 0.6rem + 1.4vw, 1.9rem) 0.6rem;
  text-align: center;
  border-left: 1px solid var(--line);
}
.stat:first-child { border-left: 0; }
.stat b {
  display: block;
  font-size: clamp(1.35rem, 1rem + 1.4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.stat span {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.3rem;
}
@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(odd) { border-left: 0; }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

/* --- sections ------------------------------------------------------------ */

section {
  padding-block: clamp(2.6rem, 1.4rem + 4vw, 4.6rem);
  scroll-margin-top: 76px;
}
section + section { border-top: 1px solid var(--line-2); }

.kicker {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.75rem;
}
.kicker::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  flex: none;
}
.sub { color: var(--ink-2); max-width: 46rem; margin-top: 0.85rem; }

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.6rem, 1rem + 2.5vw, 3rem);
  align-items: start;
}
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* --- cartes -------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
@media (max-width: 980px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 660px)  { .cards { grid-template-columns: minmax(0, 1fr); } }

.card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 1.4rem;
  background: var(--bg);
  overflow: hidden;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
/* Le filon, en lisere haut : discret au repos, net au survol. */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--ore));
  opacity: 0;
  transition: opacity .18s;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ombre-f);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}
.card:hover::before { opacity: 1; }
.card .big {
  font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.card h3 { margin: 0.75rem 0 0.45rem; }
.card p { color: var(--ink-2); font-size: 0.94rem; margin: 0; }

.api-card {
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  background:
    radial-gradient(42rem 18rem at 100% 0%, var(--accent-2), transparent 68%),
    var(--panel);
  box-shadow: var(--ombre);
}
.api-card h3 {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.28rem);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.api-card p { margin-top: 0.75rem; color: var(--ink-2); }
.pill {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ok);
  background: var(--ok-bg);
  border: 1px solid color-mix(in srgb, var(--ok) 28%, transparent);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
}
.api-links {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  font-size: 0.92rem;
  margin-top: 0.9rem;
}

/* --- le parcours en trois etapes ----------------------------------------- */

.etapes {
  --gap-etapes: clamp(1.2rem, 0.6rem + 2vw, 2.4rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-etapes);
  margin-top: 2.4rem;
  counter-reset: etape;
}
.etape { position: relative; counter-increment: etape; }
/* La galerie : chaque etape tend un trait vers la suivante, en traversant la
   gouttiere de la grille. Porte par l'etape et non par le conteneur, il
   s'arrete donc exactement a la derniere pastille, sans depasser. */
.etape::after {
  content: "";
  position: absolute;
  top: calc(1.35rem - 1px);
  left: 3.15rem;
  right: calc(var(--gap-etapes) * -1);
  height: 2px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent));
}
.etape:last-child::after { display: none; }
.etape::before {
  content: counter(etape, decimal-leading-zero);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.95rem;
  box-shadow: 0 0 0 6px var(--bg);
}
.etape h3 { margin-bottom: 0.4rem; }
.etape p { color: var(--ink-2); font-size: 0.94rem; margin: 0 0 0.75rem; }

@media (max-width: 860px) {
  .etapes { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 1.8rem; }
  .etapes::before { display: none; }
  /* En colonne, la galerie devient verticale et court le long des pastilles. */
  .etape { padding-left: 3.6rem; padding-bottom: 1.6rem; }
  .etape::before { position: absolute; left: 0; top: 0; margin: 0; box-shadow: none; }
  .etape::after {
    left: calc(1.35rem - 1px);
    right: auto;
    top: 2.9rem;
    bottom: 0.2rem;
    height: auto;
    width: 2px;
    background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 20%, transparent));
  }
  .etape:last-child { padding-bottom: 0; }
  .etape:last-child::after { display: none; }
}

/* --- tableaux ------------------------------------------------------------ */

.tableau { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 1.4rem; }
table { border-collapse: collapse; width: 100%; font-size: 0.94rem; min-width: 30rem; }
caption { text-align: left; color: var(--muted); font-size: 0.86rem; padding-bottom: 0.65rem; }
th, td { text-align: left; padding: 0.65rem 0.7rem; border-bottom: 1px solid var(--line); }
thead th {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
tbody tr:hover { background: var(--line-2); }
tbody td:first-child { color: var(--ink-2); }
td.num { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; width: 8.5rem; }
td.hl { color: var(--accent); }

/* --- divers -------------------------------------------------------------- */

.note {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-left: 3px solid var(--ore);
  border-radius: var(--r-s);
  padding: 0.9rem 1.1rem;
  font-size: 0.93rem;
  color: var(--ink-2);
}
.fine { font-size: 0.93rem; color: var(--ink-2); }
blockquote {
  margin: 1rem 0;
  padding: 0.3rem 0 0.3rem 1rem;
  border-left: 3px solid var(--line);
  color: var(--muted);
  font-size: 0.92rem;
}

/* Adresse de contact : presente, pas mise en avant. Elle n'existe jamais en
   clair dans la source, un script la recompose. */
.courriel { margin-top: 1rem; }
a.discret {
  font-size: 0.82rem;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--line);
}
a.discret:hover { color: var(--accent); border-bottom-color: currentColor; }

footer {
  border-top: 1px solid var(--line);
  background: var(--panel);
  padding-block: 2.4rem 3.2rem;
  color: var(--muted);
  font-size: 0.89rem;
}
.foot-grid { display: flex; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap; }
footer p { margin: 0 0 0.4rem; }

/* Bouton qui devoile l'adresse de contact. Elle n'existe ni dans la source ni
   dans le DOM rendu tant que personne n'a clique. */
button.devoiler {
  font: inherit;
  font-size: 0.82rem;
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 1px dotted var(--line);
  padding: 0;
  cursor: pointer;
}
button.devoiler:hover { color: var(--accent); border-bottom-color: currentColor; }