/* ==========================================================
   LA LIBRE | Design tokens (web)
   Relevés sur www.lalibre.be (feuille styles.css?d=831)
   le 10 octobre 2026, complétés par le design system de l'app
   native (Figma, v1.0, octobre 2026).
   v2 : échelles 50 à 900, espacements, élévations, rayons,
   mouvement et couleurs fonctionnelles (méthode Refactoring UI).
   « calc » = palier calculé, absent du site.
   Contact : Raphaël Batista, directeur artistique IPM Group.
   ========================================================== */

:root {
  /* ---------- Marque ---------- */
  --llb-magenta:          #AC115D; /* couleur de marque, logo, liens, theme-color */
  --llb-magenta-dark:     #930A4D; /* hover */
  --llb-magenta-darker:   #630734; /* pressé, fonds profonds */
  --llb-magenta-light:    #BC407D;
  --llb-magenta-vivid:    #EF147F; /* nom d'origine dans le CSS : --color-secondary-darkest */
  --llb-marine:           #061E4D; /* secondaire : fonds éditoriaux (séries, grands formats) */
  --llb-marine-accent:    #08619B; /* départ du dégradé séries */

  /* ---------- Neutres ---------- */
  --llb-graphite:         #262729; /* texte courant ET bouton primaire */
  --llb-black:            #111111;
  --llb-grey:             #686868;
  --llb-grey-light:       #BDBDBD;
  --llb-grey-lighter:     #E0E0E0;
  --llb-warm-grey:        #E3E0E0;
  --llb-surface:          #F2F2F2;
  --llb-white:            #FFFFFF;

  /* ---------- Abonnement / payant ---------- */
  --llb-pay:              #F2C93D; /* bouton S'abonner */
  --llb-pay-dark:         #F7B500; /* badges, article offert */
  --llb-pay-darker:       #5D3C10; /* texte sur jaune */
  --llb-pay-light:        #FFE559;

  /* ---------- Rubriques (web) : primaire / foncé / secondaire ---------- */
  --llb-belgique:         #BD9E68; --llb-belgique-dark:      #8A6C39; --llb-belgique-2:      #DFBB7C;
  --llb-international:    #0B57C7; --llb-international-dark: #00327B; --llb-international-2: #0F5FD5;
  --llb-economie:         #0548AA; --llb-economie-dark:      #040533; --llb-economie-2:      #2E8BB0;
  --llb-planete:          #00A186; --llb-planete-dark:       #00715E; --llb-planete-2:       #00B596;
  --llb-culture:          #F24F4F; --llb-culture-dark:       #BF2424; --llb-culture-2:       #FF5656;
  --llb-debats:           #969696; --llb-debats-dark:        #666666; --llb-debats-2:        #A6A6A6;
  --llb-lifestyle:        #D13C6E; --llb-lifestyle-dark:     #800647; --llb-lifestyle-2:     #DF3D73;
  --llb-sports:           #66BB6A; --llb-sports-dark:        #389D3D; --llb-sports-2:        #70CE74;
  --llb-regions:          #F28237; --llb-regions-dark:       #D55D0D; --llb-regions-2:       #FF9955;
  --llb-network:          #298ECE; --llb-network-dark:       #005C97; --llb-network-2:       #61C2FF;

  /* ---------- Rubriques (app native, ajustées AA texte blanc) ---------- */
  --llb-app-belgique:      #927035;
  --llb-app-international: #0B57C7;
  --llb-app-economie:      #0548AA; /* rubrique Économie, nommée « Libre Éco » dans l'app */
  --llb-app-planete:       #00846E;
  --llb-app-culture:       #D53C3C;
  --llb-app-sports:        #218625;
  --llb-app-lifestyle:     #D13C6E;
  --llb-app-debats:        #757575;
  --llb-app-regions:       #C55205;
  --llb-app-network:       #137BBE;
  --llb-app-selection:     #F7B500;
  --llb-app-longs-formats: #752863;

  /* ---------- Typographie ---------- */
  --llb-font-title: "Manuale", Georgia, serif;                                   /* titres : 800 (600 pour les teasers) */
  --llb-font-base:  "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif; /* texte : 500 par défaut */

  /* ---------- Layout ---------- */
  --llb-container-md: 992px;
  --llb-container-lg: 1120px;
  /* breakpoints : 480 / 768 / 992 / 1024 / 1200 px (min-width) */

  /* ---------- Formes et ombres ---------- */
  --llb-radius:        0.25rem; /* boutons, menus */
  --llb-radius-pill:   9999px;  /* badges, tags arrondis */
  --llb-shadow-button: var(--llb-shadow-2);
  --llb-shadow-soft:   var(--llb-shadow-3);
  --llb-shadow-focus:  0 0 0 3px rgba(172,17,93,.5);
  --llb-ease:          cubic-bezier(.4,0,.2,1); /* durée 0.3s */

  /* ---------- Échelle magenta ---------- */
  --llb-magenta-50:   #FDF2F7;  /* calc */
  --llb-magenta-100:  #F9E1EC;  /* calc */
  --llb-magenta-200:  #F0C1D8;  /* calc */
  --llb-magenta-300:  #DF90B6;  /* calc */
  --llb-magenta-400:  #BC407D;
  --llb-magenta-500:  #C21A6C;  /* calc */
  --llb-magenta-600:  #AC115D;
  --llb-magenta-700:  #930A4D;
  --llb-magenta-800:  #630734;
  --llb-magenta-900:  #3E0421;  /* calc */

  /* ---------- Échelle marine ---------- */
  --llb-marine-50:   #EFF3FB;  /* calc */
  --llb-marine-100:  #D7E1F4;  /* calc */
  --llb-marine-200:  #9CC2E2;  /* calc */
  --llb-marine-300:  #61A2D1;  /* calc */
  --llb-marine-400:  #3482B6;  /* calc */
  --llb-marine-500:  #08619B;
  --llb-marine-600:  #0A2B6C;
  --llb-marine-700:  #08245C;  /* calc */
  --llb-marine-800:  #061E4D;
  --llb-marine-900:  #03132B;

  /* ---------- Échelle grey ---------- */
  --llb-grey-50:   #F7F7F7;
  --llb-grey-100:  #F2F2F2;
  --llb-grey-200:  #E0E0E0;
  --llb-grey-300:  #C6C6C6;
  --llb-grey-400:  #BDBDBD;
  --llb-grey-500:  #999999;
  --llb-grey-600:  #686868;
  --llb-grey-700:  #4B5568;
  --llb-grey-800:  #262729;
  --llb-grey-900:  #111111;

  /* ---------- Couleurs fonctionnelles ---------- */
  --llb-success:      #4D9E33;
  --llb-error:        #C73C49;
  --llb-live:         #DF0000;
  --llb-new:          #00FDC5;
  --llb-sponsor:      #E3E0E0;
  --llb-sponsor-ink:  #114A70;

  /* ---------- Espacements (base 4 px) ---------- */
  --llb-space-0-5: .125rem;  /* 2 px */
  --llb-space-1:   .25rem;   /* 4 px */
  --llb-space-2:   .5rem;    /* 8 px */
  --llb-space-3:   .75rem;   /* 12 px */
  --llb-space-4:   1rem;     /* 16 px */
  --llb-space-5:   1.25rem;  /* 20 px */
  --llb-space-6:   1.5rem;   /* 24 px */
  --llb-space-8:   2rem;     /* 32 px */
  --llb-space-10:  2.5rem;   /* 40 px */
  --llb-space-12:  3rem;     /* 48 px */
  --llb-space-16:  4rem;     /* 64 px */

  /* ---------- Rayons ---------- */
  --llb-radius-sm:     .25rem;  /* boutons, images, champs */
  --llb-radius-md:     .5rem;   /* notification */
  --llb-radius-menu:   0 0 10px 10px;
  --llb-radius-lg:     .925rem; /* bloc Lire aussi */

  /* ---------- Élévation ---------- */
  --llb-shadow-1: 0 1px 1px 0 rgba(0,0,0,.15), 0 2px 3px 0 hsla(0,0%,40%,.12);
  --llb-shadow-2: 0 1px 1px 0 rgba(0,0,0,.22), 0 3px 4px 0 hsla(0,0%,40%,.21);
  --llb-shadow-3: 0 3px 10px 0 rgba(68,5,36,.2);
  --llb-shadow-4: 0 10px 20px 0 rgba(30,30,30,.05);
  --llb-shadow-5: 0 1px 15px 0 rgba(0,0,0,.3);
  --llb-shadow-pressed: inset 0 2px 3px 0 rgba(0,0,0,.5);

  /* ---------- Typo : échelle des titres (.ap-Title, Manuale 800) ---------- */
  --llb-title-sm:  13px; --llb-title-sm-lh:  18px;
  --llb-title-md:  16px; --llb-title-md-lh:  20px;
  --llb-title-lg:  18px; --llb-title-lg-lh:  22px;
  --llb-title-xl:  21px; --llb-title-xl-lh:  32px;
  --llb-title-2xl: 27px; --llb-title-2xl-lh: 38px;
  --llb-title-3xl: 30px; --llb-title-3xl-lh: 40px;
  --llb-measure:   675px; /* colonne article */

  /* ---------- Mouvement ---------- */
  --llb-duration:      .3s;
  --llb-duration-fast: .15s;
}

/* ---------- Thème sombre du site (relevé sur la home) ---------- */
/* Appliqué par le site via les variables *-dark ; valeurs utiles :
   fond principal #1F1E1C, conteneurs #000000, fond secondaire #727272,
   texte principal #F1EDED, texte secondaire #D9D9D9, tags #F1EDED. */
[data-theme="dark"] {
  --llb-dark-bg:        #1F1E1C;
  --llb-dark-container: #000000;
  --llb-dark-bg-2:      #727272;
  --llb-dark-text:      #F1EDED;
  --llb-dark-text-2:    #D9D9D9;
}