/* =====================================================================
   VARIABLES DE BASE — combocombo
   ---------------------------------------------------------------------
   C'est LE fichier à ouvrir pour changer l'apparence générale du site.
   Modifie les valeurs ci-dessous, rien d'autre n'est nécessaire ici.
   ===================================================================== */

:root {

  /* --- COULEURS --------------------------------------------------- */
  --color-bg:      #EBEBEB;   /* fond du site                        */
  --color-text:    #ffffff;   /* date + boutons (affichés en difference) */
  --color-accent:  #ff4d2e;   /* couleur d'accent                    */

  /* --- TYPOGRAPHIE ------------------------------------------------ */
  --font-main: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Date (en haut de page) */
  --font-date:           "Instrument Sans", Helvetica, Arial, sans-serif;
  --font-size-date:      13px;
  --date-weight:         400;
  --date-letter-spacing: normal;
  --date-margin-top:     16px;     /* écart entre la date et le haut   */
  --date-blend-mode:     difference;  /* fusion de la date sur le fond */

  /* --- BOUTONS (liens en bas de page) ---------------------------- */
  --btn-radius:        4px;
  --btn-border-color:  #ffffff;    /* liseret blanc                     */
  --btn-gap:           8px;        /* espace entre les deux boutons     */
  --btn-margin-bottom: 44px;       /* écart entre les boutons et le bas */
  --footnote-margin-bottom: 16px;  /* écart entre la ligne d'info et le bas */
                                   /* (la ligne d'info est SOUS les boutons) */
  --btn-blend-mode:    difference; /* fusion de la rangée de boutons    */

  /* --- CURSEUR (croix « + », ordinateur) -------------------------- */
  --cursor-size:      22px;   /* taille de la croix                  */
  --cursor-thickness: 2px;    /* épaisseur des traits de la croix    */

  /* --- LOGO ------------------------------------------------------- */
  /* Largeur du logo sur ordinateur (s'adapte : min / idéal / max)    */
  --logo-width: clamp(150px, 32vw, 360px);
  /* Largeur du logo sur mobile / tablette tactile                    */
  --logo-width-mobile: 80vw;
  /* Mode de fusion du logo (difference = inversion sur le fond/images) */
  /* Valeurs possibles : difference, normal, exclusion, multiply...     */
  --logo-blend-mode: difference;

  /* --- ESPACEMENTS ------------------------------------------------ */
  --footer-padding: 30px;     /* marge sur les côtés (date + boutons) */

}