/* ═══════════════════════════════════════════════════════════════════════
   AirX22 — socle commun : jetons de style + base typographique.

   Toute décision de couleur ou de typographie se prend ICI, une seule fois.
   Une page ne déclare que ce qui lui est propre (mise en page, composants).
   Référence d'usage : docs/charte.md
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Palette ───────────────────────────────────────────────────────
   Valeurs brutes. Ne jamais les utiliser dans une page : passer par les
   rôles de la section 2, qui seuls portent une intention.
   ------------------------------------------------------------------ */
:root {
    --p-black: #090909;
    --p-white: #ffffff;
    /* Gris légèrement chauds, accordés aux fonds ambrés du site. */
    --p-grey-100: #e6e4e0;
    --p-grey-300: #b0aca6;
    --p-grey-500: #9a9691;
    --p-grey-700: #85817b;
    /* Voiles blancs — les surfaces et bordures du glassmorphism. */
    --p-veil-035: rgba(255, 255, 255, 0.035);
    --p-veil-06: rgba(255, 255, 255, 0.06);
    --p-veil-09: rgba(255, 255, 255, 0.09);
    --p-veil-16: rgba(255, 255, 255, 0.16);
    /* Accents. */
    --p-cyan: #7ecfcf;
    --p-green: #5cbf5c;
    --p-orange: #d4874d;
    --p-violet: #9b8fce;
}

/* ── 2. Rôles ─────────────────────────────────────────────────────────
   Le vocabulaire du site. Un nouveau texte choisit un rôle, jamais une
   couleur. Contrastes vérifiés sur fond de page ET sur surface vitrée.
   ------------------------------------------------------------------ */
:root {
    --bg: var(--p-black);

    /* Échelle de texte, du plus fort au plus discret. */
    --text-strong: var(--p-white);      /* titres                        */
    --text: var(--p-grey-100);          /* texte affirmé, chiffres       */
    --text-body: var(--p-grey-300);     /* prose : paragraphes           */
    --text-muted: var(--p-grey-500);    /* libellés, méta, navigation    */
    --text-faint: var(--p-grey-700);    /* décor : numéros, aides, pied  */

    /* Surfaces vitrées : posée, puis appuyée (survol, carte principale). */
    --surface: var(--p-veil-035);
    --surface-2: var(--p-veil-06);
    --border: var(--p-veil-09);
    --border-strong: var(--p-veil-16);

    /* Accents — cyan = accent principal, les autres portent un statut. */
    --accent: var(--p-cyan);
    --accent-green: var(--p-green);
    --accent-orange: var(--p-orange);
    --accent-violet: var(--p-violet);

    --font-display: 'Bebas Neue', sans-serif;
    --font-body: 'IBM Plex Sans', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

    --blur: 20px;
    --radius: 6px;
}

/* ── 3. Base ──────────────────────────────────────────────────────────
   Reset et réglages hérités par tout le contenu. Le fond décoratif de
   chaque page reste à sa charge.
   ------------------------------------------------------------------ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    color: var(--text);
    background-color: var(--bg);
    min-height: 100vh;
    overflow-x: hidden;
}

p {
    color: var(--text-body);
    line-height: 1.7;
}

strong,
b {
    color: var(--text);
    font-weight: 500;
}

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

/* ── 4. Classes de texte ──────────────────────────────────────────────
   Le nécessaire pour poser du contenu sans réécrire de CSS.
   ------------------------------------------------------------------ */

/* Chapô : phrase d'introduction d'une section. */
.lead {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-body);
    max-width: 62ch;
}

/* Libellé : mono, capitales espacées — titre de section, étiquette. */
.label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Méta : information de service — date, compteur, mention. */
.meta {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--text-faint);
}

/* Points clés : liste de bénéfices, sans puces natives. */
.bullets {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bullets li {
    position: relative;
    padding-left: 20px;
    color: var(--text-body);
    line-height: 1.7;
}

.bullets li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--accent);
}