@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════
   01 — TOKENS, RESET & BASE
   Mon Assistant Web — système de design
   ═══════════════════════════════════════════════════════════ */

:root {

  /* Le site est pensé en clair : on le déclare pour que les
     contrôles natifs (champs, scrollbars) suivent. */
  color-scheme: light;

  /* ── Couleur ────────────────────────────────────────────
     Canevas quasi-blanc, encre presque noire, un seul accent.
     La couleur est un accent, pas un décor.                */
  --ink:            #0B0B10;
  --ink-2:          #14141B;
  --ink-3:          #1D1D26;

  /* Rampe calibrée sur le contraste, pas sur l'esthétique seule :
     500 est le gris le plus clair encore lisible en petit corps
     (4,6:1 sur blanc — AA). 400 et au-dessus sont décoratifs ou
     réservés au grand corps ; 300 et plus clair : traits et fonds. */
  --gray-800:       #3A3A44;
  --gray-700:       #55555F;
  --gray-600:       #6E6E78;   /* 4,6:1 — AA texte  */
  --gray-500:       #73737D;   /* 4,5:1 — AA texte  */
  --gray-400:       #94949E;   /* 3,0:1 — grand corps / décor */
  --gray-300:       #D2D2D8;
  --gray-200:       #E7E7EB;
  --gray-100:       #F2F2F4;

  --bg:             #FFFFFF;
  --bg-alt:         #FAFAFB;
  --bg-sunken:      #F5F5F7;

  --accent:         #FF6B1A;   /* orange du logo — fonds, icônes, traits */
  --accent-deep:    #E0550A;   /* survol                                 */
  --accent-text:    #C24608;   /* texte orange sur blanc (contraste AA)  */
  --accent-tint:    #FFF3EB;
  --accent-glow:    rgba(255, 107, 26, .18);

  --ok:             #12A150;

  /* ── Traits ────────────────────────────────────────────
     Hairlines en box-shadow : pas d'impact sur le box model. */
  --line:           rgba(11, 11, 16, .09);
  --line-2:         rgba(11, 11, 16, .14);
  --line-light:     rgba(255, 255, 255, .12);
  --line-light-2:   rgba(255, 255, 255, .22);
  --hairline:       inset 0 0 0 1px var(--line);

  /* ── Typographie ──────────────────────────────────────── */
  --font-display: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Échelle fluide */
  --fs-hero:  clamp(2.85rem, 1.35rem + 6.2vw, 6.5rem);
  --fs-h2:    clamp(2.05rem, 1.15rem + 3.4vw, 3.9rem);
  --fs-h3:    clamp(1.08rem, .98rem + .42vw, 1.32rem);
  --fs-lead:  clamp(1.02rem, .95rem + .38vw, 1.2rem);
  --fs-body:  1rem;
  --fs-sm:    .875rem;
  --fs-xs:    .78rem;
  --fs-mono:  .715rem;

  /* ── Rythme ───────────────────────────────────────────── */
  --shell:       1220px;
  --shell-pad:   clamp(20px, 4vw, 40px);
  --section-y:   clamp(84px, 11vw, 168px);
  --radius-sm:   8px;
  --radius:      14px;
  --radius-lg:   22px;
  --radius-xl:   30px;

  /* ── Ombres ───────────────────────────────────────────── */
  --sh-xs:  0 1px 2px rgba(11,11,16,.05);
  --sh-sm:  0 2px 8px rgba(11,11,16,.05), 0 1px 2px rgba(11,11,16,.04);
  --sh-md:  0 12px 34px -12px rgba(11,11,16,.14), 0 3px 10px -4px rgba(11,11,16,.07);
  --sh-lg:  0 34px 70px -26px rgba(11,11,16,.24), 0 10px 26px -14px rgba(11,11,16,.10);
  --sh-xl:  0 60px 120px -40px rgba(11,11,16,.34), 0 18px 44px -22px rgba(11,11,16,.14);

  /* ── Mouvement ────────────────────────────────────────── */
  --ease:       cubic-bezier(.22, 1, .36, 1);
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-io:    cubic-bezier(.65, .02, .16, 1);
  --t-fast:     .18s;
  --t:          .34s;
  --t-slow:     .78s;

  --z-cursor:   9000;
  --z-intro:    8000;
  --z-drawer:   500;   /* sous l'en-tête : le bouton de fermeture reste cliquable */
  --z-header:   600;
}

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

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.62;
  color: var(--gray-700);
  background: var(--bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01' 1, 'cv05' 1;
  text-rendering: optimizeLegibility;
}

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

button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

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

/* ── Focus visible : discret mais net ─────────────────────
   Un contour orange décollé de l'élément : repérable aussi
   bien sur le blanc que sur les sections encre. Volontairement
   en `outline` et non en `box-shadow` — la moitié des
   composants du site dessinent déjà leurs filets en ombre
   portée, un halo les effacerait au moment du focus.       */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Mode contrastes forcés (Windows) ───────────────────────
   Tout le site trace ses filets en `box-shadow: inset` —
   or les ombres sont ignorées dans ce mode : sans ces
   bordures de secours, cartes et boutons perdent leurs
   contours et la page devient une bouillie de texte.      */
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight; }
  .btn, .plan, .pain, .feat, .gauge-card, .form-card, .qa__i,
  .step__num, .browser, .chip, .perf__ico, .toc, .field input,
  .field textarea, .field select { border: 1px solid ButtonBorder; }
  .qa { border-bottom: 1px solid ButtonBorder; }
}

/* ── Barre de défilement ────────────────────────────────── */
@supports (scrollbar-width: thin) {
  html { scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 99px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* ── Lien d'évitement ───────────────────────────────────── */
.skip-link {
  position: fixed;
  top: 10px; left: 50%;
  translate: -50% -200%;
  z-index: 9999;
  padding: 12px 20px;
  background: var(--ink);
  color: #fff;
  border-radius: 99px;
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: translate var(--t) var(--ease);
}
.skip-link:focus-visible { translate: -50% 0; }

/* ── Utilitaires ────────────────────────────────────────── */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}

.ico {
  width: 20px; height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--xs { width: 15px; height: 15px; stroke-width: 1.9; }

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