/* ══════════════════════════════════════════════════════════════════════════
   Allolia — socle du site public
   Relevé au pixel sur les maquettes Lovable (site/maquettes/). Toute valeur
   ici vient d'une mesure, pas d'un goût : voir specification/01-inventaire.md.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Fonds — un noir bleuté, pas un gris */
  --nuit:        #04080E;
  --nuit-pied:   #02050C;
  --carte:       #0C0F16;
  --carte-haute: #10141C;
  --bord:        rgba(255, 255, 255, .07);
  --bord-vif:    rgba(255, 255, 255, .12);

  /* Encre */
  --blanc:       #FFFFFF;
  --gris:        #8B9299;
  --gris-fonce:  #5E666E;

  /* Accents mesurés sur les captures */
  --vert:        #00C77F;
  --bleu:        #5EC7F4;
  --bleu-fonce:  #1070CE;
  --rose:        #F1A3D0;
  --ambre:       #E7CE87;

  /* Le dégradé de la marque : vert → cyan → bleu */
  --degrade:     linear-gradient(95deg, #00C77F 0%, #14A9C6 48%, #1070CE 100%);
  --degrade-bouton: linear-gradient(95deg, #00C77F 0%, #0C9BD0 100%);

  --police:      "Outfit", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --police-logo: "Baloo 2", var(--police);

  --largeur:     1184px;   /* en-tête et pied — mesuré : logo à 127, bouton à 1311 */
  --lecture:     960px;    /* corps des pages — mesuré : cartes 239 → 1200 */
  --rayon:       18px;
  --rayon-petit: 12px;

  --douceur: cubic-bezier(.22, 1, .36, 1);   /* la courbe « Apple » */
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--nuit);
  color: var(--gris);
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

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

/* ── Trames de fond ────────────────────────────────────────────────────────
   Les sections ne sont pas d'un noir plat : une lueur verte monte du héros,
   et chaque section porte un halo très sourd. C'est ce qui donne la
   profondeur qu'on voit sur les captures. */
.halo { position: relative; overflow: hidden; }
.halo::before {
  content: ""; position: absolute; inset: -40% -10% auto; height: 620px;
  background: radial-gradient(ellipse 60% 100% at 50% 0%,
              rgba(0, 199, 127, .10) 0%, rgba(16, 112, 206, .05) 42%, transparent 72%);
  pointer-events: none;
}

.centre { width: min(100% - 48px, var(--lecture)); margin-inline: auto; }
.centre--large { width: min(100% - 48px, var(--largeur)); margin-inline: auto; }

section { position: relative; }
.section { padding-block: 96px; }
.section + .section { border-top: 1px solid rgba(255, 255, 255, .045); }

/* ── Typographie ───────────────────────────────────────────────────────── */
h1, h2, h3, h4 { color: var(--blanc); font-weight: 700; margin: 0; letter-spacing: -.02em; }
h1 { font-size: 63px; line-height: .97; }   /* mesuré : ligne 1 = 627 px de large */
h2 { font-size: 38px; line-height: 1.16; }
h3 { font-size: 19px; line-height: 1.3; letter-spacing: -.01em; }
p  { margin: 0; }

.degrade {
  background: var(--degrade);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* Un texte transparent qui perd son dégradé ne laisse RIEN (mode couleurs
   forcées). On repose la couleur pleine dessous. Règle du studio. */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .degrade { color: var(--vert); }
}
@media (forced-colors: active) { .degrade { color: CanvasText; } }

.surtitre {
  font-size: 13px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--vert); margin-bottom: 14px;
}
.chapeau { font-size: 17.5px; line-height: 1.6; color: var(--gris); }   /* mesuré : 516 px */

/* ── Pastille de section (● Agent IA téléphonique) ─────────────────────── */
.pastille {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 18px; border-radius: 999px;
  background: rgba(0, 199, 127, .09);
  border: 1px solid rgba(0, 199, 127, .28);
  color: var(--vert); font-size: 13px; font-weight: 600;
}
.pastille::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pastille--rose  { background: rgba(241,163,208,.09); border-color: rgba(241,163,208,.3); color: var(--rose); }
.pastille--ambre { background: rgba(231,206,135,.09); border-color: rgba(231,206,135,.3); color: var(--ambre); }

/* ── Boutons ───────────────────────────────────────────────────────────── */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 30px; border-radius: 999px; border: 0; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 600; color: #04231A;
  background: var(--degrade-bouton);
  transition: transform .45s var(--douceur), box-shadow .45s var(--douceur), filter .3s;
}
.bouton:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -14px rgba(0,199,127,.7); filter: brightness(1.06); }
.bouton:active { transform: translateY(0); }
/* Le bouton secondaire n'est PAS un bouton blanc : sur la maquette son
   texte est gris et sa graisse normale. Il ne doit pas concurrencer le
   bouton plein. */
.bouton--fantome {
  background: transparent; color: #AEB5BC; font-weight: 500;
  border: 1px solid var(--bord-vif);
}
.bouton--fantome:hover { color: var(--blanc); }
.bouton--fantome:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.28); box-shadow: none; }

/* ── Cartes ────────────────────────────────────────────────────────────── */
.carte {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 26px;
  transition: border-color .45s var(--douceur), transform .45s var(--douceur), background .45s var(--douceur);
}
.carte:hover { border-color: var(--bord-vif); background: var(--carte-haute); transform: translateY(-3px); }

/* ── Petites pastilles d'attribut ──────────────────────────────────────── */
.jeton {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08);
  font-size: 12.5px; color: #98A0A8; white-space: nowrap;
}