/* Couleurs de bordure et de fond des cartes de projets, déclarées pour que le navigateur sache les
   faire passer en douceur de l'une à l'autre : un dégradé, lui, ne s'anime pas. Sans ce support, la
   bordure change quand même de couleur, simplement sans fondu. */
@property --bord-a {
    syntax: "<color>";
    inherits: false;
    initial-value: rgba(255, 255, 255, 0.1);
}

@property --bord-b {
    syntax: "<color>";
    inherits: false;
    initial-value: rgba(255, 255, 255, 0.1);
}

@property --fond-carte {
    syntax: "<color>";
    inherits: false;
    initial-value: #181b38;
}

:root {
    /* === Couleurs ===
       Bleu nuit plus profond que l'ancien #25274d : le texte blanc y respire,
       et les surfaces claires se détachent enfin. */
    --fond: #13152c;
    --fond-doux: #181b38;
    --surface: #20244a;
    --surface-haute: #272c58;
    --bordure: rgba(255, 255, 255, 0.10);
    --bordure-forte: rgba(255, 255, 255, 0.20);

    --texte: #f3f4fb;
    --texte-doux: #b7bcdb;
    --texte-discret: #8b91b8;

    --accent: #ff9913;
    --accent-doux: #ffb457;
    --violet: #8d7ddd;
    --gradient-accent: linear-gradient(135deg, #5f5195 0%, #a7715a 58%, #ff9913 100%);

    /* Même trajectoire, mais chaque point tient 4,5:1 avec du texte blanc (4,66:1 au plus
       bas, contre 2,14:1 avec l'orange vif). Réservé aux fonds qui portent du texte :
       --gradient-accent reste pour les filets et les soulignements. */
    --gradient-bouton: linear-gradient(135deg, #5f5195 0%, #96575a 58%, #b85a08 100%);

    /* === Typographie === */
    --police-titre: "Roboto Slab", Georgia, serif;
    --police-texte: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    --t-h1: clamp(2.4rem, 7vw, 4.2rem);
    --t-h2: clamp(1.7rem, 4.6vw, 2.6rem);
    --t-h3: clamp(1.15rem, 2.6vw, 1.4rem);
    --t-corps: clamp(1rem, 2.5vw, 1.0625rem);
    --t-petit: 0.875rem;
    --t-micro: 0.8125rem;

    /* Longueur de ligne confortable à la lecture. */
    --mesure: 66ch;

    /* === Espacements === */
    --e1: 0.5rem;
    --e2: 0.75rem;
    --e3: 1rem;
    --e4: 1.5rem;
    --e5: 2rem;
    --e6: 3rem;
    --e7: 4.5rem;
    --espace-section: clamp(4rem, 9vw, 7.5rem);
    --marge-page: clamp(1rem, 5vw, 3rem);
    --largeur-max: 1180px;

    /* === Formes === */
    --r-s: 10px;
    --r-m: 16px;
    --r-l: 24px;
    --r-pilule: 999px;

    --ombre-1: 0 2px 10px rgba(0, 0, 0, 0.25);
    --ombre-2: 0 18px 40px rgba(0, 0, 0, 0.38);

    --transition: 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);

    --hauteur-nav: 4.5rem;

    /* === Marges de sécurité ===
       La page est déclarée en viewport-fit=cover : elle occupe tout l'écran, y
       compris ce que l'encoche et la barre gestuelle recouvrent. Ces quatre valeurs
       reprennent la place qu'il faut leur laisser. Elles valent zéro par défaut, et
       ne sont recalculées que si le navigateur sait vraiment les donner : une valeur
       qu'il ne comprendrait pas ferait retomber la propriété à sa valeur initiale,
       et le contenu se collerait au bord. */
    --hauteur-nav-totale: var(--hauteur-nav);
    --marge-haute: 0px;
    --marge-basse: 0px;
    --marge-laterale: var(--marge-page);
}

@supports (padding: max(env(safe-area-inset-top), 0px)) {
    :root {
        --hauteur-nav-totale: calc(var(--hauteur-nav) + env(safe-area-inset-top));
        --marge-haute: env(safe-area-inset-top);
        --marge-basse: env(safe-area-inset-bottom);
        --marge-laterale: max(var(--marge-page), env(safe-area-inset-left), env(safe-area-inset-right));
    }
}