/* Jetons de design du site Lumo. Source : DA-SITE-LUMO.md.
   Toute couleur, police ou taille du site doit venir d'ici. */

@font-face { font-family: "Bricolage Grotesque"; src: url(/fonts/BricolageGrotesque.woff2) format("woff2"); font-weight: 500 800; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(/fonts/InstrumentSans.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url(/fonts/Nunito-ExtraBold.woff2) format("woff2"); font-weight: 800; font-display: swap; }

:root {
  /* Neutres */
  --fond: #F6F5F1;
  --surface: #FFFFFF;
  --encre: #0E1014;
  --encre-2: #3D4350;
  --encre-3: #5F6672;
  --filet: #E4E2DB;
  --filet-fort: #D6D3CA;

  /* Haut de page immersif */
  --canard: #083B38;
  --canard-2: #0A4642;
  --canard-3: #0C534E;
  --canard-4: #0F615B;
  --canard-5: #137068;
  --texte-sur-sombre: #CFE3DF;

  /* Marque */
  --turquoise: #2DD4BF;          /* aplats uniquement, jamais du texte sur clair */
  --turquoise-profond: #0B6B63;  /* texte et icônes turquoise sur clair */
  --turquoise-teinte: #D9F4EF;

  /* Bloc sombre « Vos données » */
  --texte-sur-encre: #B9BFC9;
  --carte-sombre: #171A20;
  --filet-sombre: #262A33;

  /* Familles et statuts (texte / fond) */
  --vert: #146C3E;    --vert-fond: #E1F3E8;     /* Payée, Banque */
  --bleu: #1E48C7;    --bleu-fond: #E6EDFD;     /* Envoyée, Registres */
  --orange: #A83E08;  --orange-fond: #FDE9DA;   /* En retard, Achats */
  --ambre: #8A5A00;   --ambre-fond: #FDF1CF;    /* URSSAF, Échéances */
  --violet: #5B2BC4;  --violet-fond: #EEE8FD;   /* CFE, Objectifs */

  /* Polices */
  --police-titre: "Bricolage Grotesque", system-ui, sans-serif;
  --police-texte: "Instrument Sans", system-ui, sans-serif;
  --police-marque: "Nunito", system-ui, sans-serif;

  /* Tailles (ordinateur) */
  --t-h1: 84px;
  --t-h2: 54px;
  --t-h3: 42px;
  --t-carte: 22px;
  --t-intro: 19px;
  --t-texte: 17px;
  --t-legende: 14px;

  /* Espaces */
  --marge: 80px;
  --section: 120px;
  --largeur-max: 1280px;

  /* Rayons */
  --r-pastille: 999px;
  --r-bouton: 14px;
  --r-carte: 20px;
  --r-panneau: 32px;

  /* Ombre des éléments flottants seulement */
  --ombre-flottante: 0 18px 40px -18px rgba(14, 16, 20, .35);
  --ombre-telephone: 0 40px 80px -30px rgba(14, 16, 20, .45);
}

@media (max-width: 1100px) {
  :root { --marge: 32px; --t-h1: 64px; --t-h2: 44px; --t-h3: 34px; }
}
@media (max-width: 720px) {
  :root { --marge: 16px; --section: 64px; --t-h1: 46px; --t-h2: 34px; --t-h3: 27px; --t-carte: 19px; --t-intro: 16.5px; --t-texte: 15.5px; }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--police-texte);
  font-size: var(--t-texte);
  line-height: 1.55;
  color: var(--encre);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--police-titre); font-weight: 700; margin: 0; }
a { color: var(--turquoise-profond); text-decoration: none; }
a:hover { color: var(--turquoise-survol); }
:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 2px; border-radius: 6px; }
img { max-width: 100%; height: auto; display: block; }
.num { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── Compléments (29/09/2026) ─────────────────────────────────────────
   Teintes présentes dans les maquettes validées mais absentes du jeu de
   départ. Elles vivent ici, pour qu'aucune couleur ne soit écrite ailleurs. */
:root {
  --blanc: #FFFFFF;
  --encre-liste: #23272F;           /* listes à coches */
  --lien-sur-sombre: #DDEFEC;       /* liens du menu sur le fond canard */
  --turquoise-survol: #084F49;      /* survol des liens turquoise profond */
  --icone-sur-encre: #10302D;       /* carrés d'icônes du bloc « Vos données », texte du bloc d'appel */
  --ecran-carte: #1B1F27;           /* petites cartes dans la carte foncée de l'écran */
  --ecran-legende: #8C94A1;         /* légende dans la carte foncée de l'écran */
  --ecran-segment: #EAE8E2;         /* fond des segments et des jauges de l'écran */
  --blanc-8: rgba(255, 255, 255, .08);
  --blanc-12: rgba(255, 255, 255, .12);
  --blanc-22: rgba(255, 255, 255, .22);
  --blanc-25: rgba(255, 255, 255, .25);
  --blanc-40: rgba(255, 255, 255, .40);
  --blanc-45: rgba(255, 255, 255, .45);
  --ombre-segment: 0 1px 2px rgba(14, 16, 20, .12);
}

/* ── Compléments vidéo (DA 7 bis) ─────────────────────────────────── */
:root {
  --voile-barre: rgba(14, 16, 20, .72);      /* barre de contrôle */
  --voile-soustitre: rgba(14, 16, 20, .82);  /* fond des sous-titres */
  --voile-fenetre: rgba(11, 23, 22, .78);    /* fond assombri derrière la fenêtre de démo */
  --halo-turquoise: rgba(45, 212, 191, .18); /* halo du bouton « Lire la présentation » */
  --ombre-fenetre: 0 40px 100px -30px rgba(0, 0, 0, .6);
}