/* ===========================================================================
   SOCLE COMMUN PalMapLive
   ---------------------------------------------------------------------------
   Ce fichier existe parce que le site n'avait AUCUNE feuille partagée :
   style.css n'est chargé que par la carte, et les 22 autres pages embarquaient
   chacune leur copie du même style, qui avait dérivé. Résultat mesuré avant
   correction, pour des intentions identiques : 62 durées d'animation, 41
   ombres, 30 rayons, 3 écritures de la même police.

   Il est lié AVANT les <style> locaux de chaque page : il ne fait donc que
   METTRE À DISPOSITION des valeurs, sans rien imposer. Une page qui déclare
   encore ses propres valeurs continue de fonctionner à l'identique, et on
   l'aligne au fil des refontes. Aucun rendu ne change au branchement.

   La palette a été REPOINTÉE sur l'identité « planche de relevé » (2026-08-06,
   voir public/vitrine.css) : encre d'océan, terres, sommets, et l'ambre comme
   unique couleur chaude. Les pages qui déclarent encore leurs propres valeurs
   les écrasent, mais toute page NEUVE hérite maintenant de la bonne identité
   sans rien avoir à redéclarer.
   =========================================================================== */

:root {
  /* ---- Couleurs, valeurs majoritaires du site ---- */
  --bg: #061118;
  --bg2: #08161e;
  --panel: #0b1f27;
  --panel2: #123c46;
  --panel3: #2d5f66;
  --line: rgba(147, 166, 173, .14);
  --text: #e4edf0;
  --muted: #93a6ad;
  --accent: #f0a23c;
  --accent-soft: rgba(240, 162, 60, .14);
  --violet: #f0a23c;
  --accent2: #f0a23c;

  /* Accent TRANSPARENT, en 6 marches.
     Ces variables existent pour une raison précise : un client qui choisit sa
     couleur dans l'administration ne voyait changer que les aplats, parce que
     les bordures, halos et fonds discrets étaient écrits en rgba() figé sur le
     cyan. Le serveur régénère ces 6 valeurs à partir de la couleur choisie
     (voir /branding.css), donc tout suit. Les opacités relevées dans le code
     allaient de .06 à .95 en 32 valeurs : elles sont ramenées à la marche la
     plus proche, un écart de quelques pour cent d'opacité étant invisible.
     Pas de color-mix() ici : la personnalisation doit marcher aussi sur les
     navigateurs anciens, où une valeur non comprise supprimerait la couleur. */
  --accent-10: rgba(240, 162, 60, .10);   /* fond très discret */
  --accent-15: rgba(240, 162, 60, .15);   /* bordure douce, survol */
  --accent-22: rgba(240, 162, 60, .22);   /* état actif */
  --accent-32: rgba(240, 162, 60, .32);   /* bordure marquée */
  --accent-45: rgba(240, 162, 60, .45);   /* halo, ombre colorée */
  --accent-85: rgba(240, 162, 60, .85);   /* aplat presque plein */
  --gold: #f0a23c;
  --green: #55d97a;
  --red: #f0685f;

  /* ---- Mouvement ----------------------------------------------------
     Une seule règle : plus un élément est gros et lointain, plus il prend
     son temps. Les deux courbes décélèrent fortement en fin de course,
     c'est ce qui donne la sensation de se poser plutôt que de s'arrêter
     net. Ne pas utiliser linear (mécanique) ni ease (démarrage sec) pour
     du mouvement visible. */
  --t-instant: .12s;   /* appui, bascule : doit suivre le doigt */
  --t-court:   .2s;    /* survol, couleur, petite translation */
  --t-moyen:   .45s;   /* ouverture d'un panneau, changement de vue */
  --t-long:    .9s;    /* apparition d'un bloc au défilement */
  --e-doux:    cubic-bezier(.16, 1, .3, 1);
  --e-sortie:  cubic-bezier(.22, .61, .36, 1);

  /* ---- Rayons : 5 marches au lieu de 30 ---- */
  --r-xs: 6px;
  --r-s: 10px;
  --r-m: 16px;    /* rayon de carte réellement majoritaire du site */
  --r-l: 20px;
  --r-pill: 999px;

  /* ---- Élévations : 3 niveaux. La lueur est réservée à l'accent
     (focus, élément actif), jamais décorative. ---- */
  --e-1: 0 2px 8px rgba(0, 0, 0, .28);
  --e-2: 0 10px 30px rgba(0, 0, 0, .45);
  --e-3: 0 18px 48px rgba(0, 0, 0, .55);
  --lueur: 0 0 0 3px rgba(240, 162, 60, .16);

  /* ---- Espacements, multiples de 4. RÉSERVÉ AUX COMPOSANTS NEUFS :
     l'existant utilise 9, 11, 14, 18, 22px et le ramener de force
     déplacerait des blocs en production pour un gain théorique. ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* ---- Typographie -------------------------------------------------
     Le site utilisait 62 tailles de texte et trois écritures différentes
     de la même police. L'échelle ci-dessous suit un rapport régulier
     (environ 1,2) : chaque marche se distingue de la suivante sans que
     l'écart devienne brutal, ce qui donne une hiérarchie lisible.
     --fs-base reste à 16px, la taille de confort de lecture. */
  --fs-xs:   .75rem;   /* mentions, légendes */
  --fs-s:    .85rem;   /* texte secondaire, interface */
  --fs-base: 1rem;     /* corps de texte */
  --fs-m:    1.15rem;  /* sous-titre, chapô */
  --fs-l:    1.4rem;   /* titre de section */
  --fs-xl:   1.75rem;  /* titre de page */
  --fs-2xl:  2.2rem;   /* titre d'accueil */

  --lh-serre: 1.25;    /* titres : les lignes doivent se tenir */
  --lh-normal: 1.6;    /* corps : respiration confortable */
  --lh-large: 1.8;     /* listes, blocs aérés */

  --police: 'Archivo', system-ui, 'Segoe UI', sans-serif;
  --police-mono: 'Plex Mono', ui-monospace, Consolas, monospace;
}

/* ---- Réglages typographiques d'ensemble -----------------------------
   Ces règles ne changent aucune taille ni aucune couleur : elles
   corrigent la FAÇON dont le texte se pose. C'est ce qui distingue le
   plus nettement une page soignée d'une page ordinaire, sans rien
   déplacer. Chacune est ignorée par les navigateurs qui ne la
   connaissent pas, donc sans risque. */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Un titre ne doit jamais laisser un mot seul sur sa dernière ligne :
   le navigateur répartit les lignes pour équilibrer le pavé. */
:where(h1, h2, h3, .hero h1, .titre) {
  text-wrap: balance;
  letter-spacing: -.01em;   /* les grandes tailles respirent trop par défaut */
  line-height: var(--lh-serre);
}

/* Même idée pour les paragraphes : évite la ligne orpheline en fin de bloc. */
:where(p, .muted, .sub, .tag) { text-wrap: pretty; }

/* Les chiffres des tableaux et compteurs s'alignent en colonnes : sans
   cela, une valeur qui change fait sauter toute la ligne. */
:where(td, th, .val, .big, .compteur, .cat-count) {
  font-variant-numeric: tabular-nums;
}

/* ---- Apparition au défilement, disponible sur toute page liant ce fichier.
   L'état masqué n'est posé que si un script ajoute .js-reveal sur <html> :
   sans JavaScript, ou s'il échoue, la page reste entièrement lisible. Ne
   jamais masquer du contenu en CSS seul, il porte le référencement. ---- */
.js-reveal .reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity var(--t-long) var(--e-doux), transform var(--t-long) var(--e-doux);
  will-change: opacity, transform;
}
.js-reveal .reveal.vu { opacity: 1; transform: none; will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Focus clavier identique partout, visible sur fond sombre. ---- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ---- Note « regarde tes spams », sous les formulaires qui attendent une
   réponse de notre part. Définie ici et pas dans chaque page : les trois
   formulaires du site (offre, bienvenue, parrainage) doivent se ressembler,
   et une seule règle évite qu'ils divergent au fil des retouches. ---- */
.spam-note {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: var(--r-s, 10px);
  background: var(--accent-10, rgba(240, 162, 60, .1));
  border: 1px solid var(--accent-22, rgba(240, 162, 60, .22));
  color: var(--muted);
  font-size: var(--fs-xs, .8rem);
  line-height: 1.5;
  text-align: center;
}