/* Charte SolutIAa : couleurs, police, logo et éléments communs à toutes les pages.
   Idée directrice : du noir et blanc comme Qonto, une vraie photo, des titres qui tiennent la page.
   La signature : les crochets de code autour de IA, Solut[IA]a, avec IA en vert d'eau. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('/polices/archivo-latin-standard-normal.woff2') format('woff2-variations');
}
/* La police de code (JetBrains Mono, licence OFL) : la liste des tâches, écrite comme du code (Félix, 15/10/2026 :
   « en typo typique codage ») */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('/polices/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
}
:root {
  color-scheme: dark;

  /* Couleurs : noir et blanc, neutres à peine froids, et une touche de vert d'eau, mate et rare */
  --nuit: oklch(0.145 0.003 260);      /* fond */
  --nuit-2: oklch(0.19 0.003 260);     /* surfaces posées sur le fond */
  --nuit-3: oklch(0.235 0.004 260);    /* bouton secondaire, champs, survol */
  --trait: oklch(0.30 0.004 260);      /* bordures fines */
  --craie: oklch(0.97 0.002 260);      /* texte principal, bouton principal */
  --gris: oklch(0.74 0.004 260);       /* texte secondaire */
  --gris-2: oklch(0.62 0.004 260);     /* légendes, crochets du logo */
  --eau: oklch(0.86 0.085 168);        /* vert d'eau : IA du logo, focus, sélection. Jamais en grande surface */
  --eau-sur-clair: oklch(0.50 0.085 175);

  /* Une seule famille, Archivo, comme le logo : grasse et serrée pour les titres, normale pour le texte.
     (Les titres ont été en Noto Serif Display du 14 au 15/10/2026 : Félix n'aimait pas cette typo.) */
  --police: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --police-titre: var(--police);
  --police-code: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;   /* tout ce qui est entre crochets */
  --t-legende: 0.8125rem;
  --t-petit: 0.9375rem;
  --t-corps: 1.0625rem;
  --t-chapo: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);
  --t-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --t-h2: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  --t-h1: clamp(3rem, 1.4rem + 6.4vw, 6.5rem);

  /* Espaces */
  --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem;
  --e-6: 2rem; --e-7: 3rem; --e-8: 4.5rem; --e-9: clamp(4.5rem, 3rem + 6vw, 8rem);
  --marge: clamp(1rem, 0.5rem + 3vw, 3rem);
  --largeur: 76rem;

  --rayon: 12px;
  --rayon-btn: 8px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

body {
  margin: 0;
  background: var(--nuit);
  color: var(--craie);
  font-family: var(--police);
  font-size: var(--t-corps);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: inherit; }

::selection { background: var(--eau); color: var(--nuit); }

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

/* Titres : Archivo grasse et serrée, comme le logo */
h1, h2, h3, .titre {
  margin: 0;
  text-wrap: balance;
}
h1, h2, .t-h1, .t-h2 {
  font-family: var(--police-titre);
  font-weight: 580;
  font-stretch: 100%;
  letter-spacing: -0.045em;
}
h1, .t-h1 { font-size: var(--t-h1); line-height: 0.98; }
h2, .t-h2 { font-size: var(--t-h2); line-height: 1.02; }
h3, .t-h3 { font-size: var(--t-h3); line-height: 1.2; font-weight: 620; letter-spacing: -0.02em; }

p { margin: 0; text-wrap: pretty; }
.chapo { font-size: var(--t-chapo); line-height: 1.55; color: var(--gris); max-width: 36em; }
.doux { color: var(--gris); }
.legende { font-size: var(--t-legende); color: var(--gris-2); letter-spacing: 0.01em; }

/* Logo : Solut[IA]a, les crochets fins et gris comme dans du code */
.logo {
  display: inline-flex;
  align-items: baseline;
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1;
  text-decoration: none;
  color: var(--craie);
  white-space: nowrap;
}
/* Tout ce qui est entre crochets de code s'écrit en police de code, crochets compris (Félix, 15/10/2026 : « toutes
   les typos entre crochets de code dans la typo code ») : ici, le [IA] du logo */
.logo-crochet {
  display: inline-block;
  font-family: var(--police-code);
  font-weight: 250;
  color: var(--gris-2);
  letter-spacing: 0;
  /* (en police de code, un crochet est centré dans une case large : on resserre, pour qu'il colle aux lettres) */
  margin: 0 -0.13em;
  transition: transform 0.35s var(--ease);
}
/* Au survol du logo, les crochets s'écartent un peu */
@media (hover: hover) and (pointer: fine) {
  a.logo:hover .logo-crochet:first-of-type { transform: translateX(-0.08em); }
  a.logo:hover .logo-crochet:last-of-type { transform: translateX(0.08em); }
}
.logo-ia { font-family: var(--police-code); letter-spacing: -0.05em; color: var(--eau); }
.logo.sur-clair { color: var(--nuit); }
.logo.sur-clair .logo-crochet { color: oklch(0.55 0.004 260); }
.logo.sur-clair .logo-ia { color: var(--eau-sur-clair); }
.eau { color: var(--eau); }

/* Petite ligne au-dessus d'un titre : du texte simple, pas de badge */
.surtitre { font-size: var(--t-petit); color: var(--gris); }

/* Boutons : rectangles aux coins doux, comme Qonto */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75em 1.35em;
  border-radius: var(--rayon-btn);
  border: 0;
  font: inherit;
  font-size: var(--t-corps);
  font-weight: 560;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), transform 0.16s var(--ease);
}
/* Le bouton s'enfonce légèrement sous le doigt */
.btn:active { transform: scale(0.97); }
.btn-plein { background: var(--craie); color: var(--nuit); }
.btn-sombre { background: var(--nuit-3); color: var(--craie); }
@media (hover: hover) and (pointer: fine) {
  .btn-plein:hover { background: oklch(0.87 0.003 260); }
  .btn-sombre:hover { background: oklch(0.29 0.004 260); }
}

/* Champs */
.champ { display: grid; gap: var(--e-2); }
.champ label { font-size: var(--t-petit); color: var(--gris); }
.champ input, .champ textarea {
  width: 100%;
  padding: 0.85em 1em;
  background: var(--nuit-2);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-btn);
  color: var(--craie);
  caret-color: var(--eau);   /* le curseur de saisie, vert d'eau comme le reste du site */
  font: inherit;
  font-size: var(--t-corps);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.champ input::placeholder, .champ textarea::placeholder { color: var(--gris-2); }
.champ input:hover, .champ textarea:hover { border-color: oklch(0.4 0.004 260); }
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--eau); background: var(--nuit-3); }
/* Les champs remplis par le navigateur (nom, e-mail…) gardent le fond du site, pas le bleu de Chrome ni le jaune de Safari */
.champ input:-webkit-autofill, .champ input:-webkit-autofill:hover, .champ input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--craie);
  -webkit-box-shadow: 0 0 0 100px var(--nuit-2) inset;
  box-shadow: 0 0 0 100px var(--nuit-2) inset;
  caret-color: var(--eau);
  transition: background-color 9999s ease-out 0s;
}
.champ input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 100px var(--nuit-3) inset; box-shadow: 0 0 0 100px var(--nuit-3) inset; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}