/*
 * Feuille de Griotia, chargée JUSTE APRÈS main.css (jamais modifiée).
 * Charte « Purposium » de l'application : bleu #3965FA en fond (texte blanc 4,8:1),
 * encre marine #1B1B39, bleu doux #99B7FC sur fond sombre. Titres en Sora (le logo),
 * texte en Public Sans (l'application).
 * Toute surcharge d'une classe du modèle va dans @layer utilities (sinon les hover:btn-* cassent) ;
 * les règles maison portent le préfixe .gr-.
 */
:root {
  /* python3 palette.py "#3965FA" --texte */
  --color-primary-50: #f5f7ff;
  --color-primary-100: #e7edfe;
  --color-primary-200: #ced8fe;
  --color-primary-300: #acbefd;
  --color-primary-400: #7896fc;
  --color-primary-500: #3965fa;
  --color-primary-600: #3157d7;
  --color-primary-700: #2949b4;
  --color-primary-800: #213b91;
  --color-primary-900: #192c6e;
  /* L'encre de Griotia : textes, boutons sombres, bloc des paiements */
  --color-secondary: #1b1b39;
  /* Accents du pack (citron) ramenés au bleu doux de Griotia */
  --color-ns-green: #99b7fc;
  --color-ns-green-light: #e7edfe;
  /* Polices : le corps de la démo passe par cette variable */
  --font-inter-tight: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --gr-titres: "Sora", "Public Sans", ui-sans-serif, system-ui, sans-serif;
}

/* Les titres en Sora, comme le logo ; le texte courant reste en Public Sans */
h1, h2,
.text-heading-1, .text-heading-2, .text-heading-3, .text-heading-4, .text-heading-5 {
  font-family: var(--gr-titres);
  letter-spacing: -0.02em;
}

@layer utilities {
  /* Le pack met les boutons et badges en minuscules : on garde la casse écrite. */
  .btn, .badge { text-transform: none; }
  /* Texte secondaire à 76 % de l'encre (60 % ne se lit pas assez sur le gris clair : 4,2:1) */
  .text-secondary\/60 { color: color-mix(in oklab, var(--color-secondary) 76%, transparent); }
}

/* Logo « griotia » (le o en bulle de parole) : hauteur fixe, largeur libre */
.gr-logo { display: block; height: 30px; width: auto; }
footer .gr-logo { height: 34px; }

/* Bouton secondaire du héros, sur le bleu : contour blanc, texte blanc (4,8:1) */
.gr-btn-contour {
  border: 1px solid rgb(255 255 255 / 0.65);
  background: transparent;
  color: #fff;
}
.gr-btn-contour:hover { background: rgb(255 255 255 / 0.14); }

/* Les ancres de la barre tombent sous l'en-tête flottant, pas dessous */
section[id] { scroll-margin-top: 110px; }

/* Pages légales : des listes à puces et des liens soulignés */
.gr-juridique ul { list-style: disc; padding-left: 1.25rem; }
.gr-juridique ul li { list-style-type: disc; margin-top: 0.5rem; }
.gr-juridique a { text-decoration: underline; }

/* Étapes : les pastilles numérotées aux couleurs de Griotia (jaune et bleu doux ; la troisième garde le saumon du pack) */
:root { --color-ns-yellow: #ffd16b; }

/* Téléphone : la pastille « en ligne » du héros couvrait le texte des moyens de paiement */
@media (max-width: 47.99rem) { .gr-pastille { display: none !important; } }

/* Encaissement, sous le grand écran : la carte de paiement se cale sur le bas du bloc dégradé
   (sa place fixe de la démo tombait sur la liste, plus longue en français) */
@media (max-width: 63.99rem) { .gr-enc-tel { top: auto; bottom: 250px; } }
@media (min-width: 48rem) and (max-width: 63.99rem) { .gr-enc-tel { bottom: 290px; } }

/* Tarifs, sur téléphone : « 3 mois offerts » se range entre le titre et la bascule, droit et lisible */
@media (max-width: 39.99rem) {
  .gr-offerts { position: static !important; transform: none !important; translate: none !important; rotate: none !important;
                width: auto !important; margin: 0 0 16px !important; display: inline-block; }
}

/* Lisibilité (mesurée par cdp-lisibilite) : le texte courant du pack est l'encre à 60 %, soit 4,2:1 sur les fonds gris,
   sous le seuil de 4,5:1. Même couche « base » que le pack : les classes de couleur des blocs sombres gardent la main. */
@layer base {
  p { color: color-mix(in oklab, var(--color-secondary) 76%, transparent); }
}
@layer utilities {
  /* Étiquettes de section et liens : le bleu foncé de l'échelle (#3965FA ne fait que 4,2:1 sur le gris clair) */
  .badge-primary { color: var(--color-primary-600); }
}

/* Lien dans le texte : le bleu foncé de l'échelle (primary-600 n'existe pas en classe dans la feuille compilée) */
.gr-lien { color: var(--color-primary-600); }

/* Menu : la page où l'on se trouve se lit (« Tu es ici »), en encre pleine */
header a[aria-current="page"] { color: var(--color-secondary); font-weight: 500; }

/* Page Paiements : les fondus des bandes de logos prennent la couleur de la page (la démo les peint pour un fond gris) */
#moyens [class*="from-background-3"] { --tw-gradient-from: var(--color-background-1); }