/* ══ Réglages du site solvipay.fr ══
   Changez une valeur ici, tout le site suit : couleurs, tailles de texte,
   arrondis, espaces et ombres ne s'écrivent pas dans les pages
   (seule exception : les coins du téléphone dessiné dans le héros).
   fonts/inter.css lit aussi ces réglages.
   Le mode sombre est plus bas : mêmes noms, autres valeurs.
   Pages branchées : toutes les pages françaises (accueil, en, tarifs, vérifier
   un client, guides, pénalités, pages légales, 404, /f/, /v/, /procedure).
   Les composants communs (barre du haut, boutons, point doré, titres, pied de
   page) sont dans web/site.css ; garde-fou : scripts/tests/coherence_site.test.mjs.
   Comment demander un changement : docs/design/GOUT.md. */
:root{
  /* ── Couleurs ── */
  --nuit:#081A2F;            /* fond bleu nuit : héros, bandeaux, pied de page */
  --nuit-clair:#0A2540;      /* haut du dégradé nuit, cartes posées sur la nuit */
  --bleu:#1366D6;            /* boutons pleins */
  --or:#E0A52E;              /* le point doré : un point ou un trait, jamais un fond */
  --or-texte:#8A6116;        /* or foncé, lisible sur fond clair (points des titres, coches) */
  --vert:#059669;            /* payé, réussi */
  --rouge:#B91C1C;           /* erreur, retard, risque */
  --orange:#92400E;          /* vigilance */
  --vert-fond:color-mix(in srgb,var(--vert) 10%,var(--surface));
  --rouge-fond:color-mix(in srgb,var(--rouge) 9%,var(--surface));
  --orange-fond:color-mix(in srgb,#D97706 12%,var(--surface));
  --info-fond:color-mix(in srgb,var(--bleu) 8%,var(--surface));    /* encadré « ce que fait SolviPay » */
  --info-bordure:color-mix(in srgb,var(--bleu) 18%,var(--surface));
  --info-texte:#2C4A6E;
  --fond:#FAFBFC;            /* fond des pages */
  --fond-alt:#F4F7FA;        /* une bande sur deux */
  --surface:#FFFFFF;         /* cartes, champs, bouton à contour */
  --texte:var(--nuit-clair); /* texte principal */
  --texte-doux:#44586E;      /* texte secondaire */
  --bordure:#E4E9F0;         /* traits et contours */
  --lien:var(--bleu);        /* liens dans le texte */
  --blanc:#FFFFFF;

  /* Sur fond bleu nuit (héros, bandeaux, pied de page) ; le mode sombre les reprend */
  --texte-nuit:#C3D2E3;      /* texte courant */
  --texte-nuit-doux:#8FA7C2; /* texte discret, liens du pied de page */
  --bleu-nuit:#8DB8F2;       /* bleu lisible : « Pay » du logo, liens */
  --vert-nuit:#34D399;       /* vert lisible : montant payé */
  --rouge-nuit:#F08C8C;      /* message d'erreur */
  --bordure-nuit:color-mix(in srgb,var(--texte-nuit) 14%,transparent);
  --bordure-nuit-forte:color-mix(in srgb,var(--texte-nuit) 28%,transparent);

  /* Survols : calculés à partir des couleurs ci-dessus, rien à régler */
  --bleu-survol:color-mix(in srgb,var(--bleu) 80%,var(--nuit));
  --lien-survol:color-mix(in srgb,var(--lien) 80%,var(--nuit));

  /* ── Logo (ne pas changer sans raison : c'est l'identité) ── */
  --logo-pay:#2E6FD8;        /* « Pay » de SolviPay */
  --taille-logo:21px;

  /* ── Tailles de texte (du plus grand au plus petit) ── */
  --taille-titre:clamp(34px,1.34vw + 28.8px,48px); /* grand titre de page ; 32 px sur petit téléphone (plus bas) */
  --taille-section:40px;                           /* titres de section, prix ; 30 px sur téléphone (plus bas) */
  --taille-intertitre:clamp(24px,2.6vw,28px);      /* titres des étapes, des cartes, montant */
  --taille-intro:clamp(17px,1.6vw + 2px,20px);     /* phrase d'introduction sous un titre */
  --taille-texte:16px;                             /* texte courant, champs */
  --taille-lecture:18px;                           /* texte des guides et articles (lecture longue) ; 17 px sur téléphone */
  --taille-bouton:15px;                            /* texte des boutons */
  --taille-petite:14px;                            /* menu du haut, notes, pied de page */
  --taille-mini:12px;                              /* étiquettes, badges */

  /* ── Arrondis ── */
  --arrondi-petit:12px;      /* boutons, champs, notification */
  --arrondi:16px;            /* cartes, cadres, panneaux */
  --arrondi-pilule:999px;    /* pastilles, badges, ronds */

  /* ── Espaces ── */
  --espace-1:8px;
  --espace-2:16px;
  --espace-3:24px;
  --espace-4:32px;
  --espace-5:48px;
  --espace-section:80px;     /* haut et bas de chaque section ; 52 px sur téléphone */
  --marge:24px;              /* marge à gauche et à droite de l'écran ; 16 px sur petit téléphone */
  --largeur:1120px;          /* largeur maximale du contenu */
  --largeur-lecture:760px;   /* colonne de lecture : guides, pages légales, pages /f/ et /v/ */

  /* ── Ombres ── */
  --ombre:0 24px 48px rgb(0 0 0 / .12);                                        /* éléments qui flottent : visuel du héros, menu */
  --ombre-douce:0 1px 2px color-mix(in srgb,var(--nuit-clair) 5%,transparent),0 10px 30px -14px color-mix(in srgb,var(--nuit-clair) 22%,transparent); /* cartes, captures des étapes */

  /* ── Polices ── */
  --police:"Inter",sans-serif;                    /* texte */
  --police-titres:"Manrope","Inter",sans-serif;   /* titres, boutons, prix */

  color-scheme:light dark;
  scrollbar-color:var(--texte-doux) transparent;
}
@media(max-width:720px){:root{--espace-section:52px}}
@media(max-width:640px){:root{--taille-section:30px;--taille-lecture:17px}}
@media(max-width:400px){:root{--taille-titre:32px;--marge:16px}}

/* ══ Mode sombre : le fond passe au bleu nuit, les bandeaux nuit restent plus sombres ══ */
@media(prefers-color-scheme:dark){
  :root{
    --fond:#0B2036;
    --fond-alt:var(--nuit-clair);
    --surface:#10294A;
    --texte:#E2EAF4;
    --texte-doux:var(--texte-nuit-doux);
    --bordure:var(--bordure-nuit);
    --or-texte:var(--or);
    --lien:var(--bleu-nuit);
    --lien-survol:color-mix(in srgb,var(--bleu-nuit) 70%,var(--blanc));
    --logo-pay:var(--bleu-nuit);
    --rouge:var(--rouge-nuit);
    --orange:#E8B55C;
    --vert-fond:color-mix(in srgb,var(--vert) 16%,transparent);
    --rouge-fond:color-mix(in srgb,#DC2626 16%,transparent);
    --orange-fond:color-mix(in srgb,#E8B55C 14%,transparent);
    --info-fond:color-mix(in srgb,var(--bleu-nuit) 8%,var(--surface));
    --info-bordure:color-mix(in srgb,var(--bleu-nuit) 20%,var(--surface));
    --info-texte:#BAD0EA;
  }
}