/* =========================================================================
   CARRIA — socle : polices, réinitialisation, typographie, gabarit, mouvement
   Annexes C4 (typographie), C5 (gabarit, mouvement, thème), D1 (responsive).

   THÈME : CLAIR UNIQUEMENT. Le produit n'a pas de thème sombre ; une landing
   sombre créerait un décrochage à la démonstration (annexe C5).
   ========================================================================= */

/* --- Polices auto-hébergées. Aucune requête vers un domaine tiers (§6). ---
   Sous-ensemblées latin, OFL.txt copié à côté (obligation de licence). */

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../assets/fonts/InstrumentSerif-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* --- Réinitialisation --- */

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

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

/* L'en-tête collante fait 68 px : sans cette marge, elle recouvre les titres
   visés par les ancres #le-probleme, #la-preuve, #integrations, #questions. */
:target,
[id] {
  scroll-margin-top: 84px;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--ink);
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Toute valeur numérique est en JetBrains Mono, chiffres tabulaires (C4). */
.num,
.chiffre {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --- Typographie, échelle imposée (C4) --- */

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

.h1 {
  font-size: clamp(38px, 5.5vw, 72px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.h2 {
  font-size: clamp(28px, 3.2vw, 36px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
}

.titre-bloc {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.titre-carte {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.022em;
}

.valeur-chiffree {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
}

.texte-large {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.005em;
}

.texte-courant {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
}

.legende {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--muted);
}

/* Surtitre : imposé par les textes définitifs de l'annexe A (A1, A2, A4, A5). */
.surtitre {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

/* Accent éditorial : UNE SEULE occurrence sur toute la page, en A3. */
.accent-editorial {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.015em;
}

p {
  margin: 0;
}

/* Colonnes de texte plafonnées à 68 caractères (C4). */
.mesure {
  max-width: 68ch;
}

/* --- Gabarit (C5) --- */

.enveloppe {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 48px;
}

.enveloppe-texte {
  max-width: 1100px;
}

/* Débord à 1560 px, réservé au visuel du hero. */
.enveloppe-debord {
  max-width: 1560px;
}

.section {
  padding-block: 120px;
}

@media (max-width: 768px) {
  .enveloppe {
    padding-inline: 24px;
  }
  .section {
    padding-block: 72px;
  }
}

/* Rythme de fond imposé : dégradé lavande (hero) → blanc → dégradé → blanc →
   dégradé → blanc → dégradé accent saturé (bloc final). Ne pas casser. */
.fond-degrade {
  background: var(--bg-grad);
}

.fond-blanc {
  background: #ffffff;
}

/* --- Recette de verre, effet signature (C3) ---
   Quatre propriétés ; l'omission d'une seule casse l'effet. Le liseré blanc
   supérieur en fait 80 %. Ne pas empiler plus de deux niveaux. */

.verre {
  background: var(--surface-frosted);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: var(--sh-glass), inset 0 1px 0 var(--inset-highlight);
}

/* Repli obligatoire : sans lui le texte devient illisible sur le dégradé. */
@supports not (backdrop-filter: blur(1px)) {
  .verre {
    background: var(--surface-elev);
  }
}

/* --- Action unique de la page (brief §2) ---
   Un seul bouton plein sur toute la page : « Demander une démonstration ».
   Aucun autre bouton plein n'est autorisé. */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* zone tapable minimale (D1) */
  padding: 0 22px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.bouton:hover {
  background: var(--accent-dark);
}

.bouton:active {
  transform: translateY(1px);
}

.bouton--large {
  width: 100%;
  min-height: 52px;
  font-size: 15px;
  font-weight: 600;
}

/* Lien secondaire : jamais un bouton plein (brief §2). */
.lien-secondaire {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--rule-30);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.lien-secondaire:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* --- Accessibilité (D3) ---
   Anneau de focus sur TOUT élément interactif. Ne jamais supprimer sans
   remplacement. */

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--accent);
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 0 0 var(--r-xs) 0;
}

.lien-evitement:focus {
  left: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Mouvement (C5) ---
   Entrée en fondu montant, 700 ms, décalage 60 ms par élément d'une rangée,
   déclenché par IntersectionObserver à 15 % de visibilité, une seule fois.

   ⚠️ L'état masqué est conditionné à `html.js`, classe posée par un script
   inline en tête de <head>. Sans cette condition, une page privée de
   JavaScript, ou dont le script lève avant d'atteindre l'observateur,
   restait bloquée à `opacity: 0` sur tout le contenu de A2 à A9 : le
   bandeau de sources, le problème, la réponse, la preuve, les intégrations,
   la sécurité, les étapes et la FAQ disparaissaient purement et simplement.
   La règle du cahier des charges est que l'action de la page ne dépend pas
   d'un script (annexe A10, D1) ; sa lisibilité non plus.
   Le masquage n'existe donc QUE si le JavaScript s'exécute. */

@media (prefers-reduced-motion: no-preference) {
  html.js .js-anime {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
  }
  html.js .js-anime.est-visible {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}