/*
|--------------------------------------------------------------------------
|   public/css/base.css
|--------------------------------------------------------------------------
|
|   Polices, variables, réinitialisation, typographie et éléments communs.
|
|   CE FICHIER DOIT ÊTRE CHARGÉ EN PREMIER : il déclare les variables
|   CSS (--marque, --encre...) que toutes les autres feuilles utilisent.
|   Une variable non déclarée ne provoque aucune erreur — la propriété
|   est simplement ignorée, ce qui donne un affichage cassé sans le
|   moindre message.
*/

/* --- Polices ---
   Servies depuis public/fonts et non depuis Google Fonts : la CSP
   (font-src 'self') bloquerait un serveur tiers, et c'est aussi une
   requête de moins vers un service qui trace les visiteurs.
   Trois fichiers variables, sous-ensemble latin (accents français
   et « œ » compris), licence SIL OFL — voir public/fonts/LICENCES.md.

   font-display: swap : le texte s'affiche tout de suite dans la police
   système, puis bascule. Mieux qu'une page blanche le temps du chargement. */
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter.woff2") format("woff2");
    font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Space Grotesk";
    src: url("../fonts/space-grotesk.woff2") format("woff2");
    font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/jetbrains-mono.woff2") format("woff2");
    font-weight: 100 800; font-style: normal; font-display: swap;
}

:root {
    /* --- Les couleurs du logo NY2E ---
       Quatre carrés : bleu nuit, teal, orange, or. Le teal porte
       l'action (boutons, liens, focus) ; l'orange et l'or servent
       d'accents ponctuels (icônes, dégradés). Le rouge de Proxéa
       (#ec3013) a disparu avec la bascule de marque. */
    --nuit: #0f1424;           /* fond du logo sombre */
    --nuit-2: #161d33;
    --nuit-3: #1e2a5a;         /* carré « N » */
    --indigo: #3a4c9e;
    --teal: #0e9384;           /* carré « Y » */
    --teal-vif: #2dd4bf;       /* le teal lisible sur fond nuit */
    --orange: #e4552c;         /* carré « 2 » */
    --or: #c2841a;             /* carré « E » */

    /* --marque garde son nom (toutes les feuilles s'en servent) mais
       prend un teal plus profond que celui du logo : le #0e9384 ne
       donne que 3,7:1 de contraste avec du texte blanc, sous le seuil
       AA. Celui-ci atteint 5:1. */
    --marque: #0b7a6e;
    --marque-sombre: #08625a;

    --degrade: linear-gradient(110deg, var(--teal-vif) 0%, #8b9cf4 55%, #f28a63 100%);

    --fond: #ffffff;
    --fond-alt: #f5f7fb;

    /* Gris FROIDS, tirés vers le bleu nuit du logo — sous un accent
       teal, des gris chauds paraîtraient sales. */
    --encre: #0f1424;
    --gris: #4b5265;
    --gris-clair: #8a91a5;
    --bordure: #e3e7ef;

    --rayon: .875rem;
    --ombre: 0 1px 2px rgb(15 20 36 / .04), 0 8px 24px -12px rgb(15 20 36 / .12);
    --ombre-forte: 0 2px 4px rgb(15 20 36 / .04), 0 24px 48px -20px rgb(15 20 36 / .25);

    --police-texte: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --police-titre: "Space Grotesk", "Inter", system-ui, sans-serif;
    --police-code: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    --largeur: 72rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
    margin: 0;
    font-family: var(--police-texte);
    color: var(--encre);
    line-height: 1.7;
    background: var(--fond);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; }

::selection { background: var(--teal-vif); color: var(--nuit); }

.contenu { max-width: var(--largeur); margin: 0 auto; padding: 0 1.5rem; }

h1, h2, h3 {
    font-family: var(--police-titre);
    letter-spacing: -0.02em;
    text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.05; margin: 0 0 1.25rem; font-weight: 700; }
h3 { font-size: 1.1875rem; line-height: 1.35; margin: 0 0 .5rem; font-weight: 600; }
p  { margin: 0 0 1rem; }

a { color: var(--marque); text-underline-offset: .2em; }

:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: .25rem; }

.accroche { font-size: 1.1875rem; color: var(--gris); max-width: 44rem; line-height: 1.65; }
.discret  { color: var(--gris); font-size: .9688rem; }

/* Petit libellé en police à chasse fixe au-dessus des titres de section.
   C'est le clin d'œil « développeur » de la charte : il évoque un
   commentaire de code sans en faire un déguisement. */
.surtitre {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--police-code);
    font-size: .8125rem; font-weight: 500;
    letter-spacing: .02em;
    color: var(--marque);
    margin: 0 0 .875rem;
}
.surtitre::before { content: "//"; color: var(--gris-clair); }

.bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .8125rem 1.5rem;
    background: var(--marque); color: #fff;
    text-decoration: none; border-radius: .625rem;
    font-family: inherit; font-weight: 600; font-size: 1rem; line-height: 1.3;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px rgb(15 20 36 / .1), inset 0 1px 0 rgb(255 255 255 / .12);
    transition: background .15s, transform .15s, box-shadow .15s;
}
.bouton:hover {
    background: var(--marque-sombre);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px rgb(11 122 110 / .6);
}
.bouton svg { width: 1.125rem; height: 1.125rem; transition: transform .15s; }
.bouton:hover svg { transform: translateX(2px); }

/* Bouton secondaire, à côté du principal : visible sans lui voler
   la vedette. */
.bouton-fantome {
    background: transparent; color: inherit;
    border-color: currentColor;
    box-shadow: none;
}
.bouton-fantome:hover { background: rgb(255 255 255 / .08); box-shadow: none; }

.grille { display: grid; gap: 1.5rem; }
.grille-2 { grid-template-columns: repeat(2, 1fr); }
.grille-3 { grid-template-columns: repeat(3, 1fr); }
.grille-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 64rem) {
    .grille-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 48rem) {
    /* Le corps passe légèrement sous 16px.
       NE PAS descendre plus bas pour les CHAMPS de formulaire : Safari
       sur iOS zoome automatiquement sur un champ dont la police fait
       moins de 16px, ce qui décale toute la page. Voir formulaire.css. */
    body { font-size: .9375rem; line-height: 1.65; }

    h3 { font-size: 1.0625rem; }

    .accroche { font-size: 1.0625rem; }
    .discret  { font-size: .9063rem; }
    .contenu  { padding: 0 1.125rem; }

    /* Le bouton reste à 16px : c'est le seul élément qu'on touche
       du doigt, le réduire gênerait l'action qu'on cherche à provoquer. */
    .bouton { font-size: 1rem; padding: .75rem 1.25rem; }

    .grille-2, .grille-3, .grille-4 { grid-template-columns: 1fr; }
    .grille { gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .bouton, .bouton svg { transition: none; }
    .bouton:hover, .bouton:hover svg { transform: none; }
}