/*
  Allô Jeannette, web-app tarifaire
  Feuille de base : variables --aj-*, reset minimal, typographie.

  Toutes les valeurs visibles côté rendu passent par une variable --aj-*,
  redéclarable dans un fichier d'override CSS servi via ?theme= (cf. theme.js).
  Documentation complète : docs/ALLOJEANNETTE_WEBAPP-VARIABLES-CSS_V1_260929.md
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root {
  /* Couleurs, charte Allô Jeannette */
  --aj-color-primary: #145A6D;         /* Bleu canard, dominante */
  --aj-color-primary-dark: #0E4453;
  --aj-color-primary-soft: #E7F0F2;    /* Fond bleu très clair, encadré résultat */
  --aj-color-accent: #C97A45;          /* Orange terracotta, boutons et prix */
  --aj-color-accent-dark: #A56133;
  --aj-color-text: #1A1A1A;            /* Noir profond, corps */
  --aj-color-text-muted: #5B6B72;      /* Gris ardoise, mentions et légendes */
  --aj-color-text-invert: #FFFFFF;     /* Texte sur fond primary */
  --aj-color-bg: transparent;          /* L'iframe hérite du fond parent */
  --aj-color-bg-soft: #F6F7F8;         /* Ligne alternée, skeleton */
  --aj-color-border: #D8DDDF;          /* Contour cartes et tableau */
  --aj-color-border-strong: #145A6D;   /* Contour bleu canard fin */

  /* Typographie */
  --aj-font-title: 'Playfair Display', 'Georgia', serif;
  --aj-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --aj-size-xs: 0.75rem;   /* 12 px, mentions légales, disclaimers */
  --aj-size-sm: 0.875rem;  /* 14 px, texte secondaire */
  --aj-size-base: 1rem;    /* 16 px, corps */
  --aj-size-md: 1.125rem;  /* 18 px, texte fort */
  --aj-size-lg: 1.5rem;    /* 24 px, résultat cas chiffré */
  --aj-size-xl: 2rem;      /* 32 px, prix tableau */
  --aj-size-xxl: 3rem;     /* 48 px, aperçu home */
  --aj-size-xxxl: 4rem;    /* 64 px, aperçu home XL */

  --aj-weight-regular: 400;
  --aj-weight-medium: 500;
  --aj-weight-semibold: 600;
  --aj-weight-bold: 700;

  --aj-line-tight: 1.15;
  --aj-line-normal: 1.4;
  --aj-line-relaxed: 1.6;

  /* Espacements, échelle multiple de 4 */
  --aj-space-xxs: 0.25rem;   /* 4 px  */
  --aj-space-xs: 0.5rem;     /* 8 px  */
  --aj-space-sm: 0.75rem;    /* 12 px */
  --aj-space-md: 1rem;       /* 16 px */
  --aj-space-lg: 1.5rem;     /* 24 px */
  --aj-space-xl: 2rem;       /* 32 px */
  --aj-space-xxl: 3rem;      /* 48 px */

  /* Rayons */
  --aj-radius-sm: 4px;
  --aj-radius-md: 8px;
  --aj-radius-lg: 16px;

  /* Ombres */
  --aj-shadow-sm: 0 1px 2px rgba(20, 90, 109, 0.08);
  --aj-shadow-md: 0 4px 12px rgba(20, 90, 109, 0.10);

  /* Focus visible, accessibilité */
  --aj-focus-ring: 3px solid var(--aj-color-accent);
  --aj-focus-offset: 2px;

  /* Points de rupture */
  --aj-bp-mobile: 768px;
}

/* Reset minimal, sans normalize complet */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--aj-color-bg);
  color: var(--aj-color-text);
  font-family: var(--aj-font-body);
  font-size: var(--aj-size-base);
  line-height: var(--aj-line-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  overflow-x: hidden; /* jamais de scroll horizontal */
}

button {
  font-family: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: var(--aj-focus-ring);
  outline-offset: var(--aj-focus-offset);
}

/* Utilitaire visuellement caché mais lisible par lecteur d'écran */
.aj-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;
}