/* VISTA — direction artistique
   ------------------------------------------------------------------
   Une base sobre (encre + os), deux complémentaires qui viennent des
   façades de l'intra-muros — le bleu de la Vilaine, le vert du Thabor —
   et l'orange du logo comme unique signal. L'orange ne décore jamais :
   il désigne. S'il apparaît, c'est qu'il y a quelque chose à faire, à
   lire ou à cliquer. Cette règle est ce qui lui garde son impact.

   Cette DA est la base définitive du site : les pages, les composants
   et les animations ne piochent leurs valeurs que dans ce fichier. */

:root {
  /* ---- Base neutre */
  --encre: #0e0e13;          /* texte, fonds sombres */
  --encre-2: #171d26;        /* surfaces sombres surélevées */
  --encre-3: #232b36;        /* filets sur fond sombre */
  --os: #ffffff;             /* fond de page : blanc pur, le blanc du film d'accueil s'y fond */
  --papier: #f7f7f8;         /* panneaux posés sur le fond */
  --gris: #5d626a;           /* texte secondaire — 6,14:1 sur le fond */
  --gris-clair: #9aa0a6;

  /* ---- Signal */
  --orange: #ff5000;          /* orange VISTA, relevé sur le logo */
  --orange-vif: #ff6d26;
  --orange-fond: #fff0e8;
  /* L'orange du logo ne fait que 3:1 sur le fond clair : trop peu pour
     un lien ou une étiquette. Même teinte (18,8°), plus sombre : 5,30:1 sur blanc.
     Sur les fonds sombres, c'est l'orange vif qui est lisible (6,04:1
     sur le bleu nuit, 4,7:1 au pire sous la nappe de points) : la
     variable y est redéfinie plus bas. */
  --orange-texte: #c23d00;

  /* ---- Complémentaires
     Le bleu n'est pas un filet décoratif : il porte les surfaces sombres
     du site. Les fonds qui étaient encre passent en nuit, ce qui donne
     au site sa seconde couleur sans toucher à la signature orange —
     l'orange ressort même davantage sur un bleu profond que sur du noir. */
  --nuit: #101c33;           /* fonds sombres — bleu de nuit */
  --nuit-2: #18294a;         /* surfaces sombres surélevées */
  --nuit-3: #24365c;         /* filets sur fond nuit */
  --bleu: #1b3bd8;           /* Bleu Vilaine — tracés et graphiques */
  --bleu-encre: #24407e;     /* bleu lisible en texte sur fond clair */
  --bleu-fond: #e7eaf7;      /* aplat très pâle */
  --vert: #0e8f76;           /* Vert Thabor */
  --vert-fond: #e2f1ed;

  /* ---- Chiffres
     Un seul bleu pour tous les numéros du site (01, 02…, étapes,
     chapitres) : Lohann ne voulait plus de chiffres orange, verts et
     bleu foncé côte à côte. Sur fond clair, le bleu vif (5,63:1 sur
     blanc, 4,70:1 sur le bleu pâle) ; sur fond nuit, le bleu clair
     (8,14:1). La variable est redéfinie dans les zones sombres, plus bas. */
  --bleu-chiffre: #2f5ce0;
  --bleu-clair: #8fb3ff;
  --chiffre: var(--bleu-chiffre);

  /* ---- Cartes marines
     La direction du site vient des cartes de navigation bretonnes : fond
     de papier, tracés bleu-gris, aplats de petits fonds, chiffres de
     sonde. Le fond « os » qui existait déjà EST le papier de carte, on
     ne le touche pas.

     L'orange reste la signature et le seul signal d'action : sur une
     vraie carte marine, c'est le magenta qui joue ce rôle — désigner ce
     qui compte. L'orange en tient exactement la place. */
  --sonde: #2f4d61;          /* tracés, chiffres de sonde, texte technique */
  --sonde-2: #5c7d92;        /* tracés secondaires */
  --sonde-3: #9db3c0;        /* courbes de niveau, trait le plus fin */
  --haut-fond: #dde9ef;      /* aplat des petits fonds */
  --estran: #e9e2d0;         /* laisse de basse mer, beige */
  --graticule: rgba(47, 77, 97, 0.13);   /* quadrillage lat/long */

  /* ---- Filets */
  --trait: rgba(14, 17, 22, 0.13);
  --trait-fort: rgba(14, 17, 22, 0.24);
  --trait-clair: rgba(243, 240, 233, 0.17);

  /* ---- Rôles */
  --bg: var(--os);
  --texte: var(--encre);
  --texte-doux: var(--gris);

  /* ---- Typographie
     Deux polices, choisies par Lohann :
     - Cabinet Grotesk, extra-grasse, pour les titres et le mot-marque
       « vista » (qui était en Chillax jusqu'au 29/09/2026) ;
     - Satoshi pour le texte courant et les étiquettes. */
  --font-display: "Cabinet Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Les étiquettes étaient en chasse fixe, en capitales espacées. Elles
     passent dans la police du texte : c'est le premier geste qui rend
     la page plus calme. Le nom de variable est gardé pour ne pas
     réécrire soixante déclarations. */
  --font-mono: var(--font-text);

  /* Réglages hérités de la première passe (Archivo, axe de largeur) :
     Cabinet Grotesk n'a pas d'axe wdth, ces valeurs sont sans effet.
     Seul l'axe wght compte désormais. */
  --wdth-display: 116;
  --wdth-serre: 116;
  --wdth-sous-titre: 104;    /* intertitres : juste au-dessus du normal */
  --wght-titre: 800;         /* Cabinet Grotesk Extrabold, comme l'échantillon choisi */
  --wght-sous-titre: 700;

  --fs-hero: clamp(2.5rem, 5.6vw, 5.8rem);
  --fs-h1: clamp(2.1rem, 4.4vw, 3.9rem);
  --fs-h2: clamp(1.6rem, 2.7vw, 2.5rem);
  --fs-h3: clamp(1.02rem, 1.2vw, 1.22rem);
  --fs-lead: clamp(1rem, 1.15vw, 1.12rem);
  --fs-body: 1rem;
  --fs-small: 0.84rem;
  --fs-label: 0.8rem;

  /* ---- Espacement — plus d'air qu'avant : c'est l'espace, et non le
     décor, qui donne le sentiment de soin. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 30px;
  --sp-7: 42px;
  --sp-8: 58px;
  --sp-9: 78px;

  --pad-section: clamp(72px, 8.5vw, 144px);
  --pad-section-sm: clamp(48px, 5.5vw, 88px);

  --container-w: 1240px;
  --container-pad: clamp(18px, 4vw, 56px);

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --ombre-douce: 0 1px 2px rgba(14, 17, 22, 0.04), 0 8px 24px rgba(14, 17, 22, 0.06);
  --ombre-portee: 0 2px 6px rgba(14, 17, 22, 0.05), 0 18px 48px rgba(14, 17, 22, 0.12);
  --ombre-levee: 0 4px 12px rgba(14, 17, 22, 0.07), 0 32px 72px rgba(14, 17, 22, 0.18);

  /* ---- Mouvement — une seule famille de courbes pour tout le site.
     C'est ce qui donne l'impression que tout bouge « pareil ». */
  --ease-sortie: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-doux: cubic-bezier(0.65, 0.05, 0.15, 1);
  --ease-elan: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 0.2s;
  --dur-2: 0.42s;
  --dur-3: 0.85s;

  --header-h: 68px;

  /* Position du curseur, normalisée -1..1, alimentée par js/motion.js.
     Les composants s'en servent pour des décalages de quelques pixels. */
  --mx: 0;
  --my: 0;
}

@media (max-width: 900px) {
  :root { --header-h: 58px; }
}

/* Zones sombres : l'orange vif y est le plus lisible. Une variable, et
   non une règle par composant — sinon chaque nouveau bloc sombre
   finirait avec l'orange assombri, illisible sur le bleu. */
.on-sombre, .pied, .offre-mise-en-avant, .orbite-source li,
.orbite-pastille, .carte-epingle, .portes .porte, .skip-link,
.entete-page.est-sombre {
  --orange-texte: var(--orange-vif);
  --chiffre: var(--bleu-clair);
}

/* Page noire (Créations, data-theme="noir") : tout s'inverse, du haut
   au pied de page. Le fond devient encre, le texte blanc ; les zones
   bleu nuit passent au noir pour que la page soit d'un seul tenant, et
   leurs points deviennent argent (js/nappe.js). Les composants qui
   posent une couleur en dur ont leur exception dans leur propre fichier
   (bouton principal, barre, voile de chargement). */
body[data-theme="noir"] {
  --bg: var(--encre);
  --texte: var(--os);
  --texte-doux: rgba(255, 255, 255, 0.72);
  --papier: #18181f;
  --gris: #a3a8b0;
  --trait: rgba(255, 255, 255, 0.13);
  --trait-fort: rgba(255, 255, 255, 0.26);
  --nuit: var(--encre);
  --nuit-2: #18181f;
  --nuit-3: #26262e;
  --orange-texte: var(--orange-vif);
  --chiffre: var(--bleu-clair);
}